#фишка дня

Одна из знаменитых проблем Safari на iOS — это утечка скролла. Условно говоря, показали вы модалку, скроллите её — а фон тоже скроллится. В Safari 16, впрочем, проблема была решена.

Тем не менее, модалками и overflow: hidden поведением проблемы со скроллом в разных браузерах не ограничиваются.

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

Я устал придумывать синонимы слову скроллить.

Так вот, уже достаточно давно существует свойство overscroll-behavior. Оно позволяет не только запретить цепочку событий прокрутки, но и отменить пограничные эффекты!

MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior

Демо: https://mdn.github.io/css-examples/overscroll-behavior/

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

Ах да, Safari... как обычно, поддержка только-только появилась, с 16 версии. До того приходилось мучаться.

В любом случае, свойство очень удобное, пользуемся.

#css #scroll #overscroll

#такое дня

Можно я немного побуду душным?

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

Это, конечно, не уровень Max Howell, создателя Homebrew (самого популярного менеджера пакетов на macOS, используемого всеми разработчиками), но всё же. Напомню, он был отвергнут Гуглом за незнание структур данных.

В случае с Дэном многие пишут, что он «создатель реакта» и строят на этом панчи. Ну нет же, котаны.

Он один из разработчиков, а по большей части — лицо проекта, евангелист.

Ден Наше всё Абрамов. Кроме шуток, вы наверняка такое видели.

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

Ну и, понятное дело, его не приняли в VK тогда, когда он не был ни тем, ни другим.

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

#meme #debunk

#заметка дня

В чат прилетел вопрос: "Как добавить иконку в поле ввода так, чтобы она была видна только когда виден плейсхолдер и исчезла при вводе текста?"

Отвечаем: конечно же добавить её в контейнер label, а потом использовать псевдо-класс :placeholder-shown на поле ввода!

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

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

И, конечно, пример:
https://codepen.io/alinaki/pen/xxMpgLK?editors=1100

Там заодно используются SVG-спрайты, потому что мне лениво подключать профессиональный аккаунт на кодпене и грузить туда картинки. Так что заодно можно посмотреть, как работать со спрайтами. Пригодится!

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

#css #placeholder #svg #sprite

#ссылка дня

Не так давно я обновил логотип канала, до того момента это был символ пустого фрагмента, </>, выражаясь языком React.js, на фоне логотипов кучи Веб-технологий, с которыми я работал.

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

Так вот, я это к чему. Когда это всё происходило, не было ресурса https://icones.js.org/

По его названию можно было бы подумать, что там одни только иконки. Но нет!

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

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

Но вот вам, котаны, берите и пользуйтесь 🙂

#icons #logos #emoji #flags #бородач

#шок дня

TL;DR: Идем на https://makereal.tldraw.com/, вставляем ключ GPT4, рисуем интерфейс с описанием и нажимаем кнопку Make Real.

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

Просто как-то скучно всё выглядело.

Но тут уже два дня интернет разрывает от работы Стива Руиза, автора офигенной совместной рисовалки диаграмм tldraw: https://tldraw.com/

И называется она Make Real: https://tldraw.substack.com/p/make-real-the-story-so-far?r=1vezzj

Если у вас есть ключ OpenAI GPT4 — вот ссылка на демо: https://makereal.tldraw.com/

Рисуем интерфейс и, например, схему состояний конечного автомата (state machine, проще говоря, схему состояний приложения и его реакцию на внешние действия). Дополняем описанием, группируем и нажимаем кнопку Make Real.

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

Это выглядит как волшебство. Работает на GPT-4V aka Vision Model. Особый кайф придает стиль взаимодействия с нейросетью — через холст. В три миллиона раз более наглядно, чем чат или любой конструктор. Повторю: результат работы возвращается на холст в виде рабочего приложения и превращается в часть диаграммы. Это пушка.

Если ключа нет — очень рекомендую хотя бы прочитать статью выше и посмотреть примеры.

Лень и это? Ну хотя бы на твиттер тогда зайдите: https://twitter.com/tldraw, примеров уже десятки!

Это потрясающее путешествие. Прототипы выйдут на новый уровень. Ждём подобное в Figma? :)

#ai #tldraw #future #prototype

#codepen дня

Давно собирался написать игру по Гарри Поттеру, но не знал, как?

Не расстраивайся, я принёс решение! Steve Gardner и его прекрасное создание Spell Caster!

Вот: https://codepen.io/ste-vg/full/zYerxoR

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

Из технологий — Three.js и стейт-машина Stately, позволяющая описывать состояния приложения через удобные диаграммы.

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

Я залип, в общем, как в игре, так и в её исходниках.

#webgl #threejs #game

#баг дня

В чат поступил вопрос: «Как проиграть звук в браузере на 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 (scripting: 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 #svg #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://t.iss.one/htmlshit/1867

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

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

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

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

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

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

#фишка дня

Как сделать описания проектов на 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

#шок дня

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

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

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

Но такого ещё не было, на видео: огромный во всё здание размером светодиодный экран конференции 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:

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

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

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

#google #sheets #workspace #bug