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

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

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

Тогда я воспользовался 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

#заметка дня

Вы же не думали, что я оставлю вас наедине с функциями расчёта относительных единиц? :)

Правильно, это продолжение заметок https://t.me/htmlshit/1182 и https://t.me/htmlshit/1183.

Наверняка многим из вас знаком инструмент PostCSS. Если нет – рекомендую, ведь об Autoprefixer вы уж точно слышали.

Так вот, те, кому знаком, могли подумать: «А нельзя ли мне просто верстать в пикселях и не задумываться больше ни о чём, пусть машина всё сама делает?». И это была совершенно верная мысль!

Существует как минимум два весьма популярных PostCSS-плагина: postcss-px-to-viewport и postcss-pxtorem. У каждого примерно по полторы тысячи звёзд на гитхабе, но не в звёздах дело.

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

Да, вы не ослышались: вы верстаете как обычно, за результат отвечает постобработка.

Как я уже упоминал, для мобильных устройств vw просто прекрасен и практически лишён недостатков – так почему бы не конвертировать пиксели автоматически именно для них, запустив обработку на мобильном CSS?

Ну или оставить шрифт в пикселях, а размеры в vw (удобно для тулбаров, например, посмотрите как просмотровщик PDF в Chrome реагирует на зум, но сделан он иначе).

Или не дать размеру уменьшиться ниже определённого значения – тоже вполне себе вариант.

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

P. S. Кому хочется посмотреть на весьма интересную реализацию адаптивности на vw+em, обратите внимание на https://uaz.ru/. Но делать так не надо! Зум у них сходит с ума, потому что на html шрифт указан в vw/vh в зависимости от ситуации, о чём я говорил в предыдущей заметке. Но разработчики интересно использовали это в совокупности с @media aspect-ratio.

P. P. S. Если вам интересно дальше обсудить возможности шлюзов/адаптивной типографики — не забывайте реагировать на пост и оставлять комментарии.

#css #postcss #rem #vw #vh

#такое дня

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

Итак, 4 (да ведь?) сезон. У них там изобретение Интернета и прочие развлечения из конца 80-х. Конкретно — 1986 год. Так к чему же придираемся?

Смотрим на скриншот из сериала и загибаем пальцы:

- BMP: 1987
- зона .yu: 1989
- HTML: 1993
- атрибут style: 1997
- PNG: 1996
- Flexbox: 2009
- srcset: 2013

Ничо так ребята, широко размахнулись.

Какие ещё фильмы с подобным несоответствием можно вспомнить?

#ссылка дня

Наверное немного странно кого-то убеждать в том, что CSS Grid это технология настоящего, а не будущего. Но тем не менее, такие люди всё ещё находятся.

Если вам встретятся они на пути – перешлите это видео.

А ещё это напоминание о мощности CSS Grid и о ситуации, когда он действительно нужен (а не для того, чтобы создавать пять элементов одинаковой ширины в строке).

Ссылка: https://www.reddit.com/r/css/comments/foqeek/css_grid_is_awesome/

#css #grid

#фишка дня

На мобильных устройствах 100vh работает совсем не так, как хочется: значение включает в себя панели браузера. Но решение есть! Несколько.

Когда-то один только этот пост принёс мне не один десяток подписчиков. Пришло время обновить. Виталий (канал Просто Разработка) принёс из Твиттера Никиты Голубова новое решение и оно прекрасно работает!

Естественно, реальность немного сложнее, чем иллюстрация, но это уже большой шаг вперёд.

#css #100vh #viewport #height

#фишка дня

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

IMG — замещаемый (replaced) элемент. Его (тега) содержимое будет замещено, собственно, изображением. Поэтому ни о каких “добавочных” сущностях речи не идёт.

Единственный случай, когда вы можете добавить псевдоэлементы ::before и ::after на изображение – когда никаких данных не получено. Короче говоря, состояние ошибки.

Вот так:
https://codepen.io/alinaki/pen/BaLaPKy

Посмотрите на изображение игральных костей в в примере, никакого фона за ними нет, а если и есть — ваш браузер игнорирует спецификацию.

Бонус: если изображению задать цвет/размер шрифта, эти правила применятся к альтернативному тексту.

Бонус 2: можно применить before только к тем изображениям, что действительно не загрузились. Добавьте обработчик события onerror и навесьте на изображение нужный класс: onerror="this.classList.add('error’)”, voila!

#css #js #img

#статья дня

