#ссылка дня

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

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

Итак, вашему вниманию иконки от Дмитро Товстокорого: 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://t.iss.one/htmlshit/3290

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

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

‹button>{ isLoading ? <LoadingSpinner/> : "Save" }</button>

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

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

Когда-то давно мы сделали табло, в котором меняли строки на разных языках: https://t.iss.one/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://t.iss.one/htmlshit/1868

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

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

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

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

#podcast #rspack #bytedance

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

Ну что, вы уже сделали свой сервис для удаления фона с изображения?

Нет? А почему?

Даже Эдди Османи не удержался: https://bg.addy.ie/

Ведь, как мы уже писали, с помощью библиотеки Transformers.js можно с лёгкостью реализовать множество применений ИИ-моделей прямо в браузере! Да, без отправки на сервер. Пусть комп клиента старается :)

Гитхаб: https://github.com/addyosmani/bg-remove

Больше сервисов богу сервисов!

#ai #webgpu #image

#codepen дня

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

Переливающийся всеми цветами радуги светящийся текст!

Вот: https://codepen.io/thebabydino/pen/rNPOpJK

Реализовано на SVG-фильтре gaussian blur: фон обрезается по контенту текста через -webkit-background-clip: text и размывается.

Жаль, я не знал об этой технике когда много лет назад делал сайт школе стриптиза. Там было много эффектов а-ля неоновое свечение. Фоток не будет.

#css #svg #filter #бородач

#фишка дня

Надоело читать это: «To push the current branch and set the remote as upstream, use
git push --set-upstream origin fix/bug-1359»?

А всё потому что git на сервере не знает ничего о ветках на вашей машине. Нужно явно указать: «Хочу создать ветку на удаленном сервере с указанным названием и связать её с локальной». Названия даже могут отличаться, но чаще всего — совпадают. Ну, у меня, во всяком случае.

Поэтому, глядите чо: https://git-scm.com/docs/git-config#Documentation/git-config.txt-pushautoSetupRemote

Ну или просто взгляните на КДПВ.

Завезли с версии 2.37.0, так что проверьте сначала. Спасибо за уточнение подписчику :)

#git #remote #бородач

#баг дня

Если вы тут утром решили развернуть новый проект на Vite, и у вас ничего не вышло, это нормально.

esuild, на котором Vite и основана, в версии 0.24.1 принёс ломающее конфиги изменение.

И на данный момент лучшее решение — запинить зависимость esbuild на 0.24.0: https://github.com/vitejs/vite/issues/19018

Ну или использовать пятую ветку Vite.

Повторяется на всех пакетных менеджерах: и npm, и pnpm и bun и, прости господи, yarn.

Осторожнее там, котаны :)

#vite #esbuild #bug

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

Помните, как на Новый год нужно было срочно найти подарок для младшего брата, и вы отдали ему пылившийся на полке DVD с фильмом, который вы даже не смотрели?

Возможно, он до сих пор это помнит... А вы с тех пор понимаете, что такое повторное использование.

А вот ребята из Material UI aka MUI решили переработать подход к таким ситуациям.
Они только что выпустили публичную альфу Base UI 1.0 — библиотеку нестилизованных React-компонентов, выделенных из большого пакета Material UI и доступных теперь как отдельный продукт.

Помимо готовых компонентов в ней есть и низкоуровневые хуки, дающие всю мощь Material UI, но без необходимости реализовывать Material Design в приложении.

Полная свобода в стилях
Base UI не навязывает собственное решение для CSS. Вы сами выбираете, как работать: Tailwind, CSS-in-JS или любой другой способ.

Доступность (A11Y) по умолчанию
Компоненты соблюдают лучшие практики доступности. Это значит, что ваш проект будет удобен для всех, и никто не скажет, что вы плохой человек (кроме младшего брата).

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

Base UI сохраняет лучшие части Material UI, не привязывая вас к "гугловскому" дизайну.

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

Лучший подарок на Новый год!

#react #mui #ui #widgets

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

Лучший API — это тот, который не пришлось писать самому! Потому так популярны и фреймворки, и сервисы вроде Firebase.

Но если охота чуть больше контроля над базой данных и своими ресурсами вообще, а писать код всё ещё неохота, рекомендую взглянуть на PostgREST. Это инструмент, который превращает вашу базу данных в полноценный REST API.

Почему это круто?

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

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

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

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

Легкая интеграция
Подходит как для простых CRUD-операций, так и для сложной бизнес-логики через SQL-вьюхи или хранимые процедуры.

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

#postgres #api #service

#фишка дня

Сейчас в CSS присутствует 54 разных единицы измерения (units).

Пятьдесят четыре!

А ты до сих пор используешь одни только пиксели aka px.

Так вот, используя единицу измерения lh — привязанную к line-height — и свойство background-clip, можно, например, красиво подсветить нужное число строк в любом тексте.

Прям как тут: https://codepen.io/alinaki/pen/xxMJXaV

Поиграйтесь с настройками и шириной блока, получается очень интересно. Автор красоты — Jhey.

А чтобы не запутаться — есть прекрасный ресурс https://whatunit.com/

На нём имеется диаграмма принятия решений, когда какую единицу брать. Если всё ещё непонятно, посмотрите видео от Kevin Powell: https://www.youtube.com/watch?v=Utc_uhvTluk

Он, кстати, автор диаграммы.

В общем, просыпаемся, котаны. Будущее здесь.

#css #rem #lh #vh #measure #бородач

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

Особенно тех, кто посты читает

С наступающим Новым годом! Больше постов совсем скоро :)

К слову, вот тот самый популярный пост: https://t.iss.one/htmlshit/3049

#статья дня

Так получилось, что я использовал матрицы преобразований — осмысленно — всего раз в жизни. Правда, в итоге перешёл на решение попроще: https://t.iss.one/htmlshit/1580

Но это не значит, что они не нужны :) Просто не у всех есть под них задачи.

А вот у Ивана Шубина — автора редактора диаграмм Schemio — такая задача возникла. Правда, осознал он это не сразу :)

Ну кто бы мог подумать, что тебе понадобятся матрицы преобразований, когда ты разрабатываешь векторный редактор, правда?

Прекрасная статья для тех, кто говорит, что программисту математика не нужна: https://itnext.io/how-i-used-linear-algebra-to-build-an-interactive-diagramming-editor-and-why-matrix-math-is-d5bd552f2e8d

Ну, точнее, линейная алгебра.

Есть перевод на русский: https://habr.com/ru/articles/870462/

Не, кроме шуток, просто шикарнейшая статья, после которой очень многое в работе с векторной (и не только) графикой станет понятно.

#svg #math #matrix #transform