Здесь приведен ряд очень простых правил, следуя которым, ваше сотрудничество с jQuery не будет омрачено скрежетом напрягшегося браузера. Конечно, не так часто случается, что скорость работы javascript’а оказывается критичной, однако такое все же может произойти, и произойти в самый неподходящий момент. Поэтому, лучше держать эти правила в голове и не пренебрегать ими.
Par Mactep @parmactep
User
Закрепляем jQuery — 25 отличных советов
19 min
Translation
Перевод отличной статейки. Думаю, будет полезна как новичкам, которые только приступили к использованию jQuery, так и тем, кто уже какое-то время с ним работает. А кого-то, возможно, заставит глянуть эту чудесную библиотечку. Многие советы имеют отношение не только к jQuery, но и к JavaScript в целом. Лично для меня была весьма и весьма познавательной, посему и захотелось донести это «до масс». Перевод не дословный, но передающий смысл и максимально адаптированный к русскому языку.
Далее все написано от имени автора оригинальной статьи.
jQuery прекрасен. Я использую его вот уже почти год и, хотя я и был достаточно впечатлен в самом начале, он нравится мне все больше и больше по мере использования и по мере того, как я узнаю о том, как он устроен внутри.
Я не эксперт в jQuery. И даже не претендую, поэтому, если встретите ошибки, смело поправляйте меня и вносите предложения по улучшению (поправлять и присылать поправки нужно автору статьи, а не перевода — зам. пер.).
Я называю себя «среднестатистическим» пользователем jQuery и я думаю, что всем остальным будет интересно почитать и что-нибудь почерпнуть из «фишек», «трюков» и техник, которые я освоил за последний год. Статья получилась куда длиннее, чем я предполагал изначально, так что в самом начале я привел «содержание» для более удобной навигации и возможности при желании пропустить не интересующие моменты.
Далее все написано от имени автора оригинальной статьи.
Введение
jQuery прекрасен. Я использую его вот уже почти год и, хотя я и был достаточно впечатлен в самом начале, он нравится мне все больше и больше по мере использования и по мере того, как я узнаю о том, как он устроен внутри.
Я не эксперт в jQuery. И даже не претендую, поэтому, если встретите ошибки, смело поправляйте меня и вносите предложения по улучшению (поправлять и присылать поправки нужно автору статьи, а не перевода — зам. пер.).
Я называю себя «среднестатистическим» пользователем jQuery и я думаю, что всем остальным будет интересно почитать и что-нибудь почерпнуть из «фишек», «трюков» и техник, которые я освоил за последний год. Статья получилась куда длиннее, чем я предполагал изначально, так что в самом начале я привел «содержание» для более удобной навигации и возможности при желании пропустить не интересующие моменты.
Содержание
- Загружайте фреймворк с Google Code
- Используйте «шпаргалку» (cheat sheet)
- Соединяйте все ваши скрипты и уменьшайте размер файла
- Используйте возможности Firebug для ведения логов
- Минимизируйте операции выборки в пользу кэширования
- Сводите манипуляции с DOM-деревом к минимуму
- Оборачивайте все в единый элемент, когда речь идет о любой вставке в DOM
- Используйте «id» вместо классов, где это возможно
- Задайте контекст своим селекторам
- Используйте последовательности вызовов методов с умом
- Научитесь правильно использовать анимацию
- Научитесь назначать и делегировать события
- Используйте классы для сохранения состояния
- Еще лучше — используйте встроенный в jQuery метод data() для сохранения состояния
- Пишите собственные селекторы
- Подготавливайте HTML и модифицируйте его, когда страница загружена
- Используйте «отложенную загрузку» (lazy loading) для определенного контента для выигрыша в общей скорости и преимуществ для SEO
- Используйте служебные функции jQuery
- Используйте «noconflict» для переименования глобального объекта «jquery», когда используете его с другими фреймворками
- Как узнать что картинки загружены?
- Всегда используйте последнюю версию
- Как проверить, что элемент существует?
- Добавляйте класс «JS» в элемент «html»
- Возвращайте «false» для отмены поведения по-умолчанию
- Короткая запись для события готовности документа
16 инструментов для создания прототипов
5 min
Translation
Каркас сайта является одним из основных эскизных проектов, которые делаются перед изготовлением оригинал-макета сайта, и используется при разработке дизайна сайтов, чтобы показать структуру сайта, настраиваемые пути пользователя, наиболее важные элементы интерфейса пользователя, их положение и взаимосвязь между страницами сайта. Каркасы страниц сайта отображают в черно-белом цвете наиболее важные элементы интерфейса, такие как заголовок и нижний колонтитул сайта, форма контактов, навигация и т.п.
Каркасное моделирование — это процесс, который может значительно сократить время, необходимое для проектирования и разработки, устраняя потенциальные визуальные отвлекающие факторы и фокусируя внимание разработчиков проекта на базовой функциональности и стратегических факторах маркетинга.
Самодельные деревянные устройства
1 min
Некий Matthias Wandel из Канады увлекается созданием различных машин и устройств из дерева.
Первое устройство, на которое я наткнулся — это устройство созданное с помощью конструктора Lego для постоения рядов доминошный деревянных костяшек.
Вышел финальный релиз PHP 5.5.0
2 min
Вчера команда разработки PHP объявила об официальном выходе PHP 5.5.0!
Предыдущий мажорный релиз 5.4 был выпущен чуть больше года назад (1 марта 2012 года), а 5.3 аж в 2009 году (30 июня) — легко заметить, что разработка PHP наращивает темп!
Кратко о новых возможностях можно прочитать в посте на официальном сайте.
Тем кому интересно больше подробностей и на русском прошу под кат.
Предыдущий мажорный релиз 5.4 был выпущен чуть больше года назад (1 марта 2012 года), а 5.3 аж в 2009 году (30 июня) — легко заметить, что разработка PHP наращивает темп!
Кратко о новых возможностях можно прочитать в посте на официальном сайте.
Тем кому интересно больше подробностей и на русском прошу под кат.
Нагрузочное тестирование «по-быстренькому»
3 min
Может кому будет интересно как «по-быстрому» провести нагрузочное тестирование своего веб-приложения.
Подробности под катом
Подробности под катом
Landing page, которая работает
6 min
Translation
Знания о том, как сделать хорошую landing page помогут увеличить количество желаемых действий, совершаемых пользователями на Вашем сайте. В статье приводится обзор элементов дизайна хорошей landing page.
5 основных ошибок интернет-магазинов
7 min
Приятно удивившись ажиотажу вокруг предыдущего материала, я решил пойти дальше. На этот раз, под прицелом – интернет-магазины. Их ошибки, глупости и т.п.
Итак…
Первое, во что упирается мой взгляд при заходе на страницу – логотип сайта и слоган под ним. И благо, если на сайтах магазинов есть хотя бы логотип. Из 50 магазинов, выданных гуглом по разным конкурентным запросам, логотипа не было у 6. Не так уж и много, но и не так уж мало.
Многие владельцы интернет-магазинов банально не понимают (лично спрашивал) – огромная часть продаж строится на бренде. У человека в голове есть ряд ячеек, заполненных брендами известных фирм. К примеру, «наушники – Koss», «операционная система – MacOS X», «газировка – Coca-Cola», и т.д. и т.п. Первоочерёдная задача фирменой концепции – заполнить ячейку «интернет-магазин — ?» вашим названием. Тогда пользователь будет возвращаться снова и снова.
Итак…
1. Отсутствие фирменной концепции (логотипа, слогана, и т.п.).
Первое, во что упирается мой взгляд при заходе на страницу – логотип сайта и слоган под ним. И благо, если на сайтах магазинов есть хотя бы логотип. Из 50 магазинов, выданных гуглом по разным конкурентным запросам, логотипа не было у 6. Не так уж и много, но и не так уж мало.
Многие владельцы интернет-магазинов банально не понимают (лично спрашивал) – огромная часть продаж строится на бренде. У человека в голове есть ряд ячеек, заполненных брендами известных фирм. К примеру, «наушники – Koss», «операционная система – MacOS X», «газировка – Coca-Cola», и т.д. и т.п. Первоочерёдная задача фирменой концепции – заполнить ячейку «интернет-магазин — ?» вашим названием. Тогда пользователь будет возвращаться снова и снова.
3 главные проблемы сайтов web-студий
3 min
Не самая новая тема, не самые свежие идеи. Но, раз количество сайтов с подобными ошибками только растёт, мои советы могут быть вам полезны.
Я не буду говорить о дизайне, проблемах вёрстки и т.п. — это технические нюансы, и каждая студия разбирается с ними самостоятельно. Речь пойдёт о конкретных деталях, которые свойственны практически всем, но от этого не становятся менее глупыми.
Надеюсь, не нужно объяснять, насколько важен для web-сайта хороший текст. Особенно, если сайт коммерческий. Но, в то же время, тексты 90% сайтов web-студий СНГ бесполезны. Почему я так считаю?
Давайте посмотрим на вопрос со стороны заказчика и будем предельно откровенны. Сколько студий «уже 10 лет на рынке web-разработки»? Сотни. В скольких студиях «работают только квалифицированные специалисты»? Во всех. У какой студии «самая качественная и расширяемая CMS»? У каждой.
Я не буду говорить о дизайне, проблемах вёрстки и т.п. — это технические нюансы, и каждая студия разбирается с ними самостоятельно. Речь пойдёт о конкретных деталях, которые свойственны практически всем, но от этого не становятся менее глупыми.
#1: Текст главной страницы
Надеюсь, не нужно объяснять, насколько важен для web-сайта хороший текст. Особенно, если сайт коммерческий. Но, в то же время, тексты 90% сайтов web-студий СНГ бесполезны. Почему я так считаю?
Давайте посмотрим на вопрос со стороны заказчика и будем предельно откровенны. Сколько студий «уже 10 лет на рынке web-разработки»? Сотни. В скольких студиях «работают только квалифицированные специалисты»? Во всех. У какой студии «самая качественная и расширяемая CMS»? У каждой.
SQL injection для начинающих. Часть 1
5 min
Приветствую тебя, читатель. Последнее время, я увлекаюсь Web-безопасностью, да и в какой-то степени работа связана с этим. Т.к. я всё чаще и чаще стал замечать темы на различных форумах, с просьбой показать, как это всё работает, решил написать статью. Статья будет рассчитана на тех, кто не сталкивался с подобным, но хотел бы научиться. В сети относительно много статей на данную тематику, но для начинающих они немного сложные. Я постараюсь описать всё понятным языком и подробными примерами.
Дайджест интересных новостей и материалов из мира айти и веб-разработки за последнюю неделю №56 (4 — 10 мая 2013)
7 min
Предлагаем вашему вниманию очередную подборку с ссылками на новости, интересные материалы и полезные ресурсы.
Лёгкий сайт или как посадить браузер на диету
14 min
Translation
А что если объединить профессионалов, работавших над крупными web проектами, чтобы создать исчерпывающее руководство по оптимизации front-end разработки?
И получить в результате не скучную инструкцию, а что то поинтереснее? А если позвать Briza Bueno (Americanas.com), Davidson Fellipe (Globo.com), Giovanni Keppelen (ex-Peixe Urbano), Jaydson Gomes (Terra), Marcel Duran (Twitter), Mike Taylor (Opera), Renato Mangini (Google), и Sérgio Lopes (Caelum) чтобы собрать лучшие практики?
Именно это мы и сделали! Мы научим вас создавать быстрые сайты.
— Zeno Rocha, руководитель проекта.
IT-фестиваль «de:coded»: Львов, весна и Intel
7 min
Пару недель назад я первый раз услышал об IT-фестивале de:coded. Проходит он с 2006 года в Львове, и на него со всей Украины съезжаются молодые люди, интересующиеся информационными технологиями, компьютерами и всем, что с этим связано. IT-фестиваль? Да что же это такое? По собственному студенческому опыту, могу неплохо представить фестиваль по «Что? Где? Когда?», КВН или какой-нибудь смотр студенческой песни. А тут – IT! Что ж за чудо такое? Решил посмотреть – и посмотрел.
Средства для визуального проектирования
2 min
Всем известно, что для успешной разработки веб-сайта/веб-сервиса/программы (нужное подчеркнуть) очень важен этап проектирования. Грамотный план разработки — это половина всего проекта. Понятно, что прежде всего необходимо техническое задание, в котором будут описаны требования, сроки, и т.п. Но еще большее значение имеет визуальное проектирование, а именно: UML-схемы, схемы БД, пользовательские интерфейсы, эскизы страниц…
Основы проектирования веб-интерфейсов в Axure RP Pro
8 min
В последнее время разработчики Эта тенденция не может не радовать как заказчиков, так и самих разработчиков — ведь процесс проектирования позволяет уничтожить все наиболее проблемные моменты еще до начала превращения абстрактного технического задания в конечный продукт.
Средств для визуального проектирования становится все больше. Одни пользуются Adobe InDesign, другим нравится Visio, третьи довольствуются OpenOffice Draw. Но все больше поклонников появляется у довольно тяжелой и функциональной программы Axure RP Pro.
uptodate.js — библиотека для автообновления элементов времени
1 min
Как часто Вы используете конструкции вида «5 минут назад», «Полчаса назад» на вашем сайте? А что если пользователь открыл вкладку и забыл про нее на пару часов? «5 минут назад» явно теряет свою актуальность.
Именно для того чтобы исправить это досадное недоразумение служит uptodate.js
Именно для того чтобы исправить это досадное недоразумение служит uptodate.js
Серьезное проектирование серьезных сайтов. Часть 2. Визуализация
8 min
Tutorial
7. Карта ума.
Имея огромное количество идей, мы можем приступить к их визуализации и выстраиванию логических взаимосвязей. На этом шаге задача проектировщика привести все в единую систему и отбросить лишнее.
Для создания карты ума (её чаще называют английским термином «Mind map»), мы можем использовать специальное ПО, я рекомендую Xmind.
Хостинг картинок за полчаса
5 min
Tutorial
Сегодня проекты, особенно на начальном этапе, строятся из готовых блоков. Например, умный хостинг или сервис быстрой отправки сообщений в браузер пользователю. Складывая такие блоки по-разному, можно получить совершенно неожиданный результат. И чем больше разных блоков вам доступно, тем разнообразнее могут получаться проекты. Иногда появляются блоки, которыми можно заменить сразу несколько других блоков. И сами эти блоки — такие же проекты, состоящие из других блоков.
Насколько просто сейчас сделать такой сервис, как хостинг изображений? В принципе, его и раньше было несложно сделать. Но прогресс не стоит на месте, и за то же самое время теперь можно учесть больше нюансов. Я уже рассказывал о проекте Uploadcare. Это сервис, позволяющий облегчить работу с файлами: загрузку, хранение, обработку и раздачу конечному пользователю. Его и будем использовать в качестве основного блока.
Пример будет написан на Питоне. Во-первых, потому что Питон я знаю лучше всего, во-вторых библиотека pyuploadcare обновляется в первую очередь. На самом деле, для Uploadcare есть библиотеки под разные языки, и все они в open source. Если в нужном вам модуле отсутствует какая-то функциональность, можно дождаться, когда она появится, или дописать самому.
Насколько просто сейчас сделать такой сервис, как хостинг изображений? В принципе, его и раньше было несложно сделать. Но прогресс не стоит на месте, и за то же самое время теперь можно учесть больше нюансов. Я уже рассказывал о проекте Uploadcare. Это сервис, позволяющий облегчить работу с файлами: загрузку, хранение, обработку и раздачу конечному пользователю. Его и будем использовать в качестве основного блока.Пример будет написан на Питоне. Во-первых, потому что Питон я знаю лучше всего, во-вторых библиотека pyuploadcare обновляется в первую очередь. На самом деле, для Uploadcare есть библиотеки под разные языки, и все они в open source. Если в нужном вам модуле отсутствует какая-то функциональность, можно дождаться, когда она появится, или дописать самому.
Манипулирование URL'ами в JavaScript
2 min
Из года в год, сталкиваюсь с одной и той же проблемой. Как добавить, изменить или удалить параметр к некоторому адресу в строковом виде. Быстро и грязно это можно делать с помощью, например, регулярных выражений или найти каке-то готовое решение. Зачастую также может потребоваться, к примеру, подменить путь в адресе или изменить протокол с HTTP на HTTPS и т.д.
В целом, это хочется делать просто и понятно. При этом хочется разумного компромиса. Я встречал некоторые библиотеки, которые дают мощный функционал, но при этом по объему — десятки килобайт JavaScript кода. Несколько десятков килобайт, чтобы, например, подменить параметр в QueryString? Эх…
В целом, это хочется делать просто и понятно. При этом хочется разумного компромиса. Я встречал некоторые библиотеки, которые дают мощный функционал, но при этом по объему — десятки килобайт JavaScript кода. Несколько десятков килобайт, чтобы, например, подменить параметр в QueryString? Эх…
Bootstrap-wysiwyg: крошечный текстовый редактор
2 min
Текстовый редактор bootstrap-wysiwyg — это всего 1.5 Кб в минифицированном и сжатом виде и чуть больше 6 Кб исходного кода, базовые функции редактирования на основе execCommand, drag-and-drop для вставки изображений, поддержка стандартных горячих клавиш и ничего лишнего. Редактор работает в современных браузерах (Chrome 26, Firefox 19, Safari 6) и на мобильных платформах (IOS 6 iPad/iPhone, Android 4.1.1 Chrome). Зависимости — jQuery, jQuery HotKeys и Bootstrap.