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

Не спешите выкидывать 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. Заранее предупрежу, что правила методологии носят рекомендательный, а не обязательный характер. Их назначение — задать направление структурирования, а дальше принимать решения нужно в зависимости от конкретного проекта и ситуации в нём. Строгое же следование правилам может привести к бо̒льшим проблем, чем их нарушение. ⏱Читать статью

Бесплатные и платные хостинги для сайтов на Next, React и JAMStack #почитать Сегодня я рассмотрю несколько специализированных сервисов для хостинга фронта, среди которых не будет однотипных VPS. Только узкоспециализированные решения для хостинга сайтов. Мне хотелось ответить на вопрос, какой сервис будет лучшим для конкретного, узкого сценария и стека, а не просто перебрать очевидные сервисы, которые популярны, но не имеют своей специализации. ⏱Читать статью

Intlayer: альтернатива @nuxt/i18n с фокусом на оптимизации бандла #почитать После интеграции nuxt/i18n в несколько моих проектов я пришел к однозначному выводу: это, безусловно, лучшее i18n-решение для JS-фреймворков. Его «plug&play» настройка, загрузка пространств имен (namespaces) и встроенная маршрутизация, настоящее удовольствие в работе. Однако у этого решения есть серьезная проблема: загруженные пространства имен не подвергаются «тришейкингу» (tree-shaking). Несмотря на то, что JSON-файлы могут загружаться динамически для каждой локали, Nuxt в итоге объединяет их, что означает, что файл locale/zh/about.json загружается на всех страницах. ⏱Читать статью

Рендер-функции и Teleport в Vue.js #почитать Декларативные шаблоны Vue решают 90% задач фронтенда. Но периодически возникают ситуации, где шаблонного синтаксиса оказывается мало. Нужен более тонкий контроль над рендерингом или возможность вынести часть компонента за пределы его естественной позиции в DOM-дереве. Для таких случаев Vue 3 послал нам render-функции и встроенный компонент Teleport. ⏱Читать статью

Практическая оптимизация React: ререндеры, Context, списки, INP и code splitting #почитать Оптимизация в React почти всегда сводится к двум факторам: объёму работы, которую выполняет JavaScript, и частоте (а также «стоимости») перерисовок компонентов. Сам React работает достаточно быстро, но в крупных интерфейсах даже небольшие архитектурные промахи и на первый взгляд безобидные ререндеры начинают заметно бить по производительности. В данной статье мы расскажем про ключевые подходы к оптимизации React-приложений: как уменьшить количество лишних ререндеров, сократить объём вычислений при вводе и скролле и снизить нагрузку стартового JavaScript. ⏱Читать статью

JSDocs в VSCode #почитать

В этой публикации я очень кратко раскрываю, почему переход с IntelliJ IDEA (PhpStorm) на VSCode ломает привычную работу с JSDoc в JavaScript-проектах.

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

Заменяем JS обычным HTML #почитать Уже многие годы JavaScript остаётся «рабочей лошадкой» веба. Если вам нужно сделать то, что невозможно реализовать средствами HTML и CSS, то обычно найти решение помогает JS. И это замечательно! JS помог расширить возможности пользователей, а также стимулировал прогресс HTML и CSS! Но время идёт, функции HTML и CSS расширяются, поэтому мы должны начать заменять старые и привычные решения на JS новыми, требующими меньше JS. Я ничего не имею против JS, но у него есть иные задачи, кроме как управление аккордеонами и внеэкранными меню навигации... Кроме того, JS нужно скачивать, распаковывать, обрабатывать, после чего он ещё часто тратит память на мониторинг и поддержку фич. Если мы сможем перенести какую-то функциональность JS в нативный HTML или CSS, тогда пользователям придётся скачивать меньше данных, а оставшийся JS сможет уделить внимание более важным задачам, с которыми (пока) не справляются HTML и CSS. ⏱Читать статью

Atomic CSS: верстка и легкость бытия #почитать Обсудим имеющиеся проблемы в верстке и посмотрим, как атомарный подход их решает (или не решает). Разберем основные мифы, посмотрим на лучшие практики этого подхода и сделаем выводы. ⏱Читать статью

Реактивность без React или как обойтись без id в html элементах #почитать А зачем вообще обходиться без id? Даже не знаю, но это вполне возможно, и приложение будет живым и вполне себе «реактивным». А всю «магию» при этом творит функция, которую я назвал tokenize. Конечно же я, ни в коем случае, не настаиваю на отказе от id. "Элементарные" id никому не мешают и tokenize`у тоже. Но если обходиться без id, то как же получать ссылки на DOM элементы, для обращения к ним? Вот для этого и нужна функция tokenize, которая собирает референсы в удобную структуру с ветками, подветками и листьями (ссылками на DOM элементы). А вот как она это делает, мы с Вами сейчас и разберём. ⏱Читать статью

Типизация JavaScript через JSDoc #почитать Используете JSDoc для типизации JavaScript? Узнайте, как настроить TypeScript Compiler для профессиональной проверки типов, генерации деклараций и интеграции в процесс разработки. ⏱Читать статью