#баг дня

Одна из моих любимых фишек инструментов разработчика Google Chrome (aka девтулзов) — это возможность сделать скриншот ноды.

Нужен длинный скриншот страницы? Бахаешь на body или html и сидишь довольный.

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

Но не обошлось без проблем. Ну честное слово, вот же вся страница, на экране. Бери да превращай в картинку. Нет...

Если в вашей ноде есть картинки, добавленные через тег img с атрибутом decoding="async" — они потеряются :(

Вот так вот неожиданно. Видимо кто-то где-то промис не разресолвил :)

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

Но неприятный осадок всё-таки остался.

Сейчас ищу формальное описание бага в багтрекере. Если не найду — придётся заводить.

Демо: https://10web.io/blog/how-to-create-a-blog-on-wordpress/

Просто попробуйте сделать скриншот body, не скролля заранее.

Проверено на Chrome 128.0.6613.120.

В итоге, часть картинок может появиться, а часть — нет.

Вообще, я откровенно не люблю ленивую загрузку картинок и контента. Да, помогает на медленном интернете, но абсолютно мерзко и неудобно на нестабильном соединении. Например, в поезде.

P. S. В Firefox баг тоже имеется.

#chrome #bug #async

#видео дня

Юлия Миоцен (сходу напоминание, что у нас всё ещё есть рубрика #автор дня) вернулась с планируемой серией видео по 3D-преобразованиям в CSS.

Вот: https://www.youtube.com/watch?v=dgEHpkm0xTI
И незамедлительно последовало видео с практикой: https://www.youtube.com/watch?v=E4Ns_ZuP6Qo

По-моему, абсолютно прекрасный материал, который не стоит воспринимать как руководство по воксель-арту :) Представленные примеры отлично развивают пространственное мышление.

Накатываем туда анимаций по скроллу и вообще будет хорошо.

#css #3d

Let’s Go now!

Tech-команда Купера (ex СберМаркет) запустила внешнюю программу для backend-разработчиков от уровня Middle+ по переходу на Golang 🤷‍♂️

Для участия нужен большой опыт коммерческой разработки на Python/Java/Kotlin/PHP/C++/С# и минимальное знакомство с Go, например, через изучение курсов или написание простых скриптов.

Как это будет:
🟠Ты получишь оффер в команду Купер.тех без понижения грейда.
🟠Будешь обучаться через практику на реальных продакшн-задачах Купера.
🟠Сможешь перенять опыт наставника внутри команды, который поддержит тебя в период обучения.

⚡️Осваивай Go с первого дня работы на задачах в Купер.тех — узнай больше о программе и подай заявку по ссылке.

💬 Купер.тех

Реклама. ООО «ИНСТАМАРТ СЕРВИС», ИНН: 9705118142. Ерид: LjN8KD9f4

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

Иногда случается ситуация, когда никак иначе, кроме как парсингом страниц, данные не собрать.

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

Тогда я воспользовался https://github.com/cheeriojs/cheerio, написав простой скрипт на node.js. Это похоже на реализацию селекторов в jQuery, но для Node.js. Разобрал данные и сохранил в JSON.

Оказывается, есть и более кондовые утилиты.

Например, https://github.com/mgdm/htmlq и https://stedolan.github.io/jq

Первый, как нетрудно догадаться, может обработать HTML, а второй — JSON. И всё из командной строки :)

Например, найти все ссылки на странице:

curl --silent https://www.rust-lang.org/ | htmlq --attribute href a


Можно и просто целые куски HTML выдирать, и селекторы использовать. А дальше — все возможности командной строки и скриптов для обработки.

Ну а jq может стать частью вашей CI/CD системы, разгребсти ответы от API GitHub, например, и выдать их в читаемом виде.

#tools #html #json #cli #бородач

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

Из-за моей профдеформации — работа над расширением для Google Sheets — мне очень нравятся различные виджеты таблиц.

От экселеподобных до обычных таблиц aka гридов с фильтрами и сортировкой.

