#баг дня

В чат поступил вопрос: «Как проиграть звук в браузере на iOS?»

И я помню, что там не самое всё тривиальное, но в итоге сводилось к (нынче) стандартному для всех браузеров требованию: «Человек должен провзаимодействовать со страницей». После чего можно запускать звук.

Причём, раньше-то «взаимодействия» было достаточно среагировать событие mousemove и вызвать метод play на audio-элементе, такой себе autoplay для бедных. Но теперь — обязательно нужен click.

Но с iOS и Safari вообще всё же всё не было так просто. Там приходилось для начала прогреть контекст звука — AudioContext.

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

Выглядит это счастье как-то так: https://codepen.io/alinaki/pen/vYbREJZ?editors=0010

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

Для этого в момент клика на странице стартует пустой mp3-файл (обратите внимание на его размер), а потом просто через таймаут src звукового объекта подменяется на нужный (как в попапах; если кто не в курсе, могу рассказать).

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

Upd. Как минимум на моем телефоне все работает! iOS 17.0.3 Напишите в комментариях, у кого как, пожалуйста. Точно знаю, что на 17.0 не пашет.

А свелось всё к тому, что в iOS 17 всё сломано. Вот issue на тему: https://bugs.webkit.org/show_bug.cgi?id=261414

Помечено как исправленное, но ещё не доехало до всех устройств.

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

В общем, Apple как обычно, да. Грустно.

P. S. Нет, примеры Howler.js тоже не работают в данный момент.

P. P. S. Блин, стоило написать пост и всё заработало. Чатом клянусь, вчера не работало!

#ios #sound #safari

#фишка дня

Да-да, на дворе 2023 год и JavaScript в браузерах включён по-умолчанию.

Вот только байки про параноиков в вязаных и не очень свитерах — вовсе и не байки. Зайдите на LOR.

Потому нормальной для многих практикой было и остаётся добавление класса no-js на body и его удаление во время исполнения скриптов.

Тем более странно, что указаный на картинке медиазапрос @media (noscripting: enabled) появился только сейчас.

Поддерживается в Chrome 120+, Firefox 117+ и Safari 17+.

Маловато, конечно, но пусть будет.

#css #js #media #paranoid

#codepen дня

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

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

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

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

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

#css #noscript #filter

#заметка дня

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

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

В сериале Яндекса YaC 2023 рассказали, о создании профессии AI-тренера и взяли в штат уже 300 сотрудников с междисциплинарными скиллами в разных областях для обучения своей YandexGPT.

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

Звучит неплохо, настрой прямо-таки боевой, вероятно, в будущем увидим YandexGPT и в других сервисах.

#статья дня

CSS Grid... с чего бы начать. Наверное с того, что это безумно просто и безумно сложно одновременно.

Кто-то пришёл в вёрстку когда гриды уже вовсю были в ходу, для кого-то гриды до сих пор означают flex-колонки из Bootstrap aka grid system и ничего другого знать не хочет. Или не может.

Я уже молчу о том, сколько изменений стандарта они пережили...

Потому я постоянно слежу за новыми обучающими инструментами и статьями и приношу их вам. И сегодня — очередной бриллиант от Джоша Камю.

Встречайте интерактивное руководство по CSS Grid: https://www.joshwcomeau.com/css/interactive-guide-to-grid/

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

С красивыми иллюстрациями, конечно же.

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

#css #grid #tool

#codepen дня

Какой самый приятный момент ведения канала по веб-разработке? inb4 Когда заказывают рекламу

Конечно же когда кто-то из подписчиков присылает свои измышления и эксперименты! Как будто у нас тут с вами настоящее сообщество!

Итак, сегодня — очередная вариация на тему из игры World of Goo. Жидкие перекаты 🙂

Предыдущий пост был вот: https://news.1rj.ru/str/htmlshit/1867

Основан эффект на размытии и последующем повышении контраста до уровней, когда края снова становятся чёткими.

Итак, встречайте: https://codepen.io/mdss/pen/qBLZeya?editors=1100

Автор честно признаётся, что анимация украдена с https://maps.mel.fm/ Вот только у них там SVG. Пример с SVG можете увидеть по ссылке на чат или на сайте.

В общем, вдохновлять людей — приятно. Рекомендую!

P. S. Кто на айфоне починит?

#css #goo #filter #noscript #бородач

#фишка дня

Как сделать описания проектов на GitHub более явными и привлечь внимание читателя там, где это необходимо?

Использовать кастомные цитаты!

Пример: https://github.com/HTMLShit/htmlshit.github.io/blob/master/demo.md

Доступные типы: NOTE, TIP, IMPORTANT, WARNING, CAUTION.

Очевидно, это доступно и в управлении проектами на гитхабе. Для небольших задач — очень хорошо, не нужно переходить в Trello.

