Будни разработчика

#расширение дня

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

На иллюстрации, например, отладка всё того же проекта AirBnb: https://www.airbnb.com/release

Ссылка на расширение находится на сайте, посвящённом скролл-анимациям вообще, что само по себе максимально полезно: https://scroll-driven-animations.style/

Интересный подход, мне нравится.

#css #scroll #animation

#заметка дня

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

Лайвкодинг, алгоритмы, большая О — это всё лишь способы напустить дыму, не правда ли? :)

И тем забавнее, когда возникает рабочая задача, которая как раз лежит себе на литкоде слово в слово.

Итак, ситуация: пользователь продукта жалуется, что данные в Excel меняют своё местоположение, когда обновляются.

Диагностика проблемы: начиная с колонки BO неверно рассчитывается её порядковый номер.

Решение же на экране, но тем забавнее, что проверяющий пулл-реквест коллега как раз на днях эту же задачу решал на Leetcode: https://leetcode.com/problems/excel-sheet-column-number/

А вот предыдущий код расчёта был достаточно плохо протестирован на граничных значениях колонок... Но много лет работало без проблем :)

Хорошее чувство, в общем.

#leetcode

#новость дня

Посмотрите на иллюстрацию. Ничего интересного не замечаете?

А здесь происходит ого-го какая драма!

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

Если коротко, есть такой чувак, Андреас Клинг. Долгое время он работал над движком WebKit в Nokia, а потом и над браузером Safari в Apple. А потому немного... в общем, оказался в центре реабилитации.

Выйдя оттуда, ему потребовалось чем-то себя занять (блин, звучит как история BMTH), потому он создал операционную систему SerenityOS. Суть её была в том, чтобы написать Unix-подобную ОС без использования сторонних библиотек. Постепенно вокруг проекта даже образовалось сравнительно большое сообщество.

И вот, разрабатывая просмотровщик HTML-документации, ребята случайно написали браузер. И так получилось, что браузер стал развиваться быстрее чем материнский проект.

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

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

В общем, пару дней назад стало известно, что в некоммерческую организацию, созданную под Ladybird, инвестировали 1 миллион долларов. И не кто иной, а Крис Ванстрат.

Не знаете, кто это? А это сооснователь GitHub. И он не один такой. Shopify тоже в спонсорах.

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

И пусть он пока не умеет всего, что умеет Chrome, я верю в его светлое будущее.

#web #browser #ladybird

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

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

Кроме шуток :) Оказывается, есть такой инструмент удалённого доступа: noVNC. Это реализация VNC-клиента для браузера.

И в Windows, и в MacOS и уж тем более в Linux есть средства удалённого доступа, поддерживающие этот протокол. На примере MacOS он называется Remote Management.

Ещё не так давно он не поддерживал VNC, но уже некоторое время всё отлично работает.

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

Итак, в чём же была основная сложность?

А в том, что VNC-поток должен шифроваться. И если в обычных браузерах есть Web Crypto API, что позволяет ходить на сервер без HTTPS, то вот браузер в Kindle, пусть и был недавно прокачан (и теперь похож на настоящий), эту самую криптографию не поддерживает.

А мне почему-то очень было интересно посмотреть, как это — дополнительный E-ink экран.

Пришлось генерировать сертификат самостоятельно, на эту мысль меня навёл Роберт Андерберг, показавший саму идею в Твитере:

openssl req -x509 -nodes -newkey rsa:2048 -keyout novnc.pem -out novnc.pem -days 365

...ответив по пути на кучу бестолковых вопросов «ты кто такой»...

Ну и запускаем сервер нашего клиента:

./utils/novnc_proxy --vnc localhost:5900 --ssl-only --cert novnc.pem

И всё проходит прекрасно. К сожалению, на Kindle не поддерживается поворот экрана в браузере. Даже ковыряние в SQLite-базе настроек не помогло...

Но! Можно выключить масштабирование и использовать скроллбары. Или подключить Kindle к Raspberry Pi c медиатекой или умным домом, там разрешение неважно.

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

Как часто на вас находят подобные эксперименты, котаны?

#vnc #remote #eink

#codepen дня

