Александр Ламков — Friendly Frontend

🆕 #12 Кастомные хуки в React: как выносить логику в отдельные функции 📺 [Смотреть на YouTube] 📝 [Смотреть на Дзен] 📺 [Смотреть на Rutube] Продолжаем наводить порядок в To Do List. Вынесем бизнес-логику задач из контекста в кастомный хук useTasks, а затем ещё сильнее декомпозируем код: добавим хуки useIncompleteTaskScroll и useTasksLocalStorage. Объясняю, зачем всё это нужно, и как такие приёмы упрощают работу над реальными проектами. 📱 А на Boosty уже вышел следующий урок! ⚡️ Хочешь без ожидания? Получи весь курс (22 урока) сразу #анонс_видео #react #react_курс

💪Ваша речь тимлида — инструмент неуязвимости. Научитесь им управлять. Слова, сказанные на автопилоте, могут тихо саботировать ваши цели и разрушать доверие команды. Пора превратить их в осознанный инструмент влияния!На бесплатном вебинаре от курса «Team Lead» вы узнаете:→ Как речь лидера становится системой безопасности команды→ Какие фразы-убийцы демотивируют даже сильных специалистов→ Антихрупкие формулировки, которые мотивируют и вдохновляют→ Готовый чек-лист «Речь неуязвимого лидера» для сложных ситуацийСпикер: Андрей Волков (Тимлид в крупной американской IT-компании) — знает, как словами строить лояльность, а не сопротивление.Регистрируйтесь сейчас - напомним накануне: регистрация→ Полную систему управления командой, включая инструменты обратной связи, 1-на-1 встречи и работу с сопротивлением, вы освоите в модуле «Управление командой» на курсе «Team Lead».#рекламаО рекламодателе

😔 Напоминание: стрим уже сегодня! В 20:00 МСК продолжаем вёрстку макета Foodieland— двигаемся дальше с того места, где остановились. Всё — вживую, без монтажа, с комментариями по ходу. 📍 Где смотреть: [YouTube] и ре-стрим на [Rutube] 🎧 По традиции — отвечаю между делом на вопросы в чате.

🔥 Скидка 50% на курс продлена! Бандл из двух курсов «Современная вёрстка + Git» — сейчас снова участвует в распродаже! 🖱 Stepik запустил акцию к «Чёрной пятнице», и скидка 50% действует до 5 декабря включительно. Если вы хотели пройти мой курс по вёрстке на JSX и SCSS и заодно прокачать работу с Git — самое время. После 5 декабря цена вернётся к обычным 2998 ₽. 🙂 Цена сейчас: 1499 ₽ 👉 Пройти курс: Современная вёрстка и Git — практический интенсив

🎯 Почему я не пишу ради охвата и что считаю «успешным постом» У Telegram-каналов есть своя магия: иногда делаешь пост на полчаса между делом — а он разлетается. А бывает, вылизываешь, редактируешь, перечитываешь — а реакция тишина. Раньше я от этого дёргался:

«Наверное, надо писать короче» «Надо делать больше мемов» «Надо ставить хук в первом абзаце, а лучше — в заголовке» «Может, вообще перейти на формат “5 фактов про”»

А потом я успокоился. И понял, ради чего я вообще пишу. ✅ Успешный пост для меня — это не тот, что набрал кучу просмотров А тот, после которого: – мне написал человек, сказав: «Вот это прям попало в точку» – кто-то спросил в личку: «А можешь подробнее объяснить вот это место?» – кто-то переслал пост коллеге со словами «вот, почитай» – я сам через пару месяцев перечитал и подумал: «Чёрт, это и правда неплохо сформулировано» 📉 А охваты? Я за ними слежу — но без фанатизма. Если начинать писать ради показателей, то очень быстро скатишься в общее: – посты с нейтральными темами – безличные советы – «вода под SEO», только в Telegram-обёртке И аудитория начинает расти, но… отклик исчезает. А мне не хочется цифры. Хочется диалога. 📌 Вывод Писать для охвата — легко. Писать для людей, которые читают тебя не первый месяц — сложнее. Но и намного интереснее. ❓ Если вы тоже ведёте блог, то бывает у вас такое, что "по лайкам не зашло, а по реакции — один из самых важных постов"? Поделитесь, если откликается. #рефлексия

