​​#инструмент дня
#svg #path

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

Я уже выкладывал интересный инструмент для понимания процесса создания SVG и его элементов: path, polygon, polyline и т. д. “для самых маленьких”: https://t.iss.one/htmlshit/392

Пришло время для ещё одного. Этот инструмент позволяет понять создание сегментов кривой по шагам, включая перемещение пера (M), кривые безье (C), дуги (арки, A) и линии (L). Всё раскидано по координатам и уложено в сетку. Можно менять конкретные числа, а можно — подёргать реперные точки мышкой и увидеть изменение кривой.

https://yqnn.github.io/svg-path-editor/

#статья дня
#css #html #перевод

Ахмад Шадид (Ahmad Shadeed, который не раз всплывал здесь и ещё много раз всплывёт, я уверен) неделю назад выкатил очередную статью. На этот раз – о важности учитывания высоты в разработке сайтов.

https://ishadeed.com/article/responsive-design-height/

Разработчики часто забывают, что посетители редко используют весь доступный экран. Не только по ширине, но и по высоте. А мода в современных макетах диктует вольготное использование вертикального пространства, но с обязательным условием: “Всё должно влезать в один экран!”. Это, коненчо, бред, но мода есть мода.

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

Статья есть в переводе на Хабре: https://habr.com/ru/company/skillfactory/blog/524996/

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

#codepen дня

#css #game

На чистом CSS можно писать настоящие текстовые квесты и снабжать их анимацией. Логика проста: чекбоксы и радиокнопки переключают различные состояния игры. Да, число состояний достаточно ограничено, но когда шаблоны налажены – разработка упрощается.

Встречайте: The Caretaker. A pure CSS horror.

https://codepen.io/jcoulterdesign/pen/WNxjVbW

​​#ссылка дня
#css #grid

Наверное немного странно кого-то убеждать в том, что CSS Grid это технология настоящего, а не будущего. Но тем не менее, такие люди всё ещё находятся.

Если вам встретятся они на пути – перешлите это видео.

А ещё это напоминание о мощности CSS Grid и о ситуации, когда он действительно нужен (а не для того, чтобы создавать пять элементов одинаковой ширины в строке).

https://www.reddit.com/r/css/comments/foqeek/css_grid_is_awesome/

#ссылка #инструмент дня

#css #tailwind #atomic

Можно по разному относиться к Tailwind.css, но он закрывает потребности многих разработчиков веб-конструкторов и UI-китов. Что уж говорить, я его терпеть не могу, как Ъ-верстальщик, но мы рассматриваем его как фреймворк для разработки нашего собственного набора виджетов.

Список нововведений весьма логичен и не революционен. Решения для форм — спорные, но работающие (хаки, если уж говорить прямо). Дропнули поддержку IE11. Ввели расширенную и более приятную цветовую палитру.

https://youtu.be/3u_vIdnJYLc

https://blog.tailwindcss.com/tailwindcss-v2#utility-friendly-form-styles

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

#заметка дня
#chrome #devtools #console

Чтобы скопировать вывод консоли, например, ответ сервера – не нужно делать JSON.stringify(response) перед выводом в лог.

Достаточно кликнуть правой кнопкой мыши по данным, и выбрать “Store as global variable”. В ответ получим название временной переменной (temp1, temp2 и так далее).

Дальше просто пишем в консоль copy(temp1) и бам – данные попадают в буфер обмена, откуда уже их можно вставить в свои моки.

#codepen дня
#css #3d #transform

Сегодня в топ попал довольно необычный пример. Он сложен с математической точки зрения, но довольно прост с точки зрения кода. И это — взгляд изнутри на трёхмерный куб. Без WebGL.

Объём CSS-кода минимален для того, чтобы понять, как работают 3D-преобразования и перспектива. JS-код в свою очередь даёт элементарные понятия о взаимодействии с камерой. Не думаю, что кто-то сделает это проще и меньше.

Практической пользы у этого примера, в общем, нет, но полученные знания пригодятся всем, кто интересуется 3D-эффектами с минимальными усилиями.

https://codepen.io/ge1doot/pen/yLJwBrm

#заметка дня

#css #js #img

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

IMG — замещаемый (replaced) элемент. Его (тега) содержимое будет замещено, собственно, изображением. Поэтому ни о каких “добавочных” сущностях речи не идёт.

Единственный случай, когда вы можете добавить псевдоэлементы ::before и ::after на изображение – когда никаких данных не получено. Короче говоря, состояние ошибки.

Вот так:
https://codepen.io/alinaki/pen/BaLaPKy

