Под катом — описание восьми сервисов, которые могут заметно облегчить жизнь веб-разработчика, верстальщика или дизайнера.
Андрей Привалов @negasus
Developer
Использование Deferred объектов в jQuery 1.5
6 мин
37KПеревод
Deferred объекты появились в jQuery 1.5. Они позволяют отделить логику, которая зависит от результатов выполнения действия от самого действия. Для JavaScript Deferred объекты не новы, они уже были в MochiKit и Dojo, но с изменениями логики jQuery ajax от Julian Aubourg, внедрение Deferred объектов было неминуемо. С Deferred объектами несколько callback могут быть связаны с результатом задачи и любые из них могут быть привязаны к действию даже после начала его выполнения. Выполняемая задача может быть асинхронна, но не обязательно.
Deferred объекты теперь встроены в $.ajax() таким образом вы будете получать их автоматически. Обработчики теперь могут быть связаны с результатом следующим образом:
Deferred объекты теперь встроены в $.ajax() таким образом вы будете получать их автоматически. Обработчики теперь могут быть связаны с результатом следующим образом:
// $.get, ajax запрос, он асинхронный по умолчанию
var req = $.get('foo.htm')
.success(function( response ){
// что-нибудь делаем с ответом
})
.error(function(){
// делаем что-нибудь если запрос провалился
});
// это выполнится перед тем как $.get() будет выполнено
doSomethingAwesome();
// Делаем что-то ещё перед завершением запроса
req.success(function( response ){
// делаем что-то ещё с ответом
// он будет выполнен когда запрос завершится, а если запрос завершен, то будет вызван немедленно
// если запрос уже был выполнен
});
+110
Работаем с jQuery Templates
20 мин
139KВведение
Плагин jQuery Templates – это «движок шаблонов», работающий на стороне клиента как расширение jQuery.
Этот плагин помогает показать в браузере данные, которые находятся в объектах и массивах JavaScript, избавляя вас от рутинных операций по созданию HTML-кода, экранированию специальных символов и т.п. Кроме того, он обладает очень интересными возможностями – например, позволяет обновлять созданный с его помощью HTML-код при изменении исходных данных.
Разумеется, jQuery Templates – не единственный и не первый «движок шаблонов», но у него есть большое преимущество перед альтернативными вариантами – поддержка со стороны jQuery Team. Это позволяет нам не бояться того, что этот плагин окажется заброшенным, и различные проблемы, возникающие при выходе новых версий браузеров, придется решать своими силами.
В этой статье я расскажу об основных возможностях jQuery Templates и продемонстрирую его работу в различных сценариях, а в последующих статьях я расскажу о функциях, не вошедших в основной код плагина (jQuery Templates Plus) и о расширении языка шаблонов.
+193
+80
Генерация изображения с waveform из mp3 файлов с помощью PHP
3 мин
11KХотел бы поделиться одним из способов внедрения проигрывателя аудиофайлов для сайтов, использующих jQuery. А именно — плеером в стиле популярного сервиса Soundcloud, сделанном на HTML+CSS+JS. В догонку к недавней статье об интересном плеере jPlayer.
Сам плеер состоит из jPlayer'а, некоторого количества нехитрой верстки, и главного компонента — картинки с waveform проигрываемого файла (это наглядная картинка, на которой изображены амплитуды сигнала, отложенные по шкале времени).
С результатами этого допиливания можно ознакомиться, скачав архив со всем необходимым: http://test.dis.dj/wave/ (там же есть демка интерфейса плеера и архив с ним).
Сам плеер состоит из jPlayer'а, некоторого количества нехитрой верстки, и главного компонента — картинки с waveform проигрываемого файла (это наглядная картинка, на которой изображены амплитуды сигнала, отложенные по шкале времени).
С результатами этого допиливания можно ознакомиться, скачав архив со всем необходимым: http://test.dis.dj/wave/ (там же есть демка интерфейса плеера и архив с ним).
+67
Двадцатка лучших веб-шрифтов
9 мин
761KПеревод
Сейчас самое время повышать уровень дизайна своих работ с помощью веб-шрифтов
Без преувеличения, сейчас сетевая типографика переживает захватывающий период своей жизни. Недавние технологические скачки приблизили нас еще на шаг ближе к типографической нирване в интернете. Шаг, которого все так долго ждали.
Свобода использования веб-шрифтов вне безопасного списка на всех ведущих ОС стала возможной, по большому счету, благодаря трем основным, почти одновременным технологическим факторам: широко распространенной поддержке правила @font-face в браузерах; появлению таких «шрифтохранилищ» как Typekit и Fontdeck; создание нового формата шрифтов — архивированного файла шрифта WOFF.
+110
ООП практикум в PHP5: Анализ ошибок, преимуществ и недостатков двух различных реализаций примесей в PHP
6 мин
2.3KПосле выхода моей статьи о примесях мы продолжали дискуссии и в комментариях к статье и в личных сообщениях. Сегодня увидел в моем блоге комментарий от читателя, который попросил объяснить, в чем я вижу преимущество своей реализации перед реализацией Леонида Шлейхера.
Я собирался было ответить в комментарии к посту своем же сайте, но неожиданно оказалось, что вопрос довольно интересен. Вернее, не сам вопрос, а анализ, который я провел, подготавливая ответ.
Я собирался было ответить в комментарии к посту своем же сайте, но неожиданно оказалось, что вопрос довольно интересен. Вернее, не сам вопрос, а анализ, который я провел, подготавливая ответ.
+19
Как я делал USB устройство
2 мин
8.2KГде-то когда-то я читал, что создатели первой спецификации USB намеревались сделать этот стандарт простым для реализации в железе за счет усложнения программного обеспечения. Таким образом цель была максимально удешевить производство и сделать USB устройства очень доступными. Сейчас можно сказать, что чипмейкерам это удалось, но так ли уж прост для реализации в железе этот стандарт? Боюсь, что ответ не очевиден.
Предположим мне нужно сделать свое простое USB устройство. Какие у меня есть варианты?
Предположим мне нужно сделать свое простое USB устройство. Какие у меня есть варианты?
+147
MySQL шпаргалки
3 мин
821KЧасто, когда разрабатываешь сайт, замечаешь, как на одни и те же грабли наступают разработчики при проектировании базы данных.
Сегодня я решил опубликовать свои шпаргалки, на самые часто встречающиеся ошибки при работе с MySQL.
Сегодня я решил опубликовать свои шпаргалки, на самые часто встречающиеся ошибки при работе с MySQL.
+171
Код Microsoft принят в виде официальных плагинов jQuery
1 мин
2.3KНекоторое время назад Microsoft начала тесно сотрудничать и с проектом jQuery и поставлять сообществу открытый код в виде полезных расширений. Всего было три таких расширения:
В качестве официальных плагинов, эти три плагина являются частью проекта jQuery и поддерживаются командой разработчиков проекта. Вы можете загрузить плагины с официальной страницы jQuery на github уже сейчас:
Более того, плагин шаблонов будет включен в следующий релиз библиотеки jQuery 1.5 как ее составная часть (в jQuery.js).
- шаблоны jQuery (описание на английском);
- плагин jQuery для связывания данных (перевод анонса на русском, хабр);
- плагин jQuery Globalization (описание на русском, хабр).
В качестве официальных плагинов, эти три плагина являются частью проекта 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 1.5 как ее составная часть (в jQuery.js).
+54
Вёрстка колонками средствами CSS3
3 мин
20KОтличительной особенностью полиграфического дизайна является повсеместное применение колоночной верстки. И тому есть веские основания.
Во-первых, глаз лучше воспринимает строки текста состоящие из 8 до 12 слов. Во-вторых, можно гораздо лучше организовать колонки и уменьшить количество пустого пространства на странице. Долгое время это являлось исключительным преимуществом полиграфии. В вебе же приходилось всячески извращаться. Но теперь CSS3 позволяет создавать колоночную верстку без использования JavaScript.
Во-первых, глаз лучше воспринимает строки текста состоящие из 8 до 12 слов. Во-вторых, можно гораздо лучше организовать колонки и уменьшить количество пустого пространства на странице. Долгое время это являлось исключительным преимуществом полиграфии. В вебе же приходилось всячески извращаться. Но теперь CSS3 позволяет создавать колоночную верстку без использования JavaScript.
+82
Цвета в web-дизайне: Выбор правильного сочетания для вашего сайта
6 мин
380KЦвет, безусловно, является важным источником эмоции. Цвета могут устанавливать правильный тон и передавать необходимые эмоции посетителям, могут взволновать, вызвать множество чувств и стимулировать к действиям. Он является чрезвычайно мощным фактором воздействия на пользователей.
+95
Система непересекающихся множеств и её применения
10 мин
73KДобрый день, Хабрахабр. Это еще один пост в рамках моей программы по обогащению базы данных крупнейшего IT-ресурса информацией по алгоритмам и структурам данных. Как показывает практика, этой информации многим не хватает, а необходимость встречается в самых разнообразных сферах программистской жизни.
Я продолжаю преимущественно выбирать те алгоритмы/структуры, которые легко понимаются и для которых не требуется много кода — а вот практическое значение сложно недооценить. В прошлый раз это было декартово дерево. В этот раз — система непересекающихся множеств. Она же известна под названиями disjoint set union (DSU) или Union-Find.
Поставим перед собой следующую задачу. Пускай мы оперируем элементами N видов (для простоты, здесь и далее — числами от 0 до N-1). Некоторые группы чисел объединены в множества. Также мы можем добавить в структуру новый элемент, он тем самым образует множество размера 1 из самого себя. И наконец, периодически некоторые два множества нам потребуется сливать в одно.
Формализируем задачу: создать быструю структуру, которая поддерживает следующие операции:
MakeSet(X) — внести в структуру новый элемент X, создать для него множество размера 1 из самого себя.
Find(X) — возвратить идентификатор множества, которому принадлежит элемент X. В качестве идентификатора мы будем выбирать один элемент из этого множества — представителя множества. Гарантируется, что для одного и того же множества представитель будет возвращаться один и тот же, иначе невозможно будет работать со структурой: не будет корректной даже проверка принадлежности двух элементов одному множеству
Unite(X, Y) — объединить два множества, в которых лежат элементы X и Y, в одно новое.
На рисунке я продемонстрирую работу такой гипотетической структуры.
Я продолжаю преимущественно выбирать те алгоритмы/структуры, которые легко понимаются и для которых не требуется много кода — а вот практическое значение сложно недооценить. В прошлый раз это было декартово дерево. В этот раз — система непересекающихся множеств. Она же известна под названиями disjoint set union (DSU) или Union-Find.
Условие
Поставим перед собой следующую задачу. Пускай мы оперируем элементами N видов (для простоты, здесь и далее — числами от 0 до N-1). Некоторые группы чисел объединены в множества. Также мы можем добавить в структуру новый элемент, он тем самым образует множество размера 1 из самого себя. И наконец, периодически некоторые два множества нам потребуется сливать в одно.
Формализируем задачу: создать быструю структуру, которая поддерживает следующие операции:
MakeSet(X) — внести в структуру новый элемент X, создать для него множество размера 1 из самого себя.
Find(X) — возвратить идентификатор множества, которому принадлежит элемент X. В качестве идентификатора мы будем выбирать один элемент из этого множества — представителя множества. Гарантируется, что для одного и того же множества представитель будет возвращаться один и тот же, иначе невозможно будет работать со структурой: не будет корректной даже проверка принадлежности двух элементов одному множеству
if (Find(X) == Find(Y))
.Unite(X, Y) — объединить два множества, в которых лежат элементы X и Y, в одно новое.
На рисунке я продемонстрирую работу такой гипотетической структуры.
+104
Canvas-трансформации доступным языком
3 мин
52KДоброго времени суток, хабравчане! В этой статье я подробно расскажу вам о трансформации и вращении в javascripte. Матрица трансформаций, на первый взгляд, штука непонятная и многие ею пользуются даже не осознавая, что она делает на самом деле, используя готовые значения из интернета. На MDC об этом рассказано скудненько, а информацию в английской Википедии тяжело назвать общедоступной. Постараемся разобраться в этом вместе.
+76
Впечатляющие анимационные эффекты
2 мин
115KПеревод
С появлением jQuery, у веб-программистов появилась возможность создавать впечатляющие визуальные эффекты, не прибегая к использованию технологии flash. В данной статье представлено несколько ярких примеров того, каких потрясающих результатов можно достичь, используя стандартные средства браузера и свое воображение.
+230
Как работают алгоритмы сортировки
1 мин
22KИногда для понимания того, как работает та или иная вещь, лучше один раз увидеть, чем сто раз услышать.
Замечательный сайт www.sorting-algorithms.com позволяет увидеть, как сортируются данные разными алгоритмами. Вы сможете посмотреть анимацию в зависимости от алгоритма, исходных данных.
Все это бегает и сортируется прямо на ваших глазах!
Работает на Google App Engine, видимо, поэтому и лежит от посетителей с «Хабра».
Замечательный сайт www.sorting-algorithms.com позволяет увидеть, как сортируются данные разными алгоритмами. Вы сможете посмотреть анимацию в зависимости от алгоритма, исходных данных.
Все это бегает и сортируется прямо на ваших глазах!
Работает на Google App Engine, видимо, поэтому и лежит от посетителей с «Хабра».
+117
HTML5 для веб-дизайнеров. Часть 3: Мультимедиа
14 мин
8.3KПеревод
HTML5 для веб-дизайнеров
- Краткая история языка разметки
- Модель HTML5
- Мультимедиа
- Формы 2.0
- Семантика
- HTML5 и современные условия
В истории всемирной сети каждый очередной виток перехода на новый уровень развития начинался с какого-нибудь технологического нововведения. Когда в HTML добавился элемент img, это в корне изменило облик сети. Затем введение JavaScript сделало ее более динамичной и интерактивной. Чуть позже появился Ajax, что открыло возможности для создания в сети полноценных приложений.
Современные веб-стандарты настолько продвинуты, что сейчас можно создать почти что угодно, используя лишь возможности HTML, CSS и JavaScript. Почти что угодно.
В спецификациях этих стандартов все еще есть пробелы. Так, если вы хотите сваять страницу с текстом и картинками, вы вполне обойдетесь HTML и CSS. Но если вам нужно опубликовать аудио или видео, тут неизбежно придется обратиться к сторонним технологиям — Flash или Silverlight.
Эти технологии — «плагины», эдакие «затычки», заполняющие «дыры» в сети. Они делают относительно простой публикацию игр, фильмов и музыки онлайн, но они не открыты и принадлежат и контролируются частными компаниями. Да, тот же Flash — мощный инструмент, но его применения в какой-то мере схоже со сделкой со злыми силами: мы получаем новые, недоступные другим путем, возможности, но взамен теряем часть свой независимости.
HTML5 призван восполнить этот недостаток. В данный момент он вступает в прямую конкуренцию с собственническими технологиями, вроде Flash и Silverlight, и главное его преимущество в этой борьбе — ему не требуется плагины, так как его мультимедиа-возможности «вшиты» в браузеры.
+109
Подборка видео-проигрывателей на флэше
2 мин
18KЯ большой любитель собирать списки разных необходимых вещей. В этот раз это список видео-проигрывателей на флэше,
Уже помогли. Отдельные спасибы Elected, atri, rmb. Кармы всем за мой счет ^_^
+70
Создание реалистичной кнопки средствами CSS3
3 мин
7.5KПеревод
Цель — создание кнопки, как на изображении, не единой картинкой, а с помощью CSS3
+84
Как увеличить скорость работы jQuery скрипта
4 мин
9K11 правил, следуя которым можно увеличить производительность скрипта, написанного с использованием jQuery.
+68
Информация
- В рейтинге
- Не участвует
- Откуда
- Брянск, Брянская обл., Россия
- Зарегистрирован
- Активность