Будни разработчика: блог лид JS

#инструмент дня Появился Nub — новый «всё-в-одном» тулкит для JavaScript. Название, конечно, опасное: любой пост про него автоматически звучит как обращение к аудитории. GitHub: Ссылка скрыта Site: Ссылка скрыта Кто уже догадался, откуда у названия ноги растут? Да, оттуда. Но есть нюанс: Nub не пытается заменить Node.js. Смысл такой: дать разработчику всё приятное, что люди обычно хвалят в Bun — быстрый запуск, TypeScript из коробки, меньше зоопарка CLI, — но оставить выполнение кода на старом добром Node.js. Nub — это один Rust-бинарник поверх обычного Node.js. Он умеет: — запускать TypeScript/TSX/JSX без отдельного build step — автоматически подхватывать tsconfig paths — грузить .env — импортировать YAML/TOML/JSONC/JSON5 — работать как быстрый runner для package.json scripts — заменять npx/pnpm exec — ставить зависимости — управлять версиями Node — делать watch mode То есть вместо набора из tsx, ts-node, dotenv, tsconfig-paths, nvm, pnpm run, npx и пары заклинаний из README вашего монорепо — один nub. Главный selling point не «мы быстрее всех, потому что переписали мир на Zig, потом по-ковбойски переписали его на Rust с помощью ИИ, а теперь давайте все сделаем вид, что это нормальный жизненный цикл инфраструктурного рантайма». Код в итоге выполняет обычный Node.js. Nub просто добавляет слой удобства: транспиляцию через oxc, хуки резолвинга, полифиллы и быстрые команды вокруг проекта. На сайте, конечно, бенчмарки красивые: nub run — сильно быстрее npm run / pnpm run nubx — сильно быстрее npx nub install — быстрее pnpm и, по их тестам, даже чуть быстрее bun install nub index.ts — примерно как обычный node по старту и быстрее tsx Плюс отдельно упирают в supply-chain безопасность: build scripts по умолчанию не запускаются, свежие подозрительные релизы можно придерживать, вредоносные пакеты проверяются через OSV. Выглядит как очень понятная реакция на последние годы JS tooling: всем понравилось, что Bun быстрый и удобный, но не всем хочется тащить в прод ещё один почти-Node, который иногда внезапно оказывается «почти», а потом ещё и внезапно оказывается почти переписанным. Nub говорит: а давайте оставим Node, но перестанем страдать от того, что вокруг него исторически вырос целый огород одноразовых CLI. Пока штука свежая, я бы не тащил её сразу в критичный CI без проверки, но для внутренних тулов, dev-скриптов и монореп — очень интересно. #node #bun #typescript #oxc #rust

#фишка дня Когда я наткнулся на этот твит в обсуждении утилиты работы с цветами Андрея Ситника, я не сразу примерил его на себя. Но, как оказалось, стоило бы. Итак, давайте поясню для тех, кто по ссылкам не ходит. В азиатских иероглифических языках почти весь ввод с клавиатуры происходит в аккордном режиме или же в режиме т. н. композитинга, общее название — Input Method Editor. TL;DR: На экране всплывает окошко с символами или их группами и пользователь может что-то выбрать. На каких-то ОС оно вызывается долгим зажатием клавиши, где-то — по хоткею, а где-то — автоматически и сразу. Так вот, одно дело азиатские языки (я очень рекомендую посмотреть сам твит), а другое — разные европейские. И речь о диакритических знаках: умляуты, акуты, ударения, птички и шапочки. Так вот, я не имею финской раскладки, потому буквы ä, å и ö ввожу как раз в режиме композитинга, долгим зажатием «материнской» клавиши. Собственно, так база для азиатских языков проникла и в мою жизнь. Кстати, выбор Emoji из всплывающего окошка — туда же. В JavaScript-событиях для этого режима имеется флаг isComposing. Поэтому если вы, как и я в примере на видео, решили реализовать ввод групп символов подобным образом — циклически перебирая поля ввода — стоит об этом подумать :) Собственно, давайте и пример: Ссылка скрыта И напишите в комментариях, как вы решаете проблему редкого ввода букв с диакритикой у себя в системе. Например, я не помню, как это происходит в Windows, а в Linux я использую клавишу Compose, она работает чуть иначе. #javascript #composing #event #бородач

