Pull to refresh
25
0
Kirill Marchenko @nutt

User

Send message

Закрепляем jQuery — 25 отличных советов

Reading time19 min
Views168K
Перевод отличной статейки. Думаю, будет полезна как новичкам, которые только приступили к использованию 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. Короткая запись для события готовности документа


Rock'n'Roll!

Аренда сервера для стартапа

Reading time2 min
Views26K
Недавно озадачился вопросом поиска выделенного сервера для своего стартапа. После просмотра российского рынка пришел в ужас и перевел взгляд на зарубежный, парой интересных предложений которого и хочу поделиться.

К примеру аренда четырехядерного AMD Opteron 2344 HE (1.7 GHz), 4Gb RAM, 2x250GB HDD обойдется в $100, что сравнимо с арендой порта и места в стойке под сервер у нас в стране.
Читать дальше →

Generating PDF files with PHP and FPDF

Reading time5 min
Views117K
Большинство web-сервисов экспортируют данные в разных форматах для дальнейшего использования. Данная статья о том, как экспортировать данные в pdf-формате.
Хотя многие знают как это делать, я опишу кратко для тех кто не знает.
Читать дальше →

Статья по мотивам моего выступления на PHPConf. Общий обзор Flex-а и связки PHP&Flex

Reading time17 min
Views2K
Статья будет полезна тем, кто хочеть познакомиться с Flex и его интеграцией с PHP, оценить плюсы и минусы использование этого решения в продакшен. Хочу заметить выступление почти двух годичной давности, однако многое (практически все=) до сих пор актуально.

PHP&Flex, «новая» альтернатива для создания Rich Internet Applications

Читать дальше →

Памятка дизайнеру сайтов

Reading time10 min
Views246K
Вторая версия статьи, расширенная и дополненая.

Большая часть готовилась для моего выступления на «РИТ: Клиентские технологии», куда я, к сожалению, не доехал.

 

Памятка дизайнеру сайтов

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

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

Читать дальше →

ajax загрузка нескольких файлов с php формой

Reading time2 min
Views36K
Как-то для личных целей мне понадобилось сделать ajax загрузку сразу нескольких файлов. Но хотелось сделать это красиво и удобно.
Для этой задачи я выбрал горячо мной любимый jquery и несколько плагинов к нему.
подробнее

Проверка орфографии с помощью Google

Reading time2 min
Views15K
Иногда в проекте требуется проверить данные на предмет орфографических ошибок, не полагаясь на познания пользователя по части языков. Тут нам сможет помочь компания Google, с таким их сервисом, как проверка орфографии, используемым в Google Toolbar. Но, к сожалению, Google не предоставляет открытого API для работы с ним.

Итак, краткое описание:
Для того, чтобы проверить текст нам нужно отослать его в POST на https://google.com/tbproxy/spell?lang=ru, где для смены языка следует заменить значение параметра lang на соответствующий по ISO 3166-1 alpha-2. Текст оформляется в XML вида:
<?xml version="1.0" encoding="UTF-8" ?><br/>
<spellrequest textalreadyclipped="0" ignoredups="0" ignoredigits="1" ignoreallcaps="1"><br/>
 <text>Текст для проверки</text><br/>
</spellrequest>
ignoredups — подсветка повторов
ignoredigits — считать цифры ошибками
ignoreallcaps — не проверять слова написанные капсом (подсказал pointum)

Если всё успешно, мы получаем ответ вида
<?xml version="1.0" encoding="UTF-8"?><br><spellresult error="0" clipped="0" charschecked="272"><br> <c o="27" l="13" s="0"></c><br> <c o="73" l="11" s="1">орфографии и орфографии</c><br> <c o="190" l="11" s="1">пользоваться</c><br> <c o="226" l="13" s="0">пред оставляет пред-оставляет</c><br></spellresult>
Атрибуты тега spellresult:
error — произошла ли ошибка
charschecked — количество проверенных символов

В нем идет перечисление допущенных ошибок (теги c), их параметры:
o — начало исходного слова в тексте
l — длина этого слова
s — точность результата

