#инструмент дня

Я искренне радуюсь способности разных людей создавать хайп вокруг своих продуктов. Умению создать продукт, попадающий в нерв миллионов людей. И сегодня такой продукт — Pretext от Шен Лу.

Собственно, заявка прям сильная: дать людям чёткий, быстрый и всеобъемлющий алгоритм подсчёта размерности текстовых нод на чистом TypeScript.

Как звучит, а?!

Зачем это нужно? Ну, яркий пример прямо на скриншоте: рассчитать, в каких местах разорвать текст, чтобы вставить туда фигуру. Или раскладка masonry. Или ASCII-арт. Или аккордионы с конкретным числом строк. Или редакторы текста. Примеров-то прям много: https://chenglou.me/pretext/

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

Я ни в коей мере не преуменьшаю объём работы и возможности библиотеки. Но...

Но даже если мы оставить за рамками то, что CSS в целом давно решает как минимум половину заявленных вещей и даже гораздо проще, вся красота решения лежит в стандартном методе canvas.measureText. Эта штука с нами чуть ли не с IE9 и — естественно — на ней писалось множество решений в последние лет 10. Так что половина заявлений о крутости библиотеки ну... как минимум, слишком сильная.

Главное — уметь попасть в нерв, да :)

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

Довольно злой пост получился, библиотека-то точно стоит вашего внимания. Просто посмотрите на это. Или это. Вдохновить людей — это тоже дорогого стоит.

#css #js #measureText #text

#codepen дня

Наткнулся на приятный и эффектный пример 3D-интерфейса — Painting Wheel.

Выглядит и ощущается как Three.js, но это CSS-преобразования.

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

JavaScript используется только чтобы поменять перспективу.

Ну а чтобы показать, что это всё совсем не запредельно сложно, я решил вытащить непосредственно реализацию кольца в отдельный кодпен: https://codepen.io/editor/alinaki/pen/019d2f65-9738-7ea5-a667-524ee1a68bef

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

Можно вообще сделать простую бесконечную прокрутку!

Из наворотов — только зум колесом, чтобы было проще рассматривать и понимать происходящее. Понятное дело, ваш ИИ-агент с лёгкостью вытащит код и из оригинального примера, но из упрощённого это делать сподручнее, не правда ли? :)

#css

Вокруг ChatGPT и AI сейчас много шума, и среди него всё сложнее находить действительно полезные источники.

Это подборка Telegram-каналов про разработку, AI и безопасность без случайных рекомендаций. Внутри:

— автоматизация и инструменты для разработчиков
— OSINT, кибербезопасность и практики ИБ
— работа с AI и примеры промптов
— агенты, инструменты и новости индустрии

Если хочется нормального сигнала вместо шума — вот список:
https://t.me/addlist/iUFqGiQpZ6NmNjE6

#инструмент дня

Как узнать, верный ли JSON тебе передали, или нет?

Ну, общепринято как-то так:

function tryParseJSONObject (jsonString){
    try {
        const o = JSON.parse(jsonString);
        if (o && typeof o === "object") {
            return o;
        }
    }
    catch (e) { }

    return false;
};

Зачем проверка на объект? Ну потому что попытки распарсить 1234 и false к ошибке не приведут. Да и передача null просто вернёт null, который ещё и объект... ну вы поняли.

А что делать, если получение кривого JSON в вашем мире стало нормой? Да, звучит странно, но таких случаев больше, чем кажется.

Ну, во-первых, определиться, что лучше: упасть или попробовать вернуть хоть что-то? Но это утверждение верно и без проблем с JSON.

Мне когда-то опытный Java-разработчик возвращал самодельный JSON с одиночными кавычками. Такое видение было у человека.

Если хоть что-то, вашему вниманию jsonrepair: https://github.com/josdejong/jsonrepair

Справится с комментариями, кривыми кавычками, незакрытыми полями, отсутствующими запятыми, случайными операторами и всяческой питонячестью вроде True.

А ещё иногда модели этим грешат, просто не досылают стрим.

Плохой JSON ближе, чем кажется, котаны :)

#json #repair #fix #бородач

#молния дня

Обнаружена supply chain-атака на axios. Скомпрометированы версии 1.14.1 и 0.30.4, опубликованные через взломанный аккаунт мейнтейнера.

Что происходит:
— в зависимости добавлен вредоносный пакет
— он выполняется через postinstall без участия пользователя
— скачивает payload с C2 и запускает его (macOS / Windows / Linux)

Под угрозой:
— проекты с axios@^1.14.0 или ^0.30.0 (обновятся автоматически)

Что делать:
— зафиксировать версию на 1.14.0 / 0.30.3
— проверить системы, где делали npm install сегодня
— при необходимости ротировать креды

Подробный разбор:
https://safedep.io/axios-npm-supply-chain-compromise/

#такое дня

Оптические иллюзии:
Существуют
Несовершенство восприятия:
Существует
Заказчики:
«Я просил половину круга, а не три четверти!»

Ну… как бы… мне даже добавить нечего: https://observablehq.com/@mizinov/area-comparison (на русском)

#optical #illusion #perception #design #бородач