front_end_dev | Технологии

Telegram-канал front_end_dev - FrontEndDev

29748

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

Подписаться на канал

FrontEndDev

👩‍💻 Всем программистам посвящается!

Вот 17 авторских обучающих IT каналов по самым востребованным областям программирования:

Выбирай своё направление:

👩‍💻 Frontend — t.me/frontend_ready
📱 JavaScript — t.me/javascript_ready
👩‍💻 Backend — t.me/backend_ready
📱 GitHub & Git — t.me/github_ready
👩‍💻 Python — t.me/python_ready
🤔 InfoSec & Хакинг — t.me/hacking_ready
🖥 SQL & Базы Данных — t.me/sql_ready
🤖 Нейросетиt.me/neuro_ready
👩‍💻 C/C++ — /channel/cpp_ready
👩‍💻 C# & Unity — t.me/csharp_ready
👩‍💻 Java — t.me/java_ready
👩‍💻 Linux — t.me/linux_ready
🖼 DevOpst.me/devops_ready
📖 IT Книги — t.me/books_ready
👩‍💻 Весь IT — t.me/it_ready
👩‍💻 Bash & Shell — t.me/bash_ready
🖥 Design — t.me/design_ready

📌 Гайды, шпаргалки, задачи, ресурсы и фишки для каждого языка программирования!

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

FrontEndDev

Представлен Wasm 3.0 — новое поколение стандарта с масштабными обновлениями

Обновления 3 версии включает 64-битную адресную память, поддержку множественных областей памяти, встроенный сборщик мусора и расширенную систему типизированных ссылок. Новая версия также добавляет нативную обработку исключений и позволяет эффективно компилировать высокоуровневые языки.

https://webassembly.org/news/2025-09-17-wasm-3.0/

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

FrontEndDev

Удобнее чем Ctrl + F: ссылки прямо на контент

Добавляем ссылки на текст с помощью специального синтаксиса URL-адреса, который браузер интерпретирует для прокрутки и выделения указанного контента. Теперь вы можете создавать ссылки на фрагменты текста, а в Chromium-браузерах даже есть встроенная функция для этого.

https://alfy.blog/2024/10/19/linking-directly-to-web-page-content.html

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

FrontEndDev

Друзья, привет!

На связи проект Лиза Алерт —Добровольческий поисково-спасательный отряд, который занимается поиском людей.

Для реализации продукта, который поможет спасти жизни, нам очень нужны frontend разработчики (React+TypeScript) с опытом. Проект некоммерческий, нужны волотнеры.

Для связи писать @Shilkin_Dmitry

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

FrontEndDev

Вам может пригодиться useSyncExternalStore

Разбираем распространённый паттерн — useEffect + useState + подписка, который может приводить к «миганию» интерфейса, особенно при серверном рендеринге. Посмотрим, как вместо этого использовать useSyncExternalStore, который обеспечивает синхронное чтение внешнего состояния и предотвращает лишние повторные рендеры и рассинхронизации.

https://swizec.com/blog/you-may-be-looking-for-a-useSyncExternalStore/

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

FrontEndDev

Представлен Chrome DevTools MCP для взаимодействия с браузером

Теперь AI-ассистенты могут видеть и взаимодействовать с браузером: они могут запускать код, инспектировать страницу, диагностировать ошибки и отлаживать веб-приложения. Подробнее в статье Эдди Османи.

https://addyosmani.com/blog/devtools-mcp/

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

FrontEndDev

Browserslist теперь напрямую поддерживает запросы Baseline, упрощая таргетирование возможностей браузеров

Эта интеграция позволяет разработчикам легко настраивать поддержку функций на основе их широкой или недавней доступности, а также по годам. Отдельный пакет browserslist-config-baseline больше не нужен, что упрощает конфигурацию проекта.

https://web.dev/blog/browserslist-supports-baseline?hl=en

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

FrontEndDev

Создаём анимированные аккордеоны на основе Details

Как создавать продвинутые аккордеоны исключительно с помощью HTML и современного CSS. Применяем элемент <details> и новые CSS-свойства interpolate-size и transition-behavior для плавной анимации раскрытия контента.

https://www.builder.io/blog/animated-css-accordions?utm_campaign=Issue-609

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

FrontEndDev

Feature Highlight

Библиотека для подсветки UI элементов в приложении. Удобно для создания онбординга.

https://github.com/ahmad-moussawi/feature-highlight

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

FrontEndDev

Стилизуем счётчики в CSS

Как использовать CSS Counters и @counter-style для автоматической нумерации элементов, оформления списков и нестандартных маркеров, без добавления лишнего HTML или JS.

https://css-tricks.com/styling-counters-in-css

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

FrontEndDev

View Transitions: что может пойти не так?

