Фронтендер от бога

Ответ фронтендера на «Не занимайтесь преждевременной оптимизацией» #почитать Я хочу показать, почему распространённая фраза "не занимайтесь преждевременной оптимизацией" почти всегда используется неправильно, особенно в современных фронтенд-проектах. Я посмотрю на исторический контекст, разберу, что именно Кнут называл оптимизацией, и почему многие вещи, которые считаются "преждевременной оптимизацией", на деле — нормальная инженерная дисциплина. ⏱Читать статью

🌐 Как задеплоить React-приложение на GitHub Pages #посмотреть В финальном уроке соберём всё воедино и выложим наше приложение в интернет. Обсудим, что такое деплой для фронтенда и чем отличается dev-сервер от production-сборки. Вернём хранение задач в localStorage, чтобы приложение работало без бэкенда. Настроим переключение API под разные окружения. Соберём production-бандл и проверим его через vite preview. Доработаем маршрутизацию, чтобы ссылки работали корректно после выкладки. Подготовим vite.config.js к продакшену и настроим base под GitHub Pages. Добавим копию 404.html, чтобы SPA-роутинг не ломался. Установим и настроим пакет gh-pages, пропишем удобные npm-скрипты и задеплоим проект. В итоге получаем полноценное React-приложение в продакшене, готовое для портфолио. ⏱Смотреть на YouTube ⏱️30 минут

🤖 AI для фронтенд-разработчика: собираем инструменты на Podlodka Frontend Crew AI-инструменты уже используют все, но порой в обсуждении с LLM возникает ощущение, что голова полна ответов, но их всё ещё недостаточно, чтобы разрешить вполне себе прикладные вопросы. Эксперты Podlodka Frontend Crew собрали онлайн-конференцию «Фронтенд с AI», чтобы вместе с практиками из индустрии увидеть, как работает AI в разных аспектах фронтенд-разработки, а главное — сразу начать использовать новые подходы в реальной жизни. 💬 Какие темы ждут участников сезона с 5 по 9 октября: 🔴 AI Coding и подготовка репозитория к работе с AI 🔴 Spec Kit для разработки интерфейсов 🔴 Агентная разработка в закрытом контуре 🔴 WebMCP как дополнительный harness 🔴 AI-дизайн и его место в процессе разработки. Полная программа — уже на сайте! Формат: пять дней живых Zoom-сессий по утрам и вечерам, закрытое Telegram-комьюнити и много общения со спикерами. Если хочется не просто читать про AI-тренды, а получить концентрированную порцию знаний именно про AI для фронтенда, присоединяйтесь к сезону. Вы поймёте, как встроить новые инструменты и подходы в свою работу и найдёте множество единомышленников. 👉 Билеты на сезон

Грани полиморфизма React: полиморфные декораторы #почитать Мы поговорили уже про as для типобезопасного полиморфизма, asChild для композиции и FACC для вариативного дизайна. Но что, если я скажу, что есть способ комбинировать логику ещё элегантнее и не смешивать ее с отрисовкой? Сегодня разбираем полиморфные декораторы - HOC'и на стероидах. ⏱Читать статью

🔴AI кодинг интервью с разработчиком из международного FinTech в четверг в 19:00 ДА! Вайбкодинг реально начали проверять на интервью, поэтому мы нашли собеседующего, который проводит AI-секцию в международном финтехе, чтобы вы увидели что на ней спрашивают и как к ней подготовиться Как это будет: 📂 Александр Дмитриев, разработчик из известного международного финтеха, ex-VK, ex-Ozon проведет вайбкодинг секцию разработчику-добровольцу 📂 Александр будет задавать реальные вопросы с секций, которые проводил сам и комментировать ответы 📂 В конце можно будет задать любой вопрос Александру Это бесплатно. Эфир проходит в рамках менторской программы от ШОРТКАТ для разработчиков, которые хотят сменить работу, повысить свой грейд, ЗП и прокачать скиллы. Переходи в нашего бота, чтобы получить ссылку на эфир → @shortcut_front_bot Реклама. О рекламодателе.

Как работают современные браузеры #почитать В этой серии статей мы подробно рассмотрим, как устроены современные браузеры, сделав акцент на архитектуре и внутреннем устройстве Chromium, но также отметим ключевые отличия в других браузерах. Мы рассмотрим весь цикл: от сетевого стека и конвейера парсинга до рендеринга с помощью Blink, выполнения JS с помощью движка V8, загрузки модулей, многопроцессной архитектуры, песочниц безопасности и инструментов разработчика. Главная цель — дать понятное и доступное объяснение того, что происходит в браузере "под капотом". ⏱Читать статью

