Как стать автором
Обновить
0
0

Пользователь

Отправить сообщение

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

Время на прочтение19 мин
Количество просмотров168K
Перевод отличной статейки. Думаю, будет полезна как новичкам, которые только приступили к использованию 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!

5 галочек: чеклист юзабилити

Время на прочтение6 мин
Количество просмотров30K
Мы выделили 5 основных пунктов, по которым можно определить юзабилити сайта. Список спорный и в основном касается продающих сайтов. И да, эти пять пунктов — среднее арифметическое опыта, полученного при обработке заявок на конкурс «Юзабельный вебпроект». Думаете, мы раздали слонов и забыли?


оригинал картинки

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

Ошибки, само собой, повторялись. Голова пухла, а мы продолжали писать одинаковые комменты. Результатом марафона стал ниже приведенный чеклист.

Сразу оговоримся, что мы не оцениваем юзабилити в вакууме, нам важно, чтобы сайт работал, т.е. «продавал». Товары, услуги, идеи — не важно. Речь может идти о бесплатном веб-сервисе, для которого транзакцией станет регистрация посетителя.
Читать дальше →

Как сделать динамичный, переливающийся фон

Время на прочтение1 мин
Количество просмотров11K
На сайте новаторского магазина thinkgeek.com столкнулся с любопытным эффектом — переливающимся фоном (чтобы увидеть конфетку нужно поработать колёсиком прокрутки). Сделан он очень просто, и все же подобная техника попалась мне впервые.

image

спешу поделиться:

Кроссбраузерный CSS3 градиент

Время на прочтение3 мин
Количество просмотров63K
Кроссбраузерный CSS3 градиент? с поддержкой Opera

Для FF используется -moz-linear-gradient, для Safari/Chrome — -webkit-gradient, для IE — DXImageTransform.Microsoft.gradient.

Вот только Opera 10 ещё не поддерживает CSS3 Gradient :(
Что же делать?

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

Время на прочтение10 мин
Количество просмотров245K
Вторая версия статьи, расширенная и дополненая.

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

 

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

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

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

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

Эмулятор Opera Mobile уже доступен

Время на прочтение1 мин
Количество просмотров20K

Специально для веб-разработчиков выпущен эмулятор Opera Mobile, который предназначен для тестирования сайтов прямо с десктопа.

Скачать:
Opera Mobile for Windows
Opera Mobile for Mac
Opera Mobile for Linux (deb)

Источник

Создаём тему для Drupal 6. Часть 1

Время на прочтение11 мин
Количество просмотров29K
image
По созданию тем для друпала в интернете можно найти несколько статей (хорошая статья, советую почитать), однако обычно всё заканчивается банальным набором шаблонов и инфо-файлом. В этом топике я постараюсь доступно рассказать как создать гибкую и не самую простую тему.

Начало


Для начала нам потребуется создать директорию в каталоге sites/all/themes с названием нашей темы. Я назвал тему mytheme и создал каталог sites/all/themes/mytheme.
В созданном каталоге создаем директории css — для стилей, js — для скриптов, images — для картинок, templates — для шаблонов, preprocess — об этом позже. Также создаем файл template.php в котором мы будем писать всю логику темы и mytheme.info для описания темы. Можно еще добавить favicon.ico и logo.png.
Читать дальше →

Патч к Drupal-модулю Date — показываем месяцы в родительном падеже

Время на прочтение4 мин
Количество просмотров1.7K
Вывод даты в виде "27 февраль 2010" это уродливо. Ни в русском, ни в украинском, ни в польском — и, я думаю, что это касается большинства других славянских языков — так не говорят и не пишут.

НЕправильные даты в выводе ноды

Понятно, что через какое-то время привыкаешь и просто не замечаешь, но есть ведь настойчивые заказчики, которые тыкают носом разработчика в эти «ляпы» и требующие исправления ошибок (по их мнению). Спасибо им за это. Это нужно, хотя и раздражает.

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

Несколько фишек для изучающих английский язык

Время на прочтение1 мин
Количество просмотров48K
1. Анонимные чаты: omegle.com, chatroulette.com
2. Сайты-помощники: kwiz.me, kimir.org, englishtips.org
3. Подкастинг: eslpod.com, effortlessenglish.com, npr.podcast.com, businessenglishpod.com,
4. Качаем фильмы/сериалы, затем субтитры к ним. Просматривать можно с замедлением в VLC плеере чтобы лучше переваривать. Еще рекомендую комик шоу, например Important Things with Demetri Martin — не пожалеете.
5. В скайпе ищем каких нибудь индусов со статусом SkypeMe и не стенсняясь знакомимся.
6. При прочтении какой-то книги или просмотра фильма неплохо бы подготовится таким образом: берем текст, устанавливаем длину слова и частоту употребления в тексте и запускаем, например, этот скрипт (PHP): pastebin.com/m7672c2a9
В итоге имеем дайджест слов большинство из которых вы уже знаете но остальные стоит подучить. И когда вы будете смотреть фильм или читать книгу вы автоматом поймете это слово.
7. Произношение слов — ставим в Google.translate режим Русский->English и в поле текста пишем английское слово — оно без перевода встанет справа вместе с флэшкой которое произносит слово. Также forvo.com, howjsay.com
8. Социальные сервисы ответов:
answers.yahoo.com, vark.com
9. Социальные сети для изучения языка:
livemocha.com, lingq.com, italki.com
10. Остальное:
nytimes.com, ecenglish.com, urbandictionary.com
allengl.narod.ru/top/phvTOP170.htm

Надеюсь каждый нашел для себя что-то полезное:)

