#заметка дня

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

Мир был бы гораздо скучнее без сложных эмодзи. Но не будете же вы каждый раз менять стандарт для очередной бородатой картинки?

И вот тут на сцену выходят лигатуры.

Что такое лигатура в цифровой типографике? Это замена шрифтом некой комбинации символов на один. А что такое эмодзи? Это лишь ещё один шрифт, который система применяет (или нет, сорян) к определённому диапазону символов.

И вот сочетание из чёрного квадрата и Санта Клауса превращается в чёрного Санту Клауса. Удивительное рядом.

И да, раз это просто несколько символов – к ним можно применять любые средства работы со строками. А пустые символы на самом деле не пустые, это буквально символы склейки: zero-width joiner, чтобы мы были в курсе, что это не отдельные картинки.

Кстати, некоторые из вас наверняка применяют шрифты с лигатурами в своей IDE. Так что не так уж и далеки вы от эмодзи :)

#emoji #ligature #font #unicode

#codepen дня

Не думаю, что вы помните это изображение. Но оно — с одной из презентаций Apple. Кажется, iPhone 13. Список сотовых операторов-партнёров яблочной конторы.

Так вот.

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

И вот один из вариантов попытки автоматизации подобного: https://codepen.io/jaredstanley/pen/VwYPvJO

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

Думаю, стоит попробовать на базе этого кода сделать расширение для Figma…

А то часто встречаю весьма халтурный подход.

#js #grid #img

#статья дня

Те из вас, кто использует Instagram, TikTok, Facebook + Messenger, Snapchat, наверняка замечали, что они открывают все ссылки насильно внутри приложения. Telegram, кстати, тоже (но есть настройка). Наверное же, не просто так?

Конечно не просто так :)

Приложения на голубом глазу встраивают свой код прямо в страницу, которую открывают. И могут трекать всё, что угодно. Особенно этим отличился TikTok. Он логирует вообще всё, вплоть до нажатий клавиш: https://krausefx.com/blog/announcing-inappbrowsercom-see-what-javascript-commands-get-executed-in-an-in-app-browser

Ну а Facebook естественно божится, что они встраивают код, чтобы повысить вашу безопасность :)

Рекомендую внимательно изучить эту статью и инструмент за ней. Заставляет задуматься.

#security #privacy

#видео дня

И продолжая тему трекинга (который на самом-то деле не всегда зловредный и хочет вам навредить) вот прекрасное видео нашёл.

Утилита заставляет ваш компьютер издавать звук каждый раз, когда Chrome посылает данные в Google. Льёт в уши, так сказать. Гляньте, удивитесь.

Ну и ссылка на саму утилиту, для Linux: https://github.com/berthubert/googerteller

#security #privacy

#шпаргалка дня

Ну теперь-то ты точно не забудешь, как работает justify-content…

…пока не придёт время использовать flex-direction: column 🤪

#css #flex #video

#заметка дня

Безопасный фронтенд в 2022 году выглядит так (в оригинальном твите есть совсем спорные моменты, здесь я их стараюсь убрать или уточнить):

1. HTTPS

2. Токен (авторизационный, или рефреш — зависит от вашей спецификации) должен храниться в secure, samesite, httponly куке. Т. е. не быть доступным из JS (в случае XSS, cross-site scripting, внедрения кода, токен нельзя будет вытащить с помощью этого самого внедрённого кода).

Если не используете SSR для хотя бы для логина, fetch-запрос (ajax) вполне себе может выставить вам куку с httponly. Главное соблюсти все остальные условия и правильно выставить атрибут Path=/.

3. Объявляйте CSP (Content security policy), чтобы снизить вероятность проведения XSS.

4. Генерируйте куки заново при каждом входе пользователя. Это нужно для предотвращения session fixation, «застывшей» сессии.

5. Задавайте короткое время жизни кук (опять же, застывшие сессии).

По 2 пункту: я вижу столько кандидатов, сдающих тестовые задания с токеном в local storage… Это ладно. Но невозможность ответить на вопрос, почему это плохо — 🚩

#security #cookie #js

