Наноблог Артёма Сапегина

Веб-разработка

Маленький пример использования Deferred-объектов в jQuery 1.5

Недавно у меня была такая задача: нужно было выполнить несколько аяксных запросов и показать на странице индикатор загрузки. Причём, индикатор должен был крутиться не меньше некоторого времени, чтобы у пользователя не было ощущения, что после нажатия на кнопку ничего не произошло. После завершения всех запросов нужно было выполнить некоторое действие. Код тогда получился излишне объёмным и не очень красивым. Deferred-объекты, появившиеся в jQuery 1.5, позволяют решить такую задачу гораздо проще и элегантнее.

Читать дальше…

Комментарии 2

Шаблоны для jQuery (плагин jquery-tmpl)

Пару дней назад коллега спросил, знаю ли я какой-нибудь шаблонизатор для jQuery. И я вспомнил, что читал о плагинах, разработанных Майкрософтом, среди которых был и шаблонизатор jQuery Templates (jquery-tmpl). Заодно и сам разобрался, как он работает, и начал использовать в своём проекте. В обмен коллега показал мне удобный способ хранения шаблонов.

Читать дальше…

Комментарии 2

Превращение script.js в script.min.js с помощью Closure Compiler

Мне довольно часто бывает нужно минифицировать какой-нибудь JavaScript-файл и добавить в после имени файла .min. Для этого я использую вот такое заклинание, вложенное в BAT-файл:

@java -jar C:\Tools\closure\compiler.jar --js=%1 --js_output_file=%~d1%~p1%~n1.min%~x1 --charset=utf8

Минифицированный файл создаётся рядом с исходным — достаточно перетащить JS-файл на файл с заклинанием.

Для его работы вам понадобится Closure Compiler. Кодировку нужно указывать, чтобы не латинские строки (если они есть) не превратились в знаки вопроса или ещё что похуже.

Комментарии 1

Передача контекста в обработчики событий в jQuery

Обычно для того, чтобы this указывал не на тот объект, который вызвал событие, а на тот, из которого навесили обработчик, делается примерно так:

var obj = {
	message: 'Hullo!',
	init: function() {
		var this_ = this;
		$('.button').click(function(){ this_.handler(42) });
	},
	handler: function(num) {
		alert(this.message + "\n" + num);
	}
};
obj.init();

В jQuery есть правильный способ это сделать — метод jQuery.proxy():

$('.button').click($.proxy(function(){ this.handler(42) }, this));

Однако, если в метод нужно передать параметры, то короче от этого не станет, всё равно придётся создавать замыкание. Вот если бы параметров не было, получилось бы просто и красиво:

$('.button').click($.proxy(this.handler, this));

Но есть и более краткий способ передать и контекст, и параметры — через параметр data методов eventname():

$('.button').click(this, function(e){ e.data.handler(42) });

К сожалению, этот способ работает начиная с jQuery 1.4.3, в более раниих версиях нужно использовать bind(), что несколько длиннее и не так красиво.

Дополнение. Когда-нибудь наступит светлое будущее, и можно будет пользоваться нативным методом bind. Вот так:

$('.button').click(this.handler.bind(this));

Или с параметром:

$('.button').click(this.handler.bind(this, 42));

Уже сейчас метод bind работает в последних версиях всех браузеров (включая IE9). Полифил для старых браузеров есть на MDN по ссылке выше.

Комментарии 1

Всё придумано до нас

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

Читать дальше…

Комментарии 1

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

Лет десять назад, когда я только начинал программировать, мне очень нравился именно процесс программирования. Я мог целыми днями ковырять свою СУКу (CMS) на PHP/MySQL/XSLT (или что там у меня было в то время) и мне было совершенно не важно, что на ней пока нет и, вероятно, никогда не будет ни одного сайта. И не важно, что 90% написанного кода — велосипеды с квадратными колёсами. Главное — процесс. Хотя, для обучения это было весьма полезно.

Но сейчас всё по-другому. Свободного времени стало гораздо меньше; увлечений больше; да и цели сильно изменились. Сейчас для меня гораздо важнее результат, а программирование в основном, средство его достижения. Например: «хочу показывать фотографии на сайте, да так, чтобы и мне, и пользователям было удобно». Отсюда уже следует необходимость что-то там программировать. При этом хочется, чтобы программировать пришлось как можно меньше, но не в ущерб качеству результата.

Поэтому в конце прошлого года я всё-таки начал использовать фреймворки. Раньше даже мысль об этом была бы недопустима. Фреймворки позволяют мне сосредотачиваться на моих задачах. Позволяют делать сайт, а не заниматься укладкой фундамента и забивкой свай, только для того, чтобы он вообще работал и не разваливался. При этом фреймворки, в отличии от CMS, оставляют мне достаточную свободу, чтобы результат был в точности таким, как я задумал; причём с минимальными усилиями.

