Brotli приходит в Edge

26 Декабря 2016, 03:53

Microsoft объявила о том, что браузер Edge в операционной системе Windows 10 получит поддержку алгоритма сжатия Brotli.

С версией EdgeHTML 15.14986, Microsoft Edge начнет поддерживать алгоритм сжатия контента Brotli в начале 2017 года, с выходом обновления - Windows 10 Creator’s Update.

Brotli имеет открытый исходный код и позволяет эффективнее сжимать данные на 20%, чем предыдущая версия, Zopfli. Brotli работает лучше, чем lzma и bzip2, а по заверению Google по скорости работы новый алгоритм можно сравнить с Deflate ZLIB. На данный момент Brotli поддерживается в Firefox 44, Chrome 50, Android browser 50, Chrome for Android 50 и Opera 38.

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

Меню с гамбургером

20 Декабря 2016, 02:16

Для использования иконки гамбургера в мобильном меню, часто используют иконки из fontawesome (подгружая для этого весь шрифт с иконками). Что, несомненно является неоправданной тратой ресурсов. Так, например, файл шрифта может весить от 70 до 120кб, в зависимости от формата, что зачастую превысит размер кода самой страницы.

Что бы не пересобирать шрифт с нужными глифами, есть прекрасный вариант с svg-иконками icomoon.io - который позволяет экспортировать любой нужный глиф в svg-формате.

Например, что бы добавить гамбургер в страницу, нужно добавить в CSS:

.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
}

Определить символ в теле страницы:

<symbol id="icon-menu" viewBox="0 0 32 32">
<title>menu</title>
<path class="path1" d="M2 6h28v6h-28zM2 14h28v6h-28zM2 22h28v6h-28z"></path>
</symbol>

Добавить саму иконку:

<svg class="icon icon-menu"><use xlink:href="#icon-menu"></use></svg>