Создаем UI-Kit на React: пошаговое руководство по настройке #почитать Подготовили материал, в котором подробно разберем процесс настройки UI‑Kit на React — от установки зависимостей до сборки готового пакета. Ниже в статье вы прочитаете о полном цикле разработки: сборке, тестировании, линтинге и документации. ⏱Читать статью

Разберём фронтенд слой за слоем 🥐 30 сентября встречаемся на VK Frontend Meetup SPB. Разберёмся в том, что видит пользователь, а дальше перейдём к архитектуре, инструментам и процессам, которые помогают масштабировать разработку.  В программе 3 доклада:  🔵Как в MAX разработали собственную архитектуру для стабильных анимированных стикеров 🔵Как в Одноклассниках учат AI работать с реальной дизайн-системой и существующими компонентами 🔵Как в Почте Mail запускают 300 промо в год После докладов — фуршет и неформальное общение. Можно будет задать вопросы спикерам, обсудить выступления и поспорить о том, какой слой фронтенда самый сложный. 🗓 30 сентября, 19:00 📍Санкт-Петербург, офис VK у Красного моста Встреча пройдёт только офлайн, записей докладов не будет.  Регистрация — по ссылке

React vs Vue: Что выбрать в 2026? #почитать Этот выбор напоминает мне подбор гардероба для важного мероприятия: ошибешься — и проект ждут дополнительные проблемы, угадаешь — и ты на вершине успеха! Чтобы не попасть в просак с выбором, давайте детально разберем ключевые различия между React и Vue и определим, на что стоит обратить внимание. ⏱Читать статью

Не спешите выкидывать Webpack: разбор альтернатив и реальных сценариев миграции #почитать Вокруг сборщиков последние годы кипят страсти: большинство боготворит Vite, кто-то экспериментирует с esbuild, а энтузиасты активно продвигают инструменты на базе Rust — прежде всего Rspack и SWC. На фоне этого Webpack нередко называют пережитком, который якобы тормозит развитие команд. Но жизнь реальных продуктов куда сложнее, чем пишут в соцсетях. Иногда Webpack остается единственным зрелым вариантом. А иногда — мешает и действительно требует замены. В этой статье я попробую разобраться, откуда вообще взялись сборщики и что именно происходит внутри Webpack, насколько современные альтернативы действительно готовы его заменить, почему в Рунити мы осознанно продолжаем использовать Webpack в основных продуктах и в каких случаях смена сборщика действительно имеет смысл, а в каких может обернуться лишней тратой времени и сил без ощутимой выгоды. ⏱Читать статью

Анимированный UI: как улучшить взаимодействие с пользователем #почитать Анимация пользовательского интерфейса прошла долгий путь за последнее десятилетие, они превратились в универсальный цифровой язык, который люди узнают и понимают. Эти микровзаимодействия позволяют дизайнерам общаться с пользователями посредством движения и анимации, предоставляя им рекомендации, контекст и создавая захватывающий пользовательский опыт. В продакшене анимация всегда балансирует между выразительностью и производительностью. Чем сложнее сцена, тем выше нагрузка на процессор, особенно на мобильных устройствах. Поэтому важно оптимизировать: использовать GPU-дружественные свойства (transform, opacity), избегать тяжёлых reflow, а для сложных эффектов — применять библиотеку, которая работает с отложенным рендерингом, например Framer Motion или GSAP. Это не только повышает плавность, но и снижает энергопотребление, что прямо влияет на опыт пользователя. ⏱Читать статью

Как функциональное программирование изменило фронтенд и почему отрасль возвращается к платформе #почитать

Недавно я наткнулась на статью «How Functional Programming Shaped Modern Frontend» и неожиданно поймала себя на мысли: мы уже настолько привыкли к функциональному программированию (ФП) в JavaScript, что забыли, как всё начиналось и почему многие идеи казались почти спасением. Чтобы лучше понять эволюцию, я решила посмотреть, что писали разработчики о ФП во фронтенде 10 лет назад, примерно в 2013-2016 годах. Контраст получился довольно яркий: от искреннего восторга до постепенного прозрения. Я решила поделиться своим анализом, основанным на современных наблюдениях и на тех статьях прошлого, где ФП воспринималось как путь к «правильному» фронтенду.

⏱Читать статью

JavaScript Distributed Assets — это просто #почитать Идея вот в чем: берем стандартные JavaScript модули (ESM) и делаем их прямыми эндпоинтами для генерации любых текстовых веб-ассетов, таких как HTML-файлы, CSS, SVG или даже JSON или Markdown, используя простое соглашение о именовании исходных файлов и дефолтный экспорт результата в виде строки (JavaScript Template Literal). Проще некуда и чем-то похоже на PHP, верно? Но, что это нам дает? Давайте разберемся, почему JSDA (JavaScript Distributed Assets) - это то, что может сделать веб-разработку "грейт эгейн", после тысячи поворотов "не туда". ⏱Читать статью

