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

Я решил, что плагины для Figma тоже будут сюда залетать. Особенно, если эти плагины реализованы на базе хороших статей по вёрстке.

Например, от Джоша Камю про красивые тени в CSS: https://www.joshwcomeau.com/css/designing-shadows/

Потому что все мы в душе немного художники.

Встречайте: https://www.figma.com/community/plugin/1068595505353552645/Beautiful-Shadows

В треде автора плагина есть пара трюков по использованию, ну и вообще, можно оставить своё спасибо.

#figma #css #shadow

#фишка дня

Вам уже должен быть хорошо знаком input type=“number”. Кто-то наверняка даже пытался стилизовать раздражающие стрелочки.

Но мало кто знает, что это (и ещё одно, угадайте, какое) поле ввода предоставляет свои псевдоклассы: :in-range и :out-of-range. Уже понятно, что они делают: если вы установили атрибуты min и max, вышеуказанные псевдоклассы позволят воспользоваться этим знанием в CSS.

input:out-of-range ~ span {
  color: red;
}

И естественно, подъехал (вот буквально) шикарный CodePen на эту тему:
http://codepen.io/jh3y/pen/MWWowEb

👉 @htmlshit

#css #input #number #range

#фишка дня

А давайте ещё больше безумных идей богу безумных идей.

Как вам фильтрация списка на CSS? Уж точно покруче FizzBuzz задачи на собеседовании.

А достигается волшебство путём использования селекторов пот атрибутам:

[term] { display: none; }
[term*="a" i] { display: list-item; }

i — означает case-insensitive, регистронезависимый ввод.

Пример на CodePen: https://codepen.io/jh3y/pen/NWyaomN

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

Просто считайте это вашим маленьким DSL (domain-specific language, язык под задачу).

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

#css #js #attributes

#такое дня

Посмотрел презентацию Apple. Мой новый ноутбук, конечно, не показали.

Но назрел вопрос: а кто-то вообще для часов верстал? Есть ли такой запрос на рынке вообще?

Поделитесь опытом.

#дата дня

А вы чего мне не напомнили, что формату SVG четвёртого сентября исполнился 21 год?

Глядите, скрин спеки версии 1.0 в музее: https://www.webdesignmuseum.org/web-design-history/svg-1-0-2001

Забавный проект, кстати, этот музей. В разделе истории веб-дизайна имеется таймлайн выпусков первых версий плотно связанных с вебом технологий, сервисов и программ.

#заметка дня

Для меня было небольшой загадкой, почему Vim, а по большей части, Neovim, так завирусился в последнее время.

Я использовал Vim активно лет 12 назад, имел огромный конфиг, но в итоге сполз с него на Sublime, Atom, а потом и VS Code. Причиной стала лучшая поддержка нужных мне инструментов. Vim остался горячо любимым редактором на удалённых серверах. И от конфига я отказался в пользу сырых режимов, это положительно сказалось на работе в разных средах.

К слову, Vim может искать по многогигабайтным логам легко и просто, а эти ваши VS Code и даже Sublime — нет.

Но суть не в этом. Суть в том, что Vim и другие независимые редакторы спасла… Microsoft. Как?

Раньше каждая IDE реализовывала свой механизм работы с конкретным языком. И как правило, это было некое проприетарное (в смысле непереносимое) решение. Но всё изменил приход LSP: Language Server Protocol.

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

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

О преимуществах Vim есть огромный свежий тред Кирилла Мокевнина, CEO Hexlet: https://twitter.com/mokevnin/status/1567594899859546115

Оригинальный Vim не поддерживает LSP, зато его поддерживает Neovim. И тут все любители модальных редакторов получили второе дыхание.

Но вот я правда был очень удивлён, как Microsoft снова перевернула мир свободного ПО. Это, конечно, поразительно.

#фишка дня

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

Что это значит на практике?

Это значит, что если вы сделали space-between или space-around чтобы выровнять элементы по двум сторонам, вам не нужно точное их количество чтобы забить всю сетку для последней строки.

Ну то есть, последняя строка из двух элементов не должна «расползаться», элементам просто нужно встать в начало.

Достаточно поставить «распорку» в виде псевдоэлемента: https://codepen.io/alinaki/pen/KKRzMdz

Не делайте, как фейсбук, пожалуйста: https://t.me/htmlshit/387

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

#css #flex

#библиотека дня

Если есть понятие семантики, где элементы HTML представляют собой то, чем являются, то может, классы в CSS не так уж и нужны?

И таки да!

Парни из https://simplecss.org/ и https://native-elements.dev/ так и считают. Можно построить вполне себе полноценный сайт, не написав ни единого класса.

Как тебе такое, тейлвинд?)

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

Впрочем, к теме. Это, конечно, не единственные варианты. Вот целый список: https://github.com/dbohdan/classless-css

Мыслите шире, котаны!

#css #framework

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

Иногда случается ситуация, когда никак иначе, кроме как парсингом страниц, данные не собрать.

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

