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

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

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

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

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

 



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

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

Надеюсь, что все знают что такое QR коды и как ими пользоваться? Кто не в теме — вам сюда. В общем этот небольшой плагин для jQuery умеет отображать QR коды для ссылок на странице. Это может быть полезно там, где нужно передать ссылку на мобильное устройство, например ссылка на мобильную версию сайта — незачем больше перебивать ссылки из браузера в ваш телефон, сфоткали и побежали ;)

Плагин достаточно простой, основан на плагине ColorTip для всплывающих подсказок, js-uri для относительных ссылок и Google Chart API для QR кодов ;)

Демонстрация, официальный сайт, а так же qrTip на Github.

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

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

Однако, всем категориям веб-разработчиков, равно как и их клиентам, полезно иметь не обременяющие средства для кроссбраузерного тестирования.

Самый надёжный способ — поднять несколько виртуальных машин, где всё можно будет досконально протестировать (в том числе потаскать границу окна, поскроллить и уж тем более посмотреть, как работает JS). Но ведь часто требуется просто взглянуть на сайт и понять, всё ли с ним в порядке в целом. Либо предоставить такую возможность заказчику.

Классикой жанра для решения поставленной задачи является веб-сервис:

Универсальный, но долгий browsershots.org

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

Недостаток один — очередь. Скриншотов нужной страницы можно прождать полчаса и даже больше.

Посетителям сайта stackoverflow.com был задан вопрос: «Какие программерские термины вы придумали, так чтобы они стали популярны в ваших кругах (то есть вы слышали, что кто-то их повторяет)?

Ниже — вольный перевод самых популярных ответов.

В своей работе очень часто сталкиваюсь с тем, приходится делать краткие обзоры ИТ технологий для начальника, коллег и др. Данная информация обычно оформляется в статью и отвечает на следующие вопросы:
— почему «это» лучше чем «то» (специально написал обезличено, так как такой вопрос задают очень часто и на различные тематики связанные с ИТ и не только);
— в чем достоинства и недостатки при переходе на «то» или «это»;
— как лучше сделать чтобы … и др.

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

Итак приступим. Вопрос с которым ко мне обратились был следующим. «Почему облачные вычисления лучше, чем классическая схема построения сетевой инфраструктуры, какова основная причина того, многие организации „перебираются в облака“?». Далее мои мысли по этому поводу.

Всех с наступившими!



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

UPD:
— Исправлена ошибка «too large on page» (подробнее на github) Спасибо Bifidokk и StreetAngel
— Авторы топиков сделаны ссылкой
— Добавлена возможность сохранять избранное только из указанных блогов

Всем привет. Если вы сталкивались с разработкой Flash-приложений, то скорее всего стандартные инструменты, предоставляемые Flash IDE для написания кода не вызвали у вас особого восторга. Существует несколько популярных сред для Flash/Flex-разработки: FlashDevelop, FlashBuilder, FDT, еще может быть парочка. В сети полно холиваров насчет того, какая из них лучше, но в данной статье я буду исходить из того, что вам приглянулась IntelliJ IDEA (или просто — «Идея»), но вы с ней совсем не знакомы и не знаете, с какой стороны к ней подступиться. Что же, попробуем разобраться вместе!


Что Вы найдете в этой статье:

• Краткое описание: где скачать, как установить, настроить IDE'ю
• Как создать проект, начать работу
• Как связать IDE'ю с Flash-проектом
• Как компилировать, запускать проект, подключать библиотеки
• Описание некоторых приятных мелочей, которые я регулярно использую

Чего Вы в этой статье не найдете:

• Каких-то чисто Flex-специфик вещей
• Описания сборки проекта ANT'ом (хотя вскользь мы этого коснемся), использования Maven и т.д.
• Описания преимуществ IDE'и перед аналогами, её главных фич

Вроде бы здесь считается хорошим тоном предупреждать о трафике — под катом небольшая кучка скриншотов, весит ~500кб.

jQuery очень мощная библиотека, но некоторые его богатые возможности неясны, если вы не изучали исходный код jQuery и не читали книгу jQuery Pocket Reference (автор пишет my new book), вы можете не знать о них. В этой статье представлены отрывки из этой книги — 5 полезных вещей о которых вы могли не знать.

1) Вы вы не обязаны использовать $(document).ready() Если вы хотите выполнить функцию, когда документ готов для манипулированию просто передайте её в $()

2) Вы, наверное, уже знаете, что вы можете передать тэг в функцию $() для создания элемента этого типа и, что вы можете передать атрибуты объекта (в качестве второго аргумента), которые будут установлены на созданный элемент. Вторым аргументом может быть любое свойство, который вы передаете в метод attr(). Кроме того, если какое-либо свойство имеет тоже самое имя, что и событие (click, mouseover), то значение свойства используется в качестве функции обработчика данного события.
Следующий код, например, создает новый элемент, устанавливает три HTML атрибута и регистрирует функцию обработчика события(click) на нем:

var image = $("<img>", {
                  src: image_url,
                  alt: image_description,
                  className: "translucent_image",
                  click: function() {$(this).css("opacity", "50%");}
               });

Проблема

ExtJS — прекрасная библиотека с огромным числом возможностей. На http://dev.sencha.com/deploy/dev/examples/ можно найти множество демонстрационных исходных кодов, доступных для использования в реальных проектах, однако, конечно, ответа на все вопросы это не даст.
Мне было необходимо сделать обоюдное перетаскивание между TreePanel и GridPanel. Найдя на форуме ExtJS и в интернете вообще лишь отрывочные сведения, я решил написать это самостоятельно. Как это у меня получилось — под катом.

Добрый день! Меня зовут Антон Щастный.

