#codepen дня

Просыпайся, страна! Minecraft подвезли...

...на CSS!

Подвезли-то давно, но завирусилось только сейчас: https://benjaminaster.com/css-minecraft/

CodePen: https://codepen.io/Benjamin_Aster/pen/gOKwpOd
GitHub: https://github.com/BenjaminAster/CSS-Minecraft

Я не так давно посмотрел серию видео о разработке Minecraft для 8- и 16-битных консолей и даже для калькуляторов, но даже после этого — версия на HTML+CSS повергла в культурный шок.

Скриптов на странице, кстати, нет. Даже поворот — это сочетание псевдокласса :active и animation-play-state!

Дичь совершенная.

#css #minecraft

Когда в последний раз вы трогали свои сиксели?

Ладно, кроме шуток. Оказывается, в консоли можно смотреть картинки! И в высоком качестве. И давно.

Узнал случайно, когда смотрел видео про DEC Alpha. Там описали странный формат — SIXEL.

📌 Что это такое?

Этот формат придумали в 1983 году для DEC-принтеров и терминалов вроде VT240. Он позволяет кодировать растровые изображения в текстовом виде с помощью специальных escape-последовательностей.

Последовательности состоят из колонок по 6 пикселей, отсюда и название — six pixels.

Тогда это было нужно, чтобы выводить графику без сложных GUI. А теперь SIXEL неожиданно полезен в терминалах, где можно без сторонних приложений просматривать картинки прямо в консоли!

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

👉 Самый простой способ — lsix, это ls, но для миниатюр:

brew install lsix # macOS
sudo apt install lsix # Debian/Ubuntu Linux

А дальше просто запускаем:

lsix

и терминал покажет миниатюры всех картинок в папке. Работает в iTerm2, XTerm и других терминалах с поддержкой SIXEL.

🔄 Конвертация изображений

Для работы с этим форматом есть libsixel, который позволяет преобразовывать обычные изображения:

brew install libsixel
img2sixel myimage.png

А если у вас установлен ImageMagick, можно делать так:

convert myimage.png sixel:- #

Конвертирует и сразу выводит в терминал.

Если уже есть картинка в формате sixel, можно вывести её простым cat.

❓ Поддержка в эмуляторах терминала

Есть список совместимых на сайте:
🔗 https://www.arewesixelyet.com/

Сразу скажу, что стандартный терминал в macOS — не умеет.

Очевидно, формат прекрасно подходит для разгого рода диаграмм и дашбордов.

В общем, когда думаешь, что знаешь всё о графике, а потом узнаёшь, что кроме пикселей и вокселей есть ещё и сиксели! 😄

#console #images #бородач

#совет дня

Расскажу о других авторских каналах, на которые советую подписаться — собрал их в одну папку.

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

Будет полезно как джунам, так и сеньорам — https://www.tg-me.com/addlist/0FHgy1y1yZgxMDc6

#статья дня

Дэн наше всё Абрамов недавно написал статью о новом способе передачи данных с сервера — Progressive JSON. Это не просто использование курсоров для пагинации, как в том же JSON:API, а настоящий поток данных, где структура JSON передаётся частями, по мере её готовности.

Вообще, много пишет последнее время. Это хорошо!

Зачем нужно? Собственно, для работы React Server Components в том числа!

Пример такого потока:

{
  "header": "Welcome to my blog",
  "post": "$1",
  "footer": "Hope you like it"
}

Видите заглушку $1? Позже — в том же потоке! — приходит следующий кусок:

/* $1 */
{
  "content": "This is my article",
  "comments": "$2"
}

На стороне клиента это будет выглядеть как:

{
  "header": "Welcome to my blog",
  "post": {
    "content": "This is my article",
    "comments": new Promise(/* ... not yet resolved ... */),
  },
  "footer": "Hope you like it"
}

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

Если вам интересна тема оптимизации загрузки данных, стоит прочитать статью Дэна: Progressive JSON.

А, или посмотреть в формате видеоподкаста! Тут: https://www.youtube.com/watch?v=MaMQLNBZz64

#react #json #rsc

#фишка дня

Многие недооценивают css variables, особенно при небольшой поддержке javascript.

Думали динамически можно изменять только цвет/типографику и что-то еще такое же очевидное?
А вот и нет, управлять можно даже текстом (ну ладно, еще немного математикой).

Идея для использования - динамический брендинг.
Задали название продукта/компании/клиента в одном свойстве --client-id и изменили один раз для шапки/подвала/сайдбара.

Пример кода показывает насколько это легко понять и использовать.
https://codepen.io/glebcha/pen/gbpwbob

#css #var

