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

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

Так же, под катом, я расскажу о процессе написания плагина, с какими трудностями столкнулся и т.д., если я Вас заинтересовал — милости прошу под кат.

Человек изобрел компьютеры, чтобы они выполняли за нас большую часть повторяющихся задач. Это позволяет нам экономить много времени и использовать его с максимальной пользой. И, так как эта статья о front-end разработке, в этой области таких задач много: компиляция css- и js-препроцессоров, сборка спрайтов, оптимизация изображений, минификация файлов и др.

Перевод отличной статейки. Думаю, будет полезна как новичкам, которые только приступили к использованию 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 есть два похожих оператора: == и ===. Если не знать их отличия, это может обернуться кучей ошибок. Так что решил раскрыть эту тему. Чем именно отличаются == и ===, как они работают, почему так происходит, и как избежать ошибок.

Оператор == сравнивает на равенство, а вот === — на идентичность. Плюс оператора === состоит в том, что он не приводит два значения к одному типу. Именно из-за этого он обычно и используется.

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

Привет! Меня зовут Александр Завьялов. В Яндексе я занимаюсь разработкой интерфейсов. Недавно я выступил перед коллегами с докладом об аппаратном ускорении в жизни верстальщика, где также коснулся смежных тем. Рассказал о производительности веб-страниц, о том, как она измеряется и к чему она может стремиться.

^{Ссылка, если видео не отображается}

На основе доклада я подготовил этот пост. Я расскажу о том, как браузеры оптимизировали процесс отрисовки: с чего начинали и до чего докатились. Что сейчас можно сделать, чтобы жизнь верстальщиков и пользователей стала немного лучше. Я надеюсь, что кого-нибудь натолкну на какие-нибудь улучшения. Мне бы это было приятно.

Введение

Уважаемый читатель, эта статья является второй частью цикла статей, посвященных вёрстке.

В первой части мы верстали шаблон Corporate Blue от студии Pcklaboratory с помощью стандартных средств на чистом HTML и CSS. В данной статье мы попробуем сверстать этот же шаблон, но с помощью CSS фреймворка Bootstrap 3.

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

Метод 1. Фотографии пользователей с товаром

Кошка «из коробки» не умеет слезать с дерева. Подъём в хардкоде рефлексов, а спуска там нет. Он не жизненно необходим. И она не умеет спускаться — разумеется, пока не увидит, как другая кошка делает это. Стоит один раз понять принцип на примере, и она сможет повторить это сама. Зеркалирование поведения – одна из самых глубоких моделей обучения, поэтому просто грех ей не воспользоваться.

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



За 5 лет работы у нас образовался достаточно большой архив фотографий настолок с играми. Мы их и использовали. Вы можете сделать практически то же самое. Да! Есть нюанс. Если ваши покупатели – дети, то никогда не ставьте фотографии с более младшими «пользователями»: гораздо лучше — постарше. Всё просто. Ребёнок хочет быть похожим на старших и совершенно не хочет – на «малышей».

В последнее время модным стало использовать светодиодные лампы (LED, Light Emitting Diode). Основные причины — экономия электроэнергии (повышенная светоотдача при том же самом потреблении энергии), экологичность (в производстве можно исключить вредные материалы наподобие ртути). По экономии энергии LED-светильники настолько бьют другие типы ламп, что некоторые страны вводят запреты на производство и продажу традиционных ламп накаливания, используемых для дома и офиса. Скорее всего, нечто подобное произойдет со временем и в России. Цель этого обзора — разобраться, что из себя представляют светодиодные лампы, какие у них параметры, какие лампы лучше всего покупать для организации домашнего освещения.

В 2008 мы с партнёром закончили обучение по специальности «компьютерная инженерия» в университете в Аргентине.

На старших курсах мы проходили стажировку в таких компаниях, как HP, IBM, Intel. Именно тогда мы заметили недостаток в их работе. Мы не могли понять, почему люди без технических знаний говорят программистам, что им делать, и кроме того, проверяют, как именно они это делают.

