Вступление

Это руководство по быстрому конвертированию UserJS в расширение для Opera. Это очень простой процесс, однако в нём есть несколько подвохов, которые мы с вами обсудим. Статья представляет собой практический пример конвертации.

Вступление

Эта статья проведёт вас через базовые шаги для создания вашего первого расширения для Opera. Вы создадите кнопку на панели, при нажатии на которую будет открываться всплывающее окно с сообщением «Hello World!». Расширения для Opera пишутся с помощью общих открытых веб-стандартов, поэтому всё, что вам нужно чтобы начать, это Opera 11 и ваш текстовый редактор или IDE.

Вот и вышел долгожданный релиз MooTools 1.3. Расскажу немного об изменениях в самом фреймворке, и в его «окружении». Между версиями 1.2 и 1.3 довольно много различий, но обо всем по порядку.

Привет, Хабр! Хочу представить вам свеженькое приложеньице — графический редактор на HTML5, выполненный с помощью LibCanvas.

Вы уже используете XSLT в качестве шаблонизатора на сервере. Настал черёд перенести xsl-трансформацию на клиента. Можно, например, воспользоваться способом описанным в статье На клиенте! Получить XML! Получить XSL! Сделать XHTML! Марш!. Но это было бы слишком просто, потому что каждый браузер добавляет несколько своих нюансов при работе с XSLT.

Вопросы о способе загрузки xsl- и xml-файлов и их обработки в различных браузерах был рассмотрен в указанной выше статье. Рассмотрим другие вопросы:
1) инклудинг;
2) кеширование;

Все примеры опубликованы на этой странице ra-project.net/xsl_tests и работают в браузерах Opera, Chrome, IE6, Firefox, Safari.

Сегодня утром я зашёл на Google Maps и с радостью увидел там слой «Пробки». Сразу же глаз зацепился за интересное интерфейсное решение для выбора времени, на которое будет показана ситуация с пробками.

Сразу же захотелось использовать подобный орган управления в своих проектах.

Самое время вспомнить, как пишутся плагины под jQuery.

Прочитав недавно нововведения PHP 5.3, я обратил внимание на несколько интересных особенностей, скомпоновав которые можно получить реализацию шаблона проектирования Observer, гораздо красивее, чем имеющиеся в pear и symfony, причём вся реализация займёт всего несколько строк кода.

Автор статьи — программист с шестнадцатилетним стажем работы — был поставлен перед невозможностью подолгу сидеть за компьютером (как поступают многие из нас). В этой статье он рассказывает о том, как организовать свою рабочий процесс так, чтобы частые перерывы не вредили возможности сосредоточиться на работе и эффективности труда. В принципе достаточно известные вещи, но лично для меня стали новостью инвертирование приоритетов и сам факт того, что можно работать отвлекаясь и при этом не терять ход мысли.

Я не могу безболезненно сидеть за столом дольше часа подряд, и я не могу работать больше, чем стандартный восьмичасовой день. Проблема в том, что последние 15 лет моя стратегия работы заключалась в том, чтобы поймать «поток» и после этого кодить очень долго без перерывов. Эта стратегия очень популярна у кодеров, любящих запираться на сутки, надевать наушники и отключаться от внешнего мира — и именно поэтому они так болезненно реагируют, когда их отвлекают. Программирование требует концентрации, а концентрация работает по принципу клапанного механизма — на разогрев и запуск требуется время, поэтому уже запущенный механизм лучше не останавливать.

Я не думал, что существуют другие способы программирования, и уже начал было смиряться с тем, что обречен на низкую производительность. Но за последние 6 месяцев я обнаружил, что «медленный разогрев и долгая работа без перерывов» — поведение приобретенное, а не врожденное, и вполне возможно переучиться на другие ритмы активности. Это похоже на многофазный сон — как только вы привыкли делать вещи определенным образом, любые изменения очень трудоемки, но возможны — при наличии достаточной мотивации и времени на привыкание.

16 октября вышла новая версия jQuery — 1.4.3.

Улучшения производительности

