​​#codepen дня

#clippath #css #customproperties

Помните прекрасные снежинки, от которых охлаждение вашего ноутбука начинало завывать? Напомню: https://t.iss.one/htmlshit/480

В общем, я тут целый их конструктор откопал!

Красивее способа выучить clip-path и пользовательские свойства (переменные), наверное, ещё не придумали.

https://codepen.io/michellebarker/pen/VwKdONM

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

#oop #solid

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

В чате канала (@htmlshitchat) проскочило желание почитать об объектно-ориентированном программировании (ООП). Выражено оно было довольно абстрактно, но всё же попробую.

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

Подход ООП, вне зависимости от того, следуете вы ему или нет, позводяет проектировать системы на языке, близком к языку бизнес-правил. Это снижает вероятность ошибки при переводе с «языка бизнеса» на «язык разработки» и наоборот.

В определённый момент на пути любого разработчика встретится понятие, рождённое в ООП-мире: SOLID. Можно, опять же, сходить в Википедию и почитать, что это такое, а можно воспользоваться отличным ресурсом Солидбук.

Авторы, Саша Беспоясов и Артём Самофалов, объясняют пять принципов, образующих SOLID, на понятных примерах, а в конце каждой секции имеется краткий опросник (флешбеки из школьных времён).

Личный сайт Беспоясова я вообще горячо рекомендую: загляните в раздел Проекты, вам понравится.

#фишка дня

#google #chrome #css #aspectratio

В Chrome 88 добавили многими ожидаемое правило для установки необходимого соотношения сторон блокам. Так и называется: aspect-ratio.

.poster {
aspect-ratio: 16/9;
}

Конечно же это правило появилось не только что, а с 84 версии находилось за флагом. Firefox тоже поддерживает только за флагом, а Safari пока не собирается. Так что число 56.25% будет ещё долго нас преследовать:

.poster::before {
content: ‘’;
display: block;
padding-top: 56.25%;
}

Да-да, именно так это приходится делать сейчас: 9 / 16 x 100% = 56.25%. Буквально — устанавливать распорку. Поля в процентах рассчитываются от текущей ширины блока, что позволяет нам провернуть такой трюк. В принципе, можно проделать то же самое на абсолютных единицах вроде vw, оставим в качестве упражнения.

Более подробно о свойстве aspect-ratio и его применении можно прочесть в списке изменений по ссылке выше, в MDN или в черновике спецификации.

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

А у Виталия новое видео. Про софт-скиллы. Немного помог ему с редактурой. Самые внимательные, впрочем, и так поймут 😅

Итак, первое видео в новом году на канале!

https://youtu.be/GS96Hvrx5wU

#фишка дня

#html #button #label

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

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

Но не все знают, что лейбл можно повесить и на элемент button: https://codepen.io/alinaki/pen/XWjLedQ

Да, возможно, кнопке свой ярлык не нужен и даже MDN сообщает нам об этом, но!

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

Лейблом можно продублировать кнопку без внесения лишней когнитивной нагрузки (но не стоит, фокус он не примет). Пожалуй, для каких-нибудь игровых интерфейсов вполне может быть приемлемо.

А вот если вы не используете кнопки и балуетесь role=“button” на div-ах (в лучшем случае) — этой возможности вы лишены в принципе.

​​#процесс дня

#brainstorm #workshop #design

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

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

После краткой презентации идеи и внутренних продуктов её реализации, нас разделили на группы и дали полтора часа на создание скелета нужной страницы. Во главе каждой из групп был поставлен эксперт из тех, кто занимался разработкой самой идеи: growth-менеджер, менеджер продукта, дизайнер и разработчик прототипа.

После чего каждая из групп представила своё видение на суд зрителей и отбивала вопросы.

Поскольку моими любимыми инструментами в работе до сих пор остаются блокнот и ручка, пришлось немного извернуться, чтобы не переносить набросок в Figma лишний раз, селфи-палка отлично справилась с задачей 😎

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

«Пришло время просить прощения и извиняться»™

В посте про aspect-ratio я написал, что Safari не собирается пока его внедрять. Это конечно же не так, меня смутил Can I Use.

Вчера вышел Safari Technology Preview 119, в котором не только появилась поддержка соотношения сторон, но и до кучи ещё множество различных исправлений CSS, например:
- Исправлен scroll-snap при прокрутке с клавиатуры
- добавлен псевдоэлемент ::file-selector-button (надо попробовать использовать)
- исправлено взаимодействие Flexbox-раскладки и sticky-позиционирования про переполнении
...и ещё много чего интересного в JS и WebAssembly. Не стесняйтесь читать логи изменений.

​​#возвращение дня

#habr

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

Охват у канала небольшой, а Телеграф не индексируется поисковиками, поэтому я решил попробовать перевыпустить оригинальную статью на Хабре и приглашаю вас её поддержать. Думаю, для Хабра ещё не всё потеряно :)

https://habr.com/ru/post/539680/

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

#img #upscaler #retina

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

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

Естественно, если исходники нашлись – нужно их и использовать. А вот если нет – на помощь придут нейросети.

Встречайте: UpscalerJS и реализованный на его основе Ojoy. Все расчёты проводятся на клиенте средствами Tensorflow.js.

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

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

#netlify #demo #sandbox

Я как-то уже говорил о замечательном инструменте ngrok. Ничего лучше для пробрасывания запросов в локальную сеть и наоборот не придумали. Мы в Supermetrics активно им пользуемся при разработке, поскольку завязаны на внешние сервисы.

Но речь сейчас о совсем ином сервисе предназначенном для немного иных целей. Дело в том, что для демонстрации проблемного кода в чатах оба подходят весьма неплохо.

И я говорю о Netlify, а точнее об их сервисе Netlify Drop.

Если Netlify сам по себе это полноценный CI/CD сервис, то Drop… это буквально то, что написано. Вы просто закидываете каталог с вашим сайтом и –ТААДААААМ! – он испарился. Шучу, он – выкатился в сеть, а вы получили ссылку для демонстрации. Кажется, ничего проще нет (GihHub pages проще, но лишь после настройки).

Можно зарегистрироваться и получить управление сайтом, подключить домен. HTTPS даётся изначально. Ну а дальше… возможности CI/CD весьма широки, ознакомиться не помешает.

В общем, отмазка “не могу же я запихать весь сайт в песочницу” больше не работает :)

​​#фишка дня

#svg #png #screenshot #devtools

Я, конечно, дико извиняюсь, но вчера я впервые сконвертировал SVG в PNG используя средства разработчика в Chrome.

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

Оказалось, в DevTools есть ошеломительная штука: “Capture node screenshot”. Она прекрасно работает, естественно, не только для SVG, но и для любых DOM-нод. К сожалению, прозрачность не поддерживается.

Понятное дело, что фишка эта применима не только для конвертации изображений :)

Сохранить изображение с canvas так тоже не удастся, но эта возможность встроена в контекстное меню самого холста и так.

#codepen дня

#css #grid

Движущей силой второго взрывного роста интернета после пузыря доткомов в 2000 году стали газетчики.

Газетчики – люди довольно консервативные. Они хотели работать в сети так, как привыкли в офлайне. А хотели они доносить новости и статьи классической форме: полосы и мастхеды, заголовки и колонки, хедлайны и баннеры.

И инструментом они выбрали таблицы, ведь аналогов модульных сеток в HTML и CSS тех времён просто не существовало. Привело это спустя несколько лет к войне дивов против таблиц за Святой Грааль, которая действительно закончилась лишь на CSS Grid.

Так вот, возвращаясь к нашему кодпену дня. Сегодня это будет идеальный макет газеты на гридах: https://codepen.io/oliviale/pen/BaoXOOP

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

#библиотека дня

#security #tracking #fingerprinting

