#заметка дня

Я откладывал публикацию заметки по этой теме в долгий ящик, но время пришло.

Итак, давайте сразу панч: верстальщику в 2021 году нельзя ориентироваться на физическое разрешение матрицы экрана устройства. Точка.

Если вам заказчик говорит, что у него ноутбук с FullHD разрешением и ваша прекрасная вёрстка поехала к чертям, а у вас на 24” мониторе с тем же разрешением всё отлично — ответ прост. И имя ему масштаб.

Нетрудно догадаться, что объекты на разрешении 1920x1080 на 14” выглядят гораздо меньше, чем на пресловутых 24”. Это простая физика — размер пикселя меньше.

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

В итоге, на таком ноутбуке Windows выставит вам размер шрифта в 125%. Вот только о чём настройки Windows почему-то молчат, так это о том, что все элементы интерфейса станут крупнее, а не только шрифт. И это прям максимально странно.

В итоге интерфейс на 14” экране станет отображаться в эквивалентном разрешении 1536x864 (делите на 1.25). А это совсем не FullHD, не правда ли? А вот настройки монитора упорно скажут вам: «FullHD, чо докопался?». Во многих программах интерфейс ещё и размытый станет…

Второй пример: MacBook с ретина-экраном.

Рекламные материалы Apple упорно твердят нам: разрешение экрана MacBook Pro 13” — 2560x1600. Вот только о чём молчит Apple так это о том, что изображение будет иметь виртуальное разрешение 1280x800 для моделей до 2015 года и 1440x900 — после. Это коэффициенты масштабирования 2 и 1.77 соответственно.

Правда, в macOS, в отличие от Windows и Linux, это масштабирование сделано правильно и шрифты с векторными изображениями будут видны максимально чётко, почти как на бумаге. Их рендеринг происходит по физическим пикселям матрицы.

Растровые изображения будут отображены в реальном разрешении – рендеринг в физические пиксели. Именно по этой причине для ретина-экранов фотографии готовить нужно в двукратном размере (x2 по ширине и высоте, так что формально — четырёхкратном, но так говорить неудобно).

Третий пример. Посмотрите на свой мобильный телефон. Если производитель заявляет разрешение экрана 1080x1920 (вертикально), то в реальности в большинстве случаев это 360x640. С той же логикой, что и в macOS и ровно по тем же самым причинам.

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

Чтобы не попадать в дурацкие ситуации, я могу разве что предложить сразу проверять масштабирование не только в браузере, но и в системе. Ну или использовать #инструмент вроде https://screensizemap.com/ чтобы заранее смотреть разрешение экранов разных устройств.

Кстати, если откроете этот сайт и посмотрите на пример для ThinkPad — получите как раз 1536x864. Потому что Windows на подобных ноутбуках ставит 125% по-умолчанию, из коробки. И да, у меня есть такой ноутбук и именно на нём я впервые и осознал подобную боль.

А чтобы узнать своё разрешение экрана, рекомендую вот этот сервис: http://whatismyscreenresolution.net/

Надеюсь, данные вас не удивят.

Вместо итога

Физические пиксели и пиксели в CSS это не одно и то же. И я не прошу вас кидаться использовать относительные единицы: без понимания, что же такое виртуальное разрешение экрана они вам не помогут.

В общем, удачи 😉

#screen #css #tool

#заметка дня

Итак, в обсуждении предыдущего вопроса мнения немного разошлись: что же является верным значением для 50% прозрачности, 80 или 7F?

Дошло даже до вопроса, а можно ли вообще напрямую переводить проценты в шестнадцатеричную систему счисления?

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

Давайте просто переведём оба числа в десятичную систему счисления. 80 это 128, а 7F это 127. Догадались уже, в чём проблема?

Верно. Это не середина интервала 0-255. Его середина — 127.5.

Если это может показаться неявным, попробуйте закрытый интервал покороче. Например, [0..3]. Назовёте сходу его середину?

Его середина это 1.5: 0, 1, 2, 3. То же самое с [0..255].

Так вот, согласно спецификации sRGB, при приведении относительных числовых значений к закрытому интервалу, результат математически округляется. Именно по этой причине 127.5 приводится к 128. Если кому интересна конкретная реализация и объяснение, можно посмотреть тут: https://stackoverflow.com/a/66862750

