jQuery *

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

Дополнительные функции плагина включают:

1. Набор команд, существенно упрощающих изменение отрендеренных шаблонов при изменении связанных с ними данных;
2. Событие rendered, которое вызывается после того, как отрендеренный шаблон добавляется в структуру документа.

Код дополнительных функций вынесен в файл jquery.tmplPlus.js, поэтому для их использования вы должны добавить ссылку на этот файл:

<script src="Scripts/jquery-1.5.js" type="text/javascript"></script>
<script src="Scripts/jquery.tmpl.js" type="text/javascript"></script>
<script src="Scripts/jquery.tmplPlus.js" type="text/javascript"></script>

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

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

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

Сегодня запущена кампания The 14 days of jQuery посвященная продвижению скорого релиза новой версии jQuery 1.4. Для этой кампании запущен специальный промо-сайт jquery14.com. В блоге jQuery выдаются некоторые подробности акции: каждый день из 14, начиная с 14 января (день рождения jQuery), на промо-сайте будут представлены новые релизы из окружения jQuery, анонсы, обновления и видео-материалы. Одним из первых таких релизов, еще до старта акции, стал новый сайт jQuery API.

Будем ждать дальнейших новостей.

via jQuery blog

Вы когда-нибудь задумывались над такими вопросами:

• Как мир относится к технологии CDN для загрузки библиотек?
• Сколько успешных сайтов написано на Wordpress?
• Какие скрипты чаще всего разработчики загружают из Google CDN?
• На сколько популярен jQuery?

А я вот задумался.
И не просто задумался, а сделал маааленькое исследование.
И написал маленькое расширение для хрома, которое, возможно, сделает жизнь лучше или сломает интернеты.
Результаты внутри.

Многие заметили, что на YouTube и на Medium появился небольшой новый элемент UI — прогресс-бар в виде тонкой цветной полоски в самом верху страницы, который примостился прямо под панелью браузера.

Внимание к новому элементу привлек недавний популярный пост New UI Pattern: Website Loading Bars на UsabilityPost. Как выяснилось, причина использования прогресс-бара в том, что вместо загрузки новой страницы содержимое подгружается через JavaScript, и поэтому собственный индикатор браузера о загрузке страницы может не срабатывать. Чтобы у пользователя не возникало ощущения, будто страница «зависла», эту функцию переложили на плечи маленького UI-приема.

Теперь у всех желающих появилась возможность быстро сделать на своем сайте точно такой же прогресс-бар благодаря плагину NProgress.js [Демо][GitHub].

Пересказ из официального блога

JQuery 1.6.3 наконец вышла! Это уже третий выпуск обновлений для JQuery 1.6.
Как обычно, мы предлагаем две копии JQuery, одну сжатый и другую несжатую (для отладки или изучения).
JQuery 1.6.3 сжатая
JQuery 1.6.3 несжатая

Список изменений

Недавно я написал небольшой плагин на jQuery и PHP. Функционал простой: посредством Ajax задается описание и загружается видео на YouTube, плагин вернет статус загрузки, и если она прошла успешно — id видео. Плагин может применяться на любом сайте, и легко вставляется в любую CMS.

Все началось с того, что при разработке CMS для сайта местного телеканала я столкнулся с необходимостью сделать загрузку видеороликов на YouTube. Так как на сайт часто будут добавлять видео, то каждый раз логиниться на YouTube, заливать туда ролик, получать на него ссылку, лезть в CMS и вставлять её туда — очень напряжно. Причем, желательно делать это через Ajax, чтоб можно было легко включить плагин в любой проект.

Привет, %username%
Как-то раз мне пришлось писать форму для добавления постов в блог. Помимо стандартных полей (название, дата, текст и.т.д.) необходимо было привинтить юзабельную форму добавления тегов.
Т.к. я кодю в jQuery, то и выбор был однозначным.
Вот необходимые задачи, которые я поставил перед собой:

