#статья дня
#перевод #css #html

Пару-тройку месяцев назад вышла отличная статья Уны Кравец (Una Kravets): “Ten modern layouts in one line of CSS”.

Я очень не согласен со словом “modern” (современные), потому что, например, трёхколоночная раскладка с шапкой и подвалом (“святой грааль” вёрстки) появилась не вчера и не десять лет назад. Решению без таблиц тоже сильно больше десяти лет. То же касается и различных сеток.

Но факт есть факт: при помощи display: grid можно буквально в одну строку реализовать не только “Святой грааль”, но и множество других вариантов. Мне больше всего понравился clamp.

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

Ссылка на перевод: https://habr.com/ru/post/522880/

Ссылка на оригинал: https://web.dev/one-line-layouts/

​​#инструмент дня
#css #img #placeholder

Помните пост про плейсхолдеры для ваших проектов и CodePen-ов? https://news.1rj.ru/str/htmlshit/431

Помимо задачи поставить временное изображение, существует и задача отобразить что-то, пока грузится основная картинка. Для этого можно или поставить серое поле, или применить различные техники под общим названием LQIP — Low Quality Image Preview. Название пошло вот от этого проекта: https://github.com/zouhir/lqip

Есть решение LQIP на базе SVG, оно так и называется, SQIP: https://github.com/axe312ger/sqip (но произносится сквиб, спросите у Гарри Поттера, почему так).

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

И вот на сцену выходит компания Wolt со своим решением под названием BlurHash: https://blurha.sh/. Ссылка на GitHub: https://github.com/woltapp/blurhash

Оно генерирует максимально размытое изображение на базе хеша вида: LEHV6nWB2yk8pyo0adR*.7kCMdnj (для генерации используется ограниченный набор из 83 доступных символов) и рисует его в canvas. Плагины есть под любые мыслимые средства, от Gulp и Eleventy до Flutter.

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

​​#codepen дня

#css #game #trick

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

Построй маяк до наступления ночи! Кликайте по ячейкам с домиками.

https://codepen.io/ivorjetski/pen/OJXbvdL

Мой MacBook это еле переваривает, но оно работает и даже увлекает за счет великолепной анимации и идеи вообще. Кстати, качество графики тоже можно изменить — в меню справа. Всё как у больших!

​​Субботняя #фишка дня

Наверное все знают, что у Google есть анимированные и интерактивные «дудлы» (doodle, ну, интерактивный логотип, грубо говоря). Но вот не всем известно, что в зависимости от результатов поиска можно найти пасхальное яйцо.

Вот что я сегодня увидел:
1. Введи в строку поиска «Wizard of oz»
2. Кликни по красным башмачкам 👠
3. А теперь по торнадо 🌪

Не благодарите :)

​​#инструмент дня
#noscript #path

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

Я уже выкладывал интересный инструмент для понимания процесса создания SVG и его элементов: path, polygon, polyline и т. д. “для самых маленьких”: https://news.1rj.ru/str/htmlshit/392

Пришло время для ещё одного. Этот инструмент позволяет понять создание сегментов кривой по шагам, включая перемещение пера (M), кривые безье (C), дуги (арки, A) и линии (L). Всё раскидано по координатам и уложено в сетку. Можно менять конкретные числа, а можно — подёргать реперные точки мышкой и увидеть изменение кривой.

https://yqnn.github.io/noscript-path-editor/

#статья дня
#css #html #перевод

Ахмад Шадид (Ahmad Shadeed, который не раз всплывал здесь и ещё много раз всплывёт, я уверен) неделю назад выкатил очередную статью. На этот раз – о важности учитывания высоты в разработке сайтов.

https://ishadeed.com/article/responsive-design-height/

Разработчики часто забывают, что посетители редко используют весь доступный экран. Не только по ширине, но и по высоте. А мода в современных макетах диктует вольготное использование вертикального пространства, но с обязательным условием: “Всё должно влезать в один экран!”. Это, коненчо, бред, но мода есть мода.

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

Статья есть в переводе на Хабре: https://habr.com/ru/company/skillfactory/blog/524996/

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

#codepen дня

#css #game

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

Встречайте: The Caretaker. A pure CSS horror.

https://codepen.io/jcoulterdesign/pen/WNxjVbW

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

Наверное немного странно кого-то убеждать в том, что CSS Grid это технология настоящего, а не будущего. Но тем не менее, такие люди всё ещё находятся.

Если вам встретятся они на пути – перешлите это видео.

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

https://www.reddit.com/r/css/comments/foqeek/css_grid_is_awesome/

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

#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://news.1rj.ru/str/htmlshit/416

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

Не так давно я ссылался на статью о том, в чём же разница между наложением маски и обрезкой: https://news.1rj.ru/str/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 #appsnoscript #ide #javanoscript

Сколько областей применения 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-noscript/google-apps-noscript-ide

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