Сборник наиболее частых проблем, когда View Transition API не стартует, срабатывает некорректно или зависает — проблемы в имени перехода, отсутствие нужных CSS-правил, конфликты с фреймворками, кросс-доменной навигацией и т.п. Способы диагностики и устранения проблем.

https://vtbag.dev/tips/view-transition-fails-and-fixes/

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

FrontEndDev

Интеграция CSS Cascade Layers в существующий проект

Подробный взгляд на внедрение CSS Cascade Layers в существующую кодовую базу, показывающий, как можно рефакторить старый CSS, используя слои, не нарушая при этом работоспособности сайта.

В качестве примера рефакторинга взят сайт Discord-бота, где демонстрируется, как с помощью слоёв можно улучшить структуру и управляемость стилей.

https://www.smashingmagazine.com/2025/09/integrating-css-cascade-layers-existing-project/

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

FrontEndDev

256

🎉От души поздравляю всех причастных с праздником! 🎉

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

FrontEndDev

Введение в CSS Cascade Layers

Статья о том, как относительно новая возможность CSS — @layer позволяет явно управлять порядком применения стилей и уменьшать конфликты между правилами, особенно в крупных проектах с внешними библиотеками и сторонним CSS.

На примерах показано, как можно организовать стили через слои (reset, base, components, utilities) и как слои меняют приоритеты правил без злоупотребления !important.

https://www.smashingmagazine.com/2022/01/introduction-css-cascade-layers/

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

FrontEndDev

Друзья!

🚀 Frontend Conf 2025 — совсем скоро!

Если вы думаете, что конференции — это скучные доклады, то Frontend Conf 2025 точно разрушит миф. В этом году я решил лично проверить это и зову вас с собой!

jem_jem/UXMUTILHXsB">Топ-10 самых ожидаемых выступлений уже определен голосованием самих разработчиков, но мне лично интересно послушать доклады из секции FrontOps (тем более что один из спикеров мой бывший руководитель из Альфы — Иван Усынин, расскажет про микрофронтенды, к которым я так и не подступился).

Кроме основных секций таких как Архитектура, Производительность, Технологии, будут еще специальные: PWA, AI во фронтенде, FrontOps и еще несколько. Весь список секций и выступлений можно посмотреть тут. В общем глаза разбегаются.

А ещё будет уникальный фейл-митап. 6 реальных историй факапов в разработке, как какой-то важный сеньор случайно задизейблил кнопку чекаута в корзине и увидели это только через месяц. Всегда приятно знать, что не только у тебя были факапы 😅

🔥 Не пропустите одно из главных IT-событий этой осени! Подробнее о конференции по ссылке

Для подписчиков FrontEndDev действует промокод на скидку 5% fc25_front_end_dev

До встречи на Frontend Conf 2025 🚀

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

FrontEndDev

Ваши изображения (возможно) слишком большие

Часто мы загружаем на сайт изображения гораздо крупнее, чем необходимо для просмотра, что приводит к лишнему расходу трафика и долгой загрузке. Многие думают, что компонент <Image/> из NextJS автоматически решит эту проблему, однако без правильного атрибута sizes изображения всё равно могут быть избыточными для меньших экранов. Как это исправить — в статье.

https://reasonunderpressure.com/blog/posts/your-images-are-probably-oversized

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

FrontEndDev

Друзья!

До Frontend Conf 2025 осталось меньше месяца, а до повышения цен — всего пара дней 🫨 Для тех, кто еще не решил, будет ли конфа интересной/полезной, на Хабре вышел обзор Главные тренды фронтенда в 2025 году: AI, архитектура, PWA и многое другое, где можно почитать более подробно про каждую секцию.

👉 Подробнее о самой конференции по ссылке

Напоминаю, что для подписчиков FrontEndDev действует промокод на скидку 5% fc25_front_end_dev 🔥

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

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

FrontEndDev

Новые возможности CSS типизированной арифметики

Начиная с Chrome 140 мы можем делать вычисления в CSS, смешивая различные типы данных. Звучит не так грандиозно, но это позволяет создавать сложные и данимаческие макеты и анимации без JS.

https://css-tricks.com/css-typed-arithmetic/

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

FrontEndDev

Prompting — это акт разработки: как формировать и улучшать работу с AI

Линдон Серейо показывает, что промпты — это не просто инструкции для модели, а скорее гибрид творческого брифа и диалога с ИИ, где важно продумывать контекст и тон. Он предлагает подходить к prompting как к инструменту разработки: формировать структуру, делить на шаги, проверять и уточнять — чтобы получать более качественные и предсказуемые ответы от AI

https://www.smashingmagazine.com/2025/08/prompting-design-act-brief-guide-iterate-ai/

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

FrontEndDev

Воссоздание анимации кнопки Google Gemini с помощью CSS

В статье подробно показано, как с нуля реализовать интерактивный эффект кнопки, используя функции CSS shape() и clip-path для создания морфирующих геометрических форм.