И естественно, моё внимание не мог не привлечь проект с говорящим названием fast-grid: https://github.com/gabrielpetersson/fast-grid

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

Ну и, в общем-то, это правда :) Даже на тринадцатилетнем ноутбуке (с 4 ядрами и 16 гигами оперативы, впрочем) мне удалось загрузить 2 миллиона строк и радоваться жизни (Chrome, Linux).

5 миллионов, впрочем, не получилось ни на нём, ни на MacBook Pro M2 с 24 гигами. На первом вкладка съела 7 гигабайт и рухнула, на втором — съела 4 и ничего не произошло. Вообще.

И тут, конечно, встаёт вопрос целесообразности всех оптимизаций. Иметь по 5-10 миллионов строк в таблице это практически норма для Google Sheets (да, если навесить туда фильтры — всё станет очень плохо, но работает же). Заявленная плавная и бесконечно умное переиспользование DOM это хорошо, но грамотная подгрузка частями и виртуализация всё же выглядят более разумным решением.

Но если вам нужно переварить до миллиона строк — по-моему, вариант отличный.

#javascript #grid #sheets

#спасение дня

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

Вот как выглядела их страница 404 до недавнего времени: https://web.archive.org/web/20240723141538/https://www.peugeot.fr/pourquoi

Я больше не хочу терять это впечатление, потому решили хотя бы сохранить скриншот.

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

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

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

Вашему вниманию Bramus Van Damme и его caniuse-cli: https://www.npmjs.com/package/@bramus/caniuse-cli

$ caniuse viewport-units
$ caniuse "viewport units"
$ caniuse @property

Имеется автокомплит для zsh.

Ну, консольные маньяки, перепись!

#cli #caniuse

#статья дня

Ну что, давайте хором назовём самый больной элемент из всего набора стандартных HTML-виджетов.

Конечно же это select.

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

Тем временем, пропозал кастомного select дошёл до Stage 2 в WHATWG, а это значит, пришло время расчехлять хотелки. Иначе останемся с чем-то очередным поломанным и недоделанным.

Естественно, инициатива здесь исходит от команды Chrome, вот свежий RFC: https://developer.chrome.com/blog/rfc-customizable-select

Кто не знает, что такое RFC — это, буквально, Request For Comments, запрос комментариев. Ваших, конечно, чьих же ещё.

Надо заметить, что раньше переиспользование select не предполагалось. Рассчитывали создать новый компонент — selectmenu, переименованный потом в selectlist. Но от идеи в итоге отказались.

Чтобы попробовать новый select нужен Chrome Canary 130 с включённым флагом #experimental-web-platform-features.

На Linux это, впрочем, Chromium Dev. Canary для нас не нашлось.

Ну, какие будут впечатления?

P. S. Есть форма в Google Forms для отправки этих самых впечатлений команде.

#css #select #custom

#фишка дня

Пишешь чат или выводишь данные лога в консоль и хочешь чтобы каждое новое сообщение снизу было видимым?

Ни слова больше! Спека has us covered: https://drafts.csswg.org/css-scroll-snap/#example-d0a2d86f

Удивительное дело, конечно, видеть примеры прямо в черновике спецификации :)

Вот, кстати, пример от Брамуса Ван Дамма (опять и снова, да): https://codepen.io/bramus/pen/PorRORd

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

Работает везде, но иногда проявляется баг с пружинящим скроллом — Chrome теряет событие и "снапит" нас назад. Впрочем, не всегда.

Ну если вы за старое доброе решение на JavaScript, вот, держите хук от Vercel.

#scroll #snap #css

#фишка дня

О проблеме вертикального центрирования контента в CSS можно слагать легенды, писать статьи, делать целые сайты...

Даже грустно, что всё это подходит к концу. Ведь теперь у нас есть не только флекс и грид, но и такое простое и понятное align-content.

Да, это свойство с давних пор является базой во flex- и grid-моделях, но начиная с Chrome 123, Firefox 125 и Safari 17.4 поддерживается и в — 🎉 — блочной модели!