А теперь внимание на пример: https://codepen.io/alinaki/pen/MWpEvPO.

В идеале результат смешения с белым фоном должен быть одинаков для rgba() и opacity, но он таковым не является (а вот F7 и opacity дают одинаковый результат). Кстати, он ещё и от цветового профиля дисплея зависит.

В общем, в случае с opacity алгоритм отбрасывает дробную часть при расчёте результата смешения.

Ответ на второй вопрос: как переводить десятичную дробь?

Умножаем дробную часть на основание системы счисления, и из 0.5 получаем 0.8. Вот только компьютеры оперируют не дробными, а целыми числами. И интервал у нас как был 00-FF, так и остаётся.

Думаю, в сухом остатке 80 проще запомнить. Ну или пользоваться таблицами общепризнанных значений: https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4

#css #color #rgba #hex

#заметка дня

В чатах постоянно всплывает вопрос: «таблица ли это», — ну и картинка макета какая-нибудь.

Так вот, как правило, это всегда таблица. Есть построчное/поколоночное (такое слово есть вообще?) повторение данных — вот даже без сомнений.

Если решили сомневаться — точно делайте таблицу, поставить display flex или grid для адаптации вы всегда успеете.

Вот, посмотрите: https://codepen.io/tomhodgins/pen/akrRqX (тут используется препроцессор eqcss, так что рекомендую смотреть скомпилированный вид, это лишь демонстрация идеи).

Ну и на закуску: если вы выдаёте какие-то данные, будьте готовы к тому, что люди их захотят скопировать в условный Эксель. Таблицы это поддерживают по-умолчанию: скопировали да вставили.

А ещё таблицы могут вылезти в предпросмотре поиска Гугла или Яндекса, что хорошо скажется на SEO.

#css #table #grid #codepen #таблица

#заплакала дня

Не успел я на работе выйти в декрет (в Финляндии отцам можно брать до 56 дней отпуска по уходу за ребёнком, из них 18 одному), как из моей команды решила уйти стажёрка. Я ж тут вроде как личинка тимлида, нашу большую команду делят на три части в каждой по 3-4 человека. По продуктам.

Процесс этот, как впрочем и все процессы в финских компаниях, довольно эффективный, но очень не быстрый. Окончательное формирование команд планировалось завершить к осени.

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

Довольно грустно, у неё это весьма хорошо получалось. Но хочет уйти в UX/UI-дизайн. А продукт наш слишком кондовый чтобы позволить ей успешно развиваться в этом направлении.

Чем хороша Финляндия, сменить область деятельности и пойти обучаться. можно практически в любом возрасте и в любое время. Без поддержки не останешься и никто косо не посмотрит, программ для обучения огромное количество.

Естественно, я ощутил некий укол вины, ведь курировал последние четыре месяца её именно я, но желаю ей удачи и надеюсь, что своё призвание она найдёт.

#life #finland #work

#статья дня

Ну и раз я уже начал писать про нашу компанию, вот сегодняшняя статья дня — первая в корпоративном блоге на dev.to.

Мой коллега James Elderfield написал о простой и легкоподдерживаемой обработке ошибок в TypeScript: https://dev.to/supermetrics/simple-and-maintainable-error-handling-in-typenoscript-56lm

Круто работать с людьми, которые в чём-то лучше тебя. Только так и можно развиваться :)

#typenoscript #error #errorhandling

#codepen дня

Каждый программист должен написать хелловорлд, калькулятор и музыкальный плеер.

Время повышать планку. Каждый верстальщик теперь тоже должен написать калькулятор.

И даже не шучу, глядите: https://codepen.io/lillian-kodi/pen/YzZLebR

Он на десктопе точно работает, а вот на мобилах что-то через раз.

Тут разбираться и разбираться. Но точно можно сказать, что число хаков ужасающе мало. Почти всё легитимно.

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

Ждём статью от автора, разберёмся: https://twitter.com/LillianKodi/status/1401325452581613568

#css #calculator #awesome

#фишка дня

Вне зависимости от модных поветрий, отсутствие тёмной темы на ресурсах начинает иногда раздражать.

