#статья дня

Один мой товарищ любил прыгать с вышки использует светлую тему в редакторе.

Да вообще, если подумать, много кто на работе в IDE работает со светлой темой. Я вот её использую только когда нужен повышенный контраст: на ярком солнечном свете.

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

Некоторые владельцы маков с чёлкой перешли на темные темы лишь бы скрыть чёлку 🤡

Так к чему это я. Действительно ли темные темы так хороши или так плохи для глаз? Что за ними стоит и почему черный цвет в них не используется? Отвечает вот эта статья: https://habr.com/ru/company/timeweb/blog/675526/

Со ссылками, с литературой, с примерами. Сплошное удовольствие читать.

#dark #theme #бородач

#игра дня

Я нечасто делюсь играми, в которых не предполагается написать код или стили, но эта — довольна забавная.

Особенно в свете последних событий на работе, когда команды объединили и поделили.

Итак, тренажёр менеджера проектов!

http://thatpmgame.com/

Визуально — диаграмма Ганта. Раунды короткие, несколько минут. Цель — уложиться в сроки и бюджет, располагая целым спектром сотрудников.

От ленивых до очень ленивых.

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

Забавно, что персы там могут выгорать, если им не хватает работы. Скучают!

Да, во многих конторах прожект-менеджер — это, скорее, переходящий титул, нежели выделенная профессия, поэтому в роли может оказаться кто угодно.

Ну, кто закончит в зелёной зоне? :)

#pm #project #planning

#фишка дня

Элемент fieldset — штука со сложной судьбой. Вас никогда не удивляло, что тег, предназначенный, казалось бы, для группировки элементов — никогда для этого не используется? Почему?

Ну вот, например, Bootstrap 5: https://getbootstrap.com/docs/5.3/forms/input-group/

Там div, не fieldset.

Всё потому, что до недавнего времени комбинация fieldset+legend отрисовывалась виджетами ОС. Как, например, те же select и button. И даже flex-модель в них не работала правильно:

Баг Chrome (исправлено в 86)
Баг Firefox (исправлено в 46)

К счастью, это изменилось и использовать fieldset можно ровно так же как и другие элементы.

Тем более, что никто не отменял его одной очень интересной фишки: атрибут disabled будет отнаследован всеми вложенными элементами!

Вот так: https://codepen.io/alinaki/pen/NWLOPqy

Где это может пригодиться?

Очевидно, если есть группа кнопок для отправки формы, а обычно это submit+reset, но может быть и несколько submit-ов на разные адреса, можно не отключать их по одной, а просто положить в fieldset и отключить разом.

Ну или всю форму, при желании.

P. S. disabled дело не ограничивается, invalid тоже работает, введите что-нибудь в текстовое поле: https://codepen.io/alinaki/pen/VwGELwr

#fieldset #disabled #бородач

#баг дня

Одна из моих любимых фишек инструментов разработчика 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