Добрый день дамы и господа,

На хабре есть не так много статей на тему GWT (Google Web Toolkit) и в большинстве своем написаны они в ключе «какая это бяка, ничего не умеет, ничего не понятно». Кроме того, как показывает мой опыт, большинство программистов о GWT вообще ничего не слышали, а те кто слышал, думают, что больше чем на „Hello World“он не способен. Я постараюсь показать вам, что с помощью этого замечательного Фреймворка можно делать такие вещи, которые большинству JavaScript программистам просто не по зубам.

Перед началом небольшое отступление, т.к. вопрос «а зачем?» обязательно прозвучит. Этот сайт я написал на GWT, т.к. у меня и выбора то не было. С HTML,CSS, PHP и JavaScriptом я знаком(был) весьма поверхностно( как собственно и большинство Java-программистов), а вот идея и желание были. А потому использовал я что имел и получилось вроде весьма не плохо.

Посмотрите на этот сайт. Да это не шедевр, но он показывает, что GWT может все, что может JavaScript и даже больше. Почему больше? Ответ на этот вопрос полностью совпадает с ответом на вопрос: «почему С++ может больше чем Assembler?». На эту тему я предлагаю подискутировать в комментариях. А мы возвращаемся к GWT. Нет ничего лучше( мое стойкое убеждение), чем объяснять что либо на примере, а посему я предлагаю вам препарировать этот сайт.

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

var retina = window.devicePixelRatio > 1 ? true : false;

Теперь переменная retina примет значение true, если у читателя сетчаточный дисплей. В дальнейшем можно использовать простой оператор if, чтобы выполнить тот или иной код в зависимости от типа дисплея.

if (retina) {
    // у читателя дисплей типа retina
}
else {
    // у читателя дисплей не типа retina
}

Зачем?

Kartograph — это новый фреймворк для создания интерактивных картографических веб приложений без использования Google Maps/Bing Maps или любого другого сервиса. Он создавался с учетом потребностей дизайнеров и журналистов.

Можно поглядеть на демки, чтобы узнать на что способен Kartograph.

Я закончил разработку бета-версии своего оптимизатора загрузки JavaScript — jWidget SDK.

github.com/enepomnyaschih/jwsdk/wiki

jWidget SDK — это небольшой скрипт, сборщик (прекомпилятор) вашего JavaScript. Это обертка вокруг YUICompressor, которая автоматизирует сборку проекта и дает очень гибкую конфигурацию. Инструмент совместим с любой архитектурой сервера, со всеми JavaScript-фреймворками. Инструмент бесплатный, с открытым исходным кодом и имеет лицензию LGPL.

Инструмент успешно протестирован на нескольких коммерческих проектах с разной серверной архитектурой. В том числе (не имею права дать ссылки):

— Чистый веб-сервис на Java + AJAX + JS. Особенность приложения: весь-весь-весь контент рендерится динамически через JavaScript, и приложение грузится почти мгновенно благодаря браузерному кэшированию
— Один шахматный клиент на jQuery, встроенный в сайт на Zend Framework
— Клиент одного приложения на Adobe Air

Привет всем. Сегодня я поведаю о своей разработке для Google Chrome и Pivotal Tracker — PIRO. Начнем по порядку.

PivotalTracker — сервис для управления софтверными проектами по «гибким» методологиям. Более подробно можно узнать из этой статьи на Хабре. Сам по себе трекер отличный, но при работе с ним у меня возникали определенные проблемы:

• При работе с несколькими проектами неудобно переключатся между ними
• Тяжело узнать в каких проектах созданы задачи на Вас или же какой статус задач, которые Вы создали на других людей
• Если вдруг вы работаете с несколькими PivotalTracker акаунтами, то переключение происходит или перелогином или же каждый акаунт в отдельном браузере (кто как крутится)

Немного поразмыслил, я закатал рукава и начал писать свое решение для PivotalTracker. В ходе работы я показывал его людям, они подключались и помогали мне в его реализации. Поэтому в конце проекта его решили сделать Open Source :)

При реализации модели для манипуляции с данными в MongoDB, я пришел к выводу, что нужно как то избежать проблем с вложенностью асинхронных вызовов. Я не знал о существовании Step для Node.js и решил создать свой велосипед. Чем и хотел бы с Вами поделиться, уважаемые Хабро пользователи.

