Designing in the browser, I hand-code semantic HTML5 & CSS3 into CMS themes. Or user interfaces for all types of web applications. Working in teams, or alone, to deliver projects that achieve the business objectives of all stakeholders.
Beyond the traditional front-end repertoire, I'm also comfortable getting stuck into cross-discipline tasks. From deploying Cloud instances, managing code repositories, debugging DNS issues, running social media campaigns, to interpreting metrics.
In addition to client work, I have also developed a small portfolio of commercial ventures. These include niche web applications, premium CMS themes, digital products and web services.
Have a project in mind? You can contact me via email, LinkedIn or Twitter. Or download my curriculum vitae.
I'm Available for HireWeb platform for modern school newspaper teams.
A web publishing and distribution platform, designed for the modern, student-led editorial teams behind today's best school newspapers.
The newspaper industry embraced the rise of the Internet years ago. Kicking and screaming, they transformed themselves into 'digital first' organisations. Where stories are often published on their websites long before they appear in print. And their entire editorial workflow is managed via web-based systems.
For the modern school newspaper to remain relevant to today's students - especially the budding journalists of tomorrow - it is imperative that they too embrace the new 'digital first' reality.
Gone are the days of spending thousands of pounds on printing your school newspaper monthly, or termly. Only to find them strewn across the playground by lunchtime. Why not distribute the latest issue via email, directly to student's personal devices?
I am developing a web application that provides a centralised, web-based platform for students creating and editing media-rich stories. Where editors can manage the entire editorial process online. Collaborating with their writers and other team members in a medium they are familiar with. Working their way through the guided editorial workflows to hit the publication deadline.
Once your students' submissions have been approved by the editor, the platform automatically compiles your digital edition. Without any web design knowledge on the part of either staff and students, the templating engine takes the complexity out of producing high-quality newspaper website layouts. Before notifying students, staff and other subscribers of its release.
For those schools who would still like to be able to print out each newspaper edition, perhaps for the library or on open days, we provide a print-friendly conversion tool. This takes the compiled digital edition and produces a beautifully laid out print version.
This project is currently in development.
Coming Soon16 credit card and payment method icons, built in pure CSS.
16 beautiful credit card and modern payment method icons. All lovingly handcrafted and recreated in pure HTML5 & CSS3.
Includes:
After purchase, you will immediately receive all the HTML & CSS files to integrate these icons into your own web projects. Plus, the LESS construction files and support documentation.
Buy Now $9.99 / Gumroad.comMulti-stakeholder website redesign project.
Redesigning the three co-branded, public-facing websites for school, sixth form and sports centre, by developing a custom 3-in-1 WordPress theme.
This was a complex, multi-year re-branding and website design project that I started shortly after joining The Netherhall School, in 2011. During my 3-years at Netherhall I was responsible for redesigning and developing these three websites:
In total, there are approximately 200 individual pages across the three properties. Plus a dozen custom page templates that were created for specific areas of the websites. These include course and department pages, leadership page layouts and web pages to support campaigns for school accreditation schemes.
By far one of the most challenging aspects of this multi-faceted project was managing the numerous groups of stakeholders. From the headteacher and school governors to the sixth form leadership team and the sports centre general manager. All of whom had competing requirements, objectives and priorities.
Content management system (CMS)
Over the course of 3-years I tackled this project by designing and developing a custom 3-in-1 WordPress theme from scratch. This approach not only helped to ensure a consistent design aesthetic across all three properies. It also went some way to reducing complexity through its single, unified codebase.
The implementation of the new design changes required the migration of the three previously separate websites into a new, centralised WordPress Network installation. At the same time, I was also responsible for migrating all the websites from legacy shared web hosting to more capable VPS hosting.
Responsive web design (RWD)
During the 3-years that I worked at Netherhall, I witnessed the rise of mobile device traffic to all the websites. Rapidly growing from less than 10% (2011) to 33% (2014). At the time of my departure, in late 2014, I was retrofitting the WordPress theme with responsive web design elements and best practices.
The most important lesson that I learnt during this project was the value of effective project management. From setting client expectations to finding solutions to the divergent priorities and requirements of all the stakeholders who are invested in the project's success. In the end, the human element proved to be the most challenging, and rewarding, aspect of this project.
Visit WebsiteStreaming educational videos directly into classrooms.
When I was at school teachers had to wheel a TV set into the classroom, in order to play you grainy and cringe-inducing educational videos. With the installation of a computer and projector into every classroom that is a thing of the past.
One of the last projects I undertook at The Netherhall School was to overhaul the school's digital video library. Despite the arrival of ceiling-mounted projectors into every classroom, I was surprised to learn that many teachers still keep shelves full of dusty old VHS tapes in their department offices. Even worse, they often had multiple copies of each tape, for lessons where several classes were timetabled to run in parallel.
What the school needed was a centralised, web-based media library, from which teachers could stream videos directly to their classroom computer and connected whiteboard projector.
My predecessor had made a good start in converting and hosting more than 1300+ movies, TV shows and video clips on a simple, internal WordPress blog. However, teachers had started to complain about the poor user experience. It only supported progressive download, which was slow across the school network. And the growing catalogue meant that it was becoming ever more difficult to find the videos they needed.
Here is how it looked like before I started the project...
The objectives for this project where to:
New hardware
This was one of the rare occasions where I got to touch bare metal and provision my own server hardware - inclduing upgrading RAM, installing a graphics card and new hard drives. Plus, I got to install my preferred Linux distribution; Ubuntu.
Media-streaming
After evaluating a copy of Adobe Media Server that we had kicking about the office, I instead opted to use Red5, an open source media-streaming server.
Migration & backwards compatibilty
The 'no downtime' requirement created some challenging project constraints. Specifically it meant that the new system had to be backwards compatible with the old media player and library file structure. The upside was that the migration could be performed in smaller chunks and without anyone noticing.
Web app user interface (UI)
I decided to keep the WordPress back-end to the media library. However, I designed a custom WordPress theme / UI / front-end of the web application. To give it a nice modern aestethic and to make it responsive, so that it could be used by the increasing number of mobile devices within the school.
Advanced features
In addition to updating the existing library I also developed a number of new features and functionality to improve usability. Some 'bells and whistles' include:
Unfortunately this project is currently hosted on premise by The Netherhall School and it is therefore not publicly accessible.
Microservice enabling Plesk Panel backups redundancy.
Server backups are definitely not the glamorous side of web development. Yet they are absolutely essential to smooth operations.
During the virtualisation and migration of Netherhall's web systems, I found myself looking into server backups for our new VPS. This ran Parallels Plesk control panel and the built-in options were simply to store backups on the same server, or FTP the backup files to another location.
As I researched redundant storage services I was dismayed at the apparent cost. An ardent Amazon Web Services (AWS) user, I knew that these services were charging more than 10x the actual cost of the storage space. Finally, I decided to try my hand at building my own AWS-based storage solution.
FTPvau.lt was originally created to 'scratch my own itch'. This simple SFTP-based web service has since been modified to allow multi-tenancy, staggered scheduling to reduce CPU needs, automation of backup recycling and other key operations.
Much of the microservice's automation was achieved via custom Shell scripts executed by the crontab. This code example routinely scans all users files and deletes any files that do not match the approved Plesk Panel backup (.zip) file type.
# Delete any files that are not .ZIP file type
*/5 * * * * sudo find /home/mhathaway/* ! -name "*.zip" -type f -delete
It was an elegant solution and a pleasure to use. You simply pointed your Parallels Plesk backup process at the FTP service, and you can sleep a little easier knowing that you had reliable and redundant storage for all your server backups.
This project was closed in late 2014, following my departure from The Netherhall School. For more information please read my 'shutting down' announcement posted on the website.
Visit WebsiteDemonstration site for jQuery UI drag-and-drop.
In an age of virtualisation, Dockerisation and the Cloud there is still a geeky romanticism to handling bare metal and racking your own servers.
These days you are far more likely to find me logged into an AWS console than squirrelled away, in amongst the racks of a datacentre. I think that is a shame. Getting our hands dirty, provisioning and rack-mounting servers, gives us an invaluable appreciation for the technology and infrastructure that powers every project we work on. After all, even our Clouds are still hosted on physical servers, somewhere.
Get Rackin' is a fun one-page site where you can rack-mount different types of servers and other peripherals into virtual 42U racks. I have lovingly re-created a range of servers, networking equipment and other peripherals, using just HTML5 & CSS3.
Here is a code sample for the HP Moonshot server:
<div id="hp-moonshot-4u" class="hp-moonshot 4u server" draggable="true" ondragstart="drag(event)">
<div class="hp-moonshot-wrapper">
<div class="fascia-bar">
<div class="fascia-bar-cutout"></div>
</div>
<div class="status-panel">
<ul class="status-panel-lights">
<li></li><li></li><li></li>
/* HP Moonshot
------------------------------------------------ */
.hp-moonshot {
.server;
background-color: #ddd;
height: 59px;
&-wrapper {
background-color: #555;
height: 51px;
padding: 4px 0;
position: relative;
}
.fascia-bar {
background-color: #ddd;
padding: 6px 24px 0 24px;
&-cutout {
border-bottom: 6px solid #555;
border-right: 6px solid transparent;
border-left: 6px solid transparent;
height: 0;
}
}
.status-panel {
background-color: #444;
border: 1px solid #555;
border-radius: 3px;
padding: 1px 3px;
position: absolute;
top: 36px;
left: 36px;
text-align: center;
width: 124px;
&-lights {
float: left;
padding: 0 16px;
width: 24px;
vertical-align: top;
The site also implements the jQuery UI library drag-and-drop to enable you to rack-mount the elements simply by dragging them onto the empty racks. You can re-position and remove servers. Add extra racks. And even clone existing rack layouts.
<div id="hp-moonshot-4u" class="hp-moonshot 4u server" draggable="true" ondragstart="drag(event)">
<div class="hp-moonshot-wrapper">
<div class="fascia-bar">
This project started out as a fun experiment to build a website that uses drag-and-drop functionality. It also served as a creative outlet as I re-created popular server models in pure HTML5 & CSS3. I hope that you enjoy playing with it too.
I encourage you to share pictures of your own rack designs and creative layouts, via @get_racking on Twitter.
Visit WebsiteSomething something something darkside
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis commodo magna leo, eleifend convallis arcu euismod a. Cras sollicitudin orci magna, et sagittis tellus consectetur nec.
Sed malesuada diam mauris, non commodo ex luctus semper. Donec vel magna condimentum, tristique leo sit amet, aliquam nisl. Nulla eu mattis velit, sit amet porttitor turpis. Cras a tristique lacus. Vivamus eu metus turpis.
Duis molestie, neque ac consectetur porta, lacus lectus semper sapien, consequat commodo nisi eros sit amet tellus. Ut risus massa, egestas a tincidunt dictum, elementum in magna. In vulputate turpis vel tellus tempor malesuada. Praesent ullamcorper aliquet tellus, non mollis massa placerat sed. Cras non porta justo. Donec eu vulputate orci.
Quisque pulvinar dolor non felis molestie, quis iaculis sem blandit. Pellentesque porttitor ultrices mi at placerat. Nunc non ex accumsan purus faucibus mollis vitae vitae urna.
Maecenas feugiat tincidunt placerat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ullamcorper purus eget libero cursus, et commodo ante sagittis. Integer lectus velit, egestas in tempus vitae, molestie et metus. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Aenean porttitor sapien at mauris imperdiet, sed volutpat sem volutpat. Curabitur vel erat sit amet risus pulvinar tempus non vitae sapien. Quisque felis lectus, dignissim ac tortor in, ullamcorper condimentum risus.
Buy Now Live Demo £99 - single licenceIn 2015 I packed my life into one carry-on suitcase and set off to travel around the world, indefinitely.
I am spending 90-day cycles in each of Australia, New Zealand, Canada and the USA. Plus a couple more exotic locations along the way. Exploring a new city / destination every few weeks. Living and working remotely from planes, trains and hotel rooms.
Note: this itinerary and dates are subject to change.
Here are some answers to the most frequently asked questions that I get asked about my Digital Nomad lifestyle.
Follow my progress on Twitter.