Примерно полгода назад я начал пользоваться вимом в качестве моего editor of choice, и наконец пересилил свою лень и выложил свой конфиг на гитхаб. Для того чтобы я всегда мог без танцев с бубном обновлять плагины, которые я использую, я воспользовался подходом, описанным здесь и чуть дополненным здесь.
Фактически подход сводится к установке замечательного плагина Pathogen и всех остальных через гитовые сабмодули. Я пошел чуть-чуть дальше и написал дополнительно небольшой скрипт, который выложил там же на гитхабе. Теперь для того, чтобы настроить вим на новом месте мне достаточно лишь выполнить команду curl http://vxsx.github.com/vimrc/ | sh.
Пару дней назад Яндекс сделал свою строку поиска прилипающей.
Когда вы начинаете скролить страницу, поисковая стрелка прилипает к верхней границе окна. Если после прочтения энного результата вы захотите перезадать запрос, теперь не обязательно возвращаться в начало страницы.
Всё это, конечно, красиво, но зачем оно надо мне до конца не понятно. Новая строка занимает лишнее место, глючит местами, а плюсов не так уж и много. Лучше бы они наконец accesskey вкрутили, и плевать на различия хоткеев в разных браузерах.
К гуглу это, кстати, тоже относится, ведь через хоткей я никак не могу попасть в строку поиска, благо в хроме я могу нажать Command + L и начать искать.
Принял участие в замечательном проекте CSS1K. Моя тема называется slowpoke потому что в ней я попытался собрать то прекрасное из CSS3, чем увлекаться не следует, например анимации в ущерб логике, функциональности и скорости как рендеринга, так и общей работы страницы. Судя по всему мне удалось это сделать, потому что даже автор не сразу сообразил что и как. В общем рекомендую посмотреть самим, лучше всего в последних вебкитах.
Самому мне, кстати, больше всего нравится тема Swiss, потому что именно так и нужно делать в моем понимании — чистенько и красиво, но я так сделать не успел, а повторять как будто нельзя.
Столкнулся с тем, что на многих блогохостингах существует такая возможность как отправка комментария по 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 вощемта, но не важно)
При разработке сайтов мне хочется чтобы все было хорошо и на мобильных устройствах. Тестируя один сайт на айпаде обратил внимание на то, что к стандартным контролам, таким как текстовые поля, кнопки и т. п. применяются стандартные стили чтоб они выглядели как нативные — например внутренняя тень и скругленные уголки к текстовым полям и градиенты к кнопкам.
Покопавшись в гугле и 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.Плагин прекрасен и на примере я покажу один из возможных способов как им пользоваться.
Первым делом нужно скачать сам плагин по ссылке. Если мне не изменяет память, то 16го октября выйдет jQuery 1.4.3 и этот плагин с парой других уже будет входить туда. Но пока так.
Как понятно из описания плагина он предназначен для удобного преобразования неких данных в html. Мы будем делать список твитов, поэтому шаблон будет выглядеть примерно так:
Следует обратить внимание, что у скрипта есть id и тип text/x-jquery-tmpl, их необходимо обязательно указывать. Элементы списка у нас есть, теперь нужен и сам список:
<ul id="twitter"></ul>
Теперь нам нужно получить данные из твиттера. Для этого будем пользоваться search.twitter.com. Простенький аякс запрос:
Здесь console.log(tweets) нам нужен для того чтобы посмотреть что нам приходит.
Рис. 1.1 — Отправляем тестовый запрос Рис. 1.2 — Смотрим что нам пришло
На рис. 1.2 видно, что самое интересное нам приходит в tweets.results, который собственно является массивом твитов, которые мы хотим вывести. Для простейшего вывода твитов нам понадобятся свойства from_user,profile_image_url, и собственно text
Теперь нам нужно полученные данные подставить в имеющийся шаблон:
Что у нас получилось — функция $.map берет массив объектов и возвращает нам другой массив объектов в котором названия переменных совпадают с указанными нами в шаблоне. Далее идет собственно вызов плагина в котором мы говорим ему какой шаблон брать — #tweet, какие данные брать — twitter и куда это все после обработки вставить — #twitter.
Вот собственно и все, на этом примере основан мой маленький виджет твиттера в сайдбаре, и я показал лишь самый простой способ применения, а ведь там еще есть условные операторы {{if}} {{/if}}, циклы, блоки и тому подобное. Кому интересно, тот знает где искать документацию.
UPD. Сделал небольшую демку на скорую руку. Там всё то же самое только с небольшими модификациями.
Идея создать свой блог созревала у меня довольно давно, еще с момента ухода из жежешечки, однако удалось сделать это только сейчас. Вроде сделал все что хотел, остальное наверно допилю потом.
