\ Coding

The following is a partial list of some of my recent work, or work I am particularly happy with. This list includes demos or a description of or link to complete applications I have worked on. The work below includes things I did for fun, for school, for work, or for a learning experience. Feel free to email me with specific questions or comments about any of the apps below.

For newer, more recent demos, as well as more information on the sample work posted below, check out my recent blog posts.

Stock Exchange Simulator

This application was part of a networking class I took in the Spring of 2011. The app uses HTML5 Websockets to connect to a PHP server that I wrote, which implements the Websockets in the server. This project was very fun to work on, especially because there was little to no information online about how to implement the server in PHP. I ended up reading a lot of the HTML5 specs in order to make the server work properly, which it did. I later posted a video demo of this simulator in YouTube, since I don’t have a server that I can just let this run in order to do a live demo.

---

HTML5 Game demos

Since I started writing my first book to be published later this year by Packt Publishing, I started writing several HTML5 games. Of course, since the book will be titled Learning HTML5 by Making Fun Games, you can kind of deduce why I’ve developed these simple Javascript-based games. In order to show off some of the games, along with some one-off demos or prototypes for parts of these games, I’ve put together another demos page. For more information about the book, check out my blog for the latest news, as well my Google Plus page, where I also talk a lot about the upcomings related to it.

HTML5 Jelly Gravity Game Demo: SVG, Drag & Drop

HTML5 Snake Game Demo: 2D Canvas, App Cache, Web Workers

HTML5 Snake 2.0 Game Demo: 2D Canvas Web Storage

Check out my HTML5 games and demos

---

Google Chrome App

While this might not be the greatest web app in the history of the internet, I did enjoy making this simple app. This was my very first Google Chrome app, which is still being hosted at the Chrome Web Store as a free install. As of this writing, my fortune cookie app is the top downloaded app in all of Chrome Web Store that tells you your fortune without you having to pay for a meal at a Chinese restaurant =)

---

Music Festival Admin System

Another class project at school. This web app was built for a real company, though I’m not sure if they use my implementation today. There’s a local parent and teacher association that hosts annual music festivals for young boys and girls. All of their teacher registration, payment system, festival registration, etc. was done by hand, so I wrote an automated, user-friendly online version to help them. The system allows teachers to become registered teachers within the association, make their payments online, and register their students to the annual festival. System administrators could use the system to set up events, along with all of the little details associated with it.

---

Online Image Editor with HTML5

This simple little app is part of my research for my Senior Project. My project deals with computer vision, and the purpose of this application was for me to better learn how to use the HTML5 canvas, as well as various image manipulation algorithms and techniques. As of this writing, the application applies blurring filters, edge detection filters, and some general purpose color distribution filters. The app was written in HTML5 (Javascript).

View HTML5 Image Editor Demo

---

DOM Animation with Collision Detection

This is one old app that I wrote in Javascript as a quick test to determine if animation HTML divs was possibly more efficient than animating native geometry inside a canvas object. In this test I was representing each DOM element (the divs) as a custom object within the Javascript. Each object had a unique (random) size, direction, and speed. The blocks bounced off the corners of the browser window, and changed color whenever it collided with another block. My conclusion at the time was that this kind of basic DOM animation (by which I mean “DOM abuse”) is not too badly inefficient. However, anything more complex than this (for example, applying CSS features like border-radius or a background image) would drastically kill the performance. Since then I have seen the acceptance of, and learned more about Web GL, which is the obvious way to animate in the browser.

View collision detection demo

---

For a less organized list of demos I have coded, checked out the following three pages:

WebGL demos

Some demos I wrote while learning WebGL and OpenGL (using C++). The first few demos are ported from code I had previously written in C++. The rest were coded in Javascript with the sole purpose being to model the animations rendered with the WebGL context.

View WebGL demos

---

Political Wars

A mobile web app project I worked on last year. This application was intended to be a native iPhone app to be put in the app store. I worked on the interface design and the logic behind it. The goal was to code the application in HTML5, then use a tool like PhoneGap to take it native.

View Political Wars web app

---

Random HTML5 Toy Demos

Various very random modules I coded while trying to learn specific things. My main goal here was to experiment with, and get familiar  with and proficient at the newer CSS3 and HTML5 APIs as they came out, or as I got interested in trying them out.

View random HTML5 demos

---

HTML5 / CSS3 demos

Some more random things (like a syntax highlighter jQuery plugin) that I coded just for fun or for the learning experience. While these demos could probably have been organized with the previous set of demos, I decided to separate them because these demos are probably more serious and/or useful.

View even more random HTML5 & CSS3 demos