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

Надо узнать, когда была выпущена последняя версия браузера?

Воспользуйся https://www.browsers.fyi/

Ну и API, конечно же: https://www.browsers.fyi/api/

Зачем? Ну, а почему бы и нет.

#web #browser #api

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

«Лучший валидатор — это браузер!» — так когда-то отвечал сайт Студии Артемия Лебедева на попытку валидации.

И так-то оно так, но это было много лет назад, во времена дикого разгула браузерных движков.

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

Так вот, суть в том, чтобы не писать ерунды вроде вкладывания ul в p (и удивляться, что всё развалилось), ну или main в footer (и удивляться низким показателям в SEO) и так далее, желательно бы свою вёрстку (или просто отдельные React/Vue компоненты) как-никак валидировать.

Ну и проверять доступность, естественно (хотя бы alt в img).

Как? Ну вот, например, через https://html-validate.org/. Это, собственно, офлайн-валидатор.

А лучше пойти дальше и использовать его в связке с Jest: https://html-validate.org/frameworks/jest.html

Примеры там имеются. Верстайте правильно, котаны.

#html #jest #validation

#заметка дня

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

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

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

Решение же на самом деле до безумия простое: tabindex=“0” на контейнер и дело в шляпе. Это позволит пользователю установить фокус на желаемый блок и скроллить стрелками.

По пути, раз уж пошло дело, стоит установить стили фокуса и атрибуты role и aria-labelledby для соответствия Web Content Accessibility Guidelines.

Документ здоровый, но для практического применения нужны лишь несколько пунктов: «2.1.1 Keyboard», «4.1.2 Name, Role, Value», «1.4.10 Reflow», «2.4.7 Focus Visible».

Названия разделов говорят сами за себя: установите возможность клавиатурного фокуса, не забыв дать визуальную подсказку, и предотвратите скролл всей страницы целиком.

В общем, не ленитесь. Дайте людям возможность прочитать статью так, как удобно им. Особенно когда это ничего вам не стоит 😉

Ну и повторю решение: https://codepen.io/alinaki/pen/xxgpmeZ

#css #table #keyboard #focus #a11y

#codepen дня

Очередная CSS-картина, очередной фотоаппарат: https://codepen.io/kassandrasanch/pen/WNxJZyz

Что же отличает этот кодпен от остальных?

Автор не поленилась сделать страницу с пошаговой демонстрацией прогресса выполнения: https://www.cssartist.com/inprogress

Крайне забавное зрелище :)

Вообще, у неё на сайте много интересного, но сайт такой лагучий и хреново сделанный…

#css #art

#статья дня

Вечнозелёная (суть, никогда не устареет) статья Павла Лаптева о CSS Grid: https://pavellaptev.medium.com/learning-css-grid-with-the-swiss-2bd02e913fa

Но не просто очередная уровня "две колонки, три строки", а с некоторым историческим экскурсом через газеты и журналы, приводящим в итоге к реализации пары каноничных швейцарских сеток.

А уж кто знает о типографских сетках больше швейцарцев? Да в общем-то, никто. Как и о типографике, впрочем.

Давайте-ка сюда сразу добавим статью про золотой канон в сетках (golden canon grid): https://habr.com/ru/post/479580/

#css #grid #swiss

#видео дня

Раз уж в чате в очередной раз зашли разговоры о (не)нужности знания правил приведения типов в JavaScript и понимания Event Loop, давайте уж выложим нетленки.

1. WTF JS: https://youtu.be/2pL28CcEijU
2. Event Loop: https://www.youtube.com/watch?v=8aGhZQkoFbQ

Тема неустаревающая, тема важная.

Кто-то за неё будет биться до последнего, кто-то скажет, что так писать вообще не надо никогда (и да, не надо).

Но лучше бы это понимать.

И, конечно, https://wtfjs.com/, хотя его стоило бы обновить давно.

#js #wtf

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

Стандартный браузерный метод 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