А формула проста, и имя ей RICE-фреймворк.

Берём коэффициенты:

Reach: сколько людей будет затронуто, число
Impact: насколько сильно,0.25, 0.5, 1, 2, 3
Confidence: степень уверенности в этом, в процентах
Effort: сколько сил потребуется, любое положительное число, сторипоинты, человеко-месяцы, часы; что угодно используемое в конторе

И считаем: (R*I*C)/E. Больше число — больше уверенности в успехе. Или как минимум в целесообразности начала разработки.

А вот что такое готовность и успех можно поговорить позже.

Правда это всё не включает Developer’s Enjoyment 🥲

Подробнее тут: https://hello.ducalis.io/knowledge-base/rice-scoring-prioritization-framework

#ссылка дня

Когда-то мы обсуждали новость о том, что ESLint хочет перейти на новый, плоский формат конфига в своей 9 версии.

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

Это, казалось бы, удобное нововведение вызвало бурю негодования. Кто-то решил остаться на восьмой версии, кто-то нашёл это идеальным поводом чтобы уйти на какой-нибудь Biome.

Но... ESLint нас услышал! И они выкатили инструмент для миграции конфигов: https://eslint.org/blog/2024/05/eslint-configuration-migrator/

Естественно, не без ограничений (основное — поддерживается только корневая директория), но всё же.

Буду пробовать и сообщу. Я тут осознал, что вообще до сих пор на седьмом...

#eslint #tool

#такое дня

Продолбал вечер пятницы из-за одного довольно тупого решения почти годичной давности.

Итак, на проекте используются react-hook-form и кастомный селект на базе Downshift (useSelect). К react-hook-form, по причине контролируемой реализации виджета, он подключается через Controller.

В октябре прошлого года по причине, которую никто уже не помнит, мы закрепили react-hook-form на версии 7.47.0.

Ну и всё шло гладко, пока мне не потребовалось прокидывать disabled-состояние на те самые селекты. Казалось бы, однозначный код:

<Controller
    name={name}
    control={control}
    disabled={disabled}
    defaultValue={options[0].value}
    shouldUnregister={true}
    render={({ field: { onChange, value } }) => (
        <Select
            options={options}
            defaultValue={value}
            onChange={({ value }) => {
                onChange(value);
            }}
        />
    )}
/>

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

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

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

P.S. Ладно, самое тупое в том, что мне в итоге не понадобился disabled. Вообще.

Я решил просто не показывать контролируемые селекты, если нужная секция не отмечена. Таким образом, поле ввода снимается с регистрации в React Hook Form и значения не приходится фильтровать.

#form #react

#статья дня

Прекрасный материал от Ван Дамма. Брамуса. Того самого, который нам много рассказывает про CSS Scroll Timeline API.

Те, кто в вёрстке давно, могут помнить баталии на тему что же такое календарь: список или таблица? Я был приверженцем второго варианта, потому что привычный календарь – он ходит как таблица, ест как таблица и крякает как таблица (надеюсь, отсылку вы поймёте 🧐)

Так вот, Брамус заявляет: “Календарь – это сетка!”.

Семантически календарь это список дней, но для представления максимально логично использовать возможности CSS Grid.

https://www.bram.us/2020/12/08/a-calendar-in-three-lines-of-css/

На всё про всё буквально три значащих строчки. Хочется, чтобы неделя начиналась с воскресенья? Нет проблем, сдвигаем начало сетки!

В общем, на этом войне календарей должен быть положен конец.

#css #grid #calendar

#ссылка дня

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

1. Расширение для Chrome, позволяющее быстро выбрать и вставить XSS-строку в нужное вам текстовое поле: https://chrome.google.com/webstore/detail/bug-magnet/efhedldbjahpgjcneebmbolkalbhckfi?hl=en

2. Постоянно обновляемый репозиторий на ту же тему: https://github.com/minimaxir/big-list-of-naughty-strings

Впрочем, там не только XSS. Помните, например, в чатах люди свои ники пишут с “грязью”? Красиво поломать интерфейс — это туда. Вставить эмодзи, смайлы, управляющие символы.

Ломайте свои интерфейсы сами и избегайте XSS, котаны.

#xss #naughty #injection #бородач

#vscode дня

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

Я щас не шучу, know your tools!

Огромное количество разработчиков вообще с трудом понимает, что код — это просто текст, без подсказок IDE не справляются. Но не будем о наболевшем.

Сейчас я вам покажу нечто, что выведет поиск кода на новый уровень: расширение CodeQue!

Ссылка: https://marketplace.visualstudio.com/items?itemName=CodeQue.codeque

Я иллюстрацию файлом приложу, ибо иначе мелко. Но в чём соль: вы можете искать код, который напоминает тот, что написан в области поиска!

