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

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 такой проблемы у вас не появится вообще.

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

#заметка дня
#twitter #типографика #баг

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

Оказывается, это – болгарица. Иначе – болгарская кириллица. Болгарица была призвана увеличить идентичность болгарской письменности и отделить её от остальных кириллических алфавитов: https://ru.wikipedia.org/wiki/%D0%91%D0%BE%D0%BB%D0%B3%D0%B0%D1%80%D1%81%D0%BA%D0%B0%D1%8F_%D0%BA%D0%B8%D1%80%D0%B8%D0%BB%D0%BB%D0%B8%D1%86%D0%B0_(%D1%82%D0%B8%D0%BF%D0%BE%D0%B3%D1%80%D0%B0%D1%84%D0%B8%D0%BA%D0%B0)

Так вот дело в том, что Твиттер иногда ошибается и ставит русскоязычным твитам признак болгарского языка (lang=“bg”), отчего и происходит сей казус. Вообще, я с трудом могу понять, как можно спутать русский с болгарским, но в Твиттере явно сидят люди, которым нет дела до этого.

А ещё в iOS Safari до версии 14.3 болгарица отображается для всего шрифта Monserrat, у кого айфоны – можете проверить: https://codepen.io/alexeyten/full/QWNYqLK (там и хороший пример болгарицы имеется)

Честно говоря, мне болгарица не нравится. Выглядит вторично для обоих алфафитов, пусть даже намерения были самые благие. Ну а Твиттеру – просто позор.

#codepen дня
#css #variables #custompropetries #переменные

Кто-то хотел посмотреть на тормозящий рендеринг без использования холста, скриптов и WebGL? Я вам принёс :)

И тема самая что ни на есть новогодняя: бумажные снежинки. Да-да, буквально имитация вырезанных из бумаги снежинок и звёзд: https://codepen.io/michellebarker/pen/YzGEJoX

Прекрасная работа, в которой оправдано каждое применение пользовательских свойств aka переменных. Но заклинаю вас, не делайте так на реальном проекте, рендеринг этого простого, но всё же монстра, жутко тормозит.

А вот для изучения особенностей – это пожалуйста. Всё максимально просто и понятно.

#фишка дня

#chrome #reload #cache

⌘/Ctrl-R и ⌘/Ctrl-⇧-R знают все: перезагрузка и перезагрузка без кеша. Но в Chrome можно открыть веб-инспектор (средства разработчика в народе) и подержать кнопку перезагрузки подольше чтобы увидеть смешную третью опцию: перезагрузка после очистки кеша.

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

Но я обычно просто включаю “Disable cache” во вкладке Network чтобы вообще забыть о проблемах с кешем. Главное потом сделать cachebust у пользователей, если ваши средства сборки и деплоя этот процесс не автоматизируют.

#заметка дня

#html #shadowDOM #chrome

Продолжаю эксплуатировать тему Shadow DOM.

Многим, возможно, известно, что в какой-то момент развития HTML разработчики браузеров и стандартов решили, что HTML должен описывать не только структуру, но и внешний вид документа. Так появились теги font, marquee, center, strike, listing, dir, menu.

Но дело-то в том, что для тега marquee — бегущей строки — не было предложено никакой альтернативы. Предполагалось, что бегущая строка (или контент вообще) будет добавлена в CSS, но этого не произошло. В итоге нам приходится выдумывать комбинацию из transform translate или ключевых кадров. Не без проблем.

Каким же удивлением стало для меня, что тег marquee вполне себе развивается! В движке Blink (Google Chrome) его переписали на Shadow DOM и забавно смотреть на внутренние поддерживаемые правила CSS.

Вообще, marquee тег довольно полезный (взгляните на интерфейсы, ограниченные по ширине), наряду с тегами для воспроизведения звука и видео, но я бы предпочёл уже чтобы стандартизирующие службы и разработчики браузеров определились с его статусом или ввели бы CSS-правило.

Страница на MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee

Пример (взят, собственно, с MDN):
https://codepen.io/alinaki/pen/dypdMEr

P. S. приятно видеть, что сообщество людей, которым интересен мой канал, растёт. Некоторые из них имеют свои каналы или только начинают. Поддержим же один из новеньких: https://t.iss.one/sharknessIT и посмотрим за его развитием.

​​#подкаст дня

#podcast #video #react #en

Все подводят итоги года, а мы с коллегой Ари-Пеккой Копонен (A-P Koponen) записываем подкаст. На английском языке.

Ари-Пекка – Senior Front-end Engineer в компании Supermetrics, в которой я уже больше года работаю. Весьма опытный разработчик, который с удовольствием делится опытом.

В первом выпуске подкаста Frontend Greatness мы обсуждаем статью о файловой структуре проектов на React, которая пропагандирует “доменный” подход: https://www.robinwieruch.de/react-folder-structure

Это моё первое появление на публике в видеоформате. И несколько неожиданное для меня самого. Но дальше будет больше.

Упомянутые в подкасте ссылки:
https://lea.verou.me/
https://web.dev/
https://kentcdodds.com/

Feature Slices:
https://sova.dev/application-structure/

Atomic Design:
https://atomicdesign.bradfrost.com/

Сайт подкаста:
https://www.frontendgreatness.com/

Видео:
https://youtu.be/v7dsfjXD7Dw

#статья дня

#scss #styledcomponents #emotion #cssinjs #posh

Я тут узнал слово новое, точнее, аббревиатуру: POSH. Plain old semantic HTML. Забавно, но я эту аббревиатуру вообще впервые слышу… Ну да ладно, речь не об этом.

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

Конечно же приверженцы БЭМ скажут: модификатор ставь. И закроют вопрос.

Эээ, погодите… но на этом моменте нам придётся уйти в Телеграф, потому что Телеграм вертел все мои потуги выкатить исходный код.

Там вы узнаете про магию кеширования родительских селекторов (нет, обратных селекторов всё ещё не подвезли).

https://telegra.ph/Keshiruem-selektory-zdes-i-sejchas-01-07

#баг дня

#chrome #scroll #smooth

Какое-то время назад все повально стали сильно увлекаться реализацией плавного скролла по якорям: например, чтобы та же кнопка “Наверх” поднимала страницу без скачка.

Сначала это делали на JS/jQuery:

$(‘html, body’).animate({scrollTop: 0}, 2000);

Потом появилось нативное CSS-решение:

html {
scroll-behavior: smooth;
}

…и все вздохнули спокойно. Но не тут-то было.

При включённом плавном скролле поиск по странице в Chrome тоже начинает скроллить плавно от результата к результату. Это, мягко говоря, выглядит тошнотворно. И является даже зарегистрированным багом: https://bugs.chromium.org/p/chromium/issues/detail?id=866694

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

html:focus-within {
scroll-behavior: smooth;
}

Правда, теперь придётся добавить якорям tabindex=“-1”, иначе они тоже будут вне фокуса и анимации не будет.

О focus-within мы потом ещё отдельно поговорим, благодаря ему можно имитировать некоторые возможности святого грааля обратных селекторов.

P. S. кривое форматирование кода в Telegram меня убивает. Придётся ускорить работу над сайтом канала.

​​​​​​#странное дня

Я честно говоря не очень хотел бы подобные темы в канале поднимать, но суббота в конце-концов и мне кажется, что это слишком смешно и вполне нам подходит.

В общем, как вы знаете, в США творится некоторое дерьмо. Сторонники Трампа захватывают Капитолий, вокруг этого сразу вырастает тонна конспирологических теорий, Симпсоны в очередной раз предсказали будущее, а Твиттер с Фейсбуком блокируют аккаунты всё ещё действующего президента и его агрессивных сторонников, которые же тем временем занимают другую соцсеть — некий Parler (о котором я вообще сегодня впервые услышал).

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

Google и Apple в срочном порядке удаляют приложение Parler из своих сторов, Parler предлагает своим пользователям воспользоваться режимом PWA: Progressive Web App.

Агрессивные сторонники Трампа воют в тредах и пишут, что они не собираются пользоваться чем-то, что имеет в названии слово Progressive (sic!). Progressive — значит, левое. И наоборот. А у демократов нынче как раз левая повестка. Когда им предлагают прочитать в Википедии что это такое, они заявляют, что не доверяют “коммунистической” Википедии. Разрастается скандал.

В общем, ребят, мне добавить нечего.

#ссылка дня

#css #flex #flexbox #tutorial

Кажется, этому миру не хватает ещё немного обучающих диаграмм и статей по флексбокс-модели вёрстки. Вот подвезли ещё одну: https://semicolon.dev/tutorial/css/complete-css-flex-tutorial

Достаточно подробно и аккуратно расписано, но следует в очередной раз предупредить: это лишь шпаргалка. И как любая шпаргалка, она приносит больше пользы автору, нежели читателю.

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

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

Но лучше самим идти и пробовать все примеры.

​​#codepen года

Я не то чтобы часто веду рубрику CodePen дня, но тут пропустить нельзя.

Встречайте, самые залайканные кодпены за 2020 год! Учитывались не только лайки на работах, но и на самих авторах.

Мой любимый синтезатор Roland там тоже имеется, вот и ссылочка на пост с парой статей о процессе создания, если кто забыл: https://t.iss.one/htmlshit/430

https://codepen.io/2020/popular/pens/

#разочарование дня

#google #appscript

Помните, я писал недавно об онлайн-IDE от Google для их языка разработки расширения GSuite — AppsScript? Вот и ссылка: https://t.iss.one/htmlshit/475

Нам обещали улучшенный деплой, тестирование, полновесный редактор с отладчиком…

И вот сегодня я увидел её в деле. Стоит ли говорить, что я вернулся на старую версию спустя пять минут?

Не работало ничего. А нет, вру. Запуск функций работал.

Информация о проекте? Ошибка 500. Версионирование? Отсутствует. Конфигурация деплоя? Не загружается. Список опубликованных версий? Тоже не загружается. Отладка предыдущего движка? Не работает. Публикация API? Отсутствует.

Я с ужасом жду дня, когда они переведут всех на это насильно. Мы год ждали новую IDE вот ради этого? У нас полмиллиона пользователей, мы не можем себе позволить остаться без рабочего инструмента, пусть даже от него нам нужен лишь деплой.

Хотя, было глупо ожидать, что Google выпустить что-то работающее, а не бета-версию. Будем забрасывать их отзывами.

#ссылка дня

В последние два дня наблюдается довольно необычное увеличение числа подписчиков на канале. Официальная статистика поднимает бэклог, а бот и сервисы – показывают прямое увеличение.

Дамы и господа новоприбывшие, я напоминаю, что у канала имеется свой чат где вполне помогут разобраться с вашими проблемами с вёрсткой – @htmlshitchat.

И было бы интересно узнать, откуда вы узнали о канале, не стесняйтесь оставлять комментарии!

Добро пожаловать на канал!

P. S. представителям GeekBrains – моё отдельное спасибо.

#заметка дня

#css #html #pp #pixelperfect

Один из самых проблемных вопросов верстальщиков — не обязательно начинающих — это так называемый “пиксель пёрфект” (pixel perfect). Проще говоря, свёрстанный макет должен полностью соответствовать дизайну вплоть до последнего пикселя.

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

Но всё немного интереснее.

Давайте сразу определимся: правильно свёрстанный макет точен до пикселя по умолчанию. Точка.

Правильная вёрстка экономит время и силы. Даже если вы, как и я, верстаете итеративно, то есть набрасываете крупные блоки и потом начинаете приводить в нужный вид, пишите нужные значения сразу, не откладывая на потом.

У блока стоят поля и отступы по 16 пикселей? Нет ни одной причины ставить 10, чтобы “было легче считать” (и такое бывает), а потом проходить по всему макету заново. Ставьте сразу 16, а чтобы помочь себе — пользуйтесь расширениями для браузера, например https://www.welldonecode.com/perfectpixel/

Конечно, так можно дойти до крайности. Я много раз видел как люди бездумно копируют размеры из Sketch, Avocode или Figma наивно полагая, что уж кому как не им знать о размерах и положении. Это самая большая ошибка, и я уж молчу о том, что редакторы зачастую ставят абсолютное позиционирование всему подряд.

Будьте заранее готовы к тому, что макет – живой. Выделенный блок делится на секции? Используйте проценты во флексах или fr в гридах, делите его относительными единицами. Дизайнер поставил 63 px? Это явно дрогнула рука, не используйте нечётные значения никогда, округляйте до ближайших x4 (в данном случае — 64). Во всех размерах должна просматриваться логика, не могут три кнопки в ряду иметь один размер, а четвёртая – другой.

Почему кратно четырём? Потому что округление в пределах четырёх пикселей вполне укладывается в общепринятое понятие точной вёрстки, но на крайний случай у вас останется ещё как минимум два уровня деления. А при использовании нечётных значений transform или устройства с полуторной плотностью экрана дадут вам размытую картинку (к счастью, последние версии браузеров эту проблему часто решают за нас).

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