#новость дня

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

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

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

И на днях Дуров и Ко его у меня отобрали: 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

#codepen дня

Вам никогда не казалось, что подвалы сайтов незаслуженно обижены?

Скроллишь, скроллишь себе бесконечную загрузку твитов или постов в ленте, футер появляется на секунду — и тут же снова улетает с экрана, не успев сообщить что-то важное…

Стив Гарднер попытался визуализировать происходящее, вышло офигенно, целая история: https://codepen.io/ste-vg/pen/PoQgvBK

#scroll

#такое дня

По всей видимости, последняя ревизия клавиатурного механизма «бабочка» от Apple была достаточно надёжной 🤣

Но не судьба.

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

Кто соскучился по новым фреймворкам? Поднимите руки!

🙋🙋‍♂️🙋‍♀️🙋🙋‍♂️🙋‍♀️

Вижу лес рук. Прекрасно.

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

Что он такое? Это основанный на веб-компонентах (web-components) фреймворк, использующий файловый роутинг и свой собственный менеджер состояний.

Похоже на React и Lit одновременно? Ну кто бы мог подумать.

Цель проекта — нести веб-компоненты в массы, сделать их переиспользование и структуру проекта вообще максимально простой (привет, классовый Lit). Кроме менеджера состояний поставляется ещё и атомарный CSS-фреймворк (зачем? брали бы уж Tailwind, хайповать так хайповать).

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

Тут SSR из коробки, кстати. Может стать неплохой альтернативой 11ty.

#js #components

#статья дня

Disclaimer: мне не нравится решение, представленное в статье, которую я сейчас опишу. Почему же я её упоминаю? Потому что идея-то классная, но недожали.

Я писал о масштабировании интерфейса пару раз. Всё сводилось к следующему: берём ширину дизайн-макета за 100% и считаем единицы размеров относительно размера видимой ширины экрана:

Раз: https://news.1rj.ru/str/htmlshit/1182
Два: https://news.1rj.ru/str/htmlshit/1183
Три: https://news.1rj.ru/str/htmlshit/1229

Но с момента первой публикации этих постов (начало 2021 года) прошло достаточно много времени, инструменты вроде clamp и адаптивной типографики начали захватывать мир: https://news.1rj.ru/str/htmlshit/902

Так вот, ребята из статьи на CSS Tricks примерно в то же время решили применить оба подхода, заодно показав нативное CSS-решение прямого масштабирования: https://css-tricks.com/how-to-get-a-pixel-perfect-linearly-scaled-ui/

Так что же с ней не так?

Они наступили на те же грабли, что я когда-то с vw/vh: потеряли возможность масштабирования в браузере. А это жирный минус на десктопах (на мобилах такой проблемы нет).

Тем не менее, направление-то классное, надо подумать на досуге, как это сделать умнее.

Но не забывайте, что CSS-то развивается, появились запросы от контейнера и родительский селектор. Pixel-perfect вёрстке давно пора умереть в глобальном смысле.

#css #layout #design

#фишка дня

Заканчивайте использовать JSON.parse(JSON.stringify(obj)) для дублирования (aka глубокого копирования aka deep copy) объектов в JavaScript.

Такой метод игнорирует даты, неопределённые значения и не работает с циклическими зависимостями.

Уже достаточно давно имеется structuredClone.

Наличествует во всех современных браузерах, есть полифилл.

P. S. вот тока не надо мне про лодаш тут плиз) все же использовали JSON-решение из-за скорости ⚡️

#js #clone

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

Я решил, что плагины для Figma тоже будут сюда залетать. Особенно, если эти плагины реализованы на базе хороших статей по вёрстке.

Например, от Джоша Камю про красивые тени в CSS: https://www.joshwcomeau.com/css/designing-shadows/

Потому что все мы в душе немного художники.

Встречайте: https://www.figma.com/community/plugin/1068595505353552645/Beautiful-Shadows

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

#figma #css #shadow

#фишка дня

Вам уже должен быть хорошо знаком input type=“number”. Кто-то наверняка даже пытался стилизовать раздражающие стрелочки.

Но мало кто знает, что это (и ещё одно, угадайте, какое) поле ввода предоставляет свои псевдоклассы: :in-range и :out-of-range. Уже понятно, что они делают: если вы установили атрибуты min и max, вышеуказанные псевдоклассы позволят воспользоваться этим знанием в CSS.

input:out-of-range ~ span {
  color: red;
}

И естественно, подъехал (вот буквально) шикарный CodePen на эту тему:
http://codepen.io/jh3y/pen/MWWowEb

👉 @htmlshit

#css #input #number #range

#фишка дня

А давайте ещё больше безумных идей богу безумных идей.

Как вам фильтрация списка на CSS? Уж точно покруче FizzBuzz задачи на собеседовании.

А достигается волшебство путём использования селекторов пот атрибутам:

[term] { display: none; }
[term*="a" i] { display: list-item; }

i — означает case-insensitive, регистронезависимый ввод.

Пример на CodePen: https://codepen.io/jh3y/pen/NWyaomN

Пример, конечно, выглядит малость упорото — он на JS генерирует вышеописанный код на CSS, но даже при всём этом — выход весьма декларативен и позволяет поиграть эффектами скрытия-отображения элементов на ура.

Просто считайте это вашим маленьким DSL (domain-specific language, язык под задачу).

Основная идея: не забывайте, что у вас и такое есть под рукой.

#css #js #attributes

#такое дня

Посмотрел презентацию Apple. Мой новый ноутбук, конечно, не показали.

Но назрел вопрос: а кто-то вообще для часов верстал? Есть ли такой запрос на рынке вообще?

Поделитесь опытом.