#фишка дня

Используешь сложные CSS-селекторы в JS-коде? Ошибка!

Не используешь при этом CSS.escape? Фатальная ошибка!

Самый яркий пример когда это может пригодиться: useId в React выдаёт код, который непригоден для прямого использования в JS. А ты это потом используешь, да-да.

В общем, смотрим на картинку, просвещаемся.

Ну и дублирую пример текстом, конечно:

document.querySelector(`[href=${CSS.escape('@')}]`); // "[href=\@]"

Так-то. Спасибо Стефану Юдису за эту находку.

#css #escape #бородач

#подарок дня

Когда твой бывший коллега зовёт поговорить за жизнь — и вручает собственноручно отпечатанный и покрашенный кубок 🥰

Приятно!

#фишка дня

Когда я наткнулся на этот твит в обсуждении утилиты работы с цветами Андрея Ситника, я не сразу примерил его на себя. Но, как оказалось, стоило бы.

Итак, давайте поясню для тех, кто по ссылкам не ходит.

В азиатских иероглифических языках почти весь ввод с клавиатуры происходит в аккордном режиме или же в режиме т. н. композитинга, общее название — Input Method Editor.

TL;DR: На экране всплывает окошко с символами или их группами и пользователь может что-то выбрать.

На каких-то ОС оно вызывается долгим зажатием клавиши, где-то — по хоткею, а где-то — автоматически и сразу.

Так вот, одно дело азиатские языки (я очень рекомендую посмотреть сам твит), а другое — разные европейские. И речь о диакритических знаках: умляуты, акуты, ударения, птички и шапочки.

Так вот, я не имею финской раскладки, потому буквы ä, å и ö ввожу как раз в режиме композитинга, долгим зажатием «материнской» клавиши.

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

Кстати, выбор Emoji из всплывающего окошка — туда же.

В JavaScript-событиях для этого режима имеется флаг isComposing. Поэтому если вы, как и я в примере на видео, решили реализовать ввод групп символов подобным образом — циклически перебирая поля ввода — стоит об этом подумать :)

Собственно, давайте и пример: https://codepen.io/alinaki/pen/MWMpdvO?editors=1010

И напишите в комментариях, как вы решаете проблему редкого ввода букв с диакритикой у себя в системе. Например, я не помню, как это происходит в Windows, а в Linux я использую клавишу Compose, она работает чуть иначе.

#javascript #composing #event

#такое дня

Наверное, я открыл бета-версию Apple Maps aka https://beta.maps.apple.com/ с браузера Ladybird? Или, может, хотя бы со старого Firefox или Midori?

Или Apple принципиально поддерживает только Safari?

Или же в моём Chrome на Linux не хватает каких-нибудь суперсовременных API, которые есть при этом в Chrome на MacOS и Windows и я получаю автоматический отлуп?

Нет, просто Apple вернула нам наш 2009 и определяет браузер по строке User-Agent aka UA! Стоит нам поставить расширение, подменяющее UA — как всё прекрасно работает и на Linux Chrome, и на любом Firefox.

Интересные всё же они люди. Ведь их же MapKit везде работает без проблем.

#фишка дня

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

Что это значит на практике?

Это значит, что если вы сделали space-between или space-around чтобы выровнять элементы по двум сторонам, вам не нужно точное их количество чтобы забить всю сетку для последней строки.

Ну то есть, последняя строка из двух элементов не должна «расползаться», элементам просто нужно встать в начало.

Достаточно поставить «распорку» в виде псевдоэлемента: https://codepen.io/alinaki/pen/KKRzMdz

Не делайте, как фейсбук, пожалуйста: https://www.tg-me.com/htmlshit/387

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

#css #flex #бородач

#фишка дня

Плохо с математикой? 360 градусов вводят в ступор? 2π радиан доводят до истерики? Грады это какой-то сплошной гон?

Используй 1 поворот! Вращение элементов никогда ещё не было таким простым!

turn — и готово!

#css #transform #rotate #бородач

Благодаря этому комментарию я понял, зачем у меня в закладках образовалась одна крутая фишечка :) Следующим постом вот прямо сейчас.

А в том, что в комментарии — надо просто минус отбить пробелами: https://codepen.io/alinaki/pen/jOjwbRe

transform: rotate(calc(3rad-179deg));
не работает. Зачем это всё вообще?

#статья дня

Как в CSS получить ширину и высоту видимой области экрана? Прямо в пикселях.

Повторяю: в пикселях, целым безразмерным числом. Чтобы вывести потом куда-нибудь, например.

Очень просто, всё внимание на иллюстрацию. А объяснение этого дела имеется в этом посте на канале: https://www.tg-me.com/htmlshit/2922.

И в статье Темани Афифа: https://css-tip.com/screen-dimension/

Да, CSS — типизированный язык :) Живите с этим.

#css #trigonometry

#такое дня

Это было бы смешно, если не было бы правдой.

Впрочем, это всё же смешно.

134 тысячи установок: Tailwind Fold.

#статья дня

Прекрасный рефрешер знаний по таблицам от Мишель Баркер: https://piccalil.li/blog/styling-tables-the-modern-css-way/

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

А люди потом в эксель не могли ничего скопировать.

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

Статья хороша тем, что посвящена не трюкам, а просто сводит воедино базу по доступности и удобству. Да, sticky columns там тоже описываются.

