Years: 2023 | 2022 | 2021 | 2020 | 2019

Demos for 2023

 
Year of the Rabbit Animation
CNY animation for the Year of the Rabbit

 
Valentine's Day SVG Heart Animation
Valentine's Day animated SVG

 
Easter Egg Line Game
VueJS Easter Egg game

 
Venn Diagram SVG
SVG of a Venn Diagram

 
PKCE Generator
PHP and JavaScript based PKCE Generator

 
JavaScript Tetris
Tetris written in vanilla JavaScript

 
The Chameleon Site
Using JavaScript to very gradually change site color

 
Oracle APEX Self-affirmations Mailing List app
A Registration Form and Update Form with Login

 
The Random Christmas Card
A LESS Christmas Card website with A.I generated content.

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 2022

 
CNY 2022 Lucky Number Generator
Redone Lucky Number Generator widget with abstraction for future additions.

 
The Valentine Letter
A frivolous romantic animation in HTML/CSS/JavaScript, with time-specific functions.

 
Ukraine Protest Art Generator
Simple protest art generator for Ukraine invasion.

 
Highcharts Line Chart
Highcharts Line Chart with dashboard selectors

 
Easter Egg Hunt
Choose Your Own Adventure style jQuery game

 
Florida Man Headline Generator
Funny and frivolous Florida Man headline generator using VueJS

 
ReactJS Japtrainer
ReactJS created app for Japanese character set training

 
Highcharts Pie Chart
Highcharts Pie Chart with dashboard selectors

 
Collision Detector
VueJS script to help detect collision between two objects with varying co-ordinates and sizes.

 
D3 Heatmap
Animated heatmap rendered using D3 and SVG

 
Highcharts Heatmap
Highcharts Heatmap with dashboard selectors

 
The Christmas Flipbook
jQuery Flipbook with user-controlled animation

Demos for 2021

 
Basic JavaScript Unit Testing Suite
HTML/CSS/JavaScript code for basic unit testing

 
CNY 2021 and Valentine's Day Animation
SVG Animation commemorating the coincidence of the Year of the Ox and Valentine's Day

 
ReactJS Hangman
NodeJS-created React App for Hangman

 
VueJS Easter Puzzle
VueJS Easter-themed puzzle

 
Free Myanmar
SVG/CSS Myanmar Protest Art

 
Navigational Menu
HTML and CSS multilevel navigational menu

 
JS Datepicker
JavaScript-based calendar widget for HTML forms

 
Encryptor/Decryptor
Simple encryptor wth key-based decryptor and email function.

 
The COVID-19 Dashboard
Singapore COVID-19 D3 data visualization.

 
Highcharts Column Chart
Highcharts Column Chart with dashboard selectors

 
VueJS Tile Slider Puzzle
VueJS sliding tiles game.

Demos for 2020

 
CNY Rat SVG Animation
SVG Animation of the words "2020" morphing into a stylized rat head.

 
Tic-tac-toe Valentine's Day Edition
Valentine's Day Edition of Tic-tac-toe, with simulated intelligence

 
D3 Animated Bar Chart
Animated bar chart rendered in D3 and SVG.

 
Easter Memory Game
An Easter-themed paired cards memory game written using ReactJS.

 
D3 Animated Line Chart
Animated line chart rendered in D3 and SVG.

 
Slide Carousel
A slide carousel implemented in HTML, CSS and JavaScript

 
D3 Animated Pie Chart
Animated pie chart rendered in D3 and SVG.

 
Fade Carousel
A fade carousel implemented in HTML/CSS/JavaScript

 
Louver Carousel
A louver carousel implemented in HTML/CSS/JavaScript

 
WordSearch Puzzle
Children's wordsearch game in jQuery/HTML/CSS

 
12 Days of Christmas
A frivolous Christmas-themed ReactJS app to illustrate SVG usage.

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.