Over time human beings have evolved, from homo erectus to sapien…then to sapien twice, from horse carts to roaring engines, and now to electric. I like to call it “moving with the times”, and that’s good. Let’s take a short glimpse back into the history of website, specifically scaling in reference to web pages.

Long ago, in a distant land…most websites were unimaginable on mobile devices, if people had invented 5” super AMOLED, gorilla glass, waterproof, everything-proof, do-everything-even launch-into-space mobile screen as those of today. If you were lucky enough to have one of those Fabergé eggs, viewing a website on your mobile phone was horrifying, Jason Voorhees kind of horrifying.

You had to scroll for miles before you could click the “add to cart” button or put your mobile in landscape orientation just to see the navbar. The dark days truly. However, as I said before, we are an evolved people and if such offences from web developers and designers today could earn them an execution.

So then, welcome everyone to media queries. They help you style your content rendering to adapt to certain conditions such as orientation, device, width and much more. That kind of power is lethal, you can design such aesthetic sites using this rules, and much more importantly…sites that can scale.

Now, the trick here comes when you need a jQuery or javascript function to work when a certain media query is true. That’s the big boys club, but I’ll give you a free ticket in. You can store your media query in a variable using the window.matchMedia() function and add some logic to your fancy.

I know…mind-juggling, go out there and create more adaptive, responsive and beautiful sites with this, the code is ever in your favour but for the ;…I’m not too sure.

It’s been a while, eh.Let’s veer away from programming for a second, moving stuff, especially from one OS to another. File systems are a pain in the neck and you might have to format your external drive every time you need to use a different file system, which also doesn’t guarantee its use.

So, what do we do? Microsoft mostly uses NTFS which is read-only on Mac, Mac on the other hand uses something that sounds like it is used to make a hydrogen bomb. You can already see the nightmares…luckily, however, there came FAT32 which can take on both operating systems. The catch is that it has a 4GB limit especially on Mac, which can make you reap a few things.

Then came a sigh of relief, a breath of fresh air. exFAT. This system supports both operating systems and has no limit. All you have to do is format your external drive in the exFAT format and the headaches are gone.

Don’t be stupid, come to the exFAT side…

Code, there is a lot to it, isn’t there? Welcome then to the wonderful magic that is modules, especially in Python.

So, what exactly are modules. They are Python files, well not necessarily Python, whichever language, that contain classes and functions. That is essentially what they are, Python files with functions.

This makes programming even easier, because your code becomes reusable and your work is just calling functions from a module.

The import statement

If you were to use a module in a project, you would have to import the module like so, just after the PATH

import <module name>

Let me stop beating around the bush…

This module will add up two numbers like so…

#!usr/bin/python

blue = int(raw_input("Feel like giving me a number?"))
green = int(raw_input("How about another?"))

def addy(blue,green):
    white = blue + green
    print white
def addy(blue,green)

Then I would save it with the name addy.py. If I then come to another file, I would import it as so..

#!usr/bin/python

import addy

blue = int(raw_input("Hey there, give me a number"))
green = int(raw_input("How about another?"))

#I can then call the function here
addy(blue, green)

So, there you have it, making work easier one byte at a time

Challenge:

Try making a module of something that makes your life a whole less harder. Make it interesting, like a module that can compute how much money you spend in a week.

Ah, I sense the force getting stronger…

Let’s talk Python for a bit. I just started learning how to program in Python, oh the fun! I find it really easy to read out, but don’t underestimate it ferocity, it’s like a looming anaconda, asleep though.

The syntax is really easy to grasp but you have to be mindful of indetation. Oh my, the indentation! You need to be extremely dexterous when handling Python. Since Python doesn’t have any curly braces {}, its form of encapsulation is indentation. This tells Python when a block of code should end and what its parent statement is, as in the case of a function.

Let’s stop blabbing about…

This is what I mean by indentation

def hello():
    print "Hello, World!"

In another instance

