Я давно уже должен был отснять это видео, но никак руки не доходили -)

Смотрим видос:
https://youtu.be/AdXKJT1qhgI

Читаем статью (и само-собой, подписываемся на канал):
https://t.me/htmlshit/416

#codepen дня
#svg #mask #color #gif

Не так давно я ссылался на статью о том, в чём же разница между наложением маски и обрезкой: https://t.me/htmlshit/444

В SVG эти возможности давно встроены в стандарт языка, поэтому можно достигать интересных иллюзий. А главное, весьма просто.

Но тут обнаружилось неожиданное – ведь маской может быть и анимированный GIF! Результат может быть потрясающим:
https://codepen.io/HighFlyer/pen/abbgowE

Для простоты вынесу исходники сюда.
Изображение: https://media.giphy.com/media/3o6ZsVW5Jwpg33DH56/giphy.gif
Маска: https://i.pinimg.com/originals/af/7a/54/af7a54ee1e628fe3326687fc2ac7f1ab.gif

Работает вся эта красота очень просто: через умножение цвета. Чёрный цвет в RGB кодируется как 000000 (0 красного и так далее). Всё, что угодно, умножить на ноль – равно нулю.  Таким образом, после наложения маски – её черные части будут прозрачны. И так далее вплоть до FFFFFF(255 255 255, белый), умножая любой цвет на него – получим оригинальный цвет.

Проще думать об этом как о диапазоне яркости (в случае маски – прозрачности) от 0 до 1, тогда сразу становится понятно:

0, 255, 255  →  0, 1, 1
255, 255, 0  →  1, 1, 0
0×1 = 0, 1×1 = 1, 1×0 = 0
0, 1, 0  → 0, 255, 0

#заметка дня

#firefox #css #bug #hack

Я немного уже отвык от того, что современные браузеры всё ещё могут принести сюрпризы там, где их не ждёшь. Сегодня такое принёс Firefox.

Нижнее поле (padding-bottom) в нём игнорируется при установке значения правила overflow в scroll или auto. Оказывается, принесли это поведение ещё 9 лет назад, в Firefox 12. Мотивация была следующей: “The layout is correct per the CSS 2.1 spec: padding is applied at the
content edge, not after any overflow”.

То, что спецификация иной раз может быть максимально нелогичной никого в команде Firefox не волновало ни тогда, ни сейчас. Возможно, это правильно и Opera в своё время последовала этим же путём (и благополучно сдохла, впрочем).

Интересное в этом то, что в спецификации не говорится прямым текстом о разнице между контентом и областью, окружающей контент, что и позволяет различным движкам поступать по-своему:
http://www.w3.org/TR/CSS2/visufx.html#overflow-clipping
http://www.w3.org/TR/CSS2/box.html#box-padding-area

Ссылка на обсуждение, весьма горячее, между прочим: https://bugzilla.mozilla.org/show_bug.cgi?id=748518

Так или иначе, отступ-то мне был нужен. Закончилось это добавлением псевдоэлемента ::after с высотой, равной паддингу. А кто-то просто оборачивает весь контент в блок и задаёт поля уже блоку. Мне такое не нравится, я не любитель избыточных обёрток.

#статья дня

#css #grid #calendar

Человека с ником Bramus (тот самый Ван Дамм, bram.us) я уже упоминал пару дней назад и вот он снова подвёз прекрасный материал.

Те, кто в вёрстке давно, могут помнить баталии на тему что же такое календарь: список или таблица? Я был приверженцем второго варианта, потому что привычный календарь – он ходит как таблица, ест как таблица и крякает как таблица (надеюсь, отсылку вы поймёте 🧐)

Так вот, Брамус заявляет: “Календарь – это сетка!”.

Семантически календарь это список дней, но для представления максимально логично использовать возможности CSS Grid.

https://www.bram.us/2020/12/08/a-calendar-in-three-lines-of-css/

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

В общем, на этом войне календарей должен быть положен конец.

Доступность – нужна всем. Залетайте на митап!

Accessibility Club Minsk Meetup #2 пройдёт онлайн 10 декабря в 19:00 (GMT+3). В программе четыре доклада: отдельные доступные версии, доступность SPA, SEO и доступность и ещё один.

Трансляция https://youtu.be/m3EStUvzSAs
Программа https://eventspace-by.timepad.ru/event/1502789/

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

#google #appsscript #ide #javascript

Сколько областей применения JavaScript вы можете сходу вспомнить? Браузер, node.js. Ну Electron, как их совокупность. ReactNative, возможно. Кто-то вспомнит Espruino – JavaScript для микроконтроллеров, потому что хайпа было достаточно. Кто-то — пользователи Linux, в основном – расширения для среды GNOME и GTK-приложения (да, их тоже можно писать на JS). Различные расширения для оперденей, написанных на технологиях Java, в банках.

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

И не просто в настольных офисных пакетах как MS Office и LibreOffice, но и расширения для Google Docs (Sheets, Slides, Forms), Google Data Studio (популярнейший инструмент для создания отчётов) и MS Office Online. Это может выглядеть как сайдбар или попап внутри самого приложения. И вокруг этих расширений выстроен весьма большой рынок (кому интересно — погуглите хотя бы компанию Supermetrics, в которой я и работаю).

В отличие от MS Office, Google предоставляет не только фронтенд и внешний API для работы расширений, но и бакенд. И бакенд этот работает на надмножестве языка JavaScript: Apps Script.

До недавнего времени он представлял собой крайне странную штуку: использовал JavaScript версии 1.7 с некоторыми вкраплениями ES6 и исполнялся синхронно в среде Rhino (JS-движок, наподобие V8, но на Java-технологиях).

Но уже несколько месяцев активно идёт его перевод на движок V8, который максимально приближает Apps Script к Node.js: использует последние возможности ESNext и работает гораздо быстрее. Правда, до сих пор не все возможности перенесены.

Так вот к чему это я. Google наконец-то объявил об обновлении своей web-IDE для Apps Script! Она теперь максимально напоминает современные VS Code и WebStorm в понимании процесса редактирования кода (включая даже мультикурсор), представляет нормальный отладчик и средства журналирования и вообще обещает сделать нашу жизнь намного удобнее: https://www.benlcollins.com/apps-script/google-apps-script-ide

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

​​#баг дня

#google #stackdriver #bug

Опять субботняя тема. Google очень забавно валидирует дату в своей системе журналирования Stackdriver. Вы не ошиблись, 31 октября 2020 года – невалидна, потому что число дней в месяце по мнению Google не может превышать 30.

#заметка дня

#html #safari #apple #autocorrect #autocomplete

Если вам кажется, что Apple много себе позволяет – вам не кажется.

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

Если вы когда-нибудь будете делать поле, требующее ввода кода (подтверждения, например), не забудьте выставить на поле input атрибут autocorrect=“off”. Иначе Safari будет пытаться исправить ваш текст, что далеко не всегда приятно.

Google уже ставит его на мобильной поисковой странице, можете даже проверить сами в веб-инспекторе. И скоро оно появится и в стандарте.

Ну и на закуску пара полезных значений атрибута autocomplete:

autocomplete=“off” отключает вышеупомянутое автоматическое заполнение полей
autocomplete=“one-time-code” – предзаполнит поле из SMS или push-уведомления.

И конечно же куда без ссылки на MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#Values

Помогайте пользователю правильно.

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

#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.me/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/

Сайт подкаста:
http://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

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

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

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

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