FrontEndDev

15 September 2025 20:40

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

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

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

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

FrontEndDev

13 September 2025 17:05

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

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

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

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

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

FrontEndDev

12 September 2025 21:10

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


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

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

FrontEndDev

11 September 2025 11:22

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

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

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

FrontEndDev

10 September 2025 13:13

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

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

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

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

FrontEndDev

09 September 2025 19:01

Наконец, безопасные методы массивов в JS

Безопасность, правда, только в плане того, что они не мутируют начальный массив.

https://allthingssmitty.com/2025/09/08/finally-safe-array-methods-in-javascript/

FrontEndDev

08 September 2025 10:10

Почему браузеры замедляют JavaScript-таймеры

Nolan Lawson объясняет, что setTimeout(0) на самом деле не исполняется мгновенно — браузеры намеренно ограничивают минимальную задержку до 4 мс, чтобы предотвратить чрезмерную нагрузку и не замораживать интерфейс. В статье показаны альтернативные варианты — MessageChannel.postMessage, window.postMessage и современный scheduler.postTask() — они обходят это ограничение и работают гораздо быстрее для задач, требующих точного тайминга.

https://nolanlawson.com/2025/08/31/why-do-browsers-throttle-javascript-timers/

FrontEndDev

05 September 2025 09:30

Вы неправильно загружаете шрифты (и это сказывается на производительности)

Джоно Олдерсон объясняет, как работают веб-шрифты и почему их неправильная загрузка может замедлять сайт. В статье разбираются оптимальные стратегии подключения — от выбора форматов до настройки font-display, чтобы ускорить рендеринг и улучшить пользовательский опыт.

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

FrontEndDev

03 September 2025 16:30

Отзывчивое видео теперь (почти) просто реализовать

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

https://www.kooslooijesteijn.net/blog/responsive-video-easy

FrontEndDev

02 September 2025 16:30

Liquid Glass в веб

Операционные системы Apple обновили свой дизайн. Фишкой этого дизайна стал эффект Liquid Glass. Не очень простой эффект для реализации в вебе. Вот несколько примеров и подходов, которыми разработчики пытаются перенести такой эффект в веб.

https://frontendmasters.com/blog/liquid-glass-on-the-web/

FrontEndDev

01 September 2025 16:30

Сапер в 100 строк на чистом JavaScript

Простой туториал, который поможет вам лучше понять правила игры.

https://slicker.me/javascript/mine/minesweeper.htm

FrontEndDev

31 August 2025 16:30

CSS лифт: конечный автомат на чистом CSS для навигации по этажам

Как при помощи современных возможностей CSS можно создать полнофункциональный лифт с перемещением между этажами без JavaScript. Интерфейс работает как конечный автомат: пользователь выбирает этаж, и благодаря состояниям CSS лифт «понимает», куда ему двигаться.

https://css-tricks.com/css-elevator-a-pure-css-state-machine-with-floor-navigation/

FrontEndDev

29 August 2025 09:48

Бросаем кости с CSS random()

Новая CSS-функция random() (доступна в Safari Technology Preview) — позволяет генерировать рандомные значения прямо в стилях: позицию, цвет, размеры, анимации и многое другое — без единой строки JavaScript

https://webkit.org/blog/17285/rolling-the-dice-with-css-random

FrontEndDev

28 August 2025 09:35

Что такое Generative Engine Optimization (GEO)?

Generative Engine Optimization (GEO) — новый подход, который помогает создавать контент, чтобы AI-движки (например, ChatGPT, Google AI-Overviews, Perplexity) ссылались на ваш сайт напрямую в своих ответах, а не просто выводили его среди ссылок в выдаче. В отличие от SEO, ориентированного на рейтинги и клики, GEO ставит задачу — стать частью ответа AI, и включает оптимизацию структуры, цитируемости, авторитетности контента и семантики.

https://www.sitepoint.com/generative-engine-optimization

FrontEndDev

27 August 2025 15:10

Начните карьеру в IT с профессии Frontend-разработчика

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

Преимущества профессии:
— Высокий доход: от 70 000 рублей для начинающих специалистов, до 300 000 рублей для опытных разработчиков
— Широкие возможности для работы: IT-компании, банки, стриминговые сервисы, фриланс
— Гибкий график: 50% вакансий предлагают удаленный формат работы

Чем занимается Frontend-разработчик:
— Создает адаптивные интерфейсы, которые корректно отображаются на любых устройствах
— Разрабатывает интерактивные элементы: формы, кнопки, анимации
— Оптимизирует производительность сайтов и приложений
— Работает с современными технологиями: HTML, CSS, JavaScript, React, Vue.js

