htmlshit | Unsorted

Telegram-канал htmlshit - Будни разработчика

14544

Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat

Subscribe to a channel

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

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

Вторая альтернатива (поверьте, ещё год назад их было ну очень много) — https://spaceholder.cc/

Вставляет фотографии с телескопа Хаббл!

Пробуем, ставим пальцы.

Читать полностью…

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

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

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

Потом всё стало немного сложнее.

Особенно непросто стало проектам с примерами. Хочешь ты показать людям какую-нибудь фишку вёрстки картинок, или просто разнообразить серые квадраты, а картинки-то брать негде. Тут на помощь пришёл сервис Unsplash Source.

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

Но что же делать, не ставить же скучные плейсхолдеры?

И тут нам поможет https://picsum.photos/

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

Как-то так: https://picsum.photos/id/237/200/300

Ну или рандомную нужного размера: https://picsum.photos/seed/picsum/200/300

А ещё картинку можно на лету заблюрить! Вот так: https://picsum.photos/200/300/?blur

Или даже перевести в оттенки серого. Или в webp забрать. Есть даже API по параметрам картинок, всё для тренировки.

Удобно!

P. S. есть вероятность, что сервис заблокирован в РФ. Найду что-нибудь похожее.

Читать полностью…

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

Зарегистрируйтесь на открытый урок "Мониторинг распределенных систем" и получите список вопросов на собеседовании SRE-специалиста от Джуна до Сеньора!

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

Сам курс «SRE практики и инструменты» стартует 25 сентября. По данным hh средний уровень зарплат SRE-Engineer в Москве начинается от 150 000 руб/мес. 

Регистрируйтесь и забирайте бонус в телеграм: https://clck.ru/3Ctc8G 

Реклама. ООО "ОТУС ОНЛАЙН-ОБРАЗОВАНИЕ". ИНН 9705100963.

Читать полностью…

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

#заметка дня

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

Очевидно, focus. Ведь для этого и предназначено. Вот только focus ведёт себя непредсказуемо в разных браузерах: в Chrome и Safari элемент выводится на центр экрана, а Firefox — до минимально необходимого уровня, суть — вниз. А ещё всё это происходит резко.

Решение проблемы — передача запрета скролла в метод focus и вызов scrollIntoView вместо этого.

Таким образом можно программно доскроллить до любого элемента, не только формы. И не только в центр экрана, но и по заданному отступу.

А ещё можно передать параметр, отвечающий за вид прокрутки: behavior. Итого, behavior: smooth подвинет элемент к нам плавно. Правда, для Safari и IE придётся подключать полифилл (см. комментарий в примере).

Итого, получаем: https://codepen.io/alinaki/pen/mdPwdxy

Мой пример — дополненный оригинальный от Smashing Magazine: https://twitter.com/smashingmag/status/1299325085111783425

Ещё близкое к реальности применение — скролл по секциям: https://codepen.io/aaroniker/pen/WNNLRYb

#css #scroll #scrollintoview #js #focus #бородач

Читать полностью…

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

#крик дня

Семантическое версионирование? А нахуя?

Видимо, так подумали авторы популярного GitHub-экшена upload-artifact, предназначенного чтобы результат какого-либо необходимого для деплоя процесса выгрузить дальше.

Что они сделали?

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

Вот: https://github.com/actions/upload-artifact/issues/602

Что это значит? Так-то намерения хорошие: не позволить выгрузить .env и условные .config.json, содержащие секреты. Чтобы эти самые секреты никуда не утекли.

Вот только ребята забыли, что благими намерениями выложена дорога в ад! И, я надеюсь, они там будут гореть.

Это изменение предназначалось для версии 4, но они с какого-то перепугу решили выполнить его в 3 версии.

НА-ХЕ-РА?! Кому от этого хорошо? Зачем?

Если люди выгружают секреты куда-то случайно — не беда, перезагрузят!

Абсолютно нормально иметь sample-файлы .env.sample, .config.sample и так далее. Что мы и делали, обогащая эти файлы секретами.

Вот что ненормально — так это навязывать свою точку зрения пост-фактум. Ещё и в стабильной версии.

Просто уроды, слов нет. Certified scumbag engineering.

#github #подстава

Читать полностью…

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

#ссылка дня

