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

Помните пост про плейсхолдеры? https://t.me/htmlshit/431

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

Для этого можно или поставить серое поле, или применить различные техники под общим названием LQIP — Low Quality Image Preview: https://github.com/zouhir/lqip

Например, SQIP: https://github.com/axe312ger/sqip (произносится сквиб, Гарри Поттер объяснит).

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

И вот новое: BlurHash от Wolt: https://blurha.sh/

Для генерации используется хеш вида LEHV6nWB2yk8pyo0adR*.7kCMdnj (ограниченный набор из 83 доступных символов). Плагины есть под любые мыслимые средства, от Eleventy до Flutter.

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

#css #img #placeholder

#ссылка дня

Кто сегодня чувствует себя тупым, как я, например, может посмотреть этот прекрасный коммит:

https://android-review.googlesource.com/c/platform/frameworks/base/+/1321016/1/packages/SystemUI/src/com/android/systemui/glwallpaper/ImageProcessHelper.java

Что он делает? Он исправляет циклическую перезагрузку при установке этой картинки на обои:

https://drive.google.com/file/d/11rxzYvPcIOh_8GvS4XSC3YtbW3CecE-O/view

Все ошибаются. Не надо хандрить лишний раз. Даже если ты и правда тупой (или разработчик Android).

#книга дня

Для тех, чей взор на типографику распространяется дальше, чем написать margin: 1em 0.

Александра Королькова уже достаточно давно выложила в бесплатный доступ свою книгу “Живая типографика”.

А я свою на Авито покупал когда-то, потому что тираж был полностью распродан…🙂

https://leksandra.livejournal.com/120488.html

Приобщаемся к основам типографики и благодарим автора.

Ссылка из поста: https://yadi.sk/i/oy19NzNjydZjR

#типографика

#библиотека дня

Вам надо выводить картинки в консоль браузера? Вот и мне нет.

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

Короче, все (надеюсь) знают, что логи в консоли можно не только форматировать ключами, но и стилизовать: console.log("%c[message]", [style rules]). Так вот, background-image тоже можно...

Вот и весь секрет этой библиотеки: https://github.com/adriancooney/console.image

Правда, автор не остановился и сделал генератор мемов заодно, console.meme :)

#devtools #console #img

#статья дня

Я не так давно писал про инструмент для построения диаграм в Markdown-файлах, Mermaid.

Так вот, в том посте я говорил, что поступило предложение о поддержке Mermaid в GitHub.

И таки да! Завезли: https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/

Рендерится, правда, в iframe. С другой стороны, ну и что.

Осталось дождаться пока завезут в GitHub Enterprise.

К слову, в предыдущем посте я не упомянул, что поддержка языков диаграм Mermaid и PlantUML имеется и в продуктах от JetBrains: PhpStorm, WebStorm, IDEA и т. д. Прямо во встроенном плагине Markdown.

#github #diagram #mermaid

#заметка дня на скорую руку

Только что в дружественном чате на пустом месте произошла бурная дискуссия. Казалось бы, какой простой вопрос: «У одного блока margin-bottom: 10px, у блока ниже margin-top: 15px. Сколько в итоге будет margin в px между блоками?»

Можно, конечно, посмеяться над вопросом, но это вполне себе типичная задача на собеседовании.

Дайте себе 30 секунд на размышление, но если вы уже держите в голове конкретное число – вы неправы.

Ответ звучит так: «Какова модель расположения этих блоков?». Вопросом на вопрос, в лучших традициях, да.

Ну и кодпен для примера, чтоб уж наверняка: https://codepen.io/alinaki/pen/OJbvOmz

Схлопывание отступов (margin) штука такая.

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

#тред дня

Задержался с постом, релизил обновление продукта. Ух у юзеров будет бомбить, изменение уровня ribbon в MS Office.

Да, почти никакого автопостинга, с пылу с жару, цените, мои дорогие 😙

Итак, тут Андрей Ситник в очередной раз поднял тему безопасности npm-пакетов. Думаю, нелишним будет и тут сохранить. Далее слово автору с незначительной редактурой:

Угон пакета и вставка вредоносного кода — риски большинства пакетных менеджеров.

В npm при деплое можно снизить риски и ускорить деплой:

npm install --production --ignore-scripts

--production не будет ставить devDependencies, --ignore-scripts выключит postinstall-скрипты.

Использование --production при деплое, значит что вам более системно надо разделять dependencies (только что нужно для сборки) и devDependencies (всё остальное).

Но так даже лучше — при обновлении зависимостей сразу понятны риски (обновления devDependencies менее опасно).

TS и файлы типов не нужны для компиляции .ts в .js — swc и babel умеют отрезать типы.

Поэтому и для фронтенд-проекта и для nodejs-сервиса tsc и типы должны быть в devDependencies.

Проверка типов должна идти как тесты в отдельном задании.

Для nodejs-сервиса в dependencies записываются только те зависимости, что нужны для запуска сервера (а не его компиляции).

Отдельным заданием ставятся все зависимости и собирается JS-файлы. А внутри docker-образа сервиса установка только с --production.

#npm #yarn #pnpm #node #security

#фишка дня

Любишь опечатываться в git? Не проблема, лови алиас — батя поможет. Так и научишься.

https://gist.github.com/haukot/5a8c456be43a3d49a7b563766b481315

#git #alias

#такое дня

Стоило позавчера выпустить обновление нашего продукта, как нас (справа на изображении, Supermetrics) тут же обвинили в копировании. Кстати, как оказалось, не в первый раз.

