Предлагаю вниманию читателей перевод статьи "Programming Sucks! Or At Least, It Ought To", опубликованной в «The Daily WTF». Публикация рассказывает о том, как избыток профессионализма на практике мешает эффективности и предназначена скорее для опытных разработчиков, нежели для новичков.

Перевод отличной статейки. Думаю, будет полезна как новичкам, которые только приступили к использованию jQuery, так и тем, кто уже какое-то время с ним работает. А кого-то, возможно, заставит глянуть эту чудесную библиотечку. Многие советы имеют отношение не только к jQuery, но и к JavaScript в целом. Лично для меня была весьма и весьма познавательной, посему и захотелось донести это «до масс». Перевод не дословный, но передающий смысл и максимально адаптированный к русскому языку.

Далее все написано от имени автора оригинальной статьи.

Введение

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

Я не эксперт в jQuery. И даже не претендую, поэтому, если встретите ошибки, смело поправляйте меня и вносите предложения по улучшению (поправлять и присылать поправки нужно автору статьи, а не перевода — зам. пер.).

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

Содержание

1. Загружайте фреймворк с Google Code
2. Используйте «шпаргалку» (cheat sheet)
3. Соединяйте все ваши скрипты и уменьшайте размер файла
4. Используйте возможности Firebug для ведения логов
5. Минимизируйте операции выборки в пользу кэширования
6. Сводите манипуляции с DOM-деревом к минимуму
7. Оборачивайте все в единый элемент, когда речь идет о любой вставке в DOM
8. Используйте «id» вместо классов, где это возможно
9. Задайте контекст своим селекторам
10. Используйте последовательности вызовов методов с умом
11. Научитесь правильно использовать анимацию
12. Научитесь назначать и делегировать события
13. Используйте классы для сохранения состояния
14. Еще лучше — используйте встроенный в jQuery метод data() для сохранения состояния
15. Пишите собственные селекторы
16. Подготавливайте HTML и модифицируйте его, когда страница загружена
17. Используйте «отложенную загрузку» (lazy loading) для определенного контента для выигрыша в общей скорости и преимуществ для SEO
18. Используйте служебные функции jQuery
19. Используйте «noconflict» для переименования глобального объекта «jquery», когда используете его с другими фреймворками
20. Как узнать что картинки загружены?
21. Всегда используйте последнюю версию
22. Как проверить, что элемент существует?
23. Добавляйте класс «JS» в элемент «html»
24. Возвращайте «false» для отмены поведения по-умолчанию
25. Короткая запись для события готовности документа

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


Сразу оговорюсь, что я не буду использовать opacity и абсолютное позиционирование, чтобы разместить контент поверх полупрозрачного блока.

Некий Shaun Friedle написал любопытный javascript который автоматизирует распознавание captcha на megaupload.

Пара любопытных особенностей скрипта:

1. используется HTML 5 функция javascript getImageData для работы с пикселями;
2. используется искусственная нейронная сеть для распознавания и работает довольно точно.

Пример работы: herecomethelizards.co.uk/mu_captcha
Исходник: userscripts.org/scripts/review/38736

О чём речь?

В последнее время на Хабре было предложено довольно много идей для капчи. Сложная, умная, смешная, капча остаётся одним из основных способов защиты формы от ботов.

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

В этом обзорном посте я бы хотел рассмотреть незаметные для пользователя методы защиты от ботов.

Методы защиты

Один из стандартных вопросов, который задает (или по идее должна задавать) веб-студия на первой встрече с клиентом – зачем вам нужен сайт? Зачастую клиент с готовностью отвечает «нам нужен сайт как инструмент». Но, как показывает опыт, иногда это примерно то же самое, что прийти в магазин и купить дрель, чтобы была. Чтобы в доме был инструмент.

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

С учетом того, что создание сайта – удовольствие чаще всего не дешевое, что же нужно сделать, чтобы инструмент не лежал на полке, а использовался по своему прямому назначению? Декларируя, что мы заказываем сайт-инструмент, надо понимать, какие именно «дырки» мы хотим получить в результате.

Давайте рассмотрим постановку задачи на примере.

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

Посмотреть тест.

PS: opacity в тесте не будет.

UPD: тест обновлен: добавлено 5 тестов, исправлена ошибка в css

Навеянно этой темой.
Пример, как это работает.

1. Введение

Представим, мы имеем класс relative, внутри которого имеется текст, и не задаём ему width:

