#фишка дня

Зачем верстать, когда можно не верстать, правда?

Если вам дали задание: “Срочно сверстай нам кнопку Apple Pay для мобил!”, не надо кидаться искать SVG логотипа и шрифт.

Надо просто…

button {
    -webkit-appearance: -apple-pay-button;
}

…и всё.

Естественно, это работает только в Safari. Но на iOS всё — Safari.

Для встроенных WebView лучше и не придумаешь.

#ios #button #applepay

#ссылка дня

Тимлид я ещё довольно молодой, приходится учиться всему на лету и черпать знания отовсюду.

Поэтому, было весьма интересно найти роадмап (карту знаний и умений) по этой теме: https://tlroadmap.io/

Работать с ним можно буквально как с картой, выбирая нужные ветки, или же как с документом: https://tlroadmap.io/guide.html#%D0%B8%D0%BD%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%86%D0%B8%D0%B8-%D0%BF%D0%BE-%D0%B8%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D1%8E

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

#teamlead #learning #roadmap

#видео дня

Я никогда не пробовал в деле генераторы в JavaScript. Ну это вот эти всякие function* и yield. Звёздочка тут — это не указатель. Ещё и хер пойми как произносится…

Так вот. Если я не пробовал их и толком не интересовался, то Анджану Вакил (Anjana Vakil) они дико восхищают. Вы поймёте, когда начнёте просмотр 🤣

Вообще, JS Conf Budapest в этом году какой-то дико угарный, надо было поехать…

Всё рассказано очень поняным языком, рассмотрены несколько вариантов применения. Я даже задумался наше тестовое реализовать на генераторах, можно же на лету среднее считать…

Короче, мой рекоммендасьон: https://www.youtube.com/watch?v=gu3FfmgkwUc

#js #generators

#такое дня

Оптические иллюзии:
Существуют
Несовершенство восприятия:
Существует
Заказчики:
«Я просил половину круга, а не три четверти!»

Ну… как бы… мне даже добавить нечего: https://observablehq.com/@mizinov/area-comparison

#optical #illusion #perception #design

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

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

Воспользуйся 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