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

Важной частью процесса разработки является сканирование уязвимостей в коде и зависимостях. А ещё более важной — слежение за ними.

И этот процесс было бы неплохо автоматизировать.

Да, в какой-то мере справляется dependabot, но не во всех компаний используется GitHub и хотелось бы получать сводки в любой момент. Ну а npm audit такая себе игрушка.

И тут у нас имеются прекрасные инструменты. Для начала, конечно же, база уязвимостей для Open Source библиотек: https://ossindex.sonatype.org/

Обратите внимание, речь не только про JS aka npm, в каталоге присутствуют практически все мыслимые среды и пакетные менеджеры.

Второй момент это тулинг. И тут от тех же Sonatype имеется пакет AuditJS: https://github.com/sonatype-nexus-community/auditjs

И расширение для VS Code: https://marketplace.visualstudio.com/items?itemName=SonatypeCommunity.vscode-iq-plugin

Всем безопасной разработки, котаны!

#security #vulnerability #scan #audit #бородач

#баг дня

Кастомные скроллбары — штука прекрасная, хоть за 20 лет так и не нашедшая свой путь в стандарты. До сих пор полноценная стилизация возможна только в Blink aka Chromium и WebKit aka Safari.

В Firefox как не работало, так и не работает.

К слову, хорошая статья Ахмада Шадида на тему: https://ishadeed.com/article/custom-scrollbars-css/

Короче, суть бага: если вы решились таки стилизовать скроллбар, то не рассчитывайте, что Safari правильно применит стили по наведению мыши :)

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

Раз сработает, два сработает, а на третий — всё, нет. Смотрим видео, собственно.

Решение от Брамуса Ван-Дамма довольно забавное: нужно стриггерить инвалидацию стилей, для чего можно рандомной CSS-переменной присвоить неопределённое значение. Вот так:

.section:hover {
  --force-rerender: ;
}

Странные вайбы такие... IE-шные.

Короче, как будет ссылка на официальный багтрекер — закину.

Upd. Ссылка на багтрекер: https://bugs.webkit.org/show_bug.cgi?id=267575

#css #scrollbar #safari #bug #бородач

#статья дня

Плохо ли патчить глобальные методы? Казалось, что ещё со времён PrototypeJS и MooTools было понятно, что да.

Из-за них у нас String.prototype.includes() вместо String.prototype.contains().

Но так вышло, что аж три крупных проекта решили, что им-то всё можно :) И это React.js, Next.js и Bun.

Next.js и React.js оба патчили fetch. Причём, React по факту сделал это ради поддержки React Server Components, которые — сюрприз — на момент внедрения тоже были только в Next.

А Bun всё в тот же несчастный fetch добавил конфиг proxy.

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

Итак, статья по теме: https://kettanaito.com/blog/why-patching-globals-is-harmful

Выдержки:
1. Страдает поддержка
2. Теряется предсказуемость работы (особенно с тем, как это пытались сделать в React)
3. Предложенные API — они про решение бизнес-задач здесь и сейчас, но никак не про будущие процессы и обучение разработчиков.
4. Подобные решения — это лок на поставщика. Используете proxy в Bun — на ноду не слезете.
5. Если подобное внезапно наберёт популярность — как в случае с Prototype.js и MooTools, то уже спеку придётся подгонять под вендора.

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

#js #patch #fetch #react

#фишка дня

Одна из знаменитых проблем Safari на iOS — это утечка скролла. Условно говоря, показали вы модалку, скроллите её — а фон тоже скроллится. В Safari 16, впрочем, проблема была решена.

Тем не менее, модалками и overflow: hidden поведением проблемы со скроллом в разных браузерах не ограничиваются.

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

Я устал придумывать синонимы слову скроллить.

Так вот, уже достаточно давно существует свойство overscroll-behavior. Оно позволяет не только запретить цепочку событий прокрутки, но и отменить пограничные эффекты!

MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior

Демо: https://mdn.github.io/css-examples/overscroll-behavior/

Наиболее популярный и, для кого-то, раздражающий эффект окончания прокрутки — это пружинка. Именно поэтому я записываю демо из Safari, чтобы сразу стало понятно, о чём речь.

