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

Атомарность пробивает новое дно (или берёт новые высоты, кому как).

Это было лишь вопросом времени, как быстро пользовательские свойства начнут собирать в библиотеки. И вот одна из них: https://open-props.style/

.noise-noise-noise {
  /* stack grain with a gradient */
  background-image: var(--gradient-3), var(--noise-3);
  /* force colors and noise to collide */
  filter: var(--noise-filter-3);
  /* fit noise image to element */
  background-size: cover;
}

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

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

#css #atomic #var #tailwind

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

Мозаики (паттерны) это всегда прекрасно. Но соблюсти симметрию, чтобы заполнить поле, может быть не совсем тривиально.

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

И такой есть!

https://patternico.com/

Можно заполнить встроенными иконками (Font Awesome или Line), а можно загрузить свои. Есть даже ссылка на вариант конструктора с эмодзи :) Правда, там убогонькие Emojione, но вдруг кому ок.

В общем, имеет право на жизнь.

#pattern #background #generator

#codepen дня

Я, стыдно признаться, очень мало работал с горячими клавишами в вебе. И до недавнего времени даже не мог сказать, в чём отличие which, code и key.

Но для моего пет-проекта пришлось немного покурить тему. И в итоге я наткнулся на прекрасный пример, поясняющий за всю хурму: https://codepen.io/denilsonsa/pen/epmoma

И key, и code, и repeat, и модификаторы, и, собственно, события. Прекрасно.

Конечно же стоит обратить внимание и на MDN: key, code. Там тоже есть интерактивные примеры.

А в пет-проекте было просто прекрасное. Я разрабатываю расширение для Chrome DevTools и никак не мог понять, почему я не могу перехватить стандартные клавиатурные сочетания. Даже чёртов Esc открывал консоль.

А всё оказалось просто: я привык вешать слушатели на window или document, а ребята из Chrome повесили их на document.body. Просто прекрасно.

Впрочем, победить получилось и теперь моё расширение управляется с клавиатуры на ура.

#key #code #js #javascript #hotkeys #keyboard

#статья дня

Вечнозелёная (суть, никогда не устареет) статья Павла Лаптева о CSS Grid: https://pavellaptev.medium.com/learning-css-grid-with-the-swiss-2bd02e913fa

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

А уж кто знает о типографских сетках больше швейцарцев? Да в общем-то, никто. Как и о типографике, впрочем.

Давайте-ка сюда сразу добавим статью про золотой канон в сетках (golden canon grid): https://habr.com/ru/post/479580/

#css #grid #swiss

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

Про caniuse.com говорить никому уже не приходится, это база, которая должна появляться как только ты набрал "c" в адресной строке.

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

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

Для таких случаев придуман https://www.caniemail.com/

Всё то же самое, что Can I Use", но про почту.

Больше никаких "а может?.." Определяете целевую аудиторию — и поехали верстать.

#email #css #html #feature

#фишка дня

Потребовалось мне как-то сделать анимацию по скроллу. Достаточно сложную, но более не интерактивную. WebGL было тащить максимально глупо.

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

Сказано — сделано. Проигрываем видео по скроллу сдвигая таймлайн. То есть, устанавливая currentTime на requestAnimationFrame, 30 раз в секунду.

Ну а сейчас я просто покажу небольшой побочный эффект.

Как проиграть видео назад? Ну или быстро скипнуть вперёд?

Техника точно та же: https://codepen.io/alinaki/pen/vYeKXON

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

#video #javascript

#заметка дня

Тут в тематических чатах всплыла проблема с Visual Studio Code, подобная той, что на иллюстрации.

Часть кириллицы обведена, будто это поиск или результат работы проверки грамматики. Но нет.

Это новое обновление принесло: https://code.visualstudio.com/updates/v1_63#_unicode-highlighting

Коротко: случилась автоматическая подсветка символов в расширенном Unicode. Зачем? Пес его знает.

Исправление простое: editor.unicodeHighlight.ambiguousCharacters: false

Надеюсь, это откатят.

#vscode

#ссылка дня

Тут это, Tailwind CSS обновился до третьей версии. Я вынужден признать, что он стал даже слишком популярен и по этой причине всё сложнее находить аргументы против. Парни, возможно, нащупали баланс между атомарностью и семантикой.

https://youtu.be/TmWIrBPE6Bc

Но пользоваться я им конечно же не буду. Шутка, я, как минимум, попробую на паре пет-проектов.

В общем, список изменений весьма большой, но лично мне очень зашли обновлённая палитра, стили для печати и Scroll snap API. Прям удачно.

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

#css #tailwind

#дайджест недели

Попробую внедрить эту рубрику, поскольку стараюсь выдерживать график выхода постов :) Итак.

Пн: CodePen с демонстрацией клавиатурных событий: https://t.me/htmlshit/860

Вт: Статья о CSS Grid и швейцарской технике компоновки https://t.me/htmlshit/861

Ср: Брат Can I Use? — сервис Can I Email? https://t.me/htmlshit/862

Чт: Как программно промотать видео назад? Да довольно просто: https://t.me/htmlshit/864

Пт: Важное, но раздражающее обновление VS Code, обводящее символы расширенного Юникода. Как его отключить? https://t.me/htmlshit/865

Сб: Tailwind CSS 3.0 https://t.me/htmlshit/866

Stay tuned!

#фишка дня

Посмотрите на этот код; ничего странного не замечаете?

А здесь происходит ого-го какая драма!