Речь пойдёт о проблеме кроссбраузерного представления многострочных данных в javascript. Это могло не быть проблемой, если бы Firefox умел работать с функциями так же, как другие браузеры. Единый кроссбраузерный способ представления так и не найден, несмотря на 2-дневные усилия. Если бы он был, его, наверное, уже стали применять на сайте userscripts.org. Пока что имеется раздельный способ представления: один — для юзерскриптов Firefox, другой — для всех остальных. Также, для Scriptish существует возможность чтения формата метаданных (директив), что не охватывает произвольного формата, но решает задачу, чаще всего встречающуюся в юзерскриптах. Не рассматриваем решение с 2 запросами на сервер, с обращением к внешним HTML, XML и с дублированием данных, потому что хотим данные и скрипт получить в одном запросе, в одном файле, и файл этот — типа «text/javascript».

В данной статье пойдет речь о реализации паттерна Repository во взаимодействии с Mongoose ODM для использования в Node.js проектах.
Средства ODM Mongoose — предоставляют очень удобую обертку реализации запросов к MongoDB посредством схожего с LINQ стиля. Ниже представлена реализация репозитория на примере модуля UserRepo для модели User.

Привет хабраюзеры!

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

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

В общем нашёл я прекрасный инструмент для рисования http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/ — интересный мануал по рисованию в HTML5. И совместил этот инструмент с тем, что было до.

Привет Хабр!
Хочу поделиться способом организации красивых подсказок для плагина валидации на jQuery. Для этих целей будем использовать еще один плагин создания красивых информационных сообщений — qtip.

Khan Academy — некоммерческий проект, предлагающий тысячи бесплатных учебных виедороликов и курсов по основным научным дисциплинам, от математики и физики до истории и искусствоведения. До сих пор на сайте академии в качестве учебного языка использовался Python. Его часто выбирают для обучения программированию, во многом благодаря его однозначности (“There should be one — and preferably only one — obvious way to do it”) и прозрачности (“Explicit is better than implicit”), однако для первого учебного языка, считает Джон Рейсиг (недавно перешедший из Mozilla Corporation в Khan Academy) очень важны такие качества, как доступность и наглядность. Начать программировать на JavaScript можно в любом браузере не тратя ни секунды на установку, кроме того, всегда под рукой HTML5 и CSS, и можно вместо скучных традиционных чисел Фибоначчи и “Hello world” довольно быстро соорудить простенькую игру или хотя бы нарисовать что-нибудь на canvas'е (привет черепашке из Logo).

В HTML 5 были введены такие атрибуты тегов, как data-*.
Про них вы наверняка слышали или видели в разных проектах.
Например, их используют такие модные товарищи, как Twitter Bootstrap и jQuery Mobile.

Раньше использовали классы, ради сохранения информации в HTML, с целью последующего использования в js.

Например, для сохранения уникального номера блока часто пишут так:

<div class="items">
  <div class="item1">...</div>
  <div class="item3">...</div>
  <div class="item6">...</div>
  <div class="item1">...</div>
  ...
</div>

А если нам нужно добавить еще один класс для каждого элемента? Или модификатор для отдельных? Да, конечно, можно обрезать регуляркой или другим костыликом на ваш вкус.

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

Иногда используют атрибут ‘rel’, но его можно использовать только для ссылок, хотя я видел и у других элементов. И опять же недостаток — мы можем записать в него только одно значение.

И вот нам на помощь спешат Чип и Дейл атрибуты data-*.

Привет Хабр!
Буквально вчера возникла необходимость объединить два объекта javascript. Покопавшись в интернетах узнал, что единственный способ объединить два объекта это скопировать поля из одного в другой. («Разрывная» — подумал Штирлиц) Пораскинув мозгами создал свой велосипед метод для этого дела.

В эти выходные я имел удовольствие разбираться с асинхронными api IndexedDB.

Поле разбора примера от mozilla мне показалось, что код не так хорош, как мог бы быть.

И я решил для развития своих псионных навыков работы c IndexedDB написать обертку к его асинхронному api.

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

Если вы тоже любите код, то я выложил его на github

Фактически эта статья описывает то что написано в примерах использования обертки, ну может чуть больше.

Во время разработки своего экспериментального WEB-проекта на Node.JS, о котором я рассказал в двух предыдущих статьях, я столкнулся с проблемой выбора шаблонизатора. Несмотря на то, что готовых решений существует довольно много, мне не удалось найти то, которое бы удовлетворяло меня на 100%. Так родился JUST.

