#фишка дня

Среди наименее используемых (в 2023 году) правил CSS имеется такое: background-attachment: fixed;

Что оно делает? Ну, собственно, закрепляет фон на экране так, чтобы он не двигался со скроллом. Году так в 2004-2006 было модно, во всяких браузерных играх 🫠

Давайте реабилитируем его.

Бывший деврел Google Jhey предлагает следующее: а что если следить за курсором мыши и передавать координаты в фон?

И таки да:
.card {
background:radial-gradient(circle at var(--x) var(--y), ...);
background-attachment:fixed;
}

Передаём --x и --y как координаты курсора и получаем прожектор!

Немного магии блендинга и красота: https://codepen.io/jh3y/pen/RwqZNKa

Время переосмыслять, котаны!

#css #js #var #spotlight

#ссылка дня

Воскресных котов вам в ленту! Но просто котов вы можете найти где угодно, тут же — HTTP-коты: https://http.cat/

Знать коды протокола HTTP должен каждый веб-разработчик, чтобы не попадать в глупые ситуации и правильно пользоваться API. А раз их можно выучить, глядя на котов, почему бы и нет.

#http #handbook #бородач

#статья дня

Работа с экранными единицами это моя любимая тема. Когда-то я подписчиков в канал набирал из CSS-чатов тупо кидая им этот пост: https://t.iss.one/htmlshit/65 — и потом этот, с решением поновее: https://t.iss.one/htmlshit/1233

Почему он был так популярен? Просто потому что 100vh на мобилах работали как не пойми что, из-за динамических тулбаров.

Ну и, конечно, моя любимая формула перевода из пикселей в rem и vh/vw: https://t.iss.one/htmlshit/1182

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

У меня не доходили руки описать их или даже попробовать, поскольку тогда поддержка была не очень. Но сейчас самое время! Ахмад Шадид как раз подготовил свою статью: https://ishadeed.com/article/new-viewport-units/

Люблю статьи Шадида за художественное оформление. Круче, наверное, только у Камю.

В общем, svh, lvh, dvh — вам туда :)

#css #viewport

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

Разобраться в концепциях Git просто не только лишь всем. Кто-то схватывает на лету, кто-то продирается сквозь ветки и листья документации. Кто-то забивает на всё, использует UI любимой IDE и ничего сложнее git pull origin master не разруливает.

Но насколько проще было бы, если появился бы симулятор происходящего под капотом. И ведь такой есть!

И называется он git-sim, вот так вот буквально.

Нужно разрулить конфликтный cherry-pick? Слить несколько веток вместе? Посмотреть последствия reset, stash, rebase? Да запросто! Просто вместо git команда пишете git-sim команда и наслаждаетесь.

Ах да, ссылки на примеры от авторов (много видео и иллюстраций): https://initialcommit.com/tools/git-sim

И на GitHub проекта: https://github.com/initialcommit-com/git-sim

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

#git #sim #tool #бородач

#такое дня

Без комментариев.

P. S. Ладно, ладно. Накинулись. Это все по историческим причинам так сложилось и вообще deprecated: https://developer.mozilla.org/en-US/docs/Web/API/Document/all

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

Каждый разработчик за свою жизнь должен сделать следующее: написать музыкальный плеер, тетрис, игру Жизнь. Если ты веб-разработчик, то ещё свою CMS, PHP-фреймворк, стейт-менеджер и... и уведомления.

Если тебе 14 лет, то ещё и криптобиржу.

Короче, уведомления вообще штука раздражающая. Всегда чего-то не хватает в существующих решениях. Но в любом случае, сегодня вашему вниманию React Hot Toast: https://react-hot-toast.com/

Отличаются маленьким весом, возможностью отмены скрытия пока наведена мышь, поддержкой промисов и JSX-содержимого, стилизуются, прости господи, через Tailwind. Не думал, что внесу это в плюсы, но после UI-китов на Emotion это уже очень хорошо.

Ещё бы туда диалоги добавить, было бы уапще.

Всем тостов, котаны! За мой счет :)

#react #toast

#статья дня

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

Давайте перефразирую: обернули ли вы в 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 #бородач

#видео дня

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

Многим из вас знакома концепция 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 #бородач

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

Что делать, если API не готов, моки писать лень, а приложение разрабатывать надо?

Ну или, например, портфолио отсутствует, а хочется сделать условную книгу контактов или приложение для знакомств? Откуда данные-то брать? Забивать lorem ipsum тоже неохота...

На помощь придёт генератор случайных юзеров!

https://randomuser.me/

Ну и естественно, есть и полноценный генератор случайных данных, в котором всё, что вам нужно сделать — это описать их схему и пару правил генерации: https://randomapi.com/

Так ваше приложение из портфолио будет выглядеть максимально реально. Да и в продакшене не придётся ждать кого-либо ещё.

