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

#css #transitions #animation

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

Встречайте: AnimXYZ,
https://animxyz.com/.

Подход простой: вы указываете нужную комбинацию трансформаций, таймингов, уровней прозрачности, последовательность проигрыша прямо в классах и ставите атрибут xyz. Остальное она сделает за вас: объединит их и проиграет в нужный момент.

Основная моя к ней претензия – атрибут xyz. Для меня остаётся загадкой, почему нельзя использовать валидные data-атрибуты. С другой стороны, в React и Vue такой проблемы у вас не появится вообще.

Я считаю, что ей можно дать шанс. Особенно если вы создаёте различные баннеры.

#заметка дня
#twitter #типографика #баг

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

Оказывается, это – болгарица. Иначе – болгарская кириллица. Болгарица была призвана увеличить идентичность болгарской письменности и отделить её от остальных кириллических алфавитов: https://ru.wikipedia.org/wiki/%D0%91%D0%BE%D0%BB%D0%B3%D0%B0%D1%80%D1%81%D0%BA%D0%B0%D1%8F_%D0%BA%D0%B8%D1%80%D0%B8%D0%BB%D0%BB%D0%B8%D1%86%D0%B0_(%D1%82%D0%B8%D0%BF%D0%BE%D0%B3%D1%80%D0%B0%D1%84%D0%B8%D0%BA%D0%B0)

Так вот дело в том, что Твиттер иногда ошибается и ставит русскоязычным твитам признак болгарского языка (lang=“bg”), отчего и происходит сей казус. Вообще, я с трудом могу понять, как можно спутать русский с болгарским, но в Твиттере явно сидят люди, которым нет дела до этого.

А ещё в iOS Safari до версии 14.3 болгарица отображается для всего шрифта Monserrat, у кого айфоны – можете проверить: https://codepen.io/alexeyten/full/QWNYqLK (там и хороший пример болгарицы имеется)

Честно говоря, мне болгарица не нравится. Выглядит вторично для обоих алфафитов, пусть даже намерения были самые благие. Ну а Твиттеру – просто позор.

#codepen дня
#css #variables #custompropetries #переменные

Кто-то хотел посмотреть на тормозящий рендеринг без использования холста, скриптов и WebGL? Я вам принёс :)

И тема самая что ни на есть новогодняя: бумажные снежинки. Да-да, буквально имитация вырезанных из бумаги снежинок и звёзд: https://codepen.io/michellebarker/pen/YzGEJoX

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

А вот для изучения особенностей – это пожалуйста. Всё максимально просто и понятно.

#фишка дня

#chrome #reload #cache

⌘/Ctrl-R и ⌘/Ctrl-⇧-R знают все: перезагрузка и перезагрузка без кеша. Но в Chrome можно открыть веб-инспектор (средства разработчика в народе) и подержать кнопку перезагрузки подольше чтобы увидеть смешную третью опцию: перезагрузка после очистки кеша.

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

Но я обычно просто включаю “Disable cache” во вкладке Network чтобы вообще забыть о проблемах с кешем. Главное потом сделать cachebust у пользователей, если ваши средства сборки и деплоя этот процесс не автоматизируют.

#заметка дня

#html #shadowDOM #chrome

Продолжаю эксплуатировать тему Shadow DOM.

Многим, возможно, известно, что в какой-то момент развития HTML разработчики браузеров и стандартов решили, что HTML должен описывать не только структуру, но и внешний вид документа. Так появились теги font, marquee, center, strike, listing, dir, menu.

Но дело-то в том, что для тега marquee — бегущей строки — не было предложено никакой альтернативы. Предполагалось, что бегущая строка (или контент вообще) будет добавлена в CSS, но этого не произошло. В итоге нам приходится выдумывать комбинацию из transform translate или ключевых кадров. Не без проблем.

Каким же удивлением стало для меня, что тег marquee вполне себе развивается! В движке Blink (Google Chrome) его переписали на Shadow DOM и забавно смотреть на внутренние поддерживаемые правила CSS.

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

Страница на MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee

Пример (взят, собственно, с MDN):
https://codepen.io/alinaki/pen/dypdMEr

P. S. приятно видеть, что сообщество людей, которым интересен мой канал, растёт. Некоторые из них имеют свои каналы или только начинают. Поддержим же один из новеньких: https://t.iss.one/sharknessIT и посмотрим за его развитием.

​​#подкаст дня

#podcast #video #react #en

Все подводят итоги года, а мы с коллегой Ари-Пеккой Копонен (A-P Koponen) записываем подкаст. На английском языке.

Ари-Пекка – Senior Front-end Engineer в компании Supermetrics, в которой я уже больше года работаю. Весьма опытный разработчик, который с удовольствием делится опытом.

В первом выпуске подкаста Frontend Greatness мы обсуждаем статью о файловой структуре проектов на React, которая пропагандирует “доменный” подход: https://www.robinwieruch.de/react-folder-structure

Это моё первое появление на публике в видеоформате. И несколько неожиданное для меня самого. Но дальше будет больше.

Упомянутые в подкасте ссылки:
https://lea.verou.me/
https://web.dev/
https://kentcdodds.com/

Feature Slices:
https://sova.dev/application-structure/

Atomic Design:
https://atomicdesign.bradfrost.com/

Сайт подкаста:
https://www.frontendgreatness.com/

Видео:
https://youtu.be/v7dsfjXD7Dw

#статья дня

#scss #styledcomponents #emotion #cssinjs #posh

Я тут узнал слово новое, точнее, аббревиатуру: POSH. Plain old semantic HTML. Забавно, но я эту аббревиатуру вообще впервые слышу… Ну да ладно, речь не об этом.

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

Конечно же приверженцы БЭМ скажут: модификатор ставь. И закроют вопрос.

Эээ, погодите… но на этом моменте нам придётся уйти в Телеграф, потому что Телеграм вертел все мои потуги выкатить исходный код.

Там вы узнаете про магию кеширования родительских селекторов (нет, обратных селекторов всё ещё не подвезли).

https://telegra.ph/Keshiruem-selektory-zdes-i-sejchas-01-07

#баг дня

#chrome #scroll #smooth

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

Сначала это делали на JS/jQuery:

$(‘html, body’).animate({scrollTop: 0}, 2000);

Потом появилось нативное CSS-решение:

html {
scroll-behavior: smooth;
}

…и все вздохнули спокойно. Но не тут-то было.

При включённом плавном скролле поиск по странице в Chrome тоже начинает скроллить плавно от результата к результату. Это, мягко говоря, выглядит тошнотворно. И является даже зарегистрированным багом: https://bugs.chromium.org/p/chromium/issues/detail?id=866694

А пока, чтобы не вызывать у ваших пользователей приступов рвоты, можно воспользоваться следующим решением:

html:focus-within {
scroll-behavior: smooth;
}

Правда, теперь придётся добавить якорям tabindex=“-1”, иначе они тоже будут вне фокуса и анимации не будет.

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

P. S. кривое форматирование кода в Telegram меня убивает. Придётся ускорить работу над сайтом канала.

​​​​​​#странное дня

Я честно говоря не очень хотел бы подобные темы в канале поднимать, но суббота в конце-концов и мне кажется, что это слишком смешно и вполне нам подходит.

В общем, как вы знаете, в США творится некоторое дерьмо. Сторонники Трампа захватывают Капитолий, вокруг этого сразу вырастает тонна конспирологических теорий, Симпсоны в очередной раз предсказали будущее, а Твиттер с Фейсбуком блокируют аккаунты всё ещё действующего президента и его агрессивных сторонников, которые же тем временем занимают другую соцсеть — некий Parler (о котором я вообще сегодня впервые услышал).

Но это всё мизансцена. Драма, имеющая непосредственное отношение к теме нашего канала, начинается здесь.

Google и Apple в срочном порядке удаляют приложение Parler из своих сторов, Parler предлагает своим пользователям воспользоваться режимом PWA: Progressive Web App.

Агрессивные сторонники Трампа воют в тредах и пишут, что они не собираются пользоваться чем-то, что имеет в названии слово Progressive (sic!). Progressive — значит, левое. И наоборот. А у демократов нынче как раз левая повестка. Когда им предлагают прочитать в Википедии что это такое, они заявляют, что не доверяют “коммунистической” Википедии. Разрастается скандал.

В общем, ребят, мне добавить нечего.

#ссылка дня

#css #flex #flexbox #tutorial

Кажется, этому миру не хватает ещё немного обучающих диаграмм и статей по флексбокс-модели вёрстки. Вот подвезли ещё одну: https://semicolon.dev/tutorial/css/complete-css-flex-tutorial

Достаточно подробно и аккуратно расписано, но следует в очередной раз предупредить: это лишь шпаргалка. И как любая шпаргалка, она приносит больше пользы автору, нежели читателю.

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

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

Но лучше самим идти и пробовать все примеры.

​​#codepen года

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

Встречайте, самые залайканные кодпены за 2020 год! Учитывались не только лайки на работах, но и на самих авторах.

Мой любимый синтезатор Roland там тоже имеется, вот и ссылочка на пост с парой статей о процессе создания, если кто забыл: https://t.iss.one/htmlshit/430

https://codepen.io/2020/popular/pens/

#разочарование дня

#google #appscript

Помните, я писал недавно об онлайн-IDE от Google для их языка разработки расширения GSuite — AppsScript? Вот и ссылка: https://t.iss.one/htmlshit/475

Нам обещали улучшенный деплой, тестирование, полновесный редактор с отладчиком…

И вот сегодня я увидел её в деле. Стоит ли говорить, что я вернулся на старую версию спустя пять минут?

Не работало ничего. А нет, вру. Запуск функций работал.