Создание круговых панорам (flash)

Время на прочтение5 мин
Количество просмотров142K
Как сделать панорамное фото с трехмерным обзором


Вертеть головой — потянув мышкой, или курсорами ← →, приближение/удаление — колесиком мышки.

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

Вообще, сделать панорамное фото (в т.ч. круговую панораму) совсем не сложно.
При минимальном навыке на всё уйдет минут 10.

Перечислю всё, что нам понадобится:
Читать дальше →

Визуальный редактор jHtmlArea

Время на прочтение2 мин
Количество просмотров5.7K
Очень компактный, но в то же время довольно удобный визуальный редактор jHtmlArea. По первой букве в названии можно догадаться, что используется jQuery.

Он в чем-то схож с более известным jWysiwyg. Несмотря на то что имеет меньший размер, обладает не меньшими возможностями. На мой взгляд код организован гораздо удобнее, очень легко расширяем. Также огромный плюс в том, что иконки в меню можно располагать в любом порядке.
Читать дальше →

Обновление «странички для счастливых обладателей IE6»

Время на прочтение1 мин
Количество просмотров7.1K
Публикуется по просьбе mdss, который доработал мою версию заглушки для IE6.
Все благодарности лично ему.

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

Полезные и интересные модули для Drupal 6.xx + Советы и трюки (Часть I)

Время на прочтение6 мин
Количество просмотров4.7K
В апреле прошлого года хабраюзер @7paca написал отличную статью про полезные модули и я решил её продолжить
Читать дальше →

Несколько полезных и интересных модулей для Друпала

Время на прочтение3 мин
Количество просмотров10K
logoИзучая Drupal, я нередко натыкаюсь на новые задачи, которые необходимо реализовать, и проблемы, которые нужно устранить.
Конечно, сайты Drupal.ru и Drupal.org — неоценимые помощники во всех вопросах и помогут разобраться практически в любой поставленной задаче, однако сегодня хотелось бы рассказать вам о некоторых модулях и их возможностях, чтобы вам не пришлось лихорадочно искать ответы на ваши вопросы, когда подобный функционал вам вдруг понадобится. Возможно, вы не узнаете для себя ничего нового из этого топика, но я все же попробую.

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

Страничка для счастливых обладателей IE6

Время на прочтение1 мин
Количество просмотров6.1K
Наконец-то и я решился… Все новые проекты отныне будут иметь спец-страницу для Internet Explorer 6.

Изучив аналогичные решения в Интернете, решил создать свою страничку. Русский текст наскреб понемногу с разных проектов и отредактировал на свой вкус. Дизайн осознанно и намерено использовал майкрософтовский, чтобы хоть как-то повысить планку доверия для тех несчастных, что до сих пор сидят на IE6. Надеюсь, меня за это не осудят, тем более сделано это исключительно для многострадальных клиентов Майкрософта.
Читать дальше →

Список Javascript библиотек для рисования графиков и диаграмм

Время на прочтение1 мин
Количество просмотров22K
О визуализация графов в вебе говорили здесь, навеяно этой статьей.

Под катом обзор JavaScript библиотек для рисования графов, диаграмм и прочей красоты.
Читать дальше →

jQuery для начинающих. Часть 4. Селекторы

Время на прочтение11 мин
Количество просмотров216K


Последнее время мне всё чаще задают вопрос как выбрать тот или иной элемент в DOM'е, и данный пост будет сплошь посвящен селекторам в jQuery, возможно большинство из них Вы видели в различных источниках, но собрать их воедино все же стоит…
Читать дальше →

jQuery для начинающих. Часть 3. AJAX

Время на прочтение11 мин
Количество просмотров455K

Представляю Вам третью статью из серии jQuery для начинающих. В этот раз я постараюсь рассказать о реализации AJAX запросов...
Читать дальше →

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

Время на прочтение8 мин
Количество просмотров46K


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

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

Информация

В рейтинге
Не участвует
Откуда
Беларусь
Дата рождения
Зарегистрирован
Активность