Vauxlab 2017

As a freelance web developer I felt the need to make my own portfolio website top-notch. Using the tools that I’ve learned to love plus some of the shiny new tech I didn’t yet have a chance to get into.

In summary, here is what makes Vauxlab great again:

• A static serverless architecture
• No page reloads
• Behaves as a progressive web app (PWA)
• UI based on React with styled-components
• Scores 100/100 on performance, best practices and PWA
• Content management using a headless CMS
• Files are deployed on a global CDN

I am a fan of the JAM-stack. Modern web development architecture based on client-side JavaScript, reusable APIs and pre-built Markup. This type of website is becoming popular because it can give you the best in terms of performance, security, SEO, maintenance and hosting costs.

You might have noticed that this website performs extremely well. It loads super fast and pages do not reload when you navigate around. You are looking at a statically generated website. This means each page has already been rendered to HTML before you visit it, and those files are served from multiple places around the globe (CDN) to make transfers fast wherever you are located.

Every page loads only the code it requires and critical CSS is inlined in the head element. Other resources are loaded lazily and linked pages you might visit next are pre-fetched in the background. When the page is loaded a React app makes the seamless transition into a single-page application in order to avoid page reloads when you navigate around. On supported devices a service-worker caches and fetches data in the background, allowing the site to function even when your dodgy 3G or WiFi connection drops.

Images and content are pulled from a headless CMS. A GraphQL query triggers image conversion using Sharp, and fetches the correct sizes to create a responsive set of images at built time. This makes it possible to upload large original files to the CMS and tailor those images to the design and the needs of different devices.

This website was built using Gatsby, which is largely responsible for what is described above. It utilizes the PRPL pattern to maximize performance. I was eager to use version 1.0, because of the novel use of GraphQL for data handling and the open plugin architecture.

If you are a developer you know the term bleeding-edge. When you try to use something super new and cutting-edge in production you will bleed for it. At the time I assumed that 1.0 was almost ready, but that turned out to be a little optimistic. I ran into many issues and found myself becoming a frequent contributor to the project. It was frustrating at times, trying to debug the tools you are using to create something at the same time, but it has been a valuable learning experience and I am happy to give something back.

I am excited with how things turned out. This website ticks off all the boxes relevant to modern web development. It scores 100/100 points in performance, best practices and progressive web app measurements, according to Google’s Lighthouse.

I will continue to add content and things like animations in the weeks to come, and of course I will tweak it whenever I learn something relevant or find a way to make things more exciting. I don’t think it will ever be completely finished.