mefody.dev

Как квантовые компьютеры ломают интернет

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

https://www.youtube.com/watch?v=-UrdExQW0cs

Верни true, чтобы выиграть

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

https://alf.nu/ReturnTrue

Полезный TypeScript для React

Хороший набор советов, как TS может помочь вам удобнее работать с React-приложениями. Якоб Пэрис делится готовыми типами и лайфхаками.

1. ReturnType — очень удобный способ получить возвращаемый тип функции. Незаменимо для колбеков.

2. Для children лучше использовать ReactNode, который одновременно и ReactElement, и фрагмент, и строка, и число — что угодно, что для реакта может быть адекватным содержимым компонента.

3. React.ComponentProps поможет достать пропсы компонента, если нужно сделать над ним обёртку или сделать что-то совместимое. Выручает, когда библиотека компонентов под капотом использует компоненты из других библиотек.

4. Вместо того, чтобы перечислять все возможные значения полей типа, лучше делать union над разными вариациями типов. То есть не { verdict: 'ok' | 'not-ok'; isOk: boolean; }, а { verdict: 'ok'; isOk: true; } | { isOk: false; verdict: 'not-ok'; }. Так TS сможет вам помогать разруливать зашитую в типы логику, а не просто подсказывать все возможные значения полей в автокомплите.

Больше советов — по ссылке.

https://www.jacobparis.com/content/react-ts

Anchoreum

Люблю обучаться в игровой форме. Когда-то прокачивал навык вёрстки гридами при помощи CSS Grid Garden. А сейчас появилась похожая игрушка для практики с CSS Anchor Positioning. Работает в Chrome Canary, начал проходить — нравится.

https://anchoreum.com/

Ведём диалоги

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

https://nerdy.dev/have-a-dialog

overflow: clip

В CSS у overflow-x: hidden и overflow-y: hidden есть одна важная особенность: если вы таким образом прячете переполнение по одной оси, автоматически переполнение прячется и по другой (там значение становится auto). То есть нет удобной возможности спрятать только то, что вылазит по вертикали, например.

Ахмад Шадид рассказывает про то, как работают значения overflow-*: clip. Это как раз то поведение, которое нам нужно, чтобы что-то спрятать по одной оси, но по другой оси всё красиво показывалось. В статье есть демки, которые помогают лучше разобраться с особенностями работы свойства.

Я с таким много раз сталкивался, когда нужно было всякие декоративные элементы прикрепить к блоку на всю ширину вьюпорта. Если ничего не прятать — появляется горизонтальный скролл. Если спрятать по горизонтали — декоративные элементы обрезались по вертикали (прятались под скролл). Приходилось выкручиваться псевдоэлементами, абсолютным позиционированием и трансформациями. А теперь можно делать всё это сильно проще.

https://ishadeed.com/article/overflow-clip/

Получить ширину скроллбара при помощи CSS

Короткий, но интересный лайфхак от Темани Афиф. Всё, что вам нужно, это простой советский CSS Container, @property и вычитание.

https://css-tip.com/width-scrollbar/

У CSS новый лого

Пока в соц. сетях между адептами Tailwind и БЭМ идут очередные тёрки, а AI-стартапы учатся генерировать целые приложения в 2 клика, Адам Аргайл запустил на гитхабе голосование за новый логотип CSS. Началось это ещё в августе, а буквально вчера выбор был сделан.

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

https://github.com/CSS-Next/logo.css

Отличия между поповерами и диалогами

Мы в подкасте часто обсуждаем, как в браузеры внедряются поповеры (атрибут popover), которые могут заменить в каких-то случаях тултипы, а в каких-то — модальные окна. При этом есть dialog, который как будто умеет в похожую функциональность. Когда и как что применять — большой вопрос.

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

https://css-tricks.com/clarifying-the-relationship-between-popovers-and-dialogs/

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

https://www.youtube.com/watch?v=x4ZCGfUZntk