Выбирали с командой лучшее название для переменной счетчика цикла. Я победил с…

…формулировкой: «Никаких циклов в новом коде, вы оборзели? Используйте методы перебора».

#фишка дня

Наверняка вы встречали подобные (на иллюстраци) предложения по генерации пароля. Заставить браузер предложить подобное на форме регистрации довольно просто: достаточно установить значение атрибута autocomplete как new-password.

Это не первый раз, когда у нас заходит речь об этом зачастую раздражающем атрибуте. Например, не так давно я писал заметку о том, как заставить Safari перестать пытаться исправить ваш одноразовый код: https://t.me/htmlshit/477

Но нелишним будет ещё раз напомнить: не забывайте про MDN. Все возможные значения автодополнения там отлично расписаны: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#Values

#css #autocomplete #password

#фишка дня

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

Как писал Джон Кармак: “I can send an IP packet to Europe faster than I can send a pixel to the screen. How f’d up is that?”.

Это я к чему.

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

С доставкой нам поможет атрибут loading=“lazy”, но что насчёт декодирования?

Вуаля, такое тоже есть: decoding=“async”.

Можно использовать вместе с ленивой загрузкой, можно — раздельно. В зависимости от задач.

На сладкое держите неплохую лекцию об оптимизации изображений для SEO: https://youtu.be/F6KGcb6trXc с кучей нюансов, включая вышеописанные атрибуты.

#img #decoding #html

#видео дня

Правило scroll-snap, задающее поведение скролла и недавно коротко завирусившееся в твиттере в серии:

— Как Тесла/Эппл/Мета делают такие крутые карусели?
— Да с помощью scroll-snap!

…присутствует в CSS достаточно давно. С поддержкой, правда, были нюансы. Но сейчас мы аж в 2022 году, правда?

Так вот, презентация Adam Argyle описывает не только scroll-snap, но и сопутствующие свойства вроде scroll-margin: https://www.youtube.com/watch?v=34zcWFLCDIc

Слайды: https://oh-snap.netlify.app/#intro
Коллекция примеров: https://codepen.io/collection/KpqBGW

#css #scroll #snap

#статья дня

Всем нам так набивший оскомину хорошо знакомый ESLint наконец-то обновил формат конфигурационных файлов:
https://eslint.org/blog/2022/08/new-config-system-part-1/
https://eslint.org/blog/2022/08/new-config-system-part-2/

Первая статья рассказывает, как ESLint дошёл до жизни такой, добавляя всё больше и больше настроек, extends, :root, overrides, автоматическую загрузку зависимостей…

И вот вторая часть знаменует собой стряхивание всего лишнего и внедрение плоского формата. Нужны зависимости? Укажи прямо. Нужен extends? Не нужен, просто описывай дополнительные правила ниже. Описание сред выполнения заменилось на описывание глобальных условий. И куча изменений для плагинов.

В целом, стало проще и прямолинейнее. Посмотрим.

#eslint #js

#новость дня

Помните новую среду исполнения JS для запуска серверов и использовании в качестве тулинга — Bun?

Ну она ещё использует движок JSC от WebKit, а не V8 от Google?

Ну она ещё дико быстрая, быстрее Node.js и Deno.

Нет? Ну вот я описывал: https://t.me/htmlshit/1305

Так вот, они организовали свою компанию — Oven (булочка печётся в духовке же) и подняли 7 лямов баксов инвестиций в первом раунде: https://twitter.com/oven_sh/status/1562248114773565440

И начали нанимать инженеров! На Zig и C++.

Короче, можно только радоваться ☺️

#bun #js #zig #cpp

#codepen дня

На TikTok развелось огромное количество дизайнеров, которые отточили владение прототипами в Figma до невероятных высот.

Естественно, под каждым из таких видео с названиями «how to make supa 3d carousel in Figma supafast» раздаётся вой вида: «А как это верстать?»

Ну иногда, к счастью, верстать это можно так же, как рисовалось, и Jhey — деврел Google — нам это демонстрирует при помощи градиентной маски, смотрим: https://codepen.io/jh3y/pen/gOeXgXv

