#заметка дня

Если вам сказали, что feature freeze — это про фикс багов, то вам сказали неправду.

Или, как минимум, полуправду.

Нельзя фиксить баги без тестов. Если ваш продукт не покрыт тестами, включая интеграционные и e2e, фикс багов в лучшем случае приведёт к тому, что вы что-то забудете починить. В худшем — принесёт новые баги.

Цель feature freeze — отладить и автоматизировать процессы, и закрепить текущее состояние продукта в тестах на каждый customer journey, чтобы не принести регресс. Чтобы не стало хуже.

Вот через это мне и команде скоро предстоит пройти. Попробую держать в курсе открытий чудных.

#такое дня

Я не могу уложить в голову, зачем Андрей Ситник ретвитнул это:

«В javanoscript можно обозвать выражение. Например, дать имя внешнему циклу, чтобы по имени остановить его уже во внутреннем цикле»

Что будет в следующий раз? «Используйте оператор goto чтобы эффективно перемещаться между частями программы?»

Что это такое было вообще?

#фишка дня

Менеджер паролей в Google Chrome умеет определять, утекли ли ваши пароли вместе с остальными в результате взлома (или кривой конфигурации) очередного сервиса. Это не является секретом.

А вот что интересно — он предлагает сменить этот самый пароль. Но у разных сервисов же разные ссылки на страницы запроса паролей. Google и это знает?

Нет! Ему и не надо. Ведь есть соглашения.

Одним из таких соглашений является концепция Well-Known URI (известные ресурсы).

Давайте покажу: Chrome вас бросит на ссылку вроде такой: http://www.loc/.well-known/change-password

И .well-known/change-password редиректит на смену пароля. Актуальность за вами.

Если вы хоть раз добавляли на сайт Apple Pay, концепция должна быть знакомой.

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

#security #rfc #wellknown

Маленькое уточнение: так себя ведёт не только Chrome.

Менеджер паролей в Safari был первым, кто это предложил ещё в 2019 году. Chrome сразу подхватил. А вот Mozilla забили: https://mozilla.github.io/standards-positions/#change-password-url

Из известных сайтов поддержка имеется на Google, GitHub, Facebook, Twitter, Wordpress.

Ну а тут подробнее: https://web.dev/change-password-url/

#заметка дня

Когда Ахмад Шадид выступал у нас с Defensive CSS, возникла забавная проблема.

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

Алгоритмы видео Google Meet сильно режут контраст. В итоге разницы между акварельным голубым и акварельным розовым вообще не было заметно. А это были ключевые моменты примеров.

Думайте об этом выбирая цветовую гамму проекта. Ведь бывают и просто плохие дисплеи.

Вспомнил я про эту особенность потому что мне на глаза попалось огромное количество статей о неоморфизме. История циклична.

А неоморфизм он весь состоит из мягких теней, формирующих объём. Их точно так же не видно при плохом контрасте.

Хорошо, что некоторые статьи об этом все же упоминают: https://refine.dev/blog/neumorphic-css/

Так что не жалейте контраста. Оставьте акварель художникам.

#заметка дня

По сети вирусится очередной секрет Полишинелля: оказывается, разница в скорости передачи 14 и 15 Кбайт данных гораздо больше, чем между передачей 15 и 16 Кбайт данных. Какой ужас, как же так? Ведь всего один килобайт разницы и там и там!

Понятное дело, что если у вас был курс сетей в универе или вы вообще этим интересовались, никакого секрета нет. Именно 14 Кбайт умещаются в стартовые 10 пакетов алгоритма TCP slow start.

Из названия примерно понятно что происходит: отправитель и получатель обмениваются сначала 10 пакетами, потом 20 пакетами, потом 40 пакетами и так далее. Размер пакета — 1500 байт, туда-сюда, на данные 1460. Вот вам и 14 Кбайт данных на старте.

Уместите свой ресурс в 14 Кбайт — получите быструю доставку :)

P. S. речь тут не идёт о стриминге, там UDP.
P. P. S. Вот подробнее, кому интересно. Тема всплывает с завидной регулярностью и статья трёхлетней давности описывает всё то же самое: https://www.tunetheweb.com/blog/critical-resources-and-the-first-14kb/

#библиотека дня

Я тут такое нашёл, закачаешься. Очередные выкрутасы с Shadow DOM. На сей раз — метаязык для описания паттернов.

Короче говоря, можно шикарные фоны делать не ограничивая себя возможностями градиентов.

Называется это всё <css-doodle/>: https://css-doodle.com/