#новость дня

Никогда такого не было, и вот опять!

Уязвимость на базе localhost? Дайте две!

Итак, по порядку. Не так давно мы с вами обсуждали уязвимость под названием 0.0.0.0 Day. Суть её заключалась в том, что браузеры разрешали рандомным сервисам стучаться на разные порты по адресу 0.0.0.0, тем самым, позволяя этим самым сервисам определять, что же у вас на компьютере такого установлено. Это могли быть как средства для разработчиков, так и различные локальные сервисы поиска, защиты или просто мониторинга.

Так вот, на этих ваших прекрасных Android-смартфонах практически каждое приложение Facebook и Яндекса поднимают свой сервер, прослушивающий определённый диапазон портов. А скрипты аналитики и метрик передают куки этим самым серверам, связывая посещение некоего рандомного сайта с вашим аккаунтом в перечисленных компаниях.

А, каково? На iOS так сделать нельзя, потому что долгоживущие фоновые процессы ещё надо обосновать самому Apple.

А вы потом удивляетесь, откуда столько релевантной и не очень рекламы, ведь никому не говорили, никуда не входили. Только говорили.

Статья: https://localmess.github.io/
Перевод: https://habr.com/ru/articles/915732/

Совершенная красота, конечно. Facebook, кстати, перестали это использовать. Яндекс вроде ещё использует.

Почитайте статью или перевод. Очень крутая.

#cvs #security #privacy #vulnerability

#фишка дня

...от Ахмада Шадида, уже хорошо нам известного.

Как отменить скругление углов на мобиле, но оставить на дестопе?

Конечно, можно написать медиазапросы. Конечно, можно подождать реализации if()...

А можно просто:

border-radius: max(0px, min(8px, calc((100vw - 4px - 100%) * 9999))) / 8px;

Или так:

clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-1));

Вообще, вот статья на тему: https://ishadeed.com/article/conditional-border-radius/

А вот так будем делать в будущем:

border-radius: if(100% < 100vw: 8px; else: 0px);

#css #clamp #math

#заметка дня

— Мама, я хочу Liquid Glass!
— Liquid Glass есть у нас дома!

Liquid Glass дома: https://nrzns4.csb.app/

Кто не в курсе: https://developer.apple.com/videos/play/wwdc2025/219/

Ладно, кроме шуток. Да, это просто материал с картой нормалей. Но так и яблочное решение — не более, чем продвинутый шейдер.

Уверен, что UI-экспериментаторы скоро подтянутся :) Не знаю, насколько это будет востребовано, конечно, но...

Flutter жалко. У React Native тут явное преимущество получается. С другой стороны, Liquid Glass — он не только про виджеты, это попытка выстроить новый дизайн-язык. На мой взгляд, довольно странная, но какие-то изменения давно напрашивались, даже тот же Google в Material Design V3 натворил непонятного.

Идея, стоящая за Liquid Glass, — это отсутствие интерфейса. К сожалению, эта же идея привела к тому, что этого самого интерфейса на десктопной ОС стало даже слишком много.

Поглядим. Сквозь стекло.

#apple #liquid #glass

#ссылка дня

Во, UI-экспериментаторы уже подтянулись.

SVG-фильтры на связи: https://codesandbox.io/p/sandbox/nn5q2y

GitHub: https://github.com/lucasromerodb/liquid-glass-effect-macos

Очень простая реализация, конечно, но есть забавный момент: поддержка SVG-фильтров на Safari довольно плоха, эффекта завихрения не происходит.

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

#svg #glass

#фишка дня

Использование position: sticky уже так-то стало обыденностью.

А что если можно было бы обращаться к элементам прилипшего родителя и что-то странное с ними вытворять?

Так можно! Для этого у нас буквально не так давно появились скролл-запросы, как часть контейнерных запросов. Так и называются: Container scroll-state queries.

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

Или, наоборот, не прерывать просмотр рекламы? :)

Запросто: https://codepen.io/alinaki/pen/WbvMOPB

@container scroll-state(stuck: top) {
  .pip {
    width: 200px;
    transform: translate(-50%, 0%)
      translate(calc(50vw - (50% + 1rem)), calc(100vh - (100% + 1rem)));
  }
}

Обратите внимание, translate можно складывать, получая интересную математику в итоге :)

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

#css #scroll #state

#видео дня

А это что это? А это Юлия Миоцен вернулась (вот ссылка на первую часть) со второй частью обучающих видео по 3D в CSS!

Вот: https://www.youtube.com/watch?v=2FEgcYfiTEM

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

На этот раз речь пойдёт об освещении: где размещать источник света, как рассчитывать и строить тень, какого цвета эта самая тень должна быть.

