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

Деструктуризация в JavaScript: учимся разбирать данные удобно и лаконично

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

https://css-tricks.com/javascript-for-everyone-destructuring/

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

FrontEndDev

5 операторов RxJS в Angular, которые решают 80% проблем

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

https://habr.com/ru/companies/ruvds/articles/1008646

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

FrontEndDev

Итак!

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

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

Всем хорошей недели 😊

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

FrontEndDev

Друзья! Мои коллеги пишут выпускную работу и проводят исследование "о важности аспектов бренда работодателя для IT-специалистов поколения Z при выборе компании".

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

Всем добра ✌️

PS: сегодня подведем итоги розыгрыша билета на Podlodka React Crew. Следите за постами 😊

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

FrontEndDev

CSS-свойство corner-shape: новые горизонты для интерфейсов

Новое свойство corner-shape в связке с border-radius наконец позволяет легко создавать скошенные, вогнутые, скругленные и другие формы, делая ваш интерфейс выразительнее и чище

https://www.smashingmagazine.com/2026/03/beyond-border-radius-css-corner-shape-property-ui/

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

FrontEndDev

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

https://habr.com/ru/companies/doubletapp/articles/1005810

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

FrontEndDev

Подробное руководство по настройке списков с помощью CSS

Разбираем свойства list-style-type, псевдоэлемент ::marker для базовой кастомизации и правило @counter-style для создания собственных систем нумерации

https://frontendfoc.us/link/181162/web

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

FrontEndDev

Спрайты в вебе

Используйте технику спрайтов, чтобы создавать эффективные покадровые анимации на веб-страницах с помощью современных CSS-свойств, таких как object-fit, object-position и функции steps().

https://www.joshwcomeau.com/animation/sprites/

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

FrontEndDev

Главный подвох якорного позиционирования в CSS

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

https://frontendmasters.com/blog/the-big-gotcha-of-anchor-positioning/

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

FrontEndDev

Пишем систему частиц и физику на чистом JS для создания Canvas-конфетти

Посмотрим, как построить собственную архитектуру на Canvas для анимаций: от базовых примитивов до сложных систем частиц с реализацией физики и эффектов вращения.

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

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

FrontEndDev

Создание горизонтальной галереи с параллаксом: от DOM до WebGL.

Разбираем создание плавной галереи с параллаксом, начиная с классического подхода на DOM/CSS/JS с переходом к версии на WebGL, полностью использующей возможности GPU для максимальной гладкости.

https://tympanus.net/codrops/2026/02/19/creating-a-smooth-horizontal-parallax-gallery-from-dom-to-webgl/

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

FrontEndDev

CSS @container scroll-state: заменяем JS подписку на скролл

Новая функция @container scroll-state позволяет CSS напрямую реагировать на положение элемента в его скролл-контейнере, заменяя тяжеловесные JS подписки.

https://blog.logrocket.com/css-container-scroll-state/

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

FrontEndDev

Исследуем возможности `:near()`, нового псевдокласса, который может появиться в браузерах.

Этот псевдокласс определяет близость указателя к элементу, открывая возможности для условного отображения элементов, а также для оптимизации предзагрузки контента.

https://css-tricks.com/potentially-coming-to-a-browser-near-you/

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

FrontEndDev

20 платформ для дизайн-референсов, которые выходят за рамки Dribbble.

Cписок предлагает 20 платформ, где можно найти не только красивые картинки, но и реальные пользовательские пути, видеозаписи, файлы Figma, код компонентов и лучшие практики для создания функциональных интерфейсов.

https://jsdevspace.substack.com/p/20-design-reference-platforms-beyond

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

FrontEndDev

Почему статические сайты возвращаются и чему они научились

Статические сайты снова актуальны: они предлагают зрелую архитектуру, способную решать до 90% задач быстрее, дешевле и безопаснее, чем тяжёлые бэкенды

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

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

FrontEndDev

Переход от Moment.js к Temporal API

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

https://smashingmagazine.com/2026/03/moving-from-moment-to-temporal-api/

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

FrontEndDev

Улучшаем производительности анимаций с помощью requestAnimationFrame

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

https://www.debugbear.com/blog/requestanimationframe

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

FrontEndDev

О специфике разработки приложений под Smart TV: личный опыт перехода от веба к ТВ

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

https://habr.com/ru/companies/vk/articles/1008506

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

FrontEndDev

Прощай innerHTML, привет setHTML

Новый метод .setHTML() в JavaScript, входящий в состав Sanitizer API, является прямой заменой для .innerHTML(). Это значительно усиливает защиту от XSS-атак, эффективно устраняя все риски DOM-XSS и повышая безопасность сайтов.

https://frontendmasters.com/blog/goodbye-innerhtml-hello-sethtml/

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

FrontEndDev

Друзья!

Стартует новый сезон Podlodka React Crew: «Продвинутый React». Podlodka React Crew — онлайн-конференции для React-разработчиков.
По традиции иду сам и зову вас с собой 😊

Разработчики регулярно сталкиваются с проблемами производительности, утечками памяти и архитектурными вызовами. Поэтому в этот раз программа будет очень технической — от внутренней работы V8 до React Server Components и профилирования производительности.

С 23 по 27 марта ее участники:

