Будни разработчика

#фишка дня

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

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

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

.container {
  align-content: center;
}

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

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

#css #align

#фишка дня

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

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

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

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

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

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

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

#scroll #snap #css

#статья дня

Ну что, давайте хором назовём самый больной элемент из всего набора стандартных 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

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

Надоело каждый раз выходить из уютной консоли и открывать 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

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

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

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

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

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

Из-за моей профдеформации — работа над расширением для 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

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

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

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

Тогда я воспользовался 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 #бородач

Let’s Go now!

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

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

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

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

💬 Купер.тех

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

#видео дня

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

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

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

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

#css #3d

#день дня

С Днём программиста, дамы и господа!

Уж так принято называть 256-й день в году. Жаль, не выходной 💻

#баг дня

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

#фишка дня

Элемент 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 #бородач

#игра дня

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

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

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

http://thatpmgame.com/

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

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

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

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

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

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

#pm #project #planning

#статья дня

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

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

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

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

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

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

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

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

Ну и третья альтернатива — https://fakeimg.pl/

Этот сервис уже ставит не фотографии, но классические плейсхолдеры заданного размера. При желании — с вашим текстом. Замена покинувшим нас placehold.it и PlaceIMG.

Пробуем, отмечаемся.

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

Вторая альтернатива (поверьте, ещё год назад их было ну очень много) — https://spaceholder.cc/

Вставляет фотографии с телескопа Хаббл!

Пробуем, ставим пальцы.

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

Итак, первая альтернатива Lorem Picsum — Placedog: https://placedog.net/

Умеет все то же самое, только посвящен собакам. Ставьте реакции 👍, если у вас работает.

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

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

Потом всё стало немного сложнее.

Особенно непросто стало проектам с примерами. Хочешь ты показать людям какую-нибудь фишку вёрстки картинок, или просто разнообразить серые квадраты, а картинки-то брать негде. Тут на помощь пришёл сервис Unsplash Source.

Он буквально выдавал рандомные картинки по некому адресу. Иногда — тематические. Но с 2021 года сервис был заморожен для новых пользователей, а не так давно — официально закрыт.

Но что же делать, не ставить же скучные плейсхолдеры?

И тут нам поможет https://picsum.photos/

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

Как-то так: https://picsum.photos/id/237/200/300

Ну или рандомную нужного размера: https://picsum.photos/seed/picsum/200/300

А ещё картинку можно на лету заблюрить! Вот так: https://picsum.photos/200/300/?blur

Или даже перевести в оттенки серого. Или в webp забрать. Есть даже API по параметрам картинок, всё для тренировки.

Удобно!

P. S. есть вероятность, что сервис заблокирован для РФ. Найду что-нибудь похожее.

#статья дня

А знаете ли вы, котаны, что такое безопасный треугольник печали? Aka safe triangle.

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

Да-да, в вашей Windows или MacOS такое тоже есть. Проверьте сами.

Собственно, почему я о нём заговорил? А тут вышла новая статья Ахмада Шадида и посвящена она такой важной вещи как "область взаимодействия".

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

В общем, с чего всё началось, зачем это нужно и как сделать сайты удобными — в первой интерактивной статье Шадида: https://ishadeed.com/article/target-size

Огромное количество примеров, просто новый уровень для автора. Моё увожение.

#css #ui #ux #safe #target #бородач

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

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

Одной из самых популярных задач по работе с изображениями было и остаётся удаление фона с картинок. Вокруг этого развелось какое-то невероятное число сервисов.

И все хотят денег.

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

Итак, вашему вниманию — Transformers.js, как средство работы с моделями, и одно из самых наглядных его применений — удаление фона с фото прямо в вашем браузере: https://github.com/huggingface/transformers.js-examples/pull/4/files

Демо: https://huggingface.co/spaces/webml-community/remove-background-webgpu

Бесплатно, без SMS.

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

Огонь? Огонь! 🔥

#js #ml