#библиотека дня

Стандартный браузерный метод fetch, даром, что встроенный, представляет собой крайне удручающее зрелище, требующее огромное количество бойлерплейта — настроек — вокруг себя. Поэтому многие до сих пор предпочитают axios, просто чтоб не связываться.

И вот мой товарищ реализовал библиотеку extended-fetch

NPM: https://www.npmjs.com/package/extended-fetch
ГитХаб: https://github.com/glebcha/extended-fetch#readme

Слово автору:

Описание хттп клиента:

- имплементация с использованием нативного fetch (в будущих версиях nodejs можно использовать)
- возможность применять middleware для изменения запроса/ответа как всех типов запросов, так и каждого отдельно
- возможность прерывать запрос по таймауту
- возможность передать signal из созданного внешнего экземпляра AbortController
- модульная архитектура (легко разобраться и доработать)
- отсутствие зависимостей
- библиотечные типы
- es-модули и umd-бандл
- небольшой размер бибилиотеки < 4 KB

Песочница:
https://codesandbox.io/s/lingering-shape-8pml00

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

#js #fetch #diy

#шпаргалка дня

Уникальное предложение!

Берёте короче эту пирамиду код-ревью и ваши пулл-реквесты станут не только вкусными, но и полезными: https://www.morling.dev/images/code_review_pyramid.svg

Такая себе пирамида Маслоу, но для обсуждения качества кода. От базовых вещей (но не опускаясь до того, что можно сделать автоматически) до того, что сделает ваш код действительно красивым.

#pr #process #work

#видео дня

Если вдруг так получилось, что вам в этот воскресный день дождливо и грустно, советую посмотреть лекцию Жени Обрезкова с детальным разбором настроек конфигурации TypeScript и typescript-eslint. Естественно, совсем не обязательно смотреть все два с половиной часа, ведь есть оглавление. Каждый пример демонстрируется в песочнице. Подойдёт всем :)

https://youtu.be/4Vc-O20llVs

#typescript #tsconfig #eslint

#фишка дня

Дежурное обновляемое напоминание о том, как выглядят хорошо продуманные изображения.

1. Альтернативный текст без очевидностей и плейсхолдеров
2. Обработчик ошибок, чтобы не оставлять человека и скринридеры в подвешенном состоянии
3. Ненавязчивый фон, чтобы дать понять посетителю, что на этом месте что-то скоро планируется
4. Указать соотношение сторон (aspect-ratio), чтобы избежать сдвига раскладки (layout shift)
5. Если поддерживаете старые браузеры или печётесь об отображении без стилей, имеет смысл установить атрибуты width и height, а в CSS — реально нужную ширину или max-width: 100%, этим вы достигнете, в целом, того же эффекта, что и при aspect-ratio. Впрочем, добавить max-width всегда полезно, гигиенично :)

inb4 не надо рассказывать мне про picture сейчас, он не всегда нужен.

#html #img #a11y

#шрифт дня

Тут Роман Шамин, арт-директор Evil Martians (Андрей Ситник оттуда же) уже достаточно давно разрабатывает открытый шрифт Martians Mono.

Роман очень много делится процессом разработки в своём твиттере: какие инструменты использовать, какие задачи приходится решать (и не только в смысле метрик). Вот, например, относительно свежий подкаст с ним в гостях: https://mobile.twitter.com/it_way_pro/status/1494616431144677376

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

Обещается, что если репозиторий шрифта наберёт тысячу звёзд, они начнут работу над кириллицей. Вот и ссылка подоспела: https://github.com/evilmartians/mono

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

Давайте поддержим Романа и марсиан, котаны. Информация от них — бесценна, наличие шрифта — тем более.

#ide #fonts

#новость дня

Я почти никогда не выкладываю новости, но эта насколько смешна, настолько же и ужасающа.

Данные миллиарда жителей Китая утекли в сеть: https://www.wsj.com/articles/vast-cache-of-chinese-police-files-offered-for-sale-in-alleged-hack-11656940488

Причем, не абы каких, а полицейских отчётов в том числе. И точность данных подтверждена.

Как так вышло?

Блогер на госслужбе выкатил технический пост на CSDN и в исходный код попали коды доступа (пароли и секреты) от базы данных. Потрясающе: https://twitter.com/cz_binance/status/1543700689611792386

Что это значит? Ну не знаю, как для вас, а для меня — быть крайне осторожным, выкладывая посты, связанные с моей деятельностью :)

#security #stupidity