Мы тут немного повеселились с XSS в разных продуктах и сайтах, результаты удивили. Распространяться я не буду, неприлично, но парочкой полезных ссылок поделюсь.

1. Расширение для Chrome, позволяющее быстро выбрать и вставить XSS-строку в нужное вам текстовое поле: https://chrome.google.com/webstore/detail/bug-magnet/efhedldbjahpgjcneebmbolkalbhckfi?hl=en

2. Постоянно обновляемый репозиторий на ту же тему: https://github.com/minimaxir/big-list-of-naughty-strings

Впрочем, там не только XSS. Помните, например, в чатах люди свои ники пишут с “грязью”? Красиво поломать интерфейс — это туда. Вставить эмодзи, смайлы, управляющие символы.

Ломайте свои интерфейсы сами и избегайте XSS, котаны.

#xss #naughty #injection #бородач

Читать полностью…

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

#статья дня

Я, пару лет назад, чтобы облегчить себе разработку расширения для Google Sheets, написал тоже расширение, но уже для браузера.

Что оно делало?

- слушало лог сети, как список событий
- вычленяло нужные события вызовов функций Google AppsScript
- десериализовало ответ
- выводило на экран, с разными фильтрами (с тех пор я ненавижу MUI)

И так прекрасно работало пару лет, а потом появился треклятый Manifest v3 и у меня не было времени перевести на него своё расширение... чуток всё заглохло.

Но зато на работе награду получил

Ладно, давайте к делу.

Итак, статья дня от Злых Марсиан: как конвертировать расширение для Chrome в расширение для Safari.

Оказывается, есть там пара подводных камней. Самое раздражающее — нужен чёртов XCode :)

Ну и своевременное появление этой статьи — оно мне как некий толчок к восстановлению моего решения.

#chrome #safari #extension

Читать полностью…

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

🖥Для многих ИТ-компаний, которые занимаются разработкой софта, одним из важнейших элементов является лицензирование ПО. Оно выполняет не только функцию защиты от пиратства, но и является хорошим средством заработка. Гибкое лицензирование помогает продавать ПО эффективно и соответствовать меняющимся требованиям рынка.

🐪20 сентября в Москве и 4 октября в Санкт-Петербурге состоится конференция Guardant Day – мероприятие для обмена практическим опытом по вопросам обеспечения технической защиты, выбора бизнес-модели лицензирования и определения стратегии развития продукта.

Что мы подготовили для участников:
🔘Круглый стол, посвященный мерам государственной поддержки вендоров ПО.
🔘Кейсы по работе с системой защиты и лицензирования от разработчиков ПО: практические рекомендации.
🔘 Экспертные доклады о технологиях, инструментах и продуктах.
🔘Презентация новой версии Guardant SLK 4.0 и планы по развитию.
🔘Сессия для ИТ/ИБ-маркетологов с экспертными докладами и обменом опытом.
🔘Технические стенды с возможностью увидеть продукты в действии.

В этом году мероприятие пройдет:

🌆20 сентября в Москве. Регистрация тут

🌉4 октября в Санкт-Петербурге. Регистрация тут

В обоих городах начало деловой части в 14:00.
Участие в мероприятии бесплатное по предварительной регистрации.

Подробнее о мероприятии в ТГ-канале Guardant TechClub

Читать полностью…

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

#codepen дня

А давайте, вдогонку к предыдущей новости о появлении popover, взглянем на такой вот шикарный эффект удаления диалога 🙂

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

Не то, что я сейчас о них что-то знаю, но хотя бы и поддержки сильно больше.

Ах да, ссылка: https://codepen.io/ksenia-k/full/yLQLyZa

Там, кстати, и описание процесса приложено. Где-то на канале я выкладывал WebGL-демки, с красивым похожим шейдером огня, можно попробовать применить 🙂

Спасибо Ксении Кондрашёвой.

#webgl #shader #бородач

Читать полностью…

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

#фишка дня

Автор твита с картинкой выше буквально написал: «It's official. I don't understand URL.canParse 🫠»

Ну, давайте разбираться, что же тут не так. Или всё так?

И надо ли это вообще понимать?

Для начала, подумаем, зачем нам может понадобиться URL.canParse. А нужно это для случаев, когда отбросить токенизацию aka URL.parse и выполнение запроса дешевле и быстрее, чем упасть в ошибку или городить try-catch. Например, в работе с микросервисами, с БД.

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