Поэтому, когда мы делали Project eMT, сравнительный поисковик для Латинской Америки, мы решили работать по-другому: без менеджеров проектов. Через шесть лет у нас в команде было 34 инженера из Чили, Бразилии, Мексики и Колумбии, и мы всё ещё работаем без использования традиционных структур и рабочего графика, а наш ежегодный рост составляет 204%.

Думаю, что не только я, но и другие пользователи Chrome под Windows, на многих сайтах замечали проблемы c отображением нестандартных шрифтов. Читать текст на таких сайтах можно, но глазам больно. Я бы так все это и продолжал терпеть, но на одном из недавних собственных проектов этот вопрос встал буквально ребром. Решил разобраться во всем досконально.

Разница в этих двух фрагментах очевидна. Первый сделан со случайно выбранного сайта adaptive-images, а второй с его локальной копии, в css которой была изменена буквально одна строчка.

(Читавшие первую версию статьи могут сразу перейти к UPD, где приведено работающее альтернативное решение проблемы для Chrome)

Поговорим об успешном производстве. Если вы производите хороший и востребованный продукт на рынке по конкурентной цене, то ваш бизнес 100% будет расти. Далее от того, как вы растете – будет зависеть последующий успех или провал. Если расти количественно, просто удовлетворяя спрос, то скорее всего вас ждут проблемы или закрытие. Если повышать эффективность, то у вас есть шанс и этот шанс очень хороший.

Для повышения эффективности производства в середине XIX века был изобретен конвейер. Скорость движения конвейера напрямую влияет на скорость выпуска продукции. Скорость зависит от правильного подбора операций на участках и их автоматизации. Регулируя скорость конвейера – можно получить востребованный продукт по конкурентной цене и требуемого качества.

Но вот вопрос. Возможно ли творческую работу (заказные услуги) поставить на конвейер? Ответим на этот вопрос на примере разработки сайтов. «В отличии от серийного производства, каждый сайт — это индивидуальный продукт, решающий индивидуальные задачи.» — заявляют многие. Да, они правы, но что это меняет? Давайте разберемся. Добро пожаловать на конвейер WebCanape.

Я разработал около сотни проектов, в том числе — стартапов. Многие из них достигали пика и умирали, некоторые работают до сих пор. Делал как B2C, так и B2B.

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

Если лень читать — ролик, выражающий основной дух и главный смысл, находится внизу. Ролик вызовет восхищение — отлично, идите делать очередной релиз. Ролик вызовет отторжение — читайте пост до другой реакции сколько угодно :)

1. Важнее всего — желание

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

Предыдущая статья была достаточно популярна. Я обещал продолжить и держу слово. Делюсь своим личным мнением и не претендую на истину.

В этой части пойдет речь про работу с программистами.

1. Вместо костылей нужен фундамент. Люди, а не методологии

Из опыта внедрений различных методологий Agile сделал следующие выводы
1. Вполне понятным кажущимся решением многим кажется использование типовых советов. Вера в серебряную пулю, джинна из бутылки свойственно большинству людей, менеджеры проектов — не исключение.

Вступление

Возможность асинхронной работы с помощью callback-функций(далее просто возвращаемых функций) — отличительная особенность JavaScript. Использование асинхронных возвращаемых функций позволяет вам писать событийно-ориентированный код, но так же добавляет кучу проблем, ведь код перестает выполняться в линейной последовательности.

К счастью, теперь в Chrome Canary DevTools вы можете отслеживать весь стек вызовов асинхронных функций в JavaScript!

Возможности встроенного в браузер инструмента Chrome Developer Tools можно расширить с помощью сниппетов. Это ускоряет разработку и упрощает рабочий процесс. Хорошая коллекция сниппетов есть на GitHub'е.

Сниппеты в Google Chrome

Подробно о функциях сниппетов можно почитать в официальной документации Chrome. А вот краткая инструкция:

1. Зайти в «chrome://flags» — Отметить «Enable Developer Tools experiments».
2. Открыть DevTools: «Settings» — «Developer Tools Experiments» — Отметить «Snippets support».
3. После перезагрузки во вкладке DevTools «Sources» появится «Snippets», где можно управлять сниппетами:

Скорость сайта состоит из 2 частей: как быстро загружается страница и как быстро работает код в ней. Многие сервисы, такие как минификаторы или CDN, помогают ускорить загрузку, но скорость работы кода зависит только от вас.

Небольшие изменения в коде могут давать огромные изменения в производительности. Всего несколько строк могут означать разницу между быстрым сайтом и диалогом “Unresponsive Script”.

Уже несколько лет как появилась возможность любому смертному желающему арендовать не только shared-хостинг, но и «полноценный» сервер с root-доступом и возможностью настроить его так, как хочется самому. Настроить, например, кроме web-сервера еще и кучу других сервисов.
Так же поступил и я несколько лет назад. Сначала арендовал один сервер, потом другой, и переносил настройки ручками, находя нужные файлы в директории /etc.

За пару лет на моём сервере осело несколько блогов друзей, и даже почтовый сервер, так как давно не хочу, чтобы моя почта была у Google. Насчет сохранности данных задумывался после каждой статьи на Хабре, но всё было как-то не до этого. И, как говорится, админы делятся на три категории: на тех, кто не делает бэкапы, на тех, кто уже делает и на тех, кто даже проверяет восстанавливаемость из бэкапов. Так получилось и со мной, хоть хостер и очень хороший, но произошла у них авария с жесткими дисками. Да такая, что неделю они пытались восстановить диски и предварительные оценки были очень неутешительными. А бэкапов у меня не было. Какое настроение у меня было в те дни можете сами представить.

Но через несколько дней техникам хостера удалось-таки восстановить данные и запустить все виртуальные сервера на той ноде. А я задумался о бэкапах. Думал я так — бэкап должен быть не на том же сервере (естественно!), желательно, чтобы он был у меня на компьютере, но не в одном экземпляре. Я обдумал и установку FTP на домашний компьютер и даже отправку архивов письмами, но все эти варианты меня не устраивали. И я понял, что надо попробовать Dropbox, которым я к тому времени пользовался уже пару лет, а бесплатных гигов у меня было около 18-ти.

Преимущества бэкапа в Dropbox:

• Независимость от домашней инфраструктуры и канала в Интернет
• Множественные копии (сразу на все синхронизируемые ПК)
• Кроме собственного хранения бэкапы хранятся и в облаке

Что делает представленный мной скрипт?

• Инкрементальный бэкап файлов в указанных папках (по первым и пятнадцатым числам идет полный бэкап)
• Бэкап всей базы MySQL
• Бэкап архивируется с помощью 7zip, с указанием пароля (вам же не надо хранить пароли в открытом виде в Dropbox'е?)

Браузер Google Chrome поставляется с превосходными инструментами для разработчика, они же есть в Яндекс.Браузере, новой Опере, и в других браузерах, основанных на базе Chromium.

Среди них есть потрясающие инструменты для работы с памятью, ознакомиться с которыми можно в статье пользователя Panya — «Как находить и устранять утечки памяти на примере Яндекс.Почты».

Javascript хранит объект в памяти до тех пор, пока на него есть хоть одна ссылка. Как только вы удаляете все ссылки на объект, он уничтожается сборщиком мусора.

Таким образом, чтобы удалить объект, нужно удалить все ссылки на него.

Это кажется очень простым, но есть несколько достаточно неожиданных «мест» где могут храниться ссылки на объекты, тем самым задерживая их удаление, и создавая утечку памяти.

Лет 7 назад мне на глаза попались результаты исследования по преподавателям ВУЗов США. По некоторый выборке уважаемым преподавателям задавали простой вопрос: считаете ли вы, что вы работаете лучше чем ваш среднестатистический коллега?

94% преподавателей ВУЗов сказали, что ДА, они работают лучше.

(Перед написанием статьи пытался найти источник, но не удалось. Такое ощущение, что читал в бумажном Harvard Business Review, но полной уверенности нет.)

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

Короче говоря, решили провести мега-опрос у нас. Понятно, что понимание, что такое «среднестатистический» — у каждого свое, но как считаете, так и отвечайте. Простой опрос — заранее большое спасибо!