Learning by doing one (mini) project at a time

Navigation

Javascript ES6 Classes - A More Intuitive Syntax To Prototypal Inheritance

Growing up I was a sucker for animal documentaries and I was fascinated with anything that had to do with lions, tigers, leopard etc... So no surprise if this exercise will have to do with them.

We will learn a little bit about the Panthera Genus of the Felidea family and some cool new syntax along the way

postimage

You can read about the Panthera lineage here:
https://www.wildcatfamily.com/panthera-lineage/

The Goal

So I want to setup a base model that will hold all the necessary properties and methods to create one of the seven types of big cats that we find in the Panthera lineage. The Panthera Genus is part of the Felidae family so in code it

Using And Understanding ES6 Today - Block Scoping

When yet another JS framework lurks around and everyone starts jumping on the buzz words bandwagon, you might rightfully sense that feeling of "déja vu" and can be excused when caught screaming out of your lungs "Not again !!!". In the case of ES6 though, Javascript - the language, is the one evolving from its solid predecessor ES5 and you will be wrong to miss the early train on this one. This post is the first in…

Create an off canvas navigation menu with CSS

Popularized by apps like Facebook on mobile, the off canvas menu allows to save valuable real screen estate by toggling the navigation into view only when needed. We will dive and explore one way of achieving the effect using some overlooked CSS properties. View Demo Download Source View On Github Click on the starter.html file and save it on your computer. The finish.html is also there for your reference. If you are more the…

Designing Your Own Masonry Grid Layout From Scratch

I was fascinated by the masonry layout made popular by Desandro famous jQuery plugin the moment I saw it. Beyond the fascination I was intrigued at how was it done, what was going on under the hood? It's no hazard that the first official post of this hacker blog takes a deep dive in creating our very own version of it. View Demo Download Source Code View On Github Goals and Challenges First let's outline some…