Даём возможность пользователям сайта самим менять размер блоков, потянув указателем мыши за край или угол #почитать В статье представлено всё необходимое, чтобы осуществить вынесенное в заголовок (плюс поддержка сенсорного ввода), а так же готовое open source решение, которое можно просто подключить и пользоваться. ⏱Читать статью

🔴 Тестовое собеседование на Frontend-разработчика со старшим разработчиком ex. Сбер 3 сентября(в четверг!) в 19:00 по мск приходи онлайн на открытое собеседование, чтобы посмотреть на настоящее интервью на Middle Frontend-разработчика. Как это будет: 📂 Даниил Дмитриев, старший разработчик в R-Vision, ex. Сбер, будет задавать реальные вопросы и задачи разработчику-добровольцу 📂 Даниил будет комментировать каждый ответ респондента, чтобы дать понять, чего от вас ожидает собеседующий на интервью 📂 В конце можно будет задать любой вопрос Даниилу Это бесплатно. Эфир проходит в рамках менторской программы от ШОРТКАТ для Frontend-разработчиков, которые хотят повысить свой грейд, ЗП и прокачать скиллы. Переходи в нашего бота, чтобы получить ссылку на эфир → @shortcut_front_bot Реклама. О рекламодателе.

Webflow → Next.js без фронтендеров: как мы перенесли 500+ страниц сайта через Cursor #почитать Нам нужно было оперативно увезти наш сайт с Webflow: 500+ страниц, блог и база знаний. При этом возвращать фронтенд-разработку в режим постоянной поддержки сайта мы не хотели. Поэтому рассматривали конструкторы и CMS, но быстро поняли, что это будет работа в минус. Все усилия на переезд лишь вернули бы сайт в рабочее состояние, не дав новых возможностей. В итоге мы решили вести разработку и поддержку сайта в Cursor. То есть переписать его на NextJS с помощью AI агентов. Такая связка дала понятную модель страниц, быструю доставку статики и ISR для контента, а также возможность отказаться от отдельной CMS за счёт MDX. В спокойном режиме за два месяца удалось полностью переписать сайт и запустить его в прод. ⏱Читать статью

hq-cropper: Image Cropper без зависимостей для JavaScript #почитать Хочу рассказать о своей библиотеке hq-cropper — инструменте для обрезки изображений на чистом TypeScript без единой зависимости. Когда искал cropper для своего проекта, столкнулся с двумя проблемами. Во-первых, большинство популярных решений тянут за собой кучу зависимостей и весят 100+ KB. Во-вторых, мало кто работает с большими изображениями. ⏱Читать статью

Ленивые итераторы в JavaScript: руководство с примерами #почитать Полное руководство по хелперам итераторов в JavaScript: как ленивые вычисления заменяют цепочки .map().filter() и экономят память. Примеры, сравнение с массивами, подводные камни. ⏱Читать статью

Symbol.iterator: управление spread-синтаксисом JavaScript #почитать Symbol.iterator — это не просто «ещё один символ» в JavaScript. Это ключ, который позволяет вам сказать языку, как именно ваш объект должен вести себя в таких фундаментальных операциях, как цикл for...of или синтаксис spread (...). На практике это даёт удивительную возможность: создавать объекты, которые могут быть одновременно и структурированными хранилищами данных с именованными свойствами, и коллекциями, готовыми к «разворачиванию» в аргументы функции. В статье мы разберём, как с помощью Symbol.iterator решить классическую дилемму «объект или массив» на конкретном примере из реальной задачи. ⏱Читать статью

Мой справочник по Feature-Sliced Design #почитать Так как при использовании Feature-Sliced Design (FSD) возникает много вопросов и разные люди понимают её по-разному, я решил написать статью-справочник, раскрывающий некоторые подробности методологии. В этой статье я продолжаю использовать те же принципы и часть терминологии, что и в предыдущей. Здесь я, в основном, описываю структурирование по правилам методологии. А в следующей статье, напротив, рассмотрю, как можно улучшить структуру проекта, намеренно нарушая правила FSD. Заранее предупрежу, что правила методологии носят рекомендательный, а не обязательный характер. Их назначение — задать направление структурирования, а дальше принимать решения нужно в зависимости от конкретного проекта и ситуации в нём. Строгое же следование правилам может привести к бо̒льшим проблем, чем их нарушение. ⏱Читать статью