Александр Петров

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

Результат группировки на выходе может быть разным. Но тут вполне себе подойдет, если в итоге будет объект, где ключ — название группы, значение — сами элементы (именно так _.groupBy и R.groupBy и работает). Далее просто проходимся по этому объекту и каждую группу сортируем (опять же map + sort\sortBy из lodash \ ramda). Если без них, то чуть сложнее.

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

Что вы подразумеваете под сделать «tabindex»? Чтобы элемент фокусился при нажатии табом?

Радио и так фокусятся. Только если вы не скрыли его через display: none (так делать не стоит). Используйте visuallyhidden.
Добавление tabindex="5" делает лейбл фокусящимся. Если вы этого не видете — то скорее всего у вас просто отключены стили для фокуса. Но использовать в tabindex значение отличное от 0 \ -1 крайне не рекомендуется.

Собственно самое правильное решение — это скрывать сами радио через visuallyhidden. Остальное уже костыли.

Полифил это хорошо, но работает он весьма медленно, поэтому лучше стараться не полифилить такие вещи.
Для фоллбека до процентов можно использовать простую конструкцию:

width: 100%;
width: 100vw;
height: auto;
height: 100vh

Если браузер знает vw \ vh, то предыдущея строчка перекроется. Если не знает, будет использовать первую с процентами \ auto.

1. Перевод этого кодгайда на русский уже есть.
2. Кодгайд работает на Jekyll.

Инспектор, вкладка Network, вкладка Fonts.
Сплошные 404ые.
До EOT у вас указан верный путь, а до остальных форматов нет.

Есть еще вариант, если вы верстаете под нормальные браузеры, использовать Flexbox и свойство order с нужным значением у нужных элементов.

При генерации шрифтов в белке есть опция Subsetting. По-умолчанию — там «Western Language», кириллица в них не входит.
Выбирайте нужное (No Subsetting или Custom) и будет вам счастье.

doiuse

Yahoo! Pipes

Из глобального:
1. Страница весит 1.6мб. Это жуткая жуть для такой страницы. Зачем все картинки в png? Он там не нужен. Переводите всё в jpg и оптимизируйте jpg – выигрыш в весе будет огромный.
2. Поддержка ретины. Сейчас это становится уже важным. Все иконки лучше перевести в svg. Или, как мининмум, сделать png@2x. Но вектор лучше, с ним удобнее работать и весит он порой меньше png.
3. Зачем там 2 файла стилей и несколько спрайтов? + стили правильнее минифицировать.

Сама верстка:
1. Почитайте про различные методологии. БЭМ, например. Селекторы типа .site-header .site-menu li a — боль.
2. Блок с логотипами. Вставить всё одной картинкой это, конечно, легко и просто. Но заказчик наверняка бы попросил сделать каждый логотип ссылкой на сайт. Или, например, когда понадобится добавить еще один логотип. добавлять его будет больно.
3. Для ссылок можно тоже transition добавить. Хуже от него не будет.

Это так, главное, что бросилось в глаза :)

Можете хранить изображения по папкам, по отдельности.
А в процессе сборки собирать все это в один спрайт.
Не вижу в этом никакой проблемы.