#codepen дня

Давайте немного развлечёмся. Кто-то не так давно в чате канала выкатил большой SCSS-цикл для анимации, но саму анимацию зажал (ай-яй-яй).

Давайте исправим положение и сделаем что-то насущное.

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

Поехали: https://codepen.io/alinaki/pen/ZEaOdKq

Заодно использована интересная фишка CSS Grid: наложить две ячейки друг на друга без абсолюта.

#css #grid #animation #scss #бородач

#статья дня

До сих пор не умеешь пользоваться терминалом? Или не знаешь, зачем это вообще фронтендеру?

Джош Камю с большой статьей о том, зачем фронтенд-разработчику уметь пользоваться консолью: https://www.joshwcomeau.com/javascript/terminal-for-js-devs/

Отличное руководство для начинающего, надо сказать. Даже . и .. объяснены :)

#cmd #terminal #бородач

#статья дня

Начиная с iOS и iPadOS 16.4, ваши PWA-приложения могут не только принимать пуши, но и отображать число уведомлений на своей иконке.

Это про Progressive Web App, почему-то в русском языке всё время хочется прибавить слово "приложения", как в CD-диск — "диск".

API максимально простой, всё, что требуется — одобрение от пользователя, а дальше можно установить Service Worker для проверки push-уведомлений и поехали.

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

Ну и, собственно, статья от разработчиков WebKit обо всём об этом: https://webkit.org/blog/14112/badging-for-home-screen-web-apps/

#ios #push

#статья дня

Точнее, целый лонгрид дня. А точнее, целых три. Ну, так получилось.

Итак, задумывались ли вы когда-нибудь о том, как происходит процесс создания дизайна интерфейсов или даже целой дизайн-системы? Что за этим стоит?

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

Очень грубо говоря — описан весь цикл создания дизайна продукта.

На vc.ru выходил переработанный материал в двух главах, возможно, так будет удобнее: раз и два.

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

В общем, рекомендую заварить чаю и погрузиться в чтение. Затягивает.

#design #ui #widgets

#видео дня

Что приходит в голову при упоминании сложных анимаций?

Ну, Lottie, очевидно. Кто-то что-то нарисовал в After Effects Bodymovin, потом это экспортировали в специально сформированный JSON и, собственно, плеером-плагином запустили в огромном количестве сред, от веба до мобил и десктопов. Да, ваши любимые стикеры и реакции в Telegram тоже Lottie.

Есть ли альтернативы? Конечно! Например, активно набирает обороты Rive. Это векторный редактор, заточенный специально под анимации.

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

Ладно, к чему это я. Вот видеоурок по интеграции Rive-анимации в React-приложение: https://youtu.be/5hvhOb9zLeg

Анимация простая, но попробуйте скачать что-нибудь с сайта сообщества и попробовать сами :)

Удачи в анимировании, котаны!

#rive #инструмент #tool #lottie #animation

#ссылка дня

Олды тут?

Когда я начал официальную рабочую карьеру как верстальщик, в 2006 году, не было в интернете ресурса круче по CSS чем https://cssplay.co.uk/

И что-то мне подсказывает, что и нет.

Автору уже тогда было под 60, сейчас 74, но он фигачил и фигачит потрясающе сложные и при этом простые для понимания примеры вёрстки.

В 2009 году, например, в моде были выпадающие мега-меню, у него десятки их примеров. Естественно, без хаков для IE6 тогда не обходилось вообще ничего. Before, after? Забудьте. Flex? Забудьте. Float во все поля.

Коллекция меню поражает воображение. И до сих пор обновляется!

Раскладки на любой вкус и браузер. Всё категоризировано. Тоже обновляется!

Ну и он один из первопроходцев игр на CSS: https://www.cssplay.co.uk/menu/cssplay-whack-a-rat.html

В общем, без тени сомнения, Стюарт когда-то буквально стартанул мою карьеру и поддерживает веру в выбранное направление.

Не старейте, котаны.

#бородач

#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

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