Skip to content

Instantly share code, notes, and snippets.

@polyakovin

polyakovin/YaLoveFrontend.md

Created February 16, 2019 22:46
Show Gist options
  • Save polyakovin/36cc3405a9a9246925479cf494c1caed to your computer and use it in GitHub Desktop.
Save polyakovin/36cc3405a9a9246925479cf494c1caed to your computer and use it in GitHub Desktop.
Download ZIP
Synopsis of #YaLoveFrontend conference
Raw
YaLoveFrontend.md

Полезности с конференции «Я ❤ Frontend»

Запись трансляции

Здесь собрал наиболее полезные вещи, которые я выделил для себя из докладов этой конференции. К ним также добавил (постарался не искажать информацию) и свои идеи и недостающие кусочки информации.

О настоящем и будущем браузера

Новые события в Яндекс.Браузере

document.addEventListener('freeze', (event) => {
  // The page is now frozen.
});

document.addEventListener('resume', (event) => {
  // The page has been unfrozen.
});

if (document.wasDiscarded) {
  // Page was previously discarded by
  // the browser while in a hidden tab
}

Как работать с анимацией в JS

Не через setTimeout()!

var requestId = 0;
function animate(time) {
  // ...
  requestId = window.requestAnimationFrame(animate);
}

function start() {
  requestId = window.requestAnimationFrame(animate);
}

function stop() {
  if (requestId) {
    window.cancelAnimationFrame(requestId);
  }
  requestId = 0;
}

Красивая загрузка страниц

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

Выделение ссылок в Google Chrome

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

Полезные ссылки

Дом света

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

Следуя лишь рекомендациям этих помощников можно кардинально улучшить качество своего продукта.

Полезные ссылки

Вебпак, вид сквозь монокль

История сборщиков

Вебпак очень гибко настраивается под нужды проекта. При оптимальных настройках (как в этом обзоре) скорость обновления проекта может доходить до 0.2 секунд, что очень и очень здорово!

Что можно делать со статическими файлами

  • JS
    • lint
    • transpile
    • polyfill
    • bundle
    • minify
  • CSS
    • lint
    • transpile
    • polyfill
    • bundle
    • minify
  • Assets
    • resize
    • optimise

Что подсвечивать?

  • eslint-loader
  • tslint-loader
  • stylelint-webpack-plugin
  • flow-babel-webpack-plugin

Как увеличить производительность?

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

Динамическая подгрузка частей приложения

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

Полезные ссылки

Разрываем монолит

Когда внутри твоего приложения много мелких виджетов и микро-сервисов (других приложений), то возникает необходимость в хорошей организации общего кода. Например, можно воспользоваться подходом «Micro Frontends», в котором большое приложение выступает в роли бекенда, а маленькие — каждый по себе в виде фронтенда. А именно

  1. Каждое мелкое приложение запихнуть в <iframe> и научить приложения общаться между собой с помощью метода window.postMessage(message, targetOrigin, [ transfer ]).
  2. Воспользоваться методом «Server Side Includes (SSI)» <!--#include file="header.html"-->. По сути то же самое, только без <iframe>. Есть также проект Mosaic, которая пользуется этим же подходом.

Полезные ссылки

SVG-фильтры

Что умеют SVG-фильтры?

Способность Свойство
Заливка цветом feFlood
Добавление картинки feImage
Повторение feTile
Облака feTurbulence
Размытие feGaussianBlur
Сужение/расширение feMorphology erode/dilate
Смещение feOffset
Волны и искажения feDisplacementMap
Тень feDropShadow
Режимы наложения feBlend multiply/screen
Управление цветом feColorMatrix hueRotate/matrix/luminanceToAlpha
Управление каналами feComponentTransfer
Резкость feConvolveMatrix
Источники света feSpecularLighting
Источники света feDiffuseLighting
Склейка слоёв feMerge
Обрезка слоёв feComposite

Управление источниками

<svg>
  <filter id="my-fancy-filter">
    <feGaussianBlur
      stdDeviation="5"/>
    <feColorMatrix in="SourceGraphic"
      type="saturate" values=".5"/>
  </filter>
</svg>
<filter id="wind">
  <feGaussianBlur stdDeviation="30"/>
  <feOffset dx="-30" result="offset"/>
  <feMerge>
    <feMergeNode in="offset"/>
    <feMergeNode in="SourceGraphic"/>
  </feMerge>
