Квантовая механика: 100 лет открытий за один час

Видео выходного дня. Доктор физико-математических наук Алексей Семихатов популярным языком объясняет, как устроен мир согласно квантовой механике. Люблю такие видео, которые ломают мозг, но при этом двигают вперёд.

https://youtu.be/4iAkAT7mhnw

Игра Wordle на HTML и CSS

Очередное интересное применение возможностей CSS не для того, для чего он задумывался.

Скотт Джел попробовал реализовать игру Worlde без использования JavaScript. Вы можете помнить эту игру, она когда-то была на хайпе: есть 5 ячеек, нужно в них ввести буквы. Если буква правильная и на правильном месте, то клеточка закрашивается в зелёный. Если буква правильная, но не на том месте — в жёлтый. И если мимо — в серый.

Сначала Скотт реализовал только хардкорную версию, где нет жёлтых клеточек. Либо угадал полностью букву, либо нет. Для этого использовал комбинацию селекторов по атрибуту, псевдоклассы :invalid и :valid, отслеживание фокуса и показа плейсхолдера. У меня сразу возникла идея, что можно было бы сделать генератор кроссвордов, которому не нужен JavaScript — принцип работы тот же.

Затем Скотт попытался реализовать всё-таки жёлтые клетки. Но как будто валидация по паттерну у инпута не умеет в сразу два паттерна: возможные значения и правильные значения. Если бы можно было задать три состояния, тогда получилось бы на чистом CSS. Но, увы, пришлось всё-таки добавить несколько строчек JavaScript, чтобы доделать игру полностью.

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

https://scottjehl.com/posts/wordleish/

API для работы со складываемыми экранами

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

Начиная с Chrome 125 за Origin Trial появится доступ к Device Posture API и Viewport Segments API.

Device Posture API позволит через CSS и JavaScript понимать, в каком состоянии сейчас складываемое устройство.
- @media (device-posture: folded) — устройство согнуто, экран разделён на две части.
- @media (device-posture: continuous) — экран сплошной (подходит в том числе для обычных экранов).

В JavaScript появится navigator.devicePosture, из которого можно получить то же самое. А ещё на него можно навесить addEventListener('change', ...), чтобы реагировать на изменения.

Viewport Segments API посложнее, тут рекомендую вчитываться в примеры в статье. Но если коротко, в функции env() появится ещё несколько ключевых слов, которые помогут работать с размерами сегментов складываемого экрана. Честно говоря, синтаксис не самый запоминающийся, у разных положений разные кодовые числа. Но по сути это единственный гибкий способ узнать нужные значения для вычислений в CSS.

В JavaScript появится window.visualViewport.segments, в котором будет лежать массив сегментов с их размерами.

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

https://developer.chrome.com/blog/foldable-apis-ot

Правильные для языка кавычки

Небольшое напоминание, что в разных языках правильные с точки зрения типографики разные кавычки. Например, в русском языке правильно использовать «ёлочки», а не "лапки".

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

blockquote::before {
  content: open-quote;
}
blockquote::after {
  content: close-quote;
}

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

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

q {
  quotes: "((" "{" "[" "_";
}

Больше не буду мучить content и селекторы по атрибутам.

https://www.stefanjudis.com/today-i-learned/how-to-use-language-dependent-quotes-in-css/

Руководство для фронтендеров 2024

Коди Линдли собрал для Frontend Masters гайд по тому, что можно изучить современному фронтендеру, чтобы прокачаться. От основ до углубления в технологии.

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

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

В-третьих, раньше, конечно, веб-мастером стать было сильно проще, чем сейчас фулстеком. Я хоть и понимаю всё, что в гайде есть, но шёл к этому 15 лет. «Фронтенд не такой сложной, как бэкенд», — говорили они.

https://frontendmasters.com/guides/front-end-handbook/2024/

TypeScript 5.5 Beta

Хотел сделать подробный пост, но зачем, если Зар уже это сделал.

https://news.1rj.ru/str/zarzakharov/566

Длинный alt

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

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

А вот Адриан Розелли подробно и с примерами объясняет, почему длинные тексты в alt — плохо.

1. Альтернативный текст рисуется в браузерах вместо картинок, если картинки по какой-то причине не загрузились. И если с короткими текстами всё более-менее аккуратно рисуется, то с текстом, который не помещается в изначальную «коробочку» для картинки, каждый браузер ведёт себя по-разному. Safari вообще текст перестаёт рисовать. А в Chrome и Firefox текст либо ломает вёрстку, либо обрезается без скролла.

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

3. Ссылки и тексты на другом языке (отличном от языка элемента или страницы) в разных скринридерах тоже читаются по-разному, но везде что-то ломается.

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

https://adrianroselli.com/2024/04/long-alt.html

Современный системный набор шрифтов