Итак, этот, казалось бы, невинный кусок кода очень даже содержит в себе бэкдор. Посмотрите внимательно на GitHub Gists: https://gist.github.com/bekharsky/fa4c071ce657e37f6d0f3e7f4a91799b

Да, это на скриншоте сложно заметить, но в деструктурировании req.query вторым параметром лежит невидимый символ \u3164. Заполнитель, буквально.

То есть:

const { timeout,\u3164} = req.query;

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

Доклад по методу: https://certitude.consulting/blog/en/invisible-backdoor/

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

#node #js #security #unicode

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

Иногда видишь такой радостное описание новой крутой библиотеки для позиционирования тултипов и вообще разных элементов друг относительно друга. Например, этой: https://floating-ui.com/

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

Заходишь на их гитхаб и по привычке собираешься жмякнуть звезду. А там уже жмякнуто...

Короче, оказалось, Floating UI это старый добрый Popper.js. Это не хорошо и не плохо, Popper отлично справлялся и справляется с работой. Но на мой взгляд, новое название такое себе.

Впрочем, сути дела не меняет. Штука — отличная.

#popper #js #tooltip

#такое дня

Иногда мне кажется, что JavaScript это такая шутка. Но если бы его не было — его стоило бы придумать.

P. S. Конечно же это поведение закреплено спецификацией https://javascript.plainenglish.io/the-benefit-of-the-thenable-object-in-javascript-78107b697211

#js #async #await

#ссылка дня

А если бы Валерий следил за The State of CSS, такого удивления бы не возникло.

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

В этот раз на русский переведено почти всё :)

Претензии к качеству перевода отправляйте в issues, мне они тут не нужны

#css #book #almanac

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

Сегодня я решил напомнить уважаемому сообществу, что за инфраструктурой Node.js нет монополии на средства разработки фронтенда. Ну как минимум, вы можете просто сесть и начать. Но как насчёт чего сложнее? Можно ли жить без node_modules в 2021 году?

Можно. Команда Ruby on Rails это доказывает, выпуская Rails 7.0: https://rubyonrails.org/2021/12/15/Rails-7-fulfilling-a-vision

Для них это был долгий путь, RoR давно уже не на хайпе и стал вполне себе повседневным инструментом множества компаний. Но звёзды сошлись именно в этом году. Гибридное приложение без React и Node на одном языке — реальность.

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

#ruby #ror

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

Заметили переименование канала? Неудивительно. Верстальщики тоже разработчики :)

На самом деле, просто тесно в рамках темы. Иронично, что этот пост всё равно про вёрстку.

Скучали по Comic Sans MS? Да ладно, не врите. Точно скучали.

А может, вам нужно набросать прототип, в котором никто не докопается до дизайна? Нет ничего лучше «нарисованного вручную» макета!

Вот свежий UI-кит: https://chr15m.github.io/DoodleCSS/

И фраза «Sketching with CSS» уже не кажется такой глупой.

#css #ui #kit

#дайджест недели

Пн. Будьте осторожны, копируя код из интернета. Можете нарваться на скрытые символы: https://t.me/htmlshit/869

Вт. Popper.js — библиотетка тултипов и слежения за блоками — переименовалась во Floating UI: https://t.me/htmlshit/871

Ср. Есть такие объекты в JS — thenable. Довольно забавная штука: https://t.me/htmlshit/873

Чт. The State of CSS 2021: https://t.me/htmlshit/874

Пт. Ruby on Rails 7.0 доказывает, что Node.js для гибридных приложений не особо-то и нужен: https://t.me/htmlshit/876

Сб. Библиотека «нарисованных вручную» элементов UI. DoodleCSS: https://t.me/htmlshit/878

Stay tuned!

#баг дня

Давно багов не было! Встречайте: в Chrome 96 на macOS Monterey символы переноса отображаются квадратиками: https://codepen.io/bramus/pen/57d328f32cbc657a3d7a3f4a59506e02

Баг официально зарегистрирован: https://bugs.chromium.org/p/chromium/issues/detail?id=1267606

Обходится просто:

html {
    -webkit-hyphenate-character: '-';
}

Исправлено в Chrome 98.

#chrome #bug

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

Второй забавный UI-набор за неделю.

Скажите мне, узнаёте ли вы стиль на картинке, и я скажу, сколько вам лет.

Ну или что вы учились в пост-советской школе, ха-ха.

Так или иначе, TuiCSS. Буквально — Turbo Vision UI CSS: https://github.com/vinibiavatti1/TuiCss

Не знаю, зачем оно. Но мало ли, у вас приступ ностальгии или вечеринка в стиле.

Мне больше по душе NES.css, его для ретро-игр использовать милое дело: https://nostalgic-css.github.io/NES.css/ 😍

#ui #css

#книга дня

Какой материал подъехал, вы не поверите!

https://www.patterns.dev/

Бесплатная, прекрасно иллюстрированная и снабжённая подробными примерами книга о паттернах проектирования и их применении в React-приложениях.

Просто огонь 🔥

#book #react #js

#ссылка дня

Среди новичков (да и не только) зачастую отсутствует понимание того, как же всё-таки выглядят вообще все HTML-теги. Но это-то ладно.

А вот для чего нужен normalize? sanitize? reset? bootstrap? Что происходит-то вообще?

Почему нельзя просто на одной странице всё наглядно показать и сравнить?!

Так можно!

HTML5 Kitchen Sink. Всё в кучу!

https://github.com/dbox/html5-kitchen-sink/

Заходим, переключаем, сравниваем. Разрабатываем своё.

#html #css #reset #normalize