</filter>

Анимация

const primitive = document.querySelector('#turbulence');
function changeProp() {
  primitive.setAttribute('seed', primitive.seed.baseVal + 1);

  setTimeout(() => {
    requestAnimationFrame(changeProp);
  }, 75);
}
requestAnimationFrame(changeProp);

Полезные ссылки

Чиним

Изображения содержат в себе полезные метаданные в формате EXIF (Exchangeable Image File Format), которые можно распарсить из бинарника («обычная фронтендерская задача») и использовать в своих целях.

Вот здесь можно посмотреть результаты трудов Дмитрия Махнёва по исправлению бага с ориентацией изображения.

Делайте из слона муху

Гифки лучше показывать как видюшки. Можно переконвертировать с помощью ffmpeg:

ffmpeg -i bolt.gif -movflags faststart -pix_fmt yuv420p -crf 0 bolt.mp4

А если очень хочется оставить именно анимашку, а не видосик, то можно пользоваться этой утилитой gif2webp:

gif2webp bolt.gif -o bolt.webp

Способы рисовать в вебе:

  • CSS-графика
  • SVG
  • Canvas
  • CSS Paint API

Способ нарисовать иконку «бургерного меню» в CSS.

.burger {
    width: 12px; height: 10px;
    background-image: repeating-linear-gradient(
        #4b86c2, #4b86c2 2px,
        #fff 2px, #fff 4px
    );
}

А есть ещё и CSS Paint API. Вот, как он работает.

div {
    --burger-color: #4b86c2;
    background-image: url('burger.png');
    background-image: paint(burger);
}
CSS.paintWorklet.addModule('burger.js');

А вот и сам burger.js:

class Shape {
    static get inputProperties() {
        return ['--burger-color'];
    }
    paint(context, geometry, properties) { … }
}

registerPaint('burger', Shape);

const color = properties.get(
    '--burger-color'
);

context.fillStyle = color;
context.fillRect(0, 0, 120, 20);
context.fillRect(0, 40, 120, 20);
context.fillRect(0, 80, 120, 20);

Как загружать картинки для разных мониторов

<picture>
    <source type="image/webp"
         srcset="cat@2x.webp 2x
                 cat.webp 1x">
    <img srcset="cat@2x.jpg 2x"
            src="cat.jpg" alt="Рыжий кот">
</picture>
<img srcset="cat@3x.jpg 3x"
     srcset="cat@2x.jpg 2x"
        src="cat.jpg"
     alt="Рыжий кот">

Для ретины достаточно атрибута srcset.

В CSS можно загружать SVG-картинки прямо кодом.

button {
    background-image: url('data:image/svg+xml,%3Csvg xmlns
        ='http://www.w3.org/2000/svg' viewBox='0 0 12 10'
        fill='%234b86c2'%3E%3Crect width='12' height='2'
        x='0' y='0'/%3E%3Crect width='12' height='2' x='0'
        y='4'/%3E%3Crect width='12' height='2' x='0' y…');
}

Ленивая загрузка

<img src="picture.jpg" lazyload="on">
<!-- on — откладывает запрос до контента -->
<!-- off — запрашивает сразу же -->
<!-- auto — как решит браузер -->

Приоритет загрузки

<img src="picture.jpg" importance="low">
<!-- high — повышает приоритет загрузки -->
<!-- low — понижает приоритет загрузки -->

Если очень-очень нужно, то осторожно можно:

<link rel="preload" href="picture.jpg" as="image">

Неблокирующий рендеринг

<img src="picture.jpg" async="on">
<!-- on — ждёт, когда у браузера будет возможность -->
<!-- off — декодирует сразу, блокируя основной поток -->

С помощью JS (пока работает только в хроме):

const img = new Image();
img.src = 'picture.png';

img.onload = () => {
    // Вставка img
};

img.decode().then(() => {
    // Вставка img
});

Проверка поддержки

const img = new Image();
img.src = 'picture.webp';

img.decode().then(() => {
    console.info('WebP');
}).catch(() => {
    console.warn('Извини');
});

Полезные ссылки

Что стоит за дизайн-системой Яндекс.Маркета?

Дизайн-процессы можно автоматизировать и систематизировать. Но в этом много неоднозначных моментов. Нужно стараться сделать свою систему максимально определённой.

Полезные ссылки

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment