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/

Зовем на стажировку по Frontend-разработке

Т-Банк предлагает студентам и начинающим специалистам попробовать себя в роли frontend-разработчика. Стажеры будут решать реальные бизнес-задачи и получат шанс попасть в штат.

Что ждет на стажировке:

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

Узнайте больше и успейте пройти отбор до 26 августа

WebSocket DevTools

Инструмент для Chrome DevTools, позволяющий в реальном времени отслеживать WebSocket-соединения: просматривать сообщения, перехватывать и блокировать их, а также симулировать ответы клиента и сервера.

https://github.com/law-chain-hot/websocket-devtools

20 частых антипаттернов в React и как их исправить

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

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

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

Как в PWA можно учитывать разные режимы отображения — fullscreen, standalone, minimal-ui и browser — чтобы PWA выглядело как нативное приложение без потери удобства.
При использовании таких режимов разработчикам важно помнить, что пользователи теряют привычные возможности браузера — кнопки назад, обновления, копирования URL и т.п., поэтому нужно подстраивать интерфейс под контекст установки и отображения.

https://smashingmagazine.com/2025/08/optimizing-pwas-different-display-modes/

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

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

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

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

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

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

JWTAuditor

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

https://jwtauditor.com/

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

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

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

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

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

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

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

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

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

Next.js Caching & Rendering Tutorial

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

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

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

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

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

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

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

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

Liquid Glass в веб

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

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