Darn it, it’s been six whole month’s since I posted anything on my blog, I sorta feel ashamed of that, I’ve got tons of draft articles waiting to be completed. That doesn’t mean that I haven’t been busy though, I designed quite a couple of t-shirts for a hometown alumni and then I also got stuck on a project that I had to withdraw from.

Now why would I do something stupid like that, well long story short, it was one of those where the project scope continiously got changed by the client thinking everything is a 5 minute change. The one thing that I greatly appreciated though was that I was constantly challenged as a designer and a programmer. I also realised to become the class of developer that I want to be I’d need to go back to the drawing board and update my skillset.

Most of my frontend skills are great, my javascript however, well let’s just say it’s on the rusty side. I decided to follow the freeCodeCamp route for that exact reason. Covering the HTML & CSS part of the course for front-end developer certification was an absolute breeze but digging into the javascript, which I’m still busy with, forces me to rethink everything and also learn to understand this scripting language better.

Here’s my pens for the HTML & CSS  tasks

This was the first task, create a tribute page using JQuery and Bootstrap 3. Kept it minimal and focussed on micro-interactions.

See the Pen freeCodeCamp: Tribute page by Theuns Coetzee (@ipokkel) on CodePen.0

This pen required the use Bootstrap and JQuery to build a “portfolio” page.  Using svg’s to enhance the responsive styling, something I learned through working with WordPress, is what I enjoyed most. I also decided to try out Bootstrap 4 released end 2017.

See the Pen freeCodeCamp portfolio page by Theuns Coetzee (@ipokkel) on CodePen.0

Now javascript isn’t just javascript, there’s many flavours of it or more technically correct there’s many libraries you can work with. A great example of that is the JQuery library which WordPress and the themes and plugins therefor uses.

Traditionally pure javascript, a.k.a. Vanilla JS, didn’t have or made it very difficult to handle DOM objects but with the advent of ES6 a lot of this has changed and you can achieve in vanilla javascript what previously required libraries like JQuery or Lodash.

I’ve almost done with the “Intermediate Front-end Development Projects” and only have the final task left, building a TwitchTV JSON API app. The first three took me on average 5 day, or a work week, to complete, but I’m darn chuffed with the results. I’ve built each one from scratch using ES6 functionality where and when I could, not only did I pull out a lot of hair but more so had “eureka” moments.

So why is using vanilla JS such a big thing you might ask. Well it comes down to two primary facors:

  • Learning vanilla javascript enables you to understand the scripting language and therefor are able to overcome limitations when you do use third-party javascript libraries, and
  • Speed. Each library added to a page load adds weight to your total page size.

Yes, I’m aware some libraries are small and some not, but so often we use only a fraction of the latter’s functionality you have to rethink whether it’s worth it. A blunt and exaggerated example would be packing the whole Canada just because you want Canadian bacon.

Despite not being proficient at javascript my previous experience in classic ASP and PHP has taught me the basic principles of “healthy” coding which at the end of the day is to be as lean and efficient with code as possible.

Here’s my pens for the “Intermediate Front-end Development Projects”

Used ES6 Javascript and discovered the use of “fetch()” to retrieve JSON via API calls.

See the Pen freeCodeCamp: Random Quote Generator by Theuns Coetzee (@ipokkel) on CodePen.0

Used ES6 arrow functions to trim code where possible and for the front end a fluid, responsive design and typography

See the Pen freeCodeCamp : Show the local weather by Theuns Coetzee (@ipokkel) on CodePen.0

Don’t let the plain Jane layout fool you, this app boasts auto search if more than 3 characters are detected, but instead of making an api call on every keypress past that it waits till the user stops typing for a certain time before doing a new data call. Nifty, don’t you think? To round things of I included error handling if Wikipedia API returns nothing that responds with a simple message to the user instead of throwing errors.

See the Pen freeCodeCamp | Wikipedia Viewer | Vanilla JS by Theuns Coetzee (@ipokkel) on CodePen.0

* In Progress

After this section is done it’s time to start learning to work with more intermediate algorithms and then advanced. This means I’ll be “off-grid” for a couple of weeks again.

Just as a final note: I cannot begin to explain how grateful I am for the time and effort being put in by Quincy Larson and the other freeCodeCamp volunteers to provide an open source online learning institute.