Единица измерения `cap`

Ахмад Шадид столкнулся с задачей, когда нужно между словами добавить расстрояние, равное высоте прописной буквы. И обычно такое решается подбором пикселей или em, если знаешь метрики шрифта. Особо искушённые пользователи CSS могут прикрутить ex. Но на самом деле современные версии браузеров умеют в единицу измерения cap, которая равна той самой высоте прописной буквы. Браузер ведь и так знает метрики шрифта, а значит может и эту высоту передать в CSS.

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

https://ishadeed.com/article/css-cap-unit/

<dialog> с заблокированным скроллом

Скорее всего у вас была похожая задачка: при показе всплывающего окна сделать так, чтобы за ним не скроллился контент. Обычно для такого при открытии модалки при помощи JavaScript на body добавляют overflow: hidden. Но у такого подхода есть пара недостатков:
- Нужен JavaScript там, где он как будто не должен быть.
- Контент за модалкой начинает прыгать, потому что скроллбар убирается, а это влияет на ширину страницы.

Крис Койер делится простым рецептом, как на современном CSS эти недостатки убираются:
- Вместо JavaScript можно использовать body:has(dialog[open]). Если модалки сделаны при помощи dialog, то такого селектора достаточно.
- На html можно добавить scrollbar-gutter: stable;, чтобы при открытии модалки скроллбар прятался из-за overflow: hidden, но место под него оставалось. То есть контент прыгать не будет.

https://frontendmasters.com/blog/scroll-locked-dialogs/

TypeScript 5.5

Подъехал сочный релиз. Безусловно, надо вчитываться в код в анонсе, чтобы понять детали, но вот, что меня радует из новинок.

1. Inferred Type Predicates. TypeScript становится всё умнее и учится понимать из контекста, с какими типами мы работаем. Например,

const definedEntities = entities
    .map(e => allEntities.get(e))
    .filter(e => e !== undefined);

definedEntities.forEach(e => e.doSomething());

Раньше такой код выдавал бы '' is possibly 'undefined'. Сейчас TS понимает, что выше по коду все undefined уже ушли. Можно будет убрать столько as из кода!

2. Проверка синтаксиса регулярных выражений. И на опечатки укажет, и подсветит, когда с именованными группами вы работаете не так, как надо. Экономия времени полезная получится.

3. Поддержка новых методов Set из EcmaScript. Там добавили всякие пересечения, исключения и прочие полезные операции не так давно. Теперь оно и в TS будет валидно обрабатываться.

4. Новый флаг --isolatedDeclarations, который будет приучать вас более явно задавать типы для экспортируемых сущностей. Особенно полезно, если вы генерируете .d.ts для ваших библиотек.

5. В конфиге теперь можно пользоваться переменной ${configDir}, чтобы ссылаться на папку, в которой конфиг находится. Если у вас разные конфиги в разных папках, проще будет эти самые папки перемещать по проекту.

6. Сам пакет TypeScript «схуднул» на 30%. CI/CD станут быстрее.

7. Больше нельзя написать type undefined = any;. Честно говоря, не знал, что раньше было можно, как-то не было необходимости такие подлянки в проекты вставлять. Но теперь совсем нельзя.

И ещё всякое разное. Скидывайте команде, чтобы был повод завести тикет на обновление TS в проекте.

https://devblogs.microsoft.com/typenoscript/announcing-typenoscript-5-5/

Модификаторы БЭМ и нативная вложенность в CSS

После того, как в CSS стало можно вкладывать одни селекторы в другие, как мы это раньше делали в препроцессорах, остался один важный кейс, который довольно быстро принесли фанаты БЭМ.

.block {
   &__modifier {
      color: var(--omg);
   }
}

Вот так в CSS написать нельзя, селекторы — это не строки, которые можно просто склеить.

Но Владислав Зубко нашёл решение.

.tag-list__tag {
  --background-color: var(--color-red-200);

  &[class*='--html'] {
    --background-color: var(--color-green-100);
  }
}

И ведь по сути да, если у элемента есть заданный класс, то у него сработает и селектор по атрибуту [class].

https://whatislove.dev/articles/bem-modifiers-in-pure-css-nesting/

CodeRun. Большой запуск

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

Сегодня мы выходим из беты! Случилось то, к чему я шёл несколько лет. Очень волнительно 🙂

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

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

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