⚙️ узнают, как устроен рендер и внутренние механизмы в современном React
🧠 познакомятся с архитектурой приложений, где применяются React Server Components
📊 научатся профилировать React-приложения и выявлять медленные рендеры, memory leak
🛠познакомятся с дополнительными инструментами, которые помогут упростить отладку и выявить сложные проблемы

👉 Формат уже знакомый: несколько дней живых Zoom-сессий утром и вечером, закрытое комьюнити в Telegram и возможность пообщаться со спикерами.

Если хотите углубить свои знания про React в компании крутых экспертов, присоединяйтесь к Podlodka React Crew👇

🎟 Забрать early-bird билет можно до 16 марта

🎁 По традиции разыгрываем один билет. Для участия заполните форму. Итоги подведем в ближайшее время!

Для подписчиков FrontEndDev есть промокод на скидку 500р 🥳: FrontEndDev

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

FrontEndDev

Popover API или Dialog API: что выбрать?

Popover API упрощает создание всплывающих элементов, предлагая встроенные функции доступности. В то время как Dialog API лучше подходит для модальных окон, автоматически изолируя контент.

https://css-tricks.com/popover-api-or-dialog-api-which-to-choose/

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

FrontEndDev

На подходе стандартная ленивая загрузка HTML-видео и аудио!

Эта функция позволит отложить загрузку медиа-ресурсов до момента их появления в области видимости браузера, значительно снижая вес страницы и улучшая производительность. Используя loading="lazy" для <video> и <audio>, разработчики смогут оптимизировать загрузку медиа, что уже доступно для тестирования в Chrome Canary.

https://scottjehl.com/posts/lazy-media/

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

FrontEndDev

GitLab CI/CD для фронт разработчиков: от 0 до задеплоено

Настройте автоматизированное тестирование, сборку и развертывание на GitLab Pages. Подробное руководство с реальными примерами и практическими советами.

https://www.sitepoint.com/git-lab-ci-cd-for-frontend-developers

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

FrontEndDev

Как фронтенд получает данные с сервера: лучшие практики 2026.

Ключевые подходы к получению данных: от классического REST и GraphQL до паттерна Backend for Frontend (BFF) и реактивных методов.

https://habr.com/ru/companies/otus/articles/994238

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

FrontEndDev

Почему "scroll fade" эффект вызывает раздражение у пользователей

Эффект, при котором элементы плавно появляются при скролле страницы, часто используется без реальной цели. Такая анимация просто перегружает интерфейс, вместо того чтобы улучшать.

https://frontendmasters.com/blog/death-to-scroll-fade/

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

FrontEndDev

Vitest vs Jest 2026: Руководство по миграции

Vitest оказался в 10 раз быстрее с нативной поддержкой ESM. Расскажем о подводных камнях при миграции и проведем сравнение производительности из тестового сьюта на 50 тысяч тестов

https://www.sitepoint.com/vitest-vs-jest-2026-migration-benchmark/

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

FrontEndDev

Новые реактивные формы в Angular: Signal Forms API.

Это экспериментальное API, представленное в Angular 21, позволяет создавать типобезопасные формы с автоматической реактивностью и меньшим количеством шаблонного кода. Разработчики смогут гибко настраивать валидацию, управлять состояниями полей и легко встраивать кастомные контролы.

https://habr.com/ru/companies/tbank/articles/1000906

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

FrontEndDev

Плохие практики, которые часто встречаются в современной вёрстке.

В статье разбираются распространённые ошибки, от отсутствия альтернативного текста у интерактивных элементов до некорректного скрытия контента и неправильной работы с анимациями

https://habr.com/ru/companies/ruvds/articles/995784

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

FrontEndDev

Курс по основам сетей



https://www.youtube.com/watch?v=fQbBPa0ADvs

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

FrontEndDev

Вакансия Senior Frontend Developer /// Steper

Привет! Мы Steper — сервис для создания сценариев с привязкой к ботам в различных соцсетях и автоматизацией цепочек действий: от запуска задачи до её решения. Мы ищем Senior Frontend Developer. Проект напоминает что-то среднее между n8n.io и bothelp.io.

🛠 Стек: TypeScript, Vue 3 (опыт от 2 лет), Git (будет плюсом знание Node.js)
👩‍💻 Гибридный формат (удаленка, ищем кандидата из Москвы)

📌 Что делать:
▫️Разрабатывать интерфейсы платформы
▫️Проектировать и улучшать UI/UX, делать продукт удобным для бизнеса
▫️Работать над компонентами и архитектурой фронтенда.
▫️Участвовать в проектировании общей логики продукта и интеграций, включая AI-модули в сценариях.

📌 Важно:
▫️Писать качественный и современный код, но без чрезмерного увлечения велосипедами
▫️Уметь самостоятельно принимать решения по разработке продукта, а не ждать подробных ТЗ

📌 Что предлагаем:
▫️ЗП: от 300 000 ₽/мес на руки
▫️7-часовой рабочий день + 1 час обед
▫️Гибридный график работы (редкие встречи в Москве с командой)
▫️Оплата коворкинга и подписок на полезные сервисы (обсуждается)
▫️Возможность влиять на продукт и принимать ключевые решения
▫️Работа в небольшой продуктовой команде и участие в развитии проекта

Откликнуться: https://forms.yandex.ru/u/698d68d35056902e746570d5/

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