Давайте сделаем свою. Для любого сайта.

Секунд за пять.

1. Инвертируем всё к чертям.
2. Поворачиваем колесо hue (тон) на 180 градусов чтобы получить более приятные глазу цвета.
3. Отменяем эти фильтры на картинках.
4. …
5. PROFIT!!11

Ну и быстрый пример, основанный на уже известном вам газетном макете: https://codepen.io/alinaki/pen/jOBvzdW

Предупреждение от автора способа: «Важно отметить, что такой хак форсирует вынос блока в отдельный слой рендеринга. Так что если внутри используется абсолютное позиционирование с огромными координатами, то такой слой может не влезть лимиты по памяти, и, как следствие, не дорендериться до конца».

Впрочем, он же пишет, что повторить подобное поведение ему не удалось.

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

#css #darktheme #filter

#заметка дня

— Э, что это за обводка на полях и ссылках? Убирай.

Знакомо же? Отключение подсветки, box-shadow, focus-visible... Но хочется же как-то проще решить вопрос.

И тут нас встречает свойство outline-offset. Ага, можно управлять отступом контура от элемента. И это уже будет выглядеть интереснее.

А главное, это свойство — анимируемое, глядите: https://codepen.io/alinaki/pen/GRWXeae

Элегантно и максимально просто. Автор идеи — Adam Argyle.

#css #focus #outline

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

Ну наконец-то! В Chrome 92 полноценно заработал редактор CSS Grid с удобной панелью. Не очень понятно, что у них заняло так много времени :) Редактор флексов был давно.

Полный список изменений: https://developer.chrome.com/blog/new-in-devtools-92/

Ещё из интересного: добавили индикацию Quirks Mode (почему сейчас-то?) и возможность записи действий для Puppeteer.

#chrome #devtools

#codepen дня

Уже любимая всеми нами Ана Тюдор совсем не так давно написала шикарную статью о том, как стилизовать ползунковый контроллер, в простонародье input[type=“range”]: https://css-tricks.com/multi-thumb-sliders-particular-two-thumb-case/

Вообще, это статья о том, как сделать вариант с двумя ползунками. Просто разделение на составные части виджета и объяснение принципа даны прекрасно.

Но мы тут собрались готовые решения смотреть. И вот они, целая коллекция ползунков: https://codepen.io/collection/DgYaMj?sort_order=desc&sort_by=item_updated_at

На любой вкус и цвет! Двойные и одиночные. Подобрать можно под практически любой дизайн.

Пользуйтесь 😉

Важное дополнение к посту выше: эта коллекция собиралась и пополнялась автором не один месяц. Не стесняйтесь использовать сортировку и вообще копаться в ней 🤗

Тем временем, пост я поправил, чтобы ссылка сразу эту сортировку включала. Приношу свои извинения.

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

Очередной генератор сеток CSS Grid: https://css-grid-layout-generator.pw/

Не говорите мне, что это масло-масленое. Многие до сих пор мыслят категориями Bootstrap и т. п., каждый раз приходится уточнять 👀

Так вот, этот довольно сложный.

Мне кажется, проще выучить спецификацию гридов, чем разобраться в нём 😅

Но упоминания стоит.

#css #grid #generator

#статья дня

…а точнее, цикл статей Ника Мостового (на английском) о производительности фронтенда, составляющие вполне себе методичку (это я так handbook перевёл, вроде ок).

1. Как браузер отрисовывает страницу.
2. Как можно улучшить FMP (First Meaningful Paint) и TTI (Time to Interactive).
3. Событийный цикл, разметка, отрисовка, композиция, стек вызова.

Звучит страшно, но статьи прекрасно оформлены, с большим количеством схем, и написаны простым языком. В общем-то, я бы назвал эти знания обязательными.

#css #javanoscript #layout #handbook #fmp #fcp #tti #eventloop

#codepen дня

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

Чаще всего это решается скриптом, но вот теперь есть вариант на чистом CSS: https://codepen.io/jh3y/pen/XWMobqx

В данном примере JS нужен лишь для того, чтобы сразу показать React-компонент.

Но вот от имплементации аж разит чем-то со времён Internet Explorer 6 🤪

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

История точно движется по спирали.

#css #component #directional

#ссылка дня