А всей большой команде CodeRun хочу выразить огромную благодарность за то, что помогли реализовать мою старую мечту — сделать классный тренажёр с интересными задачами для тех, кто хочет развиваться и прокачиваться. Люблю вас! 💛

https://coderun.yandex.ru/

Как ты кодишь? Виталий Харисов

Видео выходного дня. У Сергея Бережного есть формат, где он зовёт знакомых разработчиков и допытывается, как у них настроен IDE, какие алиасы в терминале, какой стиль кода они используют и так далее. В этом видео Виталий Харисов, с которым мы какое-то время вместе работали в Поиске в одной команде и даже парно программировали, переписывая куски Бабули, показывает свой сетап.

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

https://youtu.be/3grLGPuNBTo

Кастомные элементы не требуют дефиса в середине

Не знаю, зачем вам этот факт, но мне он показался интересным.

Думаю, у вас, как и у меня, где-то в голове было знание: «имена кастомных элементов должны содержать дефис (dash)». И я был уверен, что этот дефис должен быть в середине имени. Джим Нильсен выяснил, что нет.

<mytag-></mytag-> — это валидный кастомный элемент. Теперь живите с этим.

https://blog.jim-nielsen.com/2024/custom-elements-only-need-end-with-a-hyphen/

Классные анимации

Понравилась статья Эмиля Ковальски про то, чем отличаются посредственные анимации от классных анимаций. Откликается.

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

2. Классные анимации — быстрые. Тут очень согласен. «Да, я понял, что анимация красивая, можно мне уже сайтом пользоваться?» — очень часто на красивых сайтах ловлю такую мысль.

3. У классных анимаций есть назначение. Изменение состояния, привлечение внимания, плавный переход между экранами — ок. «Смотрите, я научился вставлять анимации везде» — не ок.

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

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

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

7. Классные анимации сделать тяжело. Нужно приложить усилия. Но оно того стоит.

https://emilkowal.ski/ui/great-animations

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

Видео выходного дня. Олег Федоткин погружается в то, как приносить крупные инновации в большие компании. Мысли, которые захотелось записать:

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

- Эффективность и продуктивность ≠ работа «туда». Можно продуктивно заниматься ерундой.

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

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

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

- Для диффузии инноваций важно внедрять новое постепенно, ориентируясь на инноваторов и ранних адоптеров, которые сами в случае полезного внедрения сарафанным радио повлияют на остальных участников внедрения. Инноваторы любят что-то новое, чего нет у остальных. Это как Apple Vision Pro, который по сути своей пока бесполезен, но техноблогеры всё равно его хотят.

- Раннему большинству новое не нужно. Им нужно что-то стабильное. А уже на позднее большинство влияет страх остаться не у дел, когда все перешли на новое.

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

- Соберу-ка я список инноваторов вокруг себя, чтобы через них эффективнее внедрять новое.

https://youtu.be/7HKJf7HGnTY

Адаптивные графики на HTML и CSS

Матиас Шафер делится тем, как из бар-чартов (диаграммы с горизонтальными полосками, их ещё горизонтальными гистограммами называют) на SVG получилось сделать адаптивный вариант на HTML и CSS. Причём это хороший пример для полезного применения многострадальных сабгридов.

- Гриды позволяют размещать подписи, значения и сами полоски как угодно. Хоть влево, хоть вправо, хоть одно под другим.

- Адаптивность реализуется довольно просто, достаточно переписать пару свойств по разметке грида.

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

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

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

- Я бы добавил чуть больше математики на calc и CSS-переменных, чтобы ещё меньше писать лишнего в самом HTML. Прям просится в демках поправить.

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

- При желании такой же подход можно применить и к колоночным диаграммам. Или даже превращать их в горизонтальные гистограммы, когда экран маленький, а колонок много.

Хороший пример для вдохновения, чтобы с чего-то начать и доработать под себя.

https://9elements.com/blog/responsive-bar-charts-in-html-and-css/

Клавиатурная навигация для CSS-игры

Темани Афиф продолжает удивлять. На этот раз он показывает по шагам, как на HTML и CSS сделать игру, которая работает с кнопками-стрелками на клавиатуре для передвижения персонажа по экрану. В демке Марио собирает монетки на время и уклоняется от гумб.

1. Стрелки меняют положение скроллбара в контейнере. То есть если у нас есть большой контейнер со скроллбарами, мы можем как-то реагировать на стрелки, если скроллбар двигается.