Для себя я выбрал Django (Python) и jQuery (JavaScript) и пока выбором очень доволен. При использовании обоих фреймворков в голове постоянно крутится мысль: «Если бы я был умным и делал свой фреймворк, то обязательно сделал бы так же».

По этой же причине я использую обычный виртуальный хостинг, а не VPS/VDS, который мне так активно советуют уже не первый год. Пробовал, круто, но я не хочу быть админом; хочу, чтобы вещи просто работали, просто делали то, что должны делать. (Хотя в последнее время меня стали посещать мысли попробовать VPS с какой-нибудь панелью для людей.)

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

Комментарии 3

Делаем Яндекс-подписки читаемыми

Новый дизайн Яндекс-подписок поражает своей нечитаемостью. Это недоразумение легко поправить с помощью простого пользовательского CSS.

Яндекс-подписки

Читать дальше…

Комментарии 0

Откуда подключать jQuery

Размышляю о том, откуда лучше подключать JavaScript-библиотеки (главным образом jQuery): со своего хостинга, с CND Гугла или с Яндекса.

Денис Филонов пишет, что лучше подключать со своего хостинга, но я с ним немного не согласен.

Читать дальше…

Комментарии 3

Аватарки из ЖЖ в WordPress

Продолжим улучшать комментарии в Вордпрессе. Прикрутим персональные аватарки пользователям ЖЖ. Делается тоже не очень сложно, хотя и несколько ненадёжно, потому что приходится разбирать HTML-страницу с профилем.

Читать дальше…

Комментарии 4

Случайные аватарки для комментаторов с OpenID без почты в WordPress

В Вордпрессе есть интересная штука — он умеет генерировать случайные аватарки авторам комментариев на основе адреса электронной почты. На выбор есть три сервиса — Identicon, Wavatar и MonsterID.

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

Читать дальше…

Комментарии 0

Плагин Search Unleashed для WordPress блокирует заходы с Яндекса

Добрые люди подсказали, что на Birdwatcher.ru не открываются ссылки с Яндекс-ленты: приезжает пустая страница. После долгих разбирательств (и в итоге после подсказки другого доброго человека) проблема была решена.

Читать дальше…

Комментарии 2

Правильная постраничная навигация в WordPress 2.8

В Wordpress 2.8 зачем-то изменили поведение функции posts_nav_link, которая теперь воспринимает пустые строки не как «ничего не выводить», а как «вывести ссылку с текстом по умолчанию». Из-за этого сделать постраничный навигатор с правильным расположением ссылок (т. е. обратным принятому в Wordpress по умолчанию) стало не так-то просто. Сложности возникают при необходимости выводить между ссылками разделитель.

В итоге у меня не придумалось ничего лучше такого:

ob_start();
posts_nav_link('{separator}', '', '');
$separator = ( strpos(ob_get_clean(), '{separator}') !== false );

next_posts_link('← Предыдущие записи');
if ($separator) echo ' — ';
previous_posts_link('Следующие записи →');

А вот более правильный вариант (спасибо Сергею за подсказки):

$prev = get_next_posts_link('← Предыдущие записи');
$next = get_previous_posts_link('Следующие записи →');
echo $prev, ( $prev && $next ) ? ' — ' : '', $next;

Комментарии 4

Из-за взлома хостинга данные 100 000 сайтов были утеряны

Хостинг, на который я переезжаю (но пока не успел переехать) был взломан, из-за чего данные множества сайтов были повреждены или утеряны. А основатель Lxlabs (которая разработала HyperVM, из-за уязвимости в котором и был осуществлён взлом) покончил жизнь самоубийством (правда не ясно, есть ли тут связь с найденной уязвимостью).

Вот теперь думаю, ждать, пока CheapVPS перейдёт на другую систему виртуализации или искать другой хостинг.

Комментарии 4

Плохая связь — причина возникновения ошибки 404?

Ну вот, дожили:

При этом далеко не каждый знает о третьей причине вероятной «Ошибки 404» — плохой связи…

Отсюда.

Интересно, как это? Кусочек адреса из запроса потерялся?

Комментарии 0

Фотошоп для веб-разработчика

Очень интересная серия статей в блоге Сергея Чикуёнка (из студии Лебедева): Фотошоп для веб-разработчика. Про эффективное использование Фотошопа для подготовки изображений для веб-дизайна. Правда, пока статей только две штуки, но автор обещает ещё.

Комментарии 0