Ах да, Safari... как обычно, поддержка только-только появилась, с 16 версии. До того приходилось мучаться.

В любом случае, свойство очень удобное, пользуемся.

#css #scroll #overscroll #бородач

#фишка дня

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

Тем не менее, браузеры пытаются и много лет назад у нас появились селекторы :invalid и :valid.

Как несложно догадаться, они целятся в поле ввода, не соответствующее критериям и соответствующее критериям соответственно. Например, required.

Я сел на книгу с каламбурами, простите.

Казалось бы, вот оно, счастье! Пишем что-то такое:

input:invalid ~ .invalid-message {
  display: block;
}

...и получаем сообщение о незаполненном поле!

Ага, хрен там.

Прикол того же :invalid в том, что пустое, не тронутое пользователем поле, изначально не удовлетворяет заданным условиям! И сообщение будет висеть сразу, раздражая всех.

Если email — то пустая строка, очевидно, не является правильным адресом почты. То же самое с обязательным вводом.

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

Потребовалось всего 6 лет ожидания, чтобы в Chrome и Safari, наконец, появилось то, что в Firefox было все эти годы: концепция грязных полей в виде селекторов :user-invalid и :user-valid.

Почему грязных? Потому что их потрогал пользователь! То есть, совершил ввод.

Кроме шуток, это буквально самый настоящий термин для библиотек обработки форм, вроде того же react-hook-form, или Angular.

Есть ещё концепция touched, когда ввода не было, но произошло событие blur.

Я, чувствую, мог запутать... Давайте сразу к делу. Если вы до сих пор не прошли по ссылкам, то вот сейчас самое время пойти в CodePen с примером, который показывает разницу: https://codepen.io/alinaki/pen/NWJPvPE

Согласитесь, это уже похоже на удобную валидацию, котаны!

#css #validation #required #forms #бородач

#интерактив дня

А поделитесь своими самыми странными, стрёмными или вообще — просто запомнившимися собеседованиями.

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

На тот момент компания была маленькой и процессы были медленные. Кончилось тем, что меня пригласила на собеседование в Хельсинки другая компания, и нынешней я написал: «Так может уже познакомимся уже?». Отсылку поймут не все.

Ну и вместо трех этапов получился один, не считая скрининг. Правда, собеседовали 8 человек разом, включая CEO.

Ну и по ходу пьесы я просил перевод пары терминов у русскоязычных собеседующих…

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

Давайте свои прохладные былины.

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

Всё ещё испытываете проблемы с ветками в Git?

Not anymore!

Только сейчас открывая ссылку https://learngitbranching.js.org/ на вашем компьютере, вы получаете уникальную возможность научиться ветвлениям и слияниям в любимой системе контроля кода.

Или вы любите Mercurial? 🤔

#git #education #бородач

#статья дня

Музыканты тут? Хотите нотную запись на гридах?

Нет? А я принёс! Сходу: https://cruncher.ch/blog/printing-music-with-css-grid/

В общем, предыстория такая. Разработчик по имени Стивен Бэнд несколько лет назад реализовал генерацию нотного стана в SVG из JSON записи, но осознал, что правильный рендеринг этого дела слишком сложен, и отложил.

И тут до него дошло: раз всё равно всё делать в браузере, почему бы не сделать гридами?

Ну и пошло-поехало:

grid-template-rows:
    [A5] 0.25em [G5] 0.25em [F5] 0.25em [E5] 0.25em
    [D5] 0.25em [C5] 0.25em [B4] 0.25em [A4] 0.25em
    [G4] 0.25em [F4] 0.25em [E4] 0.25em [D4] 0.25em
    [C4] 0.25em ;

Дальше — больше. Итогом стал веб-компонент, генерирующий стан из записи аккордов:

0 chord D maj 4
0 F#5 0.2 4
0 A4  0.2 4
0 D4  0.2 4

Гитхаб тоже имеется: https://github.com/stephband/scribe/

Шикарное решение, интересный ход мыслей. Всем рекомендую к прочтению, даже если вы не музыкант

я тоже нет, но это так красиво! :)

#css #grid #music

#фишка дня

Как заставить элемент изменять свою ширину... ступенчато?

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