Соскучились по рождественским календарям для программистов? У CodeRun тут получился Advent of Code посреди лета, только с более олимпиадной составляющей: 15 задач, которые выкатываются пачками по 5 штук каждые 5 дней до 17 июля, общий зачёт и отдельные лидерборды по 11 языкам. Главная механика — не просто «решил / не решил». Быстрый и экономный код даёт больше баллов, так что после первого accepted всё только начинается: можно переписывать решение, смотреть на время, память, крайние случаи и пытаться выжать из него ещё немного. Я знаю людей, которые реально встают на час раньше, чтобы перед работой прорешать очередной LeetCode. Я не уверен, что сам готов к такой дисциплине, но понимаю, зачем они это делают: алгоритмы быстро ржавеют, если их не трогать. А здесь примерно тот же формат тренировки, только не в одиночном режиме и с таблицей, где сразу видно, насколько твоё «и так нормально» на самом деле нормально. Призы тоже есть: топ-1 по каждому из 11 языков получает мерч-пак CodeRun, топ-3 общего зачёта — коллекционный лего-набор, а топ-200 общего зачёта — скип контеста и пробное интервью в Яндекс. Последний пункт, кстати, довольно практичный. Даже если не относиться к этому как к спорту, такой челлендж можно использовать как понятный способ размяться перед алгоритмическими интервью: задачи, ограничения, дедлайн, сравнение решений и болезненное напоминание, что O(n²) иногда всё ещё O(n²).

#инструмент дня Я уже один раз потерял ссылку на этот сервис, потому на правах закладки. Встречайте, Cobalt: Ссылка скрыта Это сервис с открытым исходным кодом (GitHub), предназначенный для скачивания видео с большой кучи разнообразных сервисов: вк, ютуб, рутуб, тикток, твиттер, инстаграм и так далее и тому подобное. Полный список тут. Никакой рекламы и занудства. Разве только UI на мобиле подглючивает — у меня не всегда правильно определяется безопасная зона "чёлки". В общем, рекомендация. #video #download #бородач

#ссылка дня Когда технологии стареют, это почти незаметно — пока не становится поздно. Вроде всё работает, но обновлений безопасности больше нет, старые зависимости перестают собираться, а новые версии библиотек ломают совместимость. Так проект постепенно превращается в мину замедленного действия. Чтобы не попадать в такие ситуации, существует проект endoflife.date. Он показывает, когда заканчивается поддержка языков, библиотек, фреймворков и систем. Вводишь, например, Node.js или Ubuntu — и сразу видно, какие версии ещё живы, а какие пора обновлять. У них даже есть открытое API, так что можно встроить проверку прямо в CI и получать напоминания автоматически. Но обновляться стоит с умом. Иногда новая версия приносит несовместимые изменения и кучу головной боли. Поэтому существуют LTS-версии — стабильные ветки, которые поддерживаются дольше обычных и меняются не так резко. На них удобно сидеть, если важна предсказуемость и стабильность. Простая идея, но в долгосрочной перспективе экономит много времени и нервов. #lts #support #бородач

#библиотека дня Есть небольшая библиотека для undo/redo в JavaScript: async-history-stack. Она интересна не тем, что «умеет откатывать состояние». Это как раз самый простой случай. Интереснее другое: в историю можно складывать действия, у которых есть асинхронные операции и побочные эффекты. Например, пользователь удаляет картинку из галереи. В реальном приложении это может быть не один setState, а целая цепочка: уйти со страницы картинки, отправить запрос на удаление, убрать ссылку из локального состояния, обновить интерфейс. А при undo надо сделать обратное: восстановить картинку, вернуть ссылку в состояние и снова открыть страницу этой картинки. async-history-stack предлагает описывать такие действия через push: функция сразу выполняет изменение и возвращает функцию, которая умеет это изменение откатить. await historyStack.push(async () => { await applyChanges() return async () => { await revertChanges() } }) То есть в историю кладётся не снимок объекта, а переход туда-обратно. Благодаря этому undo/redo может быть не привязан к конкретному стору и нормально покрывает навигацию, RPC, работу с файлами и другие асинхронные штуки. В библиотеке есть undo, redo, clear, size, timestamp, лимит истории, отмена через signal и merge, чтобы склеивать несколько изменений в одну запись. Например, когда много мелких действий должны откатываться одним undo. Я набросал демо: галерея, удаление карточки, имитация асинхронного RPC, лог операций, undo/redo и восстановление маршрута. Ну и да, вместо обычных заглушек там процедурно генерируются SVG-паркеты, потому что почему бы и нет. Ссылка на библиотеку: Ссылка скрыта Демо: Ссылка скрыта Всем undo, котаны! #history #undo #library #svg #tile

#статья дня Не так давно в чате канала проскочил вопрос, как правильно делать контейнеры, которые могут вылезать за визуальные границы. Например, основной контент находится посредине и занимает в ширину 80-120 приятных для чтения глазу символов, а вот картинки хотелось бы разнести до краёв. Техника называется full bleed. Я не знаю, как точно перевести. Если посмотрите видео, то виден ещё один вариант использования, когда галерея выходит за пределы экрана лишь с одной стороны, но дальше тем не менее границы игнорирует. Вот так: Ссылка скрыта Альтернативный вариант: Ссылка скрыта Раньше такое делалось жонглированием полями, теперь же у нас есть гриды. И у небезызвестного Джоша Комо есть статья как раз об этом: Ссылка скрыта Тем не менее, я рекомендую посмотреть приложенные кодпены, поскольку в них зоны грида именуются и становится понятнее, что к чему. Всем full bleed, котаны! #css #fullbleed #gallery #бородач

Вышел anime.js 4.5.0. Anime.js — это JavaScript-библиотека для анимаций. Её часто используют для DOM, CSS-свойств, SVG, таймлайнов и обычных JS-объектов: когда нужна не одна transition, а нормальное управление движением, задержками, easing’ами и последовательностями. В 4.5.0 появился API адаптеров. Если коротко, теперь anime.js можно научить работать с объектами, которые устроены не как DOM-элементы. Главный пример в этом релизе — встроенный адаптер для Three.js. В Three.js анимация часто требует писать во вложенные свойства объекта: mesh.position.x = 100 mesh.rotation.y = Math.PI / 4 mesh.material.opacity = 0.5 mesh.material.color.set('#ff8844') С адаптером это можно описывать прямо в animate(): animate(mesh, { x: 100, rotateY: 45, opacity: 0.5, color: '#ff8844', }) Адаптер сам сопоставляет параметры с position, rotation, material, цветом и другими свойствами Three.js. Появился и более привычный для фронтендера синтаксис 3D-трансформаций: rotateX, rotateY, rotateZ, scale, transformOrigin, плюс skewX, skewY, skewZ. Материалы тоже стало анимировать проще. Цвет можно передавать строкой — hex, rgb, hsl или CSS-переменной — без ручного перекладывания в THREE.Color. Ещё одна хорошая часть — instanced mesh. Объекты, которые в Three.js обычно используются для большого количества одинаковой геометрии, теперь можно анимировать почти как обычные меши. Для сцен с сетками, частицами, волнами и кучей повторяющихся элементов это сильно сокращает ручной код. В stagger() добавили поддержку 3D: теперь задержки можно раскладывать не только по x и y, но и по z. Плюс появились jitter и seed, чтобы делать разброс в движении, но при этом получать повторяемый результат. Остальные изменения — в changelog: фиксы timeline, keyframes, seek, reversed loops, render engine, работа с цветами и разные мелкие правки. Важная деталь: сайт anime.js теперь тоже портирован на новый API с Three.js-адаптером. То есть это не просто пример в документации, а уже основа для собственного сайта проекта. Получился релиз, после которого anime.js заметно лучше ложится на 3D-сцены. Да здравствуют описания анимаций без постоянного ручного прохода по position, rotation, material и прочим внутренним полям. #animejs #animation #threejs

#ссылка дня Когда-то давным давно поддержки кастомных шрифтов в браузерах толком не было, а желание сделать красиво — было. Как же обходились? Ну, например, генерировали картинки, используя библиотеки FreeType и (для PHP) GD2/Imagemagick. К слову, это до сих пор валидный кейс, соответствующие плагины для популярных CMS вполне себе поддерживаются: Ссылка скрыта Просто зачастую нет никакого смысла тащить целый шрифт на фронт ради пары заголовков. Да и даже его часть — тоже. Естественно, всегда можно резать набор глифов (символов) на лету... например, утилитами вроде Ссылка скрыта или FontForge в командном режиме, но каждый ли проект в этом нуждается? А, ну и как же, нельзя забывать о вкладе Adobe Flash в поддержку кастомных шрифтов! Была технология sIFR, которая генерировала маленькие Flash-апплеты на месте, где должен был располагаться ваш заголовок. Или аналогичная — Cufon, но уже на связке JS/SVG или VRML (векторный язык в IE). Забавное было время, конечно, но иногда лучше и правда сгенерировать картинку, чем тащить весь шрифт целиком. #font #old #бородач