About forwebmotion

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

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.

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.

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.

So many courses, so little time. My primary focus is JavaScript, most recently the Vue.js framework which really blew my mind.

• Udemy, Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
• Udemy, Mastering Regular Expressions in JavaScript
• Wes Bos, React for Beginners
• Wes Bos, ES6 for Everyone
• Coursera, Frontend Web Development with React

The Coursera React course set a solid foundation, but courses from Wes Bos are incredible and much more applicable to real-world development. I have also always wanted to dive into Node.js and I am totally hooked on AWS. Their services are next level!

• Wes Bos, Fullstack Advanced React & GraphQL
• Wes Bos, Learn Node
• Udemy, AWS Serverless APIs & Apps - A Complete Introduction

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. 🙂