После переписывания css-модуля анимация в тестах ускорилась до 20%. Ещё были ускорены многие операции обхода DOM-дерева в браузерах, поддерживающих querySelectorAll или matchesSelector.

Просматривая обзоры инди-игрушек наткнулся на весьма интересный проект — Biolab Disaster (да поможет ему НЛО выдержать хабраэффект) — браузерный платформер на чистых HTML5 & JavaScript, навеивающий воспоминания о тех временах, когда каждую игру делали с душой.
Коротенькая и незатейливая игрушка крутится необычайно быстро и красиво, оставляя за собой приятное впечатление, активированные чекпоинты и маленькие кусочки врагов :)
Выполнена она на движке автора этой же игры, Impact HTML5 Game Engine, в качестве демонстрации его возможностей. Движок на данный момент все еще находится в состоянии разработки, но предлагает уведомить нас электронным письмом по официальному выходу в свет.
За новостями можно так же следить в блоге автора.

На закуску — видео с геймплеем, некоторыми моментами создания игры и редактором уровней — с комментариями автора.

(Благодаря видео можно узнать ссылку на официально еще не опубликованный, но вполне рабочий level editor)

Флеш становится все менее значимым, что не может не радовать.
Приятного пятничного ковыряния в коде ^_^

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

Сегодня я решил опубликовать свои шпаргалки, на самые часто встречающиеся ошибки при работе с MySQL.

Некоторое время назад Microsoft начала тесно сотрудничать и с проектом jQuery и поставлять сообществу открытый код в виде полезных расширений. Всего было три таких расширения:

• шаблоны jQuery (описание на английском);
• плагин jQuery для связывания данных (перевод анонса на русском, хабр);
• плагин jQuery Globalization (описание на русском, хабр).

Сегодня, Скотт Гатри (вице-президент подразделения по веб-разработке в Micosoft) анонсировал у себя в блоге новость о включении поставленного сообществу кода Microsoft в список официальных плагинов jQuery. Об этом сделан анонс и на официальном сайте jQuery.

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

• jQuery Templates – http://github.com/jquery/jquery-tmpl
• jQuery Datalink – http://github.com/jquery/jquery-datalink
• jQuery Globalization – http://github.com/jquery/jquery-global

Документация по плагинам доступна на сайте jQuery http://api.jquery.com/.

Более того, плагин шаблонов будет включен в следующий релиз библиотеки jQuery 1.5 как ее составная часть (в jQuery.js).

Навигация по странице

Всё чаще и чаще в web появляются сайты, использующие навигацию, написанную на JavaScript. Типичный случай использования javascript для навигации: страница с меню и блоком контента, куда через AJAX подгружается содержимое:



Пользователь кликает по пункту, JavaScript грузит из сети содержимое, вставляет в блок контента, пользователь доволен: страница без перезагрузки показывает требуемое и траффика потребовалось меньше за счёт того, что не потребовалось грузить все эти HEAD, BODY, STYLE и прочие элементы.

Но вот проблема: URL страницы. Если на old scool сайтах на каждый пункт меню показывается новая HTML страница, и у пользователя есть вменяемый URI, который он может скопировать из адресной строки бразуера, послать другу или положить в закладки, то в случае AJAX интерфейсов в URI странице зачастую нет никаких ссылок на текущий контент документа.

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

Не с секрет, что для решения этой проблемы многие программисты кодируют ссылку на текущее просматриваемое содержимое в якорь (anchor) URI документа. К примеру, на сайте jqapi.com (скриншот которого приведён вначале топика) при выборе того или иного пункта меню якорь страницы меняется на #p={contentId}.

Хочу Вам рассказать о штуке, которую я изобрел сегодня, чтобы ускорить процесс загрузки сайтов. Все вы знаете, что <script src="..."></script> задерживает отрисовку страницы, пока не загрузится этот скрипт. Если их десятки — это может сереьезно замедлить работу сайта — в результате пользователь 20 секунд пялится на пустую (или недорисованную) страницу из-за какого-нибудь тупящего социального виджета (умножить на десяток этих виджетов).

Не правда ли было бы круто, если бы можно было сказать <script extsrc="..."></script> ("extsrc" = "грузи потом"), чтобы скрипты загружались после того как страница отрисована?

