▶️ Вторник/3 сентября/19:00 по МСК. Провожу стрим!

😎 Буду кодить тот же самый коммерческий FullStack проект - Админ панель.

🖥 Стек технологий:
- React
- TypeScript
- React Admin
- Firebase

💼 Будут реальные боевые задачи, рефакторинг, и т.д. и т.п.
🙊 Буду читать чат и отвечать на вопросы.

🔗 Ссылка на стрим.

Встречаемся через 30 мин 😎

☕️ Что думаете?

Я обычно интересовался у рекрутеров о формате собеса: общие вопросы будут и (или) технические тоже. Вроде всегда отвечали честно и я готовился к тому, что ожидал.

Но я никогда не спрашивал конкретно о чем могут спросить на тех. собесе, вот как на скриншоте. У вас такое было? Норм вообще так спрашивать?

☕️ Когда чашка кофе с утра выпита, но хочется еще - приходит на помощь декаф.

▶️ Сегодня в 19:00 по МСК. Стрим! Буду кодить. Отвечу на вопросы.

🔗 Ссылка на стрим.

🌚Дополнение к моему посту ранее о рефакторинге (Ссылка):

- Зачем разработчику рефакторинг? (Видео)
- Зачем бизнесу рефакторинг? (Видео)

📖 Далее продолжу делиться полезной инфой по мере чтения книжки.

🛑Подпишись, чтобы не пропустить.

👩‍💻 Атомарные коммиты - маленькие шаги в разработке

☕️ Такие коммиты представляют из себя минимально возможные изменения, которые мы можем зафиксировать.

⭐️ Преимущества:

🛑С их помощью мы можем развивать и менять кодовую базу, держа её при этом валидной в каждый момент времени. Т.е. каждый такой коммит представляет из себя такое состояние проекта, которое запускается и работает без багов;
🛑Когда код валиден в каждом из коммитов, мы можем «путешествовать во времени» по репозиторию, переключаясь между разными коммитами;
🛑Маленькие шаги побуждают декомпозировать задачи на более простые;
🛑Возможность частой интеграции (Continuous Integration) - маленькие изменения часто сливаются в основную ветку, позволяя команде чаще синхронизировать изменения в коде между собой;
🛑Если это рефакторинг, то в любой момент можно его отложить и переключиться на более срочную задачу типа фикса багов на продакшене;
🛑И напоследок, маленькие шаги проще описывать в сообщениях к коммитам. Скоуп таких изменений укладывается в одно-два предложения, поэтому легче описать их смысл коротко и точно.

👍 Как я коммичу на примере функции:
🛑Написал функцию - коммит;
🛑Вызвал эту функцию в нужных местах - коммит;
🛑Изменил логику функции - коммит;
🛑Отформатировал код (eslint, prettier) - коммит.

🙅‍♂️ Как не стоит делать:
🛑Смешивать изменения логики функции с форматированием кода. Это совершенно разные по смыслу задачи;
🛑Создал функцию, вызвал её где нужно, и в том файле тоже параллельно сделал какие-то изменения.

📖 Далее продолжу делиться полезной инфой по мере чтения книжки.

🛑Подпишись, чтобы не пропустить.

▶ Сегодня в 19:30 по МСК. Стрим! Поработаю над импортом таблиц. Порефакторю код. Отвечу на вопросы.

🔗 Ссылка на стрим.

▶ Ночной лайтовый стрим сегодня в 19:30 по МСК! Продолжу работать над импортом таблиц. Порефакторю код. Отвечу на вопросы.

⌨️ Прошлый стрим был очень интересный: задавали вопросы, я решал интересные задачки, и впервые меня одновременно смотрели 20+ человек.

🔗 Ссылка на стрим.

🏃‍♂️Задерживаюсь на 10-15 минут

▶ Стрим сегодня в 19:00 по МСК.

🔗 Ссылка

📖 Давно собрал список конкретных тем с ссылками на документацию, которые необходимо знать, чтобы приступить к освоению React.

💼 Каждую из этих тем я разбирал, когда еще преподавал. И не одна десятка моих студентов через них прошла и в итоге устроилась на работу.

🔗 Список тут - ссылка.

📱 Для тех, кому комфортнее видеоуроки:
- Верстка - видео
- JavaScript - видео

❗️Но не забывайте, что чтение документации и просмотр видеоуроков можно совмещать, если в одном из этих источников вы на чем-то застряли.

🛑Ну и конечно же подпишитесь на канал, чтобы не пропускать полезную инфу.

▶ Стрим сегодня вечером в 19:00 по МСК.

🔗 Ссылка

📖 Возможности встроенных API (цитирую из книги)

Кроме возможностей языка полезно помнить о функциях стандартной библиотеки и доступных встроенных API. Правильно подобранная функция или структура данных поможет сделать код эффективнее, чище и короче.

Например, во фрагменте ниже мы можем упростить самописную сериализацию формы с помощью FormData :

