#wtf дня

Только что обнаружил, что открытые Chrome DevTools предотвращают выключение экрана на MacBook. Учитывая, сколько окон инспектора у меня открыто каждый день — немудрено, что ноутбук не выключает экран с некоторых пор.

Это, мягко говоря, раздражает.

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

Upd. 1

Есть открытый баг для Windows, не я один страдаю: https://bugs.chromium.org/p/chromium/issues/detail?id=1208711&q=prevent&can=2

Upd. 2

Если инспектор открывается внутри основного окна – запрета выключения экрана не происходит.

#codepen дня

Невероятно! Apple iMac стал настолько тонкий, что уместился в один CodePen: https://codepen.io/Adir-SL/pen/JjWXZEq

Крутится вокруг своей оси, из интерактива — смена набора цветов.

К слову, чтобы научиться создавать такие же примеры — стоит понять, как делать параллелепипеды на CSS, а об этом я писал совсем недавно: https://t.iss.one/htmlshit/612

#css #3d

#заметка дня

А давайте сегодня стилизуем выбор файла. Ну то бишь input[type="file"]. С чего вдруг? Да просто в целом это можно делать как минимум двумя способами! Два лучше чем один, очевидно.

Итак, классический способ: label>input+span.

Я не очень люблю атрибут for, ибо он заставляет меня придумывать id, но for может дать вам больше гибкости в размещении элементов и/или избавить от дополнительных span-ов.

Поехали:

1. Скрываем input техникой visually hidden, чтобы скринридеры его не потеряли.

2. Вешаем на span атрибут tabindex для фокуса с клавиатуры и role=“button” чтобы указать, что он будет интерактивным. Почему не кнопка? Потому что кнопка перехватит на себя клик по label, нам это не надо.

3. Оформляем span.

Собственно, это всё. Но оформляя таким способом, мы теряем мета-информацию. Как минимум, хотелось бы иметь название файла. Значит, добавляем пункт номер…

4. Вешаем слушатель события change на наш выбор файла и демонстрируем пользователю информацию о файле.

Итак, что же получилось: https://codepen.io/alinaki/pen/poeNzqd

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

Так вот, с некоторых пор мы можем обращаться к псевдоэлементу ::file-seleсtor-button! Вот и MDN по этому поводу: https://developer.mozilla.org/en-US/docs/Web/CSS/::file-selector-button

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

Впрочем, когда-то кнопка называлась -webkit-file-upload-button, так что допишем и этот вариант, тогда и в старых Chrome и нынешнем Safari тоже заработает.

Описывать тут нечего, сразу результат: https://codepen.io/alinaki/pen/NWpbgGg

Ну ладно, на самом деле есть чего: с состоянием фокуса приходится помучаться, но возможно, у вас будет иное оформление. И пока нет возможности поменять текст на кнопке (на самом деле, можно, через псевдоэлементы). В общем, ждём дополнений к спецификации.

#css #file #upload

#фишка дня

Используя такие атрибуты input[type="file"] как capture и accept можно дать пользователю возможность сделать фото или снять видео на своём мобильном устройстве и сразу загрузить на сервер.

Атрибут capture может принимать значения user (для фронтальной) или environment (для основной камеры, или оставить пустым). Но на Android 10 (Chrome 90) такой выбор не работает.

Если не указать capture вообще, Android и iOS дадут варианты: включить камеру или выбрать из файловой системы.

А вот с accept всё ещё более интересно. Передавать в него нужно точный или универсальный (wildcard) MIME-тип. И вот тут есть нюанс.

И Android и iOS правильно обрабатывают image/* или video/*, соответственно выбирая нужный режим съёмки. Но вот если опустить accept вообще, iOS даст выбрать режим, а Android — просто включит фото.

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

P. S. это не работает на десктопах 🚫

#file #upload #capture

Было бы интересно узнать, как на ваших мобильных устройствах работают выбор камеры и режима съёмки. Давайте попробуем:

https://codepen.io/alinaki/pen/yLMVGer

Пишите в комментариях версии ОС и браузера.

#фишка дня

Вы же уже наверняка в курсе, что Google запустил свой вечнозелёный курс по CSS? Если нет, вот он: https://web.dev/learn/css/

Наиболее внимательные могут обратить внимание, что все примеры сделаны через нашу любимую песочницу — CodePen.io. И примеров там более 200 штук.

А теперь, собственно, взрывающий мозг факт: они все используют библиотеку компонентов, которая тоже размещена как CodePen-сниппет!

Вот она: https://codepen.io/web-dot-dev/pen/abpoXGZ

Как же они это делают? Очень просто, добавьте к URL интересующее вас расширение — html, css или js — и вы получите нужный файл!

Вот как-то так: https://codepen.io/web-dot-dev/pen/abpoXGZ.css 🤯

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

#codepen #google

В @htmlshitchat разгорелась интересная дискуссия на тему, нужно ли запихивать логотип в nav. Ведь многие делают логотип частью сквозной навигации и ставят на него ссылку на главную страницу.

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

#вопрос дня ⬆️

Сегодня против вас играет Лия Веру (Lea Verou).

#заметка дня

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

Помните ошибки рабочей группы CSS? Вот inherit, initial, unset и revert можно смело в них записывать.

Потому что это какой-то ад. Смотрите сами:

inherit

Тут всё достаточно просто. Значение свойства будет отнаследовано от ближайшего родителя и так далее вверх по DOM, пока не найдёт. Если не найдёт — применит значение заданное по-умолчанию в браузере (user-agent styles).

Если и там не найдёт — то возьмёт значение, определённое для этого свойства в спецификации CSS, и это будет…

initial

Давайте откроем MDN для свойства display и пролистаем до раздела «Formal definition».

Мы увидим там нечто под названием «Initial value». И оно равно inline. Вот и наш ответ: initial это значение, определённое в спецификации CSS. Вот только оно не всегда очевидно.

Небольшой взрыв мозга: значение initial свойства display для тега div равно… тоже inline. Потому что поведение элементов в потоке и CSS-свойства — это разные сущности и связь их прописана на более высоких уровнях.

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

revert

И уже эта прелестная штучка сбросит свойство до значений, установленных в таблице стилей браузера. Да, свойство display элемента div примет значение block.

Кстати, предыдущее название — default. Вы видите разницу между default и initial? А она, оказывается, есть.

unset

Тут мы на развилке. Свойство работает как inherit для наследуемых свойств (тех, которые применятся к потомкам, вроде color) и как initial для ненаследуемых (они, соответственно, не применятся к потомкам, вроде border).

Вроде как и не нужно оно выходит, не правда ли?

Но с его помощью можно сбросить все установленные значения, благодаря свойству all:

.element {
  all: unset;
}

Таким образом все свойства наследуемые свойства сбросятся до inherit, а ненаследуемые — до initial.

Вместо итога

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

#css #unset #initial #revert

#статья дня

Помните мы обсуждали свежие контейнерные запросы и полифилл для них?

Вот Ахмад Шадид решил подойти к задаче немного с другой стороны, а именно со стороны дизайнера: https://ishadeed.com/article/container-queries-for-designers/

Какие возможности открывают контейнерные запросы, когда уместно использовать их, а когда — запросы медиа? Эта фраза на русском языке звучит странно в любом виде, простите.

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

#css #containerqueries

#заметка дня

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

Итак, давайте сразу панч: верстальщику в 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% по-умолчанию, из коробки. И да, у меня есть такой ноутбук и именно на нём я впервые и осознал подобную боль.

А чтобы узнать своё разрешение экрана, рекомендую вот этот сервис: https://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-typescript-56lm

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

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