Фокусы с типографикой в CSS весьма ограничены, но даже имея на руках лишь их — можно вытворять эффектные вещи.

Например, комбинируя грид и вертикальный режим вывода текста можно получить забавную змейку, как на демо от Adam Argyle: https://codepen.io/alinaki/pen/VwOJoXY

Я форкаю кодпены, потому что они имеют особенность пропадать.

Заодно демо являет собой хороший пример контейнерных запросов, зажимая размер шрифта в адекватных рамках:

grid
font-size: max(1rem, 15cqmin)
writing-mode: vertical-rl
line-height: 1.1cap

Пользуемся :)

#css #vertical #text

#фишка дня

Когда-то давно я слышал о таком свойстве, как text-align-last.

Что оно делает? Ну, думаю, всё понятно из иллюстрации :)

Работает с последней строкой индивидуально, позволяя сделать более приятные глазу переходы текста, соответствующие остальной стилистике. Вот хорошая статья на тему: https://www.stefanjudis.com/today-i-learned/how-to-align-the-text-of-the-last-paragraph-line/

С интерактивным примером, как вы любите.

Почему я акцентировал на нём внимание?

Да просто я знал о нём ещё тогда, когда оно толком нигде не поддерживалось. Вот в IE работало, буквально, а в Chrome нет. И как-то все на него забили в итоге.

В этом есть небольшая беда так нами любимых «the future CSS tip». Наиграешься, разочаруешься, и забудешь :(

Но есть же наш уютный канальчик, мы тут всё вспомним :)

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

#фишка дня

Является ли CSS языком программирования?

Тьюринг-полным — нет. Но CSS — де-факто — это декларативный язык описания интерфейсов, и развитие его идёт в этом направлении довольно чётко.

Впрочем, fizzbuzz на CSS решается даже слишком элегантно: https://codepen.io/SachaG/pen/nwazRo

Так вот, к чему это я. Вы вообще в курсе, что в CSS есть типы? А они есть. И на их основе можно реализовать некоторые математические функции.

Тригонометрические вон завезли недавно, а математические пока только в Safari.

Давайте попробуем исправить это недоразумение и реализуем abs, floor, round, ceil, mod и rem на CSS и его типах. Начнём с модуля:

--abs: max(var(--a), -1*var(--a));

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

Теперь к сути дела. Давайте реализуем round:

@property --round {
syntax: '<integer>';
initial-value: 0;
inherits: false;
}

--round: var(--a);

Вот щас может стать немножечко больно: мы объявили переменную (custom property, для зануд) --round и указали CSS, что её тип — целое число. Теперь браузер возьмёт и... и округлит значение математически при присваивании (опять для зануд: да, это де-факто присваивание).

А как сделать floor — округление вниз? Как-как:

--floor: calc(var(--a) - .5);

А ceil — округление вверх?

--ceil: calc(var(--a) + .5);

Естественно, перед этим надо объявить переменные --floor и --ceil как целые числа.

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

Пока можете подумать, где это применить 😉

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

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

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

Я уже выкладывал интересный инструмент для понимания процесса создания SVG и его элементов: path, polygon, polyline и т. д. “для самых маленьких”: https://t.me/htmlshit/392

Пришло время для ещё одного. Этот инструмент позволяет понять создание сегментов кривой по шагам, включая перемещение пера (M), кривые безье (C), дуги (арки, A) и линии (L). Всё раскидано по координатам и уложено в сетку. Можно менять конкретные числа, а можно — подёргать реперные точки мышкой и увидеть изменение кривой.

https://yqnn.github.io/svg-path-editor/

#svg #path #бородач

#расширения дня

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

А ведь почти любой большой проект уже использует CSS-переменные для дизайн-систем и не стесняется.

Но выход есть! И это — расширение Designgui от Джеймса Четвуда.

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

А ещё в ней заложена работа с UI-китами и дизайн системами. Пока только Shadcn UI и Daisy UI, но начало положено: все токены на местах.

Думаю, надо делать такое же расширение, но для анимаций... А то вытаскивать их всё сложнее, обмажутся тейлвиндами... ну да ладно.

