JavaScript *

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

Очень часто в веб-разработке (и в программировании вообще) необходимо сохранить длинный список логических значений (yes/no, true/false, checked/unchecked и подобные) в виде строк. К примеру, вы захотите записать такие данные с помощью localStorage, в cookie, или отправить их в теле HTTP запроса. У меня возникала такая необходимость сотни раз.

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

Недавно SamDark писал о правильных модальных окнах и представил сообществу плагин The Modal. Полностью согласен с его виденьем модальных окон, но в представленном плагине не хватало функционала. У меня уже давно из проекта в проект кочевали наработки по этой же теме, вот решил тоже оформить их в виде плагина.

I. Предисловие.

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

Можно представить, что рано или поздно на таком экране могли бы появиться разные удивительные вещи: страница из «Войны и мира», «Джоконда», первые такты «Лунной сонаты», гениальное решение известного уравнения, фотография любого человека, эта страница Хабра, сообщение о безвестном событии прошлого или подробное предсказание будущего.

С тех пор я периодически пытался сделать что-то по касательной, были какие-то мелкие поделки на Perl. А недавно захотелось сделать что-то подобное на JavaScript.

AngularJS создан для тех разработчиков, которые считают, что декларативный стиль лучше подходит для создания UI, а императивный — для написания бизнес-логики.

Дзен Angular

• Хорошо отделять манипуляцию DOM-ом от логики работы приложения. Это существенно улучшает тестируемость кода.
• Хорошо считать, что автоматизированное тестирование приложения настолько же важно, насколько и написание самого приложения. Тестируемость очень сильно зависит от того, как структурирован код.
• Хорошо отделять разработку клиентской части от серверной. Это позволяет вести разработку параллельно и улучшает повторное использование на обеих сторонах.
• Хорошо, когда фреймворк ведет разработчика по всему циклу разработки приложения: от проектирования UI через написание бизнес-логики к тестированию.
• Хорошо, когда распространенные задачи становятся тривиальными, а сложные — упрощаются.

AngularJS представляет собой комплексный фреймворк. В стандартной поставке он предоставляет следующие возможности:

• Все, что вам нужно для создания CRUD-приложений: data-binding, базовые директивы для шаблонов, валидация форм, роутинг, deep linking, повторное использование компонентов, dependency injection, инструменты для взаимодействия с серверными (RESTful) источниками данных.
• Все, что вам нужно для тестирования: средства для модульного тестирование, end-to-end тестирования, mock-и.
• Шаблон типового приложения, включающего в себя структуру каталогов и тестовые скрипты.

AngularJS разрабатывается сотрудниками Google и используется, как минимум, в одном сервисе Google — DoubleClick.

Javascript Enlightenment

Cody Lindley

Уровень знаний: средний
Тщательный обзор мировоззрения JavaScript через разбор встроенных объектов и нюансов.

Открыть

Eloquent Javascript

Marijn Haverbeke

Уровень знаний: начинающий
Вводная книга по JavaScript и программирование в целом.
Открыть

Building A JavaScript Framework

Alex Young

Уровень знаний: продвинутый
Избранные статьи из цикла«Let’s Make a Framework».
Открыть

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

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

В наши дни сложные Javascript-приложения можно увидеть повсюду. Со временем они становятся все сложнее и уже неприемлемо просто писать цепочку callback-функций на jQuery. Javascript-программисты постепенно узнают то, что обычные разработчики знали уже несколько десятилетий. Организация и эффективность может сыграть важную роль при разработке. Таким образом, такие MVC-фреймворки на Javascript, как Backbone, Knockout и Ember появились для того, чтобы заполнить пустоту между начинающими, средними и опытными разработчиками. Они предлагают разные возможности и функционал, который подойдет разным людям, в зависимости от их потребностей.

Вместо предисловия

Это первая статья из небольшой серии, которая написана разработчиками трехмерного javascript-движка на базе WebGL. Эта статья — обзорная, но в последующих планируется рассказать уже о самом движке и его возможностях — с примерами, демонстрациями и проч. И автор будет благодарен, если кто-нибудь поделится для него инвайтом, чтобы он мог не только отвечать на возможные вопросы в комментариях, но и последующие статьи на эту тему мог бы публиковать не через меня, а самостоятельно.

