#ссылка дня

А ссылок будет много! Ведь на дворе декабрь, а значит — время рождественских календарей! Aka advent calendar.

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

1. Итак, нестареющая классика — Advent of Code. 24 задачи, решать которые можно на любом доступном языке программирования и любыми методами: https://adventofcode.com/

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

При этом, производительность не важна. Это вам не Литкод.

2. Advent of TypeScript: https://www.adventofts.com/

Не хватает типов на своей тырпрайзной работе? Вот напиши ещё!

3. Advent of CSS: https://www.adventofcss.com/

Поверстаем? :)

4. Advent of QA: https://www.rusau.net/qa-advent

Тестировщикам тоже досталось! Первый и единственный в подборке календарь, рассчитанный до 31 декабря :) Так что, если предыдущих вам было мало...

Добавляйте свои календари, я бы хотел, например, найти адвент для продактов!

Стоит отметить, конечно, что почти все эти календари рассчитаны до 24 числа. Так что придумайте себе развлечение на оставшуюся неделю — в российской и пост-советской традиции календари если и прижились, то до Нового года, а не Рождества :)

#advent #calendar

#статья дня

Думали, научились отличать overflow: scroll от overflow: auto и всё на этом?

Не, так не пойдёт. И дело даже не в том, что у нас есть ещё visible и hidden. Дело в том, что у нас есть clip! И вот тут-то и начинается самое интересное.

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

Но тут у нас появились усложнения процесса скролла: position: sticky и ScrollAnimation API. И с обоими есть проблемы.

Видите ли, согласно спецификации overflow: hidden создаёт инстанс скролла (контейнер), который буквально перехватывает взаимозействие пользователя с ним, но при этом — позволяет обратиться скриптом к модели и подвинуть контейнер куда надо. Подробнее есть у Брамуса: тык.

А что это значит для нас, как пользователей? Что ни sticky, ни таймлайн-анимации, определённые в CSS, работать не будут, потому что hidden сломает механизм поиска ближайшего доступного скролла.

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

И тут на помощь приходит clip! Он не создаст скролл-контейнер и позволит браузеру правильно обрезать и анимировать элемент, а пользователю — с ним провзаимодействовать.

Вообще, описывать это словами довольно сложно. Потому я очень рекомендую почитать интерактивную статью Ахмада Шадида: https://ishadeed.com/article/overflow-clip/

Самый говорящий пример из неё вынесен в иллюстрацию к посту.

#ссылка дня

Очень коротенькое дополнение в коллекцию адвент-календарей, которую мы собрали вчера: https://www.tg-me.com/htmlshit/3317

Правда, на сей раз без задачек :)

Календарь статей по производительности веба!

Web Performance Calendar: https://calendar.perfplanet.com/2024/

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

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

Темой вчера стал общий обзор терминов.

А сегодня — а пока не знаю, ждём открытия окошка!

#advent #calendar #webperf #performance

#новость дня

Котаны, языку JavaScript сегодня исполнилось 29 лет!

4 декабря 1995 года после фееричных 10 дней разработки Брендан Эйх представил компании Netscape язык LiveScript, предназначавшийся для встраивания в их всё ещё свежий и самый популярный в мире браузер.

Но яйцеголовые маркетологи были уже тогда, потому язык быстренько обозвали JavaScript и выкинули на рынок как есть. Да, история немного сложнее и они реально собирались создать упрощённый вариант Java и JVM, но уж получилось как получилось.

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

В итоге, JavaScript прошёл все круги издевательств, особенно от Microsoft. Был стандартизирован как EcmaScript, а году так в 2008 его даже называли СНЯП: Самый Недооценённый Язык Программирования.

Ну в 2024 году мы с вами точно можем сказать, что если кого и недооценили — то это точно не JS.

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

#js #jscript #ecmascript #бородач

#фишка и #статья дня

Надоело проигрывать битву z-index? Используй BFG от CSS: infinity.

Ладно, кроме шуток (хотя я и не шутил). С помощью infinity можно гарантировать верно скруглённые углы на прямоугольниках, мы с вами уже рассматривали алгоритм для веба и Flutter: https://www.tg-me.com/htmlshit/1565

Вместо

  border-radius: 9999px;

...пишем:

  border-radius: calc(infinity * 1px);

