A quick walkthrough of API integration and how it differs from Vanilla JavaScript

API Access

Like any Application Programming Interface (API), the objective is essentially for two interfaces to talk to each other (yours and that of the API). This can often be extremely useful when wanting to use data from another service or site on your page.

As for our case, we are going to access the openweather.org site and access their API.

After you have Signed up (at the top), you will need to go to the API tab, and go inside of there, and get the API…

There is much we can learn from helping others

• Spoiler Alert: I write this not as a means of self-promotion, but only as a way to share what incredible lessons that can be taken from those that are in the most horrible of conditions.

I took on the challenge of teaching (GED preparation and CV/portfolio preparation) refugees because like most people, I felt that there is something wrong with the world. What started as a dull ache a couple of years ago, slowly turned into an absolute conviction that I had to do something. …

A lesson in DOM Manipulation, DOM Traversion, and making bigger problems smaller problems

A person that I deeply admire recently posted on their Facebook about how parents shouldn’t fear their kids using technology. Instead, the approach offered in the piece was to involve ourselves in the games/activities that our children were playing.

Make sense, right?

Perhaps taking this advice a bit too far, what I have done instead is create a game for my son: a word guessing game that contains phrases that I frequently say to him. Here is a general walkthrough:

So what I wanted to do is…

Conventional wisdom has always been that getting a college degree was a safe investment. Enroll in a 4-year degree; take the classes; study for exams; and voila, you’ve got your passport to the middle class — all the TVs and Iphones and underwhelming restaurants that you could possibly want. And to be fair, there is at least some merit in this line of thought. In the particular piece that I cite here, a college graduate can expect to earn close to $1 million dollars more in their working life than a non-college graduate. This kind of personal empowerment is something…

Step-by-step instructions

Scalable Vector Graphics (SVG) are an XML based markup that can contain two-dimensional vectors. The vectors can be simple shapes, paths, or well just about anything you can do in Illustrator. It’s an image format that has more in common with a web page that it does with a JPEG. SVG is much more powerful than other image formats we can use on the web as we can manipulate them with code (either in our text editor or with CSS / JS).

The next question we often ask, however , is how do we move beyond just styling…

An easy reference for setting up basic user interaction on click events

If you are programming in JavaScript for any length of time, you will most certainly want to add elements to the DOM on click events. For me, this is something that most apps that I create requires, but I end up having to refer to the documentation on a constant basis. So to simplify things, I wanted to create a useful reminder that would help me to keep that information rolling around in my head.

Adding to the DOM

In almost all use cases, I want to create elements that will display…

Thinking through a common problem

As you can see in the above functionality, what I have created in a set of stylized images that can be sorted via an input/search box. Getting this functionality together took a little bit of time, but with some basic problem solving skills, I was able to get through it. Here’s how:

1. Write down what I wanted to do in English first.

styling an element based on what the class or ID name starts with

CSS code can be very repetitive if you let it. Often, however, it is the case when you want to style multiple elements but because conventional styling won’t allow it, you’re faced with a situation like this:

In this case, the obvious solution would then to separate all the class names and apply the said styling onto each individual element. Something like this is what you would expect from a newb: