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

Главный подвох якорного позиционирования в 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

Обработка видео в web с помощью WebCodecs

Туториал по работе с WebCodecs API: создаем видео-редактор и live стримы без серверной обработки.

https://www.sitepoint.com/video-processing-in-browser-with-Web-Codecs

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

FrontEndDev

UI паттерны для асинхронных процессов и фоновых задач

Как создавать интуитивно понятные интерфейсы для фоновых задач и конвейеров данных, чтобы пользователи не теряли контроль и понимали, что происходит в приложении.

https://blog.logrocket.com/ui-patterns-for-async-workflows-background-jobs-and-data-pipelines/

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

FrontEndDev

Создание адаптивной пирамиды с помощью современного CSS

Делаем сложный адаптивный макет с гексагональными элементами, используя передовые возможности CSS Grid и математические вычисления.

https://css-tricks.com/making-a-responsive-pyramidal-grid-with-modern-css/

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

FrontEndDev

Я 💛 Фронтенд 2026

Прямая трансляция конференции которая начнется сегодня в 11:00 МСК

Программу можно глянуть тут.

https://www.youtube.com/live/Da3cJi7RDPg

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

FrontEndDev

CSS @scope: Альтернатива соглашениям об именовании и тяжелым абстракциям

Упрощаем поддержку стилей с новым правилом @scope, которое позволяет точно ограничивать область действия стилей в DOM.

https://www.smashingmagazine.com/2026/02/css-scope-alternative-naming-conventions/

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

FrontEndDev

Компилируем TypeScript в натив: хардкор и мясо.

TSNative — это AOT-компилятор, который позволяет преобразовывать TypeScript-код в нативные бинарные файлы, используя LLVM IR. Это решение подходит для создания десктопных приложений, обеспечивая прямое взаимодействие с C++ без браузера или JavaScript-движка.

https://habr.com/ru/companies/ncloudtech/articles/990666

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

FrontEndDev

Claude Code Agent teams.

Claude Code теперь поддерживает команды агентов, позволяя нескольким ИИ-помощникам работать над сложными задачами параллельно. Такая многоагентная координация значительно ускоряет исследование, отладку и разработку, делегируя задачи специализированным агентам для более эффективного выполнения.

https://addyosmani.com/blog/claude-code-agent-teams/

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

FrontEndDev

Как frontend-разработчику получить оффер в Big Tech?

Платят как джуну, а спрашивают как с лида 🙄 Зарплата не растёт, задачи скучные.

Пробуешь откликаться, но на резюме клюют только ноунейм компании, а на собесах валят на алгоритмах? При этом вокруг кто-то постоянно получает офферы в Яндекс или VK...

Стабильность с маленькой зп, или дестрой рынка и выход на максимальную? Синяя или красная таблетка, Нео?! 👾

Меня зовут Тихон, привет! Я — действующий Frontend-разработчик и ментор.

Помогаю устроиться на хорошие позиции в Big Tech и сопровождаю на испытательном сроке.


В своем канале:
👉Разбираю самые популярные и каверзные вопросы на собесах
👉Рассказываю как пройти фильтр HR
👉Борюсь с убеждениями, которые мешают развиваться
👉Делюсь лайфхаками, например как аккуратно “пинговать” рекрутеров

Регулярно публикую полезные материалы:

▪️60 вопросов, которые точно помогут тебе на собеседовании.
▪️Подборка из 100+ каналов с вакансиями для разработчиков
▪️
10 задротских вопросов про JavaScript, после которых ты усомнишься, что вообще знаешь JS. Часть 1
▪️Чек лист проверки своего резюме

Подписывайся, нас уже 4500 🤓: ссылка

Реклама, erid 2W5zFGPt2rC: ИП Галактионов Тихон Витальевич, ИНН 771618975809

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

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/

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

FrontEndDev

Как одно эмодзи замедлило приложение в 100 раз.

Невероятный баг, который приводил к задержке в 1600 мс на каждом этапе отрисовки в Safari, был вызван одним эмодзи из-за использования шрифта Noto Color Emoji.

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

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

FrontEndDev

Развлекаемся с TypeScript дженериками

Используем продвинутые возможности дженериков, условные типы и перегрузку функций, чтобы создавать строго типизированные утилиты.

https://frontendmasters.com/blog/fun-with-typescript-generics/

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

FrontEndDev

Друзья!

Один из наших подписчиков вместе с командой запустил open source CSS-фреймворк mlut [млат].

mlut помогает верстать проекты с нешаблонным дизайном, где не подходят фреймворки старой школы и плохо справляются LLM. mlut похож на Tailwind, поскольку основан на подходе Atomic CSS, но по некоторым параметрам превосходит аналоги.

Ключевые особенности mlut
1. Краткий и строгий нейминг — cокращения основаны на популярности свойств CSS и составлены по единому алгоритму.
2. Богатый и нативный синтаксис
3. Написан на Sass. Позволяет использовать всю мощь препроцессора для связи рукописного CSS и утилит

На сегодня уже реализованы генератор утилит, CLI с минификацией и автопрефиксером, плагины для сборщиков и онлайн-песочница. А также есть обширная документация, плюс готовится серия уроков совместно с HTML Academy (тут первый).

Проект активно развивается в сторону добавления фич для сложной верстки и интеграции с IDE.

Недавно ребята запустили проект на ProductRadar, поэтому все желающие могут его поддержать и оставить фидбек, который очень важен для команды!

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

FrontEndDev

Полифилл для switch

В Safari 17.4 появился новый нативный HTML элемент switch, который превращает обычный checkbox с атрибутом switch в переключатель. Для остальных браузеров есть полифилл. Подробее о нем — в статье

https://blog.tomayac.com/2026/01/12/a-polyfill-for-the-html-switch-element/

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

FrontEndDev

Браузер ненавидит сюрпризы

Непредвиденные изменения макета, например, из-за долгой загрузки изображений, вынуждают браузер пересчитывать геометрию страницы, вызывая скачки интерфейса. Подробно о том, как избежать этого и заранее резервировать пространство для контента в статье frontendmasters.

https://frontendmasters.com/blog/the-browser-hates-surprises/

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

FrontEndDev

Отладка перфоманса с использованием Chrome DevTools MCP

Пошаговый туториал автоматизированного анализа производительности веб приложений с помощью AI и Chrome DevTools MCP.

https://www.debugbear.com/blog/chrome-devtools-mcp-performance-debugging

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

FrontEndDev

Тихая революция в CSS в создании вырезов в блоках

Пока мы делаем вид, что не прошляпили посты за ВСЮ прошлую неделю, предлагаем вам почитать как делать вырезы с использованием CSS-масок одной строчкой.

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

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

FrontEndDev

Как легко определить версии Safari и iOS

Почему стоит отдавать предпочтение проверке фич вместо ненадежного User-Agent

https://evilmartians.com/chronicles/how-to-detect-safari-and-ios-versions-with-ease

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