В самом теге c содержатся предполагаемые варианты написания слов, разделенные символом \t.

P.S. Когда этот текст уже был написан, случайно наткнулся на статью в блоге Paul Welter, которая, в принципе, описывает тоже самое…


UPD: Пользователь wayly написал на PHP класс для проверки текста с помощью этого сервиса, скачать можно по ссылке proxysoft.ru/files/spellchecker.zip (зеркало).

UPD2: mezhevikin подсказал ajax-решение с использованием этого сервиса — orangoo.com/labs/?page_id=3

UPD3: Список поддерживаемых языков

_________
Текст подготовлен в ХабраРедакторе
Код подсвечен в Source Code Highlighter

Издержки больших проектов или взгляд на программирование в команде изнутри

Reading time1 min
Views3.9K
Ни для кого не секрет, что разработка больших программных продуктов требует не только эффективного руководства, но и эффективных процессов, которым следуют все разработчики. На примере своей компании я постараюсь описать жизненный цикл проекта и цену его разработки и поддержки. Те, кто работает в небольших командах из нескольких человек, смогут сравнить и представить, что их ждет при увеличении штата или же чего они избежали, если расширяться не планируют. А в комментариях можно покритиковать, указать на ошибки и предложить альтернативы.

Итак, собственно, к делу.

Мы занимаемся системами электронной биржевой торговли, аналитикой рынка и поставкой маркет-данных в реальном времени. К таким системам предъявляются повышенные требования по надежности — каждая ошибка может привести к потере больших денег.
Читать дальше →

Контроллеры, основанные на механизмах рефлексии.

Reading time3 min
Views2K
контроллер — это специализированная сущность для управления другими сущностями.
Часто используют функциональные контроллеры, основанные на найменге (naming) примеры всем широко известны, например плагины смарти:
smarty_type_name() как видите из документации, плагин становится доступным если объявлены соответствующие функции.
чиатать далее...

Доставка видеоконтента пользователям

Reading time7 min
Views11K
[ Часть I. Доставка видеоконтента ] [ Часть II. CDN своими руками ]

Что такое «контент» для видеохостинга? Во-первых, контент видеохостинга – это просто видео, которое представляет собой набор файлов в различных форматах, в частности, в формате FLV для просмотра пользователем через Flash Player. Эти файлы статичны, видеохостинг при загрузке пользователем видеоролика осуществляет конвертацию во все требуемые форматы с необходимым битрейтом. Хранение такого контента — это хранение обычных файлов, только довольно большого размера. Отдача контента — это, по сути, организация скачивания файлов.
Во-вторых, контент видеохостинга — это «живые» потоки или вещания. Вещания не записываются на диск, не происходит их конвертация, потоки раздаются клиентам с учетом пропускной способности каналов (происходит пропуск пакетов, если канал клиента недостаточен для получения потока вещания в полном качестве). Отдача контента в данной ситуации — это раздача потока на большое количество подключенных пользователей (тысячи смотрящих).
Читать дальше →

CDN своими руками или раздача видеоконтента

Reading time5 min
Views11K
[ Часть I. Доставка видеоконтента ] [ Часть II. CDN своими руками ]

В продолжение темы про доставку видеоконтента: мы обеспечили хранение и обработку контента, как теперь отдать контент таким образом, чтобы он оказался как можно “ближе” к потребителю? Большая часть статьи будет посвящена обобщенному подходу географически распределенной раздачи контента, а в конце в качестве примера описанный подход будет применен к доставке видеофайлов и вещаний конечным пользователям.

Кроме самого факта, что контент был доставлен пользователю, мы должны обеспечить качество доставки контента. Для FLV-файла видео это означает, что скорость, с которой он доставляется пользователю, должна быть выше либо равна битрейта потока, иначе видео у пользователя при просмотре будет «затыкаться».