2. Свежее свойство animation-timeline: scroll(neasert inline), scroll(nearest block); позволяет привязать анимацию к положению скролла. То, что нам нужно.

3. Прячем сами скроллбары через scrollbar-width: none;.

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

5. Используем Style Queries @container style(...), чтобы менять холст под значения переменных.

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

7. Так как игра на скроллбарах, управление мышкой получаем из коробки.

Жду, когда Doom запустят на HTML+CSS и таких вот хаках. Кажется, недолго осталось.

https://frontendmasters.com/blog/how-keyboard-navigation-works-in-a-css-game/

Speculation Rules API для View Transition

Недавно браузеры начали у себя активно внедрять View Transition API для многостраничных сайтов, а не только SPA. Но у подобной красоты есть минус — браузер реально что-то рисует относительно поздно, прогрессивный рендеринг уже не работает.

Райан Седдон показывает, как при помощи ещё одного API, Speculation Rules API, ускорить показ красоты. Добавляете на страницу специальные правила, и браузер по ховеру уже через 200мс попытается отпререндерить будущую страницу. Это, конечно, даёт лишнюю нагрузку на сервера, но зато пользователь увидит то, что ему нужно, раньше.

https://ryanseddon.com/web/view-transitions-speculative/

Как собрать сложное расширение для Chrome

Нина Торгунакова в блоге Злых Марсиан по шагам собирает расширение для работы с сервисом Playbook. Сначала добавляет OAuth-авторизацию, пишет сам скрипт для сохранения медиа в локальное хранилище, затем добавляет пункт в контекстное меню браузера, обработку ошибок. И готовит расширение для публикации в Chrome Web Store.

Часто использую статьи марсиан как инструкции. Эта уже в закладках на случай, если захочу опубликовать какое-нибудь расширение.

https://evilmartians.com/chronicles/how-to-make-complex-chrome-plugins-a-zero-gravity-guide

Верстаем в прямом эфире

Точнее, верстать будет Полина Гуртовая, помогать ей будет Алёна Батицкая, а я буду давать комментарии. Решать будем задачи на вёрстку, которые я собирал для своей подборки на CodeRun.

Всё это состоится 18 июля в 20:00 по Минску. Приходите советовать советы и спрашивать вопросы в комментариях к стриму 🙂

https://news.1rj.ru/str/doka_guide/161

Разные способы спрятать что-то в DOM

Крис Фердинанди собрал полезную шпаргалку, в каком случае как лучше прятать элементы в DOM.

1. Свойство display: none. Прячет элемент полностью, контент элемента не читается скринридерами.

2. Атрибут [hidden]. Почти как display: none, только в HTML. Крис не пишет про это, но [hidden] легко теряет свою визуальную спрятанность, если поверх выставить display: block.

3. Свойство visibility: hidden. Прячет элемент, но оставляет вместо него пустое пространство. Контент элемента не читается скринридерами.

4. Класс .visually-hidden. Популярный набор свойств, которые заставляют элемент занимать нулевое пространство на странице, то есть быть визуально невидимым, но при этом оставляют содержимое читаемым скринридерами.

5. Атрибут [aria-hidden="true"]. Прячет содержимое от скринридеров, не влияет на визуальное отображение.

Статья Криса Фердинанди:
https://gomakethings.com/the-many-ways-to-hide-things-in-the-dom/

А ещё есть хорошая статья про прятание содержимого от скринридеров у Доки:
https://doka.guide/a11y/content-hidden/

Подводные камни In-app браузеров

Когда вы открываете ссылки в каких-нибудь нативных приложениях соц. сетей, они часто норовят открывать даже не WebView, а какую-то свою обёртку над WebView, которая имеет полный контроль над вашей страницей. Поль Эш-Лоран объясняет, почему такие обёртки — зло.

1. У них меньше функций, чем у браузеров. Просто потому, что операционные системы в принципе ограничивают WebView из соображений приватности и безопасности.

2. В In-app браузерах у вас вообще нет контроля над собственным кодом. Если какой-нибудь Cakebook решит вставить туда свой скрипт для «улучшения пользовательского опыта», то вы ничего с этим сделать не сможете.

3. Неконсистентный для пользователя UI/UX. Дизайнеры таких браузеров считают важным сделать что-то «удобнее оригинала», но забывают, что в основном пользователи сидят именно в обычных браузерах, поэтому там привычно. А сила привычки очень велика.

