Тестовое задание на React JS

Обычно я такой фигней не стардаю, но тут задачка интерсная и близкая к реальному миру.

Список ресторанов с разными вариантами фильтров и отображений.

Вот наваял Поиск с Сортировкой Ресторанов на React JS. Может еще чего-то добавлю со временем, Debug Info там интересный получилося.

Исходники выложил на GitHub, может кому-то полезно будет… Хотя писал я это за один день, так что не факт что стоит копировать мои решения не задумываясь 🙂

CSS @font-face без указания имени файла

Если вы купили web тему со кастомным шрифтом в виде CSS @font-face, но этот фонт не поддерживает Cyrilic или как-то криво отображается на разных устройствах, то вместо покупки похожего шрифта, проще всего заменить левый font на что-то стандартное: Arial, Times New Roman, Impact и т.д.

Я около часа гуглил и читал спецификации стандартов CSS/HTML чтобы разобраться как же можно задать @font-face без загрузки файла. Оказывается есть возможность задавать параметр @font-face.src: не только как url() но и через директиву local() !

Вот реальный пример из WordPress темы Tank которую я купил для сайта Привет Танкистам, а потом оказалось что фонт geometric_slabserif_703 для русского языка тупо не существует 😦

@font-face {
    font-family: 'webfontregular';
    src: url('geometric_slabserif_703_bold_condensed_bt-webfont.eot');
    src: url('geometric_slabserif_703_bold_condensed_bt-webfont.eot?#iefix') format('embedded-opentype'),
         url('geometric_slabserif_703_bold_condensed_bt-webfont.woff') format('woff'),
         url('geometric_slabserif_703_bold_condensed_bt-webfont.ttf') format('truetype'),
         url('geometric_slabserif_703_bold_condensed_bt-webfont.svg#webfontregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

А вот так я переопределил @font-face темы под виртуальным названием webfontregular на стандартный шрифт Arial:

@font-face {
    font-family: 'webfontregular';
    src: local('Arial');
    font-weight: normal;
    font-style: normal;
}

В общем @font-face src: local(‘Font Name’) рулит! А в стандартах описано слабо…