Элегантно, конечно, но требует тонкой настройки, чтобы не кружилась голова 🤪

#css #tiktok #mask #gradient

#заметка дня

Если вам сказали, что feature freeze — это про фикс багов, то вам сказали неправду.

Или, как минимум, полуправду.

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

Цель feature freeze — отладить и автоматизировать процессы, и закрепить текущее состояние продукта в тестах на каждый customer journey, чтобы не принести регресс. Чтобы не стало хуже.

Вот через это мне и команде скоро предстоит пройти. Попробую держать в курсе открытий чудных.

#такое дня

Я не могу уложить в голову, зачем Андрей Ситник ретвитнул это:

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

Что будет в следующий раз? «Используйте оператор goto чтобы эффективно перемещаться между частями программы?»

Что это такое было вообще?

#фишка дня

Менеджер паролей в Google Chrome умеет определять, утекли ли ваши пароли вместе с остальными в результате взлома (или кривой конфигурации) очередного сервиса. Это не является секретом.

А вот что интересно — он предлагает сменить этот самый пароль. Но у разных сервисов же разные ссылки на страницы запроса паролей. Google и это знает?

Нет! Ему и не надо. Ведь есть соглашения.

Одним из таких соглашений является концепция Well-Known URI (известные ресурсы).

Давайте покажу: Chrome вас бросит на ссылку вроде такой: http://www.loc/.well-known/change-password

И .well-known/change-password редиректит на смену пароля. Актуальность за вами.

Если вы хоть раз добавляли на сайт Apple Pay, концепция должна быть знакомой.

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

#security #rfc #wellknown

Маленькое уточнение: так себя ведёт не только Chrome.

Менеджер паролей в Safari был первым, кто это предложил ещё в 2019 году. Chrome сразу подхватил. А вот Mozilla забили: https://mozilla.github.io/standards-positions/#change-password-url

Из известных сайтов поддержка имеется на Google, GitHub, Facebook, Twitter, Wordpress.

Ну а тут подробнее: https://web.dev/change-password-url/

#заметка дня

Когда Ахмад Шадид выступал у нас с Defensive CSS, возникла забавная проблема.

Он выбрал для примеров в презентации акварельные тона. Очень нежные, успокаивающие. И все бы было хорошо, если бы презентация не транслировалась по Google Meet.

Алгоритмы видео Google Meet сильно режут контраст. В итоге разницы между акварельным голубым и акварельным розовым вообще не было заметно. А это были ключевые моменты примеров.

Думайте об этом выбирая цветовую гамму проекта. Ведь бывают и просто плохие дисплеи.

Вспомнил я про эту особенность потому что мне на глаза попалось огромное количество статей о неоморфизме. История циклична.

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

Хорошо, что некоторые статьи об этом все же упоминают: https://refine.dev/blog/neumorphic-css/

Так что не жалейте контраста. Оставьте акварель художникам.

#заметка дня

По сети вирусится очередной секрет Полишинелля: оказывается, разница в скорости передачи 14 и 15 Кбайт данных гораздо больше, чем между передачей 15 и 16 Кбайт данных. Какой ужас, как же так? Ведь всего один килобайт разницы и там и там!

Понятное дело, что если у вас был курс сетей в универе или вы вообще этим интересовались, никакого секрета нет. Именно 14 Кбайт умещаются в стартовые 10 пакетов алгоритма TCP slow start.

Из названия примерно понятно что происходит: отправитель и получатель обмениваются сначала 10 пакетами, потом 20 пакетами, потом 40 пакетами и так далее. Размер пакета — 1500 байт, туда-сюда, на данные 1460. Вот вам и 14 Кбайт данных на старте.

Уместите свой ресурс в 14 Кбайт — получите быструю доставку :)

P. S. речь тут не идёт о стриминге, там UDP.
P. P. S. Вот подробнее, кому интересно. Тема всплывает с завидной регулярностью и статья трёхлетней давности описывает всё то же самое: https://www.tunetheweb.com/blog/critical-resources-and-the-first-14kb/