Посмотрите на изображение игральных костей в в примере, никакого фона за ними нет, а если и есть — ваш браузер игнорирует спецификацию.

Бонус: если изображению задать цвет/размер шрифта, эти правила применятся к альтернативному тексту.

Бонус 2: можно применить before только к тем изображениям, что действительно не загрузились. Добавьте обработчик события onerror и навесьте на изображение нужный класс: onerror="this.classList.add('error’)”, voila!

#заметка дня

#html #form #input #validation

Bram Van Damme aka Bramus (олды тут? уже только за одну фамилию стоит подписаться на его CodePen) напоминает: input[type=“email”] поддерживает не только валидацию одного адреса электронной почты, но и даёт возможность вписать и провалидировать несколько адресов, введённых через запятую. Достаточно лишь указать атрибут multiple. убедитесь сами: https://codepen.io/bramus/pen/LYRGjmX

Кому подходит браузерная валидация – welcome!

Немного коллаборации ещё никогда никому не мешало. Смотрим видео и подписываемся на каналы Виталия :)

Я давно уже должен был отснять это видео, но никак руки не доходили -)

Смотрим видос:
https://youtu.be/AdXKJT1qhgI

Читаем статью (и само-собой, подписываемся на канал):
https://t.iss.one/htmlshit/416

#codepen дня
#svg #mask #color #gif

Не так давно я ссылался на статью о том, в чём же разница между наложением маски и обрезкой: https://t.iss.one/htmlshit/444

В SVG эти возможности давно встроены в стандарт языка, поэтому можно достигать интересных иллюзий. А главное, весьма просто.

Но тут обнаружилось неожиданное – ведь маской может быть и анимированный GIF! Результат может быть потрясающим:
https://codepen.io/HighFlyer/pen/abbgowE

Для простоты вынесу исходники сюда.
Изображение: https://media.giphy.com/media/3o6ZsVW5Jwpg33DH56/giphy.gif
Маска: https://i.pinimg.com/originals/af/7a/54/af7a54ee1e628fe3326687fc2ac7f1ab.gif

Работает вся эта красота очень просто: через умножение цвета. Чёрный цвет в RGB кодируется как 000000 (0 красного и так далее). Всё, что угодно, умножить на ноль – равно нулю. Таким образом, после наложения маски – её черные части будут прозрачны. И так далее вплоть до FFFFFF(255 255 255, белый), умножая любой цвет на него – получим оригинальный цвет.

Проще думать об этом как о диапазоне яркости (в случае маски – прозрачности) от 0 до 1, тогда сразу становится понятно:

0, 255, 255 → 0, 1, 1
255, 255, 0 → 1, 1, 0
0×1 = 0, 1×1 = 1, 1×0 = 0
0, 1, 0 → 0, 255, 0

#заметка дня

#firefox #css #bug #hack

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

Нижнее поле (padding-bottom) в нём игнорируется при установке значения правила overflow в scroll или auto. Оказывается, принесли это поведение ещё 9 лет назад, в Firefox 12. Мотивация была следующей: “The layout is correct per the CSS 2.1 spec: padding is applied at the
content edge, not after any overflow”.

То, что спецификация иной раз может быть максимально нелогичной никого в команде Firefox не волновало ни тогда, ни сейчас. Возможно, это правильно и Opera в своё время последовала этим же путём (и благополучно сдохла, впрочем).

Интересное в этом то, что в спецификации не говорится прямым текстом о разнице между контентом и областью, окружающей контент, что и позволяет различным движкам поступать по-своему:
https://www.w3.org/TR/CSS2/visufx.html#overflow-clipping
https://www.w3.org/TR/CSS2/box.html#box-padding-area

Ссылка на обсуждение, весьма горячее, между прочим: https://bugzilla.mozilla.org/show_bug.cgi?id=748518

Так или иначе, отступ-то мне был нужен. Закончилось это добавлением псевдоэлемента ::after с высотой, равной паддингу. А кто-то просто оборачивает весь контент в блок и задаёт поля уже блоку. Мне такое не нравится, я не любитель избыточных обёрток.

#статья дня

#css #grid #calendar

Человека с ником Bramus (тот самый Ван Дамм, bram.us) я уже упоминал пару дней назад и вот он снова подвёз прекрасный материал.

Те, кто в вёрстке давно, могут помнить баталии на тему что же такое календарь: список или таблица? Я был приверженцем второго варианта, потому что привычный календарь – он ходит как таблица, ест как таблица и крякает как таблица (надеюсь, отсылку вы поймёте 🧐)

Так вот, Брамус заявляет: “Календарь – это сетка!”.

Семантически календарь это список дней, но для представления максимально логично использовать возможности CSS Grid.

