класека

Мы уже говорили о Liquid Glass в вебе. Но оказалось, что примеры в прошлой публикации работали далеко не у всех.

Поэтому нашёл ещё один рабочий вариант с инструкцией по воспроизведению у себя в проекте. Так что можете брать готовый код и повторять.

Все подробности по ссылке: https://habr.com/ru/articles/974058/

#liquidglass #ui #фронтенд

Umami 3.0: Self-hosted аналитика сайтов вместо Google Analytics

Umami 3.0 — это современный open-source инструмент веб-аналитики, который позволяет владельцам сайтов и разработчикам получить полное представление о посетителях без передачи данных третьим лицам, в отличие от Google Analytics. Он легко развёртывается на собственном сервере или в облаке через Docker или Kubernetes и не использует cookies и трекинг на базе fingerprinting, обеспечивая полное соответствие законам о приватности, таким как GDPR и CCPA.

Этот инструмент подойдёт всем, кто ценит конфиденциальность и хочет минимизировать нагрузку на сайт. Сервис отличается лёгким и быстрым скриптом, который не замедляет загрузку страниц и не блокируется ad-blockers, при этом предоставляя точные и полные данные без сэмплинга и сложных настроек Google Analytics, которые часто оказываются излишними.

Подробнее можно почитать на странице проекта.

#инструменты #аналитика

Когда решил посмотреть код в своих старых проектах:

Не портфолио, а тайм-киллер какой-то

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

Построено всё на canvas и three.js. А заценить можно по ссылке: https://worawork.vercel.app/

#интересное

Particle Life — симуляция, где из примитивных правил взаимодействия частиц возникают структуры, похожие на живые клетки. Теперь её запустили на WebGPU с поддержкой 100 000 частиц прямо в браузере.​

Как работает: есть частицы разных цветов, и матрица сил между ними. Красные могут притягиваться к жёлтым, а жёлтые — убегать от красных. Силы асимметричные, в отличие от реальной физики. Из этих простых правил спонтанно появляются «клетки», «организмы», деление, даже что-то похожее на экосистемы.​

Что сделал автор: перенёс симуляцию на compute shaders в WebGPU. Главная проблема — расчёт сил между всеми парами частиц это O(N²), что убивает производительность. Решение: spatial hashing — частицы раскидываются по ячейкам, и каждая взаимодействует только с соседями. Реализовано через atomic linked lists и counting sort.​

Результат: 20 000 частиц с нормальным радиусом взаимодействия, до 100 000+ если радиус уменьшить. Всё в браузере, никаких установок.

Код на гитхабе, демо на сайте.

Залипательная штука — можно наблюдать как из хаоса рождается порядок.

@make_game

Критически важный CSS-генератор для ускорения вашего сайта

Удобный сервис, если вы хотите оптимизировать работу вашего сайта. Для этого он анализирует сайт с точки зрения вёрстки и извлекает из него критически важные участки CSS, необходимые для отображения видимой части веб-страницы.

Если извлечь этот CSS и встроить его в HTML, браузер сможет быстрее отображать контент, не дожидаясь загрузки всех таблиц стилей, что повысит производительность и улучшит показатели Core Web Vitals, такие как First Contentful Paint (FCP).

Сохраняйте, изучайте и пользуйтесь. Инструкция и детали по ссылке: https://kigo.studio/tools/critical-css-generator

#css #оптимизиация #инструменты

Каким будет фронтенд через 10 лет?

Всё чаще можно встретить мнение, что вайбкодинг убьёт фронтенд. И этому сложно не верить, ведь уже сегодня ИИ может создавать вполне рабочие сайты, пусть и не за один промпт. А использование нейронками React вызывает опасения о судьбе остальных библиотек и фреймворков.

Давайте обсудим этот вопрос. Пишите в комментарии, что думаете по этому поводу. Каким вы видите будущее фронтенда? Делитесь самыми скромными и смелыми вариантами.

#обсуждение #фронтенд

One Million Checkboxes: как обычный пет-проект превратился в площадку для баловства подростков

Когда создатель One Million Checkboxes (OMCB) запустил свой проект — сайт с миллионом глобальных чекбоксов, он и не догадывался, что всё выйдет из-под контроля.

За пару недель более 500 тыс пользователей нажали на чекбоксы 650 млн раз, превратив OMCB в вирусный феномен.

Но неожиданное открытие заставило автора подумать, что его взломали: в базе данных появились странные URL.

Однако вскоре стало ясно, что это не взлом, а результат удивительно креативного использования сайта группой подростков, которые скрывали двоичные сообщения и даже рисовали на сетке чекбоксов.

Полная статья с описанием произошедшего:

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

И ещё один адвент-календарь, который стартовал сегодня

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

Тут собраны полезные материалы для фронтенд-разработчиков по HTML, CSS и JavaScript.

#веб

Неудобно получилось

Новогодний подгон для поклонников Svelte

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

Забираем по ссылке: https://advent.sveltesociety.dev/2025

#svelte

Перестаньте использовать JavaScript для решения проблем с CSS

Недостаток знаний подталкивает людей к чрезмерному усложнению, и рано или поздно это сказывается на производительности. Например, content-visibility: auto. Он делает то же, что и React-Window, без использования JavaScript и с минимальным весом пакета. Та же история с современными единицами измерения области просмотра (dvh, svh, lvh), которые позволяют избавиться от window.innerHeight в коде. Обе функции получили 90 % глобальной поддержки в 2024 году. Тем не менее мы по-прежнему используем JavaScript в силу привычки.

Эта статья призвана исправить это и показать, что вам не нужно столько JS-кода, как вы привыкли.

#javascript #css