Тогда я воспользовался https://github.com/cheeriojs/cheerio, написав простой скрипт на node.js. Это как jQuery, но для Node.js. Разобрал данные и сохранил в JSON.

Оказывается, есть и более кондовые утилиты.

Например, https://github.com/mgdm/htmlq и https://stedolan.github.io/jq

Первый, как нетрудно догадаться, может обработать HTML, а второй — JSON. И всё из командной строки :)

Например, найти все ссылки на странице:

curl --silent https://www.rust-lang.org/ | htmlq --attribute href a

Можно и просто целые куски HTML выдирать, и селекторы использовать. А дальше — все возможности командной строки и скриптов для обработки.

Ну а jq может стать частью вашей CI/CD системы, разгребсти ответы от API GitHub, например, и выдать их в читаемом виде.

#tools #html #json #cli

#ловушка дня

Короче, народ. Если вы, как и я, начали испытывать проблемы сборки node-sass на разных платформах и перешли на sass (aka dart-sass), у меня новость:

Нас поимели.

Суть проблемы: dart-sass заменяет номера мнемоник HTML в контенте псевдоэлементов (entity, сущности, ascii-представление Unicode-символов) на, собственно, Unicode-символы. Но есть нюанс.

Нюанс в том, что он это делает насильно и возможности отключить нет: https://github.com/sass/dart-sass/issues/1219

Начиная с версии 1.54 они вынесли добавление @charset “UTF-8” или BOM-символа в собранные файлы в отдельный пункт конфигурации (charset, включено по умолчанию), но…

Опять нюанс.

И здесь уже нам поднасрал Webpack и его css-loader. Они убирают и charset и BOM-символ при очередной сборке файлов, чтобы правильно склеить результирующий CSS.

А обратно не ставят 🤬

Решений проблемы несколько: или использовать css-unicode-loader чтобы конвертировать Unicode снова в ASCII, или webpack-utf8-bom чтобы насильно добавить BOM-символ в начало, или PostCSS чтобы вернуть charset, или менять сборщик.

Почему это проблема?

1. Иконочные шрифты теперь отданы на откуп автодетектору UTF-8 в браузере. И поверьте, оно не всегда верно работает.
2. Всякие zero-width пробелы и прочие непечатные и неразрывные символы теперь неотличимы друг от друга в коде (ну сравните \200B и “”).

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

#css #scss #sass

#заметка дня

Тоже считаете, что поведение dart-sass и их мэнтейнеров не является логичным?

Можно пойти и поставить «большие пальцы» в этот issue на GitHub: https://github.com/sass/dart-sass/issues/568, в котором люди просят добавить флаг для вывода результирующего CSS в ASCII, без конвертации в Unicode.

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

Тем временем, отвлечёмся. То тут то там спрашивают о конфиге Webpack. Мол, поделиться.

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

Для начала надо понять, что вебпак собирает всё, что ты ему скормишь, в один большой JS-файл. Это была изначальная идея. Даже точка входа не index.html, а index.js.

Отсюда пошла концепция «загрузчиков»: css-loader, font-loader, svg-loader… чтобы можно было просто импортировать разные виды файлов прямо в JS.

Когда файлы импортированы и внедрены в JS — настаёт время их оттуда извлекать. И тут начинается время т. н. экстракторов: css-extract-plugin, text-extract-plugin, assets-extract-plugin…

Вот вокруг этой логики и крутятся все конфиги. Это и дикая мощь, и не менее дикие проблемы.

Да, в Webpack 5 концепция чуток поменялась, но лишь чуток.

Мы живём в 2022 году, есть шикарные инструменты сборки вроде Vite, Parcel. Gulp тоже никуда не исчезал. Генераторы статичных сайтов типа 11ty и Enhance тоже прекрасно справляются с работой.

Например, точкой входа в Vite является index.html, сразу становится логичным, в случае мультистраничного сайта, просто добавить несколько файлов HTML в конфиг, а Vite сделает остальное. А уж генераторы сайтов и подавно под это заточены.

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

Ни у кого не получается. И у всех получается.

#webpack

#фото дня

И будет ещё много, котаны. Я на конференции React Finland.

Первый доклад дня — «What do engineers, kintsugi and stained glass, and lotuses and clocks have in common?» — максимально медитативный. О том, как не потерять себя в постоянно меняющемся мире.

Если коротко: заиметь хобби за пределами компа и высыпаться.

Ну что я могу сказать… Let the merch hunt begin!

#react #conference

#фото дня

Тем временем, Nicola Corti рассказывает о новой архитектуре React Native.

Быстрее, выше, сильнее, Hermes, автогенерация кода на TypeScript и Kotlin. Но пока не на Swift.

Надо попробовать. Три года туда не лез. Если честно, проект на React Native был причиной переезда в Финляндию: я просто задолбался работать на российские рекламные агентства; уровень некомпетентности менеджеров там зашкаливал и наверняка зашкаливает до сих пор.

Но приложение вышло забавное, конечно. С ним было интересно.

#react #native