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

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


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://t.me/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. А теперь по торнадо 🌪

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

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

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

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

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

https://yqnn.github.io/svg-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!

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