Самозванцы, выгорание, границы

Видео выходного дня. Анастасия Калашникова — практикующий психолог, ведущая тренингов для айтишников, основательница проекта PSYvIT. Давно подписан на её канал, смотрю доклады и вебинары.

Есть старенький, но всё ещё актуальный доклад от Анастасии, где она глубоко погружается в темы «синдром самозванца» и «выгорание»: что это такое, как оно влияет на нашу психику и физиологию, что с этим делать. Полезно посмотреть, чтобы понять, есть ли вообще у вас этот синдром (а то сейчас почти у каждого либо синдром самозванца, либо выгорание), и в целом немножко прокачаться в осознанности. Я сейчас как раз столкнулся с ощущением «вот они все молодцы, а я сюда только пришёл, я точно хуже остальных» — доклад устаканил тревогу в голове.

https://www.youtube.com/watch?v=2BBumwv-jVY

Pkl — замена YML и JSON от Apple

Оказывается, у яблочной компании есть опенсорсное решение для конфигурационных файлов. Что обычно нужно для конфигов? Понятный простой синтаксис, возможность наследоваться от базовых конфигов и расширять шаблонные, валидация схемы данных. И новый pkl (Pickle) как будто всё это умеет.

class AppConfig {
  port: Int = 8080
  logLevel: String = "INFO"
  timeout: Duration = Duration.seconds(30)

  function validate() {
    port > 0 && port < 65536
  }
}

api = new AppConfig {
  port = 3000
  timeout = Duration.minutes(2)
}

Как будто всё по коду понятно даже без объяснений. Есть наследование, есть валидация, есть схема данных, всё в понятном формате.

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

https://www.trevorlasn.com/blog/pkl-apple-new-configuration-language

Прекрасные аутлайны для фокуса

Томас Гюнтер делится советами, как сделать хорошее выделение фокусом, если дефолтные браузерные вам не подходят.

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

2. Если нужно выделить только текст, без фона, можно цветом обводки сделать currentColor — в целом, смотрится неплохо. В статье есть готовый сниппет, который можно попробовать вставить в проект как умолчание, если дизайнер пока не придумал отдельно фокусные состояния интерактивных элементов.

3. Когда элемент находится на каком-то фоне, нужно помнить про контрастность, подсматривать в рекомендации WCAG. Красивая белая обводка на белом фоне — лучше уж дефолтная браузерная.

4. Обводку можно делать двойную (внутри светлое, снаружи тёмное) при помощи outline и box-shadow. Вполне себе универсальный паттерн, который будет смотреться хорошо почти на любом фоне, если вдруг не наткнётся на опасный overflow: hidden.

5. Можно в принципе не делать никакую обводку, если есть уже готовые стили для :hover, которые явно меняют внешний вид элемента, чтобы было видно, что он выделен. Заметное изменение фона, цвета текста, тени или бордера — что угодно, лишь бы было понятно, что я сфокусировался на элементе.

https://medienbaecker.com/articles/focus-outlines

Селекторы CSS: простые и сложные

Читал на FrontendConf доклад про то, что умеют селекторы и какие есть интересные и необычные приёмы, чтобы выбрать что-то в DOM-дереве. Казалось бы, что там можно на целый доклад собрать. А вот как начал собирать материалы, сам удивился, сколько всего в этой теме интересного есть, даже чему-то научился в процессе подготовки.

Под каждый пример есть интерактивные демки, можно с ними поиграться, чтобы лучше понять, что происходит. А в конце — квиз для проверки знаний (хотя на самом деле мне просто хотелось сделать квиз на чистом CSS, чтобы поразвлекаться с теми самыми селекторами).

Видео: https://youtu.be/uhfcGAQv7o8
Слайды: https://mefody.dev/talks/css-selectors

Как мы делали Yandex Cloud на дизайн-системе Gravity UI доступнее

Пока сижу на митапе A11Y&UX Day в Тбилиси, решил поделиться с вами хорошим примером, как большая дизайн-система работает над доступностью компонентов.

