FrontEndDev

Бросаем кости с 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

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

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

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

Оптимизация PWA под различные вариации Display Mode

Как в 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

Smart Layouts. CSS Day - 06.06.2025

Концепция Smart Layouts, которую представил Ахмад Шаид на выступлении на CSS Day 2025 — адаптивные CSS-макеты, которые сами «принимают умные решения» благодаря современным возможностям: clamp(), :has(), container queries и другим.

https://ishadeed.com/article/smart-layouts-talk-css-day/

Релиз Nuxt 4.0

Новая структура app, переработанная поддержка TypeScript, более умные useAsyncData и useFetch.

https://blog.logrocket.com/nuxt-4-0-whats-new-what-to-expect/

Hyvector

Современный веб редактор для SVG.

https://www.hyvector.com/

Введение в Intl API

Intl API — встроенный браузерный инструмент для локализации, который позволяет нативно форматировать даты, числа, списки, относительное время, правилa множественного числа и даже отображение имён языков и регионов. Вместо тяжёлых сторонних библиотек, Intl предлагает лёгкие, быстрые и стандартизированные решения для адаптации интерфейса к разным культурным особенностям.

https://www.smashingmagazine.com/2025/08/power-intl-api-guide-browser-native-internationalization/

5 полезных CSS функций

5 примеров с применением CSS-функции @function — от отрицания значений и создания полупрозрачных цветов до адаптивной типографики и условного скругления углов. Эти функции делают CSS более выразительным и динамичным. Работает с Chrome версии 139.

https://una.im/5-css-functions/

Простое и понятное введение в SVG

Джош Комю объясняет основы SVG — от простых форм (<circle>, <rect>) до анимаций и inline-примитивов, которые работают как полноценные DOM-элементы, управляемые через CSS и JavaScript.

https://www.joshwcomeau.com/svg/friendly-introduction-to-svg/

Генератор заглавной картинки для Github профиля

Простой генератор, чтобы разнообразить вашу страницу на Github.

https://leviarista.github.io/github-profile-header-generator/

Привет! Чуть не забыл подвести итоги розыгрыша билета на Podlodka React Crew 3 😅

Желающих не так много и шансы на победу были велики у всех. Но повезло больше @halahot. Поздравляем!

Для всех остальных, кто желает послушать крутые доклады действует промокод react_crew_3_75eI9e!

Всем добра ✌️

Pattern Monster: 300+ настраиваемых SVG паттернов

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

https://pattern.monster/

Пара вещей про href в ссылках, о которых вы, возможно, не догадывались

Неожиданный спектр значений атрибута href — от протоколов mailto:, tel: до ссылок вроде href=".", href="?", data:-URI и медиа-фрагментов с временными метками. Мелочи, которые делают поведение ссылок более гибким и полезным.

https://blog.jim-nielsen.com/2025/href-value-possibilities/

Структуры данных для front end (и не только)

Разбор наиболее популярных структур данных: особенности , преимущества и недостатки.

https://habr.com/ru/companies/habr_rutube/articles/934130

Интерактивные примеры и демо тут

CSS Questions

Более 100 вопросов для проверки своих знаний по CSS. Вопросы разного уровня сложности, так что даже знатоки найдут для себя что-то новое.

https://css-questions.com/

Друзья! Рад сообщить, что стартует новый сезон Podlodka React Crew #3 — сезон о паттернах и практиках фронтенда 🎯

Иду сам и по традиции зову вас с собой!

В новом сезоне Podlodka React Crew узнаем, как писать продуманный и масштабируемый фронтенд с помощью React, какие паттерны реально работают, а какие — мода ради моды, обсудим архитектуру, производительность, нестандартные layout'ы, системный подход к интервью и многое другое.

📌 В программе:
• Паттерны анимаций с View Transition API
• Проверка AI-ассистентов на реальных задачах
• Глубокое погружение в архитектуру React Hooks
• Практика layout'ов вне CSS Grid и Flexbox
• System Design для фронтендера: как не завалить интервью

💡Все доклады — с практикой, кейсами и интерактивом.

📆 Реактим с 25 по 29 августа. Бегом за билетами!

По традиции разыграем 1 бесплатную проходку! Хочешь билет - заполняй форму! Результаты 18 августа.

Также для подписчиков FrontEndDev действует промокод на скидку 500 р: react_crew_3_75eI9e