#видео дня

Оказывается, у блога Chrome for Developers есть свой собственный YouTube-канал: https://www.youtube.com/@ChromeDevs

Формат, правда, довольно странный. Основу канала составляют видео по 1-3 минуты, и нет, даже не все из них шортсы. Впрочем, есть и подкасты.

Ладно, это я к чему. Они выкатили очень пафосное видео о том, как в Pinterest пересмотрели свои методы создания CSS-каруселей и — как утверждается — избавились от кучи джаваскрипта, перейдя на нативные View Transitions и свежие API для скролла: https://youtu.be/oWJPu3yvfp8

Но, конечно, невозможно в две с половиной минуты уместить все идеи проекта. Потому действительная польза — в описании! А что там у нас?

А, собственно, ресурсы для повторения:

Доступные карусели → https://goo.gle/4aTpGtc
Карусели на CSS → https://goo.gle/3YuWhOv
Локальные View Transitions → https://goo.gle/3XuZMUX
View Transition API → https://goo.gle/3MzVngY

Другой вопрос, конечно, в том, что половина этих API толком недоступна не то что в других браузерах, а даже в самом Chrome без флага, это они аккуратно обходят стороной.

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

#chrome #css #carousel

#vscode дня

Если вы умеете пользоваться поиском — вы уже миддл. Если поиском с заменой — смело называйте себя сеньором.

Я щас не шучу, know your tools!

Огромное количество разработчиков вообще с трудом понимает, что код — это просто текст, без подсказок IDE не справляются. Но не будем о наболевшем.

Сейчас я вам покажу нечто, что выведет поиск кода на новый уровень: расширение CodeQue!

Ссылка: https://marketplace.visualstudio.com/items?itemName=CodeQue.codeque

Я иллюстрацию файлом приложу, ибо иначе мелко. Но в чём соль: вы можете искать код, который напоминает тот, что написан в области поиска!

Например, в примере — ищем div, внутри которого есть ещё div с атрибутом className, установленным через clsx. Или ещё, можнот найти все формы, внутри которых есть select (необязательно, HTML-тег или компонент).

Я честно говоря сразу вообще не понял, нафига это надо — есть же RegExp.

Но потом ка-а-ак понял!

#search #extension #бородач

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

Хотели попробовать local‑first? Zero от Rocicorp — отличный способ это сделать.

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

Запросы к данным автоматически становятся подписками и кэшем. Не нужно писать refetch, invalidate или подписки вручную — библиотека сама решает, какие данные хранить на клиенте и когда их обновлять. Изменения, сделанные на клиенте, сразу видны в UI, а сервер получает их в фоне.

На клиенте данные хранятся в IndexedDB, что обеспечивает быстрый доступ и поддержку оффлайна. На сервере Zero использует Postgres как источник правды и реплицирует данные в т. н. zero-cache для обслуживания клиентских запросов. Конфликты при синхронизации обрабатываются библиотекой автоматически.

API достаточно простой: схема с типами и связями, queries для реактивного чтения данных и mutators для записи. Всё это позволяет строить приложения с мгновенным откликом и оффлайн-доступом без больших изменений в привычном коде.

Если хотите попробовать local‑first без сложной архитектуры и ручного синка — Zero даёт такую возможность.

https://zero.rocicorp.dev/

#local #indexeddb #postgresql

#польза дня

Самое важное при разработке ИИ-агентов (на мой взгляд) — создать такую систему, где тебя не нагружают очередными «можно и допилить», а снимают рутину, освобождают время.

Поэтому приглашаю всех на Agents Week от Школы анализа данных Яндекса, который пройдет с 6 по 10 апреля. В течение пяти дней будут вечерние лекции с экспертами, где вы сможете задать любой вопрос, а ещё практика-практика-практика.

За 5 дней узнаете с чего начать проектирование агентов и настройку их поведения, какие есть практики построения single-agent и multi-agent-систем, как доводить агентов до продакшена.

Программа, спикеры, регистрация — всё по этой ссылке

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

Если доступность для вас не пустой звук (а мы уже как-то обсуждали, что рано или поздно с проблемами управления интерфейсом столкнутся все), то поддерживать горячие клавиши точно придётся.

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

Ну или, как вариант, показать кому-то как эффективно можно управлять текстовым или графическим редактором, девтулзами. Стать настоящим хоткей-ниндзей!

Что ж, по крайней мере для маководов у меня есть решение! Keycastr — https://github.com/keycastr/keycastr

Задача этой маленькой утилиты буквально вывести на экран нажатые клавиши. Конечно, есть выбор — показывать все, или только модификаторы.

Очень круто было наблюдать, как наш техлид джирой манипулирует :)

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

Upd.

Альтернатива для Windows: http://carnackeys.com/

Для Linux:
https://github.com/bm-mit/key-caster
https://www.thregr.org/wavexx/software/screenkey/
https://github.com/critiqjo/key-mon

#hotkey #a11y #record #бородач

🎮 Хочешь зарабатывать на играх, а не только играть?

Игровая индустрия растёт каждый год — и ей нужны специалисты.

В XYZ School обучают профессиям, без которых не создаётся ни одна игра:

🧠 Гейм-дизайнер
🖌 Концепт художник
📱 Тестировщик мобильных игр
🎬 Специалист по визуальным эффектам
💻 Разработчик игр (Unity, Unreal Engine, C#, C++)
🎨 Художник трехмерных моделей (3D-художник)

На курсах ты не просто смотришь лекции — выполняешь практические задания, собираешь портфолио и работаешь под руководством специалистов, которые участвовали в проектах вроде Doom, Fortnite и Metro.

🚀 Начать можно без опыта.
👉🏻 Посмотреть курс

Erid: 2SDnjdMg8n5
Название: ООО "ИКС ВАЙ ЗЕТ НЕТВОРК"
ИНН: 9705150153

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

Я искренне радуюсь способности разных людей создавать хайп вокруг своих продуктов. Умению создать продукт, попадающий в нерв миллионов людей. И сегодня такой продукт — 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 #бородач