Не так давно по многим ресурсам катком прошлась статья про использование тригонометрии в вёрстке: https://tympanus.net/codrops/2021/06/01/trigonometry-in-css-and-javascript-introduction-to-trigonometry/

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

Но они не применили ничего из этого в CSS-анимациях, хоть и привели пример на canvas. Так что пришло время расчехлить наше всё.

Вашему вниманию предлагается… прыгающая коробочка: https://codepen.io/alinaki/pen/GbxrwO

Если вы ездили поездами РЖД, она может быть вам знакома по их Wi-Fi порталу. Но там-то просто гифка, а тут — магия SCSS.

Я решил не использовать библиотеку math для SCSS и реализовал тригонометрические функции по известным алгоритмам, SCSS вполне себе позволяет такое.

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

Итого, «физически правильно» прыгаем по косинусу и пружиним по синусу :)

Школьная тригонометрия вам о таком использовании не рассказывала, уверен.

#css #trigonometry #animation

#видео дня

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

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

https://www.youtube.com/watch?v=CMlXUS6e46w

#video #img #png #jpg #webp

#статья дня

На сайте increment.com вышла отличная статья о том, почему CSS получился… таким.

Технический директор W3C Крис Лиллей (Chris Lilley) рассказывает о причинах некоторых неожиданных, необычных и откровенно странных решений, которые привели CSS к тому виду, что мы имеем сейчас.

https://increment.com/frontend/ask-an-expert-why-is-css-the-way-it-is/

#css #w3c

«Неаккуратно как-то», — говорили они…

Подписываясь на крупные промо-проекты, будьте крайне осторожны, котаны :)

#threejs #promo

#ссылка дня

GreenSock, создатели широко известной библиотеки для анимации GSAP, решили закрыть разом все вопросы по работе со скроллом. Эффекты? Нате. Анимация? Нате. Параллакс? Их есть у меня. Анимировать SVG? Без проблем. Даже WebGL завезли.

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

Меньше слов, больше ссылок:

https://greensock.com/st-demos/

P. S. Библиотека GSAP имеет весьма развесистое лицензирование, но условия бесплатного использования покрывают даже некоторые коммерческие применения. В любом случае, идеи — бесценны.

#gsap #css #js #scroll #animation

#ссылка дня

Вот так вот ноябре 2011 года мы занимались адаптивной вёрсткой.

Три устройства, три разных платформы. Android, webOS и iOS.

И на всех трёх — браузеры, основанные на WebKit. И на Android явно проблемы.

Было забавно наблюдать в последующие года, как Chrome завоёвывал рынок, кастомные WebKit-браузеры на устройствах исчезали (впрочем, китайские телефоны до сих пор ставят что-то своё), а Safari стремительно отставал.

Впрочем, в последние пару лет Safari умудрился догнать и перегнать Chrome по скорости ввода новых фич. Например, вот новости с прошедшей WWDC 2022: https://webkit.org/blog/12824/news-from-wwdc-webkit-features-in-safari-16-beta/

Container Queries, Subgrids, Flexbox Inspector, WebPush на iOS (ого!), Animation offset path…

Неплохо стреляют.

#safari #ios #macos #wwdc

#статья дня

Тот случай, когда статья шестилетней давности не потеряла ни капли актуальности. Превращаем GIF в SVG и анимируем с помощью CSS: https://cssanimation.rocks/buffer/

1. Как векторизовать изображение (трейсинг).
2. Как разбить анимацию на составляющие (метод таймлайна).
3. И как, собственно, реализовать на ключевых кадрах.

Обратите внимание: временная шкала рисуется руками. Это очень удобно и наглядно, практически как графическое решение уравнения. Сразу понятны все проблемы. Если интересно — давайте обсудим, как конкретно это реализовывать.

Классика вечна :)

#css #svg #gif #animation

#такое дня

Мир изменился. Сегодня хороним Internet Explorer: https://www.theguardian.com/technology/2022/jun/15/microsoft-to-retire-internet-explorer-browser-and-redirect-users-to-edge

Не могу я сказать, что в мире IE трава была зеленее. Вообще нет.

Да, кто-то и дальше будет поддерживать IE11 или даже ниже. Сил вам, котаны.

А мы побежали дальше.

#ie #microsoft

#статья дня

Давай сегодня тему пошире. Если ты работаешь с проектами крупнее одного лендинга за раз, или более того — с продуктами, резко встаёт вопрос целесообразности внедрения той или иной фишки.

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

