TGViewer
Channel Public Channel
FrontEndDev

FrontEndDev

@front_end_dev

🚀 Статьи, новости, туториалы по 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
Open in Telegram
Subscribers
25.9K
Photos
2.7K
Videos
25
Links
7.9K

Showing posts older than #9702 · Back to latest

Older Posts 20 shown
Post #9701 3.81K
Страница новостей на 49 МБ: как адтех и тяжёлый фронтенд превращают чтение в ожидание

49 МБ данных, сотни запросов и десятки конкурентных ставок в браузере блокируют главный поток и превращают чтение в ожидание. Разберём, как программная реклама и трекинг раздувают payload и что можно сделать, чтобы ускорить рендер и снизить нагрузку на CPU.

https://thatshubham.com/blog/news-audit
  • ❤ 7
  • 🔥 3
  • 🤯 2
Post #9700 3.89K
Утечки памяти во фронтенде: что нашли в 500 репозиториях и как это быстро исправить

Статический анализ 500 публичных React, Vue и Angular репозиториев показал, что 86% проектов содержат паттерны без cleanup, а бенчмарки дают около 8 KB удерживаемой памяти на цикл навигации при пропущенной очистке

https://stackinsight.dev/blog/memory-leak-empirical-study/
  • 👍 10
  • ❤ 4
  • 🤮 3
  • 😢 1
Post #9699 3.69K
Руководство для новичков по ручному тестированию доступности с клавиатурой

Проверьте доступность интерфейса для пользователей скринридеров с помощью пяти базовых команд Tab, Shift+Tab, Enter, Space и стрелок, чтобы быстро найти проблемы навигации и взаимодействия.

https://www.sitepoint.com/accessibility-testing-with-keyboard-navigation/
  • 👍 4
  • 🔥 4
  • ❤ 3
Post #9698 3.69K
Модульная система Sass с use и forward: как уйти от устаревшего import

Переход на use решает глобальное загрязнение, конфликты имён и дублирование кода, давая изолированные пространства имён для переменных, миксинов и функций. Разбираемся с подключением модулей, встроенными sass::math и организацией SCSS, чтобы код оставался масштабируемым и удобным для IDE.

https://habr.com/ru/articles/1013818
  • ❤ 10
  • 💩 5
  • 👎 2
  • 🤔 2
  • 👍 1
  • 😁 1
  • 🤡 1
Post #9697 3.57K
Делегирование фокуса в Shadow DOM с delegatesFocus

delegatesFocus: true убирает ручную логику focus() в обёртках, автоматически прокидывает фокус на первый фокусируемый элемент и корректно включает :focus и :focus-within для стилизации без классов. Это закрывает проблемы с мёртвым фокусом при кликах по padding и декоративным зонам.

https://frontendmasters.com/blog/shadow-dom-focus-delegation-getting-delegatesfocus-right/
  • ❤ 7
  • 🔥 3
  • 👌 2
Post #9696 4K
Одно CSS-свойство, которое мгновенно улучшает вид цифр

font-variant-numeric: tabular-nums делает все цифры одинаковой ширины, убирая прыжки и перекосы в таймерах, счетчиках и дашбордах. Идеально для таблиц и анимированных чисел: меньше layout shift — приятнее UX.

https://frontendfoc.us/link/181899/web
  • 🔥 13
  • 🍌 3
  • ❤ 2
  • 👌 2
Post #9694 3.78K
Вышел Vite 8: Rolldown как единый бандлер

Vite 8 переводит сборку на Rolldown, один Rust бандлер вместо связки esbuild и Rollup, что ускоряет сборки в 10–30 раз и сохраняет совместимость с плагинами. Появляются новые возможности вроде bundle mode, гибкого chunk splitting, persistent caching на уровне модулей и поддержки Module Federation.

https://vite.dev/blog/announcing-vite8
  • 👍 18
  • ❤ 8
  • 🔥 6
  • ❤‍🔥 1
Post #9693 3.65K
Тестируйте доступность в реальном времени прямо во время написания кода

На ходу подсвечиваются нарушения WCAG и выпадают предупреждения в IDE/CLI с AI-подсказкам для исправлений

https://www.browserstack.com/accessibility-testing/accessibility-devtools
  • ❤ 7
  • 😍 3
  • 🔥 1
Post #9692 3.79K
NoJS 3 — рассвет Flappy Bird

Клон Flappy Bird без JavaScript: только HTML и CSS. Разбираем, как организовать игровую логику (движение, препятствия, столкновения) средствами современного CSS

https://blog.scottlogic.com/2026/03/09/noJS-3-flappy-bird.html
  • ❤ 7
  • 🤯 7
  • 🔥 3
Post #9691 3.75K
ESLint v10.0.3: патч-апдейт для точнее проверок кода

Вышла ESLint v10.0.3 — релиз, который исправляет баги предыдущей версии и обновляет зависимость minimatch до ^10.2.4, чтобы ESLint корректно распознавал файлы. Также добавлены точечные фиксы в сообщениях правил и обновлена документация/гайд по миграции.

https://eslint.org/blog/2026/03/eslint-v10.0.3-released/
  • 👍 11
  • ❤ 3
  • 🥱 2
Post #9690 4.06K
OAuth 2.0 во фронтенде

Работа с OAuth 2.0 на клиенте это не только логин, но и работа с токенами: разбираем типичные дыры, правильные flow для веб-приложений и практики, которые снижают риск утечек и подмены.

