#ссылка #инструмент дня

#css #tailwind #atomic

Можно по разному относиться к Tailwind.css, но он закрывает потребности многих разработчиков веб-конструкторов и UI-китов. Что уж говорить, я его терпеть не могу, как Ъ-верстальщик, но мы рассматриваем его как фреймворк для разработки нашего собственного набора виджетов.

Список нововведений весьма логичен и не революционен. Решения для форм — спорные, но работающие (хаки, если уж говорить прямо). Дропнули поддержку IE11. Ввели расширенную и более приятную цветовую палитру.

https://youtu.be/3u_vIdnJYLc

https://blog.tailwindcss.com/tailwindcss-v2#utility-friendly-form-styles

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

#заметка дня
#chrome #devtools #console

Чтобы скопировать вывод консоли, например, ответ сервера – не нужно делать JSON.stringify(response) перед выводом в лог.

Достаточно кликнуть правой кнопкой мыши по данным, и выбрать “Store as global variable”. В ответ получим название временной переменной (temp1, temp2 и так далее).

Дальше просто пишем в консоль copy(temp1) и бам – данные попадают в буфер обмена, откуда уже их можно вставить в свои моки.

#codepen дня
#css #3d #transform

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

Объём CSS-кода минимален для того, чтобы понять, как работают 3D-преобразования и перспектива. JS-код в свою очередь даёт элементарные понятия о взаимодействии с камерой. Не думаю, что кто-то сделает это проще и меньше.

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

https://codepen.io/ge1doot/pen/yLJwBrm

#заметка дня

#css #js #img

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

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

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

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

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

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

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

#заметка дня

#html #form #input #validation

Bram Van Damme aka Bramus (олды тут? уже только за одну фамилию стоит подписаться на его CodePen) напоминает: input[type=“email”] поддерживает не только валидацию одного адреса электронной почты, но и даёт возможность вписать и провалидировать несколько адресов, введённых через запятую. Достаточно лишь указать атрибут multiple. убедитесь сами: https://codepen.io/bramus/pen/LYRGjmX

Кому подходит браузерная валидация – welcome!

Немного коллаборации ещё никогда никому не мешало. Смотрим видео и подписываемся на каналы Виталия :)

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

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

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

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

Не так давно я ссылался на статью о том, в чём же разница между наложением маски и обрезкой: https://t.iss.one/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 в своё время последовала этим же путём (и благополучно сдохла, впрочем).

Интересное в этом то, что в спецификации не говорится прямым текстом о разнице между контентом и областью, окружающей контент, что и позволяет различным движкам поступать по-своему:
https://www.w3.org/TR/CSS2/visufx.html#overflow-clipping
https://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.iss.one/sharknessIT и посмотрим за его развитием.