def isBigger(x,y):
    if x > y:
        print x
    else:
        print y

notice the position of the print word and the if statement. Either use four spacebar tabs or one Tab stop as convention, but for now may the code be with you!

Private variables…we need ‘em. Case in point, your bank balance in your bank’s system might look something like this

private int bankBal;

and that’s good, some data should be hidden from the rest of the program, Encapsulation. The question then is, how does the program use the data if it can’t find it? getters and setters…that’s their cue!

What these daring duo do is quite simple. The getter method gains access to the private variable with controlled rights, and as for the setter, its work is to set a new value to the variable that is from the get method.

Let’s make it a little visual…

//this is how a set method would look like
public void setbankBal(){
    setbankBal();
}

//as for get method, it comes with a return type
public int getbankBal(){
    return bankBal;
}

Use this two for sensiteve data in your program. It’s like magic, as always!

Challange:

Try and make a banking system that doesn’t show your balance, but can debit and credit your account.

Writing code is like making poetry, not writing, making. There is an art to it. This then means that you need the best tools to make the best symphony of syntaxes, but let’s not get carried away…first things first, you need a good editor.

An editor is a just a program where you can type out your code in an orderly manner. What then constitutes a good editor. Editors these days are custom built to the language you want to code on them. A good example would be the Eclipse editor, built only for writing java programs.

Get yourself a good set of editors, again, in reference to the language. Personally, I prefer Adobe’s Brackets for HTML/CSS and JavaScript, Netbeans for Java, Pycharm for Python. They also come with a handful of extensions like git for version control and Emmet.

Get editors that speed up your code for your benefit. Godspeed!

Making a website, Whoosh! It’s tedious stuff, isn’t it? All those lines of code, tell me about it eh. And then you veiw it on mobile and have to scroll miles away because it just doesn’t fit.

What if I told you that your struggle days are over? What if I told you that there was a solution to end the tiresome work that goes into floating that picture to left just right? Well yes, there is a solution. Frameworks.

Essentially, Frameworks are predefined lines of code that help you do the dirty work. They have code for styling, positioning and much more. The beauty of it is that the same code can be used infinte times. Thinkof it literally. Usually they will come with a CSS folder for web frameworks, all you have to do is place it in your folder structure and link it in your HTML files at the <head></head> section.

Therefore, if you want to escape billions of lines of code…use a framework. Code less, make more padawan!

In this day and age, people are still carrying their million dollar ideas in flash disks! Yes, I was as shocked as you are. Let’s shape up people, crawl out from that rock you’ve been living, and get some version control all up in yah!

Welcome then everyone to version control, which is exactly what it is, making versions of your project and having control over those versions. Take Github for example, which I happen to be very fond of, it takes multiple versions of your software and stores it on a server online. You can make as many versions as you please, change the project, add collaborators…in short maximum control. For those in the stone age, think of it as an unlimited flash disk online.

So, benefits. Multiple versions of a project, if something happens to your computer, you can easily retrieve your data, adding of collaborators without regard to distance…they are a well-full of benefits, and it makes project co-ordination so much easier.

I beg you fellow syntax-heads, come over to the light side. Have some version control…

Challenge:

Head over to Github and try to hack their “Hello world” repository. From then on, run away with version control!

Sections v Divs, the age old battle. I remember some time back while working on a collaboration project with one of my friends, I noticed that he had a bad case of the divitis. All his code was plastered with divs, what a site!(for me). I, on the other hand, stuck to a well balanced mixture of section tags and divs which enraged him from our numerous merge conflicts. So, what really is the difference?

It’s all in the semantics. This means that the use of either is defined by what kind of content you are displaying. It would look absurd to flood your code with divs, which happens in most cases. Use sections where you have a defined part of information and divs as a by-the-way chunk of information. The section tags seems more official, to me.

Always place your content on a webpage semantically, with relevance to the information you want to present in that section of the webpage, not according to the styling behind it. If, like me, you get to work with a person who has a bad case of divitis…help your fellow commrade, clean up his code and teach them a thing or two about semantics.

May the code be ever in your favour!

Hold on to your trousers, today I plan on being a little pedantic, but in retrospect…what is programming if not codes with an overload of pedantry.

Websites of this age have a couple of items tied to them. Typically, you would have your HTML pages, CSS files and javascript files. I assume you are conversant with what each of these are, but since we are being meticulous:

HTML - This is where your content goes, mainly text and images. CSS - This files style your content, give it color and beauty. Javascript(which has no relation to the JAVA programming language) - This gives your content some behavior and makes it dynamic, it sort of brings your site to life, if you could say so.

Back to my point, there is a convention folder and file structure that each website should adhere to so that referencing is easy and it is understandable to other developers.

I’ll make it a little visual for you

        index.html
        about.html
        *css>style.css
        *js>style.js
        *img>img1.jpg
             img2.jpg
             img3.jpg
             
        * denotes a directory

We have the parent folder that has the html files, the CSS, Javascript and images folders. Then each folder has the type of files that its name states. This might change, mainly in the case of a web app but we’ll get there young padawan.

I recommend you have a skeleton file structure somewhere in your computer which you just yank out every time you have a new html project. It might save you time.

Challenge:

A good example to look at would be this repository on github. Clone it and have a good look at it. After that, try and make your own with working links and a skeleton index.html. Aren’t rules meant to broken, so if you come up with a file structure that throws the one in business out of the water, please, spread the word!

Bugs! The bane to any programmer, they make us all shiver with fear brrr!. However, I see them as an initiation into jedihood. The more you overcome, the more robust you get. How then do you go around squashing those buggers?

Welcome then, to the Chrome Developer Tools. What this is in a nutshell is a debugging tool for HTML/CSS and JavaScript on the Chrome browser. Other browsers do come with developer tools, but let’s be real, chrome be da real MVP. I’m sure you are familiar with that overwhelming sensation when you type out code and nothing works, for the said languages, you can debbug on Chrome Dev Tools. It will show you where you went wrong. The beauty is that it comes with a console, for all you javascipt lovers out there,like me, so you can kind of dry run your code and if it works, transfer it to your editor.

Another beauty of this tool is that it comes with a pane to check how responsive your site is. This checks if your site scales on various devices from a ginormous Mac to a Nexus. That in itself is life-changing. This means you do not have to have a bunk full of computers of various sizes to check for responsiveness of your site.

I know, it is seems as something that decended from the above, but, in the right hands, it can be a very powerful tool. So, get the right hands.

May the code be ever in your favor.

Dimistifying Object Oriented Programming is not easy at first, but re-read this article a few times and you’ll rank up. I’m going to give you some insight into the four principles of Object Oriented Programming:

1. Encapsulation:

Encapsulation means that the internal representation of an object is generally hidden from view outside of the object’s definition. Typically, only the object’s own methods can directly inspect or manipulate its fields.

Encapsulation is the hiding of data implementation by restricting access to accessors and mutators.

An accessor is a method that is used to ask an object about itself. In OOP, these are usually in the form of properties, which have a get method, which is an accessor method. However, accessor methods are not restricted to properties and can be any public method that gives information about the state of the object.

A Mutator is public method that is used to modify the state of an object, while hiding the implementation of exactly how the data gets modified. It’s the set method that lets the caller modify the member data behind the scenes.

Hiding the internals of the object protects its integrity by preventing users from setting the internal data of the component into an invalid or inconsistent state. This type of data protection and implementation protection is called Encapsulation.

A benefit of encapsulation is that it can reduce system complexity.

2. Abstraction

Data abstraction and encapuslation are closely tied together, because a simple definition of data abstraction is the development of classes, objects, types in terms of their interfaces and functionality, instead of their implementation details. Abstraction denotes a model, a view, or some other focused representation for an actual item.