И сегодня у нас аж несколько вариантов, как этого добиться.

1. От Аны Тюдор: https://codepen.io/thebabydino/pen/zYbZpBq

Используем функцию модуля:

width: calc(95vmin + -1*mod(95vmin, 15px));

Но вот беда, в Chrome модуль пока не поддерживается... но не унываем! Есть ещё два варианта от Темани Афифа aka CSS Challenges.

2. Эффективное значение функции выше это, буквально, округление. Но так и такая функция в CSS имеется! Как-то так:

min-width: round(95vmin,15px);

Пример: https://codepen.io/alinaki/pen/VwRMpPY

Но... Chrome опять в обломе.

Да, и в первом и во втором вариантах на коне Firefox и Safari. Как я уже недавно писал, парни из Chrome взяли привычку реализовывать только то, что можно красиво оформить в пост. И реализовали тригонометрические функции, забыв про базу.

Потому нам ничего не остаётся кроме как...

3. CSS Grid конечно же: https://codepen.io/t_afif/pen/KKEXwmR

И секрет будет в правиле:

grid-template-columns: repeat(auto-fill, 15px);

Всем шахмат, котаны :)

#css #trick #math #бородач

#фишка дня

Если ваш конфиг ESLint до сих пор заставляет писать rel="noopener noreferrer" в каждой targer="_blank" ссылке, вы живёте в прошлом.

Потому что писать noopener не надо.

Этот атрибут запрещает установку свойства window.opener на открытое окно, таким образом, запрещая доступ открытого окна к открывающему.

Это уже 4 года как дефолтное поведение всех (нормальных) браузеров.

Ну а ставить ли noreferrer — чтобы узнать URL, откуда пришёл пользователь — дело ваше.

#eslint #security #anchor

#ссылка дня

Комиксы о веб-разработке должны быть нарисованы с помощью веб-технологий и точка! Всё остальное — ересь и подделки!

Во всяком случае, так считает автор блога Comicss: https://comicss.art/

Каждый комик-стрип на его сайте нарисован с помощью CSS и HTML. Буквально.

Потом, конечно, сконвертирован в webp/png, но к каждой картинке можно посмотреть исходный код.

Максимально забавный подход.

#css #art #бородач

#фишка дня

И #тред дня, и #статья дня... Сегодня всё и сразу от Джоша Комо.

И речь пойдёт о недооценённом хуке в React: useDeferredValue.

Итак, некоторое время назад Джош выпустил свой инструмент для создания красиво выглядящих теней (да-да, drop-shadow просто уже недостаточно). И одной из проблем инструмента стала... дёрганая реакция на движение ползунков. Как будто мало FPS.

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

Но что нам нужно? Нам ведь сначала нужен результат, а уже потом — код. Так почему бы не заполнить код чуть позже, не нагружая систему?

И именно для этого и нужен хук useDeferredValue. Данные молучим только когда основной процесс рендеринга завершится. Буквально ленивое выполнение.

Собственно, тред и статья если кто предпочитает подробности. Там, как всегда, шикарно.

Будьте разумно ленивыми, котаны!

#react #hook

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

А приходилось ли вам, котаны, писать код, который должен был немного по-разноме реагировать на разные условия существования?

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

Так вот, если не приходилось — то обязательно придётся. И на помощь в этом придёт набор хуков от Google Labs под общим названием React Adaptive Loading Hooks & Utilities: https://github.com/GoogleChromeLabs/react-adaptive-hooks

Естественно, все эти хуки умеют определять, запущены они в SSR или нет.

Куча демок в наличии.

К слову, следует напомнить, что определение сети — штука не самая надёжная. Наш ультимейт фейл с React Query это только подтверждает: https://news.1rj.ru/str/htmlshit/2347

#react #hooks

#молния дня

Доступен react-compiler. Только что представили на конференции ReactConf. Кто не понял, тот поймёт: https://react.dev/learn/react-compiler

Исходники: https://github.com/facebook/react/tree/main/compiler

#игра дня

Хотите стать почти дизайнером и, наконец, понять, как работают кривые Безье и инструмент Pen в, буквально, всех векторных редакторах?

Вы по адресу!

Интерактивное руководство: https://bezier.method.ac/

