👋 Всех приветствую!

✍ Этой первый пост в моем только что созданном канале Maxwell Coding.

Начать хочу с информации о том, что на моем Boosty вышли такие ролики:
1. Собеседую разработчика. Middle уровень. JavaScript и TypeScript
2. Рефакторинг проекта подписчика. TypeScript. React. React Native
3. Рефакторинг проекта подписчика. Redux Saga & Redux Toolkit

🔜 В ближайшее время планирую выложить ролик, где разбираю задачу с собеседования в OZON.

❗Также, в этом Telegram канале, буду с вами делиться полезной информацией из мира IT и моей работы. В основном конечно же по направлению Frontend разработки.

⚡ Будет очень много чего полезного и интересного!

📣 Полезный сайт для тех, кто работает с Next JS.

👨‍💻 Там вы найдете большой список примеров маршрутизации в Next.js с сопутствующим кодом и файловой структурой.
Например, динамические роуты, серверные компоненты, кэширование, и т.д.

🔗 Ссылка - https://nextjs-app-router-training.vercel.app/

☄️ Стриму быть!

▶️ Давайте встретимся завтра вечерком в воскресенье в 19:00 по мск.

👨‍💻 Продолжим работу над проектом, буду разбирать Next JS и переносить на него свой проект, который мы с вами недавно стартовали.

🔗 Ссылка на стрим - https://www.youtube.com/watch?v=9Ot1weoHh9M

😲 Node JS теперь на Next JS

Вот заснял Shorts:
https://www.youtube.com/shorts/RgJ2iLJ8Obc

🥳 Как вам новый JavaScript фреймворк?

🔗 Оригинальный пост: ссылка

🧐 Считаю, что в 2024 году, умение без проблем искать и читать информацию на английском, должно быть обычным явлением на пути к становлению опытным специалистом.

👨‍💻 Лично я, почти всю информацию на просторах интернета ищу как раз таки на английском. Знание английского очень сильно мне помогло повысить скорость и качество работы.

🔗 А вот некоторые источники:
- https://medium.com/
- https://dev.to/
- https://bytes.dev/
- https://thisweekinreact.com/
- https://overreacted.io/

🔍Недавно наткнулся на статью, где автор разбирает концепции современных JavaScript фреймворков.

🤔Что отличает его подход от остальных материалов, что я читал, это то, что он разрабатывает простенький фреймворк с нуля и тем самым отдельно реализует реактивность, а затем обновления DOM. В конце связывает два этих слоя между собой.

⚙️Параллельно в этом супе еще варятся такие штуки как Proxy API, WeakMap, HTML templates, и т.д.

☄️Как по мне, статья очень крутая. Ссылка тут.

🔥В JavaScript были добавлены такие крутые методы для массивов:

Array.prototype.with(index, value)

Возвращает новый массив, где на позиции index будет указанное новое значение value.

Вот пример:
Меняем в массиве возрастов значение на индексе 1 с 15 на 16:

const ages = [10, 15, 20, 25];

const newAges = ages.with(1, 16);
console.log(newAges); // [10, 16, 20, 25]
console.log(ages); // [10, 15, 20, 25] исходный массив остался неизменным

И вот еще:

Array.prototype.toReversed() // Изменяет порядок элементов в массиве на обратный не меняя исходный массив
Array.prototype.toSorted() // Сортирует массив не меняя исходный
Array.prototype.toSpliced() // Работает как .splice(), но исходный массив остается неизменным

Ссылки:
- with
- toReversed
- toSorted
- toSpliced

▶ Приходите завтра на стрим в 19:00. Задавайте вопросы. Буду работать над проектом своим.

https://www.youtube.com/watch?v=Y79bg7JWfHc

📣 Выложил видео, где разбираю задачу с собеседования в одну из крупных российских компаний.
☺️ Позиция - Frontend разработчик.

▶️ Данное видео доступно у меня на Boosty.

🔗 Ссылка - https://boosty.to/maxwellcoding/posts/6c18c942-d014-4998-a1ea-a1274dcfbe9f

🔜 Далее на Boosty выйдет разбор решения тестового задания также на позицию Frontend разработчика, но на этот раз уже в другую крупную компанию.

📣 Выложил на YouTube видео, где я собеседую подписчика по вопросам JavaScript и TypeScript на уровень Middle.

🖥 Я собрал список вопросов из собеседований, которые сам проходил.

🧐 Уверен, что вы найдете там такие вопросы, которые раньше не встречали.

👨‍💻 Контент будет очень полезен для подготовки к вашим собеседованиям.

🔗 Ссылка - https://youtu.be/1vuyPc5wmmQ?si=EKSMM7YywZlaq3Sv

🆕 В JavaScript появился новый Intl API.

Форматирование дат:
Подобно методу toLocaleDateString в объекте Date, Intl можно использовать для форматирования дат, но с ним мы получаем некоторые дополнительные опции, такие как timeZone.