#bar{
position:relative;
border:5px solid #00FFFF;
padding:10px;
height:200px;
}

мы получим резиновый блок:

<div id="bar">
text
</div>


При этом, блок обладает неизменными padding+border и резиновым width, таким, что width_px+padding_px+border_px = 100%.
Для absolute блоков, такой трюк не прокатывает.

Вы наверное уже слышали о технологии масштабирования Liquid Resize, которая учитывает содержимое изображения. Если вам интересно как оно все работает и как можно реализовать все это самому, то читайте далее (осторожно, много рисунков).


(НЛО прилетело и растянуло этот рисунок здесь)

Эта тема в сети не новая, но тут статью об этом не нашла. Оказывается, у IE, начиная с версии 7, есть поддержка интерполяции (режима масштабирования) изображений и управления им через CSS-свойство -ms-interpolation-mode, описанного в MSDN.

Свойство имеет 2 значения:
— nearest-neighbor (менее качественный режим) — по умолчанию
— bicubic (более качественный бикубический метод)

W3C рекомендует использовать это свойство с префиксом -ms.

Привет, хочу представить одну интересную разработку студии, в которой я работаю. И как ведущий разработчик буду её освещать :)

Введение

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

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

Очередная глава из книги «jQuery in Action» (авторы Bear Bibeault и Yehuda Katz). Прежде всего извиняюсь перед читателями за столь большой промежуток между публикациями глав. Но все-таки я это сделал, чему, конечно же, рад. Надеюсь, что и вы тоже не останетесь равнодушными. Итак, продалжаем.

Когда то давно, не помню где я читал о том, что обычный скрол можно сделать более функциональным и предлагалось ряд решений.
Мне эти идеи понравились и вот спустя много лет :)…
Предлагаю свою реализацию на javascripte. Идея в том чтобы на фоне скрола показывать эскиз всего текста, а с помощью движка скрола видимую часть текста. При таком подходе сразу видно где находится картинка, заголовок, а где параграф.

Очень часто приходится видеть варианты элемента управления «аккордеон» на различных сайтах. В этой заметке я хотел бы предложить свой вариант, который кроме того, что обладает некоторыми оригинальными свойствами, еще и весит в minified-виде всего 618 байт. Заодно, я покажу как быстро написать простейший плагин для jQuery.

Забегая в перед скажу, что плагин тестировался в Firefox 3.0.3, Internet Explorer 7 и 8b2, Opera 9.52 и Chrome 0.3.154.9. Во всех других браузерах работоспособность гарантируется настолько насколько в них работает jQuery.

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

Raphaël — небольшая библиотека(20 килобайт) для построения векторной графики на веб-сайтах.

Она использует SVG и VML в качестве базы для создания графики. Учитывая то, что каждый созданный объект — DOM объект, то при помощи JavaScript обработчиков можно легко изменять их свойства и действия.

JavaScript — очень динамический язык, в нём заложена возможность менять язык под себя и создавать удобные инструменты для дальнейшей работы. «Реализация классического наследования» — как раз один из таких инструментов. В данный момент я не представляю себе, как я программировал бы на JS без «классов».

Для меня «Классы» — это, скорее, подход к проектированию и реализации поставленной задачи. В нашем новом проекте такой подход используется по полной программе (и, я думаю, что он оправдывает себя на все 100%).

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

Суть многопоточности (для приложения) состоит в том, что процесс может состоять из нескольких (однотипных) потоков, выполняющихся «параллельно», то есть без упорядочивания по времени — выполнился один, пошел следующий. Использование многопоточности позволяет ускорить выполнение задачи и/или снизить нагрузку, таким образом, улучшая быстродействие самого приложения.

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

Я рассмотрю простой пример, как можно достичь эмуляции многопоточности в PHP.

Знали ли разработчики LiveScript из Netscape о том, какое влияние окажет их язык, позже переименованный в JavaScript, на лицо интернета — веб-сайты, или, может быть, они твердо на это рассчитывали, но факт остается фактом — JavaScript на сегодняшний день является одним из самых важных и распространенных языков в мире.

В то время, как на стороне сервера трудится разношерстная компания языков в лице php, perl, python, ruby, .net, java и многих других, на стороне клиента JavaScript существует буквально в гордом одиночестве. Фактически, из маленького дополнения к html, JavaScript превратился в полноправного члена банды «html+css+js», который, зачастую, уже командует остальными, сверкая золотым браслетом с надписью «ajax» и делая недовольное лицо $( ) при случае.