Games & Web Gadgets

Web development takes many forms. The examples here focus primarily on front-end related functionality. That is to say, the user-facing elements of an application be it a game such as a hangman puzzle, or a tool such as a specialized calculator to convert between human readable dates and computer readable epoch values. Some front-end applications can be complex, such as calculating time cards, generating color schemes to be consumed by a browser, or favorite icons.

If you are learning about web development, viewing the source from many of these tools may provide examples of coding style and hints about how certain problems are tackled. Once upon a time, you did this by "viewing source". Nowadays, you need to use the developer console. (This is because Javascript has gone from a novelty to handling the "heavy lifting" of drawing DOM elements, processing views, tracking, ads, sound, video, etc. For better or worse, Javascript is extremely ubiquitous. And it runs actively in most modern web pages. The old "view source" shows the static source code returned to the browser by the web server. The developer console shows the living state of the application while it exists in the browser's memory. It's complicated, but not insurmountable to understand! And, it's cool!)

Javascript Hangman

This site leverages a hangman puzzle engine I wrote in JavaScript to demonstrate how an application could support various customized word lists, picture lists, and even sound effects, all of which could be launched from a client's web site and played by their visitors without requiring any downloading or installation of software (it all runs in the browser). This approach is becoming more popular with HTML5 and many of the libraries that have appeared since it was written.

JHangman (Javascript Hangman Engine)

This is where the hangman puzzle engine code lives. This is a non-branded entry point (without the custom links from the hangman.bappy.com example above).

Online Jigsaw Puzzles

Solving a jigsaw puzzle on your phone or browser is a great way to decompress with a few minutes. It's also easier to put down and come back to later without the mess to clean up.

Hexcabulary: Six-sided word search

A six-sided twist on the classic wordsearch concept using a hexagonal game board and expanded strategies for hiding words in the puzzle.

Free Online Time Sheet Calculator

I wrote this tool in response to an acquisition which changed my friends positions from salary-based to hourly accounting. It was a fun little project and provides an example of front-end development which gets used by lots of people all over the Internet.

Magic Square

A fun puzzle slider game written in JavaScript supporting various levels of difficulty and a timer. Add it to your website.

Date/Epoch Converter

This is an example I wrote years ago to help solve a problem we were working on at a web hosting job early in my career. I still use it often as it solves a problem programmers dealing with dates run into all the time!

Ultimate CSS Gradient Generator

This tool is helpful for creating gradients and color combinations often found in web pages. (The ColorZilla browser plugin is also really helpful!)

Favorite Icon Generator

This is another awesome third-party tool which is very handy for folks who appreciate what a favicon is. (It's the little branded icon that appears beside a bookmark for your site if you didn't know.)