Когда-то давно мне понравилась идея, что можно выбрать из системных шрифтов подходящие, чтобы вообще не тратить время на загрузку шрифтов для сайта. Поэтому у меня в блоге до вчерашнего дня основной шрифт для текста был system-ui — алиас для выбора дефолтного в ОС шрифта. Ну и для кода Fira Code, он слишком хорош, чтобы от него отказываться.

Дэн Кламмер собрал интересные наборы системных шрифтов из разных ОС, которые не настолько приелись в интерфейсах, при этом выглядят хорошо. Обновил у себя в блоге шрифты заголовков на набор Old Style — нравится. И всё ещё шрифты загружаются только для примеров кода, Core Web Vitals что надо. Дизайнеры, наверное, ужаснутся от того, как я работаю с типографикой на глазок, но у меня и не дизайнерский блог же.

https://modernfontstacks.com/

Что нужно знать, чтобы начать делать local-first приложения

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

Павел Гринченко рассказывает о трёх больших задачах, которые нужно решить, чтобы приложение научилось в local-first:
- хранение данных;
- синхронизация;
- разрешение конфликтов.

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

Пользы много:
- Когда интернет отваливается, пользователь не страдает. Просто решает свою задачу, как будто интернет есть. Синхронизацию можно делать в фоне.
- Мгновенный отклик UI. На нажатие кнопки не нужно ждать ответ сервера, а локальные хранилища сделать очень медленными ещё нужно умудриться.
- Запросы на сервер идут не один за другим, а пачкой. Операции можно собирать в кучу, делать синхронизацию именно когда нужно, а не на каждое движение мышки.

Но и реализовать local-first правильно тоже сложно. Нужно хорошо разбираться, как работает браузер, понимать CRDT и P2P. К счастью, Павел делится ссылками на решения, которые уже неплохо себя показали в реальных приложениях.

https://evilmartians.com/chronicles/cool-front-end-arts-of-local-first-storage-sync-and-conflicts

Инди vs Корпорат

Лёгкое пятничное.

Вастрик в свойственной ему манере шикарно раскладывает по полочкам, почему не стоит одинаково подходит к рабочим и пет-проектам. И почему кто-то делает инди-проекты на PHP+jQuery и получает миллионы долларов дохода, а кто-то пилит корпоративные приложения, следуя закону Конвея.

https://vas3k.blog/notes/indie_vs_corpo/

Как понять язык метрик своего бизнес-заказчика

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

https://youtu.be/asIcPJwF57Q

Телеграм-канал Серафимы:
https://news.1rj.ru/str/Serafima_Chekulaeva/

CSS Speech polyfill

Есть такая спецификация, CSS Speech Module Level 1. И несмотря на то, что у неё статус Candidate Recommendation, реализации нет ни в одном браузере пока. Как минимум потому, что для корректной работы в браузеры должны быстро встроены качественные синтезаторы речи, причём более-менее похожие.

А возможности там интересные:
- Свойство voice-family должно позволять выбрать голос озвучки текста. Как font-family, только звуковой.
- voice-volume, voice-pitch, voice-rate позволили бы выделять какие-то части интерфейса особыми интонациями.
- voice-stress работал бы по аналогии с <em>, выделяя важное.
- pause-before, pause-after помогали бы расставлять паузы в тексте.

К сожалению, негде посмотреть полноценную реализацию спецификации. Но можно поиграться с полифиллом, который работает на базе SpeechSynthesis API.

https://www.kryogenix.org/code/browser/css-speech-polyfill/css-speech.html

Видеокурс по Scroll-Driven Animations

Так вот зачем Брамус так много демок делал!

На Chrome for Developers вышла серия из 10 видео по тому, как работают нативные анимации, привязанные к скроллу. Объясняет всё Брамус, демками которого я вдохновлялся, когда сам готовил доклад по схожей теме.

В видео подробно и понятно объясняется, как работает каждый из аспектов таких анимаций:
- что такое ScrollTimeline и ViewTimeline;
- как отвязаться от времени и привязаться к позиции на экране;
- как завязаться на скролл стороннего блока;
- можно ли сделать анимацию, которая срабатывает всего один раз.

И всё это с большим количеством демок. Рекомендую.

https://developer.chrome.com/blog/scroll-driven-animations-video-course

CPUpro

Давно пользуюсь JsonDiscovery для анализа JSON. Рома Дворнов в принципе если что-то выпускает в паблик, то оно классное. Если ещё не пробовали — вот.

Сегодня Рома написал про ещё один инструмент, на этот раз для профилирования. Думаю, вы не раз видели огромные флеймчарты во вкладе Performance в DevTools. И я тоже сталикивался с тем, что для сложных приложений, где очень много библиотек, функции вызываются на rAF, подписки всякие на события, вкладка Performance сильно виснет.

В релизе 0.5.0 инструмента CPUpro упор сделан на перформанс. По сути это как вкладка Performance, больше подходящая для анализа больших файлов с информацией о профилировании. Есть разбиение по модулям, пакетам, функциям и категориям. Есть удобная фильтрация на регулярных выражениях.

