#фишка дня

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

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

#safari #callout

#фишка дня

Реклама предлагает всем стать настоящими программистами. Оставим это рекламе.

Нам же, чтобы ими стать, надо научиться отлаживать программы, не правда ли? (Филологи — молчать!)

Поднимите руку те, кто дебажит через console.log(var) 🙋

А надо не так. Надо открыть девтулзы, в них — исходный код. И там просто нажать «Add logpoint…» на строке. Вуа-ля. Никаких тебе ожиданий сборки. Смотрим альбом.

#debug #devtools

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

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

Оказалось, изобретать ничего не нужно — уже есть https://jsonhero.io/

Сгруппирует по категориям, покажет связанное, отобразит картинку.

Удобно.

#json #viewer

#заметка дня

Сразу с панча: не используйте input[type=“number”].

Он тащит за собой целый ворох проблем:

1. странно выглядит (ниже о том, почему);
2. плохо стилизуется;
3. не подчиняется стандартным атрибутам вроде maxlength (sick!);
4. имеет ARIA-роль spinbutton (ниже поясню, что это);
5. позволяет ввести e (10e9) и валидация даже не заикнётся;
6. в старых Safari и Chrome округляет введённые числа (например, номер кредитки) до мантиссы и экспоненты (по-моему, это уже конец);
7. во время ввода можно случайно нажать стрелку вверх или вниз (или даже тронуть колесо мышки на некоторых ос) и введённое число изменится.
8. Если случится кривой автоввод (например, два пробела на маке дадут точку, а нужна запятая), value будет пустой.

Как видите, минусов немало. А откуда они вообще взялись?

А всё просто: input[type=“number”] создавался для имитации т. н. tally counter, ручного счётчика. Ну вы наверняка видели фильмы, где людей или скот считали надетым на палец устройством. Отсюда и ARIA-роль spinner (счётчик оборотов), и стрелки ввода.

Вот только числа с плавающей запятой или ввод мантиссы и экспоненты — это уже самодеятельность браузеров. Что приводит к идиотичным ситуациям вроде округления чисел.

Так что же делать?

А делать следующее:

<input type="text" inputmode="numeric" pattern="[0-9]*">

В конце 2022 года с такой конструкцией проблем у вас не возникнет. И с точки зрения доступности всё верно. И на мобильных клавиатура нужная встанет.

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

За подробностями можно обратиться к блогу разработчиков официального сайта правительства Великобритании: https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/

Крайне неожиданно было вообще узнать, что ребята из техотдела правительства Великобритании вообще свой блог ведут на официальных началах.

Я помню подобное было у сайта kremlin.ru. И то в итоге почти все фишки исчезли со временем... Но мы отклонились от темы.

Подытожим: input[type=“number”] делался не для того, как его применяют.

Подумайте об этом.

#css #html #number #aria #semantics #a11y

#фишка дня

TIL что можно получить список всех внутренних страниц браузеров. Ну знаете, этих chrome://flags, chrome://dino, edge://surf.

На самом же деле это всё — about:// страницы, просто переписываются каждым вендором. Попробуйте ввести about://flags.

А вот если ввести chrome://flags в Edge — он превратится в edge://flags. Гордые какие. Brave, кстати, тем же самым занимается.

Ладно, к делу: получить список всех страниц можно через about://about. Возможно, кто-нибудь найдёт там что-то экстраординарное.

Ну и на закуску: слеши можно не писать.

#chrome #edge #firefox #about #url

#игра дня

Учить флексбокс? Но я хочу убивать зомби!

Ни слова больше!

https://flexboxzombies.com/p/flexbox-zombies

Раньше эта игра стоила 179 баксов. Сейчас бесплатно.

Забавно, конечно, что у них на сайте кнопка съехала. Мастера, так сказать, флексбокса…

#css #flexbox #flex #game

#игра дня

Ну что, обучающие игры у нас уже были: тарелки на флексах, лягушки на флексах, огород на гридах, tower defence на флексах, ну и сборники всего и сразу.

Давайте бахнем хардкором: https://css-challenges.com/

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

Коллекция пополняется, в том числе и сообществом. Есть прекрасный раздел Tips&Tricks в котором полно неочевидных фишек и сниппетов.

Дерзайте 🔥

P. S. было бы глупо не упомянуть заодно о https://cssbattle.dev/

Там, кстати, небезызвестный Илья Стрельцын в лидерах :)

#css #game

#статья дня

А вы знали, что API Intl умеет разделять текст, предложения и слова на составные части?

Вот и я не знал! Firefox, кстати, тоже не знает… но что делать. Зато Node 16 этим знанием обладает!

Короче, дамы и господа, это потрясающе. Читаем статью Стефана Юдиса и наслаждаемся: https://www.stefanjudis.com/today-i-learned/how-to-split-javascript-strings-with-intl-segmenter/

Особо разговаривать тут нечего :)

#js #intl

#статья дня

Справочная статья от Вари Степановой об использовании GitHub Packages как альтернативе NPM Registry: https://varya.me/blog/publish-packages-on-github/

Пригодится на случай, если у компании уже есть не только, собственно, GitHub, но и приватные пакеты других видов непосредственно в Packages. А их много разных: https://docs.github.com/en/packages

Ruby, NPM, Docker, Apache Maven…

В общем, уютненько.

#npm #packages

#видео дня

Правило scroll-snap, задающее поведение скролла и недавно коротко завирусившееся в твиттере в серии:

— Как Тесла/Эппл/Мета делают такие крутые карусели?
— Да с помощью scroll-snap!

…присутствует в CSS достаточно давно. С поддержкой, правда, были нюансы. Но сейчас мы аж в 2022 году, правда?

