#статья дня

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 #бородач

#заметка дня

Хочу сказать пару слов про файлы-реэкспорты aka index.js. В англоязычном сегменте разработчиков их ещё бочками зовут — barrels. Кори Хауз сегодня в тви напомнил :)

Задачи бочки просты:
✅ Сократить путь импорта
✅ Дать возможность импортировать несколько модулей из одного места
✅ Предоставить некий публичный контракт.

Мол, если вы используете что-то не задекларированное в index.js — сами себе злобные буратины.

Вот только минусов-то побольше будет:
🚫 Раздувает бандл, ведь тришейкинг становится невозможным
🚫 Потребление памяти тоже возрастает, обработать-то файл надо
🚫 Замедляет сборку
🚫 Мешает навигации по коду, когда опция "перейти к определению" кидает тебя в реэкспорт.

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

Вот правило для ESLint чтобы найти у себя это в коде и больше так не делать: https://github.com/christianvuerings/eslint-plugin-no-re-export, там же есть и побольше информации.

А у вас дела как, котаны?

#js #ts #module

#такое дня

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

Котаны, языку JavaScript сегодня исполнилось 28 лет!

4 декабря 1995 года после фееричных 10 дней разработки Брендан Эйх представил компании Netscape язык LiveScript, предназначавшийся для встраивания в их всё ещё свежий и самый популярный в мире браузер.

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

Продавать это всё равно решили как простое решение для добавления интерактива на веб-страницы используя ваши существующие ресурсы в виде программистов на Java.

В итоге, JavaScript прошёл все круги издевательств, особенно от Microsoft. Был стандартизирован как EcmaScript, а году так в 2008 его даже называли СНЯП: Самый Недооценённый Язык Программирования.

Ну в 2023 году мы с вами точно можем сказать, что если кого и недооценили — то это точно не JS.

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

#js #jnoscript #ecmanoscript

#заметка дня

Cегодня буду краток. Стал забывать, что у многих +1 час к моему времени.

Я часто вижу в профильных чатах вопросы типа: «Помогите, истерика, текст не занимает всю ширину контейнера и мой флексбокс не работает!»

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

Ладно бы только начинающие такое спрашивали, но нет же. У всех дыры и паника, паника и дыры.

А суть в том, что рендер текста — это сложно. Рендер длинных слов — это очень сложно.

Потому браузер всегда выделяет для текста максимально возможную ширину. Неважно, ограничили ли вы её условиями флексбокса или установили max-width. Возьмёт всё и начнёт упихивать буквы и слова. Как сможет.

Пример расчётов можно посмотреть в серии статей Инлайновый контекст форматирования, раздел «Горизонтальное выравнивание».

Подсказка: он не сможет. И выделенное место не вернет.

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

Единственно, кажущееся разумным, решение — это заполнить всю предоставленную ширину, используя переносы (словарь или &shy;). Ну или word-break: break-all;

Есть ещё не очень разумные решения с использованием JavaScript для подсчета реально занимаемой ширины.

Вот три примера: https://codepen.io/alinaki/pen/ExrGRwL?editors=1100

Не паникуйте, ну.

#css #flex #render

#фишка дня

Один из моих любимых вопросов на собеседованиях был про поведение Array.prototype.sort().

Вы не представляете какое количество людей просто не задумывается о том, что sort — мутирующий метод, то есть он возвращает не новый массив, а ссылку на изменённый текущий.

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

Так вот, к чему это я. С выходом Firefox 115 в июле этого года мы получили иммутабельные методы работы с массивами во всех браузерах:
.toReversed()
.toSorted()
.toSpliced()
.with()

Если что, with — это про замену элементов по индексам.

Есть и полифиллы на core-js, так что без работы никто не останется.

И это прекрасно.

#js #array #sort #бородач