Что конкретно сделала команда gravity-ui, можно прочитать в статье, но интересно как раз то, что доступность — это не просто семантика и ариа-роли. В разных браузерах скринридеры работают по-разному, какие-то проблемы пришлось «лечить» необычным способом. С лейбла «Вы здесь» в компоненте хлебных крошек улыбнулся — непривычно, но элегантно. Кстати, посмотреть все фиксы можно прямо в GitHub, потому что библиотека лежит в опенсорсе. И если знаете, как можно сделать лучше — приносите ишьи или пулл-реквесты.

https://habr.com/ru/companies/yandex_cloud_and_infra/articles/853382/

Tbilisi JS Meetup #3

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

Помимо моего будет ещё три доклада, все можно посмотреть в онлайн-трансляции. До встречи 😉

https://t.me/tbilisi_js_chat/11654

Полупрозрачность для эффективного UI-дизайна

Дизайнеры из Злых Марсиан делятся подходом, который позволяет упростить разработку дизайна для проектов. Правда, заголовок в оригинальной статье супер-жёлтый: «Вау, opacity! Полное руководство по этому герою эффективного UI-дизайна». Почитал статью, а полного руководства и конкретных рецептов так и не нашёл. Но тем не менее интересные мысли в статье есть.

1. Для начала, имея базовый цвет и играясь с его прозрачностью, можно сразу задать hover, focus и прочие состояния элементов.

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

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

4. С доступностью и контрастностью тоже всё хорошо, если следить за тем, что на что накладывается. В статье есть примеры с расчётом WCAG/APCA.

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

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

https://evilmartians.com/chronicles/woah-opacity-a-full-guide-to-this-badass-hero-of-efficient-ui-design

CSS Loaders

Большая коллекция (больше 600) CSS-лоадеров от Темани Афиф. Каждый всего в один элемент <div class="loader"></div>, скопировать CSS можно по клику на пример.

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

https://css-loaders.com/

Doom на CSS

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

К сожалению, на HTML и CSS полноценный Doom я не видел, но наткнулся на потрясающую демку Адама Куна, где он при помощи Scroll Animation API и 3D-трансформаций сделал возможность передвигаться по 3D-карте, стрелять в монстров, всё это в узнаваемой стилистике.

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

https://codepen.io/cobra_winfrey/pen/oNOMRav

Адаптивный TOC с точками-соединителями для страниц на CSS

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

Для веба такой пример скорее бесполезен, потому что нет такого понятия, как страница. Но если вы верстаете что-то типографическое (а многие книги, на самом деле, вполне себе верстаются в веб-инструментах), то есть прекрасная спека с content: leader(dotted); — делает ровно то, что надо. Беда в том, что работает это примерно нигде. Мне в далёком 2017 году пришлось подключать PrinceXML, который умеет в печатные стили лучше браузеров.

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

https://markentier.tech/posts/2021/03/responsive-toc-leader-lines-with-css/

Уроки, полученные от 222 557 шрифтовых сабсетов

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

Он взял 1009 шрифтов из гитхаба Google Fonts, при помощи fontkit исследовал, какие глифы есть в каждом из шрифтов, затем, используя Glyphhanger, сгенерировал 222 557 отдельных файлов шрифтов, чтобы в них было от 1 до N глифов. Заморочился, конечно, знатно, но зато в статье можно найти примеры скриптов, как можно так же заморочиться.

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

Почему не убрать целый набор символов совсем? Потому что есть браузерный автоперевод, когда текстовый контент всё равно меняется на те символы, которые вы не предусмотрели. И если вы хотите, чтобы было красиво, то лучше оставить возможность докачать шрифт. Но чтобы не грузить всё сразу, unicode-range вам в помощь — браузер скачает только то, что есть на странице в виде символов.

https://www.phpied.com/lessons-learned-from-222557-font-file-subsets/