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

В посте про 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 весьма широки, ознакомиться не помешает.

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

​​#фишка дня

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

#noscript #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 в школе курсовую делал, это не было коммерцией.

http://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

#фишка дня

Зафиксировать заголовки таблиц ещё никогда не было так просто. В статье на CSS-Tricks объясняются принципы работы этого решения: мы фиксируем все заголовочные ячейки (th) таблиц и даём им лишний уровень z-index, чтобы они были поверх обычных ячеек; а чтобы при горизонтальном скролле левые th не перекрывались правыми – их поднимаем ещё выше.

Впрочем, это решение давно с нами: https://codepen.io/estelle/pen/MNwVxW

#css #sticky #table

​​#урок дня

Дэн Абрамов в своей статье о хуках в React говорит нам: «Не врите Реакту о зависимостях хука, указывайте все».

ESlint вторит ему: Этот код нужно исправить.

Но я же умный и без сопливых знаю точные зависимости, поэтому:
// eslint-disable-next-line react-hooks/exhaustive-deps

Мой UI тем временем ведёт себя вот так…

P. S. обратили внимание на ссылку с подсветкой текста? Завтра будет фишка по этому поводу.

P. P. S. Перевод статьи доступен на Хабре, но учтите, что материала там минут на сорок, на любом языке: https://m.habr.com/en/company/ruvds/blog/445276/

#react #hooks #useeffect #eslint

обещанная #фишка дня

Вы могли заметить, что Google стал выдавать результаты поиска с подсвеченным текстом запроса на искомой странице.

Формат URL при этом максимально странный: /#:~:text=highlight. Могу предположить, это сделано чтобы ни при каких условиях не пересечься с любыми возможными параметрами запроса/фрагмента (#).

Было бы глупо не воспользоваться этой возможностью! Простите меня, обладатели Firefox и Safari.

Я обещал фишку, и вот она: начиная с Chrome 89 вы можете управлять внешним видом подсвеченной строки! Я не понимаю такую любовь разработчиков к жёлтому цвету (помните автодополнение?), поэтому очень рад, что мы сможем использовать экспериментальный псевдоэлемент ::target-text чтобы подсветить выбранный кусок текста нужным нам цветом!

::target-text {
  background: cyan;
}

Более того, скоро нам обещают возможность управлять подсветой ошибок через псевдо элементы ::spelling-error и ::grammar-error. Но это потом.