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

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

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

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

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

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

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

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

#css #3d #gradient #бородач

#til дня

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

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

И вот эти самые обработчики событий получают доступ к this, к инстансу объекта (функции, класса). Например, Selectize.js, покажем какой-то блок над селектом:

function onDropdownClose(value: string) {
    this?.$input.parent().find(‘.alert’).html(value);
}

$(‘select’).selectize({
    hideSelected: true,
    openOnFocus: true,
    onDropdownClose,
})

Куда нас пошлёт TypeScript с этим? Правильно, в «this implicitly has any type».

А что делать-то? Как указать тип this в методе?

Всё очень просто: начиная ещё с версии 2.0 для указания типа this его нужно передать как первый аргумент в функцию. Не бойтесь, остальные implicit аргументы оно не затрёт. Итого:

function onDropdownClose(this: SelectizeInstance, value: string)

И так же с любым конструктором объектов или функцией, принимающей коллбэки как аргумент.

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

#typescript #бородач

#заметка дня

Сервис GitHub Pages известен всем. Это один из самых простых способов разместить ваш статичный и не очень сайт в сети. Особенно учитывая, что вы скорее всего на гитхабе свои проекты и держите.

Какие альтернативы помимо классических хостингов, выделенных серверов и конструкторов?

Ну, мне известно две: Netlify Drop и Cloudflare Pages (боже, как оригинально).

Drop отличается потрясающей простотой: дропнули папку с проектом и всё, отсюда и название. Ещё домен можно свой подключить.

А вариант от Cloudflare, помимо прочего, умеет в:

- интеграцию с GitHub
- пресеты для Next.js/11ty и других фреймворков
- всё обычные возможности Cloudflare для доменов
- аналитику
- разграничение доступа через feature-ветки

Запускайте свои проекты не только локально, котаны!

#pages #github #cloudflare #netlify #drop

#фишка дня

В iOS Safari есть такая фишка: при удерживании пальца на, например, ссылке появляется всплывающее окошко с её предпросмотром. Но иногда это вообще не к месту, потому надо бы найти способ отключить.

Как всегда, способ этот не очень-то стандартный. Спасибо, Apple, чо.

#safari #callout #бородач

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

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

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

Тогда я воспользовался 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 #бородач