front_end_dev | Technologies

Telegram-канал front_end_dev - FrontEndDev

28143

🚀 Статьи, новости, туториалы по frontend разработке. http://jem-space.ru Admin: @jem_jem Пишу в @five_a_m Читать на парковке: https://max.ru/front_end_dev Реклама: http://bit.ly/2NxmVDu РКН: https://clck.ru/3GLw7G

Subscribe to a channel

FrontEndDev

Roux: стартовый набор для нативной CSS-архитектуры

Roux даёт готовую основу для HTML и CSS: набор файлов, переменные, базовые стили и компоненты. Такой стартовый шаблон экономит время на настройке проекта и помогает сразу работать в предсказуемой структуре без лишней ручной сборки.

https://github.com/thoughtbot/roux

Читать полностью…

FrontEndDev

971 логотип брендов для React и shadcn без ручного поиска

Logoforge — это набор из 971 логотипа для тех, кто собирает продукт с AI и не хочет вручную искать SVG по всему интернету. Логотип можно поставить одной командой через shadcn, получить typed React component, скачать SVG или собрать блок Trusted by за пару минут.

Есть поддержка dark mode, mono-версий и MCP server для Claude, Cursor, Windsurf и VS Code, чтобы ассистент сам искал и добавлял логотипы.

https://github.com/terravidhal/logoforge

Читать полностью…

FrontEndDev

Как автоматизировать проверку cookie-banner на сотнях страниц

Внутренний cookie auditor проверяет, что на веб-страницах загружаются только те cookies, которые соответствуют выбранным privacy preferences пользователя. Такой подход превращает compliance с cookie banner в автоматизированный тест, который ловит регрессии после релизов, экспериментов и изменений на страницах.

https://dropbox.tech/security/how-our-inhouse-auditor-tests-cookie-behavior-across-hundreds-of-web-surfaces

Читать полностью…

FrontEndDev

ESLint Config Inspector показывает медленные правила

ESLint Config Inspector 3.4 добавил анализ времени выполнения правил, который помогает быстро найти, какие именно правила тормозят linting. Это полезно для больших конфигов ESLint, где проверка начинает заметно замедлять сборку и локальную разработку. Теперь можно точечно отключать или упрощать самые дорогие правила и ускорять прогон линтера без гадания

https://github.com/eslint/config-inspector

Читать полностью…

FrontEndDev

Fetch возвращает ответ раньше тела

Fetch promise завершается после заголовков, а тело продолжает приходить по открытому соединению. Это влияет на чтение ответа, clone, abort и таймауты: если тело не дочитать, можно потерять reuse соединения и получить лишнюю нагрузку в Node и браузере.

https://blog.gaborkoos.com/posts/2026-09-08-Half-Past-Fetch/

Читать полностью…

FrontEndDev

Набор мини-библиотек для HTML, событий и fetch

Набор маленьких standalone-библиотек для веба: для усиленного HTML, inline-скриптинга и реактивности, streaming HTML и events, DOM patching и удобных fetch() wrapper'ов. Полезно, если нужен точечный инструмент вместо тяжёлого фреймворка: каждая часть подключается отдельным скриптом, а весь набор можно взять одним файлом или через npm.

https://fixiproject.org/

Читать полностью…

FrontEndDev

Анимированная сетка без JavaScript и View Transitions

CSS Anchor Positioning позволяет анимировать перестройку grid при изменении размера контейнера без JavaScript и без View Transitions: элементы плавно переезжают в новые позиции и при этом анимация остаётся прерываемой во время ресайза.

https://www.bram.us/2026/09/07/animating-css-grid-layouts-with-css-anchor-positioning/

Читать полностью…

FrontEndDev

CSS progress() для адаптивной логики и масштабирования

Новая фича CSS progress() переводит значение в диапазон от 0 до 1 и помогает строить адаптивные размеры, типографику и условные стили без ручных вычислений в JS. Она полезна там, где нужно сравнивать значение с порогом, а не только плавно интерполировать его.