#api #random #бородач

#статья дня

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

Передавать соотношение сторон можно через классы, конечно, но мы в 2023 году, так что будем использовать CSS-переменные (`--ratio: 4/3`). Дальше имеются два варианта:

1. Задать соотношение сторон всей строке через, удивительное рядом, складывание дробей: 4/3 + 2/3 = 6/3. Сразу можно понять, что минусов у решения достаточно.
2. flex-grow. Легко и просто.

Подробнее о решениях и ходе мысли в статье:
https://9elements.com/blog/building-a-combined-css-aspect-ratio-grid/

Флексы рулят, котаны :)

#css #grid #flex

#ссылка дня

Немного неожиданного контента хотите?

Не так давно открылся сайт DOTOWN с семью сотнями иконок в стиле 8-битных игр от дизайн-студии под руководством экс-дизайнера Nintendo:

https://dotown.maeda-design-room.net

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

Так что если вам за каким-то интересом понадобились восьмибитные иконки… ну может пет-проект у вас, вы знаете, куда идти.

Да, на японском. Но кого это вообще останавливало?

#icons #8bit #бородач

#статья дня

С чего начать построение своего веб-секвенсора?

Конечно же с изучения Web Audio и Web Midi API!

Статья Мэдса Стоуманна рассказывает не только о том, как сверстать свою MIDI-клавиатуру и потыкать в неё мышкой, чтобы послушать звуки, но и как подключить настоящую MIDI-клавиатуру и даже подсветить аккорды: https://blog.logrocket.com/exploring-web-audio-api-web-midi-api/

Ну и, конечно, сразу демо: https://codepen.io/stoumann/pen/ZEjjyEp

Есть у кого MIDI-синтезатор, кстати? Делитесь результатом!

#web #audio #grid #music

#автор дня

Ввожу новую рубрику! Ибо крутых авторов фронтенд-арта стоит отмечать отдельно. Мы уже обсуждали с вами создателей комиксов на чистых HTML/CSS и создателей CSS-арта вообще. Так же можно вспомнить Юрия Артюха и его великолепные WebGL-стримы.

Герой сегодняшнего поста — Julia Miocene (Юля Миоцен).

Итак, Юля делает прекрасные сюжетные анимации на чистом HTML/CSS а ещё она автор проектов https://keyframes.dev/ и https://www.pickles.rocks/

На каждую анимацию имеется видео с созданием и, собственно, кодпен. Вот, например, Зайцы с иллюстрации: https://codepen.io/miocene/pen/aPwrpw

Проработка деталей зашкаливает!

Канал Юли на YouTube: https://www.youtube.com/@julia_miocene/featured

А ещё есть совсем свежий стрим с Вадимом Макеевым, где процесс очень подробно объяснён: https://www.youtube.com/watch?v=ZhWdhMpJ8bs

Шикарное, короче :)

P. S. Мне тут подсказывают, что Юля также соведущая подкаста Веб-стандарты.

#css #art

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

Ох что я вам нашёл! Просто пушка.

Как вам отладка на мобильных устройствах? Ну только честно. По-моему — мучение.

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

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

Зато есть Eruda! Встраиваемая консоль для мобильных браузеров: https://github.com/liriliri/eruda

Демо: https://eruda.liriliri.io/

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

В общем, забавная вещь! В какой-то момент может и выручить.

#js #devtools #mobile

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

А есть ли среди моих подписчиков школьники и студенты/аспиранты? Потому что то, что я нашёл, очень может пригодиться при подготовке различного рода рефератов, презентаций и научных работ.

И это — кто бы мог подумать, моя любимая тема — снова DSL для представления диаграмм! Но на сей раз, всяческого рода научных, от простых блок-схем до описания векторных полей и молекул!

Ну вот буквально, молекула на иллюстрации описывается простыми конструкциями вроде:

SingleBond(N2, C4)
SingleBond(C4, C5)
DoubleBond(C5, C6)

...и так далее. Прелестно же!

Короче, называется это всё Penrose: https://penrose.cs.cmu.edu/

Работает полностью в браузере, написано на TypeScript и открыто. Естественно есть биндинги к React.

Всем науки, котаны!

#dsl #diagram #science

#ссылка дня

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

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

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

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

На помощь приходят подборки тестовых! Вот, например, от Хекслета: https://github.com/Hexlet/ru-test-assignments

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

Полезная штука, котаны. И не только для начинающих!

#work #assignment #list

#презентация дня

Итак, что у нас сегодня? А сегодня у нас прекрасное. Презентация Ивана Акулова с конференции 3perf: React Concurrency, Explained.

React 18 уже давно с нами, SSG-компоненты нынче считаются чуть ли не дефолтом (я не очень с этим согласен, но уж как есть), useTransition, <Suspense>... Надо втягиваться же.

