#фишка дня от Никиты Голубова

Как всегда самые интересные штуки в Google Chrome DevTools прячутся в неведомых панелях.

Вот и на этот раз: чтобы получить возможность поменять таймзону на странице, в девтулзах нужно добавить панель Sensors (см. More tools) и там выбрать или ввести нужную.

Почему Sensors? Пёс его знает. Часовые пояса всегда всех раздражали.

#tz #chrome #devtools

#codepen дня

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

А пока давайте сделаем свой генератор спирограф-фигур в SVG на базе библиотек SVG.js, GSAP и generative-utils:

https://codepen.io/michellebarker/pen/GRMBVYX

Пакет generative-utils вообще довольно интересный, там приличное количество утилит для создания генеративного арта (не путать с дегенеративным, это что-то времён Хрущёва).

#svg #art #gsap

#статья дня

Информации по градиентам не бывает много. В дополнение к моему посту, прилетел неплохой перевод статьи Джоша Камю, опубликованный на хабре: https://habr.com/ru/post/645165/

Ну и там же и ссылка на очередной инструмент их создания, от автора: https://www.joshwcomeau.com/gradient-generator/

Крайне рекомендую ознакомиться и ещё больше рекомендую использовать.

#css #gradient #hsl

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

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

Чтобы знание было доступно всем.

В нашем Confluence (wiki) конечно же был инструмент для рисования, на базе draw.io. Штука хорошая, но мне хотелось создавать и хранить диаграммы в коде, если уж не на базе кода. Совместно с текущей документацией по развёртыванию.

И такой инструмент нашёлся! И назвывается он Mermaid:
https://mermaid-js.github.io/mermaid/#/

Прекрасно встраивается в Markdown, имеются и плагины для предпросмотра в VS Code, Confluence, WebStorm и так далее.

И конечно же, библиотеки для интеграции с различными языками.

Естественно, Mermaid не один такой, есть Kroki, blockdiag и ещё несколько. Но мне Mermaid зашёл больше всех.

Задачу я решил, CTO в восторге. Поддерживать легко.

А недавно поступило предложение о поддержке в GitHub Markdown, будет круто!

#markdown #mermaid #diagram

#статья дня

Цветовая схема... казалось бы, что может быть проще, не так ли?

Ну с точки зрения пользователя-то да, а с точки зрения разработчика этой самой цветовой схемы?

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

Чтобы в конце-концов на любом мониторе смотрелось сносно.

И вот Дима Семьюшкин создал целое руководство, посвящённое созданию цветовых схем: https://devgru.github.io/tutorial16/

Начинается с определения цветовых моделей RGB, HSL, HSV, цветовых пространств. И дальше — собственно — к схемам, в качестве примеров рассмотрена известная серия Solarized.

К сожалению, руководство полностью не закончено, но и той информации, что есть, вполне достаточно.

А если есть желание продолжить — от него же имеется #инструмент формирования и анализа палитр: https://devgru.github.io/palette16

Вполне себе неплохое дополнение.

#design #rgb #hsl #color

#фишка дня

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

Так вот, есть! Утилита буквально называется codepen-prefill и создана именно для этой цели: https://github.com/yuanchuan/codepen-prefill

npx codepen-prefill index.html

Извлечёт все встроенные стили и скрипты из файла и закинет их в окно редактора. Останется лишь сохранить.

#codepen #npm #npx #utility

#игра дня

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

Потому что мне они нравятся :)

Итак, вашему вниманию CSS Speedrun. Кажется, в объяснении не нуждается :)

https://css-speedrun.netlify.app/

Я чота был невнимательный в паре заданий (или считал себя дофига умным) и прошёл в итоге аж за 07:25:7 :(

#css #game

#статья дня

Там на самом деле статья-то… #заметка скорее.

В общем, если вы в своих React-проектах часто используете логику отображения-скрытия чего-либо, то это всё превращается в повторение одного и того же кода: setOpen(true), setOpen(false) и так далее.

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

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

И тут на ум приходит реализация хука вроде useToggle, который вынес бы весь повторяющийся код: https://levelup.gitconnected.com/react-custom-hooks-3-usetoggle-and-useboolean-af842c5b8b47

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

#js #react #toggle

#баг дня

Не каждый день простое 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