#заметка дня

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

Ну вот ещё, нет, конечно. Месяц выдался тяжёлым, но 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

#заметка дня

Пожалуйста, прекратите засорять глобальное пространство имён утилитами из npm/yarn.

Это я о чём:


$ npm i -g gulp
…bla-bla-bla
$ gulp


Не надо! Даже если документация говорит вам это сделать. Или, ещё хуже, рандомный ютубер или блогер.

Используйте для ваших локальных задач npm-скрипты:


$ npm i gulp
…create your scripts
$ npm run gulp


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

Итак, как же работают npm-скрипты?

Если вы зайдёте в каталог node_modules, со всеми пакетами, там будет вложенный каталог .bin. Но вот исполняемых файлов, бинарников, там нет. А есть т. н. символические ссылки, симлинки. А вот уже они указывают на нужный файл в каком-либо конкретном пакете.

Как они узнают, куда указывать? Всё просто: в package.json нужного пакета будет, опять же, секция bin.

Итого, если node run xxx не нашёл скрипта с нужным именем, он полезет за ним в локальное пространство имён. Не найдя приложения в локальном пространстве имён, он полезет в глобальное и запустит приложение.

Почему это полезно?

Да потому что можно держать миллион разных версий gulp/webpack/vite/далее везде и не страдать по этому поводу. Работать будет всегда и везде. А если сюда приплюсовать nvm… Но об этом потом.

Кому интересны подробности, вот вам баззворд для лучшего понимания проблемы: PATH.

Задавайте ваши ответы, котаны.

P. S. inb4 npx

#js #node #run

#фишка дня

Надоело читать это: «To push the current branch and set the remote as upstream, use
git push --set-upstream origin fix/bug-1359»?

А всё потому что git на сервере не знает ничего о ветках на вашей машине. Нужно явно указать: «Хочу создать ветку на удаленном сервере с указанным названием и связать её с локальной». Названия даже могут отличаться, но чаще всего — совпадают. Ну, у меня, во всяком случае.

Поэтому, глядите чо: https://git-scm.com/docs/git-config#Documentation/git-config.txt-pushautoSetupRemote

Ну или просто взгляните на КДПВ.

Завезли с версии 2.37.0, так что проверьте сначала. Спасибо за уточнение подписчику :)

#git #remote

#ссылка дня

Готовьтесь к большим изменениям!

…наверное.

Корчое, начиная с версии 108, Хром начнёт иначе реагировать на экранную клавиатуру: https://developer.chrome.com/blog/viewport-resize-behavior/

В чём разница, в двух словах?

Действие по умолчанию будет точно таким же, как на iOS: изменяться будет т. н. visual viewport (видимая область экрана) — то, что видно на экране в данный момент. На масштабе 100% видимая область экрана совпадает с layout viewport — область раскладки. Чтобы было проще понять, позиционированные с помощью position: fixed элементы прикрепляются к области раскладки, а не к видимой области.

Короче, суть в том, что в новом Хроме на андроид ваши зафиксированные элементы будут скрыты за клавиатурой. Как на iOS.

Но будут добавлены meta-атрибуты, чтобы это поведение изменить.

Демо-сайт, объясняющий новое поведение: https://viewport-resize-behavior.netlify.app/

#chrome #keyboard #fixed

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

Ты тоже верстать умеешь лучше, чем рисовать? Say no more!

Библиотека Satori от небезызвестной компании Vercel умеет конвертировать почти любой HTML-макет в SVG: https://github.com/vercel/satori

Зачем это надо?

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

Короче, крутая штука же.

#svg #html

#ссылка дня

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

Оно как бы и да и нет. Например, давайте представим себе на минуту средних дизайнеров сайтов и приложений.

Чаще всего они сидят в условиях, близких к идеальным. На стуле, перед большим монитором. И рисуют, не знаю, приложение для оплаты парковки. Он или она молоды и здоровы, мышка твёрдо лежит в руке. Идиллия.

Как по их представлению человек будет пользоваться приложением? Припарковался, устроился поудобнее и оплатил?

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

И так с любым проектом. Думать надо.

Собственно, вот и ссылка на сегодня: https://a11ymyths.com/ru/

Мифы о доступности на разных языках. Всем читать, котаны.

#a11y

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

Нужна карусель изображений на сайт? jQuery-плагины не катят? Swiper.js чёртов огромный монстр и уже набил оскомину? Slick.js глючный? Owl не поддерживается? Нужна интеграция с React, Vue, Svelte?