Обзор 3D в Web

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

В общем передо мной встала задача — переписать один из контролов, построенный на репиттере и сделать его легче, отзывчивее для клиента. При этом решил использовать knockout. Внутри для отображения цифровых данных использовались DevExpress'овские текстовые поля, они очень удобны и служили исправно, но тут встал вопрос, а как же при замене на обычные текстовые поля, я смогу добавить маску.

Привет, Хабр!

Сегодня мы расскажем вам как использовать на веб-сайтах карты Nokia с помощью Nokia Maps JS API. Сервис «Карты Nokia» имеет не только очень простой в применении API, но ещё и отличную детализацию карт с огромной базой географических объектов, которая постоянно пополняется.

Больше информации про технологические возможности «Карт Nokia» вы можете узнать из выступления Сергея Руденко с Nokia Developer Days 2012 (ссылка), а мы приступим к описанию некоторых возможностей использования именно Nokia Maps JS API на примере интеграции карт и использовании возможностей геолокации и прокладывания маршрута. Выглядеть это будет примерно так:

Иногда попадаются интересные задачи, которые сложно написать с первого раза. Одной из таких задач оказались каскадные списки и легким комментарием я прикинул, что на Backbone у меня получится написать короче.

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

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

Добро пожаловать под кат!



После пяти с половиной месяцев разработки с момента выхода предыдущей версии, очень рад наконец представить вам Leaflet 0.4 — новую версию легковесной JavaScript-библиотеки для интерактивных карт, которая одинаково хорошо работает и на десктопных браузерах, и на мобильных устройствах.

Этот релиз, к которому приложило руку 33 разработчика, несёт в себе более простой, удобный API и громадное множество улучшений и исправлений вместе с масштабным обновлением документации, запуском официального блога и страничкой плагинов. Давайте рассмотрим улучшения по порядку.

Необычный и амбициозный фреймворк Meteor, пребывая в статусе preview (текущая версия — 0.3.8) уже получил 4500 подписчиков на Гитхабе и восторженные отзывы сооснователя Facebook Дастина Московица. Теперь на него обратили внимание акулы венчурного капитализма. Основным инвестором стал фонд Andreessen Horowitz. По словам Джефа Шмидта — CEO Meteor Development Group, одиннадцать с лишним миллионов гарантируют активную разработку проекта на протяжении ближайших нескольких лет.

Буквально пару месяцев назад, мы начали переписывать весьма крупный сайт, с момента прошлого крупного релиза прошёл не один год, конечно, сайт дорабатывался, правились баги и в итоге в настоящее время создаётся новая версия. В ней будет активно использоваться AJAX, поэтому весьма остро стоял вопрос с генерацией контента на клиенте, полученного в формате JSON. Прошлые шаблоны были собственной разработки, так как на то время вариантов было не так много, которые по разным причинам не подходили, базировались наши шаблоны на jquery, с помощью атрибутов происходило заполнение.

Прежде всего было решено провести тест, при генерации списка из 1500 элементов было получено превосходство в 20 раз, похожие результаты показывает сравнение с jQuery Template (страница с тестами).

Очень часто модальные окна и диалоги делаются при помощи плагинов jQuery. Например, SimpleModal или jqModal. К сожалению, все они, в варианте по умолчанию, работают неправильно.

Что же такое «правильно»?

Модальное окно по определению блокирует работу пользователя с родительским окном до тех пор, пока пользователь его не закроет. То есть:

1. Пользователю нельзя позволять прокручивать страницу под ним.
2. При этом, если содержимого в модальном окне очень много, нужно позволить прокручивать содержимое.

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

Чтобы не мучать вас заранее деталями реализации, покажу сначала демо плагина jQuery: http://rmcreative.ru/playground/modals_plugin/demo.html.

Ну а теперь немного про реализацию.

Доброго времени суток уважаемые хабражители.

