#инструмент дня
Иногда случается ситуация, когда никак иначе, кроме как парсингом страниц, данные не собрать.
Я не говорю сейчас о рипах с сайтов конкурентов. У меня была ситуация – надо было собрать списки магазинов небольшой сети, которые просто валялись по разным региональным шаблонным ресурсам.
Тогда я воспользовался https://github.com/cheeriojs/cheerio, написав простой скрипт на node.js. Это как jQuery, но для Node.js. Разобрал данные и сохранил в JSON.
Оказывается, есть и более кондовые утилиты.
Например, https://github.com/mgdm/htmlq и https://stedolan.github.io/jq
Первый, как нетрудно догадаться, может обработать HTML, а второй — JSON. И всё из командной строки :)
Например, найти все ссылки на странице:
Можно и просто целые куски HTML выдирать, и селекторы использовать. А дальше — все возможности командной строки и скриптов для обработки.
Ну а jq может стать частью вашей CI/CD системы, разгребсти ответы от API GitHub, например, и выдать их в читаемом виде.
#tools #html #json #cli
Иногда случается ситуация, когда никак иначе, кроме как парсингом страниц, данные не собрать.
Я не говорю сейчас о рипах с сайтов конкурентов. У меня была ситуация – надо было собрать списки магазинов небольшой сети, которые просто валялись по разным региональным шаблонным ресурсам.
Тогда я воспользовался 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
GitHub
GitHub - cheeriojs/cheerio: The fast, flexible, and elegant library for parsing and manipulating HTML and XML.
The fast, flexible, and elegant library for parsing and manipulating HTML and XML. - cheeriojs/cheerio
👍13🔥4
#ловушка дня
Короче, народ. Если вы, как и я, начали испытывать проблемы сборки node-sass на разных платформах и перешли на sass (aka dart-sass), у меня новость:
Нас поимели.
Суть проблемы: dart-sass заменяет номера мнемоник HTML в контенте псевдоэлементов (entity, сущности, ascii-представление Unicode-символов) на, собственно, Unicode-символы. Но есть нюанс.
Нюанс в том, что он это делает насильно и возможности отключить нет: https://github.com/sass/dart-sass/issues/1219
Начиная с версии 1.54 они вынесли добавление
Опять нюанс.
И здесь уже нам поднасрал 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
Короче, народ. Если вы, как и я, начали испытывать проблемы сборки 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
👍11🤔3🤬2😱1
#заметка дня
Тоже считаете, что поведение 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
Тоже считаете, что поведение 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
👍13
#обмен дня
А кто какие клавиатуры использует? Делитесь фотками.
У меня вот ноут с финской раскладкой, но я дополнительно выгравировал интернациональные спецсимволы. Плюс Magic Keyboard какого-то недавнего поколения.
На обеих раздражает блок стрелок. А Esc на макбуке я замапил на символ параграфа. Весьма нативно получилось.
Не фанат механических, высокие они все :)
А вы?
А кто какие клавиатуры использует? Делитесь фотками.
У меня вот ноут с финской раскладкой, но я дополнительно выгравировал интернациональные спецсимволы. Плюс Magic Keyboard какого-то недавнего поколения.
На обеих раздражает блок стрелок. А Esc на макбуке я замапил на символ параграфа. Весьма нативно получилось.
Не фанат механических, высокие они все :)
А вы?
👍12👎1
#фото дня
И будет ещё много, котаны. Я на конференции React Finland.
Первый доклад дня — «What do engineers, kintsugi and stained glass, and lotuses and clocks have in common?» — максимально медитативный. О том, как не потерять себя в постоянно меняющемся мире.
Если коротко: заиметь хобби за пределами компа и высыпаться.
Ну что я могу сказать… Let the merch hunt begin!
#react #conference
И будет ещё много, котаны. Я на конференции React Finland.
Первый доклад дня — «What do engineers, kintsugi and stained glass, and lotuses and clocks have in common?» — максимально медитативный. О том, как не потерять себя в постоянно меняющемся мире.
Если коротко: заиметь хобби за пределами компа и высыпаться.
Ну что я могу сказать… Let the merch hunt begin!
#react #conference
🔥12❤1👍1
#фото дня
Тем временем, Nicola Corti рассказывает о новой архитектуре React Native.
Быстрее, выше, сильнее, Hermes, автогенерация кода на TypeScript и Kotlin. Но пока не на Swift.
Надо попробовать. Три года туда не лез. Если честно, проект на React Native был причиной переезда в Финляндию: я просто задолбался работать на российские рекламные агентства; уровень некомпетентности менеджеров там зашкаливал и наверняка зашкаливает до сих пор.
Но приложение вышло забавное, конечно. С ним было интересно.
#react #native
Тем временем, Nicola Corti рассказывает о новой архитектуре React Native.
Быстрее, выше, сильнее, Hermes, автогенерация кода на TypeScript и Kotlin. Но пока не на Swift.
Надо попробовать. Три года туда не лез. Если честно, проект на React Native был причиной переезда в Финляндию: я просто задолбался работать на российские рекламные агентства; уровень некомпетентности менеджеров там зашкаливал и наверняка зашкаливает до сих пор.
Но приложение вышло забавное, конечно. С ним было интересно.
#react #native
❤10
#фото дня
Я думаю, описание докладов вы и без меня глянете на сайте конференции. Могу лишь сказать, что SolidJS это просто какая-то пушка 💥
Учитывая, что архитектура моего приложения позволяет пихать туда что угодно (на языке профессионалов это называется «микрофронтенды»), я точно попробую виджеты на SolidJS в работе.
Ну а пока вы только посмотрите, какие шикарнейшие иллюстрации были подготовлены организаторами к каждому докладу 😍.
Они ещё и к таймингу привязаны и анимируются по ходу презентации!
Просто потрясающе :)
#react #conference
Я думаю, описание докладов вы и без меня глянете на сайте конференции. Могу лишь сказать, что SolidJS это просто какая-то пушка 💥
Учитывая, что архитектура моего приложения позволяет пихать туда что угодно (на языке профессионалов это называется «микрофронтенды»), я точно попробую виджеты на SolidJS в работе.
Ну а пока вы только посмотрите, какие шикарнейшие иллюстрации были подготовлены организаторами к каждому докладу 😍.
Они ещё и к таймингу привязаны и анимируются по ходу презентации!
Просто потрясающе :)
#react #conference
🔥12👍3
#фото дня
Перед началом второго дня, пришло время показать официальный мерч конференции.
Мерч спонсоров в этот раз довольно скучный — наклейки, светоотражающие брелки и браслеты, пакеты с конфетами и заглушки веб-камер.
Вот заглушки веб-камер вообще штука за гранью логики. Они мешают полностью закрыть ноутбук, оставляя щель. Стоит тебе чуть больше надавить на крышку — в рюкзаке, например — и экран трескается. Случаи были, но люди упорно продолжают их ставить. Не личные ноуты же :)
Впрочем, вернёмся к мерчу. Официальные подарки конференции простые, но подчёркнуто финские.
Это шоппер из переработанных материалов useBag(), пакет сушеной голубики useBlueberries() и полотенце из льна и хлопка. Не самое дешевое, к слову. Очень приятное.
На вышивку useTowel() сил уже не хватило 🤭
Пиво, кстати, тоже забрендировали: useHelles(). Посмотрим, будут ли на афтепати коктейли useMartini()…
#react #conference
Перед началом второго дня, пришло время показать официальный мерч конференции.
Мерч спонсоров в этот раз довольно скучный — наклейки, светоотражающие брелки и браслеты, пакеты с конфетами и заглушки веб-камер.
Вот заглушки веб-камер вообще штука за гранью логики. Они мешают полностью закрыть ноутбук, оставляя щель. Стоит тебе чуть больше надавить на крышку — в рюкзаке, например — и экран трескается. Случаи были, но люди упорно продолжают их ставить. Не личные ноуты же :)
Впрочем, вернёмся к мерчу. Официальные подарки конференции простые, но подчёркнуто финские.
Это шоппер из переработанных материалов useBag(), пакет сушеной голубики useBlueberries() и полотенце из льна и хлопка. Не самое дешевое, к слову. Очень приятное.
На вышивку useTowel() сил уже не хватило 🤭
Пиво, кстати, тоже забрендировали: useHelles(). Посмотрим, будут ли на афтепати коктейли useMartini()…
#react #conference
👍22🔥6👎2😁2
#фото дня
Уж простите мне эту слабость, но без фото кусочка афтепати никак нельзя. Опять же, все весьма по-фински, арендовали целый клуб, но бар — снаружи, на террасе внутреннего двора. Так сказать, почувствовать всю финскую осень сразу.
Завтра выкачу максимально полезный контент с конференции. Для тех, кто хочет строить свою дизайн-систему и ничего не упустить в процессе. Не переключайтесь :)
…а я пойду согреюсь джином с тоником 🥃
Уж простите мне эту слабость, но без фото кусочка афтепати никак нельзя. Опять же, все весьма по-фински, арендовали целый клуб, но бар — снаружи, на террасе внутреннего двора. Так сказать, почувствовать всю финскую осень сразу.
Завтра выкачу максимально полезный контент с конференции. Для тех, кто хочет строить свою дизайн-систему и ничего не упустить в процессе. Не переключайтесь :)
…а я пойду согреюсь джином с тоником 🥃
👍29🍾4👎1🖕1
#ссылка дня
Что-то затянулась вечеринка, я еще вчера это обещал.
Что делает дизайн-систему — завершённой? Я бы даже сказал, цельной?
Сколько последних штрихов нужно, чтобы откинуться на спинку кресла и сказать: «Вот теперь точно всё»?
Так вот, Варя Степанова прошлась по всем известным дизайн-системам и собрала все эти самые последние штрихи на одной Miro-доске: https://miro.com/app/board/uXjVPXCoofw=/
Удивительного объема работа. После представления на конференции я полез сам на доску и прошёлся по ссылкам и примерам. Чего и вам настоятельно рекомендую.
Очень жаль, что организаторы не успели выкатить иллюстрацию к ней :)
#designsystem #mindmap
Что-то затянулась вечеринка, я еще вчера это обещал.
Что делает дизайн-систему — завершённой? Я бы даже сказал, цельной?
Сколько последних штрихов нужно, чтобы откинуться на спинку кресла и сказать: «Вот теперь точно всё»?
Так вот, Варя Степанова прошлась по всем известным дизайн-системам и собрала все эти самые последние штрихи на одной Miro-доске: https://miro.com/app/board/uXjVPXCoofw=/
Удивительного объема работа. После представления на конференции я полез сам на доску и прошёлся по ссылкам и примерам. Чего и вам настоятельно рекомендую.
Очень жаль, что организаторы не успели выкатить иллюстрацию к ней :)
#designsystem #mindmap
Twitter
"Complete design system" — all in one design system documentation features gathered into one miro board :-) #designsystems for #ReactFinland
https://t.co/mrFjjA6pux
https://t.co/mrFjjA6pux
🔥6👍1
#статья дня
Что самое опасное может сказать фронтенд-разработчик, верстающий макет или готовящий ui-kit?
Опустим сейчас (несуществующее) разделение на настоящий и ненастоящий фронтенд.
Вот это:
— Я умею нормально называть классы, они у меня всегда уникальные!
Окей, дай мне гарантию, что ты не ошибёшься на десятке страниц, нескольких десятках комбинаций компонентов и все твои коллеги такие же смышлёные. Ещё скажи, в композицию умеешь и специфичность на лету посчитаешь.
Ребят, штуки вроде пространств имён, БЭМ, OOCSS, CSS-in-JS, CSS modules появились не потому что их разработчики глупы или ленивы. Они появились потому что все мы люди и толпа может быть как умнее одного человека, так и бесконечно глупее. Ок, если не глупее, то, как минимум невнимательнее.
Ведь подобная ситуация она везде, не только в вёрстке.
Ну вот давайте возьмём для примера Next.js. За базу там взяты CSS-модули, поэтому уже один только этот факт делает вопрос: «А css-модули уже устарели, да?», — некорректным.
Да, «гладить» фреймворк против шерсти не стоит. Да, создать глобальный класс для компонента способом, не предусмотренным документацией (созданием отдельного глобального скоупа) будет проблемой (То же самое касается и css-in-js).
Но зато насколько легче решаются остальные 99% задач!
Короче, чтобы вам сегодня сделать своё понимание кода и его сборки чуть лучше и заодно понять сопутствующие проблемы CSS-модулей горячо рекомендую эту статью: https://habr.com/ru/post/688844/
Как включить их в сборку, как типизировать. Зачем вообще типизировать и как экспорты по умолчанию всё портят.
Прекрасно и максимально понятно написано. Заодно скилл вебпака подтянете :)
#css #cssmodules #webpack
Что самое опасное может сказать фронтенд-разработчик, верстающий макет или готовящий ui-kit?
Опустим сейчас (несуществующее) разделение на настоящий и ненастоящий фронтенд.
Вот это:
— Я умею нормально называть классы, они у меня всегда уникальные!
Окей, дай мне гарантию, что ты не ошибёшься на десятке страниц, нескольких десятках комбинаций компонентов и все твои коллеги такие же смышлёные. Ещё скажи, в композицию умеешь и специфичность на лету посчитаешь.
Ребят, штуки вроде пространств имён, БЭМ, OOCSS, CSS-in-JS, CSS modules появились не потому что их разработчики глупы или ленивы. Они появились потому что все мы люди и толпа может быть как умнее одного человека, так и бесконечно глупее. Ок, если не глупее, то, как минимум невнимательнее.
Ведь подобная ситуация она везде, не только в вёрстке.
Ну вот давайте возьмём для примера Next.js. За базу там взяты CSS-модули, поэтому уже один только этот факт делает вопрос: «А css-модули уже устарели, да?», — некорректным.
Да, «гладить» фреймворк против шерсти не стоит. Да, создать глобальный класс для компонента способом, не предусмотренным документацией (созданием отдельного глобального скоупа) будет проблемой (То же самое касается и css-in-js).
Но зато насколько легче решаются остальные 99% задач!
Короче, чтобы вам сегодня сделать своё понимание кода и его сборки чуть лучше и заодно понять сопутствующие проблемы CSS-модулей горячо рекомендую эту статью: https://habr.com/ru/post/688844/
Как включить их в сборку, как типизировать. Зачем вообще типизировать и как экспорты по умолчанию всё портят.
Прекрасно и максимально понятно написано. Заодно скилл вебпака подтянете :)
#css #cssmodules #webpack
Хабр
Webpack + CSS Modules + TS = Love
Я считаю, что CSS Модули — это монументальный проект. С его помощью можно решить одну из худших проблем CSS — коллизию имен классов. Давайте рассмотрим простой пример, чтобы было понятно, о чем...
👍13👎2😁1
#codepen дня
Я тут начал смотреть в сторону каскадных слоёв, и пока, конечно, мозг малость ломается.
Думали, отладка CSS сложна? Это вы ещё не пробовали задать эти самые слои :)
Вот, прекрасный пример как легко и просто сломать все ваши представления о специфичности селекторов: https://codepen.io/dutchcelt/pen/wvmjKMK
Ух какой простор чтобы искать неиспользуемые классы…
Но! зато я теперь знаю, как заставить мой любимый атрибут hidden действительно хорошо работать. Без этих ваших !important.
Вроде уже стоит того :)
Я тут начал смотреть в сторону каскадных слоёв, и пока, конечно, мозг малость ломается.
Думали, отладка CSS сложна? Это вы ещё не пробовали задать эти самые слои :)
Вот, прекрасный пример как легко и просто сломать все ваши представления о специфичности селекторов: https://codepen.io/dutchcelt/pen/wvmjKMK
Ух какой простор чтобы искать неиспользуемые классы…
Но! зато я теперь знаю, как заставить мой любимый атрибут hidden действительно хорошо работать. Без этих ваших !important.
Вроде уже стоит того :)
🔥3👎1
South Hub — IT-кэмп в Сочи для СТО и тех, кто хочет ими стать
Когда?
6 – 8 октября
Где?
Красная Поляна, Сочи
Зачем?
Подняться на уровень выше. Профессионально и физически.
В отеле Novotel Congress соберутся 400 IT-руководителей, тех директора и CEO. На протяжении 3-х дней 45 спикеров будут делиться с участниками своим опытом и мыслями о будущем отрасли в формате лекций и бесконечного нетворкинга.
Помимо конференц-части гостей ждут зрелищные спортивные турниры в баскетбол, FIFA 23 PS 5 и Го, хайкинг по горам, утренние пробежки, много неформального общения, а также вечеринка на закате на высоте 2 200 метров.
Все подробности о кэмпе можно найти на сайте:
https://i.southhub.ru/Pubxk
Когда?
6 – 8 октября
Где?
Красная Поляна, Сочи
Зачем?
Подняться на уровень выше. Профессионально и физически.
В отеле Novotel Congress соберутся 400 IT-руководителей, тех директора и CEO. На протяжении 3-х дней 45 спикеров будут делиться с участниками своим опытом и мыслями о будущем отрасли в формате лекций и бесконечного нетворкинга.
Помимо конференц-части гостей ждут зрелищные спортивные турниры в баскетбол, FIFA 23 PS 5 и Го, хайкинг по горам, утренние пробежки, много неформального общения, а также вечеринка на закате на высоте 2 200 метров.
Все подробности о кэмпе можно найти на сайте:
https://i.southhub.ru/Pubxk
👍4👎1
😱23👍16👎8🔥2❤1😁1
#заметка дня
Кажется, я должен объяснение за позавчерашний опрос, да?
Давайте разбираться, почему же 1 превращается в \31.
Обратимся к спецификации. Поехали: https://www.w3.org/TR/2018/REC-selectors-3-20181106/
Сразу бахну на вас выдержку из лексической FLEX-нотации:
Что нас тут волнует? Нас волнует понятия идентификатора и стартовой последовательноти символов в селекторе, так и называются — ident и nmstart.
Как видим, nmstart это или a-z и символ подчёркивания, либо escape-последовательности (nonascii-символы в целом, Unicode), куда попадают и цифры, и математические символы и иероглифы.
Знак дефиса при этом зарезервирован под вендорные префиксы (помните такие? -ms-, -webkit-, -moz-), но его очень даже можно написать через escape-последовательность \- и использовать даже в селекторах по атрибуту — [att].
Итого, атрибут можно написать как _1 и так и использовать [_1], из одной цифры — 1 — только как escape-последовательность — [\31].
А можно как -1 — [\-\31] 🤪Удивительное рядом, короче.
К слову, зачем нужны такие атрибуты кроме разминки мозга? Как я уже сказал в комментариях к опросу, для экстремальной оптимизации, например.
Если результат работы какого-нибудь конструктора баннеров можно так соптимизировать — поверьте, он будет оптимизирован. Самому, наверное, не стоит, но всё же.
А если хочется почитать языком попроще — вот есть сравнительно свежая статья на Хабре: https://habr.com/ru/post/682844/
#css #unicode
Кажется, я должен объяснение за позавчерашний опрос, да?
Давайте разбираться, почему же 1 превращается в \31.
Обратимся к спецификации. Поехали: https://www.w3.org/TR/2018/REC-selectors-3-20181106/
Сразу бахну на вас выдержку из лексической FLEX-нотации:
ident [-]?{nmstart}{nmchar}*
name {nmchar}+
nmstart [_a-z]|{nonascii}|{escape}
nonascii [^\0-\177]
unicode \\[0-9a-f]{1,6}(\r\n|[ \n\r\t\f])?
escape {unicode}|\\[^\n\r\f0-9a-f]
Что нас тут волнует? Нас волнует понятия идентификатора и стартовой последовательноти символов в селекторе, так и называются — ident и nmstart.
Как видим, nmstart это или a-z и символ подчёркивания, либо escape-последовательности (nonascii-символы в целом, Unicode), куда попадают и цифры, и математические символы и иероглифы.
Знак дефиса при этом зарезервирован под вендорные префиксы (помните такие? -ms-, -webkit-, -moz-), но его очень даже можно написать через escape-последовательность \- и использовать даже в селекторах по атрибуту — [att].
Итого, атрибут можно написать как _1 и так и использовать [_1], из одной цифры — 1 — только как escape-последовательность — [\31].
А можно как -1 — [\-\31] 🤪Удивительное рядом, короче.
К слову, зачем нужны такие атрибуты кроме разминки мозга? Как я уже сказал в комментариях к опросу, для экстремальной оптимизации, например.
Если результат работы какого-нибудь конструктора баннеров можно так соптимизировать — поверьте, он будет оптимизирован. Самому, наверное, не стоит, но всё же.
А если хочется почитать языком попроще — вот есть сравнительно свежая статья на Хабре: https://habr.com/ru/post/682844/
#css #unicode
🤯12👍5🏆1