▶ Приходите сегодня на стрим в 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.

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

👩‍💻 Сложно ли найти работу на React? Особенно в качестве первой работы. Кто-то говорит, что сложно, а кто-то нет.

⌨ В любом случае, на начальном этапе советую откликаться не только на вакансии по React, но и React Native.

📱React Native это React фреймворк для разработки мобильных приложений. Очевидно, что такой подход увеличит шансы найти работу.

👨‍💻 Я свою первую работу нашел на React Native зная только HTML, CSS, JS, и React. И так сложилось, что какую бы работу я после ни искал, везде попадается проект на React Native.🆘

📱 Снял shorts на эту тему: https://www.youtube.com/shorts/AbQ-Dqwfh7c

👩‍💻 Вышла минорная версия React - 18.3. Она не содержит никаких критических изменений, но будет выдавать новые предупреждения об устаревших функциях, чтобы помочь нам перейти на React 19.

⚠️ Предупреждения, например, касаются использования строковых рефов, defaultProps в компонентах FC/memo или при использовании SPREAD с ключами. Подробнее ниже по ссылкам.

👩‍💻 PR - ссылка
👩‍💻 Chagelog - ссылка

⌨️ Вам когда-нибудь доводилось пользоваться методом массивов .fill? Данный метод позволяет заполнить часть или все элементы массива одним и тем же значением.

🧐 Когда у нас есть современные методы массивов, мы, естественно, начинаем избегать использования обычных циклов for в пользу .map, .reduce и т. д.

👨‍💻 Допустим, мы хотим выполнить функцию произвольное количество раз, скажем, 10. Как это сделать, избежав использования цикла for? Первое, что приходит в голову - использование Array конструктора с .map.

Array(10).map(() => {
  
}) // [,,,,,,,,,]

😞 Если вы запустите этот код, то заметите, что он не работает. При выполнении Array(10), создается массив из 10 незаданных или «пустых» значений. И методы массивов не будут работать с пустыми значениями.

👍 Именно здесь нам поможет .fill.

Array(10).fill().map(() => {
  
}) // [undefined, undefined, ..., undefined]

👍 Тут мы уже получим массив из 10 неопределенных (undefined) элементов, а не пустых.

😮 Я только что узнал, что у браузеров есть встроенный таймер отмены запроса.

fetch('https://someApi.com' {
  signal: AbortSignal.timeout(5000),
})

⌛ Если запрос займет больше 5 секунд, то он автоматически отменится и завершится с ошибкой DOMExceptionError , где error.name будет равен строке TimeoutError.

🧐 Но если нам нужен более гибкий вариант, то можно использовать AbortController.

const controller = new AbortController();

setTimeout(() => {
  controller.abort('Что-то пошло не так')
}, 5000);

fetch('https://someApi.com' {
  signal: controller.signal,
})

⚠️ Текстом ошибки будет то, что мы передали в .abort().

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

📣 Держите крутое видео:
- Какую структуру данных выбрать? Массив или Объект?
- Как эффективнее экономить память в проектах на JavaScript?

⌨️ Я ответил на эти вопросы в ролике, где рефакторю проект подписчика. Видео залил на свой Boosty.
🔗 Держите ссылку.

⚡️Напоминаю, что на на моем Boosty также есть следующее:
- Задача с собеседования на Frontend позицию. JavaScript. Алгоритмы: разбор плохого кода и рефакторинг на более эффективный;
- Рефакторинг проекта подписчика. TypeScript. React. React Native: улучшаем типизацию, линтинг, устраняем баги, и оптимизируем код;
- Рефакторинг проекта подписчика. Redux Saga & Redux Toolkit: связываем Redux Toolkit с Redux Saga с нуля, устраняем баги, типизацию, и т.д.

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

👨‍💻 Как поживает ваш код, а в частности функции?

📱 Снял shorts, где объясняю то, что на скриншоте.

🔗 Ссылка - https://www.youtube.com/shorts/AfXJfJJttBs

☄️ Еще один студент с текущего потока Intense IT устроился на работу.

👩‍💻 Стек: Next JS, TypeScript.