Есть и текстовая версия с примерами: https://miocene.io/post/light-and-shadow-in-css/

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

#css #3d #light

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

Приложение растёт, достигло невероятных масштабов, а интернационализацию не завезли?

Или так долго пилили фичи под основной язык, что переводчик-техпис успел уволиться, а техлиду не нравится ни один кандидат?

Да, это не оправдание фигачить строки без заворачивания их в уже ставший настолько привычным t(), но что-то же делать надо, согласитесь?

Итак, вашему вниманию несколько вариантов для упрощения переноса подвисших непереведённых строк в ресурсные файлы:

1. Lingui ESlint плагин — https://github.com/lingui/eslint-plugin

Да, не так много людей использует Lingui, но плагин — достаточно универсальный и гибкий. Позволит найти как строки в тегах, так и в атрибутах.

2. Сюда же ESLint плагин для чуть более привычного i18next — https://www.npmjs.com/package/eslint-plugin-i18next

Занимается буквально тем же самым, но вариантов настройки чуть меньше. Лично у меня не было времени досконально проверить вариант 1, потому я остановился на этом. Сердито и быстро. Ну и конечно, установил его в warn.

3. Ну и в качестве забавного артефакта, добавим i18next-emoji-postprocessor. Что он делает?

О, он делает дичь. Заменяет все переведённые строки на рандомные эмодзи. Что не переведено — в эмодзи не превратится. Звучит кринжово, но на самом деле может стать идеально для текучки уставшего техписа.

Конечно, идеальным решением был бы экспорт непереведённых строк в CSV, но это я пока не до конца осилил. Получится — расскажу.

А как вы с этим справляетесь, котаны?

#i18n #l10n #eslint

#til дня

Вам когда-нибудь было мучительно стыдно за то, что чего-то не знаете?

Мне — нет. Но вот сейчас почти да.

Вы знали, что вот уже пару лет как nth-child в CSS стал нормальным?

Что я имею в виду: у тебя раньше был выбор, nth-child для индексации узлов aka тегов любого вида или nth-of-type для индексации конкретного типа узла (`div`, p, `section`).

Выходит какой-то бред, как мне посчитать второй элемент с классом .star?

И вот чего я не знал, это что nth-child может принимать селектор в виде аргумента of!

:nth-child(2 of .star) {
background: red;
}

Ведь счастье так возможно. Стефан Юдис мне это показал.

Вот, Baseline 2023: https://caniuse.com/css-nth-child-of

И демо: https://codepen.io/alinaki/pen/LYKXWYo

Я, короче, очень доволен.

#css #nth #фишка #бородач

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

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

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

Такие штуки часто кажутся чем-то второстепенным. Но когда они складываются в систему — в еду, спорт, терапию, жильё, адекватную поддержку — это перестаёт быть просто «бонусами». Это уже система, которая влияет на то, как ты живёшь и работаешь.

Вообще, тема интересная, и более подробно её раскрыли в подкасте Деплой на кейсе нематериальных мотивашек Яндекса. Есть много примеров, как это работает внутри: объяснили, как такие программы вообще появляются, зачем IT-компании тратят на это ресурсы и как измеряют пользу бенефитов. Тут, кстати, спойлерну: смотрят на востребованность, эффективность и удовлетворенность сотрудников.

Еще было любопытно про то, как в компании работают превентивные чекапы и как поддерживают коммьюнити по разным интересам.

#заметка дня

Тут Иван Акулов из Framer поделился, как они доставляют AVIF-изображения, добиваясь ещё большей, чем WEBP, экономии трафика.

Да, я в курсе, что многие генерируют картинки при сборке, кто-то использует сервисы и так далее, но давайте не забывать, что:
1. Есть пользовательский контент
2. Облака могут встать дорого

Итак, в чём же проблема? А в том что AVIF ну очень долго кодируется, что не есть хорошо. Там, где на генерацию WEBP уйдёт 100-300 мс, на AVIF — 1-3 секунды.

В итоге, если генерировать изображения по запросу и сохранять на CDN (тем же nginx, например), будет не очень вежливо заставлять посетителя ждать.

Поэтому было решено применять подход, знакомый нам как stale-while-revalidate.

1. С первым запросом генерируем WEBP-картинку, но устанавливаем кеширующие заголовки как Cache-Control to max-age=0, stale-while-revalidate=31536000.
2. Поскольку max-age выставлен в 0, картинка моментально "протухнет", CDN с этим не согласится и отправит второй запрос, чтобы, собственно, закешировать.
3. И вот тут уже начинаем генерировать AVIF.
4. И отправляем его с max-age=31536000, ну, почти навсегда.