Так вот, презентация Adam Argyle описывает не только scroll-snap, но и сопутствующие свойства вроде scroll-margin: https://www.youtube.com/watch?v=34zcWFLCDIc

Слайды: https://oh-snap.netlify.app/#intro
Коллекция примеров: https://codepen.io/collection/KpqBGW

#css #scroll #snap

#ссылка дня

Кому The State of CSS’2022? Держи!

https://2022.stateofcss.com/en-US/

С пылу с жару подъехало.

Фичи, фреймворки, использование новых функций и свойств, доступность… CSS-in-JS, куда же без него. Всё то, что люди используют, что стало популярным, что потеряло в популярности, что резко взлетело.

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

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

#css #state

#такое дня

Когда понял композицию в React

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

Поскольку парни из React Router продолжают творить странное (например, они объединили React Router и роутер проекта Remix 🤮, вы теперь ставите оба), да и вообще как-то много себе позволяли на своём пути, всегда интересно посмотреть на альтернативы.

Одной из таких вполне может быть wouter: https://github.com/molefrog/wouter

+ Небольшой размер
+ На хуках
+ Тайпскрипт
+ Компонент верхнего уровня <Router/> — необязателен вообще, это значит гибкость в использовании во всех местах
+ Очень похож на RR по набору компонентов

Пробуем? Альтернативы?

#react #router #wouter

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

Так, в дополнение к JSON Hero обнаружился ещё один очень крутой и полезный инструмент для визуального представления JSON: https://jsoncrack.com/

JSON Crack не даст красивого представления отдельных полновесных сущностей, как Hero, но зато отобразит JSON в виде древовидного графа, ну или диаграммы, если хотите. Весьма удобно, если нужно быстро окинуть взглядом типы данных и связи.

Лишним не будет, короче.

P. S. Есть и тёмная тема, и desktop-вариант и возможность встраивания на сайт.

#json #graph #tree

#статья дня

Андрей Ситник проанализировал The State Of CSS’2022 и обнаружил, что 70% разработчиков не знают про цветовое пространство P3 и относительные цвета: https://2022.stateofcss.com/en-US/features/colors/

Это, конечно, ужасно. Поэтому нелишним будет упомянуть о его статье-руководстве по современным цветовым функциям (OKLCH) и почему вообще всё больше разработчиков уходит от RGB к HSL: https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl

Очень круто написано, потрясающие примеры и, если вы обладаете поддерживающим новые пространства оборудованием, можно насладиться цветами в полной мере.

Я пропустил выход этой статьи, потому нагоняю только сейчас, вместе с вами: https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl

Живите ярко, котаны!

#css #oklch #hsl #colors

#число дня

В дружественном чате прошло очередное ежеквартальное обсуждение разрешений макетов и экранов. Я не буду пока снова репостить свои статьи на тему, но лишь задам вопрос.

Кто догадается, что такое 1536x864 на этой годовой статистике разрешений экранов мониторов?

https://gs.statcounter.com/screen-resolution-stats/desktop/worldwide

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

#css #resolution

#статья дня

Так, ну по поводу поста про 1536x864: многие догадались, что это 1920x1080 в режиме масштаба интерфейса 125%.

Почему это так важно? Потому что Windows 10 и 11 устанавливают 125% на всех 13” и 14” ноутбуках, с FullHD-разрешением (1920x1080). Эдакая ретина для бедных (и не очень). Пиксели плотненькие, но о FullHD уже речи не идёт. Да и информации помещается на экран чуть-чуть больше, чем у маков с их виртуальным 1440x900.

Ладно, не суть. Вы только посмотрите, какие халтурщики работают в YouTube.Music! Внимание на иллюстрацию. Треугольник Play не сбалансирован!

По-моему, это залёт. Им надо срочно читать вот это вот: https://habrahabr.ru/company/badoo/blog/333992/

Я не могу выразить словами, как меня бесят несбалансированные иконки.

#optics #eye #css

#видео дня

Что-то меня это видео, найденное Turbojedi, увлекло. Давайте немнго отвлечёмся и посмотрим, как создавались системы букинга авиабилетов: https://youtu.be/8_t41xvPp1w

Из этой презентации вы, например, узнаете, что в ранних системах коды билетов были прямыми указателями на адрес блока на диске в мейнфрейме авиакомпании.

Абсолютно проклято :)

#video #aero

#игра дня

Я в курсе, что вы у нас бронтозавры и отписываетесь пачками, когда я выкладываю очередную игру для закрепления уровня разработки, но я продолжу это делать!

Потому что мне они нравятся :)

Итак, вашему вниманию CSS Speedrun. Кажется, в объяснении не нуждается :)

https://css-speedrun.netlify.app/

Я чота был невнимательный в паре заданий (или считал себя дофига умным) и прошёл в итоге аж за 07:25 :(

#css #game

#ссылка дня

Помните, мы звёзды шрифту Martian Mono набирали, чтоб Рома приоритизировал кириллицу?

Пацан сказал — пацан почти сделал же, цитирую: «Ура, доделал базовую кириллицу для всех шрифтов!

Следующий шаг — балансировка визуального веса букв, чтобы всякие Жж и Шш не чернили в наборе».

Значит, скоро пробуем!

Но вот какая ещё новость-то: шрифт Martian Mono теперь есть и на Google Fonts: https://fonts.google.com/specimen/Martian+Mono

Надеюсь, Рома расскажет о процедуре одобрения в каком-нибудь треде, ходят слухи, было непросто.

По-моему, шикарно. Не забываем о поддержке :)

#fonts #martian #mono

#такое дня

А нас замело.