Ссылка на вебстор Хрома: https://chromewebstore.google.com/detail/design-gui/ldhbojdgokammocadfgbidodgffnimfj?pli=1

#css #var #color #design

#заметка дня

Делаешь задачу, наступает конец дня, но осталось совсем чуток? Несчастные 10%?

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

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

И настроение твоё улучшится.

#такое дня

Полку способов центровки элемента относительно родителя прибыло!

inset-area: center;

Нашёл это Темани Афиф aka CSS Challenges и суть-то в следующем: inset-area это часть CSS Anchor Positioning API для поповеров (извините, слово смешное просто. popover, конечно же): https://developer.chrome.com/blog/anchor-positioning-api

То есть предназначено оно чтобы прибить всплывающее нечто к центру элемента. Но каким-то образом протекло наружу.

Демо: https://codepen.io/t_afif/pen/OJYwybK

Обсуждение: https://github.com/w3c/csswg-drafts/issues/10500

TL;DR: не надо это использовать, это просто курьёз, не более.

#css #vertical #center

#фишка дня

Как узнать, откуда была вызвана интересующая нас функция?

Правильный ответ — воспользоваться дебаггером.

Или console.trace().

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

Если не используется ‘use strict’ (почему, кстати?) можно воспользоваться нестандартным свойством Function.caller:

function hello() {
console.log(“caller is " + hello.caller);
}

…или устаревшим arguments.callee.caller

function hello() {
console.log(“caller is " + arguments.callee.caller.toString());
}

Но это не выведет весь стек и вообще в нормальном коде не сработает. Поэтому, можно красиво схитрить сымытировав ошибку:

function Hello() {
console.log(“caller stack”, new Error().stack);
}

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

#js #caller #error #stack #бородач

#продолжение дня

Если вы ещё не читали вчерашнюю новость про скам и MITM на сервисе Polyfill.io — самое время.

Вот: https://t.me/htmlshit/2910

Тем временем GitHub стал помечать репозиторий сервиса как вредоносный.

Но, повторю, с кодом-то всё хорошо. Плохо с сервисом :)

#заметка дня

Итак, ты хочешь использовать Tanstack (React) Query для запроса данных, но хочешь делать это по-запросу, а не декларативно?

Ни слова больше! Используй useMutation, даже если это контр-интуитивно. Мутации — они по своей природе императивные, их нужно вызывать ручками в нужный момент.

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

Да, даже если мутация, на самом деле, ничего не делает.

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

А вот запрос — отменить можно. Прямо в документации: или посылая AbortSignal, или вызывая соответствующий метод клиента, cancelQueries, по ключу запроса.

С мутацией сильно больше телодвижений.

Кстати, вы же в курсе, что ключи действуют как wildcard? todo среагирует и на todo-1, и на todo-2 и так далее. Это не самая очевидная вещь.

Ладно, но всё же, как вызвать запрос императивно?

Очень просто: комбинацией из refetch и параметра enabled в конфигурации хука:

useQuery<TokenResponse>({
    enabled: false,
    retry: false,
    refetchOnReconnect: false,
    refetchOnWindowFocus: false,
    refetchInterval: false,
    queryKey: ['connecting', dsId, connectionKey],
    queryFn: async ({ signal }) => {
         signal?.addEventListener('abort', cancelConnection);
          ...
     }
});

И используем как обычно:

const {
    data: profile,
    refetch: startConnection,
    connectionStatus,
    isFetching: isFetchingConnection,
    isError,
} = useConnect(dataSource, ...);

Секрет в том, что теперь refetch можно передать куда угодно и дёрнуть.

Естественно, всегда создавайте кастомные хуки для useQuery и useMutation. Не держите логику в компоненте.

Я ещё люблю отключать refetch по фокусу на окне и по потере соединения. Про идиотскую ситуацию с неправильным определением потери соединения я уже писал ранее.

#react #tanstack #query

#молния дня

Итак, если вы используете для своих проектов сервис polyfill.io — время прямо сейчас прекратить это делать.

И причина проста: "В библиотеку, загружаемую на сайты через домен cdn.polyfill.io, был встроен вредоносный код, перенаправляющий пользователя на мошеннические сайты (например, googie-anaiytics.com), букмекерские конторы и online-казино."

Источник цитаты: https://www.opennet.ru/opennews/art.shtml?num=61440

Теперь подробнее.

Сервис Polyfill предназначен для автоматической загрузки кода, дополняющего старые браузеры новыми возможностями JavaScript (ES6+) и DOM API.

Полифиллов, короче, кто бы мог подумать.

И новый владелец — китайская компания Funnull — решил рандомно вставлять редиректы на рекламные сайты и онлайн-казино.

Делая вид, что так и надо.

Самое интересное в этом то, что сама библиотека-то вполне себе Open Source: https://github.com/polyfillpolyfill/polyfill-service

И хостить её можно где угодно. Так что проблемным оказался сам сервис.

Новый владелец старательно удаляет issue с подозрениями: https://web.archive.org/web/20240229113710/https://github.com/polyfillpolyfill/polyfill-service/issues/2834

Если вам Polyfill всё ещё необходим, можно воспользоваться вариантами библиотеки, распространяемыми компаниями Fastly и Cloudflare.

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

#scam #polyfill

#статья дня

Насколько глубокая вложенность элементов влияет на производительность вашего проекта и влияет ли вообше?

Вот Google Lighthouse утверждает, что влияет. Но так ли это на самом деле?

Коннор проверит

Как хорошо, что у нас теперь есть на это ответ: https://frontendatscale.com/blog/how-deep-is-your-dom/

TL;DR:

1. Ощутимая разница начинается на 500 элементах: плоский список рендерится в два раза быстрее вложенного.
2. Далее расхождение растёт практически линейно и на 5000 элементах мы уже наблюдаем 800 мс для вложенного против 180 мс для плоского. Впрочем, это вырожденный случай.
3. И всё бы ничего, но до этого момента всё обсуждение велось для скелета без стилей, точнее, со встроенными браузерными. Набрасываем ещё немного CSS — и к этой прелесть добавляется 150 мс. Что уже может быть совсем заметно глазу.

Вместо вывода:

Да, 5000 вложенных элементов это редкость, но многие дизайн-системы и UI-киты построены вокруг максимально простой структуры Stack-Row-Col-Element, заставляющей вас создавать лишнюю вложенность. Таких комбинаций на странице могут быть тысячи.

Сама по себе вложенность не является чем-то плохим, но она задаёт базу для пересчёта стилей и JS-операций над DOM, поэтому иногда на это стоит обратить внимание.

#render #performance

#ссылка дня

Уже известный нам Ван Дамм, который Брамус, не так давно присоединился к команде деврелов Google Chrome. В какой роли?

Конечно же в роли евангелиста анимаций по скроллу! Кто бы мог подумать :)