1. Если есть порт, протокол не нужен
2. IP-адресам всегда нужен протокол

Ну, собственно, это и есть ответ на вопрос, как же работает canParse и особо больше понимать там нечего.

Другое дело, что URL.parse и URL.canParse в принципе как-то странно реализованы... Попробуйте в консоли сделать URL.parse("google.com:80").

Так что история ещё не закончена. Понять canParse — можно. А стоит ли применять — вопрос.

#url #parse #static #javascript

Читать полностью…

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

#игра дня

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

Итак, встречайте: Guess CSS!

https://www.guess-css.app/

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

Делитесь результатами, котаны!

#css #game #quiz #бородач

Читать полностью…

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

#такое дня

Итак, куда же переносить ваши драгоценные заметки из богоподобного Notion? Если вы следите за новостями, конечно.

Очевидный душный ответ: «Не надо было начинать пользоваться облачным сервисом вне зависимости от».

Но если вас всё же угораздило, давайте подумаем, что же делать.

Ответ, на самом деле, простой: всё есть текст. А некоторые виды текста нынче являются индустриальным стандартом.

Чуете, куда я веду? Конечно же к Markdown. И Git.

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

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

Им пользуются буквально все, от разработчиков до писателей и стендаперов. Бесплатное приложение для всех платформ, включая мобильные. Если нужна синхронизация — приобретается отдельно, но можно и просто через Git, файлы же у вас.

Про стендаперов не шутка, вон Денис Чужой вовсю его использует.

Огромное сообщество, поддержка плагинов, поддержка вики-стиля (если вы понимаете, о чём я), какое-то невероятное число хаков и секретов.

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

Пользуемся, котаны.

#notion #note #obsidian #tool

Читать полностью…

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

Анализ спринта, собесы, дейлики с командой и помощь со сложными архитектурными решениями — типичные будни лида в Авито. Твоя работа может быть такой же — стань руководителем команды разработки за выходные на Avito TeamLead Марафоне!

Тебя ждёт:
— работа над продуктом, которым пользуются больше 50 миллионов людей в месяц;
— сложные технические решения и мощная кросс-функциональная команда;
— конкурентная зарплата и дополнительные дни отпуска.

Управляешь командой больше года, а твой опыт в разработке 5+ лет? Любишь не только вести проекты, но все еще писать код?

Регистрируйся на марафон и стань лидом в Авито уже 9 сентября!

P.S. Если ты пока не готов менять работу, проверь свои силы на технических секциях или набирайся опыта через мок-собесы от Авито. Подробности на сайте.

Читать полностью…

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

#такое дня

Интересно, а выдача буквального denylisted-сообщения — это баг Твиттера, или фича?

Читать полностью…

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

#codepen дня

Признавайтесь, кто в TikTok часы проводит за скроллингом ленты?

Но я вообще не за тем пришёл. Меня их прелоадер заинтересовал. Яркий пример режима смешивания цветов со слоями ниже, mix-blend-mode: multiply.

Без него анимация была бы совсем простой: https://codepen.io/frontendcorn/pen/poWZObX

Кстати, прекрасная статья есть с примерами: https://web.dev/learn/css/blend-modes/

А тут разобрана вся их математика: https://www.w3.org/TR/compositing-1/

А тут вся математика разобрана еще более подробно: https://css-tricks.com/taming-blend-modes-difference-and-exclusion/

И перевод от Ильи Стрельцына: https://css-live.ru/tricks/ukroshhaem-rezhimy-nalozheniya-difference-i-exclusion.html

А самое забавное, что с видео это тоже работает: https://codepen.io/jcoulterdesign/pen/QagxgJ

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

Читать полностью…

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

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

Итак, первая альтернатива Lorem Picsum — Placedog: https://placedog.net/

Умеет все то же самое, только посвящен собакам. Ставьте реакции 👍, если у вас работает.

Читать полностью…

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

#статья дня

А знаете ли вы, котаны, что такое безопасный треугольник печали? Aka safe triangle.

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

Да-да, в вашей Windows или MacOS такое тоже есть. Проверьте сами.

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

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

В общем, с чего всё началось, зачем это нужно и как сделать сайты удобными — в первой интерактивной статье Шадида: https://ishadeed.com/article/target-size

