Блог ни о чём

vimrc

«В любом месте веселее вместе»

Примерно полгода назад я начал пользоваться вимом в качестве моего editor of choice, и наконец пересилил свою лень и выложил свой конфиг на гитхаб. Для того чтобы я всегда мог без танцев с бубном обновлять плагины, которые я использую, я воспользовался подходом, описанным здесь и чуть дополненным здесь.

Фактически подход сводится к установке замечательного плагина Pathogen и всех остальных через гитовые сабмодули. Я пошел чуть-чуть дальше и написал дополнительно небольшой скрипт, который выложил там же на гитхабе. Теперь для того, чтобы настроить вим на новом месте мне достаточно лишь выполнить команду curl http://vxsx.github.com/vimrc/ | sh.

How cool is that?

Accesskey

Пару дней назад Яндекс сделал свою строку поиска прилипающей.

Когда вы начинаете скролить страницу, поисковая стрелка прилипает к верхней границе окна. Если после прочтения энного результата вы захотите перезадать запрос, теперь не обязательно возвращаться в начало страницы.

Всё это, конечно, красиво, но зачем оно надо мне до конца не понятно. Новая строка занимает лишнее место, глючит местами, а плюсов не так уж и много. Лучше бы они наконец accesskey вкрутили, и плевать на различия хоткеев в разных браузерах. 

К гуглу это, кстати, тоже относится, ведь через хоткей я никак не могу попасть в строку поиска, благо в хроме я могу нажать Command + L и начать искать.

Незаслуженно забытый атрибут, я так считаю.

CSS1K

Принял участие в замечательном проекте CSS1K. Моя тема называется slowpoke потому что в ней я попытался собрать то прекрасное из CSS3, чем увлекаться не следует, например анимации в ущерб логике, функциональности и скорости как рендеринга, так и общей работы страницы. Судя по всему мне удалось это сделать, потому что даже автор не сразу сообразил что и как. В общем рекомендую посмотреть самим, лучше всего в последних вебкитах.

Ссылка на гитхаб проекта: https://github.com/jacobrask/CSS1K
Ссылка на мой «вклад» в него: http://css1k.com/#slowpoke

Самому мне, кстати, больше всего нравится тема Swiss, потому что именно так и нужно делать в моем понимании — чистенько и красиво, но я так сделать не успел, а повторять как будто нельзя.

command + enter

Столкнулся с тем, что на многих блогохостингах существует такая возможность как отправка комментария по Ctrl + Enter, но как правило никто не задумывается о пользователях mac os, где гораздо более привычное сочетание клавиш — Command + Enter, так как Ctrl расположен не самым удобным образом + он всего с одной стороны. Ну раз уж хотел себе такую штуку прикрутить, так почему бы и не по уму.

Итак, учитывая что мы используем jquery (хотя можно и на чистом js, благо мануалов много):

var commandPressed = 0,
    mac = ( navigator.platform.toLowerCase().indexOf('mac') + 1 ) ? '1':'0';
    //смотрим мак или нет
    //это не обязательно проверять яваскриптом, я у себя проверяю в php, для того чтобы
    //вывести разный вспомогательный текст, см рис. 1а и рис. 1б
$(function(){ //document.ready
    $('textarea').keydown(function (event) {
        if ( (13 == event.keyCode) && ( !mac ) ) {
            //для windows (или linux) все довольно просто,
            //так как существует event.ctrlKey
            //это сработает и на маке, но
            //нам ведь не это нужно
            if (event.ctrlKey) {
                $('#form').submit()
            }
        }
        if (mac) {
            if ((91 == event.keyCode) || (93 == event.keyCode)) { //левый и правый command
                commandPressed = 1; //отлавливаем нажатие кнопки command
            }
        }
        if ( ( 13 == event.keyCode ) && ( mac ) && ( commandPressed ) ) {
            //если нажимаем на Enter, на маке, да еще и с зажатой кнопкой command :)
            $('#form').submit()
        }
    })
    $('textarea').keyup(function (event) {
        if ((91 == event.keyCode) || (93 == event.keyCode)) {
            commandPressed = 0;
            //на отпускание кнопки проверяем отпустили ли command,
            //если да, то обнуляем глобальную переменную
        }
    })
})

