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

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

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

Тогда я воспользовался https://github.com/cheeriojs/cheerio, написав простой скрипт на node.js. Это похоже на реализацию селекторов в jQuery, но для Node.js. Разобрал данные и сохранил в JSON.

Оказывается, есть и более кондовые утилиты.

Например, https://github.com/mgdm/htmlq и https://stedolan.github.io/jq

Первый, как нетрудно догадаться, может обработать HTML, а второй — JSON. И всё из командной строки :)

Например, найти все ссылки на странице:

curl --silent https://www.rust-lang.org/ | htmlq --attribute href a


Можно и просто целые куски HTML выдирать, и селекторы использовать. А дальше — все возможности командной строки и скриптов для обработки.

Ну а jq может стать частью вашей CI/CD системы, разгребсти ответы от API GitHub, например, и выдать их в читаемом виде.

#tools #html #json #cli #бородач

#codepen дня

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

Скроллишь, скроллишь себе бесконечную загрузку твитов или постов в ленте, футер появляется на секунду — и тут же снова улетает с экрана, не успев сообщить что-то важное…

Стив Гарднер попытался визуализировать происходящее, вышло офигенно, целая история: https://codepen.io/ste-vg/pen/PoQgvBK

#scroll #бородач

#ссылка дня

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

Но кто из нас не любит красивые учебники и пособия? Не, ну, может, кто-то и не любит...

Тем не менее, встречайте: React Visualized: https://react.gg/visualized

Крайне забавная штука с интерактивными элементами, объясняющая базовые и не очень принципы React, откуда появились и какие задачи решают: пропсы, стейт, эффекты, рефы, порталы.

Будет дополняться, впрочем :)

#react #reference

#заметка дня

Мобильная разработка, как ни крути, выходит ближе к железу и понимать в ней нужно чуть больше.

Да, это опять я со своим нытьём про Dart и Flutter, которое можно найти по тегу #remote. И сегодня мы поговорим о сокетах. Конкретно — WebSockets.

Вы наверняка должны были задуматься, откуда в вебсокетах приставка "веб". И ответ на самом деле простой: потому что они реализованы поверх протокола HTTP, для чего используется, очевидно, некий HTTP-клиент. В браузерах свой, в Node.js свой, в мобильных фреймворках свой.

Что из этого следует, например? Ну, что сертификаты наруливаются согласно спецификации HTTPS. И тут начинается самое интересное.

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

Вот у телевизоров Samsung сертификат самоподписанный. Вебсокеты по протоколу wss (websocket secure) работать с таким откажутся, но всё, что надо сделать в JS — передать опцию allowUnauthorized. Всё, полетели жисоны.

Что надо сделать в том же Dart/Flutter?

Перегрузить (заменить, override) библиотечный HTTP-клиент!

Вот так:

class SamsungHttpOverrides extends HttpOverrides {
  @override
  HttpClient createHttpClient(SecurityContext? context) {
    return super.createHttpClient(context)
      ..badCertificateCallback =
          (X509Certificate cert, String host, int port) => true;
  }
}

И дальше есть выбор, делать это на глобальном уровне, или передать в конструктор. В моём случае — глобально, поскольку API тоже спрятан за самоподписанным сертификатом:

HttpOverrides.global = SamsungHttpOverrides();

И такое на каждом шагу. Нельзя просто так взять и...

Может, поэтому мобильным разработчикам зачастую больше платят? 🤔

#flutter #remote #dart #websocket

#ссылка дня

Периодически этот канал позиционируется ещё и как канал «личинки тимлида». За что мне регулярно прилетает в лицо: «Ты почти два года тимлид, какая ты личинка».

Какая-какая, бабочки.

Но суть-то в том, что должность официально не тимлид, а engineering manager. То есть моя задача не только и не столько быть лидером и примером для команды (кек), как заниматься управленческой деятельностью. И тут я всё ещё личинка. И в среднем EMы являются личинками года три, пока не переходят на уровень менеджеров менеджеров.

И я очень вовремя наткнулся на большое исследование руководителей разработки: https://devcrowd.ru/tl23/companies/

Средний размер команды (вы знали, что команда из 8-10 человек называется two pizza team? Безос придумал. Я не согласен 🤡), участие в комьюнити, развитие, технические скиллы, карьера, где тимлиды черпают знания, лидеры мнений, гендерный дисбаланс и так далее. Очень много и очень подробно.

Сижу вот, изучаю...

#teamlead #em #m6

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

Пока мы тут эмодзи вместо курсора учились делать — https://t.iss.one/htmlshit/1861 — небезызвестный Wes Bos запилил целый стартап на тему. Я не шучу, там буквально на главной так написано: https://fav.farm/