Предлагаю Вашему вниманию пост-реванш, под названием JScriptInclude Gear механизм каскадного импорта скриптов/библиотек. Предыдущий пост презентующий JScriptInclude Gear на данный момент самозабвенно убран в черновики, теперь он совсем не актуален, не смотря на то, что предыдущая презентация была довольно сурово воспринята хабра-яваскриптерами, а там все таки было за что :), очень много опалы было вызвано непониманием сути, а именно того, что
JScript(WSH) != JavaScript(браузеры), в связи с чем JScriptInclude Gear возводился в ранг костылей, велосипедов, «было уже», «инахренаже» и т.д.
Я тогда очень хотел поделиться своим решением, но совсем не представлял как, как сделать его «вкусным» и понятным, но мне кажется сейчас у меня это получилось.
Тем не менее «Отхабренное» дело получило ход, люди пишут, люди пользуются, людям нравится. За прошедшую неделю я получил достаточно много отзывов, что стимулировало меня работать над своим решением, в итоге оно преобразилось до неузнаваемости. Спасибо всем, кто вышел вместе со мной на линию огня.

Тем же кто не знает о чем собственно речь — маленькое, завлекающее предисловие:
JScriptInclude Gear — это механизм каскадного импорта скриптов/библиотек предназначенный для использования в скриптах автоматизации написанных на языке JScript интерпретируемых технологией WSH(Windows Script Host) в окружении семейства операционных систем Windows. Дополнительно предоставляющий функционал для организации скриптов в виде базовых модулей, поддерживающий их определение в файлах конфигурации и их последующий вызов по псевдонимам и так далее, и тому подобное :)

Тех же, кто уже читал о JScriptInclude Gear в предыдущем посте, не смотря на, может быть, оставшийся негатив, я откланявшись попрошу остаться, уверяю Вас — здесь будет кое-что интересное, ведь изменилось почти всё: механизм теперь экспортируется COM-компонентой и подключается к Вашему скрипту двумя строками кода, подготовлен SFX-пакет для установки механизма в систему с автоматической регистрацией компоненты и автоматической конфигурацией необходимых путей, документация переделана «от и до», и теперь представлена в виде HTML, пример теперь стартует без «танцев с бубном», а в качестве приятного бонуса, в нем представлено несколько полезных модулей, которые описаны в документации (они, все-же являются примером использования и «не претендуют»), и естественно «подвылизан» сам код, хотя в процессе использования Вы с ним теперь собственно не сталкиваетесь.
Для тех кому неймётся, милости прошу на GitHub:
Механизм JScriptInclude Gear SFX-пакет установки.
(самостоятельный до безобразия :) )
Механизм JScriptInclude Gear сoрцы как есть.
(О развертывании в доп комментарии к последнему комиту, или в справке — раздел jsImport Object врезка «Внимание!!!»)
И все же хотелось бы, чтобы Вы прочитали оставшиеся «много букаф», хотя бы до пункта Возможности JScriptInclude Gear:

Заинтересовавшихся милости прошу под хабракат…

Вот лайфхак: для сокращения имён файлов (а значит — для ускорения их прочтения и узнавания) можно называть файлы с джаваскриптовыми библиотеками в соответствии с сокращённым именем того основного объекта, который той или иной библиотекою определяется.

Так, например, файл jQuery можно назвать «$.js».

Так, например, файл Underscore.js можно назвать «_.js».

Так, например, файл Underscore.string можно назвать «_.str.js».

Ну и так далее.

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

Мысль о написании букмарклета пришла спонтанно: проверяя почту на одном из онлайн серверов ощутил явный дискомфорт, вызванный навязчивым (пёстрым и большим) флэш-банером, и это меня несколько озадачило, так как реклама встречается сплошь и рядом, временами некачественно сделанная реклама досаждает, но не так что бы очень (скорее воспринимается как окружающий фон). Первая мысль была найти дополнение для браузера (типа Flashblock), и уже было собрался устанавливать, но по разным причинам (использую разные браузеры на нескольких компьютерах, нежелание настраивать и сопровождать и т.п., да и далеко не все флэш-объекты провоцируют на то, чтобы их удалили) особого энтузиазма по поводу установки подобных дополнений не испытывал, но тут вспомнил про букмарклеты и написал простой код, позволяюший по мере необходимости легко справляться с очисткой страницы: