Будни разработчика

#фишка дня

Как сделать вывод консоли красивеньким?

Очень просто, использовать спецификаторы преобразования!

Прямо как sprintf в Си, ну как вы можете этого не знать?

Короче, всё внимание на иллюстрацию. Adobe настолько оборзели, что свой логотип даже вам в консоль пихают, если у вас получится открыть девтулзы на веб-версии Фотошопа.

А делается это буквально так: https://codepen.io/alinaki/pen/PoXrejX

Для тех, кто по ссылкам не ходит, сокращённая версия:

console.info(
  "%c %cAdobe %cPhotoshop Web%c  %c2023.20.0.0%c  %c1bba617e276",
  "padding-left: 36px; line-height: 36px; background-image: url('data:image/gif;base64,R0lGODlhIAAgAPEBAAAAAPw==');"
)

Как можно догадаться, %c это спецификатор, указывающий, что сюда надо подставить CSS, переданный соответствующим аргументом.

Полный список спецификаторов есть на MDN.

Красота спасёт мир, котаны!

#console #js #sprintf #бородач

#статья дня

Гитаристы тут? Нужно ваше мнение!

Вот человек заморочился и сделал (почти, потому что не контейнировал) кастомный компонент для отображения... гитарных аккордов: https://dev.to/madsstoumann/guitar-chords-in-css-3hk8

Ну и кодпен для ясности: https://codepen.io/stoumann/pen/qEEKJYq

Запись получается примерно такая:

<fret-board frets="4" strings="6" chord="E Major" class="dusty-blue">
  <string-note string="6" open></string-note>
  <string-note string="5" fret="2" finger="2"></string-note>
  <string-note string="4" fret="2" finger="3"></string-note>
  <string-note string="3" fret="1" finger="1"></string-note>
  <string-note string="2" open></string-note>
  <string-note string="1" open></string-note>
</fret-board>

JS тут нужен, чтобы распределить кастомные атрибуты по CSS-переменным. После чего в дело вступают гриды.

Очевидно, аккорды можно записывать для чего угодно: от балалайки и укулеле до десятиструнного монстра от Марченко.

Ну, котаны, у кого тут свои гитарные курсы?

#css #guitar

#заметка дня

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

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

У аналитиков другой ракурс. Они не чинят, не деплоят, не рвут прод ночью. Они просто умеют смотреть туда, где заканчивается наша зона контроля. Видеть не поведение системы, а поведение людей. И в этом есть что-то раздражающее и завораживающее одновременно: они вмешиваются в тот уютный мир, где всё можно объяснить логикой.

Недавно читал у Димы Александрова размышления про аналитику — он там разложил весь этот мир на типы команд, роли и подходы. И внезапно стало ясно, что это действительно другая цивилизация. Мы строим системы, они — смыслы. Мы проверяем гипотезы на коде, они — на людях.

И, пожалуй, самое смешное в том, что в какой-то момент ты начинаешь слушать их внимательно. Потому что если уж кто-то и знает, что на самом деле происходит с твоим кодом, то это не ты.

#codepen дня

Почти забытая рубрика!

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

Ну и вообще, весьма интересное напоминание, что вариативность в шрифтах не ограничивается одной лишь жирностью — осей вариативности может быть много! И задаются они создателем шрифта. Стандартных не так-то и много: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/font-variation-settings

Мне ещё не очень понятно, кто заставляет создателей стандартов на шрифты экономить буквы: wght — серьёзно?

В данном случае у нас шрифт Cheee, у которого какое-то невероятное число осей, ну и ссылка на кодпен: https://codepen.io/Grooo/pen/ZMdqOb

А на символы это всё разбито плагином GSAP — SplitText.

#css #font #variation

#дайджест недели

Что-то время течёт по-разному. Но дайджест сам себя не напишет!

1️⃣Понедельник

Стандартные CSS-тени выглядят грубо, ведь когда их придумывали — про эстетику не думали. Андрей Ситник сделал PostCSS-плагин Smooth Shadow, который генерирует мягкие многослойные тени без боли.
Демо: postcss.github.io/postcss-smooth-shadow

https://t.me/htmlshit/3880

2️⃣ Вторник

Когда технологии стареют, это незаметно — пока не поздно. Сайт endoflife.date показывает даты конца поддержки систем и библиотек и даже имеет API для CI. Помогает обновляться с умом, особенно на LTS-версиях.

https://t.me/htmlshit/3881

Ещё про dotfiles — сборники конфигураций .bashrc, .vimrc, .gitignore и прочих. Раньше я жил без них, теперь без пары файлов не могу. Классная подборка на GitHub: github.com/topics/dotfiles

https://t.me/htmlshit/3883

3️⃣ Среда

Google Translate в Chrome при переводе ломает DOM: заменяет TextNode на <font>, отчего рушится React и обновление текста. Статья разбирает, почему так и как защититься — лучшее чтиво для фронтендеров.

https://t.me/htmlshit/3884

А для TypeScript вышел ArkRegex — надстройка над new RegExp() с типизацией, валидацией и подсказками прямо в IDE. Красиво, но мощные выражения могут тормозить язык.

https://t.me/htmlshit/3886

5️⃣Четверг

Apple случайно выложила сорсмапы веб-App Store. Оказалось, он написан на Svelte, с комментариями и кастомным фреймворком Jet. Код уже удалили, но копии остались. Любопытный взгляд в то, как пишет Apple.

https://t.me/htmlshit/3887

А инструмент дня — TypeGPU, который компилирует TypeScript в WGSL (WebGPU Shading Language). Пишешь шейдеры на TS — получаешь GPU-код. Безумно круто.

https://t.me/htmlshit/3890

5️⃣ Пятница

Хочешь, чтобы элемент менял ширину ступенчато — как шахматная доска? CSS-функции mod() и round() уже умеют! Или можно старой школой — через grid с repeat(auto-fill, 15px).
https://t.me/htmlshit/3891

А если надо читать терминальные логи с цветом, выручит расширение ANSI Colors для VS Code — открывает файлы с escape-последовательностями как нормальные раскрашенные логи.

https://t.me/htmlshit/3893

6️⃣ Суббота

Отладка на телефоне — боль, но Eruda решает. Это встраиваемая консоль для мобильных браузеров с плагинами и визуализацией касаний. Почти как Chrome DevTools, но на телефоне.

https://t.me/htmlshit/3895

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

Ох что я вам нашёл! Просто пушка.

Как вам отладка на мобильных устройствах? Ну только честно. По-моему — мучение.

Да, можно подключить телефон кабелем к компьютеру и пользоваться консолью настольного браузера. Можно купить доступ к Browserstack или аналогам и разруливать косяки на десятках устройств. Ах да, можно ещё воспользоваться эмулятором!

Но почему бы просто не воспользоваться девтулзами? Ну потому что в мобильных браузерах их нет.

Зато есть Eruda! Встраиваемая консоль для мобильных браузеров: https://github.com/liriliri/eruda

Демо: https://eruda.liriliri.io/

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

В общем, забавная вещь! В какой-то момент может и выручить.

#js #devtools #mobile #бородач

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

Я не знаю, насколько для вас знакома картина, как на иллюстрации, но всё же.

Итак, что там изображено? Там изображён лог вывода терминала. То есть, условно, запустил я 100 тестов, чтобы проверить их стабильность. И вывод упавших тестов положил в файл.

Если бы я просто в терминале за этим наблюдал — я бы получил подсвеченный текст: ошибки, результат тестирования, общий вывод консоли. И это всё обозначается так называемыми escape sequence aka «управляющая последовательность».

Управляющая посредственность, гг

Ну вам они знакомы по, например, регулярным выражениям и командам терминала: «заэскейпить кавычки». Вот так: "\"". Только в терминале это управляет в том числе цветом и выглядит чуть сложнее.

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

И решение оказалось простым! Расширение ANSI Colors. Открыли файл, выбрали ANSI Preview в командной панели — и вы великолепны.

Очень удобно.

#vscode #ansi #escape

#новость дня

CENTI CONF: Frontend Day — 21 ноября, Москва

Остановите всё: офлайн-день фронтенда, который стоит посетить.

Centicore Group собирает frontend- и Angular-специалистов — настоящих, с опытом на реальных проектах.

Что будет

— Разборы реальных кейсов от ведущих разработчиков.
— Неформальное общение со спикерами в лаунж-зонах и на afterparty.
— Темы: генеративные UI, Computer Science во фронтенде, сигналы в Angular, и честное резюме без «подкруток».

Для кого

Для frontend- и Angular-разработчиков уровня middle, middle+, senior, teamlead. А также всех, кто хочет вырасти в профессии и поговорить с людьми, которые реально пишут код.

📍 Москва, ул. Новодмитровская, д. 1, стр. 23
🕥 21 ноября 2025 г., 10:30 (МСК)
💸 1000 ₽
🔗 https://events.centicore.ru

#фишка дня

Как заставить элемент изменять свою ширину... ступенчато?

Ну, например, вам нужно, чтобы шахматная сетка при любых условиях оставалась цельной.

И сегодня у нас аж несколько вариантов, как этого добиться.

1. От Аны Тюдор: https://codepen.io/thebabydino/pen/zYbZpBq

Используем функцию модуля:

width: calc(95vmin + -1*mod(95vmin, 15px));

Но вот беда, в Chrome модуль пока не поддерживается... но не унываем! Есть ещё два варианта от Темани Афифа aka CSS Challenges.

2. Эффективное значение функции выше это, буквально, округление. Но так и такая функция в CSS имеется! Как-то так:

min-width: round(95vmin,15px);

Пример: https://codepen.io/alinaki/pen/VwRMpPY

И раньше это не работало в Chrome, до версии 125. Просто потому что ребята их Chrome решили сделать сразу тригонометрию, забыв про простую арифметику.

Ну и ещё вариант...

3. CSS Grid конечно же: https://codepen.io/t_afif/pen/KKEXwmR

И секрет будет в правиле:

grid-template-columns: repeat(auto-fill, 15px);

Всем шахмат, котаны :)

#css #trick #math #бородач

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

Я бы сказал, #офигеть дня. Возможно, вы помните этот пример, его во многих пабликах презентовали как «ад разработчика».

Так вот. Вы не поверите. Его смогли запрограммировать!

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

Итак, инструмен, который помог создать это творение, называется TypeGPU. Что он делает?

Он конвертирует TypeScript в GLSL. Да, в язык описания шейдеров! Точнее, в WGSL — WebGPU Shading Language.

Ну то есть понимаете, что происходит? Вы описываете логику так, как привыкли на TypeScript — с некоторыми особенностями шейдеров (например, дикая параллельность вычислений) — и получаете на выходе разделённый на логику и шейдеры код!

Можно начать с простого примера градиента, чтобы хоть немного в это въехать. Но, конечно, это не за один вечер :)

Я обожаю такие проекты. Стирают все грани и вдохновляют.

#typescript #webgpu #webgl #glsl #wgsl

#такое дня

Вчера Apple выкатила сорсмапы своей новой веб-версии AppStore прямо в продакшен. И, естественно, оно утекло.

Естественно, репа уже грохнута. Естественно, у меня есть копия. И вообще, её довольно интересно смотреть!

Да и клоны вовремя успели создать, например этот репозиторий.

Но для начала, чтобы этот пост не был таким уж бесполезным, слито всё было с помощью Chrome-расширения Save All Resources. Как минимум, мы знаем теперь, что оно работает!

Итак, что же интересного в исходниках?

Ну, для начала, это Svelte. Неожиданно? Да не сказать. Apple любит не-мейнстримовые фреймворки (да-да, фанаты Svelte, двух фреймворков достаточно). Начинали они со SproutCore в то время, когда везде был Angular и Backbone, а продолжили моей любовью — Ember.js. Как минимум, Apple Music был на нём написан.

Во-вторых, авторы не стесняются комментариев в коде. И нет, это не ИИ-комментарии, там всё по делу. Но в мире, где принято писать самодокументирующийся код, это неожиданно.

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

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

Естественно, утечка подняла в очередной раз миллион вопросов вроде: «Если код всё равно будет на клиенте, какая разница, обфуцированный он, или нет». Как минимум, фишингу отсутствие исходников никак не мешает.

Мнения, котаны?

#apple #svelte

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

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

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

Да, можно исопльзовать сервисы вроде regex101.com, но ведь хочется не покидая среду разработки.

Недавно появилось отличное решение проблемы - ArkRegex как абстракция над new RegExp() с выводом пояснительной информации и валидацией в типах Typescript

https://arktype.io/docs/blog/arkregex

Пример из документации:

import { regex } from "arkregex"

const ok = regex("^ok$", "i")
// Regex<"ok" | "oK" | "Ok" | "OK", { flags: "i" }>

const semver = regex("^(\\d*)\\.(\\d*)\\.(\\d*)$")
// Regex<`${bigint}.${bigint}.${bigint}`, { captures: [`${bigint}`, `${bigint}`, `${bigint}`] }>

const email = regex("^(?<name>\\w+)@(?<domain>\\w+\\.\\w+)$")
// Regex<`${string}@${string}.${string}`, { names: { name: string; domain: `${string}.${string}`; }; ...>

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

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

Ждём tsgo и существенного прироста производительности, чтобы не думать о нюансах.

#статья дня

Живя в стране, основной язый которой не английский и не русский, достаточно быстро — хвала современным UX-тенденциям — наблатыкиваешься ориентироваться в разного рода веб-приложениях. Даже, условно, налоговую карту могу заполнить без перевода страницы.

Тем не менее, пользоваться Google Translate приходится достаточно часто. И если вы хотя бы раз его в жизни использовали, вам прекрасно знакомо, что перевод часто ломает поведение приложения и крайне нежелательно, например, делать покупки на переведённой странице. Можно что-то упустить.

Почему это происходит? А вот об этом сегодняшняя статья дня и её перевод.

TL;DR

Google Translate в Chrome при переводе страницы подменяет текстовые узлы (TextNode) на элементы <font> (sic!), ломая структуру DOM и работу React. После этого текст перестаёт обновляться при изменении данных, а операции с узлами (removeChild, insertBefore) вызывают ошибки. Обойти проблему можно лишь частично — оборачивая текст в <span> или отключая перевод, что снижает производительность и доступность.

Как всегда, я рекомендую оригинал. Потому что там полно интерактивных примеров и дополнительной информации по теме.

Правда, финские программисты даже и пытаться не будут...

#translate

#ссылка дня

Итак, файлы конфигурации, они же dotfiles.

.bashrc, .zshrc, .vimrc, emacs/.config/emacs, .gitignore

Понятно, почему dotfiles? У всех есть точка в начале названия самого файла или директории до него. В Unix-подобных системах такой файл будет скрыт от файлового менеджера или дефолтной команды списка файлов aka ls.

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

Я когда-то давно дико упарывался по сложной конфигурации своих машин. Эффективность over 9000. Но заметил одну проблему...

На машинах коллег и удаленных серверах эффективность падала до нуля. Я просто привык к своим стандартам.

Так что закончилось это минимальным набором вроде vimrc (все равно вим никто не использует больше) и глобального gitignore.

Так вот, ссылка дня представляет собой сборную солянку различных dotfiles на GitHub. Делитесь, котаны, кто что использует: https://github.com/topics/dotfiles

Может, я что-то упускаю?

#бородач

#ссылка дня

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

Чтобы не попадать в такие ситуации, существует проект endoflife.date. Он показывает, когда заканчивается поддержка языков, библиотек, фреймворков и систем. Вводишь, например, Node.js или Ubuntu — и сразу видно, какие версии ещё живы, а какие пора обновлять. У них даже есть открытое API, так что можно встроить проверку прямо в CI и получать напоминания автоматически.

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

Простая идея, но в долгосрочной перспективе экономит много времени и нервов.

#lts #support

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

Стандартные тени в CSS слишком... жёсткие. Когда они все придумывались — всё делалось максимально топорно, в итоге и градиенты у нас линейные и, стало быть, тени.

