Tuesday, July 30, 2013

Welcome to LitmusBlog

Welcome to LitmusBlog, LitmusBox's place for sharing expertise and interacting with our global development community.

The idea of the LitmusBlog has been percolating for a long time. We've been deep in the trenches of web development as LitmusBox since 2008, and as freelancers since way back when Netscape Navigator provided the most state-of-the-art browsing experience. Back then, we wanted to share what we'd learned, as a way of giving back to a free-sharing online community from which we had benefitted countless times.

However, being deep in the trenches makes it hard to step back and write about it. We can't afford to spend days writing blog posts when clients are waiting for estimates, wireframes are due, sprints are roaring forward at mach 2. And so the blog idea was tabled.

JavaScript Art: Session 1 - Contemporary

10 or so years ago when I was big into ActionScript, I bought a book called Flash Math Creativity that really inspired me to make some expressive visuals. By creating and cloning "nodes" and by writing algorithms to alter the position and style of subsequent nodes, we can make some really fun art pieces using simple math.

Since this lesson is browser-based, we'll use JavaScript instead of ActionScript, and for this lesson we'll support Class A browsers. ActionScript and JavaScript are both ECMAScript so feel free to apply logic across both platforms. You can add support for legacy Internet Explorer on your own time, but keep in mind the JScript engine is terribly slow and there is a good chance your masterpiece will crash an old IE8 install.

Real Time Communication with Socket.io

Socket.io lets us enable real-time communication between web browsers. In this basic tutorial I'll show you how to build a simple "game" that lets you pass a puck back and forth between clients in real time.

The basic steps will be:
  1. Install Node.js.
  2. Install Socket.IO.
  3. Create a directory for your project containing the backend code (title it app.js) and a file for the frontend (title it index.html).
  4. From the command line and inside the project directory start the server by typing: node app.js 
  5. Open a browser and point it at: http://localhost:4000.
  6. Open a second browser and point it at the same URL.
  7. Click the puck and watch socket.io work its magic!
Let's get started!