Создание гистограмм на современном 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

Привет, подписчики!

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

Подпишитесь, чтобы мы не потеряли друг друга. Вот тут полный список: https://ad.tproger.ru/sm

Microsoft выпустила бета-версию TypeScript 6.0

Это переходный релиз перед большим скачком к TypeScript 7.0 на Go с мультипоточностью. Последнее мажорное обновление на текущем движке.

Новые фичи радуют: типы для Temporal (новые даты), upsert-методы в Map (getOrInsert), RegExp.escape, es2025 в target/lib. Плюс DOM теперь включает iterables по умолчанию.

Установить можно через npm install -D typescript@beta. А по читать подробнее по ссылке.

#новости #typescript

Превращаем YouTube в личное хранилище данных

На самом деле это можно провернуть с любым видеохостингом. Автор видео показал, как он шифрует любой файл в видеоролик, загружает на YouTube, а потом по ссылке восстанавливает исходные данные бит-в-бит.

Наивный подход «записать байты в пиксели» сразу ломается об реальность: YouTube повторно кодирует видео с потерями, меняя цвета и убивая данные. Поэтому автор применил блочную схему: файл режется на крупные блоки, для каждого считается CRC для проверки целостности и генерируются избыточные «ремонтные» куски с помощью fountain-кода Wirehair, чтобы можно было восстановить блок даже после повреждений.

Дальше он прячёт биты не в сырые пиксели, а в коэффициенты дискретного косинусного преобразования (DCT), причём в старшие коэффициенты и даже в их знак, потому что именно они меньше страдают от сжатия. Видео экспортируется с lossless‑кодеком, а единственная «грязная» стадия — это сжатие на стороне YouTube.

Посмотреть как это происходит наглядно можно в его ролике (нет, это не файл с трояном).