JavaScript *

Одним солнечным весенним утром, мне пришла в голову замечательная идея — заняться изучением популярной библиотеки RequireJS. Я уже давно читал много хорошего и о простоте использования и о преимуществах, которые она оказывает при использовании в проектах. Поэтому и подумать не мог, что подключение RequireJS к модульному проекту на Backbone может вызвать столько проблем. Я потратил два дня на то, что должно занять не более часа. А если у разработчика нет этих двух дней? Вот и решил поделиться с другими своим опытом, чтобы сэкономить время и нервы.

В продолжении статьи

В первой статье уже использовался самый первый примитив, который можно назвать просто «произвольная форма».

Перед описанием примитивов-объектов еще раз повторю два основных требования-замечания от нашей системы:

• Каждый примитив должен содержать вектор вершин и вектор индексов (vertex, indices).
• Строится каждый примитив по индексам через треугольники (TRIANGLE), то есть каждые 3 точки образуют независимый треугольник.

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

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

Сами примитивы можно разделить:

• Простые. Состоят только из одного примитива.
• Сложные-составные. Состоят из нескольких примитивов

В продолжении статьи.

Матрица

Когда только начал разрабатывать матрицу, даже не предполагал — на сколько она в дальнейшем нам упростит жизнь. У матрицы много свойств, но в нашей задаче я бы их все свел к одному — «отделение мух от котлет», то есть массива точек от общего массива координат. С точки зрения нашего кода — это будет выделение массива строк, каждая из которых является точкой и массива столбцов, массив одной из координат x,y,z или w. У меня упрощенная модель, поэтому «w» использовать не буду.

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

Введение

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

— Отслеживание состояния задач
— Группировка задач в трекере
— Внутрипроектное обсуждение при необходимости
— Ведение документации (хоть и возможности весьма ограничены)
— Учет времени сотрудников и видов их деятельности

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

Через серию статей попробую разобрать движок на webgl.

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

Первое. Описание задачи на пальцах

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

Недавно вышла вторая версия фреймворка RPG JS v2 основанного на движке CanvasEngine.



Основная информация

Автор: Samarium
Лицензия: GPL
Язык: Английский, Французский

Введение

— RPG JS представляет собой framework для создания браузерной RPG. Для работы с данным фреймворком вы должны иметь минимальные знания в области программирования, которые облегчат создание инфраструктуры игры. (прокрутки, столкновения, движения и т.д. ...)

— RPG JS написана на HTML 5 и Javascript. Для работы с растровыми изображениями, спрайтами и т.д. используется библиотека EaselJS

— Скрипты из RPG Maker XP можно конвертировать в карту для RPG JS

— Совместим с браузерами: IE, Google Chrome, Firefox, Safari, Opera

Доброго времени суток, уважаемые хабравчане. За последнее время я увидел несколько интересных и полезных инструментов/библиотек/событий, которыми хочу поделиться с Хабром.

DC.js

Библиотека позволяет создавать великолепные многоуровневые/масштабируемые кроссплатформенные графики и диаграммы с моментальным перерендерингом при пользовательском взаимодействии. За процесс визуализации отвечает знаменитая d3.js, а за анализ многомерных наборов данных crossfilter.js. Кстати кроссфильтр — проект небезызвестной компании Square.

chart.renderlet(function(chart){
    // smooth the rendering through event throttling
    dc.events.trigger(function(){
        // focus some other chart to the range selected by user on this chart
        someOtherChart.focus(chart.filter());
    });
})

26 июня 2014, в четверг, в Москве пройдёт 12-я встреча javascript-разработчиков MoscowJS.



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

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

Темы запланированных выступлений:

Антон Белоусов, основатель и CEO Tai.st, выступит с докладом Аддоны для облачных веб-приложений: взгляд разработчика

Чем полезны аддоны для пользователей и самих облачных продуктов? Какие существуют технологии и подходы к их созданию? Будет подробный рассказ о пользе аддонов при разработке облачных приложений, а также при использовании уже готовых проектов, — например, Asana, Trello, Gmail и других.

Прочитав здесь пост об этой замечательной зверушке (wiki) я подумал, что будет интересно его реализовать и за вечер написал его на js+canvas.
Заодно чтобы было не скучно добавил ему соседей, получилось 5 цветовых популяций и ограниченное поле, которое породило граничные узоры.

Ну был бы муравей и был, но сегодня запустив его я поймал очень интересное поведение, желтая популяция в какой то момент начала методично избавляться от плодов деятельности розовой и при этом не оставлять следы своей деятельности, меня это заинтересовало и я потратил еще пару минут наблюдая за полем, желтая популяция полностью уничтожила стартовую локацию розовых, затем полностью само уничтожилась и начала строить дивный новый мир с «0», т.е. с 1 желтого пикселя.

Недавно очень захотел себе two-way data binding между моделью и представлением в Backbone. Ничего адекватного, к сожалению, я так и не нашел. Пришлось написать своё расширение. Делюсь им с вами.

Маршрутизация — новая функция в Ext JS 5, которая позволяет связывать историю навигации с контроллером. Кнопки «Назад/Вперёд» — одна из основных частей интерфейса браузеров и с Ext JS 5 сделать навигацию в одностраничных приложениях стало очень просто.

