#заметка дня

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

Правильно, это продолжение заметок https://t.iss.one/htmlshit/1182 и https://t.iss.one/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" и там уже выбираешь между хорошим и бесплатным. Когда не лень, можно побаловаться консольными утилитами вроде https://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

#codepen дня

В чём секрет производительных анимированных градиентов?

В том, что их не надо анимировать!

Анимировать градиент через установку background-position, кейфреймы на цвета или пользовательские свойства, конечно, можно. Но это будет вызывать излишние перерисовки (repaint), читаем.

Работать-то будет: https://codepen.io/P1N2O/pen/pyBNzX

А что лучше? Так старый добрый transform. Не на фон, конечно же, а на псевдоэлемент, его содержащий. Его и двигайте. Давайте что-нибудь запилим прям щас.

Например, очередной лоадер на этой неделе: https://codepen.io/alinaki/pen/zYGvWYN

Одним градиентом рисуем полоски, второй — запихиваем в псевдоэлемент и двигаем его.

Ну вроде ок, не? Кто сделает на шейдерах?

P. S. впрочем, иногда можно и пользовательскими свойствами долбануть по всем фронтам: https://dev.to/afif/we-can-finally-animate-css-gradient-kdk

#css #gradient #performance

#заметка дня

Один из самых проблемных вопросов верстальщиков — не обязательно начинающих — это так называемый “пиксель пёрфект” (pixel perfect). Проще говоря, свёрстанный макет должен полностью соответствовать дизайну вплоть до последнего пикселя.

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

Но всё немного интереснее.

Давайте сразу определимся: правильно свёрстанный макет точен до пикселя по умолчанию. Точка.

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

У блока стоят поля и отступы по 16 пикселей? Нет ни одной причины ставить 15, чтобы «было легче считать» (и такое бывает), а потом проходить по всему макету заново. Ставьте сразу 16, а чтобы помочь себе — пользуйтесь расширениями для браузера, например https://www.welldonecode.com/perfectpixel/

Конечно, так можно дойти до крайности. Я много раз видел как люди бездумно копируют размеры из Sketch, Avocode или Figma, наивно полагая, что уж кому как не им знать о размерах и положении. Это самая большая ошибка, и я уж молчу о том, что редакторы зачастую ставят абсолютное позиционирование всему подряд.

Будьте заранее готовы к тому, что макет – живой. Выделенный блок делится на секции? Используйте проценты во флексах или fr в гридах, делите его относительными единицами. Дизайнер поставил 63 px? Это явно дрогнула рука, не используйте нечётные значения никогда, округляйте до ближайших x4 (в данном случае — 64). Во всех размерах должна просматриваться логика, не могут три кнопки в ряду иметь один размер, а четвёртая – другой.

Почему кратно четырём? Потому что округление в пределах четырёх пикселей вполне укладывается в общепринятое понятие точной вёрстки, но на крайний случай у вас останется ещё как минимум два уровня деления. А при использовании нечётных значений transform или устройства с полуторной плотностью экрана дадут вам размытую картинку (к счастью, последние версии браузеров эту проблему часто решают за нас).

В скором времени я попробую затронуть тему вёрстки изначально неудобных макетов: что делать если вам выдали макет в 1920 пикселей, а большинство ноутбуков до сих пор имеют 1366 и как вести диалог с дизайнером и заказчиком в такой ситуации.

#css #html #pp #pixelperfect