Дополнения по астронавту

Вчера я написал свой первый пост на Хабрахабр. Он, в какой-то мере, оказался заверщающим (для меня) в проекте с астронавтом. Дальше будут исправления багов и мелких недочетов, но принципиальных изменений в ближайшем будущем скорее всего не будет. С понедельника будет новый проект, поэтому сейчас я хотел бы упомянуть еще пару штрихов в плане сайта с астронавтом.

Пункт 1. Определение языка.

JavaScript-ом можно определить язык, который выбран у пользователя в браузере или в системе:

 var language = ( navigator.language || navigator.systemLanguage || navigator.userLanguage ).substr(0,2).toLowerCase();
 if ( h !== "ru" ) h = "en";

На сайте с астронавтом от этого зависит язык, на котором вылетают описания событий. Проверить другой язык можно, например, выбрав в Chrome другой язык отображения:

Всего на сайте два языка - английский и русский. Если у пользователя выбран любой другой язык, то будет отображаться английский.

Пункт 2. Распределение нагрузки.

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

function getRandomInt(min, max){
    return Math.floor( Math.random * ( max - min + 1 ) + min );
}

var srcss = ["server1/img.png","server2/img.png","server3/img.png"];
var img_i = getRandmonInt( 0, srcs.length - 1 );
var img = new Image();
img.onload = function(){
    // подставляем нашу картинку куда надо
};
img.onerror = function(){
    srcs.splice( img_i, 1 );
    if ( srcs.length > 0 ) {
        img_i = getRandmonInt( 0, srcs.length - 1 );
        img.src = srcs[img_i];
    } else {
        alert("Sorry, our server over capacity");
    }
};
img.src = srcs[img_i];

Все просто: при ошибке загрузки указываем новый адрес и пытаемя загрузить уже с него.

Пукнт 3. Определение мобильных устройств.

CSS3 transition выглядели на экранах смартфонов ужасно, поэтому было приянято решение скрыть их и выводить сразу ссылку на приложение в AppStore. Не знаю как все остальные определяют мобильные устройства, но я нашел вот такой метод. Опять же через JavaScript.

var Apple={};
Apple.UA = navigator.userAgent;
Apple.Device = false;
Apple.Types=["iPhone","iPod","iPad"];
for( var n = 0; n < Apple.Types.length; n++ ){
    var r = Apple.Types[n];
    Apple[r] = !!Apple.UA.match(new RegExp(r,"i"));
    Apple.Device = Apple.Device || Apple[r]
}

Все просто - ищем в строке UserAgent упоминая о iOS устройстве. Аналогично для Android и Windows Phone устройств.

Все эти моменты не попадали под тему статьи на хабре, поэтому приютились здесь. На этом все. До новых проектов!