// Многословный ручной обход всех полей со значениями:
const username = form.querySelector('[name="username"]').value;
const password = form.querySelector('[name="password"]').value;

const data = { username, password };

// Мы можем заменить на вызов стандартного API:
const data = Object.fromEntries(new FormData(form));

Количество кода после изменений уменьшилось, а сам код стал устойчивее к изменениям и расширению функциональности. Например, после рефакторинга нам не потребуется вручную обновлять сериализацию при добавлении нового поля в форму:

// Раньше нам бы пришлось обновлять объект руками:
const email = form.querySelector('[name="email"]').value;
const data = { username, email, password };

// Сейчас же FormData дополнит данные самостоятельно,
// обновлять код вручную не потребуется.

📖 Одинаковые имена у разных сущностей

При выборе имен для переменных/классов/функций и т.д., стоит исходить из того, в чем конкретный смысл данной сущности.

// Здесь `user` - это объект с данными пользователя:
function isOldEnough(user, minAge) {
  return user.age >= minAge;
}

// А тут — имя:
function findUser(user, users) {
  return users.find(({ name }) => name === user);
}

С первого взгляда их сложно различить, потому что имена «намекают», будто переменные значат одно и то же. Это может вводить в заблуждение; нам придётся помнить, что внутри функции findUser переменная user относится не к объекту пользователя, а к имени.

// Лучше выразить смысл переменной точнее прямо через имя:
function findUser(userName, users) {
  return users.find(({ name }) => name === userName);
}

Одинаковые имена у разных сущностей особенно вредят, если они находятся рядом или используются близко друг с другом. Общий контекст лишь усиливает ощущение, что одинаковое имя отвечает за одинаковый смысл.

🛑Подпишись, чтобы не пропустить полезную инфу.

📚 Вышло 2-е издание книги Грокаем Алгоритмы. А мне бы сперва 1-е дочитать. 👀

🖥 Подробнее на Хабре

▶ Стрим сегодня вечером в 19:00 по МСК.

⌨️ Поработаем над функционалом по сжатию картинок, чтобы подгружать их на сервак в оригинальном и сжатом форматах. Все это делается для оптимизации прорисовки в приложении.

🔧 Чекнем какие есть готовые либы для решения данной задачи.

🙊 Буду читать чат и отвечать на вопросы.

🔗 Ссылка на стрим.

▶ Го на стрим сегодня в 19:00 по МСК. Продолжу работать на задачами с прошлого стрима.

🔗 Ссылка на стрим.

▶ Стрим как обычно в 19:00 по МСК. Можно сказать, что я уже подошел к заключительной стадии проекта на этапе MVP. Сегодня будет много рефакторинга JavaScript/TypeScript.

🙊 Также буду читать чат и отвечать на вопросы.

🔗 Ссылка на стрим.

🏆 Самый популярный язык программирования

В этом году 👩‍💻 Python стал самым распространённым языком программирования на GitHub вместо 👩‍💻 JavaScript. За ними в топе идут 👩‍💻 TypeScript и 👩‍💻 Java.

Также растёт востребованность языков для системного программирования вроде 👩‍💻 Rust.

На 92% выросла популярность инструмента Jupyter Notebook. Напишите в комментариях, если кто-то уже работал с этим сервисом, и поделитесь впечатлениями.

🖥 Подробнее

📊State of Frontend 2024. Результаты опроса по состоянию Frontend за 2024 год от The Software House.

✏️ Опрос получил 6028 ответов от специалистов из 139 стран. Ниже приведу только топ 3 из всех ответов на некоторые вопросы.

🛑Какая у вас позиция?
1️⃣Full-stack Developer - 33.5%
2️⃣Senior Frontend Developer - 32.2%
3️⃣Mid Frontend Developer - 20%

🛑Какой у вас формат работы?
1️⃣Удаленка - 44.5%
2️⃣Гибридный - 32.2%
3️⃣Офис - 12.8%

⏺ В некоторых вопросах ниже я опущу проценты, т.к. они еще включают в себя такие критерии, как "использовал и понравилось", "использовал и не понравилось", "хочу изучить в будущем", и т.д.

🛑Какие фреймворки вы использовали?
1️⃣React
2️⃣Vue
3️⃣Svelte

🛑Какие библиотеки вы использовали для валидации данных?
1️⃣zod
2️⃣joi
3️⃣class-validator

🛑Какие инструменты для стилизации вы использовали?
1️⃣Чистый CSS
2️⃣Sass/SCSS
3️⃣Tailwind CSS

🛑Какое решение для дизайн системы вам больше всего нравится?
1️⃣shadcn/ui - 28.1%
2️⃣MUI / Material UI - 21.5%
3️⃣Bootstrap - 11.7%

🛑Какой ваш любимый редактор кода?
1️⃣Visual Studio Code - 75.1%
2️⃣JetBrains IDE (eg. WebStorm) - 17.8%
3️⃣Vim - 3.1%

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

🛑И не забудь подписаться.