Everything we learn today is but a stepping stone to what we will learn tomorrow.

A Web Developer's journey.

React React

Front-end

HTML5 HTML5
CSS3 CSS3
JavaScript JavaScript
Anime.js animation library Anime.js animation library
Emotion CSS-in-JS library Emotion CSS-in-JS library

Toolchains and Cloud Services

Gatsby V2 Gatsby V2
AWS Amplify Console AWS Amplify Console
Amazon Web Services Amazon Web Services

IDE and Version Control

Visual Studio Code IDE Visual Studio Code IDE
GitHub GitHub

2019

React

About forwebmotion

Hi there! 👋 My name is Dave Green. I am a web developer based in Cape Town, South Africa. This is my journey.

Gatsby

Would you like a starter template that comes with Server Side Rendering for improved SEO, image optimisation and lazy loading, GraphQL and offline support out-of-the-box? Just take a moment to think about all that and the amount of development time it would save.

I am completely blown away by React and the Gatsby toolchain. Coming from a PHP background I feel like I’ve been hiking up Table Mountain with a boulder on my back and now I’m using the Cableway.

Front-End

Every year we get closer to a time when we will no longer be limited by the dimensions of a screen, where we have achieved an unprecedented level of interactivity. Animation will play a huge role in the UI of the future and while I haven’t jumped on the WebGL bandwagon just yet, awesome as it is, React provided the perfect opportunity to up my game. Page transitions were built using the Anime.js animation library along with the Intersection Observer API for detecting when elements enter the viewport.

Next up on my list of firsts is the CSS-In-JS library, emotion. I especially like the styled package inspired by the styled-components library where you can manage the CSS of an element and its children in its own component. This method is far easier than having all styles in a single CSS file and cuts out the need for a naming convention for classes such as BEM. Don’t get me wrong, I think the Block, Element, Modifier methodology is brilliant, but it does add a very noticeable amount of time to development.

Amazon Web Services

On to hosting now and the first step, as always, is to register a domain name. Once registered AWS automatically creates a hosted zone on their Route 53 DNS web service. Next, I had to set up my mailbox. AWS has great options for sending and receiving mass emails, but for a portfolio site you really just need a free option which they don’t provide. Fortunately, I came across a post on Medium about using Zoho mail which has a perfect free starter plan and a very cheap upgrade option should I ever need it. All I had to do was configure a few DNS record sets and boom! Email is up and running.

I then began researching various AWS services such as EC2, S3 and Elastic Beanstalk, but after consulting the Gatsby documentation I stumbled upon a tutorial for publishing to AWS using AWS Amplify, specifically the Amplify Console.

AWS Amplify is used to build serverless cloud-powered apps. A breath of fresh air compared to the server installations I had become accustomed to. To ensure speedy performance around the globe it makes use of Amazon CloudFront, a fast content delivery network ( CDN ) service.

The Amplify Console acts as a continuous delivery and hosting service. My site was live in just a few short steps:

  • First, I created a new GitHub repo and pushed my project.
  • Second, I logged into the Amplify Console and selected my new repo.
  • Third, I reviewed the build settings and deployed.

How easy is that? Now if I want to update my site all I have to do is a git commit and push the changes to the master branch which triggers a new build and updates the site.

The final stage was to link my domain as Amplify uses an auto generated amplifyapp.com domain by default. When I switched over to forwebmotion.com a free HTTPS certificate was generated for me keeping my site secure and Google happy. What’s more, I can connect a "dev" branch for future development and a separate deployment will be created using an auto generated amplifyapp.com domain. I am officially in developer heaven.

Recent & Current Courses

So many courses, so little time. My primary focus has been on React, but also the latest CSS and JavaScript updates.

Completed courses:

In progress courses:

What’s Next?

The Coursera React course I took covered Redux, but courses from Wes Bos are incredible and much more applicable to real-world development.

Cheers

Well that’s my journey so far. The developer community is all about collaboration so please reach out on LinkedIn or send me an email.

I look forward to hearing from you, but till then thanks for taking the time to visit my site. 🙂