Years: 2019 | 2018 | 2017 | 2016 | 2015 | 2014

Demos for 2019

 
Lucky Number Piggy Widget
JavaScript library for rendering a pig with for lucky numbers on an example HTML page.

 
Valentine Heart Animation
A Valentine's Day animation using jQuery UI.

 
Easter Bunny River Crossing Game
Homemade browser-based game in HTML, CSS and JavaScript.

 
Lee Bee Wah Lau!
ReactJS code for displaying random text on screen.

 
Liverpool Quiz
AngularJS time-limited MCQ Quiz.

 
Hong Kong Anti-extradition Protest Symbol
CSS replication of protest symbol.

 
ReactJS British Insult Generator
ReactJS code for generation of insults based on a formula.

 
Tic Tac Toe
HTML/CSS/JavaScript rendering of the children's game.

 
Ada Lovelace Day Generator
ReactJS code to generate Ada Lovelace Day for the given year.

 
Contact Us Page
PHP Contact Us Form with emailing action, basic security and validation, and a custom map.

 
Christmas Tree SVG Animation
Christmas-themed SVG Animation to illustrate paths, curves and animations.

INFO
A collection of widgets and little programs I've compiled (and sometimes use) over the years. Some of it is obviously just for fun, and some of it can be used (and has been used) in various projects. Quite a few of them are Proofs of Concept. This is the stuff I get up to in my free time.

Please note that not all of them conform to accepted best practices. In fact, many of them don't. The key thing here is the idea behind, not so much the implementation.

I have made a point of indicating the technologies used (predominantly HTML, CSS and JavaScript) and the browsers I have tested the code on. If the code does not run on the browser indicated, check out the GitHub source; likely there is a branch within the repository that will work as advertised.
COMPLEXITY
Measures how many interconnected moving parts it took to produce this demo, and how complex these parts are.
Commercial or enterprise-level complexity.
Multiple moving parts, moderate complexity and properly abstracted.
Multiple moving parts with moderate complexity.
Multiple simple moving parts.
Student or hobbyist level. Minimal moving parts.
APPLICABILITY
Application in the real world.
Ubiquitious usage.
Widespread usage.
Useful functionality for general use cases.
Useful functionality for narrow use cases.
Theoretical only, or very simple functionality.

Demos for 2018

 
The Pie Chart
CSS and JSON Pie Chart.

 
Wet Floor Effect
Valentine's Day themed special effect.

 
Multilingual CNY Website
Ruby On Rails CNY website

 
Multilingual Easter Form
A website done in Ruby On Rails, with email sending form and multilingual options.

 
AngularJS Password Strength Validator
Password Strength Validator with API-based Dictionary Check.

 
Styling a checkbox
Checkbox jazzed up using HTML, CSS and JavaScript.

 
Styling a checkbox, redux: The Toggle
Rendering a checkbox as a toggle.

 
Nike Meme Generator
A PHP image file upload for generation of a Nike-style meme generator.

 
Smart Drop-down List
Prettied-up drop-down list with input search function.

 
A Christmas Letter From The CEO
JavaScript animated HTML page for displaying a CEO company address.

Demos for 2017

 
Valentine Scratch Card
Scratch-card simulation with Valentine's Day theme.

 
Hacker Republic Login Interface
A simulation of the login interface from The Girl Who Kicked The Hornet's Nest.

 
Easter Parallax Site
Parallax site with Easter theme.

 
AngularJS BMI Calculator
A web-based BMI calculator using AngularJS.

 
The Bar Chart
Animated bar chart.

 
The Line Graph
Animated line graph.

 
The Anti-CSRF Token
A basic demo of the Anti-CSRF token written in PHP.

 
Christmas-themed LESS Demo
A demo of the capabilities of LESS.

Demos for 2016

 
Star Wars Scroll
Scrolling text, Star Wars style.

 
Year of the Monkey Countdown
Countdown code for CNY, with animations.

 
Valentine's Maze Game
A maze game with a Valentine's Day theme, inspired from an app.

 
Easter Egg Generator
jQuery interface for creating an Easter Egg, with print feature.

 
Javascript Clockface
Typical animated clock face.

 
Rollover Buttons
Code for making rollovers, using Facebook, LinkedIn and Twitter icons as examples.

 
Browser Butterfly
An animated butterfly which flits around the screen.

 
Mini-Carousel
Marquee-type carousel, used on the front page of this site.

 
Scroll-down Christmas Carol
A scrolling page with content that changes with the scroll.

Demos for 2015

 
Year of the Goat
A CSS animation for Chinese New Year.

 
Trail of Hearts
Whimsical DOM magic for Valentine's Day.

 
LKY Memorial
A HTML/CSS overlay to commemorate the death of Lee Kuan Yew.

 
The Ngerng Effect, a.k.a Infinite Scroll
An infinitely crolling page with nonsense content.

 
Faux 3D Easter Egg
Rotating 3D Easter Egg.

 
The Lightbox Effect
Replicating the dimmer/popup effect.

 
CSS CAPTCHA
Proof-of-concept of a CSS-generated CAPTCHA.

 
CSS Rainbowlizer
Making a rainbow overlay on a profile pic.

 
Wheel of Fortune
A Roulette Wheel with results.

 
HTML5 Placeholder
Simulating the HTML5 Placeholder tag in older tech.

 
Remembering Paris
A CSS to commemorate the bombings.

 
A Christmas Animation
Christmas-themed animation for web greetings.

Demos for 2014

 
Wayang Progress Bar
A fake progress bar to encourage patience in users.