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

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

Несколькими днями ранее, в одном из чатов, зашла речь о чекбоксе с тремя состояниями. И все решения были на JavaScript. Я решил попробовать сделать на чистом HTML и CSS. Вроде, вполне так рабочий вариант -)

Смотреть тут -> CodePen

#html #css

#находка дня

Я нашёл свою первую коммерческую вёрстку! Не помню всех условий заказа, но это было что-то странное.

2006 год!

До этого я в 2002 в школе курсовую делал, это не было коммерцией.

https://sampo.ru/~alinaki/rabbit/

В 2006 году был вовсю IE5.5 в ходу, не было понятия адаптивности и я почему-то считал, что если элемент один – к нему обязательно обращаться по id.

А ещё сломался скрипт тултипа 😕

#фишка дня

На мобильных устройствах 100vh работает совсем не так, как хочется: значение включает в себя панели браузера. Но решение есть! Несколько.

Когда-то один только этот пост принёс мне не один десяток подписчиков. Пришло время обновить. Виталий (канал Просто Разработка) принёс из Твиттера Никиты Голубова новое решение и оно прекрасно работает!

Естественно, реальность немного сложнее, чем иллюстрация, но это уже большой шаг вперёд.

#css #100vh #viewport #height

#фишка дня

Да, кстати. Раз уж мы заговорили о высоте видимой области экрана (viewport), то почему бы заодно не решить одну старую проблему.

Если вы верстали под мобильные устройства, наверняка возникал вопрос – как посчитать высоту экрана после открытия клавиатуры? Ведь window.innerHeight просто даёт полное значение.

А всё просто – на помощь приходит Visual Viewport API. Как именно? На иллюстрации к посту весь код :)

Подсмотрел в Твиттере Rik Schennink

#css #viewport #height #mobile

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

Говорят, Apple уберёт TouchBar в будущих моделях ноутбуков, потому что он не прижился. Но нынешние ноутбуки-то пока никуда не денутся.

И я честно не понимаю, почему не знал об этой возможности раньше, но в Electron есть API для взаимодействия с тачбаром! Писать свои виджеты оказалось весьма просто.

Почему я именно сегодня эту тему поднял? Да как-то так вышло, что тут неожиданно иллюстрация к посту завирусилась. Четыре года пролежала!

А вот, собственно, и исходники виджета: https://github.com/pahund/electron-touch-bar

#apple #touchbar #electron #js