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

В качестве вступления

Ранее, в течение последних 2-х лет, были попытки запуска некоторых браузерных игр малого масштаба, которые собирали менее 1000 игроков, но в этой статье мы их затрагивать не будем. Рассказ пойдет о первом опыте создания браузерной онлайн-игры, которая в будущем будет стремиться выйти в массы.

Идея создания космической игры родилась довольно давно. Почему космической? Отчасти потому, что космическая тема всегда вызывала мой личный интерес, а отчасти, по причине ностальгических воспоминаний от приятного времяпрепровождения за «Космическими рейнджерами», когда-то в далеком прошлом…

На сайте разработчиков движка опубликовано множество материалов, в том числе и по этой теме. Все «разжевано» и на русском языке. Но вот казус — задача оказалась не простой, даже для человека имеющего солидный опыт работы с Blender и искренне считающего себя game developer`ом. Некоторые этапы вызывали критические приступы “зависания”, происходящих от недопонимания особенностей работы с движком и, откровенно говоря, слабого знания JavaScript.

Немаловажным фактором была попытка переноса опыта работы с Unity (c#) на абсолютно иную платформу. И это было серьезной ошибкой. Blend4Web — инструмент заточенный исключительно для создания приложений WebGL, что дает солидное преимущество перед кроссплатформенным Unity, но и накладывает некоторые ограничения. В связи с прекращением поддержки веб-плеера и слабой работоспособностью экспортера Unity WebGL, платформа Blend4Web выглядит очень интересной. Поэтому, хочешь — не хочешь, а разбираться приходится.

Этот урок — компиляция собственного опыта, подсказок разработчиков b4w, официальной документации. Рассчитан, в первую очередь, на начинающих и основан на моем игровом проекте.

В электронной музыке есть интересное направление — музыка для осциллоскопов, которая рисует интересные картинки, если выход аудиокарты подключить к осциллоскопу в режиме XY.
К примеру, Youscope, Oscillofun и Khrậng.

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

Это сподвигло меня на создацие своего эмулятора осциллоскопа на WebGL: woscope.

В этом посте я расскажу о том как именно происходит рисование линий осциллоскопа в woscope.

“Толстые” стрелочные функции (=>), так же известные, как arrow функции – абсолютно новая функциональность в ECMAScript 2015 (ранее известном под именем ES6). Если верить слухам, то в ECMAScript 2015 => синтаксис стал использоваться вместо –> синтаксиса под влиянием CoffeeScript. Так же, не последнюю роль сыграла похожесть передачи контекста this.

У стрелочных функций есть две главные задачи: обеспечить более лаконичный синтаксис; обеспечить передачу лексического this с родительским scope. Давайте детально рассмотрим каждую из них!

Мы продолжаем нашу колонку по теме ASP.NET5 публикацией от Вячеслава Бобика — .NET-разработчика из компании Radario. В этой статье Вячеслав интересно рассказывает о применении с ASP.NET5 популярных инструментов автоматизации Gulp и Bower c интеграцией в Visual Studio. Предыдущие статьи из колонки всегда можно прочитать по ссылке #aspnetcolumn — Владимир Юнев

В наши дни client-side разработка становиться не менее сложной, чем разработка server-side. Современному frontend разработчику приходится решать множество рутинных задач, таких как: препроцессинг Lass/Scss/Stylus, написание вендорских префисксов, поспроцессинг css, склеивать стили в один файл и многое другое.


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

Поэтому у frontend разработчиков есть довольно мощные инстументы, которые берут на себя выполнение множетсва рутинных задач, такие как: gulp и bower, а в новом ASP.NET5 они поставляются из коробки. Давайте рассмотри на примере ASP.NET5 приложения, как мы можем использовать gulp и bower.

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

И вдруг выяснилось, что всё, чем меня пугали взрослые — чистая правда. Сахар жуткая вещь, которая убивает мозг и медленно ведёт нас к альцгеймеру. Его нельзя есть никому и никогда. Эта тема подробно раскрыта в книге Гэрри Тауба Good Calories Bad Calories, а также в книге Дэвида Перлмуттера Grain Brain.

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

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

Недавно вышла новая версия api Post Hawk и чат основанный на нём. Сегодня хочу показать как можно за минимальное количество времени трансформировать этот чат в электронного консультанта с простенькой панелью управления.

Итак, приступим.

Пост устарел, SystemJS — не панацея, он обладает множеством проблем со сборкой (лично я отрепортил о массе багов), Gulp можно заменить на NPM Scripts. Используйте Webpack.

Дисклеймер: этот пост может показаться неинтересным для продвинутых JavaScript разработчиков. Он ориентирован на новичков, желающих освоить ECMAScript 2015+.

С появлением частичной поддержки ECMAScript 2015 в Chrome 45 и NodeJS 4, мы, веб разработчики, вступили в новую эпоху отрасли, которая нам приносит не только «хлеб с маслом», но и доставляет массу удовольствия. К сожалению, новый JavaScript не поддерживается всеми браузерами. Разработчику на помощь приходит Babel, который компилирует новый JavaScript в старомодный и поддерживаемый всеми браузерами (даже древними). На самом деле компиляторов ECMAScript.next в ECMAScript 5 больше чем один: Traceur, ES6 Transpiler и другие. Но Babel (бывший 6to5) является самым популярным и самым быстроразвивающимся компилятором, на сегодня.

Матрешка, в свою очередь (как же без неё, всё-таки это блог проекта Matreshka.js), — умеренно популярный фреймворк, иногда вызвающий вопрос «с чего начать» у новичков.

Решение — Matreshka.js ECMAScript.next boilerplate. Этот репозиторий убивает двух зайцев одним выстрелом: он содержит настроенный Gulp, SystemJS, а так же пример простых модулей, использующих Матрешку.

<habracut /|>

Репозиторий сделан для всех, не только для пользователей Матрешки. Если вы не желаете использовать этот фрефмворк, просто не импортируйте его и удалите сответствующие файлы из /src/lib/.

Пример максимально упрощен для того, чтоб новичек сосредоточился на реализации, исключительно, JavaScript кода. CSS препроцессор, browserify, jspm и другие вещи не включены, а библиотеки, которые вы желаете подключить, можно копировать напрямую в папку /src/lib/.

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

• Gulp — «запускатель задач».
• SystemJS — универсальный загрузчик модулей (AMD, CJS, ES6).
• Babel — компилятор JavaScript нового поколения в старый.
• Matreshka — фреймворк, использующийся по умолчанию.

Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы, интересные материалы и IT-новости.

Всем привет. Прошло немало времени с момента выхода Ext JS 5, где представили возможность разработки приложений с использованием паттерна MVVM. За это время я успел столкнуться с некоторыми трудностями, о которых хотел бы рассказать.

Начну с того, что в Ext JS 4 (а предварительно в Sencha Touch) при создании компонентов их конфигурационные свойства объявлялись в объекте config, для каждого из которых автоматически создавался свой getter и setter. Несмотря на то, что вручную писать все обработчики могло быть несколько утомительно, это был стандартный подход.

В пятой же версии Ext JS используя MVVM можно было легко избавиться от доброй части рутины: удалить конфигурационные свойства и их обработчики, а вместо этого привязаться к нужному свойству или формуле ViewModel'и. Кода становилось значительно меньше, а читаемость — лучше.

Но меня беспокоил вопрос инкапсуляции. Что если в процессе разработки часть функциональности я захочу вынести в отдельный компонент для повторного использования? Нужно ли при этом создавать собственную ViewModel? Как изменять состояние компонента: обращаться напрямую к его ViewModel'и или всё-таки стоит использовать конфигурационные свойства и их публичные setter'ы?

Мысли об этом и других вопросах, а также примеры с напильником — под катом.

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

В качестве инструмента для парсинга сайта я использую SlimerJS.

О преимуществах перехода с версии 1.2 написано немало статей. Однако, согласно статистике, более 45% сайтов всё ещё используют версию 1.2, только 31% перешёл на более новую 1.3 и всего 5% используют 1.4.

И это когда космические корабли бороздят просторы вселенной версия 1.2.0 вышла в релиз почти два года назад, версия 1.3.0 − год назад, версия 1.4.0 − ещё этой весной, а 1.5.0 уже выходит в бету.



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

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

Нам в Хекслете нравится ReactJS и Flux. Нам кажется, что это правильное направления развития. Мы любим функциональное программирование и чистые функции, и когда сложные архитектуры упрощаются за счет подходов, связанных с ними — это круто. По Реакту уже есть немало ресурсов в интернете, в том числе наш практический курс по React JS. Последний урок в этом курсе называется «Однонаправленное распространение данных», и там мы подходим к интересной теме, которая лежит в основе архитектуры Flux.

Flux это паттерн распространения даных в приложении. Flux и React выросли в стенах Фейсбука вместе. Многие используют их одновременно, но ничто не мешает использовать их по отдельности. Они были созданы для решения конкретной проблемы в Фейсбуке.

Мы используем React и Flux в своей браузерной среде разработки Hexlet IDE (она в опен-сорсе), в которой учащиеся выполняют практические задания. Flux одновременно очень популярен и очень непонятен для многих в мире веба. Сегодняшний перевод — попытка объяснить Flux на пальцах (ну, то есть картинках).

Проблема

Вначале нужно понять, какую проблему решает Flux.

«Жить захочешь — не так раскорячишься» © Особенности национальной охоты

Как часто Вам приходится заниматься «слаживанием» работы клиентской и серверной части приложения, организовывать обмен сообщениями, его своевременность, обеспечивать доступ к данным и их постоянную актуальность на клиенте?

Часто? Тогда возможно Вам будет интересна идея и реализация, описанные в этой статье.
Речь пойдет о Javascript, Ruby и Websockets.

Продолжаю тему разработки векторной (по координатам в градусах) карты для браузера dbcartajs. В новой версии библиотеки (v2) я перевел отрисовку объектов с канваса на svg. И переделал несколько примеров, в частности карту метро Москвы.

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

Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы, интересные материалы и IT-новости

JBlocks — небольшой jQuery-плагин (~100 строк) для организации компонентов на странице.

Строится на трех основных принципах:

• опиши поведение компонента в декларации;
• разметь компонент в html с помощью специальных атрибутов;
• общайся со экземплярами компонента через АПИ.

Если вам интересна тема декларативного javascript — прошу под кат.

Судя по всему, разработчики этого фреймворка крайне чувствительно относятся к смене сезонов. Раньше я уже писал о новых версиях Webix. И выходили они либо в начале весны, либо в начале лета. На этот раз, судя по всему, в рамках борьбы с осенней депрессией разработчики выкатили мажорный релиз. В новом Webix 3.0, помимо уже привычных нам новых фич и багфиксов, появились два новшества, которыe вполне себе можно считать отдельными продуктами: Webix Jet и Visual Designer. Давайте разберемся, что это такое, зачем это нужно и как это выглядит.

По блогу нашей компании может создаться впечатление, что мы занимаемся только data mining'ом и сетями. Поэтому я, как представитель девелоперского цеха, не смог отказать себе в удовольствии написать статью про то, как круто организовано unit-тестирование и разделение кода на модули у нас во фронтенде.

Дело было вечером, делать было нечего, но голова рукам покоя не давала и хотелось чего-то для души… А для души захотелось чего-то новенького, эдакого необычного.

Я, как и многие из хабровчан, люблю новинки. Релиз нового софта — это как праздник. Новые фичи, новые возможности… Новые способы забивать гвозди и кататься на велосипедах. Новые велосипеды… В общем можно придумать кучу аллегорий и метафор. А про что это я? Ах да, про Nginx, HTTP2 и JavaScript. Чем они связаны, спросите вы? А тем, что в последней версии Nginx (1.9.5) добавили много интересных плюшек, а именно:

• добавили протокол HTTP2 и удалили модуль SPDY (нафиг старое барахло)
• интегрировали прямо в nginx модуль ngx_http_js_module и создали свой диалект JavaScript

Го под кат, расскажу детали.