https://blog.master.dev/comparing-values-with-css-progress/

Читать полностью…

FrontEndDev

initial-scale в viewport больше не нужен

Для современных браузеров достаточно <meta name="viewport" content="width=device-width">, а initial-scale=1.0 уже не решает актуальных проблем. Это убирает лишний байт в head и упрощает шаблон страницы без потери адаптивности.

https://vale.rocks/micros/20260902-1350

Читать полностью…

FrontEndDev

Dropzone.js для загрузки файлов с превью

Dropzone.js упрощает drag and drop загрузку файлов в веб-приложении и сразу показывает превью изображений. Это полезно, когда нужен понятный пользовательский сценарий для загрузки без отдельной формы и лишенной трения валидации. Библиотека уже дает готовую основу, а поведение можно настраивать под свой интерфейс и требования к загрузке.

https://www.dropzone.dev/

Читать полностью…

FrontEndDev

Vitest 5 ускоряет тесты и отладку

Vitest 5 заметно ускоряет прогон тестов, особенно в больших изолированных suites, Browser Mode и vm pools, а еще добавляет Trace View для пошаговой отладки браузерных тестов и новый vi.when для удобной подмены модулей по условию.

https://vitest.dev/blog/vitest-5

Читать полностью…

FrontEndDev

Кастомный scrollbar почти без JavaScript

Современный CSS позволяет собрать кастомный scrollbar, который сам рассчитывает размер, положение и видимость ползунка через scroll-driven animations, anchor positioning и container queries, а JavaScript нужен только для drag-and-drop. Удобно, когда дизайн-система требует нестандартный скроллбар, а ручные вычисления через scroll и ResizeObserver дают лишние reflow и усложняют поддержку.

https://blog.master.dev/custom-scrollbar-component-in-2026/

Читать полностью…

FrontEndDev

Почему главный поток тормозит интерфейс

Главный поток браузера часто становится узким местом не из-за алгоритмов, а из-за того, что на нём одновременно живут JavaScript, обработка событий и большая часть рендера. Для фронтенда это важно, потому что длинные задачи блокируют ввод, скролл и анимации, а значит напрямую бьют по INP и TBT. Практический вывод: оптимизировать нужно не только сеть и бандл, но и время, которое код удерживает main thread.

https://kciter.so/posts/the-expensive-main-thread/en/

Читать полностью…

FrontEndDev

CSS Anchor Positioning для тултипов и меню

Anchor Positioning решает старую боль интерфейсов: позволяет прикреплять один элемент к другому без ручной JS-логики для тултипов, дропдаунов и вложенных меню. Для target задаются anchor-name, position-anchor и position-area, а браузер сам следит за переполнением и может переключать элемент на fallback-позицию вроде bottom или flip-block. Это особенно полезно там, где раньше приходилось писать сложный код для пересчёта координат, проверки viewport и переворота подсказки.

https://www.joshwcomeau.com/css/anchor-positioning/

Читать полностью…

FrontEndDev

Cordis делает плагины основой архитектуры

Cordis предлагает собирать JS/TS-приложение не вокруг ядра, а из плагинов, где каждый компонент явно описывает зависимости, эффекты, конфигурацию и жизненный цикл. Это полезно для модульных продуктов, плагинных платформ и систем с AI-компонентами: связи между частями становятся формализованными, а изменения можно вносить локально, не разбирая весь bootstrap и набор скрытых договорённостей. На практике Cordis даёт отдельный слой композиции для frontend и backend, а не просто ещё один DI или plugin framework.

https://habr.com/ru/articles/1079044/

Читать полностью…

FrontEndDev

Drawably: рукописные контролы для интерфейсов

Набор UI-контролов в стиле ручного скетча, который можно подключить в React или через обычный JS. Он даёт кнопки, checkbox, input, card, radio, toggle, divider и arrow с нарочито неровной отрисовкой, чтобы интерфейс выглядел как набросок, а не как стандартная библиотека компонентов.

https://www.drawably.dev/

Читать полностью…

FrontEndDev

⚡️ JavaScript, архитектура и ИИ: о чем будут говорить на юбилейной HolyJS 2026 Autumn

📆 23-24 октября в Санкт-Петербурге и онлайн пройдет юбилейная HolyJS 2026 Autumn — IT-конференция для всех, кто использует JavaScript-технологии для фронтенда и бэкенда. 

В этом году в программе остается все, за что любят HolyJS: JavaScript, браузер, React, архитектура, производительность и инструменты. Но все это теперь существует в мире, где ИИ становится частью разработки — от написания кода до проектирования и работы с production.

Поэтому в программе есть и фундаментальный JS-инжиниринг, и практические кейсы с ИИ, и доклады, после которых можно сразу что-то попробовать в работе. А еще — воркшопы, где про новые подходы можно не только послушать, но и «потрогать» их руками.

Полное расписание и подробности смотрите в карточках и на сайте.

🌟По промокоду frontenddev персональные билеты дешевле

Реклама. ООО «Джуг Ру Груп». ИНН 7801341446

Читать полностью…

FrontEndDev

Почему переключатель dark mode не нужен

Для большинства сайтов постоянный переключатель light/dark не нужен: он добавляет лишнее решение в интерфейс и хуже работает, чем автоматическое следование системной теме. Если переключатель всё же нужен, вариант с двумя вариантами лучше вариант с тремя, потому что он покрывает все сценарии без отдельного пункта System в UI.

https://lea.verou.me/blog/2026/dark-mode-toggles-2/

Читать полностью…

FrontEndDev

Rslib 1.0 для сборки JS-библиотек

Rslib 1.0 даёт единый пайплайн для сборки JavaScript-библиотек: ESM, CJS, UMD, IIFE и Module Federation, генерацию declaration files, поддержку React, Vue, Svelte и Solid, а также bundle и bundleless режимы под разные сценарии публикации и интеграции.

https://rslib.rs/blog/v1-0

Читать полностью…

FrontEndDev

Привет!

Чуть не забыл про итоги)

Поздравляем @m_hodeneva с победой! 🎉

Для тех, кому не так повезло, все еще действует промик на скидку - FrontEndDev

Всем добра! ✌️

Читать полностью…

FrontEndDev

Сайт: появляется в интернете.
Веб-краулер: ну здравствуй.

Читать полностью…

FrontEndDev

Что нового в HTML к середине 2026

В HTML появляются новые элементы для permissions, установки приложений и Web Components, а ещё расширяется стилизация select и поддержка Declarative Shadow DOM. Это важно, потому что часть сценариев вроде геолокации, камеры, микрофона и установки PWA можно делать через более семантичные и доступные интерфейсы, а не только через разрозненные JS-API и браузерные меню.

https://blog.master.dev/new-things-you-should-know-about-html-here-in-mid-2026/

Читать полностью…

FrontEndDev

Anthropic запустила claude.dev — блог для разработчиков с кейсами

Это не просто документация, а живой практический блог инженерной команды компании. Документация по-прежнему живёт на code.claude.com/docs, а здесь публикуют подробные статьи, сценарии из реальной жизни, опыт команд и конкретные кейсы.

https://claude.dev

Читать полностью…

FrontEndDev

👨‍💻 Фронтенд с AI: что можно делегировать агентам

Друзья, 5 октября стартует конференция Podlodka Frontend Crew — сезон о том, как применять AI во фронтенд-разработке на практике. Иду сам и по традиции зову вас с собой!

В этом сезоне разберем:

• Как находить prompt injection и противостоять таким атакам;
• Какие подходы помогают повысить доверие к результатам агентской разработки;
• Как проводить ревью кода, созданного AI-агентами;
• Как AI помогает упростить починку багов.

