#фишка дня

В свежем Chrome 96 исчез список для чтения (Reading List). Появился он в 89 (вроде как) в экспериментальном режиме и лично мне крайне полюбился.

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

Просто раньше добавить в список можно было через ту же звёздочку, что в и закладки. А теперь — отдельно.

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

#chrome #bookmarks

#статья, а заодно и #инструмент, дня

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

Естественно, это никуда не годится и приходится переводить изображение в векторный формат, SVG. Трассировать его, выражаясь профессиональным языком.

Обынчо залетаешь в поиск с запросом "image to vector online" и там уже выбираешь между хорошим и бесплатным. Когда не лень, можно побаловаться консольными утилитами вроде http://potrace.sourceforge.net/ или условными Inkscape, люстрой, дровами.

И вот Томас Штайнер взял Potrace, собрал его под WebAssembly и выдал SVGcode. По пути не преминув запилить целую статью: https://web.dev/svgcode/

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

Да и сам SVGCode весьма хорош :)

#svg #pwa #trace

#codepen дня

Давно у нас не было игр. Не про CSS/JS, а просто хороших игр с простой и понятной физикой.

Marble Labyrinth одна из таких. Всё максимально просто и понятно, вам не найти кандидата лучше на изучение исходного кода: https://codepen.io/Gthibaud/pen/zNwgmZ

#game #physics #js

#ссылка дня

https://mediaqueri.es/

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

Кому может пригодиться? Ну, пожалуй, дизайнерам в первую очередь, которым нужно прикинуть, как же адаптировать сайт под мобильные устройства. Ну или наоборот, если mobile first.

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

#html #mediaqueries

#статья дня

Вы веб-разработчик из девяностых, если помните… https://zachholman.com/posts/only-90s-developers/

Точнее, веб-мастер. Чего это я :)

К слову, все представленные в статье техники очень даже жили года так до 2008 точно. Аж дрожь берёт.

#css #old

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

Как делаются самые приятные анимированные элементы интерфейса? Последние несколько лет ответ — Lottie.

Это созданная Airnbnb библиотека для экспорта анимаций из Adobe After Effects, а конкретно — плагина Bodymovin (есть и иные варианты, вроде Flow, Keyshape).

Вот свежая статья, здесь описывается использование для мобильных устройств, но для веба в общем-то всё то же самое: https://vc.ru/design/322570-chem-nam-tak-nravyatsya-lottie-animacii-i-pochemu-vam-tozhe-stoit-o-nih-uznat

Я же не так давно писал об альтернативах: SVGator и Rive. И Rive очень даже с тех пор взмыл вверх: https://t.me/htmlshit/526

В общем, хороших анимаций вам :)

#lottie #animation #svg

#ссылка дня

Хотите обучающих ресурсов? Их есть у меня. Желаете "дорожную карту" для обучения? Тоже.

Вот как вам такой вариант: https://andreasbm.github.io/web-skills/, подходит?

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

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

#css #web #education

#справочник дня

Знаете, какой мой любимый вопрос на собеседовании?

const a = [2, 3, 1];
const b = a.sort();
console.log(a);

Сначала ответьте, а потом идите сюда: https://doesitmutate.xyz/

Вы удивитесь какое число людей отвечают неверно и/или не знают, какие методы массивов мутируют исходный массив.

Иногда можно и нарваться.

#js #array #mutation

#ссылка дня

Каталог российских дизайн-систем: http://designsystemsclub.ru/

Мне от Газпромнефти нравится: https://consta.gazprom-neft.ru/

#ui #kit #designsystem

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

Помните полифилл на контейнерные запросы? Назывался cqfill. Ну если не помните, вот ссылка на пост: https://t.me/htmlshit/601

Так вот, этот полифилл заставлял много шевелить руками, добавлять кастомные свойства и вообще был так себе.

На днях вот вышел ещё один, от ребят из Google Chrome Labs, container-query-polyfill: https://github.com/GoogleChromeLabs/container-query-polyfill

Работает на Mutation- и ResizeObserver, не требует дополнительных телодвижений в виде пользовательских свойств и вообще чуть быстрее.

Пробуем :)

https://codepen.io/bramus/pen/LYxNpeE

#css #containerqueries #polyfill

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

Весьма оригинальная библиотека иконок: https://css.gg/

Суть в том, что каждая из более чем семисот штук представлена не только в виде ныне стандартного SVG (опустим исходники), но и в CSS. Буквально в виде CSS-кода, один элемент с псевдоэлементами и масштабированием через пользовательские свойства.

Понятное дело, это накладывает некоторые ограничения на визуальный стиль, но в целом — крайне интересно.

#css #svg #icon #library

#ссылка дня

Ребята из httparchive.org выпустили очередной (третий по счёту, вроде) Web Almanac: https://almanac.httparchive.org/en/2021/

Как нетрудно догадаться из названия, это общее состояние веба в 2021 году: используемые технологии, размеры страниц, комбинации фреймворков. Даже названия CSS-классов :)

Кстати, самый популярный — active 😱

Всё это на разных языках, включая русский и украинский. Но не для всех языков есть полные переводы статей :)

#book #web #css #html #js #archive

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

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

Это было лишь вопросом времени, как быстро пользовательские свойства начнут собирать в библиотеки. И вот одна из них: 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!