Michael Gunner

Frontend
developer

Writings

Fri, Sep 1, 2017

Using service workers to better handle going offline

What is a service worker? It’s not someone who works on services, although I’m sure you probably already had that figured out. Here’s a handy explanation of a service worker written by Matt Gaunt, Developer Programs Engineer at Google: “A service worker is a script that your browser runs in the background, separate from a web page, opening the door to features that don’t need a web page or user interaction.

Read the full article

Fri, Aug 25, 2017

My blood clot story

At the end of 2013 I had to deal with two setbacks - losing my job and getting a blood clot in my left leg, otherwise known as DVT or Deep Vein Thrombosis. A DVT can be fatal, as if the clot dislodges itself and moves into your lungs it will cause something known as a pulmonary embolism. A PE is extremely serious, and requires urgent medical attention. When I got my clot, I first thought it was muscle pain.

Read the full article

Wed, Aug 23, 2017

This is my new website, welcome

Over the past few weeks I’ve been dipping in and out of working on a simple new personal site, and this is it. I hope you like it. During the process, I experimented with some new ideas and technologies, here’s a brief run through. CSS Variables I’ve only used them a little bit for some font-sizing, but it works as follows: :root { --body-font-size: 16px; } I can then use the variables in my CSS like so:

Read the full article

Wed, Aug 23, 2017

A fully responsive grid system with four lines of CSS

Impossible! Hacky! Nope, neither of these things. With the emergence of CSS Grid, we can now create complex grid based layouts with the minimal amount of CSS and markup. Here’s an example: See the Pen YxvZZP by brightonmike (@brightonmike) on CodePen. As you’ll see, there’s just four declarations on the parent: section { display: grid; grid-gap: $grid-gap/2; grid-template-columns: repeat(auto-fill, minmax($column-min, $column-max)); grid-auto-rows: minmax($row-min, $row-max); } And that’s it - you have a fully responsive grid.

Read the full article

Mon, Jul 24, 2017

Lessons learned from a pattern library

tl:dr; pattern libraries are immensely challenging and require constant cyclical iteration, careful consideration of naming and structure, a renewed realisation to work with CSS instead of against it, and a keen design eye I’ve been a front-end developer now for several years. Over that time, I’ve become pretty good at taking PSDs and turning them into pixel perfect WordPress websites. Fluid, accessible, fast and flexible, my builds are pretty good. This may sound a little arrogant, but the truth is, having probably built over 60 WordPress websites by now, I really _should_be good at it.

Read the full article
Work

Pattern Library

City Pantry

Working for Neptik, I built and implemented a pattern library for City Pantry, working with their in-house development team on their Angular website.

View the project

WordPress

Journeys by Design

Another Neptik project, this was a super large WordPress build with around 1,500 pages. I built the site and utilised SVG techniques to create stunning visuals.

View the project

Pattern Library

Patrol Store

Working for WATB, this involved taking an existing E-commerce website and applying new branding and designs to the layouts, refreshing the look and feel of the site.

View the project

WordPress

Shippo

Surrey Digital Awards 2017 best B2B website winner. A WordPress site and my final project before leaving WATB, it has an integrated shipping tracker which connects to Podio.

View the project

WordPress

Pharm@Sea

An exciting Neptik project was to create the website for an NHS-owned and backed pharmacy at Royal Sussex County Hospital in Brighton.

View the project

WordPress

Infinity Foods

Working for Neptik, I built a unique site for this local Brighton co-operative. It was fun to work with the organic and natural styles, giving the site a feel that perfectly matched the business.

View the project