Пример синтаксиса:

> [!NOTE]
> Заметка о выпуске

Да, к слову, кто не знает, что за Markdown такой, вот: https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax

Я ссылаюсь на вариант от GitHub, потому что он самый популярный. В комментариях есть ссылка на вариант от GitLab.

А вот, собственно, где это нововведение обсуждалось: https://github.com/orgs/community/discussions/16925

Как вам кастомный маркдаун, котаны? Заходит?

#github #md #note

#шок дня

Мы уже видели предложение работы в консоли браузера. Баннеры вида

<noscript>
  alert("We're hiring");
</noscript>

...тоже встречаются сплошь и рядом.

Но такого ещё не было, на видео: огромный во всё здание размером светодиодный экран конференции YaTalks, который показывает свой же код.

Среди основных тем конференции: нейросети — Яндекс в последнее время очень активно их развивает — и opensource.

Интересно, сколько людей в принципе впервые увидели код?

#life

#такое дня

Очень интересно наблюдать за тем, как люди переоткрывают для себя старые Web API. Только с другой стороны.

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

Был. Но, скажем так, интрузивный 🙂 Сейчас поясню.

Вот пронеслась ураганом демка, на которой 3D-сцена делится на два окна и эти окна взаимодействуют между собой: https://twitter.com/_nonfigurativ_/status/1727657155409363120

Автор пока не дал исходников самой модельки, только демо попроще: https://bgstaal.github.io/multipleWindow3dScene/

Но работает это взаимодействие на API из начала нулевых: window.screenX и, соответственно, screenY (и их алиасы: screenLeft и screenTop; потому что IE).

Ну, то есть, буквально доступно в любом браузере вообще. И давно.

Так что давайте повторим! Не без помощи мэтра Wes Bos, конечно. Он не дал ссылку на демо, потому пришлось немного постараться уже мне и собрать пример: https://htmlshit.github.io/webcam/dist/

Открывайте, разрешайте доступ к камере и увидите примерно ту же картину, что и на моём видео к посту.

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

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

P. S. Перезалил видео. Я не ожидал, что телега оригинал зальёт.

#webcam #localstorage #fun

#ссылка дня

«Что происходит когда ты набираешь google.com в адресной строке браузера и жмёшь ввод?»

Да, котаны, вы угадали: это довольно популярный вопрос на собеседованиях.

Если у тебя его не спрашивали, значит, предполагается, что ты знаешь ответ.

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

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

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

Вот: https://github.com/alex/what-happens-when

Официального перевода на русский нет, но есть PR: https://github.com/alex/what-happens-when/pull/1462/files

Как вы думаете, котаны, имеет ли смысл в 2023 году вообще такое спрашивать? Должен ли условный фронт это понимать?

#web #interview

#фишка дня

Сейчас в 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

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

С места в карьер: утилита qnm предназначена для поиска установленных пакетов в node_modules. Зачем?

Ну, как минимум, это офигенно быстрый способ просмотреть версии всех установленных лично и не очень лично модулей: https://github.com/ranyitz/qnm

Почему ремарка про "не очень лично"? Потому что какой-либо пакет может запросто тянуть за собой более старую или более новую версию некой утилиты, на которую вы так сильно опирались.

Почему-то меня в этом отношении очень раздражает emotion. Его тащат просто куда ни попадя, а у людей потом на CSS-in-JS аллергия...

Так или иначе, посмотреть, почему тот или иной модуль был установлен — это очень полезно.

Моя рекомендация!

#npm #node #package #бородач

#автор дня

Олды помнят, что я пытался ввести эту рубрику, но как-то подзабил.

И это при том, что инфлюенсеров в мире фронтенда (ну так уж повелось, что канал больше об этом) не так уж и много на самом деле. Впрочем, потому и упоминаются достаточно часто.

Тем не менее, некоторые из них достойны отдельного поста. И сегодня — Ана Тюдор (Ana Tudor).

Она, кстати, не Анна, она — Анастасия, если уж полное имя рассматривать.

Чем известна? О, ну тут вопрос, с чего бы начать. По-моему, самой популярной её работой является коллекция "ползунков" — виджетов для ввода диапазонов, CodePen. Все на базе нативных полей, с минимумом JS. Бери и пользуйся.

Так же раньше она очень много писала для ресурса CSS Tricks, но сейчас больше фокусируется на демо для YouTube-канала.

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

А уровень её использования CSS-переменных вообще где-то за гранью.

Ну и недавняя простая, но эффектная демка с анимированным градиентным текстом — тоже её.

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

#css #art #author

#баг дня

Сегодня Google опрокинул миллионы пользователей расширений Google Sheets.