Конкуренты

Jade

github.com/visionmedia/jade

Этот шаблонизатор достаточно популярен среди Node.JS разработчиков. Он обладает хорошим функционалом и скоростью работы, но содержит и спорные моменты:

1. Отказ от использования тегов в том месте, для которого они, собственно, и были придуманы. С таким подходом я, мягко говоря, не согласен. Конечно, это очень субъективно, но вид разметки страницы без привычных тегов, взрывает мозг. Верстальщик, далёкий от новомодных технологий шаблонизации, не скажет спасибо, если ему придётся вносить изменения в такой код. Также потребуется дополнительная работа при перенесении вёрстки в шаблоны, что замедлит ход разработки.
2. Перегруженность функционалом. Любой разработчик старается сделать свой продукт максимально универсальным, но иногда нужно уметь вовремя остановиться. На мой взгляд, Jade уже перешёл эту грань.

В данном посте хочу рассказать как предпочитаю реализовывать наследование в объемном JavaScript приложении.

Допустим для проекта необходимо множество родственных и не очень классов.
Если мы попытаемся каждый тип поведения описать в отдельном классе, то классов может стать очень много. И у финальных классов может быть с десяток предков. В таком случае обычного JavaScript наследования через prototype может оказаться не достаточно. Например мне понадобилась возможность из метода вызывать аналогичный метод класса-предка. И захотелось создавать и наследовать некоторые статические свойства и методы класса. Такую функциональность можно добавить, вызывая для каждого класса ниже изложенную ф-ию extend:

Функция extend

cSO = {}; // Просто для отдельного пространства имен.
cSO.extend = function(child, parent, other) {
  if(parent) {
    var F = function() {};
    F.prototype = parent.prototype;
    child.prototype = new F();
    child.prototype.constructor = child;
    child.prototype.proto = function() {
      return parent.prototype;
    }
    // Пока все стандартно.
  } else {
    child.prototype.proto = function() {
      return;
    }
  }
  /*
   * У классов есть параметр stat, предназначенный для статических ф-ий и данных.
   * Он доступен через _class.stat или из объекта(экземпляра) класса через this.stat.
   * Потомки могут обращаться к статическому методу предка, для этого их нужно
   * объявлять так: _class.stat.prototype.myStaticMethod = function() {...

Существует замечательное и буквально завораживающее семейство фрактальных кривых — кривые дракона. Кто не знаком с ними принцип их построения проще всего объяснить при помощи полоски бумаги. Итак, возьмём полоску бумаги и сложим её несколько раз пополам, а затем развернем так чтобы между углами сгиба образовались прямые углы. В итоге мы получим кривую дракона. Поскольку толщина сложенной полоски каждый раз удваивается, а длина отдельного звена уменьшается в два раза, то мы не можем получить таким наивным способом длинных кривых.
К счастью длинные кривые легко рисуются другим способом, а точнее множеством способов. В частности, в Сети можно встретить рекурсивную программу порождающую кривую дракона достраивая катеты к отрезкам исходной кривой, как гипотенузам. Но я решил поручить это дело черепашке. Поскольку кривая дракона состоит из серии поворотов «налево» и «направо», то черепашка должна уметь только делать шаг в перёд и поворачивать. Главное, что я хотел увидеть — это сплетение кривых дракона. Да! Эти кривые сочетаются между собой в разных и интересных позициях, что кажется невероятным для таких сложных и запутанных кривых.

В данном посте я хочу описать простую методику пиксельного искажения изображения на «чистом» javascript в 2D-Canvas без использования специальных библиотек и шейдеров, путём прямого доступа к пикселям изображения. Надеюсь, это будет интересно и полезно как для общего развития, так и для решения каких-то задач.

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

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

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

Для того чтобы не путаться, я определю для данной статьи следующий перечень терминов:
Словарь — хранилище ключей, по которым осуществляется доступ к локализации на данном языке. По сути дела представляет собой обычный JavaScript-объект, где свойства — ключи доступа, а их значения — переведенные строки.
Хэш — объект, который является результатом упорядоченного слияния словарей; общий словарь, из которого впоследствии ведётся выборка перевода.

Теперь более детально.

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

Сначала эта задача показалась мне невыполнимой, но я нашел html2canvas.