1. Легко в настройке
2. Все теги храняться в одном файле (в кэше)
3. Минимальная нагрузка на сервер и клиента
4. Список тегов — подсказок открывается только для выбранного запроса на определенный тег.

Уже довольно давно большинство сайтов перестало быть набором HTML/PHP/CSS/JS-файлов, которые достаточно просто загрузить на сервер. Bower, Grunt, Component.js, AMD, Require.js, CoffeeScript, Clojure, Composer, npm, LESS и ещё 100500 инструментов — всё это сегодня применяется для сборки проектов, обновления компонентов, загрузки зависимостей, сжатия кода, компиляции из одного JavaScript в другой, подтасовки карт, прополки огорода и даже готовки яичницы.

Многих людей это вдохновляет. Да что там — 95% моих знакомых в один голос твердят, как подключив всего пару-тройку библиотек с особой, уличной магией можно забабахать сайт на over-9000 зелёных австралийских долларов — и всего за один вечер, с перерывом на кофе и бублики.

А я — странный человек. Не люблю смешения языков, технологий, библиотек. Angular, Knockout, React — они все хороши, но каждая — по-своему сложна. А ведь есть и «гибриды», где сходится сразу несколько миров — как Ember и Knockout.Bootstrap. Вдобавок, многие построены на jQuery — впрочем, к ней даже у меня претензий нет; наверное, таким и должен был быть JavaScript.

Как бы то ни было, реальность беззастенчиво входит в контакт с мечтами и расставляет точки над «i». Мне так же приходится писать на «new & popular» — а когда пишешь, душа томится и просится создать очередной велосипед… а ей разве откажешь? Она ведь как дитя малое.

Велосипед был создан. Велосипед без фантиков. Такой же простой, как автомат Калашникова, и многогранный, как швейцарский нож, где вместо наследования — события, вместо моделей, коллекций и представлений — один класс, с неограниченной вложенностью и полной свободой действий, почти в два раза меньший Backbone.js, использующий Underscore.js и, необязательно, jQuery/Zepto.

Добро пожаловать в Sqimitive.

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

В позавчерашнем выпуске «Mozilla Hacks Weekly» увидал гиперссылку «Morris.js», пошёл по ней, почитал, порадовался — а теперь и вам поведаю.

Morris — это легковесный джаваскрипт (всего-то 3052 байта после миниатюризации) с открытым исходным кодом (распространяемым по упрощённой лицензии BSD), который для работы требует jQuery и Raphaël и строит с их помощью графики на простой сетке горизонтальных линий, наподобие такого:



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

Графики реагируют на мышь: вспучиваются точки, соответствующие указанному мышью моменту во времени, и подле них появляются подсказки.

Достоинство скрипта — простота API. Приведённый мною пример создаётся вот таким вызовом:

// поквартальные данные, тонкие линии, цвета их заданы в явном виде
Morris.Line({
  element: 'quarterly',
  data: [
    {q: '2009 Q3', a: 100, b: 75},
    {q: '2010 Q2', a: 75, b: 50},
    {q: '2010 Q3', a: 75, b: 50},
    {q: '2011 Q1', a: 50, b: 25},
    {q: '2011 Q3', a: 50, b: 25},
    {q: '2011 Q4', a: 75, b: 50},
    {q: '2012 Q2', a: 100, b: 75}
  ],
  xkey: 'q',
  ykeys: ['a', 'b'],
  labels: ['Series A', 'Series B'],
  lineColors: ['#167f39','#044c29'],
  lineWidth: 2
});

Перевод из официального блога

JQuery 1.6.2 наконец вышла! Это второй выпуск обновлений для JQuery 1.6.

Как обычно, мы предлагаем две версии JQuery, сжатую и несжатую (для отладки или изучения).

Вы можете смело включать вышенаписанные URL-адреса непосредственно на ваш сайт и получить все преимущества быстрой загрузкой JQuery.

Список изменений версии 1.6.2:

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

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

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

Аннотация