Для многих станет сюрпризом, но этот рынок огромен: аналитика, SEO, рассылки, бюджет, ведение рекламных кампаний, анализ опросов из Google Forms... всё там.

Только у нашего расширения — под миллион установок, например.

Так вот, когда-то давно в Chrome 83 появилась очередная директива Content-Security Policy (CSP): Trusted Types.

MDN: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/trusted-types

Web.Dev: https://web.dev/articles/trusted-types

Когда она включена, любую загрузку скриптов надо предварительно одобрить. Любое изменение innerHTML и документа вообще — тоже.

Звучит разумно? Давайте дальше.

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

И сегодня в Google Sheets появился заголовок, включающий директиву, а код настройки — нет.

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

Ах да, директива учитывается только в Chrome 🤡

Баг-трекер: https://issuetracker.google.com/issues/313466551

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

А решение, собственно, заключается в минимальной настройке директивы.

Это то, что должны были сделать разработчики Google Sheets:

<noscript>
  if (window.trustedTypes && window.trustedTypes.createPolicy) {
    window.trustedTypes.createPolicy('default', {
      createHTML: string => string,
      createScriptURL: string => string,
      createScript: string => string,
    });
  }
</noscript>

В общем, день был насыщенный.

P. S. По состоянию на 23:00 EET, Google откатывают изменения.

#google #sheets #workspace #bug

#фишка дня

Кричащий банан 🍌 (да-да) принёс шикарную фишку TypeScript: как типизировать ключ объекта без каста.

Решение: заранее объявите тип переменной перебора как keyof typeof. Всё, вы великолепны.

Пруф на TS Playground.

#typenoscript #cast

#статья дня

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

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

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

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

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

#web #audio #grid #music #бородач

#опрос дня

Какой тип получит Entity?

#заметка дня

Итак, объяснение результатов опроса выше. Поехали.

Пока я думал, как написать, и искал время, в комментариях к опросу уже всё сделали. Аж дважды. И даже обняться успели.

Потому, буквально, цитата:

1) Что такое тип Omit? А вот что:

type Omit<T, K extends string | number | symbol> = { [P in Exclude<keyof T, K>]: T[P]; }

2) Видим, что там есть Exclude<keyof T, K>. Пока все безобидно, куда же делись наши поля?

3) Обращаем внимание на keyof T. Эта конструкция возвращает все ключи, что есть у объекта и к которым можно обращаться без ошибки (!).

И именно здесь отсекаются все поля, которых нет во всех наших типах объединенных через символ | (Union) потому что мы не можем обращаться к полям "price" и "name" без доп. проверок (type guards)

Автор комментария не против, если что 🙂

А для всех заинтересованных, вот ссылка на TS Playground.

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

Давайте честно, процесс сборки откровенно раздражает.

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

Вот только с тем же кодом на React (да и не только, JSX сейчас много где) так не получится.

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

К счастью, есть некое решение! И это решение — https://esm.sh/

Это автоматический сборщик и хостинг модулей на Deno в одном флаконе, если уж совсем грубо.

И вот недавно они релизнули новую часть проекта — поддержка кода, задекларированного в тегах noscript. Кривовато написал...

Давайте я сразу покажу пример: https://codepen.io/alinaki/pen/NWoERwW

Что тут происходит?

1. Запихиваю приложение в <noscript>, указывая тип text/babel (так повелось, что тогда VS Code его подсветит).

Тип такой нужен, чтобы браузер исполнять не полез.

2. Чуть выше импортирую скрипт для «сборки» (какая ирония): https://esm.sh/run

3. ...

4. Работает!

5. В примере я объявил importmap чтобы писать названия модулей так, будто у меня есть package.json. Но esm и просто ссылки поддерживает, дублируя npm и обогащая своими плюшками.

Штука забавная, на самом деле. Можно хостить самому, не опираясь на CDN.

Изначально я пробовал другой их продукт, build. Он собирает модули на лету, весьма удобно, рекомендую. Правда, немного задолбался с тем, что среда требует чёткого указания MIME-типа файла, а GitHub Pages отдают jsx как text/jsx и так далее. И настроить нельзя :( Так что для такого проекта надо брать полновесный хостинг.

Так или иначе, оно завелось! Для демок точно прекрасно, для кода, требующего ремонт на лету — тоже, вполне.

#js #module #esm

#codepen дня

Как понять режимы смешивания (блендинга, mix-blend-mode) в CSS?

Можно, конечно, обмазаться математикой и сидеть дёргать ручки в DevTools, а можно открыть сегодняшний кодпен: https://codepen.io/jh3y/pen/OJXrVME

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

Если кому интересно, что это за интерфейс управления такой — это dat.GUI: https://github.com/dataarts/dat.gui

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

#mix #blend #css #бородач