Eleventy — это простой, но мощный генератор статических сайтов.

Суть его в том, что вы имеете доступ к мощной и разветвленной системе шаблонов, шорткодов и обработчиков запросов к разным API, но только в момент сборки. После чего получаете чистый HTML. Без CMS и прочего бакенда, пока сами не захотите. Мне вот нравится черновики статей в Markdown готовить.

Кайф в том, что Eleventy никак не ограничивает вас в инструментах сборки и постобработки. Webpack, Snowpack, Gulp — что угодно. Хоть виджеты на React вставляйте.

В общем, вот бесплатный курс по нему: https://piccalil.li/course/learn-eleventy-from-scratch/

Сейчас сам тоже его буду проходить. Ибо сайт канала максимально прост. Слишком прост 🤷‍♂️

#11ty #eleventy #course

#статья дня

Тот случай, когда статья шестилетней давности не потеряла ни капли актуальности. Превращаем GIF в SVG и анимируем с помощью CSS: https://cssanimation.rocks/buffer/

1. Как векторизовать изображение (трейсинг).
2. Как разбить анимацию на составляющие (метод таймлайна).
3. И как, собственно, реализовать на ключевых кадрах.

Классика вечна :)

#css #noscript #gif #animation

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

Знакомая ситуация? 👆

Сегодня я представляю на ваш суд расширение для VS Code под названием Blockman: https://marketplace.visualstudio.com/items?itemName=leodevbro.blockman

Что оно делает?

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

Да, VS Code подсвечивает парные скобки, но иногда этого бывает недостаточно. Просто посмотрите скринкасты со страницы расширения.

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

#vscode #extension

#статья дня

То тут то там можно услышать, что Google Chrome с 91 версии исправил что-то там в таблицах. А точнее, в их рендеринге. Но что конкретно?

А вот давайте и посмотрим, с примерами: https://www.bram.us/2021/06/21/tablesng-improvements-to-table-rendering-in-chromium/

Итак, по-порядку:

1. Ширина колонок наконец-то может быть в долях пикселей. 33.333px вместо 33px, 33px и 34px как было раньше.
2. TD/TH начали поддерживать writing-mode без дополнительных обёрток. Т. е. можно делать вертикальные заголовки и содержимое.
3. colgroup начал поддерживать схлопывание колонок (visibility: collapse).
4. Полноценная поддержка position: sticky на всех элементах таблицы.

К сожалению, в отстающих теперь Safari. Надеюсь, это ненадолго. У Firefox дела давно весьма хорошо.

Да и прогрессивное улучшение никто не отменял.

#css #table #sticky

#фишка дня

А вы знали, что тег video поддерживает субтитры?

Ну, допустим, кто-то знал.

А вы знали, что эти субтитры можно ещё и стилизовать?

Через псевдоэлемент ::cue. Буквальный перевод — реплика. Кто бы мог подумать.

А вот и пример: https://codepen.io/alinaki/pen/qBreeBK

Обратите внимание на переданные в стили реплик параметры v и c. Самые наблюдательные уже заметили: разным героям — разный цвет слов.

Так вот, субтитры должны поставляться в файле особого формата — WebVTT (Web Video Text Tracks). И уже внутри разметки субтитров можно указать голосовые отрезки — voice spans, выглядящие как самые обычные теги:

<c><i>[ evil laughter ]</i></c>

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

#html #video #subnoscripts #vtt #webvtt

#статья дня

Как правильно настроить фавиконку или изображение для закладки на таскбаре или экране мобильного телефона? Сколько файлов нужно, какого формата?

Можно бездумно воспользоваться инструментами-генераторами вроде https://favicomatic.com/

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

А для этого — вот отличная статья Андрея Ситника из Evil Martians: https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs

1. favicon.ico для старых браузеров
2. SVG с версиями под тёмную и светлую темы для современных браузеров
3. PNG 180x180 для устройств Apple
4. PNG 192x192 и 512x512 для Android-устройств

Всё остальное — или устарело, или просто оказалось ненужным в современных реалиях, об этом даётся справка.

Ну и конечно, статья была бы не настолько хороша без инструкций по подготовке изображений. Всё отлично объяснено.

#noscript #png #favicon #touch