Сразу ссылка: https://3perf.com/talks/react-concurrency/

Рассмотренные топики:
1. React 17 и блокирующее выполнение
2. То же, но в React 18
3. useTransition()
4. <Suspense>
5. Проблемы

Демки тоже включены 🙂

В общем, это прям лучший транскриб, что я видел на данный момент. Очень удобно.

#react #concurrency #suspense #бородач

#фишка дня

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

#баг дня

Итак, проблема известная с десяток лет: при автозаполнении полей форм Хром заливает фон поля цветом. Раньше жёлтым, сейчас — небесно-голубым (во всяком случае, на моём сетапе).

Так что же не так с этим поведением?

Ну, для начала, оно очень непросто отключается. А точнее, не отключается — можно только переопределить. А во-вторых, стоит вам поставить фоновую картинку на ваше поле, для, например, иконки — как Хром и её сотрёт. Вот, посмотрите сами: https://codepen.io/alinaki/pen/oNQyGjo?editors=1100

Повторю: поведение касается только автоматически заполненного текста.

Сразу скажу, что официально это багом не признано и разработчики Google Chrome вертеть нас всех хотели на своих won't fix-ах: https://bugs.chromium.org/p/chromium/issues/detail?id=46543

Какие у нас есть варианты? Вообще, несколько. Все — буквально хаки.

1. Установить атрибут autocomplete в "new-password" или в любое случайное значение. Отключит автозаполнение вообще.
2. Повесить слушатель на событие change поля и восстанавливать стили скриптом.
3. Убрать заполнение цветом можно через игры с transition, например:

input:-webkit-autofill {
  transition: all 9999s;
  transition-delay: 9999s;
}

...в кодпене выше так и сделано. Но картинке это никак не поможет, потому что background-image не анимируется.

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

Поэтому, дамы и господа, остаётся лишь один верный вариант: выносите иконку в отдельный элемент и размещайте поверх поля ввода. Победить это всё, кажется, возможным не представляется. По крайней мере, в рамках разумного 😔

#chrome #autocomplete #bug

#ссылка дня

Давайте раз уж обсудили проблемы с оформлением автоматически заполненных полей в Google Chrome, напомним себе о существовании user agent стилей вообще.

Что такое user agent стили? Это, в общем смысле, стили браузера по-умолчанию, встроенные. Выходит, не бывает "сырых" сайтов: даже если файл с вашей таблицей стилей по пути потеряется, будут применены встроенные.

Ну самый яркий пример, это синие ссылки, становящиеся фиолетовыми после посещения сайта.

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

Их не назвать в общем и целом бесполезными, нет, но именно из-за них были придуманы концепции reset.css и normalize.css.

Итак, какие же существуют? Давайте по порядку.

Chromium (Chrome): https://chromium.googlesource.com/chromium/src/third_party/+/master/blink/renderer/core/html/resources/html.css

WebKit (Safari): https://github.com/WebKit/WebKit/blob/main/Source/WebCore/css/html.css

Gecko (Firefox): https://searchfox.org/mozilla-central/source/layout/style/res/html.css

Serenity: https://github.com/SerenityOS/serenity/blob/master/Userland/Libraries/LibWeb/CSS/Default.css#L4

Mozilla Servo: https://github.com/servo/servo/blob/master/resources/user-agent.css#L9

Интересно смотреть, как стили Хрома и Вебкита тянутся ещё со времён KHMTL.

А что такое Serenity?

О, я ж выкладывал недавно. Это совершенно новый браузер для одноимённой экспериментальной ОС, выросший из простой библиотеки парсинга HTML. У меня даже получилось его под macOS собрать: https://t.iss.one/htmlshit/1821

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

Но бахать на * (селектор всего) что-то вроде общего display: block; background: transparent; всё же очень не рекомендуется, слишком многое можно упустить.

#css

#фишка дня

Голубые галочки захватывают мир! Теперь и в вашей почте, котаны.

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

Это называется BIMI: Brand Indicators for Message Identification и каждая компания может получить такой. Достаточно простого советского...

1. Логотип компании должен быть зарегистрированной торговой маркой. Не у всех это так, кто бы мог подумать.
2. Необходимо получить сертификат VMC. Процесс аналогичен получению сертификата SSL.
3. После логотип и сертификат вписываются в TXT-запись DNS, вроде:
default._bimi TXT "v=BIMI1; l=https://example.com/image.svg; a=https://example.com/image/certificate.pem"
4. ...
5. Вы великолепны и сверкаете голубой галочкой. В GMail и Apple Mail точно, дальше — больше.

В будущем требование регистрации торговой марки уберут, но вот сертификат всё равно получать придётся.

Пните своих CMO, котаны.

#web #bimi #logo #email