#codepen дня

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

В какой-то момент я устал быть душнилой и отвечать всем: "Но... ведь... SVG..."

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

А вот уже достаточно хорошо известный вам бывший деврел Google Джей не поленился и таки сделал этот чёртов переключатель!

Смотрите: https://codepen.io/jh3y/pen/LYgjpYZ

Явно покруче чем наш с Киренковым трёхпозиционный... пора поднимать ставки, котаны :)

Кто пасхалку найдёт?

В общем, меня забавляют эти дуэли. Надо бы поучаствовать в какой-нибудь :)

#tiktok #switch #design #challenge

#фишка дня

Как предотвратить взаимодействие пользователя с элементом?

pointer-events: none — скажете вы.

Да. Но нет. А что насчёт клавиатурного фокуса? А скринридеры? Так не пойдёт.

Благо, есть решение!

Начиная с Firefox 112 и Safari 15.5 у нас наконец-то есть поддержка атрибута inert. Что это такое?

Ну, исходя из названия inert (инертный) он ни с чем не должен взаимодействовать. Как инертные газы (как вам отсылочка, пахнуло школьной химией, да?).

То есть, если вы зададите элементу атрибут inert, то:
1. Будет предотвращена обработка события click.
2. Элемент перестанет получать фокус и...
3. ...станет недоступен для скринридеров (исключён из a11y tree).

Поддержка уже давно есть в Chrome, начиная со 102 версии, и теперь, с вводом в строй Firefox 112 — есть во всех современных движках.

Ну и, естественно, присущие атрибуту свойства можно повторить ручками, вот пример: https://codepen.io/alinaki/pen/ZEqJepB

#inert #attribute #html #a11y

#заметка дня

Для меня было небольшой загадкой, почему Vim, а по большей части, Neovim, так завирусился в последнее время.

Я использовал Vim активно лет 12 назад, имел огромный конфиг, но в итоге сполз с него на Sublime, Atom, а потом и VS Code. Причиной стала лучшая поддержка нужных мне инструментов. Vim остался горячо любимым редактором на удалённых серверах. И от конфига я отказался в пользу сырых режимов, это положительно сказалось на работе в разных средах.

К слову, Vim может искать по многогигабайтным логам легко и просто, а эти ваши VS Code и даже Sublime — нет.

Но суть не в этом. Суть в том, что Vim и другие независимые редакторы спасла… Microsoft. Как?

Раньше каждая IDE реализовывала свой механизм работы с конкретным языком. И как правило, это было некое проприетарное (в смысле непереносимое) решение. Но всё изменил приход LSP: Language Server Protocol.

Такого раньше не было: открытый стандарт взаимодействия редактора и языка. Автодополнение, ссылки, определения, документация… А главное, протокол-то открытый.

Поддерживается уже огромное количество языков и редакторов. И тут мы подходим к главному.

О преимуществах Vim есть огромный свежий тред Кирилла Мокевнина, CEO Hexlet: https://twitter.com/mokevnin/status/1567594899859546115

Оригинальный Vim не поддерживает LSP, зато его поддерживает Neovim. И тут все любители модальных редакторов получили второе дыхание.

Но вот я правда был очень удивлён, как Microsoft снова перевернула мир свободного ПО. Это, конечно, поразительно.

#бородач

#ссылка дня

Чем отличается alt от title? А border от outline? А *.d.ts от *.ts? А for..in от for..of? А display: none от visibility: hidden? А slice от splice?

Как же я задолбался форматирование применять.

Да весь фронтенд это нагромождение похожих по написанию или даже по сути вещей. Как разобраться?

И тут нам поможет проект https://thisthat.dev/. Он буквально проходится по таким скользким определениям или сущностям и разбирает каждый из них.

Проект открытый, предлагайте ваши == и ===.

#javascript #html #css #this

Управляйте проектами команд разработки

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

Tracker поможет эффективно выстроить процессы:

— управляйте задачами: настраивайте типы, статусы, параметры, используйте шаблоны, декомпозируйте;

— работайте по гибким методологиям (Agile) с помощью досок задач;

— контролируйте сроки и формируйте календарный план с помощью Проектов и диаграммы Ганта;

