The JavaScript blog.


tools games education

TRY.js, MightyEditor

Posted on .


When I was at school we had a turtle graphics game that was meant to teach the rudiments of programming. It also had a turtle robot that you could drive around. There are many attempts to update this type of educational software, but one that impressed me is TRY.js (GitHub: s-a/TRY.js, License: MIT/GPL) by Stephan Ahlf:

TRY.js is supposed to program a virtual robot which moves in a 3D environment and is able to pick up and unload objects. The program gives beginners a first insight into the world of computer programming.

Due to the ease of use and the limited instruction set TRY.js is well suited for the introduction to programming, especially for learning the programming language JavaScript. It gives an overview about synchronous and asynchronous codes as well as test driven development.

It uses Google Drive so you can save your experiments and share them. There's also a project for sharing TRY.js packages.

If you want to try programming the robot, there's a Robot API on GitHub. Rather than trying to present a fake educational DSL, TRY.js embraces modern JavaScript idioms, so beginners would need assistance but it might help them to learn how people actually write web-based software -- complete with tests!



Guntis Smaukstelis sent in a powerful web-based game level editor for Phaser games called MightyEditor (GitHub: TheMightyFingers/mightyeditor, License, Demo). It supports asset management for organising textures, and there's a map editor so you can paint levels, with tools for scale and rotate. It also has a physics editor and code editing, so you can alter the behaviour of the game without exporting it first.

It's open source with the limitation that you can't create paid services on top of the MightyEditor, and you must reference the project's creator (mightyfingers.com) in your work. The company behind the editor also sells paid subscriptions, so you can support them if you use it for building your own games. Otherwise the licensing is flexible, and it seems like a powerful tool.


frameworks firefox tools backbone articles

Web Servers in Firefox OS, Marionette Inspector

Posted on .

Embedding an HTTP Web Server in Firefox OS

Justin D'Arcangelo sent in a detailed article about web servers in Firefox OS: Embedding an HTTP Web Server in Firefox OS.

... we've been looking at harnessing technologies to collectively enable offline P2P connections such as Bluetooth, NFC and WiFi Direct.

By utilizing HTTP, we would already have everything we'd need for apps to send and receive data on the client side, but we would still need a web server running in the browser to enable offline P2P communications. While this type of HTTP server functionality might be best suited as part of a standardized WebAPI to be baked into Gecko, we actually already have everything we need in Firefox OS to implement this in JavaScript today!

The article uses justindarc/fxos-web-server which is a JavaScript web server built with TCPSocket, a raw TCP socket API in JavaScript.

The possible use cases enabled by embedding a web server into Firefox OS apps are nearly limitless. Not only can you serve up web content from your device to a desktop browser, as we just did here, but you can also serve up content from one device to another. That also means that you can use HTTP to send and receive data between apps on the same device! Since its inception, FxOS Web Server has been used as a foundation for several exciting experiments at Mozilla.

So it seems like Firefox OS is getting the kind of advanced features that we've seen appear (and in some cases disappear) in Chrome OS, where you get access to native APIs to create desktop-like experiences.

Marionette Inspector

Jason Laster wrote to me about the Marionette Chrome Extension, known as the Marionette Inspector. There's a video about it, and you can download it from the Chrome web store.

It has some features that are pretty unique, like visualisations for the view hierarchy with the UI tree, and more friendly handling for inspecting Backbone models and events. Rather than seeing a complex JavaScript object, you'll see properties grouped under UI, Events, Model, and Properties.

It makes building apps with Marionette more like using the tools you might expect from an IDE, so you should try it out if you already use Marionette or are a Backbone fan that hasn't yet tried it.


tools node editors

Some Atom-related Node Packages

Posted on .


Hugh Kennedy sent in npm-install, an Atom package for automatically installing and saving the npm modules in the current file.

To use it, you just need to open the Command Palette and type npm install. The Command Palette can be opened with cmd-shift-p.

There's another npm-related Atom package as well: npm-docs by Jonathan Clem. This allows you to use the Command Palette to easily look up a module's readme or homepage. This is the kind of thing I do all the time when I write about Node on DailyJS.

Tyler Benziger kindly sent me the Atom invitation, but I've only used it for a few small things so far. I've been trying to figure out how it fits in with the Node community, and whether or not it'll be popular with DailyJS readers.

If you look at the screenshot in this post you might notice that I've got a folder open with lots of items. That's DailyJS's 1127 posts, which Atom handles without any trouble.


tools node editors

The Atom Editor

Posted on .


"Alex, you love talking about text editors, why don't you write about that GitHub Atom project?"

Ah, text editors. Arguably our most important tools, yet we're more fickle about them than our choice of programming language, web framework, and preferred caffeinated beverage. Atom is made by GitHub. It's built using dozens of related open source projects, and some of these include "packages" that extend the editor.

All of the packages seem to be written with CoffeeScript, but before you get your pitchforks out, take a look at this thread:

You can use plain JS to develop packages.

Phew. The reason I wanted to write about Atom on DailyJS was it's built using Node and a web view. The fact it embraces Node means it should be easier for us to extend it. It also claims to have TextMate support, and can use native extensions through Node C and C++ modules.

Parts of Atom are native as well, so it should feel desktop-like rather than web-based:

Atom is a desktop application based on web technologies. Like other desktop apps, it has its own icon in the dock, native menus and dialogs, and full access to the file system.

I've seen a few generations of desktop text editors come and go: BBEdit, TextMate, and Sublime Text. I expect the excitement around Atom to follow a similar pattern. I'm going to write about interesting Atom packages if I think they're of interest to DailyJS readers (please send them in), but you'll still find me happily plodding on with Vim. And vin (rouge), but that's another story.



JS Console

Posted on .

JS Console by Remy Sharp (code)
is a browser-based one-line JavaScript console. It features completion,
syntax highlighting and history. There's also an iPhone stylesheet.

The author has designed it to be used in presentations and workshops, or
simply to experiment with browser JavaScript. The interface is bold and
clear so it should work well with a projector.