​​#codepen года

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

Встречайте, самые залайканные кодпены за 2020 год! Учитывались не только лайки на работах, но и на самих авторах.

Мой любимый синтезатор Roland там тоже имеется, вот и ссылочка на пост с парой статей о процессе создания, если кто забыл: https://t.iss.one/htmlshit/430

https://codepen.io/2020/popular/pens/

#разочарование дня

#google #appscript

Помните, я писал недавно об онлайн-IDE от Google для их языка разработки расширения GSuite — AppsScript? Вот и ссылка: https://t.iss.one/htmlshit/475

Нам обещали улучшенный деплой, тестирование, полновесный редактор с отладчиком…

И вот сегодня я увидел её в деле. Стоит ли говорить, что я вернулся на старую версию спустя пять минут?

Не работало ничего. А нет, вру. Запуск функций работал.

Информация о проекте? Ошибка 500. Версионирование? Отсутствует. Конфигурация деплоя? Не загружается. Список опубликованных версий? Тоже не загружается. Отладка предыдущего движка? Не работает. Публикация API? Отсутствует.

Я с ужасом жду дня, когда они переведут всех на это насильно. Мы год ждали новую IDE вот ради этого? У нас полмиллиона пользователей, мы не можем себе позволить остаться без рабочего инструмента, пусть даже от него нам нужен лишь деплой.

Хотя, было глупо ожидать, что Google выпустить что-то работающее, а не бета-версию. Будем забрасывать их отзывами.

#ссылка дня

В последние два дня наблюдается довольно необычное увеличение числа подписчиков на канале. Официальная статистика поднимает бэклог, а бот и сервисы – показывают прямое увеличение.

Дамы и господа новоприбывшие, я напоминаю, что у канала имеется свой чат где вполне помогут разобраться с вашими проблемами с вёрсткой – @htmlshitchat.

И было бы интересно узнать, откуда вы узнали о канале, не стесняйтесь оставлять комментарии!

Добро пожаловать на канал!

P. S. представителям GeekBrains – моё отдельное спасибо.

#заметка дня

#css #html #pp #pixelperfect

Один из самых проблемных вопросов верстальщиков — не обязательно начинающих — это так называемый “пиксель пёрфект” (pixel perfect). Проще говоря, свёрстанный макет должен полностью соответствовать дизайну вплоть до последнего пикселя.

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

Но всё немного интереснее.

Давайте сразу определимся: правильно свёрстанный макет точен до пикселя по умолчанию. Точка.

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

У блока стоят поля и отступы по 16 пикселей? Нет ни одной причины ставить 10, чтобы “было легче считать” (и такое бывает), а потом проходить по всему макету заново. Ставьте сразу 16, а чтобы помочь себе — пользуйтесь расширениями для браузера, например https://www.welldonecode.com/perfectpixel/

Конечно, так можно дойти до крайности. Я много раз видел как люди бездумно копируют размеры из Sketch, Avocode или Figma наивно полагая, что уж кому как не им знать о размерах и положении. Это самая большая ошибка, и я уж молчу о том, что редакторы зачастую ставят абсолютное позиционирование всему подряд.

Будьте заранее готовы к тому, что макет – живой. Выделенный блок делится на секции? Используйте проценты во флексах или fr в гридах, делите его относительными единицами. Дизайнер поставил 63 px? Это явно дрогнула рука, не используйте нечётные значения никогда, округляйте до ближайших x4 (в данном случае — 64). Во всех размерах должна просматриваться логика, не могут три кнопки в ряду иметь один размер, а четвёртая – другой.

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

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

​​#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