#баг дня

Не каждый день простое if-условие чинит угрозу приватности миллиарду людей.

https://github.com/WebKit/WebKit/commit/f73005ed826014988f8ee447de23927749fb56e5

Ошибка в WebKit-реализации IndexedDB позволяет отслеживать поведение пользователей между сайтами: https://fingerprintjs.com/blog/indexeddb-api-browser-vulnerability-safari-15/

 #safari #webkit #privacy

#фишка дня

Обратите внимание на иллюстрацию, если я её не сильно зашакалил, конечно. Ничего интересного не замечаете?

Действительно, три раза гружу страницу и три же раза подгружается разное число изображений.

Все изображения при этом имеют атрибут loading=“lazy”, знаменитая “ленивая” загрузка. Грузятся только те изображения, что видны. И ещё те, до которых вы (вероятно) планируете скроллить.

Так вот, три раза — разное число. Почему же?

И тут кроется самое интересно: первый — без троттлинга (замедления) сети, второй — Fast 3G, третий — Slow 3G.

Т. е. Chrome грузит тем больше картинок, чем медленнее сеть. Казалось бы, где логика? Но давайте подумаем. Slow 3G редко значит “просто медленно”, скорее всего — ваше соединение нестабильно (поезд, метро). А ничего так не раздражает на нестабильном соединении, как ожидание ленивой подгрузки изображений.

Такая вот казалось бы вывернутая наизнанку логика, не лишённая изящества.

Попробуйте сами: https://mathiasbynens.be/demo/img-loading-lazy

#chrome #lazy #img

#видео дня

Тем временем, Илья Куликов упомянул в нашем @htmlshitchat свой доклад о работе с изображениями с канала Podlodka (хороший канал, между прочим).

Видео про работу с изображениями в вебе вообще. Думаю, будет хорошим дополнением к “Картинки как коробки” от Полины Гуртовой.

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

Собственно: https://www.youtube.com/watch?v=yp3G0FUOQhM&ab_channel=Podlodka

#podlodka #video #img

#codepen года

Итак, рубрику "codepen дня" ждёт переформатирование, заморозим её. Но не выкатить итоги года (как в прошлый раз) просто нельзя.

Встречайте, лучшие работы на CodePen за 2021 год по версии пользователей сервиса: https://codepen.io/2021/popular/pens/

Первое место, конечно, неожиданное. Надо попробовать на Flutter переписать...

#top

#заметка дня

Разработка продукта с Google AppsScript в основе означает, что вместо нормального API у вас будет вызов функций через объект google.script.run.

Я завернул это в Promise, но вот проблема: хочется же разрабатывать локально с комфортом, накидать JSON с тестовыми данными от сервера, замокать глобальные переменные и стор (приложение гибридное). Конечно, удобнее всего просто эти данные импортировать.

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

Вторая похожая проблема — это A/B-тесты: одним пользователям показываем одно, другим — другое. А собирать хотим из одних исходников.

И вот эту проблему решает модуль webpack с простым названием NormalModuleReplacementPlugin.

Документация модуля максимально проста, но я бы хотел обратить внимание вот на такой момент: не стоит привязываться в названиях таких модулей к среде выполнения (development/production). Вы можете очень легко случайно заменить вообще все загружаемые модули, где есть слово development, например.

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

В итоге, я остановился на таком подключении и пока доволен:

new webpack.NormalModuleReplacementPlugin(
    /(window|mocks)\.dev/,
    function (resource) {
        resource.request = resource.request.replace(
            /dev/,
            'production'
        );
    }
),

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

Быстрой сборки вам! Кстати, об этом: хочу достичь того же на Parcel 2. Знаете, как? Делитесь!

#webpack #build #module

#фишка дня

Если ты увлёкся добавлением pointer-events: none к элементам: может чтобы люди не копировали, а может, чтобы UX был получше, — есть вероятность, что дебаг в девтулзах превратится в мучение.

Вот как выделить объект, который не слушается мыши?

Все очень просто, зажми Shift и выделяй. Работает в Chrome, Edge и Firefox.

#devtools #tips #chrome #firefox

#репозиторий дня

Все же помнят, что в репозиториях на GitHub можно нажать точку и поковыряться в коде прямо внутри всамделишного VS Code?

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

Каких? Ну, например, CodeSwing и CodeTour, чтобы продемонстрировать свою работу. Как в CodePen, да.

Попробуйте прямо тут: https://github.com/lostintangent/rock-paper-scissors

Кажется, это прекрасно.

#vscode #github

#статья дня

Помните библиотеку FingerprintJS? Вот, напомню: https://t.me/htmlshit/509

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

Вот, попробуйте: https://csstracking.dev/

И что ещё забавнее, т. н. CSS4 может всё сделать ещё хуже с точки зрения приватности.

#css #fingerprint #privacy

#видео дня

Да, я нашёл это на Reddit (но я хотя бы признаюсь в этом, в отличие от… 😇).

Оригинальное название — как создать визуальный XOR-эффект на одном только CSS filter и mix-blend-mode (инвертирование по маске, короче). Но для этого стоило бы заодно код переписать в кодпен… а мы заморозили рубрику, помните?

Поэтому делаем так: теперь это видео о том, как использовать Emmet будто ты бог вёстки.

Эффективность 9000, короче.

#emmet #filter #blend

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

Делитесь, кто что использует для работы с API?

Postman? cUrl в терминале? REST Client для VSCode? Thunder Client?

Ладно, к чему это я. Есть же прекрасный инструмент HTTPie для веба, десктопа и терминала. Вот он как раз недавно обновился до версии 3.

Изменения в основном, конечно, косметические, но вот в версии для терминала появился менеджер плагинов. Точнее, он всегда там был, но не был открыт для сторонних разработчиков. А теперь — да.

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

#httpie #api #tool

#тред дня

Помните, недавно я выкладывал руководство по созданию цветовых схем в редакторах? Ну вот это вот: https://t.me/htmlshit/914

Тема на самом деле достаточно обширная и касается не только, собственно, редакторов кода, но и, наверное даже в первую очередь, наборов UI виджетов. UI-китов, по-простецки. Или правил HIG.

Итак, возьмём, например, Material Design от Google. Кто-то же сидел и придумывал палитру цветов для кнопок, теней, акцентов… По каким же принципам?

Вот наш сегодняшний Твиттер-тред как раз об этом: https://twitter.com/mobileunderhood/status/1486965874351386625

Кому неудобно читать в Твиттере, как всегда — сохранённый тред: https://threadreaderapp.com/thread/1486965874351386625.html

Stay tuned!

#material #ui #color #twitter

#статья дня

Я большой фанат CSD. Скорее всего, вы не в курсе, что это такое…

Это client-side decorations.

Короче, у окон в вашей операционной системе есть контент (приложение), рамка и заголовок. Рамка и заголовок отрисовываются менеджером окон. Собственно, “оформление” — decorations.

Иногда менеджер окон сидит глубоко в системе (Windows), иногда — нет (Linux), но у приложений не так много вариантов перерисовать оформление своего окна.

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

И вот сначала в среде GNOME для Linux, а потом в macOS и теперь в Windows стали появляться API для отрисовки оформления окна на стороне клиента. То бишь, приложения.

Вот эти вот тулбары и меню в заголовке окна, рядом со стандартными кнопками закрытия, это вот оно (на иллюстрации).

И вот это API доступно и в Electron! Вылезайте из коробки, так сказать.

Собственно, статья так и называется — Breaking Out of the Box: https://alistapart.com/article/breaking-out-of-the-box/

#os #csd #hig #window

#фишка дня

Я не так часто аж подвываю от восхищения, но Intl API вышибает слёзы истерической радости.

Задолбались делать списки типа “один, два и три”? Если нет, вы хреново адаптируете продукты под разные языки, но то такое.

Я вот задолбался. А оказывается, не надо было! Всё давно есть в нормальных браузерах: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat

Да, для русского тоже.

И да, Oxford comma, ЕВПОЧЯ 😏

#js #list #i18n

#видео дня

Ник Лопин с рассказом про доступность в дизайн-системах.

Как делать доступные компоненты? Где заканчивается магия дизайн-систем?

Давайте разбираться!

https://youtu.be/DStIlEXao-I

#статья дня

Так, осторожно. Шоковый контент 😣

Думаете, на КДПВ шутка? Да хрен вам! Суровая реальность.

Сейчас покажу.

Есть такая ерундовина — CSS Houdini, низкоуровневый API, выкатывающий наружу некоторое внутреннее устройство CSS. И её неотъемлемая часть — Painting API. Он даёт возможность рисовать внутри background-image как на холсте. На canvas, то бишь.