У себя я определяю платформу в php, так как я вывожу разные подсказки, хотя это тоже можно делать яваскриптом.


Рис. 1а — Mac

Рис. 1а — Win (ну и Lin вощемта, но не важно)

Вроде бы всё.

-webkit-appearance

При разработке сайтов мне хочется чтобы все было хорошо и на мобильных устройствах. Тестируя один сайт на айпаде обратил внимание на то, что к стандартным контролам, таким как текстовые поля, кнопки и т. п. применяются стандартные стили чтоб они выглядели как нативные — например внутренняя тень и скругленные уголки к текстовым полям и градиенты к кнопкам.

Покопавшись в гугле и Safari CSS Reference я нашел замечательное свойство -webkit-appearance, которое и заставляет контролы на  «некоторых мобильных устройствах» выглядеть как нативные. Можно использовать -webkit-appearance:none; для того чтобы обнулить все или (что было нужно именно мне) -webkit-appearance:caret; чтобы только убрать внутреннюю тень в текстовых полях.

Давным-давно

В итоге я решил сделать свой виджет твиттера на основе туториала в предыдущем посте, но возникло небольшое затруднение в виде времени твита, которое передавалось в виде Fri, 15 Oct 2010 06:56:36 +0000, а хотелось чтобы выводилось в виде 3 часа 24 минуты назад. Но нет ничего невозможного и яваскрипт нам в помощь:

// функция для выбора
// верного набора названий временных отрезков
function whichlabels (number) {
    var c = number % 100;
    if(c > 6 && c < 21 ) return 0;//6 лет но 21 год и так далее
    else {
        c = (c % 10);
        if (c == 1) return 1;
        else if( c > 1 && c < 5) return 2;
        else return 0;
    };
}
function timeSince(postDate) { //postDate - unix timestamp
    var i, j, name, name2, seconds, seconds2, count, count2,
        chunks = [ // временные отрезки
            [60 * 60 * 24 * 365], //год
            [60 * 60 * 24 * 7], //неделя и так далее
            [60 * 60 * 24],
            [60 * 60],
            [1  * 60],
            [1  * 1]
        ],
        labels = [
            [ 'лет',  'недель', 'дней', 'часов', 'минут',  'секунд'  ],
            [ 'год',  'неделя', 'день', 'час',   'минуту', 'секунду' ],
            [ 'года', 'недели', 'дня',  'часа',  'минуты', 'секунды' ]
        ],
        today = Math.round(new Date().getTime() / 1000), //unix timestamp для сегодняшнего дня
        since = today - parseInt(postDate, 10); //временной отрезок в секундах который нам и нужно "перефразировать"
        for (i = 0, j = chunks.length; i < j; i++)
        {
            seconds = chunks[i];
            if ((count = Math.floor(since / seconds)) != 0)  // находим наибольший целый временной отрезок, который нам подходит
            {
                name = labels[whichlabels(count)][i]; //находим для него подходящее название
                break;                                //и выходим из цикла
            }
        }
        print = count + ' ' + name; //заносим в искомую строку
        if (i + 1 < j - 1) //чтоб если первыми были выбраны минуты - кол-во секунд не показывать
        {
            seconds2 = chunks[i + 1]; //следующий временной отрезов
            //since - (seconds * count) - остаток после вычета первого отрезка
            if ((count2 = Math.floor((since - (seconds * count)) / seconds2)) != 0)
            {
                name2 = labels[whichlabels(count2)][i+1];
                print += ' ' + count2 + ' ' + name2;
            }
        }
        print += " назад"; // :)
        return print;
}