Мощный маркетинговый буст от маленьких соперников.

Ваше мнение, господа присяжные заседатели? :)

#work #copyright

#заметка дня

Хочется идти в ногу со временем и доступностью интерфейсов, но что-то уж больно много в твоём коде зависит от событий transitionend и animationend? Ведь ты так старался.

Ставь длительность анимации для тех, кто предпочитает минимальные анимации (reduced motion) в 1мс.

Они не заметят, а ивенты сработают как надо :)

Но вообще, prefers-reduced-motion не означает, что все анимации стоит отключить. Просто надо относиться к ним разумно и предвосхищать возможную тошноту зрителя: плавное наведение оставить, а параллакс — убрать.

Вот, например, от такого — точно стошнит: https://codepen.io/argyleink/pen/RwwZMKm

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

#media #a11y

#ссылка дня

Встречайте: https://browser.engineering/

Ребята ставят своей целью создание минимального браузера на Python, по пути разбирая как, собственно, это все должно работать: протоколы, объектная модель документа, стили, интерфейс. Работа все ещё в процессе, подано в формате учебного пособия, с домашними заданиями.

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

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

Дико интересная штука.

#python #browser

#игра дня

Тут запустился очередной фронтендерский CTF (capture the flag): https://ctf-2022.ilovefrontend.ru/

Соревнования CTF в среде безопасников давно уже стали настоящим большим спортом: https://xakep.ru/2016/06/14/ctf/

Фронтендерский, вроде, проводится уже второй раз.

Меня слабо такие штуки интересуют, впрочем, два флага сразу нашёл. Тратить всё своё свободное время нет никакого желания.

Кто-нибудь играет? А в прошлом году?

#ctf #game

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

Я решил, что плагины для Figma тоже будут сюда залетать. Особенно, если эти плагины реализованы на базе хороших статей по вёрстке.

Например, от Джоша Камю про красивые тени в CSS: https://www.joshwcomeau.com/css/designing-shadows/

Потому что все мы в душе немного художники.

Встречайте: https://www.figma.com/community/plugin/1068595505353552645/Beautiful-Shadows

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

#figma #css #shadow

#заметка дня

Часто приходится делать таблицы в GitHub Markdown? Тогда лови это знание, пригодится.

Списки и контейнеры не могут и не должны отображаться внутри таблиц, набранных "палочками" (||). Палочки — только для текстового контента, для данных. Точка.

Нужен табличный, кхрм, макет (ну список изменений там запихать) – используй HTML таблицы.

Но есть нюанс.

Чтобы правильно использовать Markdown внутри HTML-таблиц, нужно этот самый контент с двух сторон обложить переводами строки, вот так:

<td>

_markdown_ **тут**

</td>

...и будет норм.

#markdown

#статья дня

Злые Марсиане и Андрей Ситник как всегда снабжают нас прекрасными статьями, описывающими современное состояние фронтенда.

Даже такая простая вещь, как фавиконка, совсем не простая. Каждый год выходят обновления минимального набора для максимальной поддержки клиентов.

Вот и в этом году тоже: https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs

В статье имеется TL;DR, для тех, кому ну вообще лень :)

Он настолько короткий, что умещается даже здесь:

HTML

<link rel="icon" href="/favicon.ico" sizes="any"><!-- 32×32 -->
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png"><!-- 180×180 -->
<link rel="manifest" href="/manifest.webmanifest">

И манифест:

// manifest.webmanifest
{
  "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
  ]
}

И всё, делов-то.

#favicon #web

#видео дня

Интервью Дугласа Крокфорда — создателя JSON — подкасту «Мы обречены».

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

Кажется, тут не надо ничего пояснять :)

Собственно, интервью: https://www.youtube.com/watch?v=WSqCpWYfTFU

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

#podcast #json #js

#статья дня

Щас будет неожиданно. Потому что статья связана с темой поста лишь косвенно.

Итак, статья о том, как один тип работал модератором в PornHub: https://www.theverge.com/c/22925906/pornhub-mindgeek-content-moderation

Это было бы не так интересно, если бы он просто рассказывал о должностных обязанностях. Но он пишет и о том, чем и как вообще жила компания.

Хорошее чтиво на своей работе, да.

Ладно, суть-то не в этом. Мне понравился эффект пикселизации КДПВ. Естественно, я пожелал его повторить и отдать вам: https://codepen.io/alinaki/pen/podKqJP

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

Pixelate all the thi(n)gs!

#js #pixel #effect #filter #svg

#библиотека дня

Если есть понятие семантики, где элементы HTML представляют собой то, чем являются, то может, классы в CSS не так уж и нужны?

И таки да!

Парни из https://simplecss.org/ и https://native-elements.dev/ так и считают. Можно построить вполне себе полноценный сайт, не написав ни единого класса.

Как тебе такое, тейлвинд?)

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

Впрочем, к теме. Это, конечно, не единственные варианты. Вот целый список: https://github.com/dbohdan/classless-css

Мыслите шире!

#css #framework

#статья дня

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

Впрочем, здесь мне помогут Александр Беспоясов, Вадим Юмадилов и Андрей Романов. Фамилия Беспоясова должна быть вам знакома – он отметился в Солидбуке.

Итак, какие вопросы разбираются в их лонгриде Фронтенд — это не больно:
— Как решать задачи, а не писать код
— Как не умереть в пиксель-перфекте
— Как вести диалог с дизайнерами

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

И обязательно обратите внимание на прикреплённые к статье материалы. В них есть всё.

#work #frontend #psychology