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

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/

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

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

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

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

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

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

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

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

https://www.jonoalderson.com/performance/youre-loading-fonts-wrong/

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

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

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