Posts Tagged


Web Developer pro tip – LiveReload

I started doing quite a bit of HTML, CSS, Javascript, RoR development. As a long time developer using Flash we compile a swf and most IDEs launch the browser in order for you to view changes.

That small nugget can save you lots of development hours. Textmate is my editor of choice for Rails and Javascript these days. While it does have a “preview” browser it has some small issues. It does refresh but it only stays visible on a selected file. If you switch to another file you have to launch it again.

You will be doing yourself a huge favor by checking out “LiveReload”. This awesome and simple application allows you to set up lots of directories for web development. Placing some javascript on the page hooks up a single page to reload as files change but even better there is an extention for google chrome and ff and any time a file changes with in your web directory it will reload any page you have loaded within the browser for that project. A very small simple solution but one that is well worth the money.

The Web Developer Wonderland

(a happy land where browsers don’t need a Refresh button)

CSS edits and image changes apply live.

CoffeeScript, SASS, LESS and others just work.

Citizenship is granted through the Mac App Store.
Windows permanent residency issues are being worked out,
temporary stay already allowed.

Easel JS: A Javascript lib for Working with the HTML5 Canvas Element

A great js api for flash developers that want a more familiar way of working with the HTML5 canvas

Thanks to Grant Skinner for developing this great api.

The API is loosely based on Flash’s display list, and should be easy to pick up for both JS and AS3 developers. The key classes are:


Abstract base class for all display elements in Easel. Exposes all of the display properties (ex. x, y, rotation, scaleX, scaleY, alpha, shadow, etc) that are common to all display objects.


The root level display container for display elements. Each time tick() is called on Stage, it will update and render the display list to its associated canvas.


A nestable display container, which lets you aggregate display objects and manipulate them as a group.


Draws an image, video or canvas to the canvas according to its display properties.


Displays animated or dynamic sprite sheets (images with multiple frames on a grid), and provides APIs for managing playback and sequencing.


Renders vector drawing instructions within the context of the display list.

There are also helper classes for working with sprite sheets, managing interactions, and converting points between local and global coordinate spaces. Have a look at the full API documentation for more info.

Planned updates

Easel will be updated as time permits. We’re not making any promises, but here are some of the things we’re thinking of doing:

  • Optimization
  • Improved documentation
  • Improve Shape API to make it easier to work with vectors
  • Text support
  • Faster hit detection modes (ex. bounding box, circular)
  • Sprite sheet creation tool
  • More integrated interaction features (ex. roll over, drag and drop, mouseX/Y, etc)
  • Better inheritance implementation
  • Helper methods for browser compatibility
  • SVG support