Ну и общая статья на тему: https://www.framer.com/help/articles/how-are-images-optimized-in-framer/

Я тут пока готовил этот обзор, хотел найти свой конфиг nginx для генерации и кропа картинок на лету, но... потерял. Кажется, пришло время потренироваться и написать обновлённый, по мотивам.

А как вы доставляете картинки, котаны?

#image #optimization #бородач

#баг дня

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

Пришло время повторить! С небольшим историческим экскурсом :)

Итак, некая библиотека компонентов Radix. И написана она в технике bring your own styles. То есть буквально стыкуются с чем угодно, не навязывая своё оформление (темы есть, но они — отдельно).

В чём же тогда смысл таких UI-китов? Ну, собственно, создание своих компонентов и дизайн-систем не ограничивается наложением стилей на стандартные input да button, это большая работа по объединению их в доступные группы, в задание нужного поведения и так далее.

А уже потом как, например, в нашем случае — можно хоть Tailwind накинуть. Ирония какая.

Так вот, среди UI-китов есть некое подобие конкуренции и моды. Как и везде. И одна из модных тенденций — пытаться сделать работу интерфейса быстрее. Неважно как, визуально или фактически.

И один из достаточно неожиданных способов этого добиться — это поменять обработчик onClick на onMouseDown.

И вуаля, на мобильных устройствах как будто бы стало на 300 мс быстрее!

Но, конечно, это достаточно спорное решение. Как минимум, нельзя отменить клик, убрав курсор с элемента.

А тут я обнаружил ещё одну проблему: https://github.com/radix-ui/primitives/issues/3600

Там есть и видео, и демо.

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

Почему так происходит? Потому что во всех браузерах обработка событий происходит в таком порядке:

0. mousedown
1. change
2. blur
3. focus
4. mouseup
5. click

...остальное посмотрите по ссылке.

Логично, что при замене mousedown на click всё прекрасно работает. Но кому-то в Radix очень захотелось, чтобы на мобилах их UI-кит казался быстрее других.

Выстрелили себе в ногу получается.

В общем, как обычно, прошу ваших комментариев и реакций на issue в GitHub!

#ui #kit #radix #onmousedown

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

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

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

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

Что ж, по крайней мере для маководов у меня есть решение! 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

#статья дня

От перемены мест слагаемых сумма не меняется, не правда ли?

А если речь о композиции? Например, композиции трансформаций в CSS?

Ну, вот, например раз:

.demo {
  transition: transform 1s ease;
}
.demo.zoom {
  transform: scale(3) translate(-33.1%, 20.2%);
}

и два

.demo {
  transition: transform 1s ease;
}
.demo.zoom {
  transform: translate(-33.1%, 20.2%) scale(3);
}

Это одно и то же, или нет? Так-то ответ интуитивен: нет, не одно и то же. Школьного курса математики должно хватить для понимания. Ну, окей.

А вот если так, три:

.demo {
  transition: transform 1s ease;
  transform: rotate(0);
}
.demo.zoom {
  transform: scale(3) translate(-33.1%, 20.2%);
}

Что-то резко стало сложно, не правда ли? А что если я вам скажу, что итог номера три равнозначен итогу номера два? И именно он приведён на видео к посту.

Почему так? Потому что браузер немножечко сходит с ума от того преобразует то, что от него требуют, и организует переданные значения в единую матрицу преобразований, нивелируя порядок translate и scale.

А подробнее об этом в статье Джейка Арчибальда: https://jakearchibald.com/2025/animating-zooming/

CSS, конечно, прекрасен.

#css #transform #matrix

#фишка дня

Как убедиться, что ваш switch покрывает все кейсы, а default остаётся только на случай косяков в рантайме?

Очень просто! Два варианта:

1. Используем never, от Кори Хауса:

interface Dog {
  kind: "dog";
  favoriteToy: string;
}

interface Parrot {
  kind: "parrot";
  knowsWords: number;
}

type Pet = Dog | Parrot;

function logPetTalent(pet: Pet) {
  switch (pet. kind) {
    case "dog":
      return console. log (Dog loves ${pet. favoriteToy}. ');
    case "parrot":
      return console. log (Parrot knows ${pet.knowsWords} words. *);
    default:
      const exhaustiveCheck: never = pet;
  }
}

2. Второй вариант — ESLint и правило switch-exhaustiveness-check. И уже дальше решаем, разрешать default, или нет. Конфигураия это позволяет.

Впрочем, мы у себя вообще переходим на pattern matching, о чём как-нибудь в следующий раз.

#ts #switch