#статья дня
#css #clip #mask

Рейчел “наше всё“ Эндрю (Rachel Andrew) решила одним махом закрыть две темы: clipping и masking в CSS. Обрезка элемента по контуру и наложение маски. Они неразрывно связаны друг с другом, так что выпуск двух статей подряд был весьма оправдан.

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

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

https://web.dev/css-clipping/
https://web.dev/css-masking/

Ну и конечно же, не забываем канонiчную статью на CSS-Tricks: https://css-tricks.com/clipping-masking-css/

​​#заметка дня

#github #ghpages #tips

При работе с Github Pages мало кто заглядывает дальше раздела quick start. И вот очень зря.

Не претендую на полный список, но есть пара вещей, которые следует понимать всем.

1. Не начинайте названия каталогов и файлов с _ (подчёркивание), . (точка), # (октоторп) и не заканчивайте их ~ (тильда). С тильды, впрочем, начинать тоже не надо. Почему? Потому что гладиолус. Точнее, Jekyll. Именно его используют GH Pages для генерации ваших страниц: https://jekyllrb.com/docs/structure/ Пример с подчёркиванием — наиболее частый, не знаю, откуда взялась мода называть каталоги так. Для сортировки, видимо. Починить это, впрочем, легко — добавьте файл .nojekyll в ваш репозиторий.

2. URL — регистрозависимы. image.jpg и image.JPG — разные файлы. Это нарушает правила обработки URL, но у GH Pages есть право считать по-своему. Причина проста: GitHub должен поддерживать как регистрозависимые файловые системы, так и регистронезависимые. Поэтому постарайтесь придерживаться одного правила в именовании.

Делитесь вашими примерами, дополним заметку.

#пятница

Вечеру пятницы — пятничная тема. Для тех кому “за”: каталог скинов WinAmp. Гордого и непобеждённого. Каждый скин — шедевр своего времени, выверенный до пикселя.

https://skins.webamp.org/

Скины можно попробовать тут же в проигрывателе WebAmp, который является визуальным и функциональным клоном того самого.

Открытый код, кстати! Кому нужна работа с аудио — рекомендую к ознакомлению.

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

В копилку к разнообразным генератором SVG-фонов (https://news.1rj.ru/str/htmlshit/399) можно прибавить ещё один бронебойный инструмент: https://bgjar.com/

Волны, карта, полигоны (жаль, не анимируемые), различные паттерны. И всё это индивидуально настраивается (не только цвет и размер, но и, например, подсветка городов на карте).

Жаль не открытый код, посмотреть на генерацию некоторых вещей было бы интересно.

#фишка дня
#html

Минутка занимательных фактов на нашем канале.

Если в href ссылки вы укажете шестнадцатеричное число определённой длины, браузер распознает его его как набор октетов IPv4 (адрес, короче говоря, 127.0.0.1 и вот это вот всё).

<a href="http://0xacd916ae">IPv4</a>

Пример:
https://codepen.io/alinaki/pen/bGpyjoB

Не знаю, зачем это могло бы быть полезно. Экстремальная экономия байт? :)

P. S. есть древняя статья от 2002 года где таким образом обфуцировали ссылки. Ну, тоже вариант: http://www.pc-help.org/obscure.htm

Итак, в Телеграме появилась нативная поддержка тредов в чатах, а также комментариев и реакций в каналах.

Интересный вопрос — имеет ли смысл отключать группу от канала? Ведь для обсуждения насущных проблем есть более популярные места.


P. S. Оказалось, комментарии как раз к группе и привязываются, образуя независимые треды в основном потоке. Это не всем и не всегда удобно. Будем наблюдать, в общем.

https://vc.ru/social/162929-kommentarii-v-telegram-kanalah-vse-chto-nuzhno-znat

#codepen дня
#css #html #hamburger #menu

Время обеда, дамы и господа! Вашему вниманию тематическая (обед же) подборка анимаций кнопок переключения меню. Не гамбургером единым!

https://codepen.io/oliviale/pen/gKParr

Автор: Olivia Ng. Вообще, смело могу рекомендовать зафоловить её на Codepen, весьма свежие идеи и решения имеются в достатке.

Проверка комментариев

#ссылка дня
#gsap #css #js #scroll #animation

GreenSock, создатели широко известной библиотеки для анимации GSAP, решили закрыть разом все вопросы по работе со скроллом. Эффекты? Нате. Анимация? Нате. Параллакс? Их есть у меня. Анимировать SVG? Без проблем. Даже WebGL завезли.

В общем, они просто взяли и выложили подборку различных эффектов анимации по скроллу, добавили к каждому видео-предпросмотр и ссылку на CodePen.

Меньше слов, больше ссылок:

https://greensock.com/st-demos/

P. S. Библиотека GSAP имеет весьма развесистое лицензирование, но условия бесплатного использования покрывают даже некоторые коммерческие применения. В любом случае, идеи — бесценны.

​​#ссылка дня
#css #focus #a11y

Ну что же, мы ждали этого с момента первого явления CSS народу.

Не только же меня одного раздражает фокус на кнопках, не правда ли? Да, он помогает при навигации с клавиатуры, но он вообще не нужен по клику.

Создатели браузеров (особенно Firefox) делают всё, чтобы усложнить разработчикам сбросить стили фокуса по-умолчанию. Но заказчики-то, оказывается, тоже фокус не любят. И дизайнеры.

В итоге начинается… борьба умов. Попытки скрыть фокус по клику, но оставить по Tab-у. Скрипты, стили, лишние элементы.

На помощь приходит псевдокласс :focus-visible! Уже доступен в свежем Chrome 86, а в Firefox существует под именем :moz-focusring. Что он делает? Даёт доступ разработчику к управлению необходимостью применения стилей фокуса!

Сложно как-то получилось. Короче говоря, теперь можно прямо указать браузеру: примени эти стили только когда используется клавиатура.

Пример: https://codepen.io/matthiasott/pen/LYZEwBJ

А и собственно статья Маттиаса Отта (Matthias Ott): https://matthiasott.com/notes/focus-visible-is-here

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

#codepen дня

#css #transitions #keyframes

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

Впрочем, куда там без, кхрм, дискуссий.

Причина спора банальна: то, что одним кажется излишне сложным, другие видят как возможность. Ну и какая то часть из этих “других” всегда заявит о том, что тут даже скрипты не нужны и одних стилей достаточно. И, собственно, доказывают это:
https://codepen.io/cobra_winfrey/pen/OJXJeod

Тред: https://twitter.com/cobra_winfrey/status/1314040380908855297

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

#статья дня
#перевод #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) и бам – данные попадают в буфер обмена, откуда уже их можно вставить в свои моки.