Margo Holowicki

developing at the speed of light

How I Built This Website

2018-08-29 margosustainable designweb development

When I met Tim Frick shortly after I graduated Northwestern University’s coding bootcamp, I had been attending every coding meetup I could find in order to get a job. But I was VERY excited to attend this meetup.

Tim is the author of “Designing for Sustainability” and was speaking that day on one of my favorite design paradigms, Sustainable Web Design (SWD). SWD is important for two reasons:

  1. If the internet was a country, it would rank sixth for electricity usage.

  2. Websites now average over 2MB on load. This is up from 0.7MB seven years ago.

In short, the web is a huge contributor to carbon emissions and, as a concerned citizen and advocate, I want to help others adopt carbon-saving technology.

Sustainable Web Design

Tim advised for major web projects developers use a ‘green host’ service. A server is the main physical machine your website relies on. He specifically recommended Google Cloud Platform as Google runs on 100% renewable energy[1] and is the largest private owner of Solar in the world and one of the most reliable services.

With that in mind, I have opted for the free tier of Firebase Hosting to put this website on. I can be sure of Google’s green hosting credentials and its global server network[2] is covered by renewable energy. Setup was relatively easy with Namecheap DNS.

The second major aspect of SWD is how much data a smartphone or computer needs to load when a person navigates to your website. As computers, smartphones, and internet networks advance in their ability to load more data in the US, unfortunately, web developers have taken advantage of this to create complex, data-intensive websites that used a lot of Javascript.

This is where I decided to go with GatsbyJS.

GatsbyJS

While I love Javascript, I recognize that JS can lead to data-bloated, slow websites. With React and GatsbyJS, however, I was able to avoid that with this website.

GatsbyJS is a static site generator based on React. I love Gatsby because my configuration for React is simplified to keeping NodeJS and GatsbyJS updated instead of webpack and other technologies React uses for setup.

React is great because it staggers loading to each component of a website rather than entire pages. Gatsby enhances this by minifying and producing static React, CSS, and HTML in pages. The server only needs to load my website once, and, once I enable caching[3], each user will need to load the majority of the website once.

Summary

For more information on sustainable web design, check out the web agency Tim works for, MightyBytes, and their posts on sustainability.

I didn’t mention this, but I’d also like to make a quick shout-out to FreeGeek Chicago. At FreekGeek, I learned how to refurbish and reuse computers as well as became comfortable with using Linux. That is to say, my hardware also avoids perpetuating e-waste.

Stay tuned for more improvements on this website. I plan to implement the Wordpress API and go deeper with Gatsby.


[1] https://environment.google/

[2] A Content Delivery Network (CDN) is a bit overkill for this website as my reach is mostly local, so I’ll need to improve this in the future.

[2] Gatsby Version 2, the newest version, does use webpack 3 and in theory should be able to cache Javascript. See more on this here.

Margo Holowicki - I’m a solar energy consultant and web developer. Follow me at @JoyCodesJS if you want to be informed about new articles. Please feel free to suggest topics or give feedback on anything you see here. Thanks.