👏 Курс только на днях закончился и студенты еще не успели даже поработать над финальным проектом.

⌨️ Сейчас со студентами находимся на этапе подготовки резюме и поиска работы.

✍️ Не секрет, что тут еще важную роль играет сопроводительное письмо. Своим студентам и всем, кто ко мне обращается за помощью, я всегда настоятельно рекомендую потратить немного времени на его оформление.

📕 Рекомендую данную статью, как источник вдохновения. Там содержатся очень крутые советы по этому поводу.

💬 Ну а если у вас есть какие-то вопросы, то приглашаю в комментарии к этому посту.

👩‍💻🥷 Наткнулся на расширение VS Code под названием Console Ninja.

🖥 Оно позволяет выводить данные прямо в среде разработки без надобности переключаться на браузер. В дополнение к этому есть еще и возможность просматривать историю изменений.

🔗 Сайт:
https://console-ninja.com/

📱 Снял Shorts с демонстрацией:
https://www.youtube.com/shorts/SN3SRJefxb0

Пошаговая инструкция по тому, как выложить проект на 👩‍💻 React и 👩‍💻 Vite на GitHub Pages.

https://www.youtube.com/watch?v=gbpT7B-YjRY

🧐 Все мы проходили тему DOM при изучении JavaScript. И все мы знаем, что в JavaScript HTML атрибутам соответствуют определенные (чаще одноименные) свойства.

Мы ссылаемся на атрибут говоря об HTML, на свойство - о JavaScript.

Освежим память:

<input type="text" value="123" />

<script>
  const input = document.querySelector('input');
  console.log(input.value); // "123"
</script>

😞 Но не всегда все работает так очевидно, как в примере выше. Атрибуты и свойства это совершенно разные вещи. У нас может быть атрибут и одноименное свойство, но указывать они будут на разные значения.

Например:

<div foo="bar">…</div>

<script>
  const div = document.querySelector('div[foo=bar]');

  console.log(div.getAttribute('foo')); // 'bar'
  console.log(div.foo); // undefined

  div.foo = 'hello world';

  console.log(div.getAttribute('foo')); // 'bar'
  console.log(div.foo); // 'hello world'
</script>

Запись div.foo изначально дала результат undefined, потому что атрибут foo мы сами придумали - его нет в спецификации как например style, class, id, и т.д.

А метод getAttribute, как видно, получает фактическое значение атрибута foo.

И это не единственный подобный нюанс. Подробнее вы можете почитать тут:

https://jakearchibald.com/2024/attributes-vs-properties/

😱 Уже третий из моих студентов с текущего потока Intense IT устроился на работу.

👩‍💻 Стек: JS, React.

⌨️ Остальные на подходе.

🙊 Меня пригласили выступить на Митапе и поделиться знаниями/опытом, разобрав какую-то тему. Заполните форму и поделитесь своим мнением о том, что бы вы хотели услышать от меня, если бы посетили данный Митап? Буду благодарен.

⌨️ Немного обо мне: Frontend разработчик, 4 года опыта, грейд - Стронг Мидл/Синьор. В основном работаю на следующем стеке: JavaScript, TypeScript, React, Redux, React Native. Имею опыт как личный, так и командный (плюс еще в международных командах). Уровень владения английским - C1.

📅 Пока что точной даты, когда состоится данное мероприятие, нет. Как будет информация, сразу поделюсь на канале.

🔗Держите ССЫЛКУ на форму.

⌨️ Наконец я добрался до моего старого проекта, с которого начинал свой 📱 YouTube канал, и снял такой контент:

1. Перенес проект с шаблона Create React App на 👩‍💻 Vite с поддержкой 👩‍💻 TypeScript и 👩‍💻 Bun.
2. Отрефакторил, чтобы проект запустился;
3. Залил все на GitHub и открыл PR, чтобы вы тоже могли глянуть код.

🔥 Дальнейшие планы:
1. Переписать все на TypeScript;
2. Обновить библиотеки (а значит еще переписать кучу кода);
3. Обновить UI

🙊 Дайте знать, что вам еще было бы интересно.

🔗Ссылка на видео:
https://youtu.be/bXXcV_XLAEU