“An abstraction denotes the essential characteristics of an object that distinguish it from all other kinds of object and thus provide crisply defined conceptual boundaries, relative to the perspective of the viewer.” — G. Booch

In short, data abstraction is nothing more than the implementation of an object that contains the same essential properties and actions we can find in the original object we are representing.

3. Inheritance

Inheritance is a way to reuse code of existing objects, or to establish a subtype from an existing object, or both, depending upon programming language support. In classical inheritance where objects are defined by classes, classes can inherit attributes and behavior from pre-existing classes called base classes, superclasses, parent classes or ancestor classes. The resulting classes are known as derived classes, subclasses or child classes. The relationships of classes through inheritance gives rise to a hierarchy.

Subclasses and Superclasses A subclass is a modular, derivative class that inherits one or more properties from another class (called the superclass). The properties commonly include class data variables, properties, and methods or functions. The superclass establishes a common interface and foundational functionality, which specialized subclasses can inherit, modify, and supplement. The software inherited by a subclass is considered reused in the subclass. In some cases, a subclass may customize or redefine a method inherited from the superclass. A superclass method which can be redefined in this way is called a virtual method.

4. Polymorphism

Polymorphism means one name, many forms. Polymorphism manifests itself by having multiple methods all with the same name, but slightly different functionality.

There are 2 basic types of polymorphism. Overridding, also called run-time polymorphism. For method overloading, the compiler determines which method will be executed, and this decision is made when the code gets compiled. Overloading, which is referred to as compile-time polymorphism. Method will be used for method overriding is determined at runtime based on the dynamic type of an object.

If you can grasp these four principles, OOP can be much of a breeze for you. It might take more than one read, I encourage you to practically try it.

Challenge:

Remember our car object from my previous post? See if you can make a class Ford that inherits from the car class. Try to find out which key world you use to inherit.

Yup that’s the code calling to you!

Object Oriented Programming, what technological wizadry is this? Programming languages have evolved since they first came into light. They have moved from low level language, which were tediously written blocks of code in binary and assembly languages. Quite yobish…but stellar for that age. Then came the high level languages, the likes of C, COBOL, Ada and BASIC.

So, why should I take you on such a journey into history? I just want to show you where programming has come from. How people programmed in the past. in the 1960’s the concept of Object Oriented Programming was developed. As opposed to procedual programming, where you would right functions and modules for anything that would happen in your program, Object Oriented Programming took a different direction. You create an object, let’s take a car as our object, and create attributes and behavior for it.

Attributes would be such as color, drive train, make, year of manufacture and so forth. Behavior would be as stop, drive forward, reverse and start engine. Each instance of a car would have all these attributes, thus we do not have to code them for each instance of the car that we have. Easier right? Many object would build up a whole program.

The soul of Object Oriented Programming then is in fact the Object itself. Brain racking eh. Just remember…in functional programming, you have to code every single detail of your program, be it repetitive. Object Oriented programming, well, create objects that have behavior and attributes and make instances of that object.

Try to grasp the object concept as much as you can, and as always…live long, and prosper!

So, you want to be a programmer? I’ll give you are stepping stone chest of secrets. First of all, identify a rudimentary programming language that you can learn the fundamentals. I would recommend JavaScript. Get yourself set up with a good editor like brackets, sublime text or notepad++. I would also recommend working on a UNIX based operating system, it’s far much easier to use.

Learning how to program can be very intimidating and it’s a norm for programmers to flaunt their vast number of programming languages…fear not young padawan! Chop down the work into small blocks and absorb them each at ago and you’ll get to have some bragging rights soon. Another nugget to programming would be to Do It Yourself. You have to try and fail, then try again, like riding a bike. Last thing I’ll leave you with, get yourself as many resources for each programming language as you can, especially the documentation, it’s a gold mine to the language.

Challenge yourself:

Go for the famous Hello World, make sure you can get a user’s name like so:

        hello <user's name>,
        Welcome to Hello, World!

Well, go forth and code. May the force be with you!