Техсобес для frontend: как ловить вранье, проверять реальную практику и не попасть в ловушки с ИИ
Техсобеседования ломаются на вранье в резюме, дословных ответах из документации и задачах, которые не отражают реальную работу, поэтому нужны практичные сценарии вроде рефакторинга и поиска багов. Отдельно разбираем, как оценивать AI assisted навыки без превращения интервью в проверку генерации кода.
https://habr.com/ru/companies/alfa/articles/1030322/
Техсобеседования ломаются на вранье в резюме, дословных ответах из документации и задачах, которые не отражают реальную работу, поэтому нужны практичные сценарии вроде рефакторинга и поиска багов. Отдельно разбираем, как оценивать AI assisted навыки без превращения интервью в проверку генерации кода.
https://habr.com/ru/companies/alfa/articles/1030322/
💩8❤5👍4❤🔥2🐳1
Почему нативная рандомизация в CSS это большой шаг вперед
CSS долго был детерминированным и не умел настоящую случайность, поэтому разработчики обходились паттернами, селекторами и генерацией на препроцессорах или на сервере. Новые нативные функции для random в CSS упрощают создание естественных вариаций и делают их частью самого стека, а не хаком.
https://css-tricks.com/the-importance-of-native-randomness-in-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/
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/
Разбор типичных проблем при кроссдокументных анимациях между страницами, включая отказ от устаревшего способа включения и неожиданный таймаут в 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
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/
Делаем эффект, где при движении мыши появляются изображения, затем они падают к низу вьюпорта, отскакивают и исчезают, сохраняя направление движения курсора. Под капотом сборка компонента на 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
В pnpm 11.1 добавили поддержку gh: prefix для GitHub Packages, а также обновили pnpm bugs и pnpm audit для более удобного открытия трекера ошибок и проверки ECDSA подписей реестра.
https://github.com/pnpm/pnpm/releases/tag/v11.1.0
👍8❤2
React стек 2026: карта лучших библиотек по категориям
Разберем, какие библиотеки сейчас реально закрывают роутинг, UI, стейт-менеджмент, формы и таблицы в React, чтобы собрать проект без гаданий по package.json. Сфокусируемся на практичных выборах и актуальных альтернативах под разные сценарии разработки.
https://habr.com/ru/articles/1032830/
Разберем, какие библиотеки сейчас реально закрывают роутинг, UI, стейт-менеджмент, формы и таблицы в React, чтобы собрать проект без гаданий по package.json. Сфокусируемся на практичных выборах и актуальных альтернативах под разные сценарии разработки.
https://habr.com/ru/articles/1032830/
👍12💩10❤1
Rolldown 1.0 стабилен и готов к продакшену
Rolldown это быстрый JavaScript бандлер на Rust, который совместим с Rollup плагинами. Обновление с последнего RC обычно проходит без правок кода, а Vite 8 уже использует Rolldown как основной бандлер.
https://voidzero.dev/posts/announcing-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/
Разбираемся с 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/
Variable shadowing ломает ожидания, когда имена переменных совпадают в разных областях видимости, и приводит к ошибкам или неожиданным значениям. Разбераемся, как это работает для let, var и глобальных переменных через window, чтобы писать предсказуемый код.
https://habr.com/ru/articles/1028948/
👎14❤7👍3
Анимации по скроллу на чистом CSS с Animation Timeline API
Animation Timeline позволяет привязать keyframes к прогрессу элемента в viewport и получать скролл анимации без JavaScript. Разберем базовую идею, настройку easing и типичные нюансы для продакшн интерфейсов.
https://www.joshwcomeau.com/animation/scroll-driven-animations/
Animation Timeline позволяет привязать keyframes к прогрессу элемента в viewport и получать скролл анимации без JavaScript. Разберем базовую идею, настройку easing и типичные нюансы для продакшн интерфейсов.
https://www.joshwcomeau.com/animation/scroll-driven-animations/
1👍10❤5❤🔥1💩1
WebMCP: что даст браузеру единый интерфейс для инструментальных вызовов ИИ
WebMCP превращает сценарии подписки и других действий с сайта из долгих скриншотных обходов в быстрые вызовы функций через navigator.modelContext.registerTool, сокращая latency и стоимость.
https://habr.com/ru/articles/1031164/
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
В 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/
Contenteditable для редактирования текста прямо в браузере, а также элемент time с datetime для корректной разметки дат и времени. Эти возможности упрощают UX и делают интерфейсы более семантичными и удобными для браузеров.
https://habr.com/ru/companies/ruvds/articles/1029698/
👍5💩3❤1
CSS, который реально можно брать в работу уже сейчас
Появились якорное позиционирование без лишней возни с DOM, @scope для аккуратного скопирования селекторов, контейнерные запросы только по имени, а также shape() и shape-outside для нативной геометрии и типографики. Плюс новые view-transition-class и типы для SPA анимаций и более точные единицы rcap rch rex ric для контроля текста.
https://nerdy.dev/CSS-recently-in-all-browsers
Появились якорное позиционирование без лишней возни с 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/
Разбираем практические демо same page переходов через View Transitions API, чтобы анимации между состояниями интерфейса выглядели плавно и предсказуемо для пользователя.
https://frontendmasters.com/blog/same-page-view-transition-examples/
👍7❤5
Параллельное выполнение в Node.js без ошибок
Разбираем как правильно организовать параллельную обработку задач в Node.js, чтобы не упереться в блокировки, перегрузку event loop и проблемы с управлением ресурсами. Плюс практические подходы и примеры для ускорения веб приложений.
https://github.com/yankouskia/hurried
Разбираем как правильно организовать параллельную обработку задач в Node.js, чтобы не упереться в блокировки, перегрузку event loop и проблемы с управлением ресурсами. Плюс практические подходы и примеры для ускорения веб приложений.
https://github.com/yankouskia/hurried
👍7⚡2🔥1💯1
Blue: компиляция JavaScript в нативные бинарники
Blue компилирует ваш JS в C++ и собирает самостоятельный нативный исполняемый файл: нативные окна, файловая система и HTTP-серверы без Electron и без Node.js во время выполнения.
https://bluejs.dev/
Blue компилирует ваш JS в C++ и собирает самостоятельный нативный исполняемый файл: нативные окна, файловая система и HTTP-серверы без Electron и без Node.js во время выполнения.
https://bluejs.dev/
🔥10❤3❤🔥2🤔2
Twoslash как удобный формат разметки для TypeScript
Twoslash помогает собирать самодостаточные примеры кода, чтобы компилятор TypeScript делал всю рутинную проверку и подготовку. Отлично подходит для документации и туториалов, где важны воспроизводимость и точность синтаксиса.
https://github.com/twoslashes/twoslash
Twoslash помогает собирать самодостаточные примеры кода, чтобы компилятор TypeScript делал всю рутинную проверку и подготовку. Отлично подходит для документации и туториалов, где важны воспроизводимость и точность синтаксиса.
https://github.com/twoslashes/twoslash
❤4👍3⚡2🥴1