https://www.youtube.com/watch?v=oGktdQ45bTg
YouTube Breaking & Securing OAuth 2.0 in Frontends • Philippe De Ryck • YOW! 2025 This presentation was recorded at YOW! Australia 2025. #GOTOcon #YOW https://yowcon.com Philippe De Ryck - Web Security Expert, Founder of Pragmatic Web Security @philippederyck2572 RESOURCES https://bsky.app/profile/philippederyck.bsky.social https:/…
  • 👍 6
  • ❤ 1
  • 🔥 1
Post #9689 4.18K
Асинхронные переходы между страницами в Vanilla JS — настоящий crossfade без фреймворков

Собераем лёгкий SPA-router на History API с анимацией переключения страниц: текущая и следующая страницы одновременно живут в DOM, клонируются и плавно перетекают друг в друга

Демо | Github

https://tympanus.net/codrops/2026/02/26/building-async-page-transitions-in-vanilla-javascript/
  • 👍 7
  • ❤ 2
  • 🤔 1
Post #9688 4.08K
Flex vs Grid: объяснение разницы на практике

Flex и Grid решают разные задачи: Flex — про раскладку в одном направлении, Grid — про контроль и строк, и колонок. Разберём типовые кейсы (например, карточки в ряд) и покажем, как выбирать нужный инструмент.

https://habr.com/ru/companies/timeweb/articles/1004986
  • 👍 6
  • ❤ 3
  • 🔥 2
Post #9687 4.2K
Деструктуризация в JavaScript: учимся разбирать данные удобно и лаконично

Деструктурирующее присваивание помогает распаковывать массивы и объекты прямо в параметрах и переменных — особенно когда структура вложенная. Разберём, как это работает и почему синтаксис кажется коротким, но делает много работы.

https://css-tricks.com/javascript-for-everyone-destructuring/
  • 👍 10
  • 🔥 3
  • ❤ 1
Post #9686 5.49K
Переход от Moment.js к Temporal API

Хотя Moment.js был популярен, его недостатки, такие как большой размер и изменяемость объектов, привели к появлению нового стандарта. Современный Temporal API в JavaScript решает эти проблемы.

https://smashingmagazine.com/2026/03/moving-from-moment-to-temporal-api/
  • 🔥 9
  • 😁 3
  • 👍 2
Post #9685 5.04K
5 операторов RxJS в Angular, которые решают 80% проблем

Эти операторы упрощают работу с асинхронными данными, помогая отменять устаревшие запросы, объединять данные из нескольких источников, реагировать на изменения множества фильтров и корректно обрабатывать ошибки.

https://habr.com/ru/companies/ruvds/articles/1008646
  • 🔥 9
  • ❤ 2
  • ⚡ 1
Post #9684 4.78K
Улучшаем производительности анимаций с помощью requestAnimationFrame

requestAnimationFrame — это браузерный API, разработанный специально для визуальных обновлений, который позволяет планировать их прямо перед следующей перерисовкой, обеспечивая плавность и отзывчивость.

https://www.debugbear.com/blog/requestanimationframe
  • 👍 10
  • ❤ 1
  • 🔥 1
Post #9683 4.11K
FrontEndDev Друзья! Стартует новый сезон Podlodka React Crew: «Продвинутый React». Podlodka React Crew — онлайн-конференции для React-разработчиков. По традиции иду сам и зову вас с собой 😊 Разработчики регулярно сталкиваются с проблемами производительности, утечками…
Итак!

Бесплатная проходка на Podlodka React Crew рандомным образом достается @m_hodeneva

Поздравляем!🎉🎉🎉
У всех остальных еще есть шанс урвать early-bird билет!

Всем хорошей недели 😊
podlodka.io Онлайн-конференция Podlodka React Crew, сезон #4 Недельное мероприятие от команды Podlodka: ежедневные интерактивные сессии в Zoom по актуальным проблемам frontend-разработки, нон-стоп общение с экспертами и звёздами индустрии, закрытое профессиональное сообщество в Telegram.
  • 👍 8
  • ❤ 4
Post #9682 3.99K
О специфике разработки приложений под Smart TV: личный опыт перехода от веба к ТВ

В отличие от привычного веба, здесь нужно учитывать линейную навигацию, принципы 10-foot UI и аппаратные ограничения.

https://habr.com/ru/companies/vk/articles/1008506
  • 👍 10
  • ❤ 3
Post #9681 3.92K
Друзья! Мои коллеги пишут выпускную работу и проводят исследование "о важности аспектов бренда работодателя для IT-специалистов поколения Z при выборе компании".

Если у вас есть свободные 6 - 8 минут и вы родились позже 1996, ответьте пожалуйста на несколько вопросов.

Всем добра ✌️

PS: сегодня подведем итоги розыгрыша билета на Podlodka React Crew. Следите за постами 😊
Google Docs Влияние привлекательности бренда работодателя на намерение трудоустройства IT-специалистов поколения Z Здравствуйте! Мы — студентки НИУ ИТМО (Сорокина София и Машир Анастасия) проводим исследование в рамках выпускной квалификационной работы. Цель — понять, какие аспекты бренда работодателя наиболее важны для IT-специалистов поколения Z при выборе компании.…
  • 👍 6
  • ❤ 5
Older posts →
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →