#статья дня

Каким-то образом View Transition API ещё ни разу не освещался на канале. Пришло время это исправить! Особенно учитывая, что соответствующая статья разработчиков Chrome как раз недавно обновилась: https://developer.chrome.com/docs/web-platform/view-transitions/

Итак, что такое View Transitions API?

Это, собственно, то, что раньше называли page transition: анимации перехода между страницами сайта. Реализовывалось по разному в разных системах, помните PJAX? Хорошая была штука.

Ну да ладно, в общем, суть в том, что теперь можно браузеру объяснить, как конкретно применять изменения к DOM, какой элемент за каким закреплять и что делать с остальными.

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

Бебебе анимации замедляют работу! Да, но замедляют, отвлекая пользователя. Об этом, впрочем, будет выложен видосик.

Ну и ещё пример анимации грида: https://codepen.io/bramus/pen/VwEXmqd

Никаких плагинов! Будущее здесь 🙂

#css #view #transition

Нашли кое-что действительно интересное для тех, кто хочет создавать тренды в мире технологий. 
⚡️ South HUB — кэмп для руководителей в ИТ, который пройдет с 12 по 16 июня в Сочи. 
400 настоящих и будущих CTO соберутся на Курорте Красная Поляна, чтобы обменяться знаниями, опытом и найти партнеров. Нетворкинг начинается ещё до кэмпа: все CTO уже собрались здесь. 
Кэмп про профессиональное развитие с акцентом на work-life-balance. Программа включает в себя обширную конференц-часть, отдельный день спорта, серию вечеринок и детскую научно-исследовательскую конференцию. 

Где встречаемся?
На высоте 960 всесезонного горного Курорта Красная Поляна⛰
Вся информация тут.

#игра дня

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

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

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

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

Дерзайте 🔥

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

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

#css #game #бородач

#фишка дня

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

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

Но не все знают, что лейбл можно повесить и на элемент button: https://codepen.io/alinaki/pen/XWjLedQ

Да, возможно, кнопке свой ярлык не нужен и даже MDN сообщает нам об этом, но!

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

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

А вот если вы не используете кнопки и балуетесь role=“button” на div-ах (в лучшем случае) — этой возможности вы лишены в принципе.

#html #button #label #бородач

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

Кто слышал о Modernizr? Поднимите руки 🙋

В общем, этот инструмент тестирует возможности браузеров на поддержку каких-либо фишек HTML5/CSS3 и далее и позволяет, например, условно подключать полифиллы или применять какие-нибудь иные методы обхода. Особенно удобно когда `@supports`-правила могут не работать или — сюрприз — не поддерживаться вообще.

Ну и одной из фишек является добавление классов со списком поддерживаемых фич. Вроде js flexbox flexboxlegacy canvas canvastext webgl и так далее.

На рынке он давно, потому интересно, какие же есть альтернативы.

И вот свежий проект SupportsCSS. Сфера его работы в целом такая же, как у модернайзера, но ориентирован уже на современные селекторы CSS. Так сказать, стряхнуть лишнее.

Как всегда, следует помнить, что оба инструмента не полифиллы, но подсказка.

#css #supports #modernizr

#такое дня

Я как-то под новостью о том, что браузеры начали внедрять очередной виджет форм (selectmenu) написал, что браузеры ни один элемент форм не сделали нормально. Собеседник обиделся.

Но даже такой простой элемент как текстовое поле (input type="text") не обошёлся без проблем. Мы уже знаем, что size="1" неправильно работает в Firefox потому что IE. А теперь ещё интересного: атрибуту maxlength нельзя слепо доверять.

Что делает maxlength? Не даёт ввести в поле символов больше, чем указано. Если вставите — браузер обрежет (уже звоночек).

Дальше веселее.

Эмодзи во всех браузерах считаются по глифам, и только Safari — считает за 1 символ. Ссылка на баг: https://bugs.webkit.org/show_bug.cgi?id=252900

Поведение Safari верно с точки зрения человека, но... браузеры пишут инженеры.

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

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

#html #maxlength #bug

Как мы сделали незаметную капчу?

Как сделать так, чтобы капча работала и отсеивала ботов, а пользователям не приходилось вводить текст с картинки? На этот вопрос отвечают разработчики Yandex SmartCaptcha — в статье они делятся историей создания сервиса, рассказывают про изменение кода, рефакторинг архитектуры, невидимую для пользователя проверку и заботу о людях.

Читайте статью в новом блоге Yandex Cloud и Yandex Infrastructure на Хабре, и не забудьте подписаться, чтобы не пропустить истории о том, как мы строим инфраструктуру Яндекса и делаем публичную облачную платформу.

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

Не так давно Ахмад Шадид (Ahmad Shadeed) выпустил статью и проект с названием DefensiveCSS: https://defensivecss.dev/

Название проекта — "защитный" CSS — будет точнее переводить по смыслу как "устойчивый". Это набор простых практик, как сделать вашу вёрстку чуть-чуть умнее, чуть-чуть гибче, чуть-чуть предсказуемее.

И это "чуть", применённое на всём проекте, превращается в раскладку, которую довольно сложно сломать неверным контентом или экраном странного разрешения.

Я это всегда называл гигиеной кода, но не догадался свести воедино 🙂

Так вот, вспомнил я о нём потому что мой бывший коллега Даниэль Ющик (
Daniel Yuschick) выкатил плагин для Stylelint, проверяющий ваш CSS на наличие defensive-практик.

Собственно: https://github.com/yuschick/stylelint-plugin-defensive-css

Если у вас на проекте нет линтера стилей — ну не страшно, ознакомьтесь с проектом DefensiveCSS и не совершайте глупых ошибок.

#css #stylelint

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

Миграции с JavaScript на TypeScript часто заходят не туда. Или не заканчиваются. Или откатываются. Зачастую в лучшем случае весь новый код начинает писаться на TypeScript и всё на этом.

Да, ещё не факт, что оно вам надо вообще, но это тема иной беседы.

Итак, с чего же начать вашу миграцию если автоматизированные средства, расставляющие везде any, вам не подходят, а //@ts-nocheck — для быдла?

Начните с модулей с наибольшим числом зависимостей, говорит нам Matt Pocock, а он в общем-то в курсе, о чём утверждает, он учит людей тайпскрипту фулл-тайм :)

А как найти эти самые модули? Очень просто, возьмите построитель диаграмм зависимостей. Madge вполне подойдёт: https://github.com/pahen/madge

Ну и никто не мешает весь новый код писать сразу на TS.

#typescript #javascript #ts #js #diagram #deps

#фишка дня

У каждого уважающего себя веб-разработчика помимо всех используемых клиентами браузеров имеются их Nightly или Canary-версии. Ну или Technology Preview для самых умных.

Зачем это надо? Чтобы пробовать новые фишечки, конечно же!

Итак, некоторое время назад я писал о том, что совсем скоро в CSS можно будет описывать scroll-зависимые анимации. И вот это время неумолимо надвигается!

Берём Chrome Canary 115 и заходим сюда: https://scroll-driven-animations.style/

Это набор демок от самого Ван Дамма. Правда, Брамуса 🙂 Он деврел в Google (сколько их у гугла развелось...)

Брамус давно занимается CSS scroll-анимациями и помогает сформировать спецификацию.

Настоятельно рекомендую попробовать! Полифиллы имеются, если что.

#css #scroll #animation

#хорошее дня

Если ваше ретро не похоже на это, даже не пытайтесь меня приглашать в свою компанию!

Результат в комментариях. Ребята из Ugears, конечно, делают вещи :)

#work

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

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

И вот тут нам поможет сниппет для DevTools под названием Capo.js: https://github.com/rviscomi/capo.js

Порядок применения:
1. Берёте capo.js, значит
2. Солите его блять Загружаете как сниппет в девтулзы: https://developer.chrome.com/docs/devtools/javascript/snippets/
4. ...
5. Наблюдаете диаграмму в консоли! Она отобразит текущее и желаемое положение вещей.

А кому охота подробностей, тому вот сюда, на эту презентацию Виталия Фридмана: https://youtu.be/uqLl-Yew2o8

#css #js #performance

#заметка дня

Есть такой элемент — template. Название говорит само за себя: это шаблон.

Пишете в него некий HTML/SVG код, потом клонируете и вставляете куда вам надо.

На этом месте апологеты фреймворков ухмыльнулись, но вы же не одни на свете, да?

const content = template.content. firstElementChild.cloneNode(true);

Важно понимать, что содержимое шаблона — это фрагмент (обёртка над реальными нодами, если грубо), поэтому обращаться с ним надо соответственно.

Почему для этой цели не использовать просто скрытый div или — привет из прошлого — script type="text/template"?

Ну второе вообще не в кассу, это просто абьюз. А первое:
- Контент внутри темплейта не будет загружаться, пока не склонирован явно: ни картинки, ни стили, ни скрипты
- Валидатор игнорирует содержимое, хоть dd храните там, хоть td
- Поисковые системы знают про template и точно не индексируют. А с div hidden всё не так однозначно.
- Ну и именование говорит само за себя. Сахар все любят.

#html #template

#ссылка дня

По какому принципу разделяются позиции Junior, Middle, Senior, Lead, Principle?

Что отличает Engineering Manager от Lead Developer?

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

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

Я не могу поделиться матрицей компетенций нашей компании (разрешения не спрашивал), но наткнулся на весьма интересную и достаточно полную от некой австралийской консалтинговой компании.

Собственно, вот: https://eng-skills-matrix.expert360.com/

По подобной матрице проходят performance review и решения о повышении зарплаты или вертикальном/горизонтальном переводе сотрудников.

Ну и как роадмап вполне можно использовать (хотя ссылки на отдельные роадмапы тоже есть).

Развивайтесь, котаны!

#matrix #work #competence

#фишка дня

Селекторы атрибутов штука довольно удобная если правильно их использовать. Особенно хорошо они раскрываются с aria-атрибутами вроде aria-hidden, aria-pressed и так далее.

Да даже элементарные кнопки соцсетей весьма неплохо выглядят в виде data-social=“twitter”, чтобы не замусоривать пространство классов. Или вообще a[href*=“twitter.com”], если собрались на символах экономить.

В React строить API компонента на data-атрибутах тоже выходит весьма и весьма элегантно.

Вот только есть нюанс: селекторы атрибутов — регистрозависимы. Чтобы сделать их независимыми — стоит добавить модификатор i, то есть:

[data-social=“twitter” i]

Свалидирует

<div data-social=“Twitter”>
<div data-social=“twitter”>
<div data-social=“TWITTER”>

…ну и если хотите ровно наоборот — есть модификатор s. Но оно совсем новое и для частных случаев, которые по-умолчанию и так регистронезависимы (вроде type, checked, disabled).

#attribute #css #case #бородач

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

Я много обещал рассказать о сетапе для разработки веба, но руки не доходили. Так что приходится кусочками 🙂

Если кто общался со мной в чате, знает: первая рекомендация для работы — это Node Version Manager, nvm.

Зачем управлять версиями ноды? Oh, sweet summer child...

Ну, как минимум, проекты не всегда переводят на поддержку самых последних версий, даже всеми любимые фронтенд-утилиты. Да и legacy strikes back.

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

И тут на сцену выходит Volta: https://volta.sh/

Написана на Rust, быстро инициализируется, позволяет задать нужную ноду прямо в package.json! В итоге переключился на новый проект — и у тебя уже другая версия Node.js

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

#js #node #nvm #volta

#статья дня

Взгляни на КПДВ, друг. Каким будет значение background-color в первом и во втором варианте?

Скорее всего, в одном из случаев ты точно ошибся. Но это нормально, CSS настолько мощно продвинулся за последние несколько лет, что каскад и знания о нём давно пора обновить.

И Лидия Захарова из HTML Academy выкатила шикарную статью: "Как работает каскад в CSS".

https://htmlacademy.ru/blog/css/cascade-works

Как происходит обработка значений, фильтрация, расчёт каскада. Что под капотом у браузера?

Достаточно кратко и суть передана отлично. Рекомендую!

#css

#ссылка дня

Я не удивлюсь, если в комментариях напишут: "Ну ты чо вообще, все это знают", но тем не менее.

У Google помимо прекрасных блогов разработчиков (того же Chrome) и весьма неплохой документации на их проекты имеется и простая обучающая платформа — Code Labs.

https://codelabs.developers.google.com/

Повторю, это не тайна, но я не знал, что материалов настолько много. От дизайна и веба до Flutter и ИИ. Ну и всеми любимый Python, куда ж без него.

Прошел несколько примеров по Flutter. Да, это в основном "пиши вот так", но на то оно и простая платформа. На некий путь вполне может навести, руку набить. Ну и бесплатно при этом.

Моя рекомендация, в общем.

#google #dev #education

#расширение дня

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

Сегодняшнее расширение пытается решить проблему недостаточного контраста на сайтах: https://fixa11y.com/

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

Полезная вещь, короче, надо сказать.

#css #a11y #contrast #бородач

#статья дня

Давайте честно, у кого были проблемы с пониманием 3D-преобразований в CSS? А у кого есть?

Да не надо стесняться, у всех были и есть. Кубик на CSS нарисовать могут не только лишь все. А всё почему?

А всё потому что у вас интерактивных тренажёров не было. К счастью, делает их не только Джош Комо, но и вот Брэд Вудс: https://garden.bradwoods.io/notes/css/3d

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

#css #js #cheatsheet #interactive #бородач