​​#фишка дня

#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. Но это потом.

Мы с @kirenkov уже давно планируем провести совместный стрим, но всё никак звёзды не сходились.

Если кто не в курсе, Виталий (@kirenkov) – автор и ведущий YouTube-канала Просто разработка и его Telegram-версии (@prostorazrabotka).

И тут, внезапно, случился Clubhouse :-)

Так вот, в пятницу в 20:00 по Мск, приглашаем вас присоединиться ко встрече: https://www.joinclubhouse.com/event/m30z3XpW.

Тема:
Как не сойти с ума, верстая сайты, когда тебе за 30?

Повестка:
1. Ранее выгорание
2. Нужно бежать чтобы оставаться на месте
3. Мама, мне 33, а я верстаю менюшки
4. Как расти и надо ли
5. Не 10 лет опыта, а 10 раз по году опыта

а так же ответим на ваши вопросы, которые вы можете отправить по ссылке: https://forms.gle/fARKyQvpFcifdk99A, до 20:00 четверга по Мск.

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

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

Ну и конечно же, вы уже можете подписываться на нас в Clubhouse - @bekharsky и @kirenkov (да, никнеймы такие же, как и в телеге).

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

А точнее, даже два. Для начала, начнём со статьи: https://developer.chrome.com/blog/hardware-accelerated-animations/

Нам обещают, что начиная с Chrome 89 SVG- и анимация в процентах будут аппаратно ускорены. Да, вы не ошиблись, если вы раньше писали “translateX: -100%”, это не было аппаратно ускорено, а значит, в худшем случае, могло визуально тормозить (я в курсе про хак с translate3d, но он часто замыливает картинку).

Также ждём аппаратное ускорение bg-color и clip-path (все помнят, что анимирование цвета фона приводит к перерисовке?).

Эта статья стала поводом рассказать о двух инструментах создания SVG-анимаций, как альтернативе Lottie: SVGator и Rive. Оба бесплатны для личного пользования, оба позволяют делать мощные векторные анимации.

Rive больше подходит как альтернатива Lottie, ибо имеет свой отдельный рантайм под множество сред.

Творите и помните, скоро всё это совсем перестанет тормозить :)

Встреча уже через полчаса! Забегайте на уютный стрим.

Поехали.