Попробовал на profile-файлах для клиентских приложений и Node.js. Для серверного подходит лучше, очень много ценной информации о том, какие пакеты медленные, какие больше всего при обработке запросов крутят CPU. Удобство как раз в группировке, которой нет в обычной вкладке Performance. Для клиентских интересно было посмотреть, как браузерные расширения тормозят страницу и как часто срабатывает Garbage Collector. И всё это работает очень шустро (вижу под капотом куски Json Discovery, который очень хорош для обработки больших файлов).

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

https://github.com/lahmatiy/cpupro/releases/tag/v0.5.0

Прокачка навыков TypeScript

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

Но не всегда понятно, как на практике проверить, что я правильно понял написанное в Release Notes. А тут наткнулся на интересный сервис, где много задачек на TypeScript, разбиты они на категории и по сложности. И в декабре, оказывается, был свой Advent of TypeScript. Залип в этот адвент и не отлипал, пока всё не прошёл. Точнее, два задания я честно своровал из уже готовых решений, но по крайней мере разобрался в них. Валидация судоку на типах — это небольшой разрыв мозга, но смог сам.

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

https://typehero.dev/

Наложение градиента поверх элемента

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

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

.overlay {
  border-image: fill 0 linear-gradient(#0003, #000);
}

Попробую в нескольких местах отказаться от псевдоэлементов с аболютным позицинированием и игрой в z-index. Такой приём выглядит сильно проще.

https://frontendmasters.com/blog/quick-trick-using-border-image-to-apply-and-overlay-gradient/

Ещё один дашборд про веб-фичи

На Google I/O показали новый дашборд про то, какие фичи уже реализованы в браузерах. В отличие от caniuse там есть показатели прохождения Web Platform Tests (причём более удобно, чем это сделано на WPT, имхо), плюс можно посмотреть привязку фичи к Baseline.

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

https://webstatus.dev/

Новости фронтенда на канале Виталия Зюзина

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

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

https://news.1rj.ru/str/web_platform/111

Заметка о подсвеченном тексте

В CSS уже довольно много способов выделить на странице что-то, с чем взаимодействует пользователь. Выделенный текст? Держи ::selection. Грамматическая ошибка? На тебе ::grammar-error. Поиск по странице? Пока нет, но скоро будет ::search-text.

Адриан Розелли напоминает, что любые выделения на странице должны соответствовать критериям доступности. Контраст фона выделения и фона под ним — 3:1. Контраст текста поверх фона выделения — 4.5:1.

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

https://adrianroselli.com/2024/05/a-brief-note-on-highlighted-text.html

Minimum Lovable Product

Не так давно София Валитова показала мне парочку интересных статей про такой термин, как MLP — Minimum Lovable Product. Скорее всего вы слышали про Minimum Viable Product (MVP). «Ребята, у нас дедлайны, давайте сейчас MVP, потом нормально сделаем».

MVP — это минимально необходимое, чтобы выжить. MLP — это минимально необходимое, чтобы продукт полюбили.

В чём отличия MLP от MVP:

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

- MVP можно делать тогда, когда вы первые. Дешёвых файлохранилищ ещё нет, а вы Dropbox. Или вы придумали такой алгоритм сжатия данных, который лучше всех в мире, и маркетинг ему как будто не очень нужен, а инвесторы — нужны (кто понял отсылку, тот понял). MLP же чаще всего делают тогда, когда рынок уже заполнен альтернативами, и чтобы вам выделиться, надо сделать что-то «вау».

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

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

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

Мы как раз сейчас делаем один такой сервис, который вроде как технический, но так хочется сделать его живым и душевным 🙂

https://www.aha.io/roadmapping/guide/plans/what-is-a-minimum-lovable-product

@starting-style и transition-behavior для анимаций появления

Вот оно, применение новых фичей в CSS в комбинации, которая как будто много кому будет полезна. Идём по шагам:

1. Новое правило @starting-style. Описывает стили, которые у элементов устанавливаются в тот момент, когда их ещё нет, но как только они появятся, с них стартует анимация. Например, при вставке в DOM нового узла.

2. transition-behavior: allow-discrete говорит браузеру «анимировать» дискретные значения типа display: none. То есть изменение таких свойств произойдёт не мгновенно на первый же кадр анимации, а через transition-duration.

3. Применяем это на относительно свежий dialog и вполне себе свежий popover. Играем с opacity, scale и display (раз он у нас теперь отложенный).

4. Посыпаем сверху @media (prefers-reduced-motion: no-preference), не забываем о доступности.

На выходе получаем классные анимации появления модалок, всплывашек и, при желании, чего угодно, что появляется из ниоткуда (`display: none`, в смысле). Причём если раньше у вас этого просто не было, то добавив такое прогрессивным улучшением у пользователя по сути вы ничего не ломаете.

Адам Аргайл объясняет каждый шаг и показывает на примере, как оно может работать.

https://nerdy.dev/using-starting-style-and-transition-behavior-for-enter-and-exit-stage-effects