🤩 Лайв-вёрстка без монтажа: Foodieland, JSX, Minista, Vite Продолжаем серию стримов по вёрстке макета Foodieland. На прошлых эфирах мы уже почти доверстали главную страницу, остановились на InstagramView — теперь двигаемся дальше и продолжаем с того места, где остановились. 🗓️ Когда: 26.11 (среда) в 20:00 МСК 📍 Где: [YouTube] и ре-стрим на [Rutube] ⏱️ Примерная длительность: ~3 часа 🐱 Как всегда — лайв Q&A: отвечаю на вопросы, обсуждаем подходы к вёрстке и ловим баги прямо в прямом эфире.

🆕 #11 Контекст в React: хук useContext и избавление от prop drilling 📺 [Смотреть на YouTube] 📝 [Смотреть на Дзен] 📺 [Смотреть на Rutube] Новый урок — про useContext. Разберёмся, как упростить код To Do List и передавать данные напрямую, без цепочек пропсов. Создадим TasksProvider, аккуратно перенесём в него состояние и логику, сделаем App.jsx чище. Всё — на практике, пошагово, как в настоящем продакшене. 📱 А на Boosty уже вышел следующий урок! ⚡️ Хочешь без ожидания? Получи весь курс (22 урока) сразу #анонс_видео #react #react_курс

💣 Зачем я избегаю глобальных переменных (и как иногда ловлю баги, если не избегаю) Когда я только начинал, глобальные переменные казались удобными. Объявил let counter = 0 — и юзай в любом месте. Красота. Но со временем понял: это не красота. Это мина замедленного действия. 😵 Так чем опасны глобальные переменные? – Переопределение: любой скрипт может случайно (или не случайно) перезаписать твоё значение. – Конфликты имён: особенно в больших проектах, где глобальных сущностей становится много. – Трудная отладка: непонятно, где именно значение поменялось. – Невозможно протестировать в изоляции: код зависит от "всего и сразу". – Неявные зависимости: читаешь функцию — не видишь, что она работает с глобальной переменной. Но баг там. 🐛 Пример бага, который я реально ловил

    
        
let isLoading = false

function fetchData() {
  isLoading = true
  // ...
  isLoading = false
}
{}
    

Проблема: другой компонент тоже юзает isLoading, не зная, что она вот-вот поменяется. И ты сидишь, дебажишь: почему у меня спиннер то есть, то нет?.. А ответ — в глобальной переменной, которую затёрли. 🛁 Как я теперь делаю – Всё, что возможно — внутри функций или компонентов – Общие состояния — через контекст, zustand, redux, hooks – Если что-то нужно "снаружи" — делаю явный интерфейс: config.get(), config.set() – И никаких window.что-то или global.что-то, если это не абсолютно оправдано 🤌 Вывод Глобальные переменные — как оставить дверь офиса открытой: может, ничего не случится. А может — всё украдут и сожгут. ❕ А у тебя бывало, что баг был не в логике, а в одной глобальной переменной? Или ты уже давно живёшь без них? #javascript #совет_новичкам #отладка

🔧 Как я отлаживаю адаптив: любимые приёмы в DevTools Адаптивная вёрстка — это не «сжать экран до 375px и понадеяться, что всё будет хорошо». У меня это отдельный этап — с кучей маленьких приёмов, которые делают жизнь проще. Делюсь любимыми. 🔁 Мгновенный ресайз с Ctrl + Shift + M Во всех браузерах есть эмулятор мобильных устройств: DevTools → Toggle device toolbar (или Ctrl + Shift + M) Позволяет: – Быстро переключать ширину экрана – Эмулировать touch-события – Ставить breakpoints прямо в инспекторе Плюс — можно задать свои размеры устройств, если макет нестандартный. 🎯 Инспектирую конкретные брейкпоинты Пишу медиавыражения в виде:

    
        
