#заметка дня

Мне не очень нравится вложенность в SASS/SCSS/LESS и иже с ними.

Не очень нравится и будущее предложение внести вложенность (nesting) в CSS.

И я поясню, почему.

В первой части заметки много кода, телега не справится. Пройдите сюда, пожалуйста: https://gist.github.com/bekharsky/dea79c6b51fb693fba81897a40a594a4

Не так давно я в чате пытался помочь человеку, который накидал & для формирования классов (пытался в БЭМ) и никак не мог понять, как же сделать &:hover.

Получалось что-то вроде:

.block {
  &__element {
   // styles
  }

  &:hover {
    &__element {
      // styles
    }
  }
}

Кто-то на этом месте фыркнет. И будет неправ, потому что SCSS мог бы вместо простой конкатенации строк делать что-то более умное с блоками. Но надо ли?

Более опытные вспомнят про кеширование селекторов. Тоже вариант. Закешируем с десяток, почему нет… попробуй разберись.

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

Нестинг затрудняет понимание кода и поиск. Стили потомка могут оказаться в любом месте стилей родителя. Зачем?

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

#css #scss #nesting

#видео дня

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

Да даже анимацию открытия модального окна можно сделать с помощью видео.

Так вот, Юрий Артюх записал прекрасное руководство по разным аспектам создания и работы видео с прозрачностью: https://youtu.be/Xg6aYfuvRHk

Как и откуда брать? Чем конвертировать? А что с Safari? Как работать в webm и hevc?

Ну и конечно, как имитировать прозрачность и как сделать видео еще меньше, загрузив его с WebGL-маской.

Как всегда прекрасно и вовремя.

#video #alpha #transparency #webgl

#ссылка дня

А как сделать кнопку? А как тулбар? А как сверстать несколько колонок с перекрытием? А если мне анимации стандартные не подходят?

Ни слова больше! Google has us covered!

https://web.dev/patterns/

От простых вещей вроде кнопки или описания кривой Безье для анимации до загрузки файлов, работы с буфером обмена и превращения сайта в PWA.

Хотелось бы больше примеров, конечно, но кому не хочется? :)

#web #app #patterns

#codepen дня

На TikTok развелось огромное количество дизайнеров, которые отточили владение прототипами в Figma до невероятных высот.

Естественно, под каждым из таких видео с названиями «how to make supa 3d carousel in Figma supafast» раздаётся вой вида: «А как это верстать?»

Ну иногда, к счастью, верстать это можно так же, как рисовалось, и Jhey — деврел Google — нам это демонстрирует при помощи градиентной маски, смотрим: https://codepen.io/jh3y/pen/gOeXgXv

Элегантно, конечно, но требует тонкой настройки, чтобы не кружилась голова 🤪

#css #tiktok #mask #gradient

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

Ребята из Adobe делают очень и очень крутые вещи со своей дизайн-системой Spectrum.

Ну хотя бы просто потому что они догадались разделить React-часть на несколько дополняющих друг-друга компонентов: Aria, Spectrum и Stately. Где Aria — хуки для доступности, Stately — хуки состояний элементов, а Spectrum — построенная на них библиотека виджетов.

То есть, смекаете? Хуков из Aria и Stately достаточно для построения своего UI-кита или дизайн-системы. Их сочетание можно назвать безголовым, headless, UI-набором.

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

Так вот, они тут провели большое исследование библиотек и компонентов для реализации перетаскивания элементов (drag-n-drop) и реализовали свои, с поддержкой не только мыши, но и тач-интерфейсов и клавиатур.

Их отчёт об этом: https://react-spectrum.adobe.com/blog/drag-and-drop.html

Весьма интересно, почитайте. И сам Spectrum, кстати, тоже очень хорош. Лёгок и продуман.

#adobe #react #ui

#статья дня

О, чо подъехало-то на ночь глядя!

Забудьте все то, что вы учили о флексбоксе. Забудьте FlexFroggy, Flex vs Zombies и Flex Defense (нет).

Джош Комо как всегда великолепен в своей новой статье на сей раз — да, о флексбоксе: https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/

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

#flex #turorial

#баг дня

input size=“1” в Firefox слишком широкий. Логика подсказывает нам, что он должен так-то быть в один символ шириной.

Песочница: https://jsbin.com/zavefac/edit?output

Багтрекер: https://bugzilla.mozilla.org/show_bug.cgi?id=1782385

С комментария в приложенном куске кода я в целом в голос прорал: «To better match IE»…