Описываем нужный нам паттерн используя правила CSS и простые функции типа flip, reverse, shape, random и так далее, там полновесный декларативный язык.

Огромное число примеров, большое сообщество. Вот, например, автор описывает как сделать классический китайский орнамент на простых flip-invert-reverse функциях: https://yuanchuan.dev/flip-invert-reverse

В общем, потрясающая штука.

#css #pattern #doodle

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

Помните пост про плейсхолдеры? https://news.1rj.ru/str/htmlshit/431

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

Для этого можно или поставить серое поле, или применить различные техники под общим названием LQIP — Low Quality Image Preview: https://github.com/zouhir/lqip

Например, SQIP: https://github.com/axe312ger/sqip (произносится сквиб, Гарри Поттер объяснит).

Задача показать вместо оригинального изображения что-то передающее хоть какую-то информацию об исходнике.

И вот новое: BlurHash от Wolt: https://blurha.sh/

Для генерации используется хеш вида LEHV6nWB2yk8pyo0adR*.7kCMdnj (ограниченный набор из 83 доступных символов). Плагины есть под любые мыслимые средства, от Eleventy до Flutter.

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

#css #img #placeholder

#фишка дня

Не так давно я писал о доступном внедрении таблицы в документ: https://news.1rj.ru/str/htmlshit/1285

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

Но что если для вашего UX критично понимать, что произошёл фокус внутрь контейнера?

Например, при фокусе внутрь группы полей ввода на форме надо показать некое предупреждение.

Решение есть! Смотрим: https://codepen.io/alinaki/pen/PoRrVom

Здесь event.currentTarget это непосредственно элемент, в котором произошло событие, а relatedTarget — элемент, принимающий следующее событие того же вида, если такой присутствует в документе.

Событийный элемент содержит в себе следующий — мы попали в группу. Ясное дело, это существует не только для onBlur.

Подробнее:
Focus-события: https://udn.realityripple.com/docs/Web/API/FocusEvent/relatedTarget

События мыши: https://udn.realityripple.com/docs/Web/API/MouseEvent/relatedTarget

#event #focus #blur #mouse #js

#новость дня

Скорее, #такое дня.

В мае я выкупил по договорённости у одного человека более подходящий никнейм для канала. Повесил там визитку и стал думать, как бы перенести всё без потерь и обыграть тему «Будней разработчика» правильно, не потерять статистику и аудиторию.

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

И на днях Дуров и Ко его у меня отобрали: https://habr.com/ru/news/t/685288/

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

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

Это крайне мерзкое поведение :(

#ссылка дня

Олды тут?

Когда я начал официальную рабочую карьеру как верстальщик, в 2006 году, не было в интернете ресурса круче по CSS чем http://cssplay.co.uk/

И что-то мне подсказывает, что и нет.

Автору уже тогда было под 60, сейчас 74, но он фигачил и фигачит потрясающе сложные и при этом простые для понимания примеры вёрстки.

В 2009 году, например, в моде были выпадающие мега-меню, у него десятки их примеров. Естественно, без хаков для IE6 тогда не обходилось вообще ничего. Before, after? Забудьте. Flex? Забудьте. Float во все поля.

Коллекция меню поражает воображение. И до сих пор обновляется!

Раскладки на любой вкус и браузер. Всё категоризировано. Тоже обновляется!

Ну и он один из первопроходцев игр на CSS: http://www.cssplay.co.uk/menu/cssplay-whack-a-rat.html

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

Не старейте, котаны.

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

Sorry old chap. Increase the width of your browser to view this site.

…именно эту фразу вы увидите, открыв представленную ссылку на телефоне.

Но на самом деле, это красивая интерактивная история, игра если хотите, обучающая основам Git. Крайне рекомендую заварить чаю и пройти её вечерком.

https://git.bradwoods.io/

#git

#совет дня

Буду краток.

Когда верстаете проект, расставляйте aria-label на интерактивных элементах сразу.

Хрен с ней, с доступностью. Просто потом не будете сидеть как я и заполнять action name для системы трекинга на каждый чих 😭

#статья дня

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

Давайте перефразирую: обернули ли вы в try-catch все ваши вызовы localStorage, sessionStorage, IndexedDB? Нет? А почему?

Почему я до сих пор в тестовых вижу сырые вызовы localStorage? Опустим тот факт, что многие там ещё и токены хранят…

Так вот: если пользователь отключит куки, он получит такое веселье, как на скриншоте выше. И пустой экран заодно. Оно вам надо? Обработайте ошибку и предупредите нормально.

Ошибаются все, даже MDN. Вот собственно обзорная статья об этом: https://blog.tomayac.com/2022/08/30/things-not-available-when-someone-blocks-all-cookies/

Я тоже огрёб как-то раз, забыв обернуть localStorage в try-catch и выкатив код на продакшен. Оказалось, среди клиентов много параноиков.

Ну что делать.

#cookie #localStorage

#шпаргалка дня

Не понимаете CSS-селекторы? Их есть у меня! А точнее, у автора.

https://raw.githubusercontent.com/eludadev/css-docs/main/assets/css_selectors.png

P. S. дежурное напоминание о том, что шпаргалки полезны только тому, кто их пишет.

Хотите пользы от шпаргалки? Хотя бы повторите её.

Вот возьмите и сделайте из этой кодпен и зашлите нам, с удовольствием выкатим.

#css #cheatsheet

#codepen дня

Глядите-ка, один из подписчиков воспринял предыдущий пост всерьёз и таки выкатил интерактивную шпаргалку: https://codepen.io/mdss/pen/yLjBMEX

Просто прекрасно! Спасибо :)