Огромное количество примеров, просто новый уровень для автора. Моё увожение.

#css #ui #ux #safe #target #бородач

Читать полностью…

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

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

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

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

И все хотят денег.

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

Итак, вашему вниманию — Transformers.js, как средство работы с моделями, и одно из самых наглядных его применений — удаление фона с фото прямо в вашем браузере: https://github.com/huggingface/transformers.js-examples/pull/4/files

Демо: https://huggingface.co/spaces/webml-community/remove-background-webgpu

Бесплатно, без SMS.

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

Огонь? Огонь! 🔥

#js #ml

Читать полностью…

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

‼️Notion уходит из России и отключает российские аккаунты 

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

Один из примеров — платформа для управления знаниями и совместной работы TEAMLY. Не только помогут с миграцией с Notion, но и подробно расскажут, какие фичи и возможности есть на платформе:

— Генерация идей и бизнес-цели в интеллект-картах; 
— Ведение планов в диаграмме Ганта; 
— Декомпозиция задач в умных таблицах;   
— Управление спринтами в канбан-досках;   
— Отслеживание дедлайнов в календаре; 
— Сбор и анализ обратной связи пользователей

Узнать больше

Читать полностью…

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

#til дня

Вам когда-нибудь было мучительно стыдно за то, что чего-то не знаете?

Мне — нет. Но вот сейчас почти да.

Вы знали, что вот уже djn больше года как nth-child в CSS стал нормальным?

Что я имею в виду: у тебя раньше был выбор, nth-child для индексации узлов aka тегов любого вида или nth-of-type для индексации конкретного типа узла (div, p, section).

Выходит какой-то бред, как мне посчитать второй элемент с классом .star?

И вот чего я не знал, это что nth-child может принимать селектор в виде аргумента of!

:nth-child(2 of .star) {
background: red;
}


Ведь счастье так возможно. Стефан Юдис мне это показал.

Вот, Baseline 2023: https://caniuse.com/css-nth-child-of

И демо: https://codepen.io/alinaki/pen/LYKXWYo

Я, короче, очень доволен.

#css #nth #фишка

Читать полностью…

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

Онлайн-интенсив от НИУ ВШЭ: начните свой путь в веб-разработку

Изучить фронтенд с нуля, научиться верстке и работе с современными инструментами и создать свой первый мини-проект для портфолио — все это можно сделать на бесплатном онлайн-интенсиве «Frontend с нуля: первый шаг в веб-разработку» от Центра непрерывного образования факультета компьютерных наук НИУ ВШЭ.

Интенсив подойдет:
➖➖➖➖➖➖
▫️Начинающим во фронтенд-разработке: изучите основы фронтенда и сделаете первые шаги в новой области
▫️Тем, кто хочет работать в IT: погрузитесь в направление и поймете, подходит ли вам фронтенд-разработка
▫️Тем, кто рассматривает возможность дальнейшего обучения: углубитесь в изучение веб-технологий и сделаете первый проект для портфолио

Программа:
➖➖➖➖
▫️Буткемп: лекция о том, как устроен фронтенд, его технологиях и инструментах, а также воркшопы по верстке и React
▫️Практика: задания с автоматической проверкой на Stepik для закрепления навыков
▫️Мини-проект для портфолио: создание своего первого сайта в рамках интенсива

Спикер: Андрей Сухов, Frontend-разработчик Evocargo и эксперт Центра непрерывного образования ФКН

Онлайн-интенсив пройдет с 9 по 13 сентября. Участие бесплатное для всех желающих, нужно только зарегистрироваться.

Реклама: Федеральное государственное автономное образовательное учреждение высшего образования «Национальный исследовательский университет «Высшая школа экономики».
Erid: 2SDnjepHSTC

Читать полностью…

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

Чтобы попасть в Meta нужно пройти сложное собеседование и уметь писать высокопроизводительный код.

Высокопроизводительные решения би лайк:

Читать полностью…

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

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

Любишь GUI? Ошибка! Не любишь консоль? Фатальная ошибка!

Короче, я знаю, конечно, людей, которые чуть что — сразу в man лезут, инструкции, но их реально не так много.

Большинство повторяет заученные когда-то команды и сочетания

