Сайты с устаревшим UX/UI продают лучше

Скелетор вернётся позже с ещё одним неприятным фактом.

Создание гистограмм на современном CSS

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

Это произошло и с гистограммами. То, что раньше требовало внимания и труда, сегодня делается в пару строк (не говоря уже об ИИ, который вообще за вас всё сделает). Как с помощью современных возможностей CSS делать красивые графики и чарты, можно узнать в статье.

#css

Chrome DevTools MCP: дебажим сайт с помощью ИИ

Не так давно Google запустила Chrome DevTools MCP сервер, который интегрирует AI (Gemini/Claude) с браузером. Он открывает страницы, кликает, заполняет формы, записывает performance traces, анализирует ключевые показатели.

В статье автор поделился возможностями этого сервера, советами по настройке, инструкцией по установке и своими выводами по использованию этого инструмента. Рекомендую всем, кто хочет облегчить себе жизнь.

EasyPaste: кроссплатформенное приложение на Tauri + Rust

Пользователь Tproger поделился опытом создания EasyPaste — менеджера шаблонов ответов (для саппорта/sales/HR). UI на HTML/CSS, бэк на Rust через Tauri, билды под macOS/Windows/RedOS.

Что внутри: дерево шаблонов, быстрый поиск по тексту/тегам, избранное, форматирование (жирный/таблицы), вложения файлов, drag'n'drop в другие аппы, tray + глобальные хоткеи.

Боли новичка: сборки/воркфлоу, системные зависимости, tray/hotkeys.

Автор поделился своим опытом, который пригодится как новичкам, так и продвинутым разработчикам на Rust

Угадайте кому прилетела эта таска

Pinball Physics

Развлекательно-познавательного контента вам в ленту. На codepen есть проект, который представляет собой полноценную игру Pinball, в которую вы можете поиграть, а когда поставите очередной рекорд изучить её код и даже попробовать повторить.

Взгляните сами:

https://codepen.io/lonekorean/pen/KXLrVX

#codepen

Главное, чтоб это легаси не крашнулось во время поездки

Тесты производительности Node.js с 16-й по 25-ю версию

Node.js с 16-й версии до 25-й заметно ускорился. Но в чём именно? Авторы этого разбора протестировали Express-сервер и базовые операции на Apple M4 (macOS, arm64), чтобы показать эволюцию производительности. Тесты повторяли 5 раз, брали медиану, версии от 16.0.0 до 25.3.0 — и LTS, и не-LTS.

Они проверили типичные сценарии: HTTP GET (req/s на localhost с keep-alive и 32 соединениями), JSON.parse/stringify, SHA-256 хэш, копирование буфера 64 КБ, array map+reduce, конкатенация строк, integer-циклы с арифметикой (плюс вариант с Math.random() для реализма).

Выводы получились интересные: прогресс стабильный, но Node 25 вырвался вперёд (что логично), особенно в циклах и вычислениях — до +50% в integer loop. Если у вас есть исследовательский интерес, то рекомендую ознакомиться с деталями на сайте.

#nodejs

#простымисловами: Что такое srcset и зачем он нужен

Обычный атрибут src в теге <img> указывает одну-единственную картинку. Но что делать, если пользователи заходят с телефонов, ретина-экранов и 4K мониторов? Показывать одну и ту же версию — значит терять в качестве или перегружать страницу.

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

<img 
  src="image-400.jpg"
  srcset="
    image-400.jpg 400w,
    image-800.jpg 800w,
    image-1200.jpg 1200w
  "
  sizes="(max-width: 600px) 400px,
         (max-width: 1000px) 800px,
         1200px"
  alt="Пример адаптивного изображения">

🔍 Что здесь происходит:

— src — запасной вариант на случай, если браузер не поддерживает srcset.
— srcset — список изображений с их шириной.
— sizes — помогает браузеру понять, сколько пикселей реально нужно на экране.

В результате:

📱 На телефоне загрузится лёгкое изображение.

💻 На ноутбуке — среднее.

🖥 А на 4K-мониторе — чёткое и большое.

❗️ Важно: src обязателен, так как в браузере пользователя может отсутствовать поддержка srcset.

#фронтенд #html