⚡️Мой студент с текущего потока 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

🤔 Говнокод или находчивость?

🖥 К слову о говнокоде - надо ж его порефакторить. Пользуясь случаем, записал вступительный ролик на эту тему.

📱 Вот ссылка - https://www.youtube.com/shorts/FoftSObihss

📖 Читаю сейчас одну книжку про рефакторинг, буду делиться оттуда инфой. Ну а если тебе такое не интересно, то не подписывайся.

👩‍💻 Для тех, кто не в курсе.

🆕 В JavaScript добавили новые методы для Set.

⌨️ Если ранее вам нужно было вручную выполнять какие-то операции с несколькими Set для их сравнения, то сейчас это все упаковали в готовые методы.

Вот они:
1. set1.intersection(set2) - возвращает новый Set с совпадающими элементами из set1 и set2;
2. set1.union(set2) - возвращает новый Set со всеми элементами из set1 и set2;
3. set1.difference(set2) - возвращает новый Set с НЕсовпадающими элементами из set1 и set2;

🔗 С полным списком можно ознакомиться тут - ссылка.

🌐 Кстати, доступны они для браузеров, начиная с данных версий:
- Chrome 122
- Safari 17
- Firefox 127

👩‍💻 На конференции React Conf 2024, команда React Native официально заявила, что теперь Expo является рекомендуемым фреймворком, с которого стоит начать пилить мобильные приложения на React Native. Все потому, что Expo не стоял на месте - улучшался, добавлялись новые фичи, устранялись проблемы.

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

🤳 Если вы присматриваетесь к мобильной разработке и ваш путь лежит к RN, то стоит это иметь в виду.

❓ Для тех, кто не в курсе, Expo это фреймворк для разработки приложений на React Native, призванный упростить жизнь разработчикам. К примеру, весь фокус идет на разработку на JavaScript, React и React Native, позволяя избежать надобности ковыряться в нативной части (Kotlin/Swift).

👨‍💻 Я уже третий год разрабатываю приложения на RN, и помню, как Expo был проблемным. Поэтому, от него либо отказывались сразу на старте проекта, либо позже эджектились по мере появления задач, которые уже он не мог решать (expo eject).

💭 Если тут есть кто-то, кто пишет на RN, напишите в комментариях что вы думаете об этой новости. Поделитесь своим опытом - что сейчас разрабатываете, и т.д.

👩‍💻 StackOverflow - опрос 2024.

🗓 В мае 2024 года более 65 000 разработчиков ответили на вопросы ежегодного опроса от StackOverflow, касательно разработки, технологий и инструментов, которые они используют и хотят изучить, искусственного интеллекта и опыта разработки на работе.

Вот некоторые результаты за последний год:

- 65 437 разработчиков из 185 стран участвовали в опросе;
- 62.3% из них использовали 👩‍💻 JavaScript;
- 48 019 из них поделились информацией о своих зарплатах;
- Согласно 82% ответов, онлайн-ресурсы являются главным выбором разработчиков для изучения кодинга;
- Erlang разработчики занимают первое место по самой высокой медианной зарплате 💰, далее тройку замыкают Elixir и Clojure. JavaScript даже и рядом не стоит 😭.

🔝 Топ стран:
1. США 🇺🇸
2. Германия 🇩🇪
3. Индия 🇮🇳
4. Великобритания 🇬🇧
...

🔗Ознакомиться с полной информацией можно тут - ссылка