В 2022 году был скандал вокруг того, что Meta добавляет отдельный скрипт на каждую открываемую веб-страницу в своих приложениях, который отслеживает буквально каждое мельчайшее действие на странице. К сожалению, в 2023 году дело против Meta по этому кейсу было закрыто. TikTok делает так же. И не только они. Недавно Twitter/X зачем-то стал открывать страницы в первый раз в какой-то поделке, похожей на браузер, а во второй раз — в WebView.

Так и что с этим делать? Мы не контролируем собственные сайты?

В статье предлагается посмотреть на https://inappbrowser.com/ и https://inappdebugger.com/, которые помогают детектить, открывается сайт в обычном браузере или в In-app браузере. Плюс показывают код, который был внезапно вставлен на страницу извне.

Для Android можно использовать префикс intent: в ссылках. Так операционная система будет понимать, что вы хотите открыть именно дефолтный браузер в системе, а не In-app.

Также для любых ОС, если вы хотите сберечь пользовательские данные, можно задетектить, что страница открыта в In-app браузере, и вывести для пользователя инструкцию, как открыть страницу в нормальном браузере. Увы, требует дополнительной разработки, причём поди ещё угадай, какую инструкцию составить. Тот же Twitter очень дерзко в своём In-app браузере в принципе не даёт опции открыть в дефолтном браузере.

https://frontendmasters.com/blog/the-pitfalls-of-in-app-browsers/

Стилизация таблиц современным CSS

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

- border-collapse: collapse схлопывает границы ячеек в одну общую.
- <thead> и <tfoot> — полезные элементы, чтобы выделить заголовочный ряд и ряд «Итого».
- У таблиц есть <caption> — подпись к таблице. И её можно двигать при помощи caption-side: bottom.
- Чтобы научить таблицу уважать задаваемые ширины колонок, нужно задать ей свойство table-layout: fixed.

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

https://piccalil.li/blog/styling-tables-the-modern-css-way/

Фронтенд 2024: тренды, CSS, доступность, браузерные API

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

https://youtu.be/9I1g06XSYZk

Typenoscript теперь и в Node.js?

В свежем выпуске мы затронули нашумевший PR. Что случилось то? А случилось такое, что в Node.js подвезли в экспериментальном режиме загрузчик для ts файлов. Работает он очень просто (правда просто). В ноду вшивается SWC в виде скомпиленного для WASM бинаря. TS файлы прогоняются через SWC и из них отстреливаются типы. Всё. Enum и namespace не работают (о счастье). Никакие транспиляции трансформации не производятся. Просто отстреливаются типы.

Есть ли проблемы? Конечно есть. Например, нужно писать расширение файлов в импортах. Потому что импорт так работает бай дизайн.

Почему это круто и важно? Потому что транспиляция раздражает. Потому что хочется всё иметь из коробки и без настроект. Накидать ts-файлик и запустить.

В общем, неожиданно и очень приятно.

Кастомное сообщение при подключении ESM через require

Если попытаться подключить ESM-пакет внутри CommonJS, Node.js выдаст вам ошибку. По ней, в принципе, достаточно понятно, что надо что-то поменять, но Зак Лезерман делится рецептом, как выдать кастомное сообщение, если ваш пакет уже не поддерживает CommonJS.

Для начала нужно попросить Node.js использовать разные файлы для разных способов импорта, внутри package.json пакета.

{
 "type": "module",
 "main": "./lib.js",
 "exports": {
  "import": "./lib.js",
  "require": "./libCommonJs.cjs"
 }
}

А затем внутри cjs-файла осознанно упасть.

try {
 module.exports = require("./lib.js");
} catch (e) {
 if(e.code === "ERR_REQUIRE_ESM") {
  throw new Error("Oops. It's not the module you are looking for.");
 }
 throw e;
}

Как верно замечает Зак, Node.js планирует скоро сделать так, чтобы внутри require можно было загружать и ESM-модули (с некоторыми ограничениями), так что лайфхак временный.

https://www.zachleat.com/web/future-friendly-esm/

Сборщик мусора и замыкания

Джейк Арчибальд делится интересным кейсом, в котором неожиданно в JavaScript утекает память.

function demo() {
  const bigArrayBuffer = new ArrayBuffer(100_000_000);

  (() => {
    console.log(bigArrayBuffer.byteLength);
  })();

  globalThis.innerFunc = () => {
    console.log('hello');
  };
}

demo();

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

Подробнее в статье.

https://jakearchibald.com/2024/garbage-collection-and-closures/