@media (max-width: 991px) { ... }
{}
    

А в DevTools выставляю ровно 991px — чтобы проверить, отрабатывает ли условие. Точно, без «где-то в районе планшета». 👀 Проверка "на съезд" Часто адаптив выглядит ок при 768px, но на 780px всё разваливается. Я медленно сжимаю экран и смотрю: – Где текст начинает залезать друг на друга – Где флекс-контейнеры уже не тянут – Где появляется горизонтальный скролл Так нахожу скрытые проблемы, которые не видны в чётких брейкпоинтах. 🧱 Включаю подсветку box-model В DevTools → вкладка "Computed" → hover на margin/padding/border. Очень помогает при «почему тут отступы такие странные?» Или «откуда тут пустое место?..» 📐 Использую outline, чтобы не "на глаз" Иногда добавляю временные стили:

    
        
* {
  outline: 1px dashed red !important;
}
{}
    

Это даёт моментальное понимание структуры и помогает навести порядок (кстати, рассказывал об этом подходе в давнем шортсе). 📌 Вывод Адаптив — это не просто «сделать красиво на телефоне». Это тестирование, отладка и внимательность к деталям. DevTools — мой главный инструмент, а не просто «смотреть отступы». ❓ А ты как проверяешь адаптив? Или доверяешь только макету на 1440px? 😅 #совет_новичкам #css #devtools

🎯 Почему хороших разработчиков не зовут на собеседования Ты можешь быть отличным специалистом. Писать чистый код, шарить в архитектуре, чинить чужие баги быстрее, чем кофе остывает. Но — откликов ноль. И ты сидишь, смотришь на своё резюме и думаешь:

Ну как так? Я ведь реально могу. Почему не зовут?

Ответ проще, чем кажется. 👨‍💻 Потому что HR видит не твой потенциал — а текст на экране. А там:

Работал над проектом. Занимался оптимизацией. Участвовал в разработке.

Звучит вроде нормально. Но проблема в том, что таких фраз — тысячи. И они не говорят, насколько ты реально хорош. ✨ HR не экстрасенс. Он не знает, что ты сделал крутой редизайн, ускорил билд в два раза и спас релиз в последний вечер. Он видит только слова. И если слова сухие — пролистывает дальше. Попробуй по-другому:

❌

Занимался оптимизацией проекта

✅

Сократил время загрузки страницы на 25%, минимизировав CSS и JS — speed index улучшился с 6.1s до 4.5s

Вот теперь ты звучишь как разработчик, который не просто кодит, а двигает продукт вперёд. 💡 И ещё одно. Не прячься за «мы». Компания нанимает не команду — а человека. Если ты сделал — скажи «я сделал». Это не хвастовство, это конкретика. А конкретика — это то, что отличает «одного из» от «того самого». 🔥 Хочешь, чтобы тебя заметили — перестань писать скучно. Расскажи про результат, а не процесс. Покажи, что твоя работа влияет на бизнес, а не просто живёт в кодовой базе. 💬 Кстати, у ребят из Merion Academy свой HR — экс-карьерный консультант Яндекс Практикума. Она помогает студентам причесать резюме, подготовиться к собеседованиям и вообще выстроить карьерный трек в IT. Пишут просто, с юмором и без занудства — объясняют, как рекрутеры реально читают резюме и почему даже сильные кандидаты иногда пролетают мимо. Загляни к ним и обязательно посмотри закреп — там куча годных постов: про найм, soft и self-skills, и как сделать резюме, от которого не зевнёшь. #карьера #резюме #совет_новичкам