#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

#фишка дня

Пластмассовый мир победил, XML оказался сильней…

Но почему? Неужели всё настолько плохо?

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

Но погодите, ведь любой компонент в React это просто функция?

А значит, мы можем сообразить их композицию!

const AppProvider = compose(
  UserProvider,
  ThemeProvider.
  MenusProvider,
  SupportProvider,
  ErrorProvider,
  StateProvider,
);

И получить красоту: https://codesandbox.io/s/gprovider-composition-fkn93e?file=/src/App.js

Естественно, подход по своей сути применим ко всем компонентам.

Всё есть функция, котаны.

#react #fp #context #compose

#фишка дня

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

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

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

Всё очень просто! Крис Койер пишет: «Просто добавьте #t=0.01 к урлу (в src)». Смотрим видео — работает :) Кто не понял — это просто проход по таймлайну.

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

К слову, в некоторых промо-проектах бывает весьма сподручно заменять анимации и 3D на контролируемое видео. Чтобы не происходило скачка при начале проигрывания — как раз лучше отказаться от постера и прибегнуть к технике с t.

Вот свежий и яркий пример — книга рецептов-игра: https://www.themagicalpantry.com/

Весь интерактив сделан на видео.

#video #safari #poster

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

Забавный обучающий проект посвящённый DOM Events (событиям объектной модели документа). Кликам и фокусам, короче.

Что такое target, bubble, propagation? Всё показано максимально наглядно.

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

Итак, встречайте: https://domevents.dev/

#js #dom #education

никто:
theguardian.com: я веган

...
Вот кого-то распирало, вы поглядите.

Походу, к слову, это вирусная реклама такая… Каждый же зайдёт проверить.

Меня использовали?! 🤔

#заметка дня

Часто приходится делать таблицы в GitHub Markdown? Тогда лови это знание, пригодится.

Списки и контейнеры не могут и не должны отображаться внутри таблиц, набранных "палочками" (||). Палочки — только для текстового контента, для данных. Точка.

Нужен табличный, кхрм, макет (ну список изменений там запихать) – используй HTML таблицы.

Но есть нюанс.

Чтобы правильно использовать Markdown внутри HTML-таблиц, нужно этот самый контент с двух сторон обложить переводами строки, вот так:

<td>

_markdown_ **тут**

</td>

...и будет норм.

#markdown

#прекрасное дня

Ни больше ни меньше. Прекрасное. Потому что я не могу это описать каким-то другим словом.

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

Не, я понимаю, мода на 3D-карточки в лендингах давно прошла, все эти перевороты и шевеления мышкой… Это всё прошлое десятилетие.

Но ребят, я за всю свою карьеру и представить не мог, что можно настолько точно передать эффект переливающейся металлизированной карточки настолько точно манипулируя одним только положением фона! Это какое-то безумное умение сочитать mix-blend-mode, градиенты и SVG-фильтры.

Вам срочно надо зайти и посмотреть самим: https://deck-24abcd.netlify.app/

Ну и гитхаб, конечно: https://github.com/simeydotme/pokemon-cards-css

Крышу сносит, потрясающе. И без WebGL.

#css #3d #gradient

#книга дня

Какой материал подъехал, вы не поверите!

https://www.patterns.dev/

Бесплатная, прекрасно иллюстрированная и снабжённая подробными примерами книга о паттернах проектирования и их применении в React-приложениях.

Просто огонь 🔥

Если кто не понял — книга бесплатная. Сумму оплаты можно выбрать на LeanPub, а можно в ноль.

#book #react #js #patterns

#событие дня

35.

#заметка дня

Вы думали, я забыл про своё приложение-пульт для телевизора?

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

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

На помощь придут протоколы SSDP (Simple Service Discovery Protocol) и UPnP (Universal Plug-n-Play). Вот с SSDP сегодня и начнём.

SSDP предназначен для быстрого поиска устройств и предоставляемых ими протоколов управления по сети. Чаще всего при обнаружении устройства можно получить ссылку на XML-файл с описанием нужного API.

Каждое устройство, поддерживающее SSDP, держит открытым порт 1900 и откликается на особым образом составленный запрос.

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

Вот пример кода для Node.js: https://gist.github.com/bekharsky/3e6fd2dd265b89817d5f08ff21f3f544

Я его честно взял из реализации подобного сервиса для React Native, поскольку нашей целью не является хакинг всего протокола телевизора.

Если вы возьмёте пример и бездумно запустите сразу — вряд ли что получите, поисковая строка там заточена под телевизоры Samsung. Но вы можете послать запрос ssdp:all, который выдаст вам список всех устройств и сервисов в вашей сети. Попробуйте, это забавно. Откроете для себя много нового :) Например, что ваш роутер умнее, чем кажется.

Собственно, меня, как вы уже поняли если открыли код, волнует сервис RemoteControlReceiver. О том, что это такое и как с ним поступить — в следующих постах.

А моя задача пока переписать JS-код на Dart под Flutter и вывести список телевизоров в настройках.

До связи, котаны.

#tv #remote #protocol #ssdp

#codepen дня

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

Давайте исправим положение и сделаем что-то насущное.

Например, сымитируем табло в аэропорту… С его задержками смены линий при смене языка.

Поехали: https://codepen.io/alinaki/pen/ZEaOdKq

Заодно использована интересная фишка CSS Grid: наложить две ячейки друг на друга без абсолюта.

