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
My portfolio of web projects including SPAs, web apps, components, and CSS experiments.

intro

Here is a selection of personal projects which I have worked on in recent times.

Carracci

This is a browser based tool which allows the users to create and edit UML class diagrams. The menu allows the user to pick UML elements to be inserted into the diagram. These elements can be dragged around the workspace and connected together. A small set of keyboard shortcuts assist in allowing the user to carry out these tasks. The user can also edit the text within the boxes. The diagrams are a mixture of HTML and SVG. I used the Raphael library for working with SVG.

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

Angular 1 SPA

This is a demo ecommerce site written as a single page app. It presents a list of products and controls for filtering. The user is able to register on the site, sign in, upload an avatar, and add products to a cart. It is written in Angular 1 with a Mongo/express backend.

demo site

React SPA

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 demo site

Vanilla Javascript

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 demo site

Ticket stub

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.

ticket stub demo

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.

demo site