Я уже ссылался на его работы и ранее, но теперь всё серьёзно.

Итак, под брендом Chrome for Developers (это вообще отличный проект, занимающий нишу чуть иную, нежели MDN) Брамус выпустил серию видео для обучения анимаций по скроллу в CSS.

Вот: https://developer.chrome.com/blog/scroll-driven-animations-video-course

Ну или ссылка сразу на плейлист: https://www.youtube.com/playlist?list=PLNYkxOF6rcICM3ttukz9x5LCNOHfWBVnn

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

Учитывая, что Scroll Timeline API уже используются даже в Airbnb (пруф), счастливое будущее не за горами!

#css #scroll #animation

#тип дня

Четыре ночи провёл в деревне в глубинной Финляндии и возвращаться в привычный режим очень и очень тяжело.

Прыжки со скалы просто так не проходят.

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

В общем, тип дня от Кори Хауса: как указать TypeScript, что поле принимает любое строковое значение, но при этом получить автоподсказку для наиболее часто используемых из них?

Очень просто:

type Status = 'open' | 'closed' | string & {}

Результат на иллюстрации. Песочница.

Объединение с пустым типом предотвращает попытки языкового сервера от приведения типа к строке.

На самом деле это равнозначно следующему выражению, более понятному:

type Status = 'open' | 'closed' | Omit<string, "open" | "closed">

Пользуемся!

#typescript

#фишка дня

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

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

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

#игра дня

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

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

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

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

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

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

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

#css #scroll #game