FrontEndDev
26.4K subscribers
2.56K photos
24 videos
7.79K links
🚀 Статьи, новости, туториалы по frontend разработке.

http://jem-space.ru

Admin: @jem_jem
Пишу в @five_a_m
AI и вайбкод @vibe_and_ai

Читать на парковке: https://max.ru/front_end_dev

Реклама: http://bit.ly/2NxmVDu
РКН: https://clck.ru/3GLw7G
Download Telegram
Техсобес для frontend: как ловить вранье, проверять реальную практику и не попасть в ловушки с ИИ

Техсобеседования ломаются на вранье в резюме, дословных ответах из документации и задачах, которые не отражают реальную работу, поэтому нужны практичные сценарии вроде рефакторинга и поиска багов. Отдельно разбираем, как оценивать AI assisted навыки без превращения интервью в проверку генерации кода.

https://habr.com/ru/companies/alfa/articles/1030322/
💩85👍4❤‍🔥2🐳1
Почему нативная рандомизация в CSS это большой шаг вперед

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

https://css-tricks.com/the-importance-of-native-randomness-in-css/
5👍2
React Server Components в TanStack Start

React Server Components выполняются только на сервере, могут быть async и напрямую ходить в API и базу, при этом в браузер уходит только готовая разметка без кода компонентов. Это радикально уменьшает клиентские бандлы и подходит для больших деревьев с минимумом интерактива, а интерактивность подключается через client components.

https://frontendmasters.com/blog/react-server-components-in-tanstack/
7👍3🔥2😁1
Сюрпризы кроссдокументных view transitions: что ломается и как этого избежать

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

https://css-tricks.com/cross-document-view-transitions-part-1/
6👍6🔥1😁1
FastMCP для быстрых MCP серверов на TypeScript

FastMCP помогает собирать MCP серверы с поддержкой клиентских сессий без возни с низкоуровневой реализацией, ускоряя разработку и упрощая поддержку. Отлично подходит для тех, кто делает фронтенд-инструменты и интеграции с AI через MCP.

https://github.com/punkpeye/fastmcp
7👍6👌2
Интерактивный trail из картинок с гравитацией на GSAP

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

Демо

https://tympanus.net/codrops/2026/05/20/made-with-gsap-building-a-fun-gravity-based-mouse-trail/
6👍5🔥2
pnpm 11.1: новые префиксы для GitHub Packages и улучшенная диагностика

В pnpm 11.1 добавили поддержку gh: prefix для GitHub Packages, а также обновили pnpm bugs и pnpm audit для более удобного открытия трекера ошибок и проверки ECDSA подписей реестра.

https://github.com/pnpm/pnpm/releases/tag/v11.1.0
👍82
React стек 2026: карта лучших библиотек по категориям

Разберем, какие библиотеки сейчас реально закрывают роутинг, UI, стейт-менеджмент, формы и таблицы в React, чтобы собрать проект без гаданий по package.json. Сфокусируемся на практичных выборах и актуальных альтернативах под разные сценарии разработки.

https://habr.com/ru/articles/1032830/
👍12💩101
Rolldown 1.0 стабилен и готов к продакшену

Rolldown это быстрый JavaScript бандлер на Rust, который совместим с Rollup плагинами. Обновление с последнего RC обычно проходит без правок кода, а Vite 8 уже использует Rolldown как основной бандлер.

https://voidzero.dev/posts/announcing-rolldown-1-0
👍14🔥7🤯4🤔1
Мастер класс по отладке Next.js: логи, трассировка и полный контекст

Разбираемся с Next.js багами без прыжков между инструментами: пишете логи, которые объясняют где, что и почему, и связывают браузер и Node. В итоге получаете сквозную картину проблем для ускорения диагностики и исправлений.

https://sentry.io/resources/nextjs-may-workshop/
6🔥5👍2
Затенение переменных в JavaScript и как не наступать на грабли

Variable shadowing ломает ожидания, когда имена переменных совпадают в разных областях видимости, и приводит к ошибкам или неожиданным значениям. Разбераемся, как это работает для let, var и глобальных переменных через window, чтобы писать предсказуемый код.

https://habr.com/ru/articles/1028948/
👎147👍3
Анимации по скроллу на чистом CSS с Animation Timeline API

Animation Timeline позволяет привязать keyframes к прогрессу элемента в viewport и получать скролл анимации без JavaScript. Разберем базовую идею, настройку easing и типичные нюансы для продакшн интерфейсов.

https://www.joshwcomeau.com/animation/scroll-driven-animations/
1👍105❤‍🔥1💩1
WebMCP: что даст браузеру единый интерфейс для инструментальных вызовов ИИ

WebMCP превращает сценарии подписки и других действий с сайта из долгих скриншотных обходов в быстрые вызовы функций через navigator.modelContext.registerTool, сокращая latency и стоимость.

https://habr.com/ru/articles/1031164/
6👍4💩1
PM2 7.0

В PM2 7.0 уменьшили зависимости, расширили cluster mode и обновили monitoring agent для приложений на Bun, чтобы проще и стабильнее держать продакшен. Отличный апгрейд для тех, кто управляет Node процессами и следит за метриками в реальном времени.

https://github.com/Unitech/pm2/releases/tag/v7.0.0
7🔥3👍1
Забытые HTML и CSS фичи, которые до сих пор полезны

Contenteditable для редактирования текста прямо в браузере, а также элемент time с datetime для корректной разметки дат и времени. Эти возможности упрощают UX и делают интерфейсы более семантичными и удобными для браузеров.

https://habr.com/ru/companies/ruvds/articles/1029698/
👍5💩31
CSS, который реально можно брать в работу уже сейчас

Появились якорное позиционирование без лишней возни с DOM, @scope для аккуратного скопирования селекторов, контейнерные запросы только по имени, а также shape() и shape-outside для нативной геометрии и типографики. Плюс новые view-transition-class и типы для SPA анимаций и более точные единицы rcap rch rex ric для контроля текста.

https://nerdy.dev/CSS-recently-in-all-browsers
🔥8💩1
Примеры same page view transitions

Разбираем практические демо same page переходов через View Transitions API, чтобы анимации между состояниями интерфейса выглядели плавно и предсказуемо для пользователя.

https://frontendmasters.com/blog/same-page-view-transition-examples/
👍75
Параллельное выполнение в Node.js без ошибок

Разбираем как правильно организовать параллельную обработку задач в Node.js, чтобы не упереться в блокировки, перегрузку event loop и проблемы с управлением ресурсами. Плюс практические подходы и примеры для ускорения веб приложений.

https://github.com/yankouskia/hurried
👍72🔥1💯1
Blue: компиляция JavaScript в нативные бинарники

Blue компилирует ваш JS в C++ и собирает самостоятельный нативный исполняемый файл: нативные окна, файловая система и HTTP-серверы без Electron и без Node.js во время выполнения.

https://bluejs.dev/
🔥103❤‍🔥2🤔2
Twoslash как удобный формат разметки для TypeScript

Twoslash помогает собирать самодостаточные примеры кода, чтобы компилятор TypeScript делал всю рутинную проверку и подготовку. Отлично подходит для документации и туториалов, где важны воспроизводимость и точность синтаксиса.

https://github.com/twoslashes/twoslash
4👍32🥴1