#статья дня

Пожалуй, всё же эта статья будет статьёй дня. Хотя кто мне запрещал несколько в день? Никто, правильно.

Итак… Работа с WebGL-шейдерами в React через React Three Fiber!

Раз:
https://blog.maximeheckel.com/posts/the-study-of-shaders-with-react-three-fiber/

Два:
https://blog.maximeheckel.com/posts/the-magical-world-of-particles-with-react-three-fiber-and-shaders/

Целая серия (аж две!) статей о шейдерах и RTF, с интерактивными примерами и погружением не только в RTF, но и немного в основы WebGL вообще.

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

Всем шейдеров, котаны!

#webgl #react #rtf

#заметка дня

Заменили уже node-sass в своих проектах на sass?

Нет? А чего ждём?

Чем больше в компании людей на Apple M1, тем веселее становится поддержка проектов, использующих node-sass (libsass, сиплюсплюсовая реализация): он компилируется нормально только когда Меркурий в ретрограде. Или если не дышать.

А ещё оно deprecated уже года полтора: https://sass-lang.com/blog/libsass-is-deprecated

Сегодня набралась критическая масса таких людей у нас, поэтому я дропнул node-sass в пользу sass (релизация, написанная на Dart, DartSass; не спрашивайте).

Заодно убрал normalize-scss в пользу modern-normalize, ибо старый normalize уже не нужен.

На Webpack 5 переходить не буду, уйду на Vite.

Обновляйтесь, котаны.

P. S. речь о node-пакетах. Оригинальный отдельный sass — он на Ruby, RubySass :)

#scss #m1 #yarn #npm

#статья дня

Чему senior-разработчики могут поучиться у начинающих: https://stackoverflow.blog/2019/12/19/what-senior-developers-can-learn-from-beginners/

А теперь подтверждение тезисов статьи от, собственно, меня.

Случилось вот что: мы в шесть глаз просмотрели глупейшую опечатку.

В очень старом коде было повторяющееся условие проверки включения элемента в массив настроек:

settings.indexOf(“ADD_RESULTS”) !== -1

…и обратное к нему (=== -1).

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

И в этот момент и была допущена ошибка: заменив инверсное условие, мы забыли поставить оператор отрицания: “!”. И на ревью никто не заметил этого.

Почему? Потому что иногда лучше быть чётким в своих условиях, пусть даже код и выглядит странно. Очевидно, решение было плохим, но оно хотя бы было прямолинейным и чётко описывало условие. Раз три человека это пропустило, значит, и подход к рефакторингу был неверным изначально.

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

…и ещё пишите тесты, прежде чем влезать в логику старого кода, да.

#tdd #codestyle #refactoring

#фишка дня

Я давно ничего интересного про псевдокласс :has не приносил. Да-да, его ещё родительским называют.

Что если я вам скажу, что эффект на видео выше можно сделать не написав ни строчки кода на JS?

А вот как-то так:
https://codepen.io/jh3y/pen/abGPKGO

inb4 да, там есть JS, чтобы разбить текст на символы. Вы же не ожидаете, что кто-то это руками будет делать?

Меня в этом примере так-то вот что поразило:

.char:has(+ .char:hover)

Не, ну вы понимаете, понимаете, нет, что тут произошло сейчас?

Мы сослались на предыдущую букву от той, на которую навели мышь! Потому что у этой предыдущей буквы есть нижестоящий сосед, на которого мы навели, а значит, можно указать его селектор в аргументе псевдокласса :has!

🤯🤯🤯

CSS это весело, котаны.

#css #has

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

Всем же знакома ситуация с иллюстрации? CLS, Cumulative Layout Shift — одна из наиболее бесящих проблем при работе с несистемными, подгружаемыми шрифтами. Понятно, что шрифты это лишь одна из причин, но уж очень заметная.

Что же делать?

Можно сделать описание резервного, fallback-шрифта, на основе любого существующего системного и максимально уменьшить сдвиг. Адаптировать метрики, интерлиньяж, кернинг…

И вот именно этим занимается прекрасная библиотека https://github.com/pixel-point/fontpie

Вы генерируете нужные адаптации для вашего шрифта и указываете их как резервные.

Посмотрите пример на странице репозитория, впечатляет!

#font #css #cls

#заметка дня

Я тут сделал свой первый ESLint-плагин! Ну и, соответственно, ввёл в наши сборки новое правило. Но обо всём по порядку.

У «моей» среды исполнения JS — Google AppsScript — есть одна неприятная особенность. А именно: в глобальный скоуп попадают все переменные, объявленные на уровне модуля. Ну и, соответственно, они друг-друга могут перезаписать.

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

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

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

С плагинами для линтера есть одна проблема: почему-то нет возможности написать своё локальное правило, в рамках репозитория проекта. Надо обязательно создавать npm-пакет… но я не хочу. По крайней мере, не сейчас.

На помощь пришёл другой плагин: eslint-plugin-local-rules.

Великолепная штука, создал eslint-local-rules.js и поехали.

Но это всё было бы гораздо сложнее разрабатывать, если бы не ещё один инструмент: https://astexplorer.net/

Abstract Syntax Tree explorer: обозреватель абстрактного синтаксического дерева. Грубо говоря, ваш код разбивается на узлы и связи между ними: вот это — оператор, это — скобка, это — определение переменной, это — присвоение значения и так далее.

Анализируя это дерево (ну и конечно, документацию ESLint и исходники других плагинов) можно вполне себе быстро реализовать задачу.

Пишите плагины для ESLint, котаны. Это не больно.

…больно разгребать глупые баги :)

#eslint #javascript #ast

#такое дня

Теперь, когда вас попросят на собеседовании написать код, который выводит сам себя — вы знаете, что делать:

($=_=>`($=${$})()`)()

#js

#фишка дня

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

Достаточно проделать следующий трюк:

@keyframes appear {
from {
…whatever
}
}

Это анимирует объект в момент его появления из положения, заданного в анимации, в то, что указано в стилях.

Пример на CodePen: https://codepen.io/alinaki/pen/XWXORzM

Попробуйте обновить страницу и поиграться со значениями.

Спасибо Twitter-банде https://twitter.com/keyframers за эту находку.

#css #keyframes #animation

#заметка дня

Мне не очень нравится вложенность в 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, но уж точно не является неверным, если мы исходим из того, как это разберут браузеры и чего вы вообще хотите добиться.

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