I am a professional front end web developer based in London, England. The purpose of this blog is to write about issues in the field of web development as well as about open source projects that I am working on.

Blog posts

Portfolio

authorRichard Hunter date createdMar 27 2017 06:32 AM editedMay 08 2017 10:10 AM

Here is a showcase of some personal projects that I have worked on recently in order to give the viewer an idea of my skills and interests.

Please note that some of the demo apps are hosted on Heroku and there can be a time delay when visiting them as the dynamo is restarted during which you will see a blank screen.

Angular 4 Single Page App demo

Technologies used:

  • Angular 4
  • Webpack
  • SCSS
  • Google Books API

A Single Page Application for searching Google Books API written in Angular 4. There are separate environments for testing, development, and production. The goal is to showcase as many of Angular's features as possible, for example routing, animations, feature modules, lazy loading and AoT (Ahead of Time) compilation.

Angular 1 Single Page App Demo

Technologies used:

  • Angular 1
  • Mongo
  • Express JS

An SPA written with Angular 1 taking the theme of an ecommerce site for buying soul records. The user is able to register on the site, sign in, upload an avatar, add products to a cart, and check out (although not actually buy anything!)

WYSIWYG HTML editor

Technologies used:

  • Service Workers
  • IndexedDB Database

A GUI consisting of an editor pane and a display pane side by side. A user can type html into the editor pane and see the rendered result in the display pane. For images, the user can select an image from the file system to be displayed even without the image existing on a server! This could be useful in a content management system where you want to provide a preview of the users content but you don't want to have to upload an image to a server before the user has confirmed that they want to save their edit.

This works through the magic of service workers. Service workers have the power to act like a proxy server sitting on the browser, able to intercept http requests and serve up whatever response the developer wishes. When the user selects an image from a file picker widget, the image is stored in an IndexedDB database. The editor automatically creates the mark up for the image from user supplied parameters. When the browser then requests the image from the server, the service worker fetches it from the database and returns it.

UML diagram editor

Technologies used:

  • SVG (Raphael JS Library)

A browser application for creating and editing UML class diagrams. The GUI features a canvas on which the diagram is displayed, and a menu for selecting different UML elements to add to the diagram, e.g. arrows and class boxes. These elements can be edited within the diagram by clicking and typing, or by dragging.

screen shot of Carracci editing tool showing a diagram of the command pattern

React SPA

Technologies used:

  • React
  • ExpressJS
  • Webpack

This is a demo single page app for filtering a list of Roman Emperors. It is written in React using Webpack for bundling and transpilation.

screen shot of React implementation of Emperors of Rome application

Vanilla Javascript

Technologies used:

  • HTML/JS/CSS
  • ExpressJS

This is the same app as above, but written in purely vanilla Javascript. It features a router and dependency injection system custom written for this project.

screen shot of vanilla Javascript implementation of Emperors of Rome application

Ticket stub

Technologies used:

  • HTML/JS/CSS
  • SVG

I challenged myself to recreate graphical items using just SVG and CSS. This is a "trompe-l'oeil" image of an old ticket stub. All dimensions are in ems allowing for the object to be scaled by simply setting the font size on the root element. The outline of the card was created with an SVG path. I used a library I created for transforming absolute coordinates into relative ones which allows the path to be scalable.

Custom select box

Native select boxes provide limited hooks for custom styling so I created a custom one. I used this in the Vanilla Javascript SPA discussed above.

Menu bar

A menu bar with nested sub menus which appear on hover. Built with accessibility in mind it uses aria roles and attributes for screen readers and can be accessed using only the keyboard