#заметка дня

Что-то этот тег настолько слился с фишкой дня, что я почти про него забыл.

Итак, сегодняшняя тема: дробные пиксели! Половинчатые, чаще всего. Уж больно (наши) дизайнеры полюбили полупиксельные бордеры.

К HiDPI-экранам быстро привыкаешь, не правда ли? К слову, картинка от Веса Боса. Так вот, на экранах высокой плотности вы скорее всего получите желаемое — полупиксельную границу. Естественно, полупиксельную в рамках вашей плотности экрана и ваших виртуальных пикселей.

А на обычных экранах произойдёт округление, для 0.5px — до 1px.

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

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

Собственно, вот: https://docs.google.com/presentation/d/1orKRwx5DnSoyYL1XQk4nv8ffycgmMePbF9j8fOGhXi0

Абсолютно прекрасно.

#css #round

#фишка дня

Если вы дислексик, или просто устали считать цифры в длинных числах, используйте разделители!

Думаю, картинка говорит сама за себя.

1_234_567_89,01 после трудового дня как-то легче считывается, чем 123456789,01.

P. S. Пример намеренно игнорирует разряды, не душните :)

#js #number

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

Google Chrome на днях достиг версии 124. Что это значит? Что у нас очередные обновления в DevTools!

Из наиболее интересного — инспектор анимаций теперь поддерживает нативные анимации по скроллу (на видео).

Если вы ещё не в курсе, что это, рекомендую посмотреть это демо: https://scroll-driven-animations.style/

К слову, автор демо — Брамус Ван Дамм — заодно представил расширение, позволяющее удобно эти самые анимации визуализировать и отлаживать. Есть и полифилл для ScrollTimeline.

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

А ещё в DevTools теперь нормальная поддержка нативного нестинга aka вложенности!

Ну и раз такое дело, пусть на всякий случай тут полежит ссылка на список изменений в Chrome 124: https://developer.chrome.com/release-notes/124

#css #chrome #devtools

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

Милота, за которой стоит самый настоящий матан! Интереснейшие мозаики (паттерны, если хотите): https://codepen.io/yuanchuan/pen/xxEXwZw

Вы можете обратить внимание на использование веб-компонента CSS-doodle. Я тоже заинтересовался, полез в настройки кодпена и… и офигел. Вы только посмотрите на это!

https://css-doodle.com/

Целый инструмент для генерации паттернов. Документация и примеры кода выше всяких похвал.

На его основе создан https://tabbied.com/

Правда, результаты работы Tabbied очень напоминают Экспресс-дизайн 😅

Вообще, весьма круто. Пару вечеров убить точно стоит.

#css #pattern

#новость дня

На этой неделе вышел Firefox 125 (точнее, 125.0.1, там нашли уязвимость прямо перед выходом, и нулевую версию скипнули).

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

Короче, к чему весь кипиш. А к тому, что Firefox 125 наконец-то начал поддерживать Popover API!

Вот, в чейнджлоге: https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/125#apis

А вот, собственно, документация по API: https://developer.mozilla.org/en-US/docs/Web/API/Popover_API

Мы с вами тоже рассматривали пару примеров. Вот тут: https://news.1rj.ru/str/htmlshit/2029

Ну и это, в целом, значит, что Popover поддерживается во всех современных движках. И кому-то скоро вполне можно бужет это использовать :)

Ну а кому-то — полифиллить. Но то такое.

#css #popover #firefox

#статья дня

Что делать, если использовать вариативный шрифт очень хочется, но он тяжёлый как мамка читера?

Например, вариативный Roboto весит 785 Кбайт. Да я в 785 Кбайт умещу код стартапа на миллион. Нужна же лишь часть начертаний и глифов, не все!

Стефан Юдис смог уменьшить этот размер до 58 Кбайт используя два инструмента:

Glyphhanger: https://www.stefanjudis.com/notes/glyphhanger-a-tool-subset-and-optimize-fonts/

И Slice: https://www.stefanjudis.com/notes/slice-an-app-to-remove-variable-font-axes/

Первый помогает оставить лишь нужные символы (глифы), а второй — убрать/ограничить оси вариативности.

