#видео дня

Что приходит в голову при упоминании сложных анимаций?

Ну, Lottie, очевидно. Кто-то что-то нарисовал в After Effects Bodymovin, потом это экспортировали в специально сформированный JSON и, собственно, плеером-плагином запустили в огромном количестве сред, от веба до мобил и десктопов. Да, ваши любимые стикеры и реакции в Telegram тоже Lottie.

Есть ли альтернативы? Конечно! Например, активно набирает обороты Rive. Это векторный редактор, заточенный специально под анимации.

Формат гораздо легче, чем у Lottie, а список поддерживаемых платформ (рантаймов) даже больше. Да, на стороне Lottie сообщество After Effects, но и это решаемо экспортом. Имеется и сайт сообщества со свободно скачиваемыми анимациями.

Ладно, к чему это я. Вот видеоурок по интеграции Rive-анимации в React-приложение: https://youtu.be/5hvhOb9zLeg

Анимация простая, но попробуйте скачать что-нибудь с сайта сообщества и попробовать сами :)

Удачи в анимировании, котаны!

#rive #инструмент #tool #lottie #animation #бородач

#фишка дня

Среди наименее используемых (в 2023 году) правил CSS имеется такое: background-attachment: fixed;

Что оно делает? Ну, собственно, закрепляет фон на экране так, чтобы он не двигался со скроллом. Году так в 2004-2006 было модно, во всяких браузерных играх 🫠

Давайте реабилитируем его.

Бывший деврел Google Jhey предлагает следующее: а что если следить за курсором мыши и передавать координаты в фон?

И таки да:
.card {
background:radial-gradient(circle at var(--x) var(--y), ...);
background-attachment:fixed;
}

Передаём --x и --y как координаты курсора и получаем прожектор!

Немного магии блендинга и красота: https://codepen.io/jh3y/pen/RwqZNKa

Время переосмыслять, котаны!

#css #js #var #spotlight

#ссылка дня

Воскресных котов вам в ленту! Но просто котов вы можете найти где угодно, тут же — HTTP-коты: https://http.cat/

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

#http #handbook #бородач

#статья дня

Работа с экранными единицами это моя любимая тема. Когда-то я подписчиков в канал набирал из CSS-чатов тупо кидая им этот пост: https://t.me/htmlshit/65 — и потом этот, с решением поновее: https://t.me/htmlshit/1233

Почему он был так популярен? Просто потому что 100vh на мобилах работали как не пойми что, из-за динамических тулбаров.

Ну и, конечно, моя любимая формула перевода из пикселей в rem и vh/vw: https://t.me/htmlshit/1182

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

У меня не доходили руки описать их или даже попробовать, поскольку тогда поддержка была не очень. Но сейчас самое время! Ахмад Шадид как раз подготовил свою статью: https://ishadeed.com/article/new-viewport-units/

Люблю статьи Шадида за художественное оформление. Круче, наверное, только у Камю.

В общем, svh, lvh, dvh — вам туда :)

#css #viewport

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

Разобраться в концепциях Git просто не только лишь всем. Кто-то схватывает на лету, кто-то продирается сквозь ветки и листья документации. Кто-то забивает на всё, использует UI любимой IDE и ничего сложнее git pull origin master не разруливает.

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

И называется он git-sim, вот так вот буквально.

Нужно разрулить конфликтный cherry-pick? Слить несколько веток вместе? Посмотреть последствия reset, stash, rebase? Да запросто! Просто вместо git команда пишете git-sim команда и наслаждаетесь.

Ах да, ссылки на примеры от авторов (много видео и иллюстраций): https://initialcommit.com/tools/git-sim

И на GitHub проекта: https://github.com/initialcommit-com/git-sim

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

#git #sim #tool #бородач

#такое дня

Без комментариев.

P. S. Ладно, ладно. Накинулись. Это все по историческим причинам так сложилось и вообще deprecated: https://developer.mozilla.org/en-US/docs/Web/API/Document/all

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

Каждый разработчик за свою жизнь должен сделать следующее: написать музыкальный плеер, тетрис, игру Жизнь. Если ты веб-разработчик, то ещё свою CMS, PHP-фреймворк, стейт-менеджер и... и уведомления.

Если тебе 14 лет, то ещё и криптобиржу.

Короче, уведомления вообще штука раздражающая. Всегда чего-то не хватает в существующих решениях. Но в любом случае, сегодня вашему вниманию React Hot Toast: https://react-hot-toast.com/

Отличаются маленьким весом, возможностью отмены скрытия пока наведена мышь, поддержкой промисов и JSX-содержимого, стилизуются, прости господи, через Tailwind. Не думал, что внесу это в плюсы, но после UI-китов на Emotion это уже очень хорошо.

Ещё бы туда диалоги добавить, было бы уапще.

Всем тостов, котаны! За мой счет :)

#react #toast

#статья дня

Что произойдёт, если посетитель вашего сайта или веб-приложения отключит куки?