.container {
  align-content: center;
}

Демо: https://codepen.io/alinaki/pen/ExBzeLW

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

#css #align

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

Недавно мы вспомнили о крутой фишке мобильных браузеров: атрибуте enterkeyhint для текстовых полей, позволяющем уточнить поведение клавиши Enter на экранной клавиатуре: https://www.tg-me.com/htmlshit/2516

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

А чтобы не раздувать это на миллион постов (я всё равно так сделаю, но попозже), предлагаю взглянуть на интересный инструмент, позволяющий поиграться всеми возможными атрибутами полей форм на мобильных браузерах разом: https://better-mobile-inputs.netlify.app/

Например, вы знали, что есть атрибут для автоматической вставки одноразового кода, присылаемого по SMS?

Вот он там самый первый пример. Со скриншотами того, как выглядит клавиатура на iOS и Android.

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

#input #attribute #mobile #tool #бородач

#фишка дня

Концепция анимированных круговых лоадеров на SVG достаточно проста: берём две окружности, одну для фона, вторую для отображение прогресса, и анимируем значение атрибута stroke-dashoffset.

И вот этот самый сдвиг задаётся в рамках некого stroke-dasharray: массива точек (кривых, dash), которыми рисуется кривая.

С ним можно много забавного делать, но это потом.

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

const circle = document.querySelector('.spinner__circle');
console.log(circle.getTotalLength());

И я так постоянно делал. Ну, как, постоянно: лоадер как правило делается один раз на проект 🙂

Каково же было моё удивление, когда я обнаружил, что относительную длину кривой можно задать заранее! И не страдать ерундой с расчётом:

pathLength="100"
stroke-dasharray="100"
stroke-dashoffset="0"

И за это отвечает именно атрибут pathLength. Дальше же для простоты работы определяем dasharray и dashoffset круглыми значениями.

Ну и демо, конечно: https://codepen.io/alinaki/pen/oNXjEzz

Теперь, внимание, вопрос: почему часть атрибутов записывается через дефис, в kebab-case, а часть — в camelCase?

#svg #length #loader

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

Как сделать текст поверх картинки читаемым?

Те, кто смотрит сериалы с субтитрами, уже давно знает ответ: белый текст с темно-серой тенью.

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

Как подобрать цвет оверлея и прозрачность? Очень просто, воспользоваться вот этим инструментом: https://codepen.io/yaphi1/pen/oNbEqGV

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

#css #tool #a11y

#напоминание дня

Пользуясь случаем, напоминаю, что завтра, 19 августа в 20:00 МСК у нас пройдёт совместный с @acceleracio стрим, на котором я расскажу, как проходили мои зарубежные собеседования, а эксперты Acceleracio поделятся секретами того, как заполучить работу за границей.

⚡️Пост с подробностями: https://www.tg-me.com/htmlshit/3108

⚡️Бот для записи: @acceleracio_bot

Увидимся!

#фишка дня

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

Сидите вы такие в уютном месте, пьёте кофе, работаете на макбуках, с экранами высокой плотности... в итоге забывая, что клиенты-то ваши — на ThinkPad с разрешением 1366*768.

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

Итак, сегодня вашему вниманию пара вариантов сглаживания градиентов.

1. Используйте нецелые значения процентов для стоп-меток. Если честно, я в механизме не до конца разобрался, но это заставляет браузер размывать линию стыка: https://codepen.io/alinaki/pen/oNrKXpM

  background: linear-gradient(
    176deg,
    red,
    red 50%,
    black 50.3%
  );

2. Похожее решение — прибавить пиксель к стоп-метке: https://codepen.io/alinaki/pen/xxovGyz

  background: linear-gradient(
    176deg,
    red,
    red 50%,
    black calc(50% + 1px)
  );

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

P. S. естественно, Telegram зашакалил картинку на 10 шакалов из 10. Так что ползите смотреть кодпены, дамы и господа.

#css #trick #gradient #smooth