#заметка дня

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

Наверняка многим из вас знаком инструмент 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, о чём я говорил в предыдущей заметке. Но разработчики интересно использовали это в совокупности с @media aspect-ratio.

После поговорим о шлюзах и более сложной математике расчётов размеров шрифта и блоков.

#css #postcss #rem #vw #vh

Написала на css-live о цветах вообще и о цветах в css в частности
https://twitter.com/cssliveru/status/1367475154624925699

#codepen дня

Мне сегодня захотелось поделиться одной своей старой работой на WebGL: https://codepen.io/alinaki/pen/NWbBbEG

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

Во всяком случае, благодаря этой работе я узнал о прекрасной библиотеке для составления подобных: https://github.com/vonWolfehaus/von-grid

Там же, кстати, есть ссылка на математическое описание шестиугольных сеток: https://www.redblobgames.com/grids/hexagons/

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

#webgl #three #hexagonal

#ссылка дня

Никита Голубов из CSSSR выкатил отличный тред про личный опыт использования гридов. От общей разметки страницы до умного адаптива и наложений.

Если Твиттер вы не любите, всё любезно собрано на GitHub Gist.

#codepen дня

Когда-то воксели казались будущим компьютерной графики, но стали Майнкрафтом :)

И вот у вас есть уникальная возможность нарисовать двумерную картинку и экструдировать (добавить глубины) её в HTML-воксели, вот так вот неожиданно: https://codepen.io/jcoulterdesign/full/vYyzZdo

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

CodePen превращается из простой песочницы в настоящую социальную сеть со своими рок-звёздами и крутыми инструментами.

#ссылка дня

Казалось бы, что может быть проще 100%? Но это не совсем так.

От чего рассчитываются 100%? Как говорят англоязычные, it depends. По-русски – “зависит от”. Косноязычно как-то, но уж как есть.

В общем, держите прекрасный интерактивный пост от Амелии Ваттенбергер: https://wattenberger.com/blog/css-percents

Красиво, удобно, понятно.

#css #percent #width #height #position

#заметка дня

Я попробую максимально кратко затронуть больную для многих тему оценки своей работы. Речь пойдёт о проектных заказа, не о зарплате. Я заранее предупреждаю: писать буду о банальных, возможно даже наивных для опытных разработчиков вещах.

Итак, я предполагаю, что вы уже определились со стоимостью часа или вам спустили эту стоимость «сверху». Ваш следующий шаг и весь жизненный цикл проекта теперь будет описываться одним словом: смета.

Звучит как что-то древнее. По факту же, скорее, вечное.

Считаем, что у вас имеются техническое задание, техтребование или хотя бы макеты в JPG. Ваш следующий шаг – декомпозиция. Разбиение на части.

На этом моменте сразу приложу пример черновой сметы: https://docs.google.com/spreadsheets/d/1YYx142Og8XSQMiZgITbqEUNYAnn8LMV0Sivsx6m2dz0/edit?usp=sharing

Доступ открыт по ссылке с возможностью комментирования.

Лично я любил декомпозицию покрупнее: по подпунктам каждого пункта ТЗ или же буквально по экранам (макетам). Покрупнее – из-за специфики деятельности на тот момент: требования к проектам быстро менялись.

Совокупность макета и пункта техзадания даёт гораздо более точную оценку, что логично. Колонка «Дни» всегда округляется в большую сторону. Если возникают сомнения в оценке пункта – оцениваете пункт отдельно на соседнем листе таблицы, не стесняйтесь.

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

Да, я осознаю, что упускаю из виду тот факт, что все работают с разной скоростью. У кого-то на условную шапку уйдёт час, а у кого-то два.

Но ребят, это и есть задача сметы, а конкуренцию никто не отменял.

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

Любое сомнение в оценке трактуйте в большую сторону. Всегда добивайтесь наиболее чёткого ТЗ или хотя бы максимального числа комментариев в смете.

Ну и вы всегда можете воспользоваться методом небезызвестного Бобука: возьмите своё время и умножьте его на π/2. Плюс две недели.

Потому что за две недели можно сделать любой проект.

#работа #оценка #смета

#ссылка дня

Испанский стыд. Когда делает кто-то другой, а стыдно тебе.

Держите немного свежевыжатого: https://www.htmhell.dev/

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

Постарайтесь не найти там себя 😉

#html #css #htmhell

#фишка дня

Ну признайтесь, вы же тоже совсем не сразу узнали о том, что у background-repeat помимо, собственно, нескольких вариантов repeat и no-repeat есть ещё space и round?

А ещё что можно использовать двухпараметровый синтаксис для задания повторения по осям?

Во времена, когда есть MDN, такие вещи, конечно, лежат на поверхности: https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat

Но многие так и учат по примерам, как деды завещали.

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

#css #background #image

#статья дня

Ну что, пришло время продолжить нашу CSS-in-JS сагу. Наконец-то пришло время поговорить о Styled Components.

Буквально – стилизованные компоненты. Можно дальше не читать.

Шучу. Там немного побольше.

#css #js #react #styledcomponents

#фишка дня

Не забывайте помогать своим пользователям вводить нужные данные. Используйте атрибут inputmode на полях ввода: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode

Особенно неприятно, когда просят ввести числа, а открывается полная клавиатура. Уж ввод e-mail пережить как-то можно 😊

#css #html #mobile #keyboard

#codepen дня

Анна Тюдор (Ann Tudor) – одна из крутейших разработчиков на CodePen. Я крайне рекомендую ознакомиться с её работами, если вам интересен CSS с математической стороны.

Она зачастую снимает видео о процессе создания своих работ, и вот случился казус: алгоритмы YouTube посчитали одно из недавних видео содержащим сцены сексуального характера. Ну на самом деле, миниатюру. Анна сообщила об этом в своём Твиттере.

Ну да, логично. Что может быть сексуальней CSS-искусства.

#css #art #youtube #video

#игра дня

GDPR и 153-ФЗ сделали из нас джедаев согласия с условиями cookies и обработки данных. Я лично создавал десятки различных окошек соглашений, утомительное и бестолковое занятие.

Но так ли ты хорош в отбивании претензий на личную жизнь?

Попробуй себя: https://cookieconsentspeed.run/

#статья дня

Я много раз начинал и забрасывал статью о том, как справляться с рутиной. Но писать статью — это не в чате «деда» включать. Всё-таки важная штука — аудитория.

Впрочем, здесь мне помогут Александр Беспоясов, Вадим Юмадилов и Андрей Романов. Фамилия Беспоясова должна быть вам знакома – он отметился в Солидбуке.

Итак, какие вопросы разбираются в их лонгриде Фронтенд — это не больно:
— Как решать задачи, а не писать код
— Как не умереть в пиксель-перфекте
— Как вести диалог с дизайнерами

Можно, конечно, просто посоветовать перестать ныть и начать вникать, но это будет слишком грубым описанием этой прекрасной работы.

И обязательно обратите внимание на прикреплённые к статье материалы. В них есть всё.

#work #frontend #psychology

#фишка дня

Глядите-ка, Chrome DevTools теперь показыают колорпикер на пользовательских свойствах с цветом!

#chrome #devtools #css #color

#фишка дня

Иногда возникает задача поставить перевод строки после строчного (inline) элемента. Без <br/>, без преобразования элемента в блочный.

На помощь приходят псевдоэлементы.

Значение свойства content — «\A» — это Unicode-символ 0x00000A, который, внезапно, являет собой перевод строки.

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

Что это даёт? Ну, например, на десктопе можно показать перевод строки, а на адаптиве – убрать его, очистив content. Конечно, это можно сделать и скрытием <br/>, но мы уже решили, что он лишний.

#css #tricks #unicode #after #newline

#ссылка дня

В мире явно не хватает ресурсов с иконками. Особенно с SVG-иконками. Держите ещё один: https://www.svgrepo.com/

Все изображения свободные и/или бесплатные (естественно, уважайте лицензии). Удобный поиск, коллекции. Иконки можно сохранять (в local storage, аккаунт не нужен).

#svg #icons #icon #catalog

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

Псевдо-класс :is штука очень и очень новая (пользователи Firefox в этот момент презрительно хмыкают).

Но она уже в релизах всех основных браузеров!

Вы только представьте, теперь можно писать так:

.content :is(h1, h2) {}

...даже в querySelector! Больше никаких глупых ошибок синтаксиса, когда вы забыли два раза написать селектор.

Горячо нами любимый Ван Дамм, который Брамус, делится тремя вещами, которые обязательно нужно помнить при работе с :is:

1. Он прощает ошибки
2. Его специфичность равна специфичности самого «тяжёлого» аргумента.
3. Он не работает с псевдо-элементами. Пока.

Сама статья:
https://www.bram.us/2021/03/19/three-important-things-you-should-know-about-css-is/

Ну и вдогонку — калькулятор специфичности, пусть будет. Правда, о существовании :is он пока не знает, зато вот :not ведёт себя точно так же.

#баг дня

Я не знаю, кому в 2021 году приходит в голову интересоваться лимитом CSS на селекторы и правила в практическом смысле, но всё же.

Да, IE < 9 не поддерживал больше 4096 правил в одном файле. Это уже много, но можно было подключить второй файл и продолжить.

Так вот, к багу дня. В Chrome есть проблема восьмилетней давности: https://bugs.chromium.org/p/chromium/issues/detail?id=481273

Перевожу: если число селекторов в строке одной композиции больше 4096, «лишние» — проигнорируются. Пример: http://jsfiddle.net/WdyBE/58/

Я понятия не имею, зачем это чинить. Разработчики Chrome, похоже, тоже.

#css #limit #chrome #ie

#заметка дня

Если у вас есть селектор с префиксом и без префикса, например :-webkit-autofill и :autofill или селекторы с разными префиксами (-moz-, -webkit-), никогда не пишите так:

:-webkit-autofill, :autofill {}


Весь селектор станет невалидным. Нужно или разделять их на два разных блока, или же использовать :is:

:is(:-webkit-autofill, :autofill) {}

К сожалению, с псевдоэлементами такое (:is) не прокатит. Так что пишите ваши правила для, например, ::-webkit-progress-bar и ::-moz-progress-bar раздельно.

К счастью, подобное приходится проворачивать всё реже. Правила и селекторы с префиксами сейчас довольно редки.

#css #is #prefix #vendor