В программе ещё много практических кейсов.

Как обычно удобный формат — пять дней Zoom-сессий по утрам и вечерам и закрытое Telegram-комьюнити, где можно обсудить новый опыт и узнать от единомышленников то, что не догадаешься спросить у своей LLM.

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

🔗 Программа и билеты:
https://podlodka.io/fecrew

По промокоду FrontEndDev получите скидку 500руб🎁

👉 По традиции разыгрываем билет! Чтобы участвовать в розыгрыше заполните форму. Итоги подведем в ближайшие дни. Всем удачи ✌️

Читать полностью…

FrontEndDev

10 AI-slop проверок во фронтенде

Набор проверок, которые помогают ловить ошибки в AI-сгенерированном фронтенд-коде раньше ревью: от контрактов OpenAPI и strict TypeScript до boundary-правил, mutation testing и детекторов мёртвого кода. Это снижает архитектурный дрейф, убирает лишние допущения и делает быстро растущий код дешевле в поддержке.

https://evilmartians.com/chronicles/ten-anti-ai-slop-moves-for-frontend-projects-going-faster-than-humans-can-review

Читать полностью…

FrontEndDev

Как связать HTML-атрибуты и CSS без классов

Container style queries и advanced attr() позволяют строить адаптивные компоненты, где HTML-атрибуты напрямую задают CSS-параметры, а дочерние элементы меняют вид по состоянию родителя без modifier-классов и прокидывания props.

https://utilitybend.com/blog/container-style-queries-and-advanced-attr-rethinking-how-to-wire-up-my-components-in-css

Читать полностью…

FrontEndDev

Codex для фронтенда и UI-автоматизации

Бесплатный курс по agentic frontend development с OpenAI Codex показывает, как быстрее собирать интерфейсы и меньше тонуть в ручных правках. Практическая польза в том, что Codex лучше работает не по голой задаче, а с контекстом проекта, plugins, skills, browser tools и хорошо оформленным Agents.md. Курс разбирает рабочий цикл build, inspect, steer, verify: задаёте цель, проверяете UI тестами, даёте итеративную обратную связь и направляете результат через App Shots и annotations.

https://master.dev/courses/codex/

Читать полностью…

FrontEndDev

Как Next.js закрыл 1500 issue за месяц

Команда Next.js показала рабочий пайплайн для разгребания большого GitHub backlog: агент в изолированной среде собирает доказательства по issue, ищет связанные PR и коммиты, пытается воспроизвести баг на разных версиях и возвращает структурированное решение о закрытии. Это важно, если у вас есть свой open source или внутренний продукт с потоком багрепортов: ручная модерация плохо масштабируется, а возраст issue сам по себе ничего не говорит о его актуальности.

https://nextjs.org/blog/how-we-closed-1500-github-issues

Читать полностью…

FrontEndDev

Серверный 1v1 на Cloudflare Durable Object

Разбор того, как держать 60Hz серверную симуляцию внутри одного Cloudflare Durable Object и что это даёт на практике: предсказание движения на клиенте, откат состояния для честного попадания, адаптивный выбор лучшего edge-сервера и удержание слота при обрыве соединения. Полезно как пример архитектуры для realtime-игр и других web-приложений, где важны низкая задержка, синхронизация и предсказуемое поведение на сервере и в тестах.

https://railmid.com/blog/how-it-works

Читать полностью…

FrontEndDev

Blume превращает Markdown в сайт документации

Blume собирает папку с Markdown в готовый docs-сайт на Astro и Vite без шаблонного приложения и лишней настройки. Для старта нужен только Node.js и один Markdown-файл, дальше доступны типизированная конфигурация, автоматический SEO, llms.txt, raw Markdown по .md URL, MCP-сервер и blume eval, который прогоняет документацию как тесты и валит CI, если она не отвечает на вопросы.

https://www.infoq.com/news/2026/09/blume-docs-ai/

Читать полностью…
Subscribe to a channel