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

Недавно столкнулся с задачей прикручивания достаточно необычного шрифта для мобильного веб клиента. Так как работа была под айфон, то я решил, что в этой задаче мне поможет css 3 и такая штука как @font-face. Пользу от такого способа решения задачи, я думаю, видят все, потому что:

• сохраняется поиск по тексту, потому что это текст, а не картинка;
• появляется возможность использовать онлайн-переводчики и разные фишки связанные с текстом;
• никто не отменяет для нас использование line-height, letter-spacing, text-shadow,text-align, и селекторов вида ::first-letter и ::first-line

Довольно часто я наступаю на одни и те же грабли. Стараясь выполнить какой-нибудь проект побыстрее, я с головой ухожу в реализацию необходимой функциональности. А через неделю, мне на глаза обязательно попадается описание библиотеки, фреймворка или плагина, воспользовавшись которыми, я мог бы выполнить свою часть работы в разы быстрее. В общем, сейчас я стараюсь быть в курсе готовых решений в интересующих меня областях. В последнее время мне часто приходится работать с javascript и поэтому, сейчас я уделяю особое внимание библиотеке jQuery и ее плагинам. Должен сказать, что упускать из виду такое разнообразие готовых решений просто нельзя. Данная статья сделана на основе обзора «50 Awesome New jQuery Plugins», который я прочитал пару дней назад.

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

Здесь приведен ряд очень простых правил, следуя которым, ваше сотрудничество с jQuery не будет омрачено скрежетом напрягшегося браузера. Конечно, не так часто случается, что скорость работы javascript’а оказывается критичной, однако такое все же может произойти, и произойти в самый неподходящий момент. Поэтому, лучше держать эти правила в голове и не пренебрегать ими.

Pirobox — легкий и быстрый скрипт галереи на jQuery.

Автор скрипта итальянец Diego Valobra (http://www.diegovalobra.com), талантливый человек.
В сжатом виде скрипт весит всего 10Кб, есть несколько тем внешнего вида, слайдшоу, корректная работа с PNG, клавиатурная навигация, проверка состояния ссылок (битая/не битая), возможность открыть картинку в новом окне.

На данный момент последняя версия — 1.2.2.

Официальный сайт
Скачать
Demo

1. Верстка, аутсорсинг и технические задания

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

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

_{Поль Руже:  Это блогозапись нашего гостя, Маркуса Стэнджа. Маркус обыкновенно работает над реализацией темы оформления Firefox для Маков, но на сей раз он совершил небольшую окольную прогулку по движку макетирования в Gecko, реализуя -moz-element.}

В четвёртой бета-версии нового Файерфокса мы представляем вам новое расширение CSS-свойства background-image: возможность отрисовывать произвольные элементы в качестве фонов, используя -moz-element(#elementID).

<p id="myBackground1" style="background: darkorange; color: white; width: 300px; height: 40px;">
    This element will be used as a background.
    <!-- Этот элемент послужит фоном. -->
</p>
<p style="background: -moz-element(#myBackground1); padding: 20px 10px; font-weight: bold;">
    This box uses #myBackground1 as its background!
    <!-- Этот прямоугольник использует #myBackground1 в качестве фона! -->
</p>

Изображение -moz-element() срабатывает совершенно так же, как и привычное изображение url(). Это значит, что оно управляется всеми привычными свойствами фонов: background-position, background-repeat, и даже background-size.

Используя background-size, вы можете создать миниатюру (thumbnail) того элемента, который используется в качестве фона — вот пример:

Очередная порция экспериментов на HTML5. Автор просит не использовать их в спорах HTML5vsFlash :)

Очень распространено заблуждение о том, что xslt — это сплошные тормоза, а smarty — наше всё. Отставим в сторону лаконичность синтаксиса смарти и удобство поддержки xslt, а устремим наш пристальный взор именно на скорость их работы.

Рисовать мы будем нечто чуть более сложное чем «привет мир» — дерево. Это не даст нам использовать копипасту и заставит повторно использовать код для вывода узлов. Количество их пусть будет небольшим — 100 штук.

Помните ли, как (много лет подряд) был известен проект IE7-JS (автор — Dean Edwards), нацеленный на подтягивание Internet Explorer 6 (а затем и Internet Explorer 7) до уровня современных браузеров?

Теперь другой разработчик развил эту идею. В последнее время появляются ведь и такие свойства CSS3, которые поддерживает только один современный движок (например, WebKit), или даже не поддерживает ни один (потому что все движки требуют к этому свойству своих префиксов: «-moz-», «-ms-», «-o-», «-webkit-» — а иначе не работают). Все браузеры нуждаются в костылях (более или менее основательных) для поддержки CSS3.

Библиотека eCSStender (автор — Aaron Gustafson) претендует на роль основы именно такого костыля. Я говорю «основы», так как сама по себе она предоставляет лишь небольшую (≈20 Kb JS) платформу, занимающуюся анализом CSS-стилей — а поддержкою конкретных CSS-свойств должны заниматься (работая поверх неё) отдельные расширения, написанные в соответствии с документацией. Сейчас есть ужé с полдюжины расширений, из которых половина — костыли для IE.

Каждый, кому приходилось писать объемные куски осмысленного кода на javascript, рано или поздно понимал, что ему многого не хватает в этом языке или просто неудобны некоторые врожденные конструкции. Для сглаживания шероховатостей применяются jQuery, Prototype, MooTools etc. Кто-то уже мало представляет себе, как можно кодить без них. Сегодня я расскажу о еще одной маааленькой библиотечке, которая делает мир javascript-программиста еще прекраснее. Речь пойдет о Underscore.js

Наткнулся на замечательную песню, в очередной раз освящающая тему противостояния верстальщиков и интернет разработчиков против Internet Explorer.

Знание английского приветствуется.


P.S. Видео не самой первой свежести но на хабре вроде бы не проскакивало :)