Встречайте: https://splidejs.com/

Splide написан на TypeScript. Лёгкий, быстрый, куча интеграций. Десятки примеров использования сразу на главной странице. Не портит SEO страниц. Lighthouse тоже очень даже зелёный.

Нет зависимостей и поддержка от IE10.

Просто праздник какой-то.

#slider #carousel #gallery #swiper

#ссылка дня

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

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

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

Количество Google Docs- и вики-материалов в такой работе зашкаливает. Вопросы «почему?» и «зачем?», повторяемые раз за разом… Метрики.

Отсюда интересно посмотреть, что же творится в других компаниях. И тут — на удивление — Microsoft нам такую возможность даёт. Теперь можно взглянуть на каталог explainers (сопровождающих документов, документации, расшифровывающих заметок) браузера Edge: https://github.com/MicrosoftEdge/MSEdgeExplainers

Почему что-то является проблемой? Как выявили? Почему было принято то или иное решение? Как команда объяснила себе какие-то новые концепты? Какой состав команды? И так далее.

Довольно погружающее чтиво. Особенно в разделе про DevTools, на которые разработчики Edge в принципе делают упор (да-да, я в курсе, что там тот же Chromium, но дело же в мелочах).

#docs #explainers #process

#фишка дня

Если вы любитель открывать кучу вкладок и нелюбитель использовать группы, для вас в Chrome есть прекрасное сочетание клавиш Ctrl-Shift-A или Cmd-Shift-A.

Это список вкладок с поиском! Очень удобная штука. Конечно, надо хоть немного помнить, что ты вообще открывал :)

Я просто к чему это, взглянул на экран «своего» джуна… ужас.

#chrome #feature #search

#ссылка дня

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

1. Собственно, введение в Git от GitHub: https://guides.github.com/introduction/git-handbook/

Нелишним будет напомнить, чт GitHub не создавали Git, но построили вокруг него крупнейший сервис хранения кода.

В их введении описывается, что такое вообще система контроля версий, репозитории, основы Git и GitHub (пулл-реквесты и т. д.)

2. Интерактивный сервис по изучению веток: https://learngitbranching.js.org/

Игра, практически. Красивое.

3. ProGit, второе издание: https://git-scm.com/book/en/v2

4. Книга от авторов GitTower — многим нравится иметь приложение на компьютере. Примерно то же самое, что в руководстве от GitHub: https://www.git-tower.com/learn/git/ebook/

5. Опять же, руководство от Atlassian — авторов конкурента GitHub, BitBucket: https://www.atlassian.com/git/tutorials

6. Основы от Роджера Дадлера: https://rogerdudler.github.io/git-guide/

Есть версия на русском.

7. Пошаговое руководство в основы и не только: https://gitimmersion.com/

8. Ещё одно: https://think-like-a-git.net/

9. Для любителей видеоуроков и конкретных решений: https://gitforeverybody.com/free-git-tutorials/

10. Ещё одно визуальное руководство: https://git-school.github.io/visualizing-git/

11. Ну и мой любимый универсальный сайт https://learnxinyminutes.com/docs/git/

Там не только Git, там вообще всё :)

Не переставайте учиться, котаны.

#git #linkdump

#статья дня

…я не говорю, что все поголовно вешают свои обработчики кликов на div. Но наверняка многие до сих пор используют ссылки (спасибо дизайнерам за унификацию). Или просто любой попавшийся элемент.

Не надо так.

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

1. Сбросить стили браузера
2. Унифицировать с a
3. Добавить активных состояний (:focus и :active)
4. Правильно обработать клавиатурную навигацию (:focus-visible) дабы не раздражать нежные фибры души дизайнеров, но уважать остальных людей.

В общем, к делу. Сама статья: https://fvsch.com/styling-buttons

И готовый результат (я переложу его из статьи в CodePen, добавив стили поддержки :focus-visible): https://codepen.io/alinaki/pen/LYxbvOw

#css #button #focus #focusvisible

#статья дня

Если вы до сих пор не подписаны на блог Джоша Камю и не добавили его в RSS-читалки (олды тут?), то чего вы ждёте вообще?

У него вышла, как всегда прекрасно иллюстрированная интерактивными примерами, статья о CSS Transform: https://www.joshwcomeau.com/css/transforms/

Хотели заполнить пробелы в понимании, как трансформы работают? — самое время.

Перечислять, что конкретно он там описал, нет никакого смысла. Там есть всё.

#css #transform #animation