Grilled Pixels - Portfolio of Adam RobertsGrilled Pixels • Award winning designer and developer
DesignerDesignerDesignerDesignerDesignerDesignerDesignerDesignerDesignerDesignerDesignerDesigner
DeveloperDeveloperDeveloperDeveloperDeveloperDeveloperDeveloperDeveloperDeveloperDeveloperDeveloperDeveloper
PhotographerPhotographerPhotographerPhotographerPhotographerPhotographerPhotographerPhotographerPhotographerPhotographerPhotographerPhotographer
React & GatsbyReact & GatsbyReact & GatsbyReact & GatsbyReact & GatsbyReact & GatsbyReact & GatsbyReact & GatsbyReact & GatsbyReact & GatsbyReact & GatsbyReact & Gatsby
FigmaFigmaFigmaFigmaFigmaFigmaFigmaFigmaFigmaFigmaFigmaFigma
20+ Years20+ Years20+ Years20+ Years20+ Years20+ Years20+ Years20+ Years20+ Years20+ Years20+ Years20+ Years
Noteworthy20th September 2020

20 years of web development and how that changed overnight

Roundup –

The "developer experience" took me from wack-stack to JAMStack overnight.

Gatsby

Allow me to elaborate. Prior to a year ago, every project I developed was written either from scratch in pure XHTML, HTML5, CSS, SASS and jQuery. Depending on the project, I would either custom write a back-end in PHP & MySQL, or use an existing CMS (majority of the time) such as Wordpress.

I've developed websites with other systems too like Shopify and Magento, although I've never done one from scratch with those. Ugh, no thanks.

Wordpress, however, was my main CMS of choice to build practically any kind of website. I used it at every agency I worked for. Everyone loved it, still does too.

A couple of years ago whilst I was manaaging a team at a local agency, we developed a little extention that was based on ACF (Advanced Custom Fields) at it's core. This allowed us to create modules / components to give clients a really amazing "page builder" feature. How pages were structured was now completely in the client's hands. The modules / components would be designed to the client's requirements and always remained structurally the same. It just allowed them to reposition them and create interesting pages.

When this was developed and introduced, we never built a website any differently. And this became a little problem as we were creating the same old stuff over and over again. We weren't really getting any better. We became stagnant. But, the clients still loved it and even to this day, it's still an impressive invention.

Jamstack • Jamstack •

In 2018, I was doing some research into other technologies. I had seen and heard words like "modern development", "JAMStack", "Angular", etc but I hadn't really paid any attention to it previously.

When I discovered JAMStack, I was quite impressed with some of things I found. I heard of React, Angular and Vue and did a little reading in to those. One was more complicated than the other.

I met a couple of people and got talking to them, at the time they were heavily developing with React. Logically I thought this was the right path, and today I still believe that.

Towards late 2018 I discovered GatsbyJs, a framework built with React that allows you to build almost any kind of website, but it gets served up in a static format. It removed the obsticles of CMS and server slowness, the website would be served up on a CDN (Content Delivery Network) and in most cases, for free. Finding this was like a dream never dreamt come true.

I made an attempt at learning how to code in React and I'll be honest, because of my background and experience with older technologies, this was a really big leap and found it to be a very difficult task.

A couple of close friends got on board with Gatsby, so we're learning from each other as we're diving more and more into it. Joe Taylor and I, created a grid framework (based on Foundation 6 - our previous favourite go-to html/css framework) that we can use to develop websites much faster than ever before.

The learning curve of React was steep for me, personally, but it could be very different for others. Gatsby definitely helped me change the way I think with the developer side of my brain and it has opened up many opportunities.

I hope, every website going forward that I ever create, will be in React and Gatsby. Goodbye wordpress and traditional html / css.

In comparison, with how I'm developing websites now, I use Gatsby and my grid framework as a base foundation. I can plug into any API-based CMS headlessly like DatoCMS or Prismic to pull data and dynamically create pages. I use those CMS's to create a back-end in a matter of hours, rather than days or weeks with Wordpress. I use Netlify to host the front-end, which is free with a free basic SSL certificate.

You may have seen some amazing effects around this website that are created in Canvas, e.g. the cursor or day/night mode. These couldn't have been easier without React.

This website, in particular, was designed and developed by yours truly, in approximately 3-4 weeks.

Since learning React and doing more and more with Gatsby, I feel like I can now achieve more than what I could do when developing traditionally with html / css / wordpress.

Check out my later articles to see how I'm progressing.

Share this read on social