Все бы хорошо, но есть document.write… Сегодня я наконец решил его проблему — представляю extsrc.js — скрипт, который запустит все скрипты после отрисовки страницы (даже если они содержат document.write — и правильно отрисуется все).

Результат? Супер-быстрая загрузка страниц, даже если там море всяких внешних скриптов.

Использование:

Заменяем <script src="..."> на <script extsrc="...">.

Итого получается:

<script src="http://whiteposts.com/extsrc_js/extsrc.js"></script>
<script extsrc="..."></script>

Отличительной особенностью полиграфического дизайна является повсеместное применение колоночной верстки. И тому есть веские основания.

Во-первых, глаз лучше воспринимает строки текста состоящие из 8 до 12 слов. Во-вторых, можно гораздо лучше организовать колонки и уменьшить количество пустого пространства на странице. Долгое время это являлось исключительным преимуществом полиграфии. В вебе же приходилось всячески извращаться. Но теперь CSS3 позволяет создавать колоночную верстку без использования JavaScript.

Предлагаю вашему вниманию перевод вчерашнего поста одного из разработчиков Symfony2 о подходе к unit-тестированию контроллеров в Symfony2. Тема очень актуальна для Symfony2 разработчиков. Также стоит отметить, что в посте упоминается результат дискуссии на dev-groups об использовании контроллера в роли сервиса в Symfony2.

Если в компьютере имеются 2 видеовыхода и захотелось подключить 3 монитора, то с некоторой вероятностью сделать это просто добавлением второй видеокарты не удастся — не все материнские платы имеют 2 разъёма PCI Express X16, а в многочисленные разъёмы PCI Express X1 видеокарты обычного размера не встанут из-за несовместимости по разъёму. Не все знают, что на самом деле установка длинного разъёма X16 в короткий слот возможна, поэтому не обязательно для 3-го монитора покупать другую и более дорогую материнскую плату. Способам расширения потенциальных возможностей компьютера посвящена эта статья, а также она развеивает сомнения и опасения о том, что что-то при доработке платы напильником не получится. Час работы — и 3-й монитор к Вашей системе будет подключен.

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

За последний месяц, я написал уже два поста с обзорами плагинов jQuery (1 и 2). Надо сказать, что подобные статьи на английском языке появляются все чаще и чаще. Однако их содержание довольно быстро приедается. Галереи картинок, слайдеры, опять галереи картинок, многочисленные динамические меню и опять слайдеры. Мне не хочется описывать очередную порцию подобных плагинов. Поэтому сегодня я расскажу не о двадцати-тридцати как обычно, а только о семи важных на мой взгляд плагинах, о которых очень хотелось рассказать. Лучше меньше, да лучше.

Прошло несколько дней с публикации анонса о появлении на свет jQuickForm (если в двух словах, то jQuickForm это сборка jQuery + HTML_QuickForm2).
Была получено масса положительных отзывов, в т.ч. в личку, много посетителей сайта проекта сказали «LikeIt», а это говорит о том, работа нужная и своевременная.
Итак, сегодня я хочу сказать о том, что на данный момент практически все явные и потайные возможности jQuickForm описаны, а это ни много, ни мало:

Элементы

InputText, InputPassword, Date (выбор даты, состоящий из нескольких элементов типа select), DatePicker (jQueryUI), Slider (jQueryUI — «ползунок»), SliderRange (jQueryUI — диапазон значений), Select, Buttons, Textarea, Page (элемент для построения многостраничного мастера), Static (элемент формы для вставки произвольного HTML), jWysiwyg (простейший редактор), Autocomplete One Array (автокомплит с единственным значением и инициализацией при помощи передачи массива), Autocomplete One Remote (то же самое, но источник — аякс-скрипт), Autocomplete Multiple Array (автокомплит с множеством значений через запятую, используется, например, для формирования списка веб2.0 меток, источник — массив), Autocomplete Multiple Remote (тоже самое с удаленным источником), File Upload (обычный элемент загрузки файлов), и, по заявкам телезрителей — File MultiUpload