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

#ссылка дня

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

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

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

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

#react #router #ssr #tutorial

#такое дня

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

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

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

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

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

#js #react

#статья дня

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

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

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

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

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

#ссылка дня

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

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

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

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

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

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

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

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

#ui #ux #modal

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

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

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

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

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

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

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

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

#javascript #eventloop #tool

#игра дня

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

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

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

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

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

#google #doodle #scratch

#ссылка дня

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

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

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

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

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

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

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

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

#icons #svg #animation

#заметка дня

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

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

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

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

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

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

Огромное число пользователей не видят разницы между 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

#статья дня

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 #бородач

#фишка дня

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

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

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

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

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

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

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

#новость дня

Ой, а что это у нас такое на картинке? А это, товарищи мои, кусок документации 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

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

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

Ладно, кроме шуток (хотя я и не шутил). С помощью infinity можно гарантировать верно скруглённые углы на прямоугольниках, мы с вами уже рассматривали алгоритм для веба и Flutter: https://t.me/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 #бородач

#новость дня

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

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

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

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

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

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

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

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

#ссылка дня

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

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

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

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

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

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

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

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

#advent #calendar #webperf #performance

#статья дня

Думали, научились отличать 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/

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

#ссылка дня

А ссылок будет много! Ведь на дворе декабрь, а значит — время рождественских календарей! 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

#фишка дня

Помните, обсуждали фишку в Git — bisect? Ну, буквально, двоичный поиск косяка в коммитах: https://t.me/htmlshit/3061

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

А где ещё у нас могут быть проблемы, потому что мы сделали или установили что-то не то?

Да везде, буквально.

И сегодня речь пойдёт о похожей фишке в редакторе Visual Studio Code. Спряталась она в трёхточечном меню в панели расширений.

Вот обновили вы редактор, или открыли что-то, что до этого не открывали. Или куча расширений обновились разом и началось какое-то неопределённое поведение — жамкаем на Start Extension Bisect.

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

А потом предложит отправить отчёт об ошибке, ну или просто отключить ломающее всё расширение.

Как вам идея, котаны?

#vscode #extension #bisect

#библиотека дня

Близятся рождественские и новогодние праздники, а значит, скоро каждый третий сайт получит снег.

Поскольку это неизбежно, давайте сразу скину нормальную библиотеку, которая не заставит ноутбуки ваших посетителей выть: https://github.com/tsparticles/tsparticles

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

А ребята развивались! Демок какое-то дикое количество теперь: https://particles.js.org/samples/index.html

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

Да, снег там тоже имеется.

#particles #effect #бородач

#заметка дня

Тут в нашем чатике aka @htmlshitchat человек задал вопрос: «Как заставить событие произойти только после долгого нажатия на кнопку?»

И, вроде, очевидный ответ: ставь таймаут да отменяй его:

Осторожно, псевдокод jQuery

let r = null;

$button.on("mousedown", function(e) {
  e.preventDefault();
  e.stopPropagation();
  r = window.setTimeout(function() {
    $button.html('Clicked');
  }, 3000);
});

$button.on("mouseup", function() {
  $button.html('Hold me');
  window.clearTimeout(r);
});

Но это было бы скучно и недостаточно для поста, не правда ли?

И тут я вспомнил, что в 2017 году уже делал нечто подобное. Тогда не обошлось без погружения в Three.js и математику шестиугольников. Я об этом уже рассказывал: https://t.me/htmlshit/2639

Немного покопавшись в вебархиве, я нашёл тот проект. Итак, что же мы делали?

А вот на видео видно.

Анимация была оформлена на Tween.js, который всё ещё очень и очень популярен. Правда, название их последнего релиза ну прям удручает. End of the end — серьёзно?

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

Итак, кодпен: https://codepen.io/alinaki/pen/KwPwVPr?editors=1100

Весь современный код упихан в секцию с HTML, в script type="module", где импортированы нужные модули и константы из ESM-версии Tween.js, он же является нашим скоупом.

Это вообще очень удобный паттерн чтобы быстро накидать пример без бандлинга.

По зажатию кнопки мыши запускаем анимацию forward, по отпусканию кнопки — запускаем reverse. Из breaking changes — раньше можно было просто вызвать start(), а теперь нужно вызывать startFromCurrentValues(), иначе красоты не получится.

  function forward() {
    tween.stop().to({
      value: 2000
    }, 3000).startFromCurrentValues();
  }

  function reverse() {
    tween.stop().to({
      value: 1000
    }, 3000).startFromCurrentValues();
  }

Достаточно просто и эффектно.

#js #animation #tween