Методы однозначной идентификации пользователя и/или его браузера называют fingerprinting. Буквально – снятие отпечатков пальцев. Малоприятная процедура, согласитесь :)

Существует известная библиотека — даже со своим сервисом — FingerprintJS. Она (и подобные ей) определяют пользователя по совокупности множества параметров: user agent, списки шрифтов, подключённые плагины браузера, ОС, разрешение экрана – всё идёт в ход.

Я, например, использовал её чтобы предотвратить читерство в онлайн-кликере где было важно, чтобы пользователь оставался в одном браузере.

И вот недавно появился ещё один параметр. Нас подвела старая добрая фавиконка, так родилась библиотека Supercookie.

Новость на русском с подробным объяснением принципа работы: https://www.opennet.ru/opennews/art.shtml?num=54553

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

#фишка дня

Помните я недавно рассказывал о том, что label может быть прикреплён к button?

Вот ещё забавный трюк: курсор мыши над лейблом вызывает :hover на прикреплённом поле ввода. Пока не знаю, как применить, но интересно.

https://codepen.io/Mamboleoo/pen/mdOrqdq

#label #css #input

#статья дня

Кому действительно суровых будней верстальщика? Статья от подписчика!

Наш давний друг @mazya столкнулся с неординарной проблемой, которая казалась достаточно простой: кнопка с градиентной рамкой.

И по всем заветам правильного подхода к решению вопросов он не стал жмотить решение и написал целую статью об этом: https://telegra.ph/Gradientnye-bordery-na-uporotyj-lad-02-07

Статья дополняется.

По-моему, весьма оригинально.

Приглашаю обсудить возможные улучшения к нам в @htmlshitchat

#svg #css #buttons #gradient #mask

#codepen дня

#css #pattern

Такую милоту можно только на 14 февраля и выдавать. Хотя за ней стоит самый настоящий матан. Интереснейшие мозайки (паттерны, если хотите): https://codepen.io/yuanchuan/pen/xxEXwZw

Вы можете обратить внимание на использование веб-компонента CSS-doodle. Я тоже заинтересовался, полез в настройки кодпена и… и офигел. Вы только посмотрите на это!

https://css-doodle.com/

Целый инструмент для генерации паттернов. Документация и примеры кода выше всяких похвал.

На его основе создан https://tabbied.com/

Правда, результаты работы Tabbied очень напоминают Экспресс-дизайн 😅

Вообще, весьма круто. Пару вечеров убить точно стоит.

#статья дня

Я давно обещал написать статью о Styled Components, особенно когда число вопросов превысило разумные пределы. Но так получилось, что нельзя написать о SC без того, чтобы не объяснить, что такое CSS-in-JS вообще и как мы дошли до жизни такой. Подсказка – в иллюстрации к посту.

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

И как всегда, приглашаю обсудить в @htmlshitchat

P. S. обновлено, кнопка не работает, ибо домен решено не оплачивать. Работают ссылки.

#css #js #cssinjs #jss #styledcomponents

#codepen дня

В @htmlshitchat прилетел прекрасный пример работы с пользовательскими свойствами.

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

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

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

P. S. CodePen, сам сервис, плохо свёрстан для мобильных устройств и неправильно считает высоту, поэтому пройти стоит по этой ссылке: https://codepen.io/pavlovsk/details/YzppeYX

Такой вид называется “Details view”.

#видео дня

В CSS уже достаточно давно существует возможность выполнять простые арифметические действия, используя calc. Ещё есть min, max, minmax. И их используют не только для расчёта блоков, но и, например, для размера шрифтов в зависимости от ширины экрана. А в совокупности с пользовательскими свойствами…

Но это всё невозможно правильно и легко использовать без понимания типов данных в CSS (вот неожиданный поворот, да?).

Встречайте доклад Софии Валитовой из вКонтакте: https://www.youtube.com/watch?v=PoWpkLeJnBA

Он вышел достаточно давно, но актуальности ни капли не потерял.

#css #math #calc