Вот и он, кстати: https://searchfox.org/mozilla-central/rev/92e8568bbe7c8bf64f7a8ee958291877d960d7d8/layout/forms/nsTextControlFrame.cpp#209-232

Вроде как для моноширинных шрифтов все отрабатывает как надо. Но что-то пошло не так.

#firefox #bug

#ссылка дня

Тимлид я ещё довольно молодой, приходится учиться всему на лету и черпать знания отовсюду.

Поэтому, было весьма интересно найти роадмап (карту знаний и умений) по этой теме: https://tlroadmap.io/

Работать с ним можно буквально как с картой, выбирая нужные ветки, или же как с документом: https://tlroadmap.io/guide.html#%D0%B8%D0%BD%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%86%D0%B8%D0%B8-%D0%BF%D0%BE-%D0%B8%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D1%8E

Всё написано понятным языком и вообще весьма интересно. И не только тимлидам, конечно же.

#teamlead #learning #roadmap

#статья дня

Вечнозелёная (суть, никогда не устареет) статья Павла Лаптева о 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

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

Виджет выбора цвета, color picker — пипетка, по-нашему — нечастый гость в интерфейсах, но уж если нужен, то максимально удобный.

Да, в браузерах есть встроенный (`input type=“”color`), но давайте честно, они все полное говно. Сложно приходится.

Встречайте: https://github.com/Simonwep/pickr

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

А вот и пример подъехал: https://codepen.io/serg-by/details/qBXqJxL

К слову, о системных пикерах. Мой любимый на Linux: https://www.kryogenix.org/code/pick/

На macOS: ColorSlurp.

#pickr #colorpicker

#заметка дня

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

И, естественно, очень хорошо прослеживается влияние JSX. Я не думаю, что XHTML вообще оказал хоть какое-либо влияние на молодых разработчиков :) А JSX — запросто.

В любом случае, «каноничный» вариант HTML input это, конечно, третий и четвертый варианты.

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

Короче, это был не опрос в смысле вас проверить, а буквально сбор ответов :)

#статья дня

Видите, подписчик проблему обвёл синей линией?

Оказалось, он просто был не в курсе, что пару лет назад я писал статью с прекрасным названием «Загадка дыры».

По-моему, пришло время её репостнуть, раз проблема всё ещё встречается: https://telegra.ph/Zagadka-dyry-07-18

Не дырите, котаны.

#img #inline #block #flex

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

Тема генерации градиентов буквально неисчерпаема. Вот подъехал ещё инструмент: https://components.ai/gradient/rfx04toi2Bx4GLUxPpdV

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

Удобный предпросмотр и экспорт в React-компоненты наличествуют.

#gradient #css #tool

#заметка дня

CSS-градиенты, конечно, были в своё время прорывом, вот только есть одна проблема.

Математически линейное изменение цвета и/или прозрачности глазом воспринимается слишком резким и… ранним.

Точно так же как и с transition, можно было бы применить функции плавности (easing). Правда, это потребует некоторых усилий, в стандарт CSS они пока не вошли.

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

Можно, конечно, и проще. Добавить промежуточный цвет при помощи пары остановок, т. н. подсказки перехода. Этот цвет может стать едва ли не основным: https://codepen.io/argyleink/pen/GRZoQLB

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

#css #color #gradient #easing

#codepen дня

Бегущую строку заказывали? Нет?

А я принёс: https://codepen.io/ykadosh/pen/KKezJzz

Почему именно этот вариант? Да всё просто. Логика построения анимаций бегущей строки не требует JS сама по себе, но требует повторения контента 2-3 раза, чтобы сделать бесшовный (или как минимум, кажущийся таким) переход.

Вот, можно и почитать: https://ryanmulligan.dev/blog/css-marquee/

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

К слову, в Chrome объявленный устаревшим тег marquee реализован на веб-компонентах и Shadow DOM. Вполне себе современно, не?

#marquee

#codepen дня

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

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

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

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

#svg #art #gsap

#бесит дня

!! — не оператор!

У меня всё.

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

Как часто вы произносите “ой”, работая с Git? Или, того хуже, “упс”? Не говорю уж про “бля”…

Не та ветка, не туда закоммитили, не те файлы, случайно грохнули ветку, зря запушили, не то сообщение, забыли вернуть работу из stash…

Так вот, если Git это бесконечный undo для ваших проектов, то ugit — это undo для Git!

Ссылка: https://github.com/Bhupesh-V/ugit

КДПВ говорит сама за себя.

#git