#статья дня

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

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

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

Есть такая ерундовина — 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

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

Помните пост про плейсхолдеры? 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