https://css-tricks.com/recreating-gmails-google-gemini-animation

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

FrontEndDev

Амбиентные анимации в веб дизайне: принципы и реализация


Амбиентные анимации это тонкие, медленные детали, которые создают атмосферу, не перетягивая внимание на себя. Они делают дизайн живым и интересным.

https://smashingmagazine.com/2025/09/ambient-animations-web-design-principles-implementation/

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

FrontEndDev

Обновленный курс по изучению CSS от команды Chrome

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

https://web.dev/blog/learn-css-refresh?hl=en

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

FrontEndDev

Filter -- веб редактор изображений

Filter – мощный веб-редактор, созданный на React и TypeScript. Он предлагает интуитивный интерфейс, оптимизирован для мобильных устройств и обеспечивает быструю обработку изображений прямо в браузере. Проект использует Vite, Tailwind CSS и Filerobot Image Editor.

https://github.com/addyosmani/filter

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

FrontEndDev

Упрощаем CSS с помощью псевдокласса :is()

Как псевдокласс :is() позволяет группировать сразу несколько селекторов внутри одного правила — вместо длинных списков через запятую — что делает CSS чище и проще поддерживаемым. Реальные примеры, где :is() помогает избавиться от дублирования правил и уменьшить вложенность селекторов, не теряя выразительности стилизации.

https://gomakethings.com/reducing-css-complexity-with-the-is-pseudo-class/

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

FrontEndDev

🚀 AlfaHost.io — сервера без лагов

Ищете VPS с балансом цены и стабильности? Мы сделали тарифы так, чтобы было честно: быстрые NVMe-диски, выделенные ресурсы и SLA 99,8% аптайма.
Ваши проекты работают стабильно и предсказуемо.

🎁 Доступно всего 100 промо-тарифов по $3. А также гифткоды за подписку на @alfahost_io

— Оплата криптой и в рублях
— Сервер готов к работе за минуты
— Сети до 10Гбит/с
— Локации в Европе: Нидерланды, топовые Ryzen 9950x в Эстонии. Скоро - Германия, Финляндия, Швеция 🔥

По промокоду ALFA_KKlBLDn будет скидка 10% 🔥

VPS от $6, реферальная программа с 15% бонусом и возможностью вывода.

⚡️ Забирайте сервер на AlfaHost.io, пока тарифы не разобрали!

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

FrontEndDev

MCP заменяет браузер: как разработчикам подготовиться к этому

Model Context Protocol (MCP) — новая парадигма, где AI-агенты вместо традиционного браузера будут напрямую вызывать API/инструменты MCP-сервера для выполнения задач, которые раньше мы бы делали кликами и навигацией.

Теперь разработчикам придется думать не о пикселях и UI-элементах, а о чётких эндпоинтах, API с понятной семантикой, UX, ориентированном на AI, и безопасности.

https://blog.logrocket.com/mcp-is-replacing-the-browser/

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

FrontEndDev

Mos.Hub//Парк.Код: разработчики кодят прямо на Садовом кольце

В этом году День программиста совпал с Днем города в столице, — и двойной праздник решили отметить по-особенному. В павильоне «Цифровые технологии Москвы» в «Музеоне» проходит хакатон под открытым небом Mos.Hub//Парк.Код.

Три волны ИТ-спринта, 40 минут на создание приложения, Python, Java или другой современный язык программирования, мгновенная загрузка результатов после тестирования. В целом привычный для разработчиков формат, вот только локация необычная. Место действия — не офис или коворкинг, а парк в самом центре столицы.

День программиста, который мы заслужили!

Подписывайтесь на «ДИТ: Технологии Москвы» — там рассказывают, как развивают ИТ в Москве.

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

FrontEndDev

Интерполяция цветов в CSS


Color interpolation — браузерный механизм расчета промежуточных цветов между двумя заданными, например в градиентах, переходах или анимациях. Более подробно о том как это работает, почему цветовое пространство (sRGB, Lab, OKLCH и др.) влияет на визуальный результат и как это можно применять чтобы сделать интерфейсы визуально приятнее — в статье.

https://css-tricks.com/what-you-need-to-know-about-css-color-interpolation

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

FrontEndDev

Хватит писать try/catch вокруг fetch

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

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

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

FrontEndDev

Вам не нужна анимация (ну или не всегда нужна)

Под кликбейтным заголовком Эмиль Ковальский рассказывает, что анимации лучше добавлять, если есть ясная цель — например, создание ощущения отзывчивости интерфейса.

Излишняя же анимация, особенно при частом использовании, начинает раздражать и снижает доверие пользователей. Подробнее и с примерами — по ссылке.

https://emilkowal.ski/ui/you-dont-need-animations

Читать полностью…
Подписаться на канал