Выбирали с командой лучшее название для переменной счетчика цикла. Я победил с…

…формулировкой: «Никаких циклов в новом коде, вы оборзели? Используйте методы перебора».

#фишка дня

Наверняка вы встречали подобные (на иллюстраци) предложения по генерации пароля. Заставить браузер предложить подобное на форме регистрации довольно просто: достаточно установить значение атрибута autocomplete как new-password.

Это не первый раз, когда у нас заходит речь об этом зачастую раздражающем атрибуте. Например, не так давно я писал заметку о том, как заставить Safari перестать пытаться исправить ваш одноразовый код: https://t.me/htmlshit/477

Но нелишним будет ещё раз напомнить: не забывайте про MDN. Все возможные значения автодополнения там отлично расписаны: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#Values

#css #autocomplete #password

#фишка дня

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

Как писал Джон Кармак: “I can send an IP packet to Europe faster than I can send a pixel to the screen. How f’d up is that?”.

Это я к чему.

Вот выкатили вы здоровую картинку на сайт, уж не знаю, почему. Может, удивить пользователя сверхкачеством хотели. Но её надо же не только доставить, но и декодировать. А если у тебя не последний айфон?

С доставкой нам поможет атрибут loading=“lazy”, но что насчёт декодирования?

Вуаля, такое тоже есть: decoding=“async”.

Можно использовать вместе с ленивой загрузкой, можно — раздельно. В зависимости от задач.

На сладкое держите неплохую лекцию об оптимизации изображений для SEO: https://youtu.be/F6KGcb6trXc с кучей нюансов, включая вышеописанные атрибуты.

#img #decoding #html

#видео дня

Правило scroll-snap, задающее поведение скролла и недавно коротко завирусившееся в твиттере в серии:

— Как Тесла/Эппл/Мета делают такие крутые карусели?
— Да с помощью scroll-snap!

…присутствует в CSS достаточно давно. С поддержкой, правда, были нюансы. Но сейчас мы аж в 2022 году, правда?

Так вот, презентация Adam Argyle описывает не только scroll-snap, но и сопутствующие свойства вроде scroll-margin: https://www.youtube.com/watch?v=34zcWFLCDIc

Слайды: https://oh-snap.netlify.app/#intro
Коллекция примеров: https://codepen.io/collection/KpqBGW

#css #scroll #snap

#статья дня

Всем нам так набивший оскомину хорошо знакомый ESLint наконец-то обновил формат конфигурационных файлов:
https://eslint.org/blog/2022/08/new-config-system-part-1/
https://eslint.org/blog/2022/08/new-config-system-part-2/

Первая статья рассказывает, как ESLint дошёл до жизни такой, добавляя всё больше и больше настроек, extends, :root, overrides, автоматическую загрузку зависимостей…

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

В целом, стало проще и прямолинейнее. Посмотрим.

#eslint #js

#новость дня

Помните новую среду исполнения JS для запуска серверов и использовании в качестве тулинга — Bun?

Ну она ещё использует движок JSC от WebKit, а не V8 от Google?

Ну она ещё дико быстрая, быстрее Node.js и Deno.

Нет? Ну вот я описывал: https://t.me/htmlshit/1305

Так вот, они организовали свою компанию — Oven (булочка печётся в духовке же) и подняли 7 лямов баксов инвестиций в первом раунде: https://twitter.com/oven_sh/status/1562248114773565440

И начали нанимать инженеров! На Zig и C++.

Короче, можно только радоваться ☺️

#bun #js #zig #cpp

#codepen дня

На TikTok развелось огромное количество дизайнеров, которые отточили владение прототипами в Figma до невероятных высот.

Естественно, под каждым из таких видео с названиями «how to make supa 3d carousel in Figma supafast» раздаётся вой вида: «А как это верстать?»

Ну иногда, к счастью, верстать это можно так же, как рисовалось, и Jhey — деврел Google — нам это демонстрирует при помощи градиентной маски, смотрим: https://codepen.io/jh3y/pen/gOeXgXv

Элегантно, конечно, но требует тонкой настройки, чтобы не кружилась голова 🤪

#css #tiktok #mask #gradient

#заметка дня

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

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

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

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

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

#такое дня

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

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

Что будет в следующий раз? «Используйте оператор 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://t.me/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://t.me/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