— приоритезируйте задачи в бэклоге и планируйте их выполнение с помощью спринтов;

— автоматизируйте рутинные действия с помощью триггеров, автодействий, макросов;

— подключайте репозитории исходного кода и привязывайте коммиты к задачам;

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

Вы можете легко перенести процессы в Tracker с помощью API или инструмента миграции.

Попробуйте Yandex Tracker прямо сейчас➡️

#статья дня

Я, честно говоря, плохо понимаю, как я пропустил появление тригонометрических и математических функций в CSS.

Добро пожаловать в ад девятиклассников.

Итак, хотите вы того или нет, но sin(), cos(), tan(), asin(), acos(), atan(), atan2(), pow(), exp() и так далее уже с нами.

Для начала можно попробовать въехать в abs, round, mod вместе со статьёй легендарной Аны Тюдор: https://css-tricks.com/using-absolute-value-sign-rounding-and-modulo-in-css-today/

А потом изучить обзорную статью о, собственно, тригонометрических функциях: https://web.dev/css-trig-functions/

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

Посмотрим, что из этого выйдет.

#css #sin #cos #math

#шпаргалка дня

Уникальное предложение!

Берёте короче эту пирамиду код-ревью и ваши пулл-реквесты станут не только вкусными, но и полезными: https://www.morling.dev/images/code_review_pyramid.svg

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

#pr #process #work #бородач

#шок дня

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

Нет, не думал. Есть разница между вечнозелёным и сиюминутным контентом. Статьи про золотую сетку и правила потока это одно, статьи про анимации — совсем другое. И тем не менее, мы здесь.

Итак, вам, пожалуй, все уши прожужжали о том, что нужно пытаться избегать JS-анимаций, если вам не нужен полный контроль над анимацией. Что все CSS-анимации давно выполняются на GPU с шикарной производительностью. Что браузеры становятся лучше и лучше... А не совсем.

Итак, всем известна библиотека анимаций от GreenSock — GSAP. Её авторы очень постарались, чтобы собрать в ней буквально всё, что нужно. Подражателей и альтернатив море, включая Animate API, но с трона пока не скинули.

И вот в 2015 году они записали интересный вебинар: "CSS animations performance: the untold story", вот и ссылка: https://greensock.com/css-performance/

Ну и сразу на видео: https://youtu.be/1ZWugkJV5Ks

TL;DR: если вы совмещаете transform-анимации с анимированием позиции, вас ждёт неприятный сюрприз.

Погоди, скажете вы, всем известно, что анимировать left-top это мерзко и вообще, ведь богоподобные трансформы исполняются на GPU.

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

А не так, господа, синхронизация потоков выполнения GPU и CPU-анимаций и перерисовок. Даже сейчас, запуская их демо на моём M2, я вижу подёргивания на CSS-версии: https://codepen.io/GreenSock/full/2a53bbbcd47df627f25ed1b74beb407d/

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

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

А почему я вообще начал с упоминания 2015 года? Ну, я думал, за столько лет стало получше. Оказалось, чуть хуже, чем ожидалось.

#css #js #gsap #animation #transform

Добавили сканер уязвимостей в Yandex Container Registry

Платформа Yandex Cloud открыла общий доступ к сканеру, который до этого был доступен только в режиме превью.

С помощью него вы можете:

— проводить анализ контейнерных образов на предмет уязвимостей;
— использовать крупнейшую базу уязвимостей;
— сканировать образы при непрерывном развёртывании приложений;
— создавать CI-сценарии для проверки безопасности.

Из нового — теперь можно сканировать контейнерные образы автоматически при загрузке.

Сканер уязвимостей работает только с образами из Container Registry.

Подробнее о сканере уязвимостей ➡️

#codepen дня

May the Fourth be with you!

https://codepen.io/jh3y/pen/abzvyXG

#фишка дня

Полтора года назад я разгонял тему про реализацию виджета аккордеона. Ну или collapsible, иначе говоря: https://t.iss.one/htmlshit/591

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

Но тут такое дело... в Firefox уже достаточно давно можно было анимировать высоту ячейки грида через grid-template-rows: https://t.iss.one/htmlshit/834

И вот теперь, наконец, можно и в Chrome и в Safari! Ура, дамы и господа!

Codepen c примером: https://codepen.io/chriscoyier/pen/wvxwgae

Счастье есть, короче говоря.

#css #accordion #collapsible #бородач

#книга дня

Я уже писал года два назад о книге
Web Browser Engineering, описывающей разработку простого браузера с нуля: https://browser.engineering/

Но они же не останавливались, и последняя на данный момент часть — про встраиваемые элементы — вышла в марте.

Описываются все сложности, преследующие разработчиков на каждом этапе разработки. Естественно, свой Chrome написать после прочтения не выйдет, но лучше понять, как работают браузеры — вполне.

Но в любом случае, чтение достаточно хардкорное :)

#python #dev #browser

#ссылка дня

Я не особо люблю монстров вроде Next.js. В особенности, он и ему подобные фреймворки вводятся как дефолт, но, надо признать, для индустрии они делают достаточно много.

Итак, все же любят примеры, верно? Давайте взглянем на подборку и статью от Адди Османи. Что же в ней такого?

А тем, что тут и Next.js-роутер и Server Components, с пылу с жару от Next.js 13: https://addyosmani.com/blog/react-server-components-app-router/

Пора осваивать гибридный подход, господа! :)

#react #nextjs #servercomponents

Не удержался, простите.

#ссылка дня

"The journey of the React Component" — "Путь компонента в React", буквально — вот так незамысловато называется интерактивный проект Алекса Сидоренко: https://alexsidorenko.com/react-journey

Его цель — провести вас по всем основным процессам, происходящим во время рендера компонента, включая хуки. На данный момент рассмотрен только useState, но начинание уже очень крутое. Кому-то, возможно, будет понятнее, чем чтение статей и исходников React.

Правда, я не сразу понял, что где-то можно кликать, а где-то нет... 😅️️️️️️ Но то такое.

#react #render #tutorial

#фишка дня

Является ли CSS языком программирования?

Тьюринг-полным — нет. Но CSS — де-факто — это декларативный язык описания интерфейсов, и развитие его идёт в этом направлении довольно чётко.

Впрочем, fizzbuzz на CSS решается даже слишком элегантно: https://codepen.io/SachaG/pen/nwazRo

Так вот, к чему это я. Вы вообще в курсе, что в CSS есть типы? А они есть. И на их основе можно реализовать некоторые математические функции.

Тригонометрические вон завезли недавно, а математические пока только в Safari.

Давайте попробуем исправить это недоразумение и реализуем abs, floor, round, ceil, mod и rem на CSS и его типах. Начнём с модуля:

--abs: max(var(--a), -1*var(--a));

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

Теперь к сути дела. Давайте реализуем round:

@property --round {
syntax: '<integer>';
initial-value: 0;
inherits: false;
}

--round: var(--a);

Вот щас может стать немножечко больно: мы объявили переменную (custom property, для зануд) --round и указали CSS, что её тип — целое число. Теперь браузер возьмёт и... и округлит значение математически при присваивании (опять для зануд: да, это де-факто присваивание).

А как сделать floor — округление вниз? Как-как:

--floor: calc(var(--a) - .5);

А ceil — округление вверх?

--ceil: calc(var(--a) + .5);

Естественно, перед этим надо объявить переменные --floor и --ceil как целые числа.

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

Пока можете подумать, где это применить 😉

#css #types

#баг дня

Один браузер для всех это же так прекрасно, не правда ли?

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

Например, этот: https://bugs.chromium.org/p/chromium/issues/detail?id=914451

TL;DR: такое количество боли в комментариях мало где найти можно. Причина? С 2014 года игнорируется атрибут autocomplete="off" на формах.

К чему это приводит? К сломанным виджетам выбора с автоподстановкой (autocomplete, combo-box), сломанным интерфейсам выбора даты, к ошибочным заказам в интернет-магазинах... Да просто почитайте поток ненависти 🙂

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

Количество предложенных хаков для исправления огромно, от contenteditable вместо полей ввода до рандомных строк в autocomplete.

Дискуссия ещё и перегибает палку там и очень часто. Потрясающее чтение, рекомендую.

#chrome #google #evil

#статья дня

Каким-то образом 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 #бородач