С чего начать обучение:
— Освоить основы HTML и CSS
— Изучить JavaScript и принципы работы с DOM
— Практиковаться на реальных проектах
— Изучить популярные фреймворки (React, Vue.js, Angular)

Получите подробную карту развития (Skill-map) для frontend-разработчика и узнайте, как построить успешную карьеру в IT.

Зарегистрируйтесь и скачайте гайд → https://otus.pw/Fe12/

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

FrontEndDev

15 September 2025 13:30

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

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

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

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

FrontEndDev

13 September 2025 14:09

256

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

FrontEndDev

12 September 2025 17:29

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

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

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

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

FrontEndDev

10 September 2025 15:35

Друзья!

🚀 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

10 September 2025 09:30

Основы выравнивания в CSS: полный разбор

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

https://css-tip.com/explore/alignment/?utm_campaign=Issue-620

FrontEndDev

08 September 2025 16:37

Привет!

Сегодня в канале у Дани Ленца, фронта из Яндекса, нашел пост про автоматизацию личных аккаунтов в Telegram через MTProto API. Он сделал бота, который пересылает банковские уведомления друзьям в группу — классная и простая идея.

Вообще, это хорошее напоминание, что разработка на JavaScript уже давно не ограничивается сайтами. Благодаря таким библиотекам, как gramjs, мы можем работать с Telegram напрямую, автоматизировать задачи и строить сервисы поверх привычного стека. У JS-платформы действительно огромные возможности — от фронтенда в браузере до полетных программ в компах SpaceX (надеюсь там без undefined is not a function обходится 😅).

FrontEndDev

06 September 2025 14:50

Использование Custom Highlight API

Custom Highlight API позволяет вам стилизовать участки текста в документе, используя JS для выделения и CSS для стилизации, что может быть удобно для реализации поиска по странице.

https://frontendmasters.com/blog/using-the-custom-highlight-api/

FrontEndDev

04 September 2025 16:30

Гладкие края в radial-gradient() без артефактов

Ана Тюдор делится трюком: с помощью медиазапросов по разрешению можно добиться того, чтобы радиальные градиенты выглядели чёткими и не размывались. Такой приём помогает сделать фоновые круги и диски максимально аккуратными — без привычных «лесенок» и артефактов.

https://frontendmasters.com/blog/obsessing-over-smooth-radial-gradient-disc-edges/

FrontEndDev

03 September 2025 09:30

So many ranges, so little time

Шпаргалка по свойству animation-ranges. Saron Yitbarek рассказывает все, что вам нужно знать об animation-ranges в scroll-driven анимации.

https://webkit.org/blog/17184/so-many-ranges-so-little-time-a-cheatsheet-of-animation-ranges-for-your-next-scroll-driven-animation/

FrontEndDev

02 September 2025 09:30

Иллюстрированный гайд по Big O и временной сложности

JavaScript-ориентированное, интерактивное и визуализированное руководство по системе обозначения Big O и ее роли в описании сложности алгоритмов. Подойдёт даже для тех, кто отличает O(log n) от O(n^2).

https://samwho.dev/big-o/

FrontEndDev

01 September 2025 09:30

Next.js Caching & Rendering Tutorial

1.5 часовой курс по кешированию и рендерингу в Next.js для начинающих.

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

FrontEndDev

29 August 2025 14:50

Трюк с radio button для корзины товаров

Хороший пример, как управлять интерактивностью и UI-эффектами (плавные переходы и анимация добавления товара), не перегружая интерфейс лишним JavaScript-кодом.

https://css-tricks.com/a-radio-button-shopping-cart-trick/

FrontEndDev

28 August 2025 16:03

JWTAuditor

Бесплатный онлайн-анализатор JWT, декодер и инструмент для тестирования безопасности.

https://jwtauditor.com/

FrontEndDev

27 August 2025 16:30

Что такое Generative Engine Optimization (GEO)?

Generative Engine Optimization (GEO) — новый подход, который помогает создавать контент, чтобы AI-движки (например, ChatGPT, Google AI-Overviews, Perplexity) ссылались на ваш сайт напрямую в своих ответах, а не просто выводили его среди ссылок в выдаче. В отличие от SEO, ориентированного на рейтинги и клики, GEO ставит задачу — стать частью ответа AI, и включает оптимизацию структуры, цитируемости, авторитетности контента и семантики.

https://www.sitepoint.com/generative-engine-optimization/?utm_source=rss

FrontEndDev

27 August 2025 14:14

Текст с трехмерными слоями

Создание сложного эффекта объёмного текста, похожего на стопку вырезанных слоёв. Три части — от основ к добавлению интерактивности.

Часть 1
Часть 2
Часть 3