Routing в Ext JS 5

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

    Ext.define('MyApp.controller.Main', {
        extend : 'Ext.app.Controller',
 
        routes : {
            'home' : 'onHome'
        },
 
        onHome : function() {}
    });

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

• Batch-запросы
• Передача даты в составе сложной структуры данных
• Обозначение кастомных типов данных
• Проброс round-trip данных, которые сервер должен вернуть в ответе
• Дополнение запроса и ответа метаданными
• Обработка ошибок, пришедших в ответе

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

jsonex представляет собой попытку объединить решение упомянутых выше и многих других задач в рамках простого единого подхода, основанного на концепции вычислимых данных (callable data).

Недавно при создании страницы статистики на сайте, мне потребовалось в очередном графике вывести 450 позиций. В виду того, что данный график был на странице не один, да и выглядел бы очень громоздко на странице было принято решение, добавить нечто вроде разбиения данных на страницы. Для графиков в проекте используется библиотека Highcrarts. Покопавшись в документации была найдена только пагинация для легенды, но не для графиков.

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

Итак, опишем наш взгляд на решение проблемы.

Для чего?

Работая с AngularJs вы обязательно задумаетесь о правильной организации кода. Конечно уже существуют отличные примеры решения проблемы. Например можно изучить теоретический пост Брайана Форда или практическое руководство Клиффа Мейерса. Я же поделюсь способом организации кода в приложениях AngularJs с использованием RequireJs.

Данный подход будет полезен, если вы хотите:

• перестать беспокоиться о подключении скриптов в правильном порядке;
• загружать javascript код асинхронно;
• иметь возможность скомпилировать код в один минифицированный JS-файл;

Перевод статьи «Metro: Declarative Data Binding», Stephen Walther

Целью этой статьи является описание того, как декларативная привязка данных работает в библиотеке WinJS. В частности, вы научитесь использовать атрибуты data-win-bind и data-win-bindsource. Также вы научитесь использованию вычисляемых свойств и конвертеров для автоматического форматирования значения свойств при привязке данных.

Пользуясь привязкой данных в WinJS, вы можете использовать шаблон Model-View-ViewModel (MVVM), при построении приложений в стиле Metro на языке JavaScript. Используя шаблон MVVM вы защищаете свой код от обращения в хаос. Шаблон MVVM предоставляет вам стандартный способ организации JavaScript кода, что делает ваше приложение более легко-поддерживаемым.

Несколько недель назад (впервые, на конференции DevCon 2014) мы говорили о том, что стремимся к построению более открытого диалога между командой Internet Explorer и сообществом разработчиков. Сегодня мы представляем Internet Explorer Developer Channel, полнофункциональный браузер, созданный для того, чтобы дать разработчикам оценить функциональность и новые возможности браузера, над которыми работает команда Internet Explorer.



IE Developer Channel доступен для загрузки с Microsoft Download Center для Windows 8.1 и Windows 7 SP1 с Internet Explorer 11.

IE Developer Channel может работать независимо от IE11. В нем присутствуют все возможности текущей версии Internet Explorer и некоторые новые функции, над внедрением которых мы работаем в настоящий момент. Оцените новые возможности и расскажите, что вы о них думаете в Twitter @IEDevChat или в Connect.

Файловых менеджеров много, но есть один, о котором, думаю, будет многим интересно узнать. Ведь он двухпанельный, работает в браузере, оснащён редактором (с подсветкой синтаксиса) и консолью, состоит из клиента и сервера, а написан на JavaScript/Node.js.

Привет, Хабра!
При разработке игр на JavaScript часто возникает необходимость создавать множество объектов. О том, как правильно это сделать и не утонуть в коде, я рассказывал, примерно — месяц назад на Frontend Dev Conf в Минске. Возможно, доклад будет интересен тем, кто не был на конференции и сталкивался с проблемой создания множества объектов, либо является разработчиком HTML5 игр.



Под катом текст с картинками.

Хожу по job interview. Где-то скучно, где-то весело. Где-то интересно. На одном из таких меня попросили написать функцию, которая умеет складывать два числа. Я написал:

  it ('should add two numbers', function () {
    var add = function (a,b) {
      return a + b;
    };

    assert.equal(add(2,3), 5);
  });

А если, говорят, сигнатура функции должна быть типа такой: add(num1)(num2)? Не вопрос, говорю. Думая, что хитрый буржуин хочет проверить, знаю ли я про то, что можно возвращать функции из функций, пишу вот такое:

  it ('should be called like add(num1)(num2)', function () {
    var add = function (a) {
      return function (b) {
        return a + b;
      };
    };

    assert.equal(add(2)(3), 5);
  });

Как я писал было ранее, Squarespace много чего предлагает нам из «коробки», давая возможность быстро «развернуться» и создать блог, галерею, магазин (правда только используя Stripe ). Также Вы вполне можете быстро создать мобильное приложение, поскольку к каждой странице (блогу, галерее, какой-то кастомной коллекции) можно обратится и получить ответ в JSON-e. Этим можно пользоваться и при построении более серьезных приложений с динамической подгрузкой контента. Но множество функций в Squarespace (загрузка и ресайз изображений, инициализация и работа встроенных блоков разметки, галерей, форм, виджетов соц. сетей и т.д.) работают на клиенте, взаимодействуя с серверной частью, а поскольку девелоперская часть все еще в бете, то нет ни документации к их API, ни описания работы встроенных функций — приходится доходить самому, копаясь в их коде.

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