#заметка дня

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

И, естественно, очень хорошо прослеживается влияние JSX. Я не думаю, что XHTML вообще оказал хоть какое-либо влияние на молодых разработчиков :) А JSX — запросто.

В любом случае, «каноничный» вариант HTML input это, конечно, третий и четвертый варианты.

Остальное пахнет JSX и XHTML, но уж точно не является неверным, если мы исходим из того, как это разберут браузеры и чего вы вообще хотите добиться.

Короче, это был не опрос в смысле вас проверить, а буквально сбор ответов :)

#статья дня

Видите, подписчик проблему обвёл синей линией?

Оказалось, он просто был не в курсе, что пару лет назад я писал статью с прекрасным названием «Загадка дыры».

По-моему, пришло время её репостнуть, раз проблема всё ещё встречается: https://telegra.ph/Zagadka-dyry-07-18

Не дырите, котаны.

#img #inline #block #flex

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

Тема генерации градиентов буквально неисчерпаема. Вот подъехал ещё инструмент: https://components.ai/gradient/rfx04toi2Bx4GLUxPpdV

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

Удобный предпросмотр и экспорт в React-компоненты наличествуют.

#gradient #css #tool

#заметка дня

CSS-градиенты, конечно, были в своё время прорывом, вот только есть одна проблема.

Математически линейное изменение цвета и/или прозрачности глазом воспринимается слишком резким и… ранним.

Точно так же как и с transition, можно было бы применить функции плавности (easing). Правда, это потребует некоторых усилий, в стандарт CSS они пока не вошли.

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

Можно, конечно, и проще. Добавить промежуточный цвет при помощи пары остановок, т. н. подсказки перехода. Этот цвет может стать едва ли не основным: https://codepen.io/argyleink/pen/GRZoQLB

Какой бы способ вы ни применили, доверяйте своим глазам.

#css #color #gradient #easing

#codepen дня

Бегущую строку заказывали? Нет?

А я принёс: https://codepen.io/ykadosh/pen/KKezJzz

Почему именно этот вариант? Да всё просто. Логика построения анимаций бегущей строки не требует JS сама по себе, но требует повторения контента 2-3 раза, чтобы сделать бесшовный (или как минимум, кажущийся таким) переход.

Вот, можно и почитать: https://ryanmulligan.dev/blog/css-marquee/

Для этого уже нужен какой-то шаблонизатор. Тот случай, когда код на React понять проще, чем готовый HTML.

К слову, в Chrome объявленный устаревшим тег marquee реализован на веб-компонентах и Shadow DOM. Вполне себе современно, не?

#marquee

#codepen дня

Спирограф, слышали о таком развлечении? Если нет, крайне рекомендую найти себе, прокрастинация будет рада.

А пока давайте сделаем свой генератор спирограф-фигур в SVG на базе библиотек SVG.js, GSAP и generative-utils:

https://codepen.io/michellebarker/pen/GRMBVYX

Пакет generative-utils вообще довольно интересный, там приличное количество утилит для создания генеративного арта (не путать с дегенеративным, это что-то времён Хрущёва).

#svg #art #gsap

#бесит дня

!! — не оператор!

У меня всё.

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

Как часто вы произносите “ой”, работая с Git? Или, того хуже, “упс”? Не говорю уж про “бля”…

Не та ветка, не туда закоммитили, не те файлы, случайно грохнули ветку, зря запушили, не то сообщение, забыли вернуть работу из stash…

Так вот, если Git это бесконечный undo для ваших проектов, то ugit — это undo для Git!

Ссылка: https://github.com/Bhupesh-V/ugit

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

#git

#фишка дня

В 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