Давайте перефразирую: обернули ли вы в try-catch все ваши вызовы localStorage, sessionStorage, IndexedDB? Нет? А почему?

Почему я до сих пор в тестовых вижу сырые вызовы localStorage? Опустим тот факт, что многие там ещё и токены хранят…

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

Ошибаются все, даже MDN. Вот собственно обзорная статья об этом: https://blog.tomayac.com/2022/08/30/things-not-available-when-someone-blocks-all-cookies/

Я тоже огрёб как-то раз, забыв обернуть localStorage в try-catch и выкатив код на продакшен. Оказалось, среди клиентов много параноиков.

Ну что делать.

#cookie #localStorage #бородач

#видео дня

Давно стоило и пересмотреть это видео, и выкатить в канал.

Многим из вас знакома концепция DRY: Don't Repeat Yourself. Вот только многие доводят её до абсурда, плодя абстракцию за абстракцией и пытаясь объять необъятное (сам таким был).

Но есть и другой подход, буквально — WET.

Write Everything Twice.

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

И вот об этом доклад Дэна наше всё Абрамова на конференции Deconstruct'2019.

Есть транскрипт, кстати: https://www.deconstructconf.com/2019/dan-abramov-the-wet-codebase

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

#video #conference #dry #wet #бородач

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

Что делать, если API не готов, моки писать лень, а приложение разрабатывать надо?

Ну или, например, портфолио отсутствует, а хочется сделать условную книгу контактов или приложение для знакомств? Откуда данные-то брать? Забивать lorem ipsum тоже неохота...

На помощь придёт генератор случайных юзеров!

https://randomuser.me/

Ну и естественно, есть и полноценный генератор случайных данных, в котором всё, что вам нужно сделать — это описать их схему и пару правил генерации: https://randomapi.com/

Так ваше приложение из портфолио будет выглядеть максимально реально. Да и в продакшене не придётся ждать кого-либо ещё.

#api #random #бородач

#статья дня

Надо было эту статью на фишки раздербанить, ну да ладно. Итак, задача: сделать сетку, элементы которой должны иметь четкое и, возможно, изменяемое соотношение сторон.

Передавать соотношение сторон можно через классы, конечно, но мы в 2023 году, так что будем использовать CSS-переменные (`--ratio: 4/3`). Дальше имеются два варианта:

1. Задать соотношение сторон всей строке через, удивительное рядом, складывание дробей: 4/3 + 2/3 = 6/3. Сразу можно понять, что минусов у решения достаточно.
2. flex-grow. Легко и просто.

Подробнее о решениях и ходе мысли в статье:
https://9elements.com/blog/building-a-combined-css-aspect-ratio-grid/

Флексы рулят, котаны :)

#css #grid #flex

#ссылка дня

Немного неожиданного контента хотите?

Не так давно открылся сайт DOTOWN с семью сотнями иконок в стиле 8-битных игр от дизайн-студии под руководством экс-дизайнера Nintendo:

https://dotown.maeda-design-room.net

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

Так что если вам за каким-то интересом понадобились восьмибитные иконки… ну может пет-проект у вас, вы знаете, куда идти.

Да, на японском. Но кого это вообще останавливало?

#icons #8bit #бородач

#статья дня

С чего начать построение своего веб-секвенсора?

Конечно же с изучения Web Audio и Web Midi API!

Статья Мэдса Стоуманна рассказывает не только о том, как сверстать свою MIDI-клавиатуру и потыкать в неё мышкой, чтобы послушать звуки, но и как подключить настоящую MIDI-клавиатуру и даже подсветить аккорды: https://blog.logrocket.com/exploring-web-audio-api-web-midi-api/

Ну и, конечно, сразу демо: https://codepen.io/stoumann/pen/ZEjjyEp

Есть у кого MIDI-синтезатор, кстати? Делитесь результатом!

#web #audio #grid #music

#автор дня

Ввожу новую рубрику! Ибо крутых авторов фронтенд-арта стоит отмечать отдельно. Мы уже обсуждали с вами создателей комиксов на чистых HTML/CSS и создателей CSS-арта вообще. Так же можно вспомнить Юрия Артюха и его великолепные WebGL-стримы.

Герой сегодняшнего поста — Julia Miocene (Юля Миоцен).

Итак, Юля делает прекрасные сюжетные анимации на чистом HTML/CSS а ещё она автор проектов https://keyframes.dev/ и https://www.pickles.rocks/

На каждую анимацию имеется видео с созданием и, собственно, кодпен. Вот, например, Зайцы с иллюстрации: https://codepen.io/miocene/pen/aPwrpw

Проработка деталей зашкаливает!

Канал Юли на YouTube: https://www.youtube.com/@julia_miocene/featured

А ещё есть совсем свежий стрим с Вадимом Макеевым, где процесс очень подробно объяснён: https://www.youtube.com/watch?v=ZhWdhMpJ8bs

Шикарное, короче :)