sudo rm -rf /*, например

Так вот, вне зависимости от того, долбишься ты в гуй или нет, знать команды консоли всё равно надо, потому что рано или поздно понадобится. А чтобы понимать состав команд и не копировать бездумно из руководств, есть прекрасный инструмент: https://explainshell.com/

И нет, ChatGPT очень часто генерирует какую-то херню. Уж лучше man тогда научиться понимать 🙂

#console #shell #bash #бородач

Читать полностью…

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

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

Ближайшие Fast Track мероприятия:

• 7-8 сентября — для аналитиков со знанием SQL и Python, офер за 2 дня в команды Маркета, Еды и Лавки.

Читать полностью…

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

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

Сегодня на повестке дня очередная дикая вкуснятина по SVG!

SSSVG: https://www.fffuel.co/sssvg/

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

Что такое viewBox, как работает clipPath, на что влияют группы aka g, что такое use и symbol, как использовать маску и так далее и так далее — есть всё.

Каждый пример интерактивен, легко ориентироваться.

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

#svg #tool #interactive

Читать полностью…

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

Этот навык – чит-код для разработчика

Работодатели тратят миллионы из-за лишних 10 секунд, которые грузился интернет-магазин или банк. Поэтому главный навык IT-специалиста в 2024 году – уметь создавать системы, которые обрабатывают огромные потоки данных без задержек и сбоев.

Если вы хотите стать востребованным разработчиком, вам нужно знать Redis.

Эта система позволяет гарантировать великолепный опыт юзеров от использования ключевых фич вашего проекта.

Специально для этого ребята из FAANG School подготовили онлайн эфир, где расскажут, как создавать высоконагруженное приложение с Redis.

Вы узнаете:

– что такое кэш и когда его использовать
– как избежать ошибок многопоточности в Redis
– как использовать Redis в высоконагруженных проектах. Реальные примеры кода
– о концепции NoSQL и горизонтальном масштабировании
– как корректно работать с данными в Redis
– как использовать Redis в качестве основной БД

Переходите, чтобы после эфира реализовать несколько фич с Redis и увеличить шанс получить оффер.

Читать полностью…

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

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

Итак, задались вы целью сделать, например, генератор кастомных фигур и тем оформления для Google Slides. Вот чтобы бац-бац, скопировал — вставил и все довольны. Но возникает закономерный вопрос.

А что копировать-то? Какой формат данных внутри Google Slides?

И на этот вопрос нам ответит Clipboard Inspector: https://evercoder.github.io/clipboard-inspector/

Забавно смотреть, как разные программы рулят буфером обмена. Да и если самому реализовать придётся — очень полезно.

#tool #clipboard

Читать полностью…

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

#cтатья дня

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

А именно, с момента появления поддержки альфа-канала (читай, прозрачности) во всех современных видеокодеках.

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

Да, интерактивность будет минимальная, но всем и всегда ли она нужна?

В любом случае, ситуация с поддержкой до сих пор остаётся не лучшей. AVIF, будучи самым продвинутым видеокодеком, не поддеживается в Safari. Комбинация из VP9 и HEVC — вроде неплохо, но сильно больше весит и лагает на Android и в Firefox.

И тут на сцену выходит WebGL! Вот, например, стрим Юрия Артюха о добавлении альфа-канала в любое видео: /channel/htmlshit/2538

А вот статья Джейка Арчибальда обо всех вышеописанных проблемах с некоторыми методиками решения и FFMPEG-командами для генерации видео и текстур: https://jakearchibald.com/2024/video-with-transparency/

Выводы, впрочем, те же самые: используйте WebGL. Для чего Джейк выпустил NPM-пакет stacked-alpha-video.

Почему stacked? Потому что он предлагает сохранять текстуру альфа-канала прямо в самом видео. Получается лучше, чем кажется!

В общем, будущее тут, хотя и такое себе пока.

P. S. в некоторых случаях можно использовать и SVG-маски, об этом потом.

#video #transparency #tool

Читать полностью…

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

👨‍💻 Изучай фронтенд по мини-гайдам!

Канал WebTaverna ежедневно публикуют полезные обучающие мини-гайды в картинках, а также различные полезные шпаргалки и советы по HTML, CSS и JavaScript

➡️ Подписывайся на WebTaverna 😮

Читать полностью…

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

#статья дня

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

Конечно же с изучения 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 #бородач

Читать полностью…
Subscribe to a channel