А ещё в CSS общепринятое «если что-то поделить на ноль, получится бесконечность» вполне себе закреплено на практике:

calc(infinity) = calc(1 / 0)
calc(1px / 0) = calc(infinity * 1px)

Учителя вторых классов будут нами явно недовольны.

В общем, читаем статью и погружаемся в бесконечность и далее:
https://codersblock.com/blog/playing-with-infinity-in-css/

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

#новость дня

Ой, а что это у нас такое на картинке? А это, товарищи мои, кусок документации React из 2013 года.

Да, если вы не верите своим глазам или не поняли — в то время на полном серьёзе предлагалось использовать jQuery для создания AJAX-запроса данных. А что делать, что делать...

А нынче на дворе уже React 19, который вот только-только вышел, я опоздал с новостью на пару дней: https://react.dev/blog/2024/12/05/react-19

После стольких скандалов и задержек, после стольких криков о том, что React умер (нет) и не нужен (тоже нет).

Помните, я упоминал о том, что они замедлили дерево рендера в Suspense и не отрисовывали дочерние ноды, пока не разресолвится материнская? Что ж, они эту ситуацию даже отдельно вынесли, дав ссылку в самом верху, снабдив прекрасными схемами: https://react.dev/blog/2024/04/25/react-19-upgrade-guide#improvements-to-suspense

Конечно же многострадальный React Compiler тоже здесь. И передача ref как простого пропа. И улучшенная обработка ошибок (это, кстати, ломающее изменение, читайте руководство по обновлению).

Почему я вспомнил про использование jQuery для AJAX? Ну, потому что асинхронные функции уже давно не ограничиваются одной только передачей данных по сети, и для работы со статусом их обработки появился новый API — Actions и, соответственно, новые хуки: useActionState и useTransition.

Для работы с формами предложен новый хук useFormStatus, для обращения к форме из её компонента больше не нужен контекст!

Ну об API use не писал только ленивый — считывать состояние промисов никогда не было так просто.

Там ещё много интересного. И пока одни ноют о том, что бандл стал чуть больше, я планирую убрать лишние обработчики загрузки и работы с формой. Где-то я, возможно, даже откажусь от react-hook-form и react-query, просто потому что мне не нужны все их возможности и лишний бойлерплейт.

В общем, мне нравится. А вам как?

#react #release #changelog

#фишка дня

Не только лишь все знают, что одному элементу можно задавать несколько фонов.

Ну, буквально:

.myclass {
  background:
    background1,
    background2,
    /* …, */ backgroundN;
}

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

Пруф имеется: https://codepen.io/alinaki/pen/zYbbvWr

Всем красоты, котаны.

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

#статья дня

TIL, что браузерам можно указывать на приоритет сетевых операций: в fetch, в загрузке картинок, и в загрузке скриптов.

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

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

Или какие-то картинки чуть более важные, чем другие. Хотелось бы иметь возможность отложить их загрузку, даже если браузер хочет решить иначе.

Для этого у нас есть свойство priority в методе fetch, атрибут fetchpriority для изображений и async и всё тот же fetchpriority в загрузке скриптов.

А подробнее в статье Алекса МакАртура: https://www.macarthur.me/posts/priority-hints

Пока только в Chrome и Safari с версии 17.2: https://developer.apple.com/documentation/safari-technology-preview-release-notes/stp-release-178#Web-API

#fetch #priority #бородач

#заметка дня

А вы заметили, что всё больше и больше веб-сайтов и приложений предлагают ввести сначала почту, а уже потом, на отдельной странице — пароль?

Ведь это должно раздражать посетителей, мешает менеджерам паролей, как встроенным в браузер, так и системным и сторонним.

Задумывались ли вы вообще, зачем это надо?

Есть, очевидно, простой ответ: для защиты от тупого перебора паролей. Но так ли уж сложнее добавить обработку ещё одной страницы? Если уж я прошёл тест на робота, я и на второй странице его пройду. А вот посетители будут ныть!

И тут возникает логичный вопрос: «А будут ли они ныть»? И вот на него ответ не настолько очевиден.

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

Огромное число пользователей не видят разницы между Sign In и Sign Up. Ещё больше — боятся слова регистрация, Register here и так далее. А кто-то — просто забывает, что у них уже есть аккаунт!