В чём суть? Передаёте ссылку вида https://fav.farm/🤡 и получаете фавиконку для вашего сайта. Ну или курсор. Как получаете? В посте выше написано, как.

Но это не было бы так интересно, если бы не одно «но»: Safari не поддерживает SVG в фавиконках. Так что же делать?

Wes придумал запилить на Deno.js скрипт, который генерирует PNG из эмодзи, выдёргивая его из шрифта...

...а чтобы стало веселее — дёргает он их из шрифта от Samsung. А, как вы знаете, эмодзи на самсунгах максимально убогие 😈

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

#emoji #favicon #deno

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

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

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

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

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

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

#slider #carousel #gallery #swiper #бородач

#нытьё дня

Итак, тема нытья сегодня: "Почему разработчики ОС с таким упорством вставляют палки в колёса переключателям языков ввода?".

Поясню, что я имею в виду. Начнём с Windows 11.

Мой личный ноутбук — ThinkPad с финской клавиатурой. При установке Windows я указал Eng (US) и Ru (Ru) раскладки клавиатуры, а ОС...

...подсунула мне финскую раскладку для британского английского! Неудаляемую!

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

Кто просил это делать изначально? Вопрос риторический.

Теперь Linux. Конкретно — версии с GNOME.

Баг, повествующий о потере фокуса с поля ввода при переключении языка висит в трекере уже много лет. А точнее — 10. Да, он помечен как просроченный, но проблема-то никуда не делась. И важность "Low" или "Medium". Ну то есть разработчикам похер. А ты, тем временем, чтобы переименовать папку или ввести поле тянулся каждый раз не только переключить язык, но и поставить фокус на место.

Плюс, если у тебя Alt-Shift, во многих приложениях начинали срабатывать индикаторы горячих клавиш (VS Code, например), что тоже сбивало фокус если ты использовал для переключения раскладки не штатную шину GNOME, а что-то стороннее или просто настроил в Tweak Tools.

Теперь перейдём к macOS, которая тоже умудрилась насолить.

На ноутбуках и клавиатурах года так с 2021 есть клавиша с символом глобуса. Как нетрудно догадаться, она переключает раскладку. Но:

1. Кнопка на внешней клавиатуре раньше не работала с ноутбуками, у которых такой кнопки нет (2019 год, например).
2. ОС показывает всплывающее окно, что вызывает задержку переключения до двух секунд
3. Но этого окошку было мало и пару версий macOS назад если курсор мыши находился в месте, где появляется окошко — автоматически выбиралась раскладка, попадающая под курсор. Гениально.

Ну с этим бороться было просто, хоть и смешно:
1. Включаем переключение языка через CapsLock
2. Переназначаем Fn-клавишу на CapsLock
3. CapsLock лично я переназначаю на всех своих машинах на Cmd (mac) или Ctrl (Win, Lin). Потому что я не пианист.

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

P. S. многие проблемы решает однозначное переключение языка кастомным хоткеем сразу на нужный.

#macos #windows #linux

#фишка дня

Я надеюсь, вас не смутит, что я сюда теперь буду иногда скидывать заметки для Windows PowerShell. Просто у меня очередной приступ усталости от Linux на десктопе, так что на личный ноутбук вернул Windows 11. Не знаю, надолго ли.

Вернул — потому что OEM. Не суть.

Так вот. Если вы ставите различные утилиты для разработки, от Git, Node.js через Volta до Android и Flutter SDK, вам нужно постоянно обновлять пути в переменной среды — Env — и перезаходить в консоль, чтобы утилиты стали доступны к исполнению.

Ну если вы не лох какой и пользуетесь консолью, конечно.

Так вот, первое, что меня убило — недостаточно просто запустить новую вкладку в Windows Terminal, как я бы сделал в любом эмуляторе терминала в macOS и Linux. Надо перезапускать всё приложение. Мерзость.

Чтобы этого избежать, нужно выполнить следующую команду: $Env:Path = [System.Environment]::GetEnvironmentVariable("Path","Machine") .

И всё встаёт на свои места.

#windows #powershell

#расширение дня

Ну что, пришло время поговорить о серьезных вещах!

А что может быть серьезнее ошибок TypeScript? Правильно, ничего. Уж слишком они формальные. И мы на самом деле уже с вами обсуждали расширение, переводящее их в человеческий вид: https://t.iss.one/htmlshit/1601

И вот есть ещё одно, стремительно набирающее популярность: https://github.com/yoavbls/pretty-ts-errors

Ссылка на VS Code store: https://marketplace.visualstudio.com/items?itemName=yoavbls.pretty-ts-errors

Работает с Node и Deno, React и Vue, Solid и Qwik. Далее везде, в общем.

Пробуем, рассказываем о результатах.

Прокачивайте скиллы, котаны.

#typescript #ts #vscode

#баг дня