P. S. Мне тут подсказывают, что Юля также соведущая подкаста Веб-стандарты.

#css #art

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

Ох что я вам нашёл! Просто пушка.

Как вам отладка на мобильных устройствах? Ну только честно. По-моему — мучение.

Да, можно подключить телефон кабелем к телефону и пользоваться консолью настольного браузера. Можно купить доступ к Browserstack или аналогам и разруливать косяки на десятках устройств. Ах да, можно ещё воспользоваться эмулятором!

Но почему бы просто не воспользоваться девтулзами? Ну потому что в мобильных браузерах их нет.

Зато есть Eruda! Встраиваемая консоль для мобильных браузеров: https://github.com/liriliri/eruda

Демо: https://eruda.liriliri.io/

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

В общем, забавная вещь! В какой-то момент может и выручить.

#js #devtools #mobile

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

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

И это — кто бы мог подумать, моя любимая тема — снова DSL для представления диаграмм! Но на сей раз, всяческого рода научных, от простых блок-схем до описания векторных полей и молекул!

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

SingleBond(N2, C4)
SingleBond(C4, C5)
DoubleBond(C5, C6)

...и так далее. Прелестно же!

Короче, называется это всё Penrose: https://penrose.cs.cmu.edu/

Работает полностью в браузере, написано на TypeScript и открыто. Естественно есть биндинги к React.

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

#dsl #diagram #science

#ссылка дня

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

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

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

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

На помощь приходят подборки тестовых! Вот, например, от Хекслета: https://github.com/Hexlet/ru-test-assignments

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

Полезная штука, котаны. И не только для начинающих!

#work #assignment #list

#презентация дня

Итак, что у нас сегодня? А сегодня у нас прекрасное. Презентация Ивана Акулова с конференции 3perf: React Concurrency, Explained.

React 18 уже давно с нами, SSG-компоненты нынче считаются чуть ли не дефолтом (я не очень с этим согласен, но уж как есть), useTransition, <Suspense>... Надо втягиваться же.

Сразу ссылка: https://3perf.com/talks/react-concurrency/

Рассмотренные топики:
1. React 17 и блокирующее выполнение
2. То же, но в React 18
3. useTransition()
4. <Suspense>
5. Проблемы

Демки тоже включены 🙂

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

#react #concurrency #suspense #бородач

#фишка дня

Элемент fieldset — штука со сложной судьбой. Вас никогда не удивляло, что тег, предназначенный, казалось бы, для группировки элементов — никогда для этого не используется? Почему?

Ну вот, например, Bootstrap 5: https://getbootstrap.com/docs/5.3/forms/input-group/

Там div, не fieldset.

Всё потому, что до недавнего времени комбинация fieldset+legend отрисовывалась виджетами ОС. Как, например, те же select и button. И даже flex-модель в них не работала правильно:

Баг Chrome (исправлено в 86)
Баг Firefox (исправлено в 46)

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

Тем более, что никто не отменял его одной очень интересной фишки: атрибут disabled будет отнаследован всеми вложенными элементами!

Вот так: https://codepen.io/alinaki/pen/NWLOPqy

Где это может пригодиться?

Очевидно, если есть группа кнопок для отправки формы, а обычно это submit+reset, но может быть и несколько submit-ов на разные адреса, можно не отключать их по одной, а просто положить в fieldset и отключить разом.

Ну или всю форму, при желании.

P. S. disabled дело не ограничивается, invalid тоже работает, введите что-нибудь в текстовое поле: https://codepen.io/alinaki/pen/VwGELwr

#fieldset #disabled #бородач

#баг дня

Итак, проблема известная с десяток лет: при автозаполнении полей форм Хром заливает фон поля цветом. Раньше жёлтым, сейчас — небесно-голубым (во всяком случае, на моём сетапе).

Так что же не так с этим поведением?

Ну, для начала, оно очень непросто отключается. А точнее, не отключается — можно только переопределить. А во-вторых, стоит вам поставить фоновую картинку на ваше поле, для, например, иконки — как Хром и её сотрёт. Вот, посмотрите сами: https://codepen.io/alinaki/pen/oNQyGjo?editors=1100

Повторю: поведение касается только автоматически заполненного текста.

Сразу скажу, что официально это багом не признано и разработчики Google Chrome вертеть нас всех хотели на своих won't fix-ах: https://bugs.chromium.org/p/chromium/issues/detail?id=46543

Какие у нас есть варианты? Вообще, несколько. Все — буквально хаки.

1. Установить атрибут autocomplete в "new-password" или в любое случайное значение. Отключит автозаполнение вообще.
2. Повесить слушатель на событие change поля и восстанавливать стили скриптом.
3. Убрать заполнение цветом можно через игры с transition, например:

input:-webkit-autofill {
  transition: all 9999s;
  transition-delay: 9999s;
}

...в кодпене выше так и сделано. Но картинке это никак не поможет, потому что background-image не анимируется.

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

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

#chrome #autocomplete #bug