Об этом информации, в целом, достаточно много. Например, вот: https://tobiasahlin.com/blog/layered-smooth-box-shadows/

В сети имеется достаточное количество генераторов теней, но это дико неудобно. Потому Андрей Ситник написал очередное расширение для так любимого нами PostCSS. Так и называется: Smooth Shadow.

Демо: https://postcss.github.io/postcss-smooth-shadow/

Такое мы любим!

#css #postcss #shadow

#дайджест недели

1️⃣ Понедельник

Automator в macOS — мощная, но забытая штука. Можно за пару минут собрать утилиту для превращения видео в гифку с ffmpeg и уведомлением через terminal-notifier. Теперь ты — макось-программист: https://t.me/htmlshit/3868

2️⃣ Вторник

Свойство text-align-last позволяет отдельно выровнять последнюю строку текста — мелочь, а красиво. Раньше поддерживалось только в IE, теперь работает и в нормальных браузерах: https://t.me/htmlshit/3870

3️⃣ Среда

HTML исполнилось 34 года 🎉 А мне — 38. 29 октября 1991 Тим Бернерс-Ли опубликовал документ с первыми 18 тегами. С Днём рождения, HTML! И я: https://t.me/htmlshit/3871

5️⃣ Четверг

Swark — расширение для VS Code, которое строит диаграммы вашего кода с помощью Copilot и Mermaid.js: https://t.me/htmlshit/3872

5️⃣ Пятница

Императивные запросы в Tanstack Query проще, чем кажется. Используйте useQuery с enabled: false и refetch, если нужно вызывать запрос вручную: https://t.me/htmlshit/3874

На митапе Design System Breakfast рассказал про Storybook Interactions — как писать тесты прямо в сторях и гонять их в Jest или Vitest.
Презентация Google Slides и пост: https://t.me/htmlshit/3875

6️⃣ Суббота

Ахмад Шадид о том, как строить устойчивые секции с container queries, logical properties и flexible gaps.
Современная верстка без медиазапросов: https://t.me/htmlshit/3877

У кого там была шестидневка — лучиков, котаны ❤️

#статья дня

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

Ну и ограничиваться одним только вертикально-горизонтально всегда раздражало.

Потому, вашему вниманию — новая статья Ахмада Шадида: «Верстка секций современным CSS».

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

Особое внимание уделено таким возможностям, как container queries, logical properties и flexible gaps. Шадид показывает, как всё это помогает создавать действительно устойчивые макеты, которые не ломаются при изменении контента, языка или даже направления текста.

И, как всегда у Ахмада, статья не ограничивается теорией — множество живых демо, аккуратных примеров и пояснений, зачем это всё нужно.

А, ссылка: https://ishadeed.com/article/modern-css-section-layout/

#css #article #container #cqw

#презентация дня

Я тут сегодня успел на митапе побывать! И не просто побывать, а ещё и спикером там был.

Митап — Design System Breakfast, который лидит Варя Степанова — посвящён, как несложно догадаться, дизайн-системам в разных их проявлениях. И сегодня я там презентовал открытую мной недавно возможность писать функциональные и поведенческие тесты прямо в сторях, а потом запускать их в Jest как локально, так и в CI/CD.

И называется эта вся прелесть — Storybook Interactions. И, естественно, одним только Jest дело не ограничивается, скорее даже наоборрот — официальная их рекомендация это использование Vitest и Playwright. Но у нас в команде уже есть сформированная экосистема.

Итак, презентация: https://docs.google.com/presentation/d/1hpAt3y4zE1U8vRhY_IfmM3NEeY8qCe9QdKnQLAJF8oo/edit?usp=sharing

Ну и, конечно же, пример на гитхабе: https://github.com/bekharsky/when-jest-met-storybook

Стек: Vite, React 19, MSW, MUI, React Router, Tanstack Query, Storybook 9 и Jest с SWC.

Если нужно больше подробностей или хотите стрим прямо здесь на канале — требуйте, не стесняйтесь, котаны!

#react #design #storybook #ui #test