Информация о проекте? Ошибка 500. Версионирование? Отсутствует. Конфигурация деплоя? Не загружается. Список опубликованных версий? Тоже не загружается. Отладка предыдущего движка? Не работает. Публикация API? Отсутствует.

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

Хотя, было глупо ожидать, что Google выпустить что-то работающее, а не бета-версию. Будем забрасывать их отзывами.

#ссылка дня

В последние два дня наблюдается довольно необычное увеличение числа подписчиков на канале. Официальная статистика поднимает бэклог, а бот и сервисы – показывают прямое увеличение.

Дамы и господа новоприбывшие, я напоминаю, что у канала имеется свой чат где вполне помогут разобраться с вашими проблемами с вёрсткой – @htmlshitchat.

И было бы интересно узнать, откуда вы узнали о канале, не стесняйтесь оставлять комментарии!

Добро пожаловать на канал!

P. S. представителям GeekBrains – моё отдельное спасибо.

#заметка дня

#css #html #pp #pixelperfect

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

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

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

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

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

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

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

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

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

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

​​#codepen дня

#clippath #css #customproperties

Помните прекрасные снежинки, от которых охлаждение вашего ноутбука начинало завывать? Напомню: https://t.iss.one/htmlshit/480

В общем, я тут целый их конструктор откопал!

Красивее способа выучить clip-path и пользовательские свойства (переменные), наверное, ещё не придумали.

https://codepen.io/michellebarker/pen/VwKdONM

​​#ссылка дня

#oop #solid

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

В чате канала (@htmlshitchat) проскочило желание почитать об объектно-ориентированном программировании (ООП). Выражено оно было довольно абстрактно, но всё же попробую.

Если бросить в студента книгу Паттерны проектирования за авторством “Банды четырёх” и отойти в сторону, можно долго наблюдать за агонией. Но это слишком жестоко, потому пойдём по пути более общих рекомендаций.

Подход ООП, вне зависимости от того, следуете вы ему или нет, позводяет проектировать системы на языке, близком к языку бизнес-правил. Это снижает вероятность ошибки при переводе с «языка бизнеса» на «язык разработки» и наоборот.

В определённый момент на пути любого разработчика встретится понятие, рождённое в ООП-мире: SOLID. Можно, опять же, сходить в Википедию и почитать, что это такое, а можно воспользоваться отличным ресурсом Солидбук.

Авторы, Саша Беспоясов и Артём Самофалов, объясняют пять принципов, образующих SOLID, на понятных примерах, а в конце каждой секции имеется краткий опросник (флешбеки из школьных времён).

Личный сайт Беспоясова я вообще горячо рекомендую: загляните в раздел Проекты, вам понравится.

#фишка дня

#google #chrome #css #aspectratio

В Chrome 88 добавили многими ожидаемое правило для установки необходимого соотношения сторон блокам. Так и называется: aspect-ratio.

.poster {
aspect-ratio: 16/9;
}

Конечно же это правило появилось не только что, а с 84 версии находилось за флагом. Firefox тоже поддерживает только за флагом, а Safari пока не собирается. Так что число 56.25% будет ещё долго нас преследовать:

.poster::before {
content: ‘’;
display: block;
padding-top: 56.25%;
}

Да-да, именно так это приходится делать сейчас: 9 / 16 x 100% = 56.25%. Буквально — устанавливать распорку. Поля в процентах рассчитываются от текущей ширины блока, что позволяет нам провернуть такой трюк. В принципе, можно проделать то же самое на абсолютных единицах вроде vw, оставим в качестве упражнения.

Более подробно о свойстве aspect-ratio и его применении можно прочесть в списке изменений по ссылке выше, в MDN или в черновике спецификации.

Естественно, есть и postcss-плагины, их много и я затрудняюсь выбрать лучший, потому ссылок не будет, но в итоге все они приводят ваш код к примеру с padding-top выше.

А у Виталия новое видео. Про софт-скиллы. Немного помог ему с редактурой. Самые внимательные, впрочем, и так поймут 😅

Итак, первое видео в новом году на канале!

https://youtu.be/GS96Hvrx5wU

#фишка дня

#html #button #label

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

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

Но не все знают, что лейбл можно повесить и на элемент button: https://codepen.io/alinaki/pen/XWjLedQ

Да, возможно, кнопке свой ярлык не нужен и даже MDN сообщает нам об этом, но!

Но в лейбл можно добавить дополнительную информацию, которая будет однозначно и семантично связана с кнопкой и поможет, например, скринридерам или при создании тултипа.

Лейблом можно продублировать кнопку без внесения лишней когнитивной нагрузки (но не стоит, фокус он не примет). Пожалуй, для каких-нибудь игровых интерфейсов вполне может быть приемлемо.

А вот если вы не используете кнопки и балуетесь role=“button” на div-ах (в лучшем случае) — этой возможности вы лишены в принципе.