А вот потом начинается производственный ад. Виной которому менеджеры продукта.

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

в один пост не вместилось, далее… ⏭

А формула проста, и имя ей RICE-фреймворк.

Берём коэффициенты:

Reach: сколько людей будет затронуто, число
Impact: насколько сильно,0.25, 0.5, 1, 2, 3
Confidence: степень уверенности в этом, в процентах
Effort: сколько сил потребуется, любое положительное число, сторипоинты, человеко-месяцы, часы; что угодно используемое в конторе

И считаем: (R*I*C)/E. Больше число — больше уверенности в успехе. Или как минимум в целесообразности начала разработки.

А вот что такое готовность и успех можно поговорить позже.

Правда это всё не включает Developer’s Enjoyment 🥲

Подробнее тут: https://hello.ducalis.io/knowledge-base/rice-scoring-prioritization-framework

#статья, а заодно и #инструмент, дня

Я очень люблю заказывать себе и другим футболки с разными глупыми и не очень рисунками. Очень часто найти оригинал изображения не представляется возможным по разным причинам. В наличии только хреновенький растр.

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

Обынчо залетаешь в поиск с запросом "image to vector online" и там уже выбираешь между хорошим и бесплатным. Когда не лень, можно побаловаться консольными утилитами вроде http://potrace.sourceforge.net/ или условными Inkscape, люстрой, дровами.

И вот Томас Штайнер взял Potrace, собрал его под WebAssembly и выдал SVGcode. По пути не преминув запилить целую статью: https://web.dev/svgcode/

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

Да и сам SVGCode весьма хорош :)

#svg #pwa #trace

#такое дня

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

В Вильнюсе у нашей компании есть офис, и тимлидов отправили туда на, простите, тимбилдинг.

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

Вылет ожидался в 17:40. Нас посадили в автобус, мариновали 20 минут, выгнали обратно в терминал. Рейс перенесли на 20:00.

А после — отменили. Пришло письмо, что переносят на 05:45 утра, с пересадкой и тремя часами простоя в Риге. Ну ок, поужинали, пошли получать отель и ваучеры.

Ага, хуяучеры.

Сотрудники не знали вообще ничего. Даже пытались нас убедить, что вылет по UTC. Прекрасное.

В итоге, заселились в отель сами к 11 часам, такси вызвали сами. Естественно, даже официальные таксисты в Вильнюсе до последнего делают вид, что оплату картой не принимают. Требуют налички.

В три часа ночи выдвинулись обратно в аэропорт. На сей раз платили кэшем (нас семь человек), но поскольку все такси были вызваны заранее, цены просто удивили — 8 и 6 евро. Да, аэропорт в городе и ехать десять минут, но в Хельсинки ты за эти деньги разве что в это самое такси только сядешь.

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

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

UTC, блин. Всю жизнь буду помнить.

Берегите себя, котаны :)

#статья дня

В честь официального прекращения поддержки IE вспомним неожиданно прекрасную статья о том, как делали сайты тогда: https://habr.com/ru/company/ruvds/blog/564300/

«Когда?», — спросите вы. «Тогда», — отвечу вам я. Потому что уж слишком долго IE6 задержался на олимпе браузеров и доживал своё ещё век.

В общем, автор решил повторить интерфейс Facebook теми средствами, что были доступны тогда. Под IE6, соответственно.

Получилось прекрасно, всплакнул.

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

Рекомендую. 11 из 10.

#ie6 #facebook #css #layout

#статья дня

Не так давно я узнал два новых слова: суперэллипс (ну ок, это я и раньше знал) и квадруг.

Ага, квадруг. Squircle. Т. е. фигура между квадратом и кругом, но не просто квадрат со скруглёнными углами. Кроме шуток: https://en.wikipedia.org/wiki/Squircle

Так вот, иконки приложений на iOS — квадруги. Сквирклы, если хотите. Хотя очень многие путают их с обычным сопряжением прямой с окружностью (ага, с border-radius).

В общем, от слов к статье: https://medium.com/@nikolskayaolia/an-easy-way-to-implement-smooth-shapes-such-as-superellipse-and-squircle-into-a-user-interface-a5ba4e1139ed

Вообще, тема оптических иллюзий в иконках и логотипах крайне интересна. И очень часто и квадраты не квадраты, и круги не круги…

Найду статью на эту тему — скину. Ну или пишите, если хотите примеров.

#ios #illusion