Javascript Queues

In the previous chapter, we learned about the Stack data structure. We will be talking about javascript queues in this post. The difference between a stack and a queue is the way items are added and removed. While items in a stack are LIFO collections, items in a queue are FIFO (First In First Out). A queue returns items in the same order it way added. The first to get in, is the first out! Lets see how this relates to the real world. Think of a grocery store or the bank cashier for example. The people who join the line, checkout out in the order they got in. If you are in line first, you get served first. If you are last in line, you are served last. Anyone who enters the bank goes to the back of the line (in queue). The same applies when you tell a printer to print a document. The items to print are queued, and are printed on a first come first serve bases. In software development, queues are used in multi threading and concurrency situations, where tasks that are waiting to be processed, are executed in an order of FIFO.   Read More

Javascript Stacks

In previous posts we learned what data structures are and their importance when engineering software applications. In this post, we will learn a new data structure called a Stack, and find out what benefits it gives us when storing and organizing data. What is a stack? Well, the meaning is in the idea of the word. Think of a stack of books or papers in a bookstore, or a stack of dirty plates in kitchen. The idea is we have a container (our stack) in which things (data) are stacked on top of another. We are trying to organize data in a stacking order, hence the name. When we add an item, it is added to the top of the stack. And when we remove, we also remove from the top. So think of javascript stacks as a collection in which data is added or removed in a Last In First Out (LIFO) out manner. Lets take a look at a simple diagram.  Read More

How AEM Works!

Adobe Experience Manager (AEM) is massive. There’s a lot of confusion when most developers and content editors come to this proprietary content management system. There are new terminology, processes and tools that one must understand. It can be overwhelming. Though it is impossible to write everything about AEM architecture in a single post, I wanted to write a post detailing some fundamentals for developers, but could still be read by anyone already working in AEM (using a language everyone can understand). So this is not a deep dive type of post. Understanding how AEM works will help you as a developer or author have a better insight into issues you may be having. My aim in the post is to give you the BIG picture. This is AEM architecture fundamentals.

AEM is a cloud based client-server system for building enterprise grade websites and applications. A copy of AEM running on a server is what you would normally hear of being referred to as an instance. The installation of AEM usually involve two instances running on separate machines on a production site. These is the author and the publish instances. Most of you know what the author instance is. This where you edit content. By editing content, i mean this is where you create, upload and management content on your website. Pretty much any website administration is done on the author instance (the name make sense since you are actually authoring content). Typically a content editor logs into AEM, edits or creates a page and either put their work in some kind of workflow for it to be approved, or perhaps they just publish the page when that content is ready (which goes live right away). What happens in the background, most of us don’t know. Here is where i want to shed a little light on because i feel knowing it gives you better insight into issues that might come up. Read More

Circular Linked List

In the previous post on singly and doubly linked lists, recall that the collections last nodes next pointers were always NULL. This is because they had nothing to point to. But what if this is not what we wanted? What if when we get to the last node, we wanted to point the next pointer back to the head node, like a photo gallery application (when we get to the last picture, the next picture should be the first). This is where circular linked lists come from (they allow us to rotate through our collection). This means that circular linked lists have no end. One must be careful if they are going to iterate through the collection, or you could end up in an infinite loop.

So in a circular linked list, there are no nodes with a NULL pointer. For eg, in a case where there is only one node (the head node), the next pointer points back to the itself. Remember in previous posts that i said when a collection is empty and you add a new node, their next and previous pointers are NULL? Well in this type of linked list, they point back to itself, well until we change its pointers.

What about the previous node of the head? Remember it was NULL in previous posts? There is another type of linked list called doubly circular linked list (i know, the names are getting ridiculous). In a doubly circular linked list, the previous pointer of the head points to the tail node. Lets look at a diagram. Read More

Doubly Linked List

In the previous post, we talked about what data structures are. We learned that a linked list is a type of data structure, and we learned why they were important. We particularly looked at singly linked lists as a type of linked list, and we saw some of its usage and operations. Even though singly linked lists have their use in the real world, chances are you will find doubly linked lists easier to implement, more practical and have more real world use. One issue you might have noticed with singly linked lists is that it only has a reference to the next node (or next pointer). This makes it harder to find what the previous node is. We had to write some pretty length code just to find the previous node. The doubly linked list is a type of linked list that has a next and previous properties on the node (pointers), making it very easy to enumerate the node collections in any direction (forwards or backwards). This means we can navigate in both directions. Let us start from the top. Imagine you have a node collection with one node ( like we did from the previous post) Read More

Singly Linked List

This is going to be the first post in a series called “javascript data structures and algorithms”. I plan to cover most of the algorithms found in computer science classes, using javascript as a language of choice. This is no easy feat to take on, but it is a goal i have set. It may take a while to complete as i have a full time job, but i will do my best. I do not consider myself an expert on the subject matter, so kindly advise if you ever think something can be coded in a much more efficient manner. The only reason i write this post, like all other posts, is to get a better understanding of the subject matter. We start our journey with linked lists, particularly javascript singly linked list. Read More

Call, Apply and Bind

Call, Apply and Bind seems to come across as mysterious for many javascript developers. I know it did for me in my early years. Even till today, i come across senior developers who (for lack of a better understanding) try to avoid using these methods all together. Call, Apply and Bind, have everything to do with the this keyword in javascript. Yet another confusing topic in javascript. Since this post is not about understanding the this keyword, i will assume that you understand the idea of this in javascript (Or maybe i should write a post about this in the future). In a nutshell, this points to either the global object OR the object that contains the function that is called(this always refers to an object). this can be unpredictable, unless you truly understand it. If we want to control what the this points to in javascript, Call, Apply and Bind can be shining stars.

Read More

Javascript Promises

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 bit ambitious! 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 it out, so i can also learn or perhaps update this post. 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 provided links below so you can skip to any section on this topic. I will also be updating this post with time, so do come back if a section you are interested in is not ready or not found. Below is a link to the GIT repo where you can download the sample files for this post. Ready?

https://github.com/scriptonian/ajax-demystified.git

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

Content List

  1. Introduction
  2. Function Constructors and Prototypes
  3. Prototype Properties
  4. Changing a functions prototype
  5. Multiple Inheritance
  6. Using Classes to create the prototype chain
  7. Extending built-in Objects

Introduction

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