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

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

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

🛑С их помощью мы можем развивать и менять кодовую базу, держа её при этом валидной в каждый момент времени. Т.е. каждый такой коммит представляет из себя такое состояние проекта, которое запускается и работает без багов;
🛑Когда код валиден в каждом из коммитов, мы можем «путешествовать во времени» по репозиторию, переключаясь между разными коммитами;
🛑Маленькие шаги побуждают декомпозировать задачи на более простые;
🛑Возможность частой интеграции (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%

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

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

🥊 Необычные вопросы с собеседований или как отсеять накрутчиков

👦 Давным давно, когда я ещё вкатывался в Frontend, проходил собес на стажировку в одну индусскую компанию. И вот интервьюер задаёт мне такую устную задачку:

Есть здание в 100 этажей и у тебя мяч. Начиная с определённого этажа, если сбросить мяч, он лопнет. Нужно определить какой это этаж.

⚔️ Самое первое, что пришло мне в голову, это грубое решение - начать с первого этажа сбрасывать мяч, поднимаясь вверх, пока не дойдешь до нужного.

🧠 Затем, я предложил иное решение - а что если мы начнем с середины? Интервьюер одобрительно кивнул головой.

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

✏️ А что вы думаете на счет такого типа вопросов? Помогут ли они на самом деле отсеять недобросовестных или слабых соискателей?

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

🤖Появился китайский конкурент ChatGPT — чат-бот Qwen.

🖥 На выбор доступны 8 моделей, две из которых с поддержкой распознавания изображений и одна (Turbo) — с входным контекстом размером 1 миллион токенов.

⚡️ Работает полностью бесплатно и без VPN. Для регистрации хватает иметь email.

⌨️ Говорят, что очень хорошо помогает по кодингу.

😎 Я обычно прибегаю к помощи Chat GPT иногда по работе. Теперь немного поиграюсь и с этой нейронкой. Посмотрим, как она себя покажет. Позже поделюсь результатами.

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

🥷 Вопросы/задачи с собесов не всегда могут адекватно оценить уровень кандидата. Ниже процитирую одну историю из Linkedin.

Самый умный разработчик, которого я когда-либо нанимал, провалил кодинг тест.

Вот почему:

Тест не проверял то, что было важно больше всего - решение задач, креативность и адаптируемость.

История:

У нас был кандидат, который поразил нас во время дискуссий и решения реальных задач, но он провалил whiteboard задачи (это когда надо решать без помощи IDE).

Вместо того, чтобы списать его со счетов, мы поступили так:
- Проанализировали его портфолио;
- Обсудили реальные задачи;
- Провели сессию парного программирования.

Результат?

Он не только преуспел в этой роли, но и стал наставником, ведя критически важные проекты и поднимая на ноги всю команду.

Это стало для меня важным уроком:

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

Вместо этого нам следует рассмотреть следующие варианты:
🛑Проектные задания, повторяющие реальные задачи;
🛑 Обзоры портфолио, которые подчеркивают прошлые достижения;
🛑 Совместные упражнения, такие как парное программирование.

✏ А что вы думаете на счет этой истории?

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