https://www.bram.us/2020/12/08/a-calendar-in-three-lines-of-css/

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

В общем, на этом войне календарей должен быть положен конец.

Доступность – нужна всем. Залетайте на митап!

Accessibility Club Minsk Meetup #2 пройдёт онлайн 10 декабря в 19:00 (GMT+3). В программе четыре доклада: отдельные доступные версии, доступность SPA, SEO и доступность и ещё один.

Трансляция https://youtu.be/m3EStUvzSAs
Программа https://eventspace-by.timepad.ru/event/1502789/

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

#google #appsscript #ide #javascript

Сколько областей применения JavaScript вы можете сходу вспомнить? Браузер, node.js. Ну Electron, как их совокупность. ReactNative, возможно. Кто-то вспомнит Espruino – JavaScript для микроконтроллеров, потому что хайпа было достаточно. Кто-то — пользователи Linux, в основном – расширения для среды GNOME и GTK-приложения (да, их тоже можно писать на JS). Различные расширения для оперденей, написанных на технологиях Java, в банках.

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

И не просто в настольных офисных пакетах как MS Office и LibreOffice, но и расширения для Google Docs (Sheets, Slides, Forms), Google Data Studio (популярнейший инструмент для создания отчётов) и MS Office Online. Это может выглядеть как сайдбар или попап внутри самого приложения. И вокруг этих расширений выстроен весьма большой рынок (кому интересно — погуглите хотя бы компанию Supermetrics, в которой я и работаю).

В отличие от MS Office, Google предоставляет не только фронтенд и внешний API для работы расширений, но и бакенд. И бакенд этот работает на надмножестве языка JavaScript: Apps Script.

До недавнего времени он представлял собой крайне странную штуку: использовал JavaScript версии 1.7 с некоторыми вкраплениями ES6 и исполнялся синхронно в среде Rhino (JS-движок, наподобие V8, но на Java-технологиях).

Но уже несколько месяцев активно идёт его перевод на движок V8, который максимально приближает Apps Script к Node.js: использует последние возможности ESNext и работает гораздо быстрее. Правда, до сих пор не все возможности перенесены.

Так вот к чему это я. Google наконец-то объявил об обновлении своей web-IDE для Apps Script! Она теперь максимально напоминает современные VS Code и WebStorm в понимании процесса редактирования кода (включая даже мультикурсор), представляет нормальный отладчик и средства журналирования и вообще обещает сделать нашу жизнь намного удобнее: https://www.benlcollins.com/apps-script/google-apps-script-ide

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

​​#баг дня

#google #stackdriver #bug

Опять субботняя тема. Google очень забавно валидирует дату в своей системе журналирования Stackdriver. Вы не ошиблись, 31 октября 2020 года – невалидна, потому что число дней в месяце по мнению Google не может превышать 30.

#заметка дня

#html #safari #apple #autocorrect #autocomplete

Если вам кажется, что Apple много себе позволяет – вам не кажется.

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

Если вы когда-нибудь будете делать поле, требующее ввода кода (подтверждения, например), не забудьте выставить на поле input атрибут autocorrect=“off”. Иначе Safari будет пытаться исправить ваш текст, что далеко не всегда приятно.

Google уже ставит его на мобильной поисковой странице, можете даже проверить сами в веб-инспекторе. И скоро оно появится и в стандарте.

Ну и на закуску пара полезных значений атрибута autocomplete:

autocomplete=“off” отключает вышеупомянутое автоматическое заполнение полей
autocomplete=“one-time-code” – предзаполнит поле из SMS или push-уведомления.

И конечно же куда без ссылки на MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#Values

Помогайте пользователю правильно.

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

#css #transitions #animation

Идеи атомарного подхода к CSS захватывают умы всё большего числа людей: взлёт Tailwind CSS это подтверждает. Но если Tailwind берёт на себя всю работу, что может быть не всегда удобно и семантично, но уж точно всегда многословно, то сегодняшняя библиотека занимается лишь комбинированием анимаций.

Встречайте: AnimXYZ,
https://animxyz.com/.

Подход простой: вы указываете нужную комбинацию трансформаций, таймингов, уровней прозрачности, последовательность проигрыша прямо в классах и ставите атрибут xyz. Остальное она сделает за вас: объединит их и проиграет в нужный момент.

Основная моя к ней претензия – атрибут xyz. Для меня остаётся загадкой, почему нельзя использовать валидные data-атрибуты. С другой стороны, в React и Vue такой проблемы у вас не появится вообще.

Я считаю, что ей можно дать шанс. Особенно если вы создаёте различные баннеры.