Два скриншота выше относятся к посту. Телеграм всё испортил, простите :(

#библиотека дня

Мне очень нравится концепция командного интерфейса. Я даже не говорю сейчас о консоли (командной строке), я говорю о панели команд Sublime Text, VS Code и macOS Spotlight.

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

Почему нравится? Потому что поиск происходит в fuzzy-манере, мне не нужно помнить точное название пункта меню и/или команды. Я просто ввожу что примерно хочу сделать. Очень уютно.

Так вот, некоторые веб-приложения становятся настолько огромны, что было бы неплохо иметь подобный командный интерфейс. И вот сегодняшняя библиотека предназначена как раз для этого: https://github.com/albingroen/react-cmdk

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

#command #lib #ui

#фишка дня

Посмотрите на этот код; ничего странного не замечаете?

А здесь происходит ого-го какая драма!

Итак, этот, казалось бы, невинный кусок кода очень даже содержит в себе бэкдор. Посмотрите внимательно на GitHub Gists: https://gist.github.com/bekharsky/fa4c071ce657e37f6d0f3e7f4a91799b

Да, это на скриншоте сложно заметить, но в деструктурировании req.query вторым параметром лежит невидимый символ \u3164. Заполнитель, буквально.

То есть:

const { timeout,\u3164} = req.query;

Добавляете символ как параметр запроса с командой на выполнение ну и дальше он передаётся в список ниже. А уж там...

Доклад по методу: https://certitude.consulting/blog/en/invisible-backdoor/

Вообще, таких символов очень много (очень рекомендую почитать статью). Не копируйте все подряд из сети себе.

#node #js #security #unicode

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

WebKit strikes back!

Это было вопросм времени, когда же появится что-то подобное node.js и deno, но на JSC aka JavaScriptCore, а не V8.

JSC это JS-движок от, собственно, WebKit’а. Тогда как V8 — Blink (Chrome).

Помимо браузеров Safari и Epiphany, JSC используется в React Native, кстати.

Итак, новая среда выполнения JS: Bun.

Ссылка: https://bun.sh/

Обещается нативная поддержка TS, JSX, ESM и дикая-дикая скорость. Сама среда при этом написана на языке Zig, что бы это ни значило (его компилятор хавает и плюсы, кажется).

Давайте загибать пальцы, какие же серверные среды JS у нас теперь есть:
- Node.js (V8)
- Deno (V8)
- Bun (JSC)
- Google AppsScript (Rhino/V8)

Что забыл?

#js #ts #bun #node #jsc #v8

#фишка дня

Иногда возникает задача поставить перенос строки после строчного (inline) элемента. Без <br/>, без преобразования элемента в блочный.

На помощь приходят псевдоэлементы.

Значение свойства content — «\A» — это Unicode-символ 0x00000A, который, внезапно, являет собой перевод строки.

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

Что это даёт? Ну, например, на десктопе можно показать перевод строки, а на адаптиве – убрать его, очистив content. Конечно, это можно сделать и скрытием <br/>, но мы уже решили, что он лишний.

#css #tricks #unicode #after #newline

#фишка дня

Я не так часто аж подвываю от восхищения, но Intl API вышибает слёзы истерической радости.

Задолбались делать списки типа “один, два и три”? Если нет, вы хреново адаптируете продукты под разные языки, но то такое.

Я вот задолбался. А оказывается, не надо было! Всё давно есть в нормальных браузерах: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat

Да, для русского тоже.

И да, Oxford comma, ЕВПОЧЯ 😏

#js #list #i18n

#заметка дня

Заменили уже node-sass в своих проектах на sass?

Нет? А чего ждём?

Чем больше в компании людей на Apple M1, тем веселее становится поддержка проектов, использующих node-sass (libsass, сиплюсплюсовая реализация): он компилируется нормально только когда Меркурий в ретрограде. Или если не дышать.

А ещё оно deprecated уже года полтора: https://sass-lang.com/blog/libsass-is-deprecated

Сегодня набралась критическая масса таких людей у нас, поэтому я дропнул node-sass в пользу sass (релизация, написанная на Dart, DartSass; не спрашивайте).

Заодно убрал normalize-scss в пользу modern-normalize, ибо старый normalize уже не нужен.

На Webpack 5 переходить не буду, уйду на Vite.

Обновляйтесь, котаны.

P. S. речь о node-пакетах. Оригинальный отдельный sass — он на Ruby, RubySass :)

#scss #m1 #yarn #npm

#ссылка дня

В рамках недели репостов!

Шучу. Сейчас будет не репост, а дополнение.

Помните статью Ахмада Шадида «Defensive CSS»? Если нет, напоминаю о ней и моем случае, с этим связанным: https://t.me/htmlshit/1179

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

Я там упоминал, что Шадид делает из этого большой проект, включающий в себя сайт и цепочку выступлений на конференциях. Так вот, сайт уже даже готов: https://defensivecss.dev/

Примеры расширены и дополнены, будет больше.

Вы, кстати, можете даже пригласить Шадида к себе в компанию поговорить об этом всем, вполне официально :)

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

#html #css

#фишка дня

Я что-то подзабил на описывание возможностей селектора :has (он не родительский селектор, но им вполне можно так пользоваться). Давайте просто взглянем на это наглядное представление от Джима Нильсена: https://blog.jim-nielsen.com/2022/unlocked-possibilities-of-has-selector/

Статью можно не читать, картинка в целом всё за себя говорит, но если вы незнакомы с концепцией — там коротко разъяснено.

Ждём улучшенной поддержки, а потом ещё пару лет :)

#css #has

#статья дня

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

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

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

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

#css #transform #animation

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

Пацаны, тут мне, а я вам, бомбу принесли! Эта штука перевернёт тестирование компонентов.

Мало кто пишет приложения без горячей перезагрузки, но при этом тесты многие пишут вслепую. Зачем?

Ведь можно взять Jest Preview: https://github.com/nvh95/jest-preview

И получить самую настоящую горячую перезагрузку, но заточенную под тесты!

КДПВ говорит сама за себя. Потрясающе просто 😻

Будем внедрять?

Будем внедрять.

#jest #react #js #test

#такое дня

Не буду из этого опрос делать. В Твиттере опять разгорается срач на тему, нормально ли вообще такое на собеседовании спрашивать, или нет: https://twitter.com/TatarinFrontend/status/1545341264928931841

Цитирую: «Прикиньте, выдать вот таких задач на собесе. А когда кандидат не смог точно овтетить, сказать «Ты не знаешь основ JS, нам не о чем с тобой дальше разговаривать».

Ну что, посрёмся и мы, на ночь глядя? Или все же лень?

Я прям такое, конечно, задавать не буду. Но близкое — вполне.

О чем говорить, когда люди async polling предлагают решить на setInterval…

#js #job #interview