Это моя очередная статья, посвящённая разработке веб приложений на Java. Хочу предложить вам сделать небольшую систему учёта клиентов, написанную с использованием фреймворка Spring и библиотеки Hibernate.

Что будет в приложении:

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

Что будем использовать:

• веб фреймворк Spring MVC,
• фреймворк Spring Security,
• ORM библиотеку Hibernate,
• MySQL в качестве СУБД.

Инфраструктура:

• редактор SpringSource Tool Suite,
• сборщик проектов Maven,
• система логгирования Log4j,
• постоянное подключение к интернету.

В моей предыдущей статье о Spring MVC был упущен ряд моментов по использованию аннотаций в Java-коде и применению Maven для сборки проекта. В данной статье я попытался исправить упущение.

Цель статьи – показать начинающим веб разработчикам совместное использование различных технологий платформы Java.

Как Вы знаете — в разработке объёмного JS-приложения где используется популярнейшая библиотека jQuery наступает момент когда остро встаёт проблема производительности. Все силы кидаются на амбразуру профайлера, каждый вызов скрупулёзно исследован, каждый функционально нагруженный кусок реализации обнюхан со всех сторон и выправлен. Но беда поступает не с той стороны, откуда её ждут 90% разработчиков. Селекторы — Как много в этом слове.
Давайте разберёмся — как работает эта магия и почему поиск DOM-элементов может стать причиной падения производительности приложения.

Хочу Вам рассказать о штуке, которую я изобрел сегодня, чтобы ускорить процесс загрузки сайтов. Все вы знаете, что <script src="..."></script> задерживает отрисовку страницы, пока не загрузится этот скрипт. Если их десятки — это может сереьезно замедлить работу сайта — в результате пользователь 20 секунд пялится на пустую (или недорисованную) страницу из-за какого-нибудь тупящего социального виджета (умножить на десяток этих виджетов).

Не правда ли было бы круто, если бы можно было сказать <script extsrc="..."></script> ("extsrc" = "грузи потом"), чтобы скрипты загружались после того как страница отрисована?

Все бы хорошо, но есть document.write… Сегодня я наконец решил его проблему — представляю extsrc.js — скрипт, который запустит все скрипты после отрисовки страницы (даже если они содержат document.write — и правильно отрисуется все).

Результат? Супер-быстрая загрузка страниц, даже если там море всяких внешних скриптов.

Использование:

Заменяем <script src="..."> на <script extsrc="...">.

Итого получается:

<script src="http://whiteposts.com/extsrc_js/extsrc.js"></script>
<script extsrc="..."></script>

Навигация по странице

Всё чаще и чаще в web появляются сайты, использующие навигацию, написанную на JavaScript. Типичный случай использования javascript для навигации: страница с меню и блоком контента, куда через AJAX подгружается содержимое:



Пользователь кликает по пункту, JavaScript грузит из сети содержимое, вставляет в блок контента, пользователь доволен: страница без перезагрузки показывает требуемое и траффика потребовалось меньше за счёт того, что не потребовалось грузить все эти HEAD, BODY, STYLE и прочие элементы.

Но вот проблема: URL страницы. Если на old scool сайтах на каждый пункт меню показывается новая HTML страница, и у пользователя есть вменяемый URI, который он может скопировать из адресной строки бразуера, послать другу или положить в закладки, то в случае AJAX интерфейсов в URI странице зачастую нет никаких ссылок на текущий контент документа.

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

Не с секрет, что для решения этой проблемы многие программисты кодируют ссылку на текущее просматриваемое содержимое в якорь (anchor) URI документа. К примеру, на сайте jqapi.com (скриншот которого приведён вначале топика) при выборе того или иного пункта меню якорь страницы меняется на #p={contentId}.

Потребовалось однажды реализовать пейджер постраничной навигации а-ля дёти.
Далеко в лес ходить я не стал, а решил найти, что же это за зверь такой раскопированный на множестве сайтов, а оказалось, что это детище karaboz. И даже есть аналог, переделанный под jQuery.

Но у каждой версии есть, как мне показалось, огромный недостаток, игнорирование колесика мыши. «Но ведь с этим было бы удобнее!» — воскликнул я и решил немного переписать, чтобы пейджер прокручивался на событие mousewheel. А также есть другие недостатки, которые я освещу под катом.

Эта статья предназначена для тех, кого бесят мильён левых служб и драйверов, которые ставят любые виртуалки. Тем, кто будут ставить доп. пакеты Node.js
Все остальные могут скачать скомпилированный Node.js node-js.prcn.co.cc
Или же установить Node.js из-под виртуалки nodejs.ru/25

Прошу под кат

В топике блиц-обзор книг, которые будут полезны IT-специалистам, бизнесменам и тем, кто собирается открыть своё дело. Рядом с каждой — короткие пояснения, почему и зачем стоит прочесть.

Отобраны лучшие 10% из примерно 200 прочитанных книг о маркетинге, продажах и всем связанном — самые «пробивные» вещи, которые помогут вам не тратить время на всякий шлак, а сразу начать с главного.

В конце — суммация книг, которые хабровчане рекомендуют в комментариях помимо основного списка.

Для того, чтобы управлять проектами по-настоящему эффективно, необходимо обращение к специальному программному обеспечению. Набор систем для управления проектами на сегодняшний день очень обширный: от громоздких, мегафункциональных до самых «лёгких» и простых. Для внедрения первых и их эффективной отдачи, конечно, потребуется много усилий (если, конечно, Вы не пригласите пару другую сертифицированных специалистов для контроля project-цикла внутри организации). Но всегда ли это оправдано? И будет ли использоваться весь функционал системы?