Не стесняемся, котаны. Дополняем и расширяем. nth-child кто добавит?

#css #selectors #cheatsheet

#фишка дня

Если вы дислексик, или просто устали считать цифры в длинных числах, используйте разделители!

Думаю, картинка говорит сама за себя.

1_234_567_89,01 после трудового дня как-то легче считывается, чем 123456789,01.

P. S. Пример намеренно игнорирует разряды, не душните :)

#js #number

#видео дня

Давно стоило и пересмотреть это видео, и выкатить в канал.

Многим из вас знакома концепция DRY: Don't Repeat Yourself. Вот только многие доводят её до абсурда, плодя абстракцию за абстракцией и пытаясь объять необъятное (сам таким был).

Но есть и другой подход, буквально — WET.

Write Everything Twice.

Да-да, пиши-повторяй. Стоит ли тратить время на объединение разных сущностей до того, как это вообще понадобится, или лучше потратить его на закрытие бизнес-потребности?

И вот об этом доклад Дэна наше всё Абрамова на конференции Deconstruct'2019.

Есть транскрипт, кстати: https://www.deconstructconf.com/2019/dan-abramov-the-wet-codebase

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

#video #conference #dry #wet

#стрим дня

…который будет 6 сентября.

В общем, есть тип такой, Джейсон Ленсторф, он ведёт обучающие стримы по веб-технологиям.

И у него на стриме 6 сентябра будет создатель курсов по TypeScript, Мэтт Покок: https://www.learnwithjason.dev/advanced-typenoscript-let-s-learn-generics

Тема стрима — дженерики в TS. Без вопроса по дженерикам не обходится ни одно интервью.

Залетаем, смотрим, учимся.

#ts #generics

#фишка дня

Многие (к сожалению, не все) кто хоть раз разрабатывал формы, сталкивались с элементом label (лейбл, ярлык, как вам угодно). И знают, что при правильном его использовании пользователю не приходится целиться мышью в галочку или радиокнопку.

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

Но не все знают, что лейбл можно повесить и на элемент button: https://codepen.io/alinaki/pen/XWjLedQ

Да, возможно, кнопке свой ярлык не нужен и даже MDN сообщает нам об этом, но!

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

Лейблом можно продублировать кнопку без внесения лишней когнитивной нагрузки (но не стоит, фокус он не примет). Пожалуй, для каких-нибудь игровых интерфейсов вполне может быть приемлемо.

А вот если вы не используете кнопки и балуетесь role=“button” на div-ах (в лучшем случае) — этой возможности вы лишены в принципе.

#html #button #label

#обман дня

Не так давно мы с вами радостно приветствовали введение штатной «ленивой» загрузки для тегов img и iframe. Был добавлен атрибут loading, который может принимать значение lazy и eager. Перевод, думаю, не требуется.

И блоги разработчиков и соиздателей браузеров радостно кричали: «Теперь ленивая загрузка картинок возможна даже при отключённом в браузере JS». Пруф (04.09.2022): https://web.dev/browser-level-image-lazy-loading/#:~:text=still%20works%20even%20if%20javanoscript%20is%20disabled

Хрена с два. Мы тут с пользователем Твиттера Стефаном Юдисом выяснили, что ленивая загрузка в Chrome таки отключается. Как и обещал нам MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading

Статья в блоге Chrome на днях будет исправлена. А вы пока попробуйте предположить, почему так. Это очень забавно.

#js #lazy #img