Let us dive a little deeper into promises and asynchronous programming. If you already understand how asynchronous programming works in javascript, you can jump to the promises section. However if you want to under the history behind why promises exist, then read on. Javascript Promises are a much needed feature to have. They address a problem known as callback hell, which one is bound to face if they do any kind of asynchronous programming. As a web developer, this is something you cannot run away from as the browsers internal operations are asynchronous. Asynchronous here means more than one thing is happening at a time within a browsers engine. You might also hear the term synchronous in a similar manner. It means one thing happening at a time. For example, you may have heard that javascript is synchronous. This means that when executing javascript you cannot execute multiple statements at a time. Every statement that begins to execute MUST complete before another is run. This is why you hear that javascript is single threaded. Code execution is run line by line.

Other languages like Java have the ability to run multiple commands at a same time by delegating them to a different memory on the system (known as multi threading). By default this asynchronous functionality comes out of the box with the language. So how does javascript do asynchronous programming? Let me try clarify that here. You see, within a browser, many things are happening. There are many engines running simultaneously within it. The javascript engine is one of them. Another might be the rendering engine, which displays HTML document and images. The browser also has networking capabilities. So when you decide to make HTTP requests, it uses this component found in the browser to make that request. Check out how the browser works here. Ok, so now u see that everything going in the browser is asynchronous. But within the javascript engine itself, everything is synchronous. Read More

Ajax Demystified

I don’t know about you, but the word Ajax used to scare me. As a frontend developer, it is nearly impossible avoiding the use of Ajax in your web projects, especially if your application is of dynamic nature. So i wanted to write a post that would be a go-to resource for everything Ajax you might encounter. Well… maybe everything is a strong word. But i promise that by the time you are done with this tutorial, you will have victory over the subject. This post will start from totally beginner, all the way to advanced. If you feel i have left anything out, kindly comment or point me in a right direction, so i can also learn. I dont write so i can teach, i write so i can also learn! Here i will share everything i know about using Ajax, as it has greatly helped me in my own personal and professional work. Like all my posts, this one will be a long one. I have provide links below so you can skip to any section in this post. I will also be updating the sections with time, so do come back if the section you are interested in is not ready. Below is a link to the GIT repo where you can download the sample files. Ready?


Content List:

  1. What is Ajax?
  2. Loading Text or HTML with jQuery
  3. Loading and reading JSON Data with jQuery
  4. Taking control with $.ajax()
  5. Ajax with third party API’s
  6. JSONP
  7. Ajax without jQuery ( Native Ajax )
  8. Working with Ajax Promises

Read More

Prototype and Prototypal Inheritance

In my previous post, i mentioned that ALL javascript objects have a prototype property. This prototype property is only a reference to another object (it does not live on the object). What happens is, if you ask javascript for a property on an object and it does not find it, the prototype object will be searched for that property. If it exists, that value will get returned. If you are familiar with the concept of inheritance, then this is how it works in javascript. Meaning an object in javascript inherits from its prototype (or prototype chain). This is why inheritance in javascript is called prototypal inheritance. Inheritance has a very simple meaning, it means one object gets access to the properties and methods of another object. In javascript that would be its prototype object. 

Let us continue using our book object to demonstrate this.

var book = {};

Since you now know how to add properties and methods to objects, lets add some.

var book = {
  title : 'Book Name',
  author: 'Book Author',
  showBookInfo: function(){
    return this.title + ' by ' + this.author;

Read More

How to create a WordPress Plugin (Ajax Contact Form)

WordPress is a very popular CMS (Content Management System) use to create websites. It initially started out as a blogging platform but has evolved over the years. According to built with.com, WordPress has 50% of the entire CMS market. Personally, I am a Joomla fan, but I have come to appreciate WordPress and how easy it is, and specifically its support for PHP7 and HHVM, which Joomla lacks at the moment.

To create a WordPress plugin, you must have a basic understanding of PHP. PHP is very similar to other languages such as C++ and JAVA, so knowledge of those languages can be helpful too.

In this tutorial, we will create a WordPress contact form plugin that submits using AJAX and has Google Recaptcha2 to prevent spamming.

Read More

Javascript Objects

One can think of a javascript objects as containers with collections of data in it. Each data has a property name or key, with an assigned value (key-value pairs).  These values can be of primitive types, functions, objects, etc. When the value of a pair is a function, we call this a method. Behind the scenes, when an object is created and properties and values/methods are added to it, the object stores references to these for later access. This means that objects can store references to other objects.

There are a few ways we can create objects in javascript. We can use object literals, constructor functions, the Object.create method and we can use ES6 classes to create objects as well. Read More

Gulp – Getting Started With Javascript Build Automation

Gulp helps us automate tasks within your javascript projects. Why would we want to do this? Well it helps us to be more productive. Not only do frontend developers have to sit down and write code, there is a ton of other work we have to do. Things like minification, contatentation, writing vendor prefixes, using LESS to compile CSS, optimizing third party code like jQuery, Angular etc, injecting files into HTML, unit testing, caching templates, file revisions and versioning, code analysis, and the list goes on and on. As you can already tell, frontend development is no joke when done right. And here is where Gulp comes in. You can delegate these tasks to gulp. By allowing you to provide files to it, it will alter them to a destination by streaming them through its pipeline. For example, want to minify a javascript file? Send it through the pipeline and out comes a file that is minimized! File goes in, and comes out new (like magic). The typical build pipeline can be described as follows.

Develop > Code Analysis > Testing > Build > Deploy

With Gulp, we can just type in one simple command and it will build and deploy our project! Read More

Getting Started With Webpack

On a basic level, webpack is a build tool.  A build can be described as converting source code files into standalone artifacts that can be run on a computer. What webpack does, is bundle modules used within a frontend application into a single file. So what does this have to do with javascript? When working with javascript, there are certain tasks that you do on a regular basis (especially if you are building a large scale application). Things like file concatenating and minification of javascript and CSS files, running tests, linting etc. The reasons why we do these is so our javascript applications are performant. By having a build step we can solve issues like multiple web requests, code file size, file order dependencies, code syntax checking(linting) and many more. Having a build step mitigates these problems related to development.

Webpack is just like any task runner(like gulp and grunt). Setting up a task runner in your project will enable you to do things like watching file changes, concatenating/minifying files, prefixing files for different browsers, linting Javascript, and module loader order. What makes webpack special from other task runners is that has something called loaders. Loaders can transform files from a different language like, CoffeeScript to JavaScript, or inline images as data URLs. Loaders even allow you to do things like require() css files right in your JavaScript( one less http request )!  Read More

Bower Fundamentals

As a frontend developer, there is one thing you cannot escape from. That is integrating third party libraries into your project. Need to use jQuery, Underscore, Bootstrap? You have to download their libraries. Our applications are a full of these imported libraries. They help us to get our day to day tasks done quickly and effectively. 

What Bower does is help us quickly get those libraries into our projects, which drastically reduces time needed to go to third party sites to download them (involves many manual steps). Using the command line, we can delegate that tasks to bower and it will get all the files we need into our project, ready to be used.  Read More