Денис Букреев

Инструкция есть, называется ТЗ от клиента.

Все сайты делают по-разному и требования к каждой задаче разные. Единый подход к созданию может быть лишь при работе в конторе/команде, когда вы сами устанавливаете стандарты для продукта. Говорю это как специалист по созданию иконок) У одних клиентов хорошие спецы, которые могут работать с современными технологиями ,а у других дятлы, которые иконки в джипеге до сих пор вставляют. Это первое.

Второе, иконки для сайта и фавикон это несколько разные вещи. Количество размеров фавикона может быть всего два (16рх и 32рх для ретины), а может быть около пятнадцати (для разных случаев отображения на мобильных устройствах). Для одних сайтов и их владельцев это критично, а для других вообще нет т.к. их ЦА не пользуется мобильным интернетом. Получается то же самое — сначала надо обсуждать с клиентом.

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

Вот один из примеров какие можно фавиконки готовить. Можно просто так:

• favicon-16x16.png
  
• favicon-32x32.png
  
• apple-icon-180x180.png
  

а можно еще и

• favicon-96x96.png
  
• apple-icon-57x57.png
  
• apple-icon-60x60.png
  
• apple-icon-72x72.png
  
• apple-icon-76x76.png
  
• apple-icon-114x114.png
  
• apple-icon-120x120.png
  
• apple-icon-144x144.png
  
• apple-icon-152x152.png
  
• android-icon-192x192.png
  

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

Как-то натыкался на сервис, который для любой jquery-вской функции делает аналог на чистом js. Но это нужно было лишь для того, чтобы ради одной фичи jQ не использовать всю либу. А если у вас много заюзано из этой библиотеки, то тогда смысла нету.

UPD:
Вот собственно линк:
youmightnotneedjquery.com

ffmpeg

habrahabr.ru

Модуль PageSpeed

Google потрудился и выпустил модуль к Ngnix и Apache для повышения производительности сайтов. Он увеличивает скорость загрузки, оптимизируя дофига всяких параметров, в том числе и фотки. Работает автоматически, его нужно только установить и включить:

pagespeed on;
pagespeed FileCachePath /var/cache/nginx;

Модуль делает все сам — и анализирует HTML, и оптимизирует ресурсы. Например, пережимает картинки или минифицирует статику. В исходниках страницы все оптимизированные ресурсы будут иметь другой путь.

Прямая оптимизация ресурсов

После оптимизации PageSpeed сохраняет файл по новому пути. Но как быть с фотками, отображаемыми через JavaScript? Или со ссылками на Ваши фотки на сторонних ресурсах? Тут на помощь приходит IPRO – оптимизация ресурсов не отходя от кассы, а точнее не изменяя URL.

Для этого достаточно включить в конфиг такие инструкции (для Nginx):
pagespeed InPlaceResourceOptimization on;

Конспект

Используйте PageSpeed для поиска проблем с графикой на сайте.
Если графики много, используйте серверные инструменты для оптимизации: jpegtran, jpegoptim, ImageMagick, pngquant, pngcrush.
Облачные инструменты для одноразовых задач и подключения по API: JPEGmini, tinyPNG, i.onthe.io/google_speed.
Модуль PageSpeed к Nginx/Apache сделает всю оптимизацию сам, но его нужно собирать.

function asyncLoop (bound) {
    function step(i) {
        if (i > bound)
            return;
        var image = parent.find('img').eq(i),
        image.addClass('active');
        setTimeout(function () { step(i+1) }, 5000)
    }

    step(1);
}

asyncLoop(5);

читаем что такое event loop, что такое колбэки и промисы и как вообще жить в асинхронном мире.

p.s. я подозреваю что число 500 там не с проста и вы таким образом хотите дожидаться окончания анимаций. Так вот, вместо хардкода значений используйте event listener и тогда задача сама собой решится.

Хотя на codepen все нормально

В codepen у вас весь контент виден и нигде не стоит display:none
Попробуйте обойти это примерно так

function subcatHeight() {
  var $subcategories = $('.subcategories-block'),
    $subMenu = $('.goods-menu__subcategories').css({ visibility: 'hidden', display: 'block' });

  $subcategories.each(function() {
    var $parent = $(this),
      item = $parent.find('.subcategories-block__item'),
      itemsLength = item.length,
      itemsHeight = 0,
      itemLonger = 0;

    item.each(function() {
      itemsHeight += $(this).innerHeight();

      if( $(this).innerHeight() > itemLonger )
      {
        itemLonger = $(this).innerHeight();
      }
    });

    $parent.css({
      "max-height" : itemsHeight/4 + itemLonger*0.7
    });
  });
  $subMenu.css({ visibility: '', display: '' });
}

A list of everything that could go in the of your...

Именно четыре колонки сделать не получится. Думаю, только max-height в js шаманить.
codepen.io/anon/pen/ZOKbPd

display: flex;
flex-wrap: wrap;
flex-direction: column;
max-height: 1000px;

МОжно дать одно имя, но в стилях прописать для чего он будет применяться (font-weight:, font-style)

@font-face {
  font-family: 'fs_elliot';
  src: url(fonts/fs_elliot_pro-bold.eot');
  font-weight: bold;
  font-style: normal;
}

Это просто перестраховка, на случай если в коде перед плагином не поставили точку с запятой. Интерпритатор их сам расставляет, но в некоторых ситуациях может поставить неправильно.
https://learn.javascript.ru/structure#semicolon

Никак. Если у вас, например, с сервера грузится шрифт с начертанием regular, а вы ему ставите font-weight: 700, то браузер сам будет пытаться сделать шрифт утолщенным. Зачастую это приводит к артефактам и вообще корявости шрифта. Для этого и нужные файлы со всеми начертаниями.
Когда вы подключаете гугл шрифты, вы указываете какие начертания собираетесь использовать.
А системные шрифты имеются на компьютере во всех начертаниях.

Начать читать документацию и смотреть код.

используйте разные виды кавычек " и '

Например:
'<div class="main"></div>'

320 пикселей это айфон 4, 5, на пример. Ну и многие андроид девайсы до 5 дюймов. Это без учета device-pixel-ratio, как уже отмечали. 360 пикселей у больших андроид смартфонов, на пример у галакси 7. Так что да, имеет смысл.