Например, в примере — ищем div, внутри которого есть ещё div с атрибутом className, установленным через clsx. Или ещё, можнот найти все формы, внутри которых есть select (необязательно, HTML-тег или компонент).

Я честно говоря сразу вообще не понял, нафига это надо — есть же RegExp.

Но потом ка-а-ак понял!

#search #extension #бородач

#codepen дня

На WWDC24 Apple похвастались тем, что на SwiftUI теперь можно создавать параллакс-галереи буквально несколькими строчками кода.

Но мы же с вами все знаем, что Web намного круче, как платформа. Мы тоже так умеем!

Правда, только в Chrome...

Ведь у нас есть CSS-переменные и Scroll Timeline API, который мы рассматривали вот тут, даже с полифиллом: https://t.me/htmlshit/621

Итак, вашему вниманию конфигурируемая параллакс-галерея от Джея: https://codepen.io/jh3y/pen/XWwzYZo

Весь JS там — это часть универсальной панели управления, чтобы задавать параметры.

#css #scroll #animation

#заметка дня

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

Давайте сразу определимся: хоть он и устаревший, он всё ещё прекрасно работает... в Chrome. Кому-то из разработчиков было весьма интересно переделать его на Shadow DOM и оптимизировать. В Safari и Firefox всё довольно плохо, тормозит безбожно. Поэтому, если ваша задача сделать киоск или использовать в приложении на Electron — не мучайте себя, берите его.

Поэтому долгое время бегущие сроки создавали, используя translate на контейнер и дублирование содержимого. Например, так: https://codepen.io/studiojvla/pen/qVbQqW

Но мы же с вами ровные, зачем нам такие технологии? Можно же жить в 2024 году и не дублировать контент почём зря!

А сделать это можно просто: через CSS-переменные и анимацию индивидуальных элементов! Для этого прямо в разметке указываем порядковый номер элемента и передаём его в определение анимации: https://codepen.io/thebabydino/pen/BaMqgPO?editors=1100

Пример выше — от Аны Тюдор. Вот то же самое, но без Pug, чтобы легче было понять принцип: https://codepen.io/alinaki/pen/poYyaMJ?editors=1100

В чём плюс такого подхода?

1. Никакого дублирования
2. Короткий код
3. Можно применить любые трансформации к каждому элементу, помимо сдвига
4. Фон принадлежит контейнеру и никуда не сдвигается. Можно прозрачность наложить, можно маски, можно глассморфизм... далее — везде.

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

Крутота же, котаны? Крутота.

#marquee #бородач

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

С места в карьер: утилита qnm предназначена для поиска установленных пакетов в node_modules. Зачем?

Ну, как минимум, это офигенно быстрый способ просмотреть версии всех установленных лично и не очень лично модулей: https://github.com/ranyitz/qnm

Почему ремарка про "не очень лично"? Потому что какой-либо пакет может запросто тянуть за собой более старую или более новую версию некой утилиты, на которую вы так сильно опирались.

Почему-то меня в этом отношении очень раздражает emotion. Его тащат просто куда ни попадя, а у людей потом на CSS-in-JS аллергия...

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

Моя рекомендация!

#npm #node #package #бородач

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

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

Зато сейчас я принёс действительно пушечную штуку: React Internals Explorer.

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

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

Видео прикреплено к этому посту, но если предпочитаете ютуб — вот https://www.youtube.com/watch?v=qIlfTZxb8_0

Ну и ссылка на сам инструмент: https://jser.pro/ddir/rie

Да, у нас уже были попытки реализации подобного, например от Алекса Сидоренко: https://t.me/htmlshit/1970

Но представленный инструмент намного глубже погружается в проблему. Заодно, уже сейчас можно посмотреть, как по-разному React 18 и 19 рендерят компоненты.

Не забудьте нажать на кнопку Snippets, ага.

#react #tool #explorer

#фишка дня

Если вы любитель открывать кучу вкладок и нелюбитель использовать группы, для вас в Chrome есть прекрасное сочетание клавиш Ctrl-Shift-A или Cmd-Shift-A.

Это список вкладок с поиском! Очень удобная штука. Конечно, надо хоть немного помнить, что ты вообще открывал :)

Я просто к чему это, взглянул на экран «своего» джуна… ужас.

#chrome #feature #search #бородач

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

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

Есть проекты, которые написаны под Node 18 и не заработают ни на чём ниже. Есть очень старые проекты (да), которые дай бог под 10 заведутся, но всё ещё нужны.

Я уже молчу о вечнозелёных Bun, Deno... ну и так-то Go, Python и Rust тоже требуют собственную микроинфраструктуру на вашем компьютере, которая может отличаться от версии к версии.

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

Если говорить только о Node.js, я долгое время использовал nvm (Node version manager): у меня был проект на Ember.js, который собирался только очень старой нодой, а смысла переводить его на что-то новее не было.

Но потом задачи расширились. На новом (текущем) месте работы бакенд проекта на GAS надо было собирать сначала 12 нодой, потом 16... и только сейчас смогли перевести на 18. А фронтенд того же проекта изначально можно было собирать хоть бета-версией. И всё в рамках одного репозитория. И задачи по всей компании схожие.

Потому мы все разом стали использовать Volta.

Volta могла считывать версию ноды сразу из package.json и всё, магия. Но проект малость забуксовал: как минимум, до сих пор не умеет удалять ненужные установки.

Потому, встречайте: Proto.

Прото — менеджер для множества сред разом: Node.js, Bun, Deno, Python, Rust, Go.

На мобиле их сайт выглядит максимально плохо.

- Установка/удаление сред (в Volta нельзя было удалить Node.js например)
- Атомарное конфигурирование инструментов (каждому свой конфиг)
- Развитая поддержка плагинов
- Активное развитие
- Поддержка WASM-модулей.

Ну и материнский проект — moon — крайне мощный тулчейн и менеджер монорепозиториев как для локальной разработки, так и для CI/CD.

Пробуем?

P. S. А кто пробовал https://asdf-vm.com/?

#tool #nvm #volta

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

Продолжаем инструментальную неделю :)

после поглощения VMWare компанией Broadcom, VMWare Fusion Pro (MacOS) и VMware Workstation (Win/Linux) стали бесплатными для индивидуального использования

Думаю, многие знают, что это за инструмент, но если вкратце — средство виртуализации для винды/мака с понятным GUI и уж точно на несколько порядков лучше VirtualBox.

Учитывая, что VirtualBox для macOS на M-процессорах работает максимально плохо...

Нопридется регистрировать учетную запись в Broadcom (для РФ только через VPN).

Заметка о выпуске:
https://blogs.vmware.com/teamfusion/2024/05/fusion-pro-now-available-free-for-personal-use.html

#virtualization #vmware #virtualbox

#баг дня

Разработчики спецификации:
— Вот вам предложение ввести нативный нестинг в CSS!

Разработчики браузеров:
— Мы сделали вам нативный нестинг в CSS!

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

Кроме шуток, это действительно интересная проблема. Довольно больно.

Давайте посмотрим на этот пример: https://crisal.io/tmp/lots-of-nesting.html

На моей машине рендерится за 5.4 секунды. MacBook Pro M2 13", Chrome 126.0.6478.63

Safari вылетает и на ноутбуке, и на iPhone.

Firefox показывает кривые данные, но тоже близко к 5 секундам.

Вот ссылка на GitHub issue: https://github.com/w3c/csswg-drafts/issues/2881#issuecomment-1642450622

Проблема нестинга в том, что число комбинаций селектров растёт экспоненциально. И вроде бы понятно, что надо включать мозг, но...

...но делитесь вашими бенчмарками, котаны :)

#css #nesting #bug

#ссылка дня

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

Когда я был частью веб-студии/галеры, мы просто дубасили по готовому дизайну и техзаданию (когда таковое было, *звук горьких слёз*), не особо задумываясь, почему было принято то или иное решение. В лучшем случае можно было пост-фактум указать на проблему.

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

Количество Google Docs- и вики-материалов в такой работе зашкаливает. Вопросы «почему?» и «зачем?», повторяемые раз за разом… Метрики.

Отсюда интересно посмотреть, что же творится в других компаниях. И тут — на удивление — Microsoft нам такую возможность даёт. Теперь можно взглянуть на каталог explainers (сопровождающих документов, документации, расшифровывающих заметок) браузера Edge: https://github.com/MicrosoftEdge/MSEdgeExplainers

Почему что-то является проблемой? Как выявили? Почему было принято то или иное решение? Как команда объяснила себе какие-то новые концепты? Какой состав команды? И так далее.

Довольно погружающее чтиво. Особенно в разделе про DevTools, на которые разработчики Edge в принципе делают упор (да-да, я в курсе, что там тот же Chromium, но дело же в мелочах).

#docs #explainers #process #бородач

#игра дня

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

В принципе, можно и табом с пробелом, но не то...

Итак, встречайте: первая игра на чистом CSS, в которой можно использовать стрелочки с клавиатуры! Автор — Темани Афиф, знакомый нам по CSS-фигурам.

Помоги Марио собрать все монетки!

Построена на использовании Scroll Timeline API и, соответственно, голова Марио — не что иное, как пересечение "лифтов" скроллбаров. И мышью (ну ок, тачпадом) игра проходится даже легче.

https://codepen.io/t_afif/full/OJYbVWP

Делитесь вашими скриншотами с лучшим временем :)

#css #scroll #game

#фишка дня

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

Как всегда, способ этот не очень-то стандартный. Спасибо, Apple, чо.

#safari #callout #бородач