input size=“1” в Firefox слишком широкий. Логика подсказывает нам, что он должен так-то быть в один символ шириной.

Песочница: https://jsbin.com/zavefac/edit?output

Багтрекер: https://bugzilla.mozilla.org/show_bug.cgi?id=1782385

С комментария в приложенном куске кода я в целом в голос прорал: «To better match IE»…

Вот и он, кстати: https://searchfox.org/mozilla-central/rev/92e8568bbe7c8bf64f7a8ee958291877d960d7d8/layout/forms/nsTextControlFrame.cpp#209-232

Вроде как для моноширинных шрифтов все отрабатывает как надо. Но что-то пошло не так.

#firefox #bug #бородач

#расширение дня

Как тестировать свои (и чужие, ну мало ли какие у вас увлечения) проекты на валидацию всякой дряни?

Очевидный ответ — вводить в поля всякую дрянь.

А где её брать? Не в каждой голове столько всего удержится...

Есть решение: расширения для Chrome под названием Bug Magnet.

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

Тестируйте проекты тщательно, котаны.

#test #extension #chrome

#codepen дня

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

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

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

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

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

#css #grid #animation #scss #бородач

#статья дня

До сих пор не умеешь пользоваться терминалом? Или не знаешь, зачем это вообще фронтендеру?

Джош Камю с большой статьей о том, зачем фронтенд-разработчику уметь пользоваться консолью: https://www.joshwcomeau.com/javascript/terminal-for-js-devs/

Отличное руководство для начинающего, надо сказать. Даже . и .. объяснены :)

#cmd #terminal #бородач

#статья дня

Начиная с iOS и iPadOS 16.4, ваши PWA-приложения могут не только принимать пуши, но и отображать число уведомлений на своей иконке.

Это про Progressive Web App, почему-то в русском языке всё время хочется прибавить слово "приложения", как в CD-диск — "диск".

API максимально простой, всё, что требуется — одобрение от пользователя, а дальше можно установить Service Worker для проверки push-уведомлений и поехали.

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

Ну и, собственно, статья от разработчиков WebKit обо всём об этом: https://webkit.org/blog/14112/badging-for-home-screen-web-apps/

#ios #push

#статья дня

Точнее, целый лонгрид дня. А точнее, целых три. Ну, так получилось.

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

Я наткнулся на этот лонгрид Данилы Ковчия несколько лет назад, но периодически перечитываю. Материал просто огромный и, честно говоря, пытается покрыть всё разом. Этого бы хватило на несколько статей, уже не говоря о том, что его можно разобрать на посты и цитаты.

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

На vc.ru выходил переработанный материал в двух главах, возможно, так будет удобнее: раз и два.

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

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

#design #ui #widgets

#видео дня

Что приходит в голову при упоминании сложных анимаций?

Ну, Lottie, очевидно. Кто-то что-то нарисовал в After Effects Bodymovin, потом это экспортировали в специально сформированный JSON и, собственно, плеером-плагином запустили в огромном количестве сред, от веба до мобил и десктопов. Да, ваши любимые стикеры и реакции в Telegram тоже Lottie.

Есть ли альтернативы? Конечно! Например, активно набирает обороты Rive. Это векторный редактор, заточенный специально под анимации.

Формат гораздо легче, чем у Lottie, а список поддерживаемых платформ (рантаймов) даже больше. Да, на стороне Lottie сообщество After Effects, но и это решаемо экспортом. Имеется и сайт сообщества со свободно скачиваемыми анимациями.

Ладно, к чему это я. Вот видеоурок по интеграции Rive-анимации в React-приложение: https://youtu.be/5hvhOb9zLeg

Анимация простая, но попробуйте скачать что-нибудь с сайта сообщества и попробовать сами :)

Удачи в анимировании, котаны!

#rive #инструмент #tool #lottie #animation

#ссылка дня

Олды тут?

Когда я начал официальную рабочую карьеру как верстальщик, в 2006 году, не было в интернете ресурса круче по CSS чем https://cssplay.co.uk/

И что-то мне подсказывает, что и нет.

Автору уже тогда было под 60, сейчас 74, но он фигачил и фигачит потрясающе сложные и при этом простые для понимания примеры вёрстки.

В 2009 году, например, в моде были выпадающие мега-меню, у него десятки их примеров. Естественно, без хаков для IE6 тогда не обходилось вообще ничего. Before, after? Забудьте. Flex? Забудьте. Float во все поля.

Коллекция меню поражает воображение. И до сих пор обновляется!

Раскладки на любой вкус и браузер. Всё категоризировано. Тоже обновляется!

Ну и он один из первопроходцев игр на CSS: https://www.cssplay.co.uk/menu/cssplay-whack-a-rat.html

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

Не старейте, котаны.

#бородач