Ну и тут уместно напомнить о моём тейке про доступные таблицы: https://www.tg-me.com/htmlshit/2981

#css #table

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

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

И вот тут нам поможет сниппет для DevTools под названием Capo.js: https://github.com/rviscomi/capo.js

Порядок применения:
1. Берёте capo.js, значит
2. Солите его блять Загружаете как сниппет в девтулзы: https://developer.chrome.com/docs/devtools/javascript/snippets/
4. ...
5. Наблюдаете диаграмму в консоли! Она отобразит текущее и желаемое положение вещей.

А кому охота подробностей, тому вот сюда, на эту презентацию Виталия Фридмана: https://youtu.be/uqLl-Yew2o8

#css #js #performance #бородач

How Google handles JavaScript throughout the indexing process

Интересная статья от Vercel про то, как работает краулер сайтов гугла. Эта тема окружена кучей мифов разной степени зрелости. Когда то говорили, что краулер не умеет запускать JS, затем говорили что научился, но не дольше 5 секунд и на старой версии хрома. Ребята из Vercel решили поэкспериментировать с отдачей контента и выяснили интересные особенности работы гугл краулера

Самое важное, что можно выделить: краулер умеет работать с современным синтаксисом JS, а также отлично индексирует сайты, сделанные с применением серверных компонентов (и соответственно стриминга хтмл контента).

В целом в исследовании также много других интересных пунктов (как например тот факт, что индексируются только страницы с 3хх и 2хх кодами. Т.е. если вам необходимо отрендерить экран с ошибкой - лучше его отрендерить на отдельном урле или с помощью 4хх или 5хх кода хттп).

Рекомендую к прочтению, если вы работаете с SEO



https://vercel.com/blog/how-google-handles-javascript-throughout-the-indexing-process

#development #javascript #SEO

Не имеет смысла писать новость об этой же статье, у Максима хорошая выжимка 🙂

#статья дня

Даже две!

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

Конечно, сама ситуация довольно странная, и выглядит так: если у вас имеется замыкание, в котором вы обратились к некоему объекту, после выполнения функции в замыкании выделенная память не очистится. Вот: https://jakearchibald.com/2024/garbage-collection-and-closures/

То есть у нас не утечка памяти, но «захват и удержание»:

function demo() {
  const bigArrayBuffer = new ArrayBuffer(100_000_000)
  const id = setTimeout(() => {
    console.log(bigArrayBuffer.byteLength)
  }, 1000)

  return () => clearTimeout(id)
}

globalThis.cancelDemo = demo();      

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

Так вот, Нико Прананта нашёл решение для данного конкретного случая! И решение это потрясающее: нужно оставить ссылку на буфер за пределами замыкания: https://www.nico.fyi/blog/memory-issue-in-javascript-and-closures

А как это сделать?

Передать буфер следующим аргументом в setTimeout!

function demo() {
  const bigArrayBuffer = new ArrayBuffer(100_000_000)
  const id = setTimeout(
    (buffer) => {
      console.log(buffer.byteLength)
    },
    1000,
    bigArrayBuffer
  )

  return () => clearTimeout(id)
}

globalThis.cancelDemo = demo()

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

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

#js #memory #performance

#видео дня

Джош Комо (Josh Comeau) известен нам всем прежде всего как автор великолепных интерактивных обучающих статей.

Если вы с ним ещё не знакомы, его сайт — это мастхев в закладках: https://www.joshwcomeau.com/

И недавно на конференции в своём родном Квебеке он выдал прекрасную презентацию о его собственных моментах озарения. И, более того, попытался собрать их в некую ментальную модель, описывающую, что же, собственно, происходит: https://www.youtube.com/watch?v=kj7WGnUDaI4

Горячая рекомендация.

#css #talk

#статья дня

Новая статья Ахмада Шадида. На сей раз — об именованных областях сетки aka Grid Areas: https://ishadeed.com/article/css-grid-area/

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

#css #grid

#статья дня

Все любят хорошие статьи по SVG.

От базового понимания координат и viewBox, через transform к clipPath и его анимации с помощью GSAP. Вот так вот просто.

Каждый шаг стильно иллюстрирован и ёмко разжёван: https://www.cassie.codes/posts/swipey-image-grids/

#svg #viewbox #clippath #gsap #бородач

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

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

Ребята из tldraw.com пару дней назад анонсировали tldraw sync: движок для совместной работы, заточенных под их доску.

Я за tldraw слежу давно, ещё с того момента, как автор отрабатывал сглаживание рукописного ввода мышкой. Потом же они начали дико экспериментировать с ИИ-фишками, превратив простую доску в настоящий инструмент прототипирования.

Очень крутая штука, желаю им и коммерческого успеха тоже.

#server #collaboration

#молния дня

Простите, всё же размещу, потому что очень смешно.

IP адрес 0.0.0.0 не рассматривается всеми современными браузерами как адрес в локальной сети, поэтому запросы к нему пропускаются и уходят на локальную машину: https://chromestatus.com/feature/5106143060033536

Да, такого вообще происходить не должно, но вот многие разработчики как раз свои дев-сервера локально и запускают :) Ну ещё разные утилиты десктопные на самом деле не что иное, как веб-серверы (начиная с торрентокачалок).

Так что, теоретически, можно утащить что-то интересное из какой-нибудь компании.

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