Заметки

Если кто-то вдруг не видел: некто Энтони Винсент перепел песню Linkin Park – In the End с использованием 20 различных стилей музыки. Просто великолепно.

Составил небольшой список программ, без которых мне было бы очень плохо жить и пользоваться лэптопом.

PuntoSwitcher

Как ни крути, а раскладку клавиатуры хотя бы раз каждый из нас забывал поменять. И если поисковые системы уже давно умеют определять сие недоразумение, то операционные системы до сих пор не могут этого делать. PuntoSwitcher для этого и сделан.

Облачные хранилища

Dropbox, Copy, Mega, 4sync, Yandex.Disk, Google Drive: любая из этих программ облегчит синхронизацию файлов между различными устройствами и работу с ними в разных местах. Лично я пользуюсь тремя – Copy, Mega, iCloud Drive.

Продолжение

При разработке отзывчивых сайтов в CSS используются всеми любимые @media-запросы. В 99% случаев в коде можно увидеть только запросы содержащие min-width, max-width, min-device-width и max-device-width. Иногда попадаются запросы на тип устройства и его положение в пространстве.

С выходом устройст с высокой плотностью экрана, например Retina от Apple, возникала проблема отрисовки некоторых элементов на таких дисплеях. В CSS есть специальный media-query и для этих целей.

Пример для экранов «яблочных устройств»:

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
    /* CSS для ретины */
}

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

/* 1.25 dpr */
@media
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi){
    /* CSS для ретины */
}

/* 1.3 dpr */
@media
(-webkit-min-device-pixel-ratio: 1.3),
(min-resolution: 124.8dpi){
    /* CSS для ретины */
}

/* 1.5 dpr */
@media
(-webkit-min-device-pixel-ratio: 1.5),
(min-resolution: 144dpi){
    /* CSS для ретины */
}

/*2.0 dpr */
@media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi){
    /* CSS для ретины */
}

Взял отсюда.

Ненароком обнаружил дома диск с фотографиями 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;
};