Будни разработчика
14.7K subscribers
1.18K photos
334 videos
7 files
2.01K links
Блог Lead JS-разработчика из Хельсинки
Автор: @bekharsky

По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv

Чат: https://t.me/htmlshitchat

№5001017849, https://www.gosuslugi.ru/snet/679b74f8dad2d930d2eaa978
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
#codepen дня

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

Вот недавно прошла очередная презентация Apple Keynote. Что сделает хороший разработчик? Правильно, воссоздаст анимацию её логотипа: https://codepen.io/Mamboleoo/pen/ZELqMOg

Что же сделает отличный разработчик?

А он не просто воссоздаст, но и покажет, как конкретно. Разложит на шаги и снабдит код подробными комментариями: https://codepen.io/Mamboleoo/pen/qBRQXPN

Кому не хватало понимания, как конкретно пишутся анимации с использованием GSAP – самое время пойти и попробовать.

👉 @htmlshit
#svg #canvas #gsap
#статья дня

Так, осторожно. Шоковый контент 😣

Думаете, на КДПВ шутка? Да хрен вам! Суровая реальность.

Сейчас покажу.

Есть такая ерундовина — CSS Houdini, низкоуровневый API, выкатывающий наружу некоторое внутреннее устройство CSS. И её неотъемлемая часть — Painting API. Он даёт возможность рисовать внутри background-image как на холсте. На canvas, то бишь.

Вы уже поняли, к чему я клоню?

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

Собственно, к делу:
https://www.leemeichin.com/posts/yes-i-can-connect-to-a-db-in-css.html

TL;DR

.query-display {
background: paint(sql-css);
}

main {
--sql-query: SELECT * FROM genre;
--sql-database: url(...);
}


…некоторые вещи тупо прокляты, развлекайтесь: https://www.sqlcss.xyz/

#css #houdini #canvas
🤯28👍41🔥1👏1
#заметка дня

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

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

Да и выглядит такой код чуток попроще, чем на CustomPainter во Flutter (хотя по факту-то тоже просто холст).

Итак, для пульта я решил сделать D-pad (он же джойстик или directional pad). На моём пульте он состоит из четырех кнопок по кольцу и одной центральной.

Чаще всего, d-pad-ом называют всем известную крестовину, которая не всегда обладает отдельным центром.

Проще всего достичь такого эффекта, разделив весь круг на четыре сектора. Каждый сектор — это дуга, занимающая угол
90°. Чтобы они визуально отделялись, добавляем контуры между дугами, а поверх всего накладываем центральный круг — он становится кнопкой.

Для корректного размещения делим полный угол 360° на количество дуг — четыре — и задаём начальный угол сдвига -45°. Он нужен, чтобы первый сектор смотрел строго вверх. А то а чо он.

В результате получаем симметричный D-pad, где каждый сегмент и центр выделены визуально: https://codepen.io/alinaki/pen/oNKmxNe?editors=0010

Ладно, ладно. Это на бумаге кажется, что всё действительно просто. На деле же я жёстко тупил.

1. Я не очень понимал, как обрабатывать клики, поэтому думал в сторону пяти отдельных элементов. А значит, об уравнении арки.
2. Потом я никак не мог врубиться, как же мне сделать отступы одинаковой ширины. Мысль, что это просто контур, граница, вообще не сразу мне в голову пришла.
3. Вроде, в школе учат, как определять, попала ли точка в контур, заданный неким уравнением, но вспоминаешь это тоже далеко не сразу.

В следующих постах расскажу, как решил уравнение в пункте 3, добавив подсветку нужного сегмента при нажатии.

Не переключайтесь, котаны!

#canvas #paint #remote
👍141
This media is not supported in your browser
VIEW IN TELEGRAM
#заметка дня

Ну что, будем долбиться в холст и аналитическую геометрию?

Продолжаем разработку D-pad'а aka крестовины. И сегодня на повестке дня — определение попадания координат клика в нужный нам сектор. Ну и подсветка сектора заодно.

В прошлый раз мы нарисовали крестовину (я честно не знаю, как d-pad ещё называть), а сегодня пришла пора по нему покликать. Ссылка для тех, кто забыл: https://t.me/htmlshit/3279

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

Заодно мы получили бесконечно возможное число секторов.

Математику отрисовки мы обсудили в прошлом посте. Итак, что же делаем по клику?

Для зануд: мы тут в декартовых координатах работаем.

1️⃣Определяем, не ткнули ли мы в центральную кнопку.

Это довольно просто: уравнение окружности у нас (х – х0)² + (y – y0)² = R², где x0 и y0 — координаты центра, а R, соответственно, радиус.

Ну и получается, что пока левая часть меньше правой, мы ткнули в центр. Тут всё просто.

2️⃣ Если попали не в центр, то уже однозначно, в какой-то из секторов.

Здесь задача сводится, опять же, к двум вещам: провести луч из центра окружности в точку, чтобы определить его угол относительно оси абсцисс (горизонтали) и простым сравнением определить, в какой же из секторов попали.

Не забыв про то, что мы повернули окружность на 45° влево, чтобы задать верное направление крестовины.

И для этого существует функция Math.atan2 (Википедия на английском или на русском вот тут): арктангенс для заданных координат, в радианах.

Радианы — просто всё умножается на π.

Ну и всё, перерисовали с учётом нового цвета.

Как всегда, демка на CodePen: https://codepen.io/alinaki/pen/Yzmoyyr?editors=0010

Что делаем в следующий раз, анимируем?

#canvas #javascript #remote
Please open Telegram to view this post
VIEW IN TELEGRAM
👍54
#статья дня

В чатике всплыл очередной вопрос про эффект ambilight.

Если кто не помнит, фоновая интерактивная подсветка ambilight — от Ambient Light — пришла к нам от телевизоров Филипс, а нынче есть даже на YouTube.

Мы уже рассматривали пару вариантов создания такого эффекта, но не для видео.

А для видео же — есть прекрасная статья на Smashing Magazine: https://www.smashingmagazine.com/2023/07/recreating-youtube-ambient-mode-glow-effect/

Описывается создание нужного эффекта на основе canvas, со всеми пояснениями и кодом. Даже хук для React по пути сделали.

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

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

#ambilight #video #canvas
👍82