Ситуация:
1. Перейти к созданию аккаунта
2. Введите адрес электронной почты
3. Ошибка: у вас уже есть аккаунт.
4. Перейти на страницу входа.
5. Снова введите адрес электронной почты.
6. Возможно, вы забыли пароль?
...и так далее.

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

А если вы строите веб-приложение для корпоративных клиентов — возможно, у вас SAML/SSO через одного из провайдеров. И в простейшем случае это Google, Facebook, VK, Microsoft, Apple — далее везде. Ну и вы начинаете ставить кнопки. Итого, поле и 4-5 кнопок. И в какой-то момент пользователь забудет, через что он вообще входил. Что-то опять ну такое...

А если показать и почту, и пароль — то SSO-пользователи просто введут свой пароль от корпоративного аккаунта. Знаем, проходили.

Вот и получается, что многие растущие (помним про Facebook?) сервисы предпочитают предложить посетителю ввести свою почту, а уже потом — разные ветки процесса входа. Либо SSO, либо пароль, либо — код на почту, либо Passkey.

Нормальным менеджерам паролей, кстати, всё равно. Тот же 1Password отлично справляется.

А какой у вас опыт, котаны?

#sso #saml #signin #ux

#ссылка дня

Кто хотел красивых анимированных иконок без обязательств?

🙋 Я точно хотел!

Итак, вашему вниманию иконки от Дмитро Товстокорого: https://icons.pqoqubbw.dev/

Анимированные при помощи библиотеки motion SVG с MIT-лицензией, что может быть прекраснее?

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

Ну и никто не мешает вдохновиться и реализовать своё, с использованием своих инструментов, ведь правда?

К слову, библиотека Motion выросла из инструмента Framer, а их уж новичками никак не назовёшь. Так что вполне себе проверена в бою.

Берём, котаны?

#icons #svg #animation

#игра дня

Тут Google выкатил свой адвент-календарь в виде новой игры каждый день: https://santatracker.google.com/

И вчера там было кодирование на системе, подобной языку Scratch... а сегодня простой сокобан :(

И я сначала расстроился, но потом догадался поскроллить вниз! Это, кстати, с первого экрана совсем не очевидно. И нашёл даже простую версию The Impossible Machine! Олды меня поймут.

В итоге там хватает и кодинга, и головоломок, и простых аркад. Идеально, чтобы провести время с семьёй и, возможно, познакомить ребёнка со Scratch, если ещё нет.

Не совсем про программирование пост сегодня, но надо же и отдыхать, ну.

#google #doodle #scratch

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

Когда я недавно вас спросил, какие бы вы посоветовали вопросы для собеседования, были, ожидаемо, предложения поспрашивать про Event Loop и microtask queue.

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

Слишком много частиц не

К счастью, есть инструменты, которые помогают легче понять происходящее! И вот один из них буквально так и называется: Event Loop Explorer.

https://vault-developer.github.io/event-loop-explorer/

Кстати, там в примере как раз то задание, что так любят спрашивать на собеседованиях :)

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

#javascript #eventloop #tool

#ссылка дня

Сегодня на повестке довольно упоротый проект. И упоротый он не только из-за названия — Modalzmodalzmodalz. Впрочем, сейчас сами поймёте. Ссылка: https://modalzmodalzmodalz.com/

Да-да, более дикого оформления я давно не встречал. Ну, разве что на сайтах с восьмибитными иконками.

Итак, чем же сайт заслужил попасть в рубрику? А тем, что он весьма оригинально напоминает нам: хватит лепить везде чёртовы модалки!

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

Что предлагают авторы?

Сайдбары, тосты, врезки, новые страницы в конце-концов и старый добрый Undo вместо подтверждения действия.

Ну и, конечно, дают советы о правильных модалках.

Хороший проект. Ещё бы чуть менее с дизайном упоролись... виральность зашла слишком далеко.

#ui #ux #modal

Как с комфортом проводить ревью кода?

В современном IT сообществе стандартным инструментом становятся платформы для разработки, включающие в себя возможность версионировать код, собирать, тестировать, развертывать, проводить ревью. Однако большая их часть исключает, что код – это не текст и с ним можно работать более интеллектуально, как это умеет IDE.

