#событие дня

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

#заметка дня

Пожалуйста, прекратите засорять глобальное пространство имён утилитами из 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