const date = new Date(Date.now());

new Intl.DateTimeFormat("en-US", {
  timeZone: "America/Los_Angeles",
  minute: "numeric",
  hour: "numeric",
}).format(date);

// 9:45 AM (возвращает текущее время в указанной тайм зоне)

Форматирование чисел:

new Intl.NumberFormat("en-GB", {
  style: "unit",
  unit: "liter",
  unitDisplay: "long",
}).format(1); // '1 litre'

Форматирование списков:

const list = ["JavaScript", "PHP", "Python"];

new Intl.ListFormat(
  "ru-RU", 
  { style: "long", type: "conjunction" }
).format(list); // JavaScript, PHP и Python

🔗 Это еще не все. Почитать можно тут - ссылка.

❗AppCenter и CodePush ВСЁ!

📣 Компания Microsoft объявила о закрытии App Center, одного из основных инструментов для сборки мобильных приложений, который прекратит свою работу 31 марта 2025 года.

👨‍💻 Разработчикам, использующим App Center для сборок Android/iOS или для обновлений (с помощью CodePush), придется искать другие решения. Альтернативой App Center может стать EAS Build, а CodePush - EAS Update.

🥺 Я не мог обойти эту новость стороной, т.к. сам пишу аппки на React Native и пользуюсь App Center.

🔗 Подробнее можете почитать тут - ссылка.

▶ Приходите сегодня на стрим в 19:00. Задавайте вопросы. Продолжу работать над проектом.

https://www.youtube.com/watch?v=DhmIWr1LrMI

🆕 1 апреля 2024 года состоялся релиз Bun 1.1, который включает в себя ряд значительных улучшений и нововведений.

👩‍💻 Теперь у нас есть полная поддержка Windows, а это значит, что среда выполнения Bun, запуск тестов, менеджер пакетов и бандлер, теперь работают под Windows. И все это работает очень быстро.

🇬🇧 Почитать на английском - ссылка
🇷🇺 Почитать на русском - ссылка
▶️ Видео - ссылка

😒 Bun - это современная среда выполнения JavaScript типа Node.js, со встроенной поддержкой JSX и TypeScript. Она разработана с акцентом на быстром запуске, высокой производительности и самодостаточности. Внутри Bun есть транспилятор JavaScript, встроенный в среду выполнения. Это означает, что при работе с Bun можно запускать файлы JavaScript, TypeScript и даже JSX/TSX без каких-либо зависимостей.

✍️ Лично я сейчас работаю над материалом по миграции моего очень старого проекта с 👩‍💻 Create React App (JavaScript + NPM) на 👩‍💻 Vite (TypeScript + Bun).
🔜 Следите за анонсами, будет очень интересно.

▶ Сегодня продолжу работать над проектом на Next JS на стриме. Проведу в 19:00 по мск. Буду рад ответить на вопросы.

👨‍💻 С прошлого стрима у нас остались проблемы касательно сортировки данных пользователей по их активности на GitHub, баланса между SSR и CSR, дополнительно куда-то еще капнем, т.к. я только недавно начал работать с Next JS. Уверен, что будет очень интересно. Приходите!

https://www.youtube.com/live/Q-6eLMXeBlc

🚦Сигналы нативно в JavaScript.

✍️ Такое предложение было недавно создано и сейчас находится на первой стадии рассмотрения. (Стадии)

Сигналы используются в реактивном программировании. Они помогают отслеживать изменения значений, после чего автоматически происходит изменение данных, использующих эти значения. Данный подход реализован в современных JavaScript фреймворках. (Что такое реактивность?)

Но в этом посте мы говорим исключительно про JavaScript вне фреймворков.

Проблема:

let a = 10;
const b = a + 5;

console.log(b); (*)

a = 50;

Мы знаем, что на строке *, даже после переопределения значения переменной a (=50), переменная b сохранит старое значение.

Если сигналы станут частью JavaScript, у нас появится возможность автоматически менять одни значения на основе других. Вот как это выглядит:

const a = new Signal.State(0);
    
a.set(12);
        
effect(() => {
  const b = a.get();
    
  console.log(b);
})
    
a.set(15);

Функция effect следит за изменением значений своих зависимостей (не напоминает что-то? 👀) и выполняет код внутри себя. В итоге сперва мы в консоли получим 12, а затем 15.

👨‍💻 Кстати, можно поиграться уже с сигналами тут.

😎 И под конец, разработчики библиотек/фреймворков будут уже иметь нативный слой реактивности прямиком из JavaScript и смогут его внедрить в свои решения без надобности в очередной раз пилить все вручную.

⚡️Мой студент с текущего потока Intense IT устроился на стажировку.

Стек: JavaScript, React.

👏 Приятно видеть, когда желание и целеустремлённость в итоге приводят к результатам.