Как будто все, теперь осталось только преобразовывать получаемую нами дату в unix timestamp:

$.ajax({
    type : 'GET',
    dataType : 'jsonp',
    url : 'http://search.twitter.com/search.json?q=from:vxsx&rpp=1',
    success : function(tweets) {
            var twitter = $.map(tweets.results, function(obj, index) {
            return {
                tweet : obj.text,
                time : timeSince(new Date(obj.created_at).getTime()/1000)
                // нам приходит obj.created_at, мы его преобразуем при помощи метода getTime()
                // во время в милисекундах и потом во время в секундах
            };
       });
       $('#tweets').tmpl(twitter).appendTo('#last-tweet');
    }
})

Теперь точно всё, если что-то не ясно → в комментарии.

Демку для наглядности я обновил.

jQuery.tmpl

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

Первым делом нужно скачать сам плагин по ссылке. Если мне не изменяет память, то 16го октября выйдет jQuery 1.4.3 и этот плагин с парой других уже будет входить туда. Но пока так.

Как понятно из описания плагина он предназначен для удобного преобразования неких данных в html. Мы будем делать список твитов, поэтому шаблон будет выглядеть примерно так:

<script id="tweet" type="text/x-jquery-tmpl">
    <li>
        <img src="${pic}">
        <h2>${user}</h2>
        <p>${tweet}</p>
    </li>
</script>

Следует обратить внимание, что у скрипта есть id и тип text/x-jquery-tmpl, их необходимо обязательно указывать. Элементы списка у нас есть, теперь нужен и сам список:

<ul id="twitter"></ul>

Теперь нам нужно получить данные из твиттера. Для этого будем пользоваться search.twitter.com. Простенький аякс запрос:

$.ajax({
    type : 'GET',
    dataType : 'jsonp',
    url : 'http://search.twitter.com/search.json?q=vxsx',
    success : function(tweets) {
        console.log(tweets);
    }
})

Здесь console.log(tweets) нам нужен для того чтобы посмотреть что нам приходит.


Рис. 1.1 — Отправляем тестовый запрос

Рис. 1.2 — Смотрим что нам пришло

На рис. 1.2 видно, что самое интересное нам приходит в tweets.results, который собственно является массивом твитов, которые мы хотим вывести. Для простейшего вывода твитов нам понадобятся свойства from_user, profile_image_url, и собственно text

Теперь нам нужно полученные данные подставить в имеющийся шаблон:

$.ajax({
    type : 'GET',
    dataType : 'jsonp',
    url : 'http://search.twitter.com/search.json?q=vxsx',
    success : function(tweets) {
        var twitter = $.map(tweets.results, function(obj, index) {
            return {
                tweet : obj.text,
                user : obj.from_user,
                pic : obj.profile_image_url
            };
        });

        $('#tweet').tmpl(twitter).appendTo('#twitter');
    }
})

Что у нас получилось — функция $.map берет массив объектов и возвращает нам другой массив объектов в котором названия переменных совпадают с указанными нами в шаблоне. Далее идет собственно вызов плагина в котором мы говорим ему какой шаблон брать — #tweet, какие данные брать — twitter и куда это все после обработки вставить — #twitter.

Вот собственно и все, на этом примере основан мой маленький виджет твиттера в сайдбаре, и я показал лишь самый простой способ применения, а ведь там еще есть условные операторы {{if}} {{/if}}, циклы, блоки и тому подобное. Кому интересно, тот знает где искать документацию.

UPD. Сделал небольшую демку на скорую руку. Там всё то же самое только с небольшими модификациями.

hey ho let’s go

Идея создать свой блог созревала у меня довольно давно, еще с момента ухода из жежешечки, однако удалось сделать это только сейчас. Вроде сделал все что хотел, остальное наверно допилю потом.

Ну и, эцсамое, хелло ворлд.