Ненароком обнаружил дома диск с фотографиями WCG 2005 (© автор всех снимков Сергей Сетун).

Но давайте по порядку.

Делать одностраничные сайты – модный нынче тренд. Но всегда встает вопрос написания плавной анимации по разделам сайта. Можно конечно взять jQuery и какой-никакой готовый плагин. Но не для всех страниц есть смысл подключать «массивную» библиотеку, проще написать свое решение.

Напишем наше меню:

<ul class="menu">
    <li><a onclick="return app.scrollTo(this)" href="#news">Новости</a></li>
    <li><a onclick="return app.scrollTo(this)" href="#about">О нас</a></li>
    <li><a onclick="return app.scrollTo(this)" href="#contacts">Контакты</a></li>
</ul>

Дабы не писать метод добавления обработчика кликов по меню, я вписал вызов функции прямо в ссылку: onclick="return app.scrollTo(this)". Не самое лучшее, но сто процентов работающее решение.

В начале каждого раздела для любого элемента должен быть проставлен id с соответствующим значением, например id="news".

var app = {
    scrolled: 0,
    newPosition: 0,
    interval: null,
    speed: 0,

    scrollTo: function(el) {
        var link = el.getAttribute('href').replace('#', ''),
            anchor = document.getElementById(link);

        var location = 0;
        if (anchor.offsetParent) {
            do {
                location += anchor.offsetTop;
                anchor = anchor.offsetParent;
            } while (anchor);
        }
        location = location >= 0 ? location : 0;

        this.animateScroll(location);
        return false;
    },

    animateScroll: function(pos) {
        document.documentElement.scrollTop = 1;
        var element = (document.documentElement && document.documentElement.scrollTop) ? document.documentElement : document.body,
            start = element.scrollTop,
            change = pos - start,
            currentTime = 0,
            increment = 20,
            duration = 300;

        var animateScroll = function(){        
            currentTime += increment;
            var val = Math.easeInOutQuad(currentTime, start, change, duration);
            element.scrollTop = val;
            if(currentTime < duration) {
                setTimeout(animateScroll, increment);
            }
        };
        animateScroll();
    }
};      

Функция, реализующая ускоряющуюся и замедляющуюся в конце анимацию (не моя):

Math.easeInOutQuad = function (t, b, c, d) {
    t /= d/2;
    if (t < 1) return c/2*t*t + b;
    t--;
    return -c/2 * (t*(t-2) - 1) + b;
};

Я, честно, считаю, что грамотно купленные билеты из Минска – куда-либо – в Минск не намного дороже лоукоста из Литвы. Например купленные мною места в Милан и обратно обошлись мне в 106 евро в одну сторону. Но у меня был багаж, еда, напитки и мне не надо было ехать в Литву, или Польшу, или Москву, или Киев. Билеты купил, кстати, у Белавиа.

Однако в Милан я не полетел по этому билету, поперся немного позже другим рейсом. В Италии пришел в аэропрт, говорю вот у меня билет на рейс Милан-Минск. А мне в ответ. Вы сюда не полетели и Белавиа отменила ваши билеты. Оба, мать их, потому что куплены они были вместе. Какого ***, хотелось бы спросить! Где в таком случае мои деньги? Какая перевозчику разница, зарегистрировался я на рейс или нет? Пусть самолет летит с пустым местом, все равно деньги за это уплачены.

Спасибо менеджеру, который работает в Air Canada и решил мою проблему, зарегистрировав меня на рейс. А белорусскому национальному перевозчику – стыд и позор.

P.S. Перелет Минск-Лондон, Лондон-Дублин, Дублин-Минск обошелся мне в прошлом году всего в 300 баксов. Умейте искать билеты.

То, что в блог не попало, но разбавило мой инстаграм.

Вот тот CSS-файл, который я написал для сайта, сделанного в 2000-м году, поддерживаемого товарищами до 2002 года и работающему (частично до сих пор).

body {
    font-size: 15px;
    font-family: "Times New Roman", Times, serif;
}

select {
    background: #000000;
    font-size: 8pt;
    color: #FF9900;
    cursor: hand;
}

input.but {
    background: #000000;
    border-bottom: #000000 1px solid;
    border-right: #000000 1px solid;
    border-top: #777777 1px solid;
    border-left: #777777 1px solid;
    font-size: 8pt;
    color: #FF9900
}

td.menu {
    color: #FF9900;
    font-size: 12pt;
}

a:link {
    color: #FFAA00;
    font-size: 11pt;
    text-decoration:none;
}
a:visited {
    color: #FFAA00;
    font-size: 11pt;
    text-decoration:none;
}
a:hover{
    color: #CCCCCC;
    font-size: 11pt;
    text-decoration:none;
}

a.menu:link {
    color: #FFAA00;
    font-size: 12pt;
    text-decoration:none;
}
a.menu:visited {
    color: #FFAA00;
    font-size: 12pt;
    text-decoration:none;
}
a.menu:hover{
    color: #FF9900;
    font-size: 12pt;
    text-decoration:underline;
}

a.author:link {
    color: #777777;
    font-size: 8pt;
    text-decoration:none;
}
a.author:visited {
    color: #777777;
    font-size: 8pt;
    text-decoration:none;
}
a.author:hover{
    color: #CCCCCC;
    font-size: 8pt;
    text-decoration:none;
}

a.other:link {
    color: #777777;
    font-size: 11pt;
    text-decoration:none;
}
a.other:visited {
    color: #777777;
    font-size: 11pt;
    text-decoration:none;
}
a.other:hover{
    color: #CCCCCC;
    font-size: 11pt;
    text-decoration:none;
}

h3 {
    color: #FF9900;
    font-size: 15pt
}

Сам сайт вот здесь.

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

При разработке таких веб-приложений часто возникает множество вопросов. Один из самых важных – задержка между нажатием на какую-либо ссылку и срабатыванием события click. И чем больше устройств выходит на рынок, тем более острым становится этот вопрос. Если для Android и iOS просто необходимо было обрабатывать события на touchstart, touchmove, touchend, то с выходом новой Windows Mobile появились MSPointer events.

В данный момент существует большое количество решений этой проблемы. Однако Илья pukhalski Пухальский, с моей посильной помощью (очень маленькой), написал библиотечку tap, которая просто добавляет к стандартным событиям в JavaScript новое событие tap.

Теперь, подключив эту библиотеку, можно вешать обработчики на событие tap и все будет работать быстро и красиво.

Вот пример для Vanilla JS:

document.getElementById('any-element').addEventListener('tap', function (e) {
    // All the magic happens here
});

А вот для Jquery:

$('#any-element').on('tap', function (e) {
    // All the magic happens here
});

Посмотреть и скачать можно здесь: github.com/pukhalski/tap. Там же примеры для Zepto, Dojo, YUI, ExtJS.

Из моей статьи про военные сборы «сотоварищи» просят убрать свои фотографии. Страх в этой стране панически руководит людьми. Даже и не знаю, что по этому поводу сказать, нет слов одни эмоции!

Не хочу жить в такой стране, хочу жить в стране смелых и открытых людей!

Служба в белорусской армии - это не год или полтора, а почти «пожизненное» наказание. С 2010 по 2011 год я отслужил свой положенный по закону год, затем получил офицерское звание и по собственной глупости решил, что на том мои мучения в военной форме закончились. Но прошли три неполных года, и военкомат вспомнил обо мне. Армия позвала на офицерские сборы. Срочную службу я проходил в 103-й бригаде сил специальных операций в Витебске. Сборы же переквалифицировали меня в сапера и проходили в Печах. Главной и, пожалуй, единственной пользой стала та информация, которую удалось получить в результате разговоров с военными и другими призванными на сборы людьми. Но обо всем по порядку.

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

Пока топчу сапоги ничего писать не смог (болтается не дописанный пост про Берлин). Но скоро вернусь.

Как-то раз столкнулся с необходимостью сгенерировать в Javascript хэш из строки. Да не просто сгенерировать, а так, что бы он полностью совпал с хэшем, сделанным в Java. Полазил в интернете и нашел.

String.prototype.hashCode = function() {
    var hash = 0;
try {

    if (this.length == 0) return hash;

    for (i = 0; i < this.length; i++) {
        char = this.charCodeAt(i);
        hash = ((hash << 5) - hash) + char;
        hash = hash & hash; // Convert to 32bit integer
    }
    return hash;

} catch (e) {
    throw new Error('hashCode: ' + e);
}
};

Ссылка в gists.