Прекрасные инструменты, целый новый мир открывают.

#fonts #tools #бородач

#фильм дня

Node.js с нами уже почти 15 лет и переоценить её влияние на интернет и расстановку сил в разработке вообще невозможно.

И, собственно, к пятнадцатилетию — так-то 27 мая — уже известные нам по документалкам про React.js, Vue.js и GraphQL ребята из Honeypot сняли фильм про создание и становление Node.js. От серверной платформы до де-факто стандартного тулинга во фронтенд-разработке.

Вот: https://youtu.be/LB8KwiiUGy0?si=M8OY8oVtZgdxRAmn

Это мы смотрим!

#documentary #movie #nodejs

#заметка дня

В чат прилетел вопрос: "Как добавить иконку в поле ввода так, чтобы она была видна только когда виден плейсхолдер и исчезла при вводе текста?"

Отвечаем: конечно же добавить её в контейнер label, а потом использовать псевдо-класс :placeholder-shown на поле ввода!

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

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

И, конечно, пример:
https://codepen.io/alinaki/pen/xxMpgLK?editors=1100

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

Всем бу, котаны!

#css #placeholder #noscript #sprite #бородач

#заметка дня

Ну что, воспользовался git reset --hard и грохнул половину репозитория, потому что не до конца понимаешь, как оно работает?

«Присаживайся поудобнее и не паникуй», — сказал себе я вчера, грохнув два дня работы моей жены.

Всё, что нам нужно знать в данный момент — что Git писали не идиоты.

Итак, в моём случае я сделал git add :/, чтобы добавить все файлы из каталога. Потом понял, что ошибся, что мне нужны не все, и бахнул git reset --hard.

...и обнаружил, что пара каталогов того. Пропали.

Хороший вопрос, конечно, какого хера Git это делает, но если подумать, то с точки зрения системы контроля версий-то всё ок. Потому проблема на стороне пользователя.

К счастью, Git на каждый чих строит индекс. И обладает средствами работы с этим самым индексом. Включая работу с файлами.

Для этого встроена утилита, название которой удивительно знакомо линуксоидам: git fsck. Что буквально расшифровывается как git file system check.

И вот она-то нам и нужна. Пишем git fsck --lost-found и все наши файлы из предыдущей версии индекса, которые не попали в текущее состояние Git, оказываются в каталоге .git/lost-found/

Да, они там лежат проименованные как хэши, но кого это когда останавливало.

Дальше дело за малым: просмотреть файлы и восстановить.

Мы восстановили все HTML/CSS/JS и даже картинки (с картинками просто: обращайте внимание на бинарные заголовки, там пишется формат).

Но, конечно, используйте мозг почаще. И делайте резервные копии. Тоже почаще.

#git #lost #recover

#фишка дня

Поскольку селектор has прилетел во все браузеры, самое время использовать его для чего-то более прозаичного, нежели анимации а-ля macOS Dock: https://news.1rj.ru/str/htmlshit/1873

Как вам, например, подсветка колонок в таблице? Ведь без JS эту задачу было решить довольно сложно.

Самый популярный способ подсветки без JS на сегодняшний день — создать очень (очень) высокий псевдоэлемент и показать его по ховеру: https://css-tricks.com/simple-css-row-column-highlighting/

Но это, конечно, какой-то стыд. Хочется что-то чуть менее колхозное.

И, наконец, мы можем это сделать!

Пример от Стэна Хуугарда: https://codepen.io/alinaki/pen/oNmmooN

Значащий код:

table:has(td:nth-child(5):hover) {
  td:nth-child(5) {
    background: var(--hover);
  }
} 

Что тут происходит? Всё просто: если в таблице имеется (has) наведённый мышью пятый (nth-child) элемент в любой строке, надо подсветить все остальные пятые элементы в каждой строке таблицы вообще.

Дыхание будущего! Правда, всё немного портит хардкод номера ячейки... но можно просто сгенерировать сразу штук 10.

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

Как вам, котаны?

#css #has #table #бородач

#фишка дня

Итак, разрабатываете вы интернациональный проект. А что самое главное в интернационализации?

Конечно же кавычки! И как их ставить в оформлении цитат? Руками чтоль?

Ну нет, конечно. У свойства content имеются зарезервированные значения open-quote и close-quote, которые и дадут нужный результат, среагируя на атрибут lang элемента. Ваши висячие кавычки никогда не будут прежними :)

Пруф: https://codepen.io/alinaki/pen/VwNqNpa

Элемент q, кстати, так из коробки умеет.

#css #til #quotes #i18n

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

С места в карьер: утилита qnm предназначена для поиска установленных пакетов в node_modules. Зачем?

Ну, как минимум, это офигенно быстрый способ просмотреть версии всех установленных лично и не очень лично модулей: https://github.com/ranyitz/qnm

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

Почему-то меня в этом отношении очень раздражает emotion. Его тащат просто куда ни попадя, а у людей потом на CSS-in-JS аллергия...

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

Моя рекомендация!

#npm #node #package #бородач

#codepen дня

А кому тут неожиданно уместных применений CSS 3D-преобразований?

Я, честно, не ожидал, что такой простой эффект будет настолько... эффектным. И никакого WebGL не требуется!

Вариант с видео: https://codepen.io/t_afif/full/mdzxJaa
Альтернативный вариант: https://codepen.io/gayane-gasparyan/pen/wvxewXO

Прекрасно подходят для браузерных игр и книжных магазинов (внезапно).

Маги тут?

#css #3d #transform #бородач

#фишка дня

Нужно отменить операцию по таймауту? Ни слова больше!

try {
  const res = await fetch(url, { signal: AbortSignal.timeout(5000) });
  const result = await res.blob();
  // …
} catch (err) {
  if (err.name === "TimeoutError") {
    console.error("Timeout: It took more than 5 seconds to get the result!");
  } else {
    console.error(`Error: type: ${err.name}, message: ${err.message}`);
  }
}

Я серьёзно сейчас: https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal/timeout_static

Концепция AbortSignal это вообще крутейшая тема, которая в целом не так давно ворвалась во фронтенд-разработку, рекомендую ознакомиться: https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal

#promise #timeout

#статья дня

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

Ладно, кроме шуток. Для некоторых задач подсветка текста поважнее будет, чем View Transitions API. Например, как вам текстовый редактор, который подсвечивает слова не путём создания тысяч элементов span, а с накладывая CSS прямо на текст?

А это ближе, чем кажется! И вот Брамус Ван Дамм написал большую статью, описывающую современное состояние Custom Highlight API. И, если коротко, фича уже вполне готова, чтобы создавать редакторы кода буквально на одном contenteditable элементе!

Собственно, что нам нужно?
1. Токенайзер — выделение значащих "токенов" в текста: зарезервированные слова, переменные, комментарии... В примере используется токенайзер из Prism.js
2. Генератор CSS для Custom Highlight API.
3. ...
4. Готово!

Вот статья: https://www.bram.us/2024/02/18/custom-highlight-api-for-syntax-highlighting/

Да, пока не без косяков, включая рандомные проблемы с производительностью, но работа идёт!

И пример для самых нетерпеливых: https://codepen.io/bramus/pen/MWxLjEo

#css #highlight

#заметка дня

Я часто вижу в профильных чатах вопросы типа: «Помогите, тут истерика, текст не занимает всю ширину контейнера и мой флексбокс не работает!»

Короче, происходит ситуация, как на картинке: кажется, что место справа никак не используется.

Ладно бы только начинающие такое спрашивали, но нет же. У всех дыры и паника, паника и дыры.

А суть в том, что рендер текста — это сложно. Рендер длинных слов — это очень сложно.

Потому браузер всегда выделяет для текста максимально возможную ширину. Неважно, ограничили ли вы её условиями флексбокса или установили max-width. Возьмёт всё и начнёт упихивать буквы и слова. Как сможет.

Пример расчётов можно посмотреть в серии статей Инлайновый контекст форматирования, раздел «Горизонтальное выравнивание».

Подсказка: он не сможет. И выделенное место не вернет.

А люди ожидают, что текст спокойно сдвинется вправо и у чекбокса будет больше воздуха. К сожалению, так не получится вообще никак.

