Меня зовут Николай, я Frontend-разработчик IT-компании Relog. Хочу рассказать о самых распространённых ошибках в вёрстке современных проектов.

Дело в том, что лишь малая часть современных фронтендеров обращает внимание на работу с HTML и CSS, предпочитая готовые решения, вроде UI-библиотек и систем сеток. Но эти решения неидеальные и приходится дописывать обёртки вокруг них, видоизменять код, переписывать стили и совершать прочие действия для соответствия требованиям проекта. Тут-то и начинаются проблемы: вёрстка местами становится избыточной, стили переназначются через important и с каждым релизом проект всё сложней поддерживать. Я уже не говорю об удобстве использования и доступности. Об этом думают вообще в последнюю очередь.

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

Пару недель назад на Хабре вышла хорошая статья с объяснением химических процессов, которые происходят при пожелтении и отбеливании ABS-пластика. Автор доступно изложил теорию, ну а я хотел бы дополнить её практикой. Так совпало, что где-то год назад я начал собственные эксперименты по восстановлению цвета. Пост будет в первую очередь интересен любителям ретро-железа, но не только им, поскольку изделия из такой пластмассы есть почти в каждом доме. Материал получился очень большим, так что я разобью его на две части.

Кратко напомню суть явления для тех, кто не читал статью. В состав ABS-пластика входят три основных компонента — акрилонитрил, бутадиен и стирол. Под воздействием тепла и ультрафиолетового излучения стирол распадается, образуя соединения жёлтого цвета. Однако в присутствии концентрированной перекиси водорода ультрафиолет, наоборот, способствует разрушению этих соединений, восстанавливая цвет. «Тот, кто нам мешает, тот нам поможет!».

Мы привыкли называть умными устройства, которыми можем управлять, не вставая с дивана. Включить лампочку, вентилятор, кофеварку или стиральную машину.

Колонки с Яндекс Алисой хоть и называются умными, но вы не можете изменить громкость не находясь рядом с колонкой (орать через всю комнату не считается). Вы не можете перемотать песню из мобильного приложения Яндекса. Или остановить сказку, запущенную на колонке в детской, из своей кровати в спальне.

В январе 2020 кто-то обнаружил, что Яндекс.Станция поддерживает некий локальный протокол. На GitHub начали появляться проекты по управлению Яндекс.Станцией. Мне хватило пару часов, чтоб разобраться и выпустить первую версию компонента для Home Assistant. Это достаточно популярная система домашней автоматизации, написанная на языке Python.

На сегодняшний день компонент поддерживает управление всеми колонками с Яндекс Алисой и при желании может выглядеть так:

«Покажите нам, что индустрия приняла её, и тогда мы тоже её поддержим»

JavaScript quality guide

От переводчика

tl;dr

Cжатие изображений всегда должно быть автоматизировано

• Обзор различных типов Placeholder’ов
• Placeholder на основе SVG (контуры, фигуры и силуэты)
• Автоматизация процесса.

Думаю, все уже знают, что современные браузеры умеют рисовать некоторые части страницы на GPU. Особенно это заметно на анимациях. Например, анимация, сделанная с помощью CSS-свойства transform выглядит гораздо приятнее и плавнее, чем анимация, сделанная через top/left. Однако на вопрос «как правильно делать анимации на GPU?» обычно отвечают что-то вроде «используй transform: translateZ(0) или will-change: transform». Эти свойства уже стали чем-то вроде zoom: 1 для IE6 (если вы понимаете, о чём я ;) для подготовки слоя для анимации на GPU или композиции (compositing), как это предпочитают называть разработчики браузеров.

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