FrontEndDev

Вы неправильно загружаете шрифты (и это сказывается на производительности) Джоно Олдерсон объясняет, как работают веб-шрифты и почему их неправильная загрузка может замедлять сайт. В статье разбираются оптимальные стратегии подключения — от выбора форматов до настройки font-display, чтобы ускорить рендеринг и улучшить пользовательский опыт. https://frontendfoc.us/link/173424/web

Гладкие края в radial-gradient() без артефактов Ана Тюдор делится трюком: с помощью медиазапросов по разрешению можно добиться того, чтобы радиальные градиенты выглядели чёткими и не размывались. Такой приём помогает сделать фоновые круги и диски максимально аккуратными — без привычных «лесенок» и артефактов. https://frontendmasters.com/blog/obsessing-over-smooth-radial-gradient-disc-edges/?utm_campaign=Issue-619

Отзывчивое видео теперь (почти) просто реализовать Туториал, рассказывающий как вы можете отображать HQ вертикальные и горизонтальные варианты для видео без сторонних платформ. https://www.kooslooijesteijn.net/blog/responsive-video-easy

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/

Liquid Glass в веб Операционные системы Apple обновили свой дизайн. Фишкой этого дизайна стал эффект Liquid Glass. Не очень простой эффект для реализации в вебе. Вот несколько примеров и подходов, которыми разработчики пытаются перенести такой эффект в веб. https://frontendmasters.com/blog/liquid-glass-on-the-web/

Иллюстрированный гайд по Big O и временной сложности JavaScript-ориентированное, интерактивное и визуализированное руководство по системе обозначения Big O и ее роли в описании сложности алгоритмов. Подойдёт даже для тех, кто отличает O(log n) от O(n^2). https://samwho.dev/big-o/

Сапер в 100 строк на чистом JavaScript Простой туториал, который поможет вам лучше понять правила игры. https://slicker.me/javascript/mine/minesweeper.htm

Next.js Caching & Rendering Tutorial 1.5 часовой курс по кешированию и рендерингу в Next.js для начинающих. https://www.youtube.com/watch?v=qYk_BqGHXEg

CSS лифт: конечный автомат на чистом CSS для навигации по этажам Как при помощи современных возможностей CSS можно создать полнофункциональный лифт с перемещением между этажами без JavaScript. Интерфейс работает как конечный автомат: пользователь выбирает этаж, и благодаря состояниям CSS лифт «понимает», куда ему двигаться. https://css-tricks.com/css-elevator-a-pure-css-state-machine-with-floor-navigation/

Трюк с radio button для корзины товаров Хороший пример, как управлять интерактивностью и UI-эффектами (плавные переходы и анимация добавления товара), не перегружая интерфейс лишним JavaScript-кодом. https://css-tricks.com/a-radio-button-shopping-cart-trick/

Бросаем кости с CSS random() Новая CSS-функции random() (доступна в Safari Technology Preview) — позволяет генерировать рандомные значения прямо в стилях: позицию, цвет, размеры, анимации и многое другое — без единой строки JavaScript https://webkit.org/blog/17285/rolling-the-dice-with-css-random

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

Что такое 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

Что такое 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

Начните карьеру в 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

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

Оптимизация PWA под различные вариации Display Modes как в PWA можно учитывать разные режимы отображения — fullscreen, standalone, minimal-ui и browser — чтобы PWA выглядело как нативное приложение без потери удобства. При использовании таких режимов разработчикам важно помнить, что пользователи теряют привычные возможности браузера — кнопки назад, обновления, копирования URL и т.п., поэтому нужно подстраивать интерфейс под контекст установки и отображения. https://smashingmagazine.com/2025/08/optimizing-pwas-different-display-modes/

20 частых антипаттернов в React и как их исправить Ошибки, которые приводят к избыточным рендерам, мерцаниям интерфейса, нестабильным эффектам и расхождениям данных. https://habr.com/ru/articles/937656/

WebSocket DevTools Инструмент для Chrome DevTools, позволяющий в реальном времени отслеживать WebSocket-соединения: просматривать сообщения, перехватывать и блокировать их, а также симулировать ответы клиента и сервера. https://github.com/law-chain-hot/websocket-devtools

Зовем на стажировку по Frontend-разработке Т-Банк предлагает студентам и начинающим специалистам попробовать себя в роли frontend-разработчика. Стажеры будут решать реальные бизнес-задачи и получат шанс попасть в штат. Что ждет на стажировке: — Работа над пользовательской стороной сервисов и приложений. — Плавное погружение в задачи, помощь ментора и команды. — Удобный формат: от 20 до 40 часов в неделю, удаленно или в офисе. — Возможность совмещать с учебой, сессией и экзаменами. — Официальное оформление, оплата и рабочая техника. — Доступ к базе знаний с курсами и вебинарами. Узнайте больше и успейте пройти отбор до 26 августа