Кроме того, имеет смысл «приблизить» контент к пользователю географически. Это связано с пропускной способностью каналов (отсутствием иногда хороших магистральных каналов), а также с разницей в стоимости локального и внешнего трафика для конечного пользователя (например, в регионах РФ).

Такой шаг необходимо сделать при желании выйти на международный рынок, а также при региональном развитии внутри РФ. Сегодня в регионах очень часто самыми популярными сайтами являются региональные порталы, которые предоставляют различные сервисы, в том числе и сервис видеохостинга, а их популярность обусловлена как стоимостью трафика, так и скоростью доступа/временем отклика. Можно представить, что пользователь готов подождать открытия страницы, загрузки плеера, но тяжело предположить, что пользователь согласится смотреть видео, которые прерывается из-за постоянной буферизации, или смотреть вещание, которое доходит до пользователя в виде слайдшоу (после пропуска пакетов остались только опорные кадры видео).

Таким образом, осознав необходимость географической распределенности для контента, мы покупаем/арендуем сервера в непосредственной близости от потребителя: в Европе, США, Украине, Екатеринбурге и т.д.

Что же делать дальше?

Пишем на картинках

Reading time7 min
Views15K
В течение последнего времени что-то часто стали мелькать статьи про обработку изображений на php. Скругленные края уже были, тени были, мокрый пол был, еще куча всего было.

А вот надписей вроде еще не было. Значит будут. :-)

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

Атомарность операций и счетчики в memcached

Reading time5 min
Views8.2K
Серия постов про “Web, кэширование и memcached” продолжается. В первом и втором постах мы поговорили о memcached, его архитектуре, возможном применении, выборе ключа кэширования и кластеризации memcached.

Сегодня речь пойдет о:
  • атомарных операциях в memcached;
  • реализации счетчиков просмотров и онлайнеров.

Следующий пост будет посвящен проблеме одновременного перестроения кэшей.

Что же с атомарностью операций?

jQuery для начинающих. Часть 2. JavaScript Меню.

Reading time8 min
Views46K


В первой части были рассмотрены базовые принципы работы селекторов и приведены несколько примеров, в данной статье я постараюсь акцентировать внимание на реализации JavaScript меню для Вашего сайта.

Если Вам готовый код наглядней документации, то переходим от слов к делу, т.е. на страницу с примерами.
Читать дальше →

jQuery для начинающих

Reading time9 min
Views515K
jQuery Logo

jQuery — это замечательный JavaScript Framework, который подкупает своей простотой в понимании и удобством в использовании. Но изучение надо с чего-то начинать, и лично моё мнение — лучше всего начинать с наглядных примеров, и они далее…

Читать дальше →

Оптимизация MySQL запросов

Reading time4 min
Views126K
В повседневной работе приходится сталкиваться с довольно однотипными ошибками при написании запросов.

В этой статье хотелось бы привести примеры того, как НЕ надо писать запросы.
Читать дальше →

Анимированный фон средствами jQuery или «Эй, а ведь круто! Как Flash!»

Reading time3 min
Views13K
jQuery + CSS Sprite
Занимательные поделки от Джонатана Снука. Данная статья будет интересна скорее новичкам, нежели более умудренным разработчикам, хотя мистер Снук достаточно авторитетен и его методики могут быть полезны всем.
Любопытно... Что там у вас?!

Пишем RSS-читалку на Flex

Reading time5 min
Views1.7K
Попробуем сделать при помощи Flex простое приложение. Впрочем, это не будет обычный Hello World, это будет нечто более полезное.
Но перед тем, как попробовать сделать что-нибудь с помощью Flex, разберемся, какие возможности появились в новой версии.
Читать дальше →

Подборка видео-проигрывателей на флэше

Reading time2 min
Views18K


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

Надеюсь уважаемые комментаторы помогут дополнить список и выявить абсолютного лидера среди проигрывателей.
Уже помогли. Отдельные спасибы Elected, atri, rmb. Кармы всем за мой счет ^_^

Читать дальше

Information

Rating
Does not participate
Location
Санкт-Петербург, Санкт-Петербург и область, Россия
Registered
Activity