Инструкция по установке и настройке плагина Tagnetic Tagnetic — плагин для библиотеки jQuery, который переделывает стандартное облако тэгов в холодильник с налепленными на него магнитами-тэгами. Скрипт полностью работает на стороне клиента и в случае если в браузере отключена поддержка Java-script, то пользователю будет показано стандартное облако тэгов.
Работая над очередной задачей, столкнулся с проблемой, решить которую помог Гугл. Суть проблемы заключается в том, что в библиотеке jQuery 1.2.6 некорректно работают функции width() и height() в третьем Firefox’е, а также браузерах, работающих на движке WebKit — Safari и Google Chrome. Удивительно, но даже в шестом IE, с которым обычно больше всего проблем, этого глюка нет. Природа проблемы осталась мне неясной, но известно, что она проявляется только тогда, когда в html-коде подключены сначала JS-файлы, а затем CSS-файлы и пропадает если сделать наоборот — сначала подключить все CSS-файлы, а затем все JS-файлы. В новом релизе jQuery этот баг обещают исправить.
В ответ на флэш-скрипт от Ray Tanck, реализующий облако тэгов, стилизованное под доску с магнитами, я написал плагин для jQuery, который создает облако тэгов, стилизованное под холодильник с налепленными на него магнитами :) За графику спасибо моему другу Юре fancy13.
Плагин автоматически заменяет стандартное облако тэгов на холодильник, по этому для его работы, например, в Друпале достаточно просто подключить плагин в теле страницы и указать контейнер, в котором хранится облако. Если у пользователя выключен ява-скрипт, то ему будет показано стандартное облако тэгов.
Пока реализовал еще не все задумки, но уже есть что показать. При желании с той же страницы можно скачать тестовую версию плагина (магнит “Скачать” на холодильнике) — архив весит 1,2 мегабайта, но в нем находится PSD-исходник холодильника, два “скина” и не запакованный плагин. Конечному пользователю, чтобы увидеть холодильник, придется загрузить примерно 200 килобайт графики и плагин, размером в пару килобайт .
К сожалению, из-за использования IE PNG Fix в шестом IE скрипт заметно тормозит, возможно придется заменить пнг на гифы, для устранения этих тормозов.
В планах создание скина, в виде стены/доски с налепленными на нее бумажками-объявлениями, а также холодильника шириной в 300-400 пикселей.
Upd. Добавил прелоадер, скин шириной 400 пикселов и еще пару мелочей.
Еще обн. Выложил небольшую документацию, уже скоро работа над плагином будет завершена.
Третий упд. Запостил информацию о плагине на Хабре. Теперь придется реализовывать все предложенные там мысли :) Уже сделал пример с перетаскиваемыми магнитами.
Вместе с Юрой fancy13 Ободниковым сделали новый вариант дизайна для Швабрашвабр — проекта демонстрирующего работу CMS Drupal в качестве коллективного блога с элементами социальной сети.
При разработке модуля Inner poll возникла задача динамического добавления элементов к форме. С помощью библиотеки jQuery эта задача решается в два счета.
Для начала пишем функцию:
function addInput() {
/* default-id — скрытый элемент формы, из которого берется id для первого создаваемого элемента */
var id = document.getElementById("default-id").value;
id++;
/* в форму с именем testform добавляем новый элемент */
$("form[name=testform]").append('<div id="div-' + id + '"><input name="input-' + id + '" id="input-' + id + '" value="' + id + '"><a href="javascript:{}" onclick="removeInput(\'' + id + '\')">Удалить</a></div>');
/* увеличиваем счетчик элементов */
document.getElementById("default-id").value = id;
}
Затем создаем форму:
<form name="testform" action="test.php" method="POST">
<input type="hidden" id="default-id" value="0">
<input type="submit" value="Отправить!">
</form>
<a href="javascript:{}" onclick="addInput()">Добавить текстовое поле</a><br>
Вот и всё. Здесь размещен работающий пример. Кроме добавления элементов, также приведен пример их удаления.
Разработал очередной модуль для шестого Друпала. Inner poll — модуль позволяющий прикреплять опросы к любому документу (в стандартной поставке Друпала опрос является отдельным типом документа).
В журнале Smashing Magazine наткнулся на скрипт (плагин для jQuery), позволяющий автоматически рядом с ссылками указывать размер файла, на который указывает эта ссылка. Оказалось, что этот скрипт в своей работе использует полезный сервис, под названием json-head, который на входе принимает любой URL, а на выходе в формате JSON отдает заголовки, которые получил от сервера.
Анализируя эти заголовки можно на стороне клиента придумать много полезных фишек, кроме указания размера документа, на который ведет ссылка, можно, например, подсвечивать ссылки на недавно обновленные страницы (заголовок “Last-Modified”) или нерабочие ссылки (анализ переменной “status_code”).
Все те же действия можно проделывать и не используя сторонние сервисы, но в таком случае опрос удаленных серверов и анализ заголовков придется реализовать на стороне своего сервера, со всеми вытекающими отсюда достоинствами (независимость от сторонних сервисов и того, включена на стороне клиента поддержка Java-script или нет) и недостатками (в случае большого количества запросов забанят ip вашего сервера, а не ip сервера http://json-head.appspot.com ну и необходимость разработки собственного решения).
Кстати, с помощью этого сервиса, совершенно случайно выяснил, что Гугл работает с использованием веб-сервера собственной разработки — gws, по данным из Википедии на этом ПО работает 9,3% всех сайтов в интернете, то есть Гугл — это и есть почти 10% интернета!
Запустил в тестовом режиме небольшой сервис под названием “тИЦ и PR одной кнопкой”, с помощью которого любой желающий может получить кнопку, содержащую информацию о рейтинге своего сайта в двух самых популярных в рунете SEO-пузомерках — Google PR и Яндекс тИЦ. Доступен сервис в виде блока (в правой колонке этого сайта) и в виде отдельной страницы.
Сервис автоматически проверяет рейтинги сайтов занесенных в базу данных и, при их изменении, создает новую кнопку-картинку. Кроме того, сервис ведет статистику изменения PR и тИЦ, что позволяет оценить динамику роста популярности сайта.
Киви (бескры?лы) — нелетающие бескилевые птицы. Тело у киви грушевидной формы, с маленькой головой и короткой шеей. Весят от 1,4 до 4 кг. Киви свойственна наибольшая редукция крыльев среди птиц: они всего 5 см в длину и почти незаметны среди оперения. Тело птицы равномерно покрыто мягкими, серыми или светло-бурыми перьями, больше похожими на шерсть. Хвост отсутствует. Ноги четырёхпалые, короткие, но очень сильные, с острыми когтями; их вес составляет примерно ? веса тела. Скелет не пневматичен, кости тяжёлые.
Оригинальный мультик:
Оригинальный клип на песню Gary Jules “Mad World”:
Поздравляю программистов и всех неравнодушных с этим праздником. Повезло, что в этом году 256 день оказался пятницей ;)