Я, правда, так ничего и не понял. Ничего не получилось. 🙁

#vector #bezier #tool #learn #бородач

#баг дня

Один браузер для всех это же так прекрасно, не правда ли?

И... нет. К сожалению, этот мир не будет прекрасным. И характеризуется такое положение некоторыми багами, которые разработчики Google Chrome отказываются решать годами.

Например, этот: https://bugs.chromium.org/p/chromium/issues/detail?id=914451

TL;DR: такое количество боли в комментариях мало где найти можно. Причина? С 2014 года игнорируется атрибут autocomplete="off" на формах.

К чему это приводит? К сломанным виджетам выбора с автоподстановкой (autocomplete, combo-box), сломанным интерфейсам выбора даты, к ошибочным заказам в интернет-магазинах... Да просто почитайте поток ненависти 🙂

Зачем это было сделано? Ну им нужно было продвигать свои фичи для логина, управления паролями, адресной книги.

Количество предложенных хаков для исправления огромно, от contenteditable вместо полей ввода до рандомных строк в autocomplete.

Дискуссия ещё и перегибает палку там, и очень часто. Потрясающее чтение, рекомендую.

#chrome #google #evil #бородач

#video дня

Видео с прошедщего ReactConf ещё только предостоит посмотреть, не получилось сделить за лайвом, но плюс-минус параллельно с ReactConf шёл же ещё Google I/O 2024! Меня, правда, там больше интересовала ситуация с Flutter, но тем не менее, новинки веба тоже были.

И одна из них — плавные/анимированные переходы скоро будут (да и уже) возможны не только между экранами одного приложения, но и между разными страницами и даже доменами! Т. н. Cross-document view transitions.

Видео с анонсом: https://www.youtube.com/watch?v=eY6C_-aDdTo
Документация: https://developer.chrome.com/docs/web-platform/view-transitions

Пример: https://view-transitions.netlify.app/stack-navigator/mpa-prerender/ (Chrome Canary)

Как всегда, в выигрыше разработчики ПО для киосков :) Им-то обновить движок легче всего.

#css #view #transition

#такое дня

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

Первый раз — часовые пояса, ок. Договорились, переназначили. И снова не пришёл.

Ну, думаю, нам не очень нужен кандидат, не умеющий в часовые пояса.

К слову, если ты считаешь себя лид-фронтом или добротным фуллстеком — нам очень надо 🙂

#фишка дня

Вне зависимости от модных поветрий, отсутствие тёмной темы на ресурсах начинает иногда раздражать.

Давайте сделаем свою. Для любого сайта.

Секунд за пять.

1. Инвертируем всё к чертям.
2. Поворачиваем колесо hue (тон) на 180 градусов чтобы получить более приятные глазу цвета.
3. Отменяем эти фильтры на картинках.
4. …
5. PROFIT!!11

Ну и быстрый пример, основанный на уже известном вам газетном макете: https://codepen.io/alinaki/pen/jOBvzdW

Предупреждение от автора способа: «Важно отметить, что такой хак форсирует вынос блока в отдельный слой рендеринга. Так что если внутри используется абсолютное позиционирование с огромными координатами, то такой слой может не влезть лимиты по памяти, и, как следствие, не дорендериться до конца».

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

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

#css #darktheme #filter #бородач

#статья дня

Вы (да и я) могли раньше не обращать внимания, но animation-timing-function применяется к каждому ключевому кадру, описанному в блоке keyframes.

Т. е. имея такую анимацию:

box-animation {
from, 5% {
left: 10px ;
}
25%, 40% {
left: 30% ;
}
60%, 75% {
left: 70% ;
}
95%, to {
left: calc( 100% - 90px ) ;
}
}

и animation-timing-function равный cubic-bezier(.55, -0.64, .42, 1.63) мы получим результат, изображённый на иллюстрации. Т. е. функция анимации будет применена на каждый временной отрезок, а не на всё время проигрывания. Думайте об этом как о color-stop в градиентах.

Такое поведение описал Бен Нэйдл (Ben Nadel) в своей статье https://www.bennadel.com/blog/3885-animation-timing-functions-get-applied-per-keyframe-in-css.htm

#css #animation #keyframes