Единственно, кажущееся разумным, решение — это заполнить всю предоставленную ширину, используя переносы (словарь или ­). Ну или word-break: break-all;

Есть ещё не очень разумные решения с использованием JavaScript для подсчета реально занимаемой ширины.

Вот три примера: https://codepen.io/alinaki/pen/ExrGRwL?editors=1100

Кстати, если кому реально интересно как работают алгоритмы Flexbox (вы же не думали, что это изобретение только для CSS? Во Flutter тоже они) есть прекрасная статья по поводу: https://tchayen.com/how-to-write-a-flexbox-layout-engine

Не паникуйте, ну.

#css #flex #render #бородач

#новость дня

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

8 лет назад мимо меня почему-то прошла тема, что ребята из Font Awesome собрали миллион долларов на разработку пятой версии своих иконочных шрифтов. Миллион, вместо планируемых 30 000. Этот рекорд, кстати, до сих пор держится.

Не в смысле рекорд кикстартера вообще, а в смысле рекорд среди поддержки софтовых проектов.

В чём отличие подобного сбора средств от простого инвестирования или бизнес-планов? Это свобода не только произвести некий платный продукт, но и вернуть что-то сообществу. И уж Font Awesome сложно упрекнуть в том, что они жадные.

Ну ладно, разве что чуток.

Так вот, к чему это я. Они вернулись!

Пару лет назад ребята взяли под своё крыло открытый проект UI-кита, основанного на веб-компонентах — Shoelace. И потихоньку его пилили. Почему потихоньку? Потому что путь веб-компонентов ко всеобщей поддержке и стандартизации весьма тернист. Одни только битвы YouTube с Firefox чего стоят.

И вот они решили повторить свой успех и резко собрать денег на выпуск третьей версии набора, превратив его в полновесную и конкурентоспособную дизайн-систему! Под таким скучным названием Web Awesome.

Естественно, обещан достаточно жирный бесплатный пакет, а в платном — плюшки вроде конструктора раскладок, тем, шаблонов... Причём, на каждые собранные 50к увеличивается число бесплатных плюшек.

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

Ну что, веб-компоненты захватят мир, или как обычно? :)

#ui #design #awesome

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

Давайте в продолжение топика про современные методы реализации фигур, посмотрим на очередной их генератор.

Напомню, мы уже знаем как правильно рисовать треугольники и звёзды. Пришло время всего остального.

Встречайте: https://css-shape.com/

Их там какое-то невероятное количество, некоторые, с вырезами, даже конфигурируются!

Меня особенно Stamp и Grid Lines восхитили. Просто и элегантно.

#css #shape #clip

#фишка дня

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

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

Прямо как 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 #бородач

#video дня

В продукте, с которым я работаю, в качестве решения для стора используется Effector: https://effector.dev/

И, честно говоря, под него надо немного ломать мозг. То есть, базовые атомарные сторы с событиями на нем делаются так же просто, как и в этих ваших модных Reatom, Jotai, Zustand и так далее. Но когда ты открываешь для себя мир гардов, сэмплов и, какая неожиданность, эффектов — вот тут начинается всё самое интересное. Хотя и не без проблем, о них в соответствующем посте.

Так вот, автор Эффектора — Дмитрий Болдырев — очень много времени уделяет попыткам визуализировать архитектуру приложения и логики всех связей внутри него. Конечная цель — получить самые крутые девтулзы для отладки сторов на свете.

А пока результатом этого стала презентация на HolyJS в этом году. Посвященная, собственно, визуализации архитектуры приложения вообще. Кто, как, когда пытался. Инструменты и результаты:
https://www.youtube.com/watch?v=fWwC45TYxkA

#effector #conference #architecture

#фишка дня

Щас открою секрет. Чтобы не страдать от разработки, надо научиться отлаживать программы? Филологи — молчать!

Поднимите руку те, кто дебажит через console.log(var) 🙋

А надо не так.

Надо открыть девтулзы, в них — исходный код. И там просто нажать «Add logpoint…» на строке. Вуаля. Никаких тебе ожиданий сборки.

#debug #devtools