Вы уже поняли, к чему я клоню?

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

Собственно, к делу:
https://www.leemeichin.com/posts/yes-i-can-connect-to-a-db-in-css.html

TL;DR

.query-display {
  background: paint(sql-css);
}

main {
  --sql-query: SELECT * FROM genre;
  --sql-database: url(...);
}

…некоторые вещи тупо прокляты, развлекайтесь: https://www.sqlcss.xyz/

#css #houdini #canvas

Ребят, вернусь с постом завтра. Мы всё-таки будни, а не выходные :)

Не скучайте.

#заметка дня

Практически всегда в различных обучающих видео и курсах по React вы могли наблюдать следующую фразу: “В JSX надо писать className когда вы хотите задать класс HTML-элементу потому что слово class является зарезервированным”.

Это является правдой лишь отчасти. На самом же деле это просто большое упрощение.

Первый DOM API, построенный на ES3, действительно запрещал переопределение “el.class = smth“.

Но начиная с ES5 (года эдак 2009-11) это исправлено. Да, нельзя присвоить переменной имя class, но свойства объекта никто не запрещал.

Более того, в контексте JSX это не имеет смысла даже относительно ES3. JSX же будет транслирован, возможно даже в “аналоговый” setAttribute("class”, …), что, конечно, работает вообще везде.

А ещё можно вспомнить чёртов htmlFor…

Разработчики React решили отталкиваться не от атрибутов DOM-элементов, а от свойств объектов. Для большинства атрибутов разницы нет. Но есть исключения:

— многословные атрибуты (maxlength, contenteditable) преобразуются в camelCase (maxLength). Обратите внимание на отсутствие дефиса, это тоже легаси первых имплементаций DOM
— SVG не отражает атрибуты как свойства объекта
— Веб-компоненты тоже не отражают, и, более того, могут вообще не документировать свои атрибуты и свойства
— Поля форм могут иметь одинаковые атрибуты, несущие совершенно разную семантическую нагрузку.

Естественно, это очень важно для SSR, пересылать-то приходится атрибуты.

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

На самом же деле разработчики React в начале своего пути решили брать XML-подобные атрибуты, а не DOM. For the greater good.

А потом…

…случился ES6, где стало можно создавать объекты в сокращённой форме: {class}. И вот тут старая добрая проблема зарезервированных слов всплыла с новой силой.

Короче говоря, не доверяйте самым простым объяснениям, даже если они приводят к чему-то похожему на правду. Реальность веселее.

Это был вольный перевод треда от Yehuda Katz с включением Дэна Абрамова.

#react #jsx

#ссылка дня

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

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

Какие вопросы, каков порядок, чего ожидают? Все в документе.

TL;DR
Мобильный разработчик
13 лет iOS/Android/Unity
16 месяцев подготовки
11 он-сайтов - 11 оферов
принял офер от Google на L6-позицию.

https://docs.google.com/document/d/1c3xo5us0G8uMQVTWfm7xKpciRVvpj9p0YxmbW4pxmUI/edit#

#faang #interview

#ссылка дня

Немного неожиданного контента хотите?

Не так давно открылся сайт DOTOWN с семью сотнями иконок в стиле 8-битных игр от дизайн-студии под руководством экс-дизайнера Nintendo:

https://dotown.maeda-design-room.net

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

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

Да, на японском. Но кого это вообще останавливало?

#icons #8bit

#заметка дня

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

Таблица находилась в выделенном контейнере и приводила к появлению горизонтального скролла в нём. Мне пришлось тянуться к мыши, зажимать Shift чтобы скроллить горизонтально… Какая прелесть.

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

Решение же на самом деле до безумия простое: tabindex=“0” на контейнер и дело в шляпе. Это позволит пользователю установить фокус на желаемый блок и скроллить стрелками.

По пути, раз уж пошло дело, стоит установить стили фокуса и атрибуты role и aria-labelledby для соответствия Web Content Accessibility Guidelines.

Документ здоровый, но для практического применения нужны лишь несколько пунктов: «2.1.1 Keyboard», «4.1.2 Name, Role, Value», «1.4.10 Reflow», «2.4.7 Focus Visible».

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

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

Ну и повторю решение: https://codepen.io/alinaki/pen/xxgpmeZ

#css #table #keyboard #focus #a11y