На хабре уже не раз делали описание работы с роутером TL-MR3020 в плане расширения его возможностей на базе прошивки openwrt. Я хочу показать ещё один вариант доработки роутера, при котором он может стать полноценным участником школьного учебного процесса. В статье приводится описание устройства и порядок работы с музыкальным программируемым школьным звонком «Школьник-4».

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

Долго думал, что же разобрать дальше — атрибуты, свойства и данные или манипуляцию с DOM, даже начал писать обе статьи. И вроде бы сначала хорошо было бы дать первую тему, но в комментариях к предыдущему топику уже обратили внимание на одну особенность работы со скриптами, которая как раз относится ко второй теме, так что не будем тянуть и начнем именно с нее. Заодно прошу прощения у тех, кто увидел начало статьи, которое я по ошибке опубликовал в процессе написания.

Итак, сегодня мы продолжим серию копаний в исходниках jQuery под номером 1.8.3 (стабильная версия на момент написания статьи). Общее представление о jQuery мы уже получили, парсить html — тоже. Пора то, что мы распарсили куда-нибудь вставить.

Несмотря на то, что необходимо минимизировать количество http-запросов, иногда (или часто, в зависимости от задачи) бывает полезно загружать часть «тяжелого» функционала только тогда, когда он действительно понадобится на странице.
У jQuery есть механизм, позволяющий осуществить это — $.getScript, однако, он обладает рядом недостатков:

• не запоминаются уже загруженные или загружаемые в данный момент скрипты, при повторном запросе опять идет их загрузка.
• нельзя указать сразу несколько скриптов
• выключен кэш (к каждому урлу насильно приписываются параметры типа ?_=1242843920520). Зачем это было так жестко сделано, для меня осталось загадкой.
• у коллбэка нельзя задать контекст (это вообще болезнь коллбэков jQuery).

Пришлось написать небольшой плагин, лишенный вышеперечисленных недостатков:

$.requireScript(url, callback, [context], [options])
Где:
url — урл загружаемого скрипта (может быть массивом урлов)
callback — коллбэк-функция, вызываемая после загрузки скриптов
context — контекст, в котором вызывается коллбэк-функция (опционален)
options — параметры; в данный момент поддерживается только один параметр — parallel, указывающий, нужно ли использовать параллельную загрузку для нескольких скриптов (по умолчанию — true)


Может кому-то пригодится. Скачать и попробовать можно с code.google.

UPDATE: согласно замечаниям в комментах, $.loadScript переименован в $.requireScript, и теперь можно указать несколько урлов сразу.

Многие из нас сталкивались с всплывающими окнами, когда при этом постепенно потухает фон. Взгляд пользователя невольно фокусируется только на той части экрана, где что-то требуется от этого самого пользователя. Достаточно полезно, не правда ли?

Конечно же, не претендую на какую-то новизну, и данная заметка будет больше полезна начинающим с jQuery (коим и сам являюсь), чем людям, имеющим существенный опыт с данным javascript фреймворком.

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

В предыдущем посте я описал, что this в javascript не привязывается к объекту, а зависит от контекста вызова. На практике же часто возникает необходимость в том, чтобы this внутри функции всегда ссылался на конкретный объект.
В данной статье мы рассмотрим два подхода для решения данной задачи.
1. jQuery.proxy — подход с использованием популярной библиотеки jQuery
2. Function.prototype.bind — подход, добавленный в JavaScript 1.8.5. Рассмотрим также его применение для карринга (частичного применения функции) и некоторые тонкости работы, о которых знают единицы.

Интервью с Джоном Резигом, опубликованное 25 июля на usesthis.com

Кто вы и чем занимаетесь?

Я JavaScript программист. Я работаю в Khan Academy, разрабатываю обучающую систему следующего поколения. Я создатель и главный разработчик JavaScript библиотеки jQuery и автор двух книг о JavaScript – «Pro JavaScript Techniques» и «Secrets of the JavaScript Ninja».