Before the days of fancy JavaScript games, LEGOS ruled many an afternoon of our childhood. Build With Chrome is a collaborative project between Google and LEGO that allows visitors to reminisce on these days without the needless anxiety of “discovering” a stray block with one’s bare foot.

Getting started is very simple, or you can also enter into a discovery mode to see popular creations that others have built. The keyboard shortcuts greatly help move the process along. I appreciated the thought behind the space+drag shortcut to rotate the scene (akin to many 3D modeling applications), but the easing animation that is applied while doing so takes some getting used to.

To save you from attempting to deconstruct the inner workings on your own, OutsideOfSociety (@oosmoxiecode), a developer at North Kingdom, walks us through the planning, execution, and optimization of the application in this blog entry.

Build With Chrome is a fun little playground for sparking up the old LEGO-driven imagination. On a personal level, I was sorely let down back the lack of LEGO people. After all, what good is a house or building if there’s no smiling yellow man standing on top of it and threatening you with a lightsaber?

Build With Chrome by North Kingdom and Mark

A few quick takeaways and lessons learned:

• If you’re unsure which type of platformer you want to implement, and you want to do an action game, Monteiro suggests a smooth tile-based implementation (example #2)
• Ladders are typically one tile wide to restrict movement along the y axis (a notable exception would be the vines your climb in Mario 2)
• Moving platforms are typically implemented using AABB (Axis-Aligned Bounding Box)—the same method for your playable character
• Flash developers will be familiar with the concept of “bitmasking” or drawing a separate non-linear hit area used for collision detection. With this method, collisions are performed much the same way as tile-based, except that the pixels themselves are the actual “tiles”
• When implementing physics-based engines such as Box2d, friction must often be accounted for depending on the direction of movement. In Monteiro’s words, “you’ll want friction to be high on the foot, but low on the sides.”

Go have a look for yourself! The Guide to Building 2d Platformers

Recently, Adobe announced the initial (super beta) release of a public editor known as Brackets (not Adobe Brackets). In Adobe’s own words, Brackets is “a code editor for HTML, CSS and JavaScript that’s built in HTML, CSS and JavaScript.” Certainly not the first application to be implemented as such, but the fact that a company such as Adobe is putting it’s weight behind it and releasing it as open-source it quite an interesting play, indeed. I sat down with it for a session and made a list of pros and cons which I have expanded on in a more in-depth review below.

Pros

• Meta application—use Brackets to develop brackets! (“Yo dawg we heard you like JavaScript, so we made an editor in JavaScript so you can write JavaScript while you write JavaScript!”)
• Easily customizable
• Open Source
• Free?

Cons

• Still in very early beta
• Requires installation
• Lack of split-screen support
• Lack of full-screen support
• No support for 3rd-party plug-ins
• No auto-completion

Pros

Meta Application

This is one area where I feel that Brackets stands alone. It’s an application that allows you to build upon it using itself! How cool is that?

Easily customizable

Because Brackets is built using HTML5 and CSS, it is rather easy to perfect the IDE to your exact liking without having to scour Google for the perfect syntax highlighter or application skin.

Open Source

I’m not sure Adobe could have made it any easier to help develop and improve this platform. There is one small “gotcha” though:

Free?

So here’s the deal: Adobe has released this as open source, but under a modified version of the MIT license, which includes the following amendment:

Please note that some portions of this project are written by third parties
under different license terms. Your use of those portions are governed by
the license terms contained in the corresponding files.

Digging deeper, there’s a handful of other third-party libraries included in the project. The editor itself is driven by CodeMirror (which also powers JS Bin and JSHint). Also included in the source files is Twitter’s Bootstrap and LESS, both of which are licensed under Apache 2.0. Be on the lookout for other third-party libraries as they are added to the project (though I would wager that Adobe’s legal team is also keeping an eye on the GitHub repo).

Cons

Still in very early beta

In Adobe’s own words, “It’s still very early in development, is missing a lot of basic editor features, and probably has bugs.” In my opinion, Brackets is at something of a catch-22—it’s still early beta, but if you do feel kind enough to contribute to the project, it will move along as fast as the projects GitHub managers can take in new pull requests. Personally, I had a difficult time getting it to run on Lion—it took a few tries to launch (do this directly from the project folder—don’t try dragging the executable to your Applications folder).

There’s a handful of usability issues that appear which most will find rather quickly I feel. Clicking—and even double clicking—folders within a given project will not expand that folder. You actually have to click on the arrow icon.

Autocompletion is another area that is seriously lacking. I commend Adobe’s efforts to port an editor into and HTML/Javascript-driven environment, but really, this is the first feature that they should have developed.

The main menu is also a bit off—you have to click to open each application menu (“File”, “Edit”, “View”, “Navigate”, etc.). What’s more—these menus exist outside of the default OS menu system. If Adobe is going to keep requiring a wrapper application, these menus should be integrated into the OS.

Lastly, don’t bother right-clicking anything—there appears to be no existing context menu support.

Requires installation

One would assume that an editor built using HTML5 would be usable straight from a website (even if it does require a more modern browser with File API access), right? Unfortunately, that’s not the case. Brackets requires the use of a small native shell which wraps the entire application in order to access the local file system. Adobe links to a separate GitHub repo for this wrapper, but really they should just be linking to an installer. Allow me to save you the trouble: Click here to install Brackets.

Lack of split-screen support

Okay, so the TextMate has been lacking this for a while too. And you know what? That’s exactly why I now use Sublime Text 2 instead. Before switching entirely to Apple, I used to use Aptana as my editor of choice on Windows. While editing HTML, CSS, and JS files at the same time, this becomes something of a requirement and once you have it, it’s extremely hard to let go of.

Lack of full-screen support

Not to sound like a broken record, but Sublime Text’s “Distraction Free” mode is a god-send in a world of constant instant messages, e-mails, Twitter, and Tumblr updates. Full-screen capabilities would be a most-welcomed addition.

No support for 3rd-party plug-ins

The best features of editors like Aptana, Code, Textmate, and Sublime Text are the ability to extend the editor with features that apply to specific developers with specific workflows. Although one can make the argument that because Brackets is open-source, these features can be added, in which case, where is the line drawn in order to prevent Brackets from becoming bloated with hundreds of features that the majority of users don’t require? As developers, we must live with the fact that plug-ins aren’t meant for everyone and that there will always be some amount of customization required to integrate an editor into our workflow.

Wrap Up

Brackets definitely stands to become the wild card in the editor arena, especially so due to its potential to become one of the first (major) open source editors to the market. It has a long way to go, but if it gains enough critical mass from contributions from other developers, we could see this overtaking some of the more popular web editors, all of which currently seem to be vying for the #1 spot on their respective operating systems. Does Adobe’s dark horse have what it takes to come out on top?

Related Links

• Brackets on GitHub
• Twitter (@brackets)
• IRC channel (#brackets) on freenode
• Developer mailing list