Компания Яндекс анонсировала, что в 2025 году запустит платформу SourceCraft, в которой удобству разработчиков уделяется особое внимание. Теперь при ревью пул-реквестов нет необходимости переходить в IDE, чтобы разобраться в коде, инструменты навигации по коду доступны прямо на платформе.

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

#статья дня

Вы (да и я) могли раньше не обращать внимания, но 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 #бородач

#такое дня

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

Да, вы не ослышались. В итоге, на сообщение в 10000 символов задержка может составить две-три секунды.

Не надо так, котаны.

Ссылка на тред: тут. В треде народ развлекается разным профайлингом, очень интересно: React Scan, Chrome Profile, немного реверс-инжиниринга...

Как же решать такую задачу? Ну, например, debounce или throttle, зависит от условий. Или предсказание по первому символу.

#js #react

#ссылка дня

Всеобъемлющее руководство по созданию приложения адресной книги от создателей React Router: https://reactrouter.com/tutorials/address-book

Клиентский и серверный рендеринг, фильтрация данных, добавление. И даже немного о кодах ответов.

Для полноценного приложения останется добавить только работу с базой данных :) Но... не здесь.

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

#react #router #ssr #tutorial

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

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

Когда такая идея приходила мне, я взял Preact, а потом Van. А тут недавно на собеседовании кандидат рассказал, что тоже сталкивался с подобной задачей и решил её через µhtml.

Микрохатээмэль

Сразу ссылка: https://github.com/WebReflection/uhtml

JSX там нет, вся работа через шаблонные литералы. Что, впрочем, выглядит вполне нормально:

import { render, html, signal, detach } from 'uhtml/preactive';

const count = signal(0);

render(document.body, () => html`
  <button onclick=${() => { count.value++ }}>
    Clicks: ${count.value}
  </button>
`);

// stop reacting to signals in the future
setTimeout(() => {
  detach(document.body);
}, 10000);

И да, ваши глаза вас не обманывают: сигналы! И SSR.

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

А ваши варианты, котаны?

#uhtml #js #framework

#фишка дня

Продолжим тему ответов на ваши вопросы на собеседованиях.

Почему ваши? Ну потому что вы их предлагали! Вот тут: https://www.tg-me.com/htmlshit/3290

Итак, вопрос: как показать спиннер загрузки прямо в кнопке, сохранив размер кнопки и её доступность?

То есть, не делать такое:

‹button>{ isClick Me Load More ? <Click Me Load MoreSpinner/> : "Save" }</button>

Очевидный ответ: абсолютом спиннер сверху навернуть. Но мы же не в 2009 году, в самом деле!

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

Когда-то давно мы сделали табло, в котором меняли строки на разных языках: https://www.tg-me.com/htmlshit/2814

И там как раз применили такую фишку CSS Grid, как стек. Т. е. накладывание блоков друг на друга без изменения их позиционной модели.

Самое время это применить и тут!

Только на сей раз мы воспользуемся именованными зонами грида, вместо grid-area: 1/1 как в прошлом примере.

Итого:

.button {
    display: grid;
    grid-template-areas: "stack";

    .spinner,
    .text {
        grid-area: stack;
 justify-self: center;
    }
}

Ну и как-то так вышло: https://codepen.io/alinaki/pen/ogvBMLv

#css #grid

#видео дня

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

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

И говорю я о ByteDance, авторах TikTok, CapCut, Mars (альтернативы Cursot) и Lark (альтернатива Google Workspace).

Почему мне так интересно? Потому что я люблю позалипать в ТикТоке. Шутка. Потому что я пользуюсь бандлером RSPack с первых дней выхода. Пруф: https://www.tg-me.com/htmlshit/1868

А Зак Джексон как раз его ментейнер :) И автор идеи Module Federation.

И, собственно, беседа о нём в том числе и пойдёт, а ещё о микрофронтендах и Module Federation.

К слову, когда автор React Scan начал свой спам видео с ререндерами всего и вся, именно ребята из ByteDance наиболее адекватно среагировали на проблему, а не стали орать: «Да кому это интересно, господи!»

В общем, хоть я и не фанат подкастов, моя дикая рекомендация: https://www.youtube.com/watch?v=aFhysuTUoQY

#podcast #rspack #bytedance