#такое дня

Нераскрытая история веба. Этим невозможно не поделиться:

1990: HTML invented
1994: CSS invented to fix HTML
1995: JS invented to fix HTML/CSS
2006: jQuery invented to fix JS
2010: AngularJS invented to fix jQuery
2013: React invented to fix AngularJS
2014: Vue invented to fix React & Angular
2016: Angular 2 invented to fix AngularJS & React
2019: Svelte 3 invented to fix React, Angular, Vue
2019: React hooks invented to fix React
2020: Vue 3 invented to fix React hooks
2020: Solid invented to fix React, Angular, Svelte, Vue
2020: HTMX 1.0 invented to fix React, Angular, Svelte, Vue, Solid
2021: React suspense invented to fix React, again
2023: Svelte Runes invented to fix Svelte
2024: jQuery still used on 75% of websites

#фишка дня

Итак, сегодня в уютный канальчик™️ с ноги залетает уже всем известный Джей c кое-чем насколько потрясающим, настолько же и забытым.

И это API document.getAnimations(), позволяющий не только получить список всех CSS-анимаций, но и, внимание, выставить промис и дождаться их выполнения! 🤯

const animations = document.getAnimations()
.map(a => a.finished)
await Promise.all(animations)

Сразу кодпен: https://codepen.io/alinaki/pen/rNoEOwX

*с некоторых пор я начал форкать пены, потому что пропадают иной раз

Теперь о применимости.

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

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

Отличный пример забытых технологий 🙂

Не, ну серьёзно, оно с 75 Firefox доступно, как я мог его проглядеть?

А я знаю, как. Я же писал уже, что PR-служба Chrome работает прекрасно только в том случае, когда что-то появилось там первым...

#css #js #animations #promise #бородач

#статья дня

А знаете ли вы, котаны, что такое безопасный треугольник печали? Aka safe triangle.

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

Да-да, в вашей Windows или MacOS такое тоже есть. Проверьте сами.

Собственно, почему я о нём заговорил? А тут вышла новая статья Ахмада Шадида и посвящена она такой важной вещи как "область взаимодействия".

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

В общем, с чего всё началось, зачем это нужно и как сделать сайты удобными — в первой интерактивной статье Шадида: https://ishadeed.com/article/target-size

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

#css #ui #ux #safe #target

#новость дня

14 января 2006 года на конференции BarCamp в Нью-Йорке Джон Ресиг представил первую версию jQuery.

Что это значит?

Что jQuery сегодня исполнилось 18 лет!

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

Скольким подписчикам канала меньше? У вас всё ещё впереди, котаны :)

Да и у остальных тоже, камон.

#заметка дня

Итак, котаны, у нас сегодня офигительная информация от Глеба. Вы уже с ним знакомы, он автор библиотеки extended-fetch, расширяющей возможности стандартного fetch. Горячо рекомендую, кстати.

Слово автору.

Наверняка вы сталкивались с проблемой медленного eslint и очень хотели использовать все ядра процессора

По этой проблеме существует issue в репозитории eslint аж с 2015 года, однако лишь в ноябре 2023 года появился PR с добавлением параллелизма при помощи флага --parallel (к сожалению, он до сих пор не смержен).

В комментарии к issue автор PR описывает как его вдохновил пакет @mixer/parallel-prettier: создается очередь и распределяется по процессам с воркерами, а затем их результаты выполнения аккумулируются и создается общий отчет.

По его замерам на 6 ядрах время выполнения eslint снизилось с 4 до 1 минуты исключая правила Typescript, а с ними с 4 до 2 минут.

Конечно же, предстоит решить вопрос с кеширвоанием и шарингом кеша между процессами, ну и никуда не исчезнут нюансы парсинга Typescript.

И совсем недавно появился форк eslint с поддержкой параллельной проверки нескольких файлов.

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

Всем ускорения, котаны!

#eslint #multicore #parallel

#codepen дня

Яркий пример работы UI/UX сообществ.

1. Один популярный в iOS UX-сообществе автор, Робера Гелера, выдвигает идею. Например, индикатор pull-to-refresh совсем необязательно делать чем-то вроде спиннера или капли, как сейчас везде. Ну, типа, зачем это делать, когда есть скроллбар? Ну и делает пример на SwiftUI. Именно его я прикладываю к посту.

2. Потом приходит второй, популярный уже во frontend-кругах (ну Джей, конечно, кто же ещё), и говорит, что это можно легко сделать на CSS и JS.

3. Пока Джей телится с кодпеном, выходит Альваро Монторо и достаёт из широких штанин свой: https://codepen.io/alvaromontoro/pen/JjzEKWG

4. Спустя несколько часов Джей, наконец, прикладывает свой вариант: https://codepen.io/jh3y/pen/gOEgxbd