#css #grid #animation #scss

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

Кто-нибудь ещё считает, что подсказки и ошибки TypeScript страшно раздражают своей формальностью?

Say no more!

Появилось расширение, переводящее их на человеческий (ну… английский) язык!

КДПВ говорит сама за себя, а пока дам ссылку: https://marketplace.visualstudio.com/items?itemName=mattpocock.ts-error-translator

Ну и песочница, чтоб побаловаться и понять: https://ts-error-translator.vercel.app/

Отправьте ей свою ошибку и давайте посмотрим на результат.

P. S. а ошибки типов Styled Components оно переведёт, как считаете?

#vscode #ts #typescript

#ссылка дня

Даже несколько. Тема дня — доменная зона .new. Как бы ни было неожиданно, но, переходя по следующим ссылкам, вы создаёте:

pen.new — песочницу в CodePen
gist.new — GitHub Gist
repo.new — репозиторий на GitHub
react.new — React-песочницу в CodeSandBox

...ну и всем давно известные:

docs.new — документ Google Docs
sheets.new — таблицу в Google Sheets

О, я тут нашёл целый их awesome-список: https://github.com/yjose/awesome-new

P. S. Если вам не знакома концепция awesome-списков, это просто тематические сборники интересных репозиториев или просто ссылок, общее их название.

#new #github #codepen #sandbox

#статья дня

Есть у деврелов команды Google Chrome всякие разные традиции. Я за ними слежу постольку-поскольку, но о Designcember я точно писал.

И вот сейчас у них был Chrometober, результатом которого стала перелистываемая по скроллу книжка: https://web.dev/chrometober-2022/

О современном состоянии анимаций по скроллу я писал не так давно, даже пример делал на старом и новом подходе, вот:
раз: https://t.iss.one/htmlshit/614
два: https://t.iss.one/htmlshit/621

Правда, пора бы мне примеры обновить. Уж очень новая спецификация хрупкая, полифиллы-то закрывают старую реализацию… Например, оно теперь называется ViewTimeline. Короче, пора обновлять.

Но, собственно, статья от гугла: https://web.dev/building-chrometober/

Куча примеров, прототипов, чертежей — описан весь процесс целиком, как я люблю.

#css #js #scroll

#ссылка дня

Хотите флагов? Их есть у меня!

https://flagpack.xyz/

Больше 250 флагов в комплекте с исходниками в Figma, Sketch и Adobe XD. Ну и, понятное дело, компоненты для React, Vue и Svelte.

Присутствуют забавные модификаторы в виде градиентов, если основного стиля недостаточно.

Лицензированы по MIT.

#flags #icons #design

#статья дня

Вы когда-нибудь задумывались, что же делает шрифты приятным для чтения? Конкретно — кириллические шрифты?

А вот Александра Королькова точно задумывалась. И это неудивительно, она же автор «Живой типографики». Кстати, книга эта официально в бесплатном доступе: https://t.iss.one/htmlshit/955

Так вот. Статья на сайте небезызвестных Паратайп так и называется: «Как разобраться в кириллице».

Конструкция букв, курсивы и наклонные шрифты, кернинг и распределение толщин — всё доступно и понятно.

Вот где клад для нашей жабы, котаны!

#fonts #cyrillic

#ссылка дня

Воскресных котов вам в ленту! Но просто котов вы можете найти где угодно, тут же — HTTP-коты: https://http.cat/

Знать коды протокола HTTP должен каждый веб-разработчик, чтобы не попадать в глупые ситуации и правильно пользоваться API. А раз их можно выучить, глядя на котов, почему бы и нет.

#http #handbook

#фишка дня

Селекторы атрибутов штука довольно удобная если правильно их использовать. Особенно хорошо они раскрываются с aria-атрибутами вроде aria-hidden, aria-pressed и так далее.

Да даже элементарные кнопки соцсетей весьма неплохо выглядят в виде data-social=“twitter”, чтобы не замусоривать пространство классов. Или вообще a[href*=“twitter.com”], если собрались на символах экономить.

В React строить API компонента на data-атрибутах тоже выходит весьма и весьма элегантно.

Вот только есть нюанс: селекторы атрибутов — регистрозависимы. Чтобы сделать их независимыми — стоит добавить модификатор i, то есть:

[data-social=“twitter” i]

Свалидирует

<div data-social=“Twitter”>
<div data-social=“twitter”>
<div data-social=“TWITTER”>

…ну и если хотите ровно наоборот — есть модификатор s. Но оно совсем новое и для частных случаев, которые по-умолчанию и так регистронезависимы (вроде type, checked, disabled).

#attribute #css #case

#продолжение дня

Собственно, помните, в сегодняшнем посте про атрибуты я написал, что на React они ощущаются максимально нативно и элегантно?

Ну ок, написал не так, но это в виду и имел.

Представьте жить в мире, где атрибуты были бы нормой.

И не data-бред, а любые. Не пришлось бы накидывать классы, создавать их композицию, выдумывать БЭМ, OOCSS и прочие методологии, превращающие вёрстку во что-то более-менее поддерживаемое на уровне API отдельных компонентов… Ладно, что-то я разошёлся по мотивам недавнего спора.

Короче, картинку я украл в твиттере Кричащего банана. Он норм пишет, моя рекомендация.

#attributes #css #react