Грубо говоря, там, конечно, не настоящие скроллбары, а их имитация на SVG, анимированная через GSAP и ScrollTrigger.

Но! В скором времени нас ждёт Scroll-Driven Animations API и можно будет сделать всё то же самое. С нетерпением ждём.

Бросайте вызов устоявшимся практикам, котаны!

#css #ui #gsap #svg

#баг дня

Кастомные скроллбары — штука прекрасная, хоть за 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

#статья дня

Скорее даже заметка от Софии Валитовой о порядке применения трансформаций в CSS, но концентрация знаний зашкаливает. В чём же весь вопрос?

Как вы можете помнить, не так давно все современные движки браузеров стали поддерживать определение трансформаций не только в правиле transform, но и в индивидуальных. То есть:

transform: translateX(20px) rotate(40deg) scale(1.5);

может быть записано как:

translate: 20px;
rotate: 40deg;
scale: 1.5;


Но так ли это на самом деле? И да и нет. В первом случае порядок важен, во втором — нет, он всегда будет translate👉rotate👉scale. И, естественно, повторяющиеся правила будут схлопнуты.

Подробнее — в заметке Софии. Вообще у неё очень много полезного выходит, глубоко копает в спеки.

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

#такое дня

А давайте, а давайте я вам расскажу про две драмы, произошедшие во фронтенд-сообществе на днях!

Сначала у Дэна Абрамова бомбануло от того, что люди не понимают, что такое RSC aka React Server Components.

Цитата: "React Server Components does not require a server (and never has). i get that this is confusing but i’m at loss what to do. people keep repeating that it does and speak about it as if it were a true fact. can someone spread the word pls?"

Суть в том, что слово Server в RSC не означает необходимость наличия сервера. Нейминг от бога просто.

Там шикарные треды, кстати, затрагивающие историю React вплоть до нечто под названием XHP, подрались по HTMX и сигналам. Короче, вообще не скучно.

Кончилось тем, что Даня Наше Всё пообещал статьи по RSC. Ждём.

Ну а вторая драма чуть менее весёлая.

Есть такой фронтенд-ютубер — Theo Rants. И вот он выкатил видео по поводу вынесенной в иллюстрации штучки: https://youtu.be/cH8VbLM1958

Казалось бы, ну тут-то где драма? А всё просто. В качестве доказательств он привёл обзор проекта уже знакомого нам (даже лично) Ахмада Шадида — https://defensivecss.dev/

Но не упомянул его имя, вообще. Когда ему указали на это — он забанил указавшего :)

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

Ахмад немного раздул скандал и теперь всё в порядке. Но осадок остался.

Я догадываюсь о причине произошедшего, но, пожалуй, воздержусь от озвучивания.

Не будьте токсичными, котаны :)

#тип дня

Попробую вместо тега #фишка внести что-то новое для TypeScript. Пусть будет "тип", а там посмотрим.

И сегодня на повестке дня запрет определённых ключей при передаче объекта. Например, контекста в трекинге или тех же пропсов в React.

Как правило, контекст в трекинге передаётся в функцию-хелпер, а после — дополняется какими-то переменными среды. Как-то так:

function logEvent(severity: LogSeverity = "info", context: LogContext = {}) {
    log(severity, {
        type: "event",
        userId: "[email protected]",
        env: "dev",
        ...context,
    })
}

Понятное дело, нам совсем неохота, чтобы кто-то случайно передал в контекст type, userId или env и затёр всё нафиг.

"Погоди, так разверни контекст повыше", — скажет кто-то умный.

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

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

type LogContextDefaults = "type" | "userId" | "env";

type LogContext = {
    [key: string]: string;
} & {
    [key in LogContextDefaults]?: never;
}

Ну и конечно, ссылка на песочницу: пуньк.

Есть предложения получше, котаны? Ну кроме проверки в рантайме :)

#typescript #ts #type

#статья дня

Давно не было интерактивных статей от кого-то, кроме Шадида и Комо :)

Время исправлять.

Сегодня — статья про концепцию и варианты реализации Drag&Drop-интерфейсов от Амита Пателя и Red Blob Games: https://www.redblobgames.com/making-of/draggable/

Давайте сразу: Red Blob Games это не компания, это сайт, собственно, Амита, где он объясняет используемые в играх и интерфейсах концепции: от поиска пути и генерации шестиугольной карты, до простейшего ИИ для игр.

Так вот, возвращаясь к статье: рассмотрены варианты реализации на мыши, тач-девайсах, скроллинг и различные сопутствующие проблемы (ну чтобы вам не пришлось разбираться, как, например, отключить выделение текста, пока тащишь элемент).

Прекрасная статья и проект вообще, моя горячая рекомендация.

#javascript #games #drag #drop

#фишка дня

Вроде как все в курсе, что в CSS есть функция filter(). С её помощью мы делаем размытие, дёргаем яркость... тень, опять же!

Но она умеет больше, намного больше. Точнее, умеют фильтры SVG, а функция — на них ссылаться:

filter: url("filters.svg#filterId");

Например, используя фильтр рассеянного света — feDiffuseLighting — можно превратить круг в шар: https://codepen.io/alinaki/pen/OJqmdEJ

А можно сымитировать бумагу, как в примере от Сары Суйедан: https://codepen.io/SaraSoueidan/pen/oppeJM/adc57533be256b5148d5924a5dbd46a3

Или угареть и применить карту смещений: https://www.smashingmagazine.com/2021/09/deep-dive-wonderful-world-svg-displacement-filtering/

SVG-фильтры в принципе позволяют добиться эффекта, похожего на карту нормалей в 3D-графике, но без, собственно, применения WebGL. Иногда этого достаточно.

Спека по ним великолепная просто: https://www.w3.org/TR/2002/CR-SVG11-20020430/filters.html

Хотя, если честно, тяжеловаты они, GPU c WebGL справляется получше. Да и поддержка на iOS так себе.

#css #filter #svg

#фишка дня от Гарри Робертса aka csswizardry.com

Когда-то очень давно поднялся вопрос красивого обтекания картинок. И появилась такая вещь: shape-outside.

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

Тем не менее, иногда надо. И поэтому, спешу напомнить: shape-outside нынче очень хорошо поддерживается и если вам нужно оформлять тексты, книги и статьи — самое время!

Если коротко, shape-outside позволяет описать контуры объекта, чтобы текст обтекал его именно по этим контурам. Более того, браузерам не нужен контур, они могут определить его самостоятельно по прозрачным областям PNG!

Вот только в Firefox требуется насильный репейнт... будем думать, как победить. А Safari чуть иначе определяет форму по альфа-каналу, нежели Chrome.

Upd. Важное дополнение! Чтобы правило shape-outside работало адекватно, не прячьте изображения в блоки; Firefox сходит с ума.

Ну и кодпен, конечно же: https://codepen.io/alinaki/pen/WNLVGae

Важный момент, это правило shape-margin, без него текст начинает прилипать к объекту.

Ну а статья, откуда взята фишка, вот: https://csswizardry.com/2023/07/the-http1liness-of-http2/

Весьма интересный обзор проблем протокола HTTP/2, если что.

#css #shape #img #бородач

#codepen дня

Ну что, кажется, настало то время, когда для стилизации радиокнопок и чекбоксов не нужно больше изгаляться с input:checked+i. Это освобождает мозг и руки для более приятных вещей.

Итак, смотрим на пример от Джона Кантнера: https://codepen.io/alinaki/pen/ExMXbqz

1. Для начала, обнуляем все браузерные стили и предположения браузера об внешнем виде радиокнопок вообще через appearance: none.

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

Благодаря этой возможности, собственно, можно стилизовать чекбокс как душе угодно: ::before, ::after, :checked::before, :checked::after... В целом, лично я бы обошёлся радиальным градиентом и одним псевдоэлементом.

3. Освободившиеся ресурсы мозга и тот факт, что теперь все элементы красиво вложены в label (как минимум, не нужны for и id), можно отправить на реализацию разных эффектов.

Например, проверить, есть ли лейбл с выделенным чекбоксом и подвинуть к нему рамку:

label:nth-of-type(2):has(input[type="radio"]:checked) ~ .selection {
 transform: translateY(100%);
}

Обратите внимание, рамка — отдельный элемент, к ней обращаемся через селектор низлежащих соседей ~.

Не знаю, что меня больше впечатляет. Псевдоэлементы на полях ввода или :has.

И да, поддерживается везде.

#css #has #appearance

#фишка дня

Что, котан, поймал ошибку CORS aka Cross-origin resource sharing error? В переводе на русский — ошибка совместного использования ресурсов между разными источниками.

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

В Википедии очень простое и понятное объяснение, что это такое. А нам же с тобой нужно как-то эту проблему обойти, пусть и временно.

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

Кстати, именно поэтому первым решением проблемы с CORS могут быть специальные прокси: https://nordicapis.com/10-free-to-use-cors-proxies/

Если хотите, я подробнее потом о них расскажу. И о CORS тоже.

Но что делать если использование прокси не представляется возможным?

Всё просто, открываем Chrome DevTools и меняем заголовок Access-Control-Allow-Origin на *, нажав на карандашик рядом.

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

А ещё можно создать файлик с заранее прописанными заголовками — .headers — и включить его как правило через Add overrrde rule в Sources 👉 Overrides.

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

#javascript #network #cors

#такое дня

Январь — время заполнения годовых Performance Review aka оценки эффективности работы.

Я, честно, в русскоязычном пространстве не работал в компаниях, где они проводились бы. Как в вашей компании это называется?

Как правило, степень упоротости глубины проработки проблем в отчётах зависит от... да ни от чего она не зависит. Бывает, что в компании на 10 человек проводится оценка по Методу 360 градусов, а бывает, что в огромной корпорации опираются только на число закрытых PR-ов и мнение менеджера.

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

Сегодня я услышал интересное мнение:
— Я просто везде отметил «выше ожиданий» и в комментарии попросил менеджера объяснить, почему он так не считает.

Позиция, как минимум, смелая. Она точно лучше чем отчёт, котором просто бы стояло «Соответствую ожиданиям» и всё.

Но насколько ж сильна вера в менеджера...

В любом случае, мне интересно, проходят ли и как подобные раунды оценки в ваших компаниях?

#work #review

#codepen дня

Давно собирался написать игру по Гарри Поттеру, но не знал, как?

Не расстраивайся, я принёс решение! Steve Gardner и его прекрасное создание Spell Caster!

Вот: https://codepen.io/ste-vg/full/zYerxoR

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

Из технологий — Three.js и стейт-машина Stately, позволяющая описывать состояния приложения через удобные диаграммы.

Много комментариев по коду, интересная реализация распознавания жестов. Хоть сейчас бери и в магазин выкладывай :)

Я залип, в общем, как в игре, так и в её исходниках.

#webgl #threejs #game #бородач

#тип дня

Типом дня назначается вон тот в кожаной куртке. Да-да, о тебе говорю!

TL;DR: вычисленный тип функции с дженерик-аргументом можно сузить, декларируя тип как const.

Кроме шуток, разве тебя не бесит, что указываешь вот дженерик тип аргумента функции, производишь манипуляции над переданным объектом — а в ответ тебе вычисленный базовый тип?

Непонятно? Давай так:

function wrapNames <T>(names:T[]) {
    return names.map<{name: T}>(name => ({name}));
}

const [first, second] = wrapNames(['Sergey', 'Alex'])

Какой вычисленный тип получат first и second?

Очевидно, такой:

{
    name: string;
}

Но... это же довольно неудобно. А если мы схему валидируем, например? Или форму описываем. Или тесты пишем в конце-концов. Почему при заранее известном константном типе входных данных мы получаем вычисленную строку?

К счастью, начиная с TypeScript 5.0 можно объявлять дженерики как константные типы! Иначе говоря, работать с максимально узкими (narrow) типами. Это, собственно, аналог указания as const у предопределённой константы.

Использование простое:

function wrapNames <const T>(names:T[])

И на выходе тип у first и second будет такой:

{
    name: "Sergey" | "Alex";
}

Песочница: пуньк.

Давайте исходя из полученной информации создадим валидатор по известной схеме данных и дальше поработаем с ним:

// initValidator
function parse<const T extends { name: string; surname: string }>(users: T[]) {
    return (name: T['name']) => users.find(u => u.name === name)?.surname;
}

// validate
const getSurname = parse([
    {
        name: 'Joe',
        surname: 'Doe',
        age: 30,
    },
    {
        name: 'John',
        surname: 'Dohn'
    }
]);

Определение getSurname приобретёт такой вид:

getSurname: (name: "Joe" | "John") => string | undefined

То есть, обратите внимание, не просто строку на вход, а конкретные, существующие в нужных параметрах строки.

Теперь это вполне себе напоминает удобную работу с коллекциями данных, не стыдно и форму провалидировать.

Песочница: пуньк.

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

Ах да, ссылка на соответствующий PR в TypeScript: https://github.com/microsoft/TypeScript/pull/51865

#typescript #generic #const

#фишка дня

Сегодня на ваших экранах новая серия сериала "Не боги горшки обжигают".

На сей раз отличился Kent C. Dodds, которого уж никак нельзя упрекнуть в незнании фронтенда 🙂

Но давайте разбираться. Что же случилось?

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

И да, если раньше всем было вообще пофигу на валидацию — рендерит и ладно — то нынче в дело вступают SSR/SSG и они не позволяют гидрацию невалидного HTML 🥁

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

Так что же делать-то? Псевдоэлементы к спасению!

Верстаем как обычно, вставляем просто две ссылки: одну на товар, вторую куда-нибудь ещё. И растягиваем псевдоэлемент первой на всю ширину. Как-то так: https://codepen.io/alinaki/pen/OJdJQyB

Все довольны, котята спасены!

#css #trick #card #validation #бородач