DEV Community: Taiwo Iвι∂αpσ-Oвε

What’s New in ES6â€Š–â€ŠPartÂ 3

Taiwo Iвι∂αpσ-Oвε — Wed, 11 Oct 2017 09:47:56 +0000

This is the final part of the What’s New in ES6 series. Been awesome right?

Arrow Functions

Arrow functions are simply another way to writing functions that the regular way we all know. There are 2 main benefits of using arrow functions.

One is that they help you write shorter syntaxes and saves you a few key strokes.

The second and more important reason is that they allow you to bind “this lexically. In the past, you probably had to rename “this to something else or store it in a “this variable but with ES6, this has been taken care of nicely.
Let us take a look an example.

Consider the snippet below.

https://cdn-images-1.medium.com/max/800/1*p8-rSt228dqo6F-28xle_w.png

Output:

https://cdn-images-1.medium.com/max/800/1*9QYQJT83cypgskd9PE-QSw.png

We are getting an error because of line 9. It cannot recognize the “this keyword used there even though we have it defined in line 4. The only way to fix this would be to create a variable before the return statement as shown below.

https://cdn-images-1.medium.com/max/800/1*Nun-kB-lq31CxENtPgqCVA.png

Output:

https://cdn-images-1.medium.com/max/800/1*ZAmqZt7aUSXU1umDPEu0nQ.png

We can now see that the error message did not appear again as before. Am I the only one who thinks this is pretty way too many lines of code? Let us see how ES6 handles this.

https://cdn-images-1.medium.com/max/800/1*UqMPPC7lj4s8kVdWE6RkzQ.png

Output:

https://cdn-images-1.medium.com/max/800/1*ZAmqZt7aUSXU1umDPEu0nQ.png

We can see that with lesser lines of code, we were still able to get the same result as before.

Let us take a look at another example of the syntax. Firstly, we are going to write it in our regular JavaScript then we are going to see the ES6 version.

https://cdn-images-1.medium.com/max/800/1*U72ZJrweLfNiTtrCeufBrw.png

We should all know the output of this code is going to be 4. Now let us take a look at the ES6 version and compare which is faster and easier to work with.

https://cdn-images-1.medium.com/max/800/1*YJtXVTiP2jCCAKrjRBoaUg.png

What exactly did we change? First, we removed the function keyword and replace it with the equal to and greater than symbol (regarded as the arrow function). Note: If we were having just a single line declaration in the function, then we would have also removed the curly braces holding the function. But since we had 3 lines, we made use of the curly braces.

Promises.

Now, we would be looking at promises. What exactly are promises?

Promise object is used for deferred and asynchronous computation. That sounded big, right? Yeah, I guessed as much.

What am trying to say is promise object represents an operation that is not complete yet but it is expected to be in the future. That sounds better.

Let us take a look at an example.

https://cdn-images-1.medium.com/max/800/1*O9Ctxtr0BopYjvYkQBFoMg.png

This is just a basic one showing how promise works. This outputs 7 to the console after 3 seconds. This code might not really be helpful but it is just to show you how it works. Let us do something more useful. How about we use it to fetch data from an API?

https://cdn-images-1.medium.com/max/800/1*1MYpam4YClXkdhQRM2ABzw.png

Woops.. That is quite some lines of code. Note: We are making use of a dummy rest API here.

Output:

https://cdn-images-1.medium.com/max/800/1*78JeqtIpFh3py9PtfIGoQw.png

The result we get is an array of objects showing a list of todos.

Now, rather than logging our result to the console, let us print it out on our web page. We are going to comment out our console statement and print out the output.

https://cdn-images-1.medium.com/max/800/1*a24E17yaTouimEiw7jh5Jw.png

And in our HTML page, we are going to create an unordered list with the id of users.

https://cdn-images-1.medium.com/max/800/1*Ig122eGa30shA7Dq0TaaIA.png

Output:

https://cdn-images-1.medium.com/max/800/1*NeN0CBzp3OiZ8iz8yCi9Jg.png

Awesome. We made use of several components of the ES6 package ranging from the template literals, to the for-of-loop, to promises, to the let declaration. Great work.

Generators.

Generators in ES6 are basically functions that can be passed and then resumed as many times as we like. At each pause time, it can yield or return a value. Creating a generator is similar to creating a generator.

The way to turn a function into a generator is by putting an asterisk just before the function name or after the function keyword. Let us take a look at how that works.

https://cdn-images-1.medium.com/max/800/1*AubSDcsGsAhjrexpBjzLfg.png

Let us take a look at line 10. If we tried calling gl function without storing it an a variable, we would not get the result we wanted. Let us see the output.

Output:

https://cdn-images-1.medium.com/max/800/1*xqiHnJ37k1IeM_Ajzwo8qQ.png

Notice the object that was created? It has a done property that returns a Boolean to us telling us if the yield is complete. Because we have 2 yields, it gives us the false state. We can also just print out the value rather than the object which we got by usingÂ .value just after the next method. Let us try to fix the output so we can make the done state to be true.

https://cdn-images-1.medium.com/max/800/1*6ja43ZFDWWNPCpgJQsQziQ.png

We can see that we had to call our console.log severally so that our done state can be changed. We also notice how we can use theÂ .value to get the value stored in the object. The return keyword was also used in our generator function. Let us take a look at our output.

Output:

https://cdn-images-1.medium.com/max/800/1*CERczbD1cem_zDtZ5mVhNg.png

Rather than having to use the console.log severally and getting the return statement printed out, we can make use of an iterator to handle this. Let us take a look at how we can do that using the for-of-loop.

https://cdn-images-1.medium.com/max/800/1*Y-Sz2m3baPs6rCZq4ME5pg.png

Output:

https://cdn-images-1.medium.com/max/800/1*lRr66OGBCv71uf2egFEX2Q.png

Tada. We can now see that our return statement is not printed out, and we did not have to write as many console.log statements as we did before.

There are quite a lot of things that can be done with generators in ES6.

Finally, we have come to the end of this series on ES6.Â

Gear up for more.
Thanks for reading.

What’s New in ES6â€Š–â€ŠPartÂ 2

Taiwo Iвι∂αpσ-Oвε — Wed, 04 Oct 2017 09:14:31 +0000

We are kicking off from where we left off in Part 1 of the new features of ES6.
String and Number Methods
There are quite a few new features of strings and string methods available in ES6. These are used to target expressions inside of a string. We are going to be dealing with the following:

startsWith()

endsWith()

includes()

Let us have an example of how it works.

https://cdn-images-1.medium.com/max/800/1*Ks7GD_2-GsMPzohZEhpxRQ.png

In the snippet above, we have made use of one of the three new methods ES6 providesâ€Š–â€ŠstartsWith(). What this method does is that it checks if the string value supplied starts with a matching string which is usually a string inside of the brackets. So, we are checking if the fullString variable starts with Hello. This method returns a Boolean so if it is the same, it returns true else, returns false.

Note: It is case sensitive. This means that â€˜hello’ is different from â€˜Hello’.

https://cdn-images-1.medium.com/max/800/1*jGQlSk6LLVZQxbki1f3xEQ.png

In the second example above, we can see that while using the second methodâ€Š–â€ŠendsWith(), we are checking if the value of the string ends with a particle text or value. You should already know that even if our argument was Games, it returned false. This is because like I said earlier, they are case sensitive so we expect our result to be false.

https://cdn-images-1.medium.com/max/800/1*-kk9g6F6_TUT8xYD6W-Cmw.png

In the third example above, we can see that while using the third methodâ€Š–â€Šincludes(), we are checking if the value of the string passed is in the main string at any position. Since our string William can be found in the fullString, we get a true value returned.
We can also do some number manipulations in ES6 such as binary, octal etc.

https://cdn-images-1.medium.com/max/800/1*5YyiSyH98PwWN-pGSSyGWg.png

Output:

https://cdn-images-1.medium.com/max/800/1*VcdZfXuLcSS3iWu5hXScVw.png

Let us take a look at Number functions.

https://cdn-images-1.medium.com/max/800/1*pS6UKbhJ7AaORVz9UKu29Q.png

Output:

https://cdn-images-1.medium.com/max/800/1*7azhYk5O0PfQBOqdFJw-rg.png

There are quite some more number methods which you could check up on your own and practice more.

Default Parameters and Spread Operators.

Default parameters in ES6 works pretty much the same way as in PHP and all. When we want a default value to be used say when we run a function or something, all we have to do is assign it in the parameter where we passed it in. Here is a look at an example.

https://cdn-images-1.medium.com/max/800/1*YZH6F3uzTasuvI1Q41RHFw.png

Output:

https://cdn-images-1.medium.com/max/800/1*ASo9LwwiLDIoXvW1CoUccA.png

Rather than having an undefined as the output, we can set it to hold or have a default parameter which makes it look nicer rather than the default undefined we get. Here is a look at that.

https://cdn-images-1.medium.com/max/800/1*fk3dPRjCnR4ErD-1HCfXew.png

Output:

https://cdn-images-1.medium.com/max/800/1*rrq7tHhaYvyNNQR4xHVvow.png

All we did to get that output was to set a default parameter inside of our function. If we were to that from ES5, we would probably have something like this.

https://cdn-images-1.medium.com/max/800/1*uhMhQDaTzwRSXyhbuN2Teg.png

You can confirm that with ES6, it is pretty much lesser code to write.

Let us take a look at the Spread Operators.

The spread operator is represented with three dots (…) and it is used to allow an expression to be expanded in places where multiple arguments are expected. Let us take a quick look at that. In ES5, if we want to have an array passed in as a parameter to the function, we would be making use of the apply method as shown below.

https://cdn-images-1.medium.com/max/800/1*cqecDH6L_lo8hPHk0aWPLw.png

However, in ES6, we do not need to make use of the apply method. All we need is to make use of the three dots as shown below.

https://cdn-images-1.medium.com/max/800/1*WctNS0f9H8AMOeZcmF9T8w.png

This gives the same output as the earlier one but with much lesser code to write. Nice yeah?

Let us look at having two variables and using our arguments passed in.

https://cdn-images-1.medium.com/max/800/1*Gk-lZQCRb1ugP0ArB0180w.png

Output:

https://cdn-images-1.medium.com/max/800/1*Tfxkb-Hdk8m_HyILR3GvmQ.png

Enjoying the new features I guess.

Map and Set Data Structure.

The set objects allow us to store unique values of any type. Can be primitive values or object references.

Let us take a look at how this works.

https://cdn-images-1.medium.com/max/800/1*Ynb_uz1bQGCl119jKIbqIw.png

Output:

https://cdn-images-1.medium.com/max/800/1*G07ihQdO21RyiWcKA2677g.png

Consider the snippet above. We created an array called myArr. We then created an object of the Set method and passed in the array we created and finally logged the object to the console. We can see that in the output section, the set even tells us what kind of element is contained within which happens to be the array we passed in. Let us try to do some manipulation to the Set object created.

https://cdn-images-1.medium.com/max/800/1*sV8x_cmMTGOtZIvPCcNRLA.png

Output:

https://cdn-images-1.medium.com/max/800/1*Mgs4xAn5SfBn5jeUcvqeoA.png

https://cdn-images-1.medium.com/max/800/1*fy7m55ouD_OKgPuZyfuDIA.png

If we take a good look at what we tried to achieve, we added a string value to the set and also an object to the set. We also removed an element from the set. You can see that from the two outputs generated above, we see what type of value is stored in the setâ€Š–â€ŠArray, String and Object.

You can also tryout methods like this on your own:

mySet.clear(); // This clears the entire set
mySet.size; // This returns the size of the set object.

There are other methods you can check up to familiarize yourself with set.
Let us try to perform looping with the set object.

https://cdn-images-1.medium.com/max/800/1*ihqm3Jv2VZkTkeM8URzWqQ.png

Output:

https://cdn-images-1.medium.com/max/800/1*DOA57YuNbl6zm6OvDUOItQ.png

We can see that in our output, our set object looped through each element in the set list and logged the result to our console.

Let us dive into Maps.

Maps are key value pairs as opposed to Set which are individual values. Let us take a look at an example.

https://cdn-images-1.medium.com/max/800/1*h7EWugxH2W1TJrh9kU48nA.png

Output:

https://cdn-images-1.medium.com/max/800/1*xpzbKtCXBE3WffABaUlPCw.png

In the example above, we created a simple map object with an array and each key (a1, b1) having its own value (Hello, How are you) respectively. We can also add elements or other key value pairs to the object. Let us take a look at that.

https://cdn-images-1.medium.com/max/800/1*1mdOEyyDaabjs0nrfs3RFw.png

Output:

https://cdn-images-1.medium.com/max/800/1*4Vq9cT0OFcob0l5PdHSN8g.png

There are also other methods that can be used with the map object.

Some include: Clear, delete, forEach, has, size etc.

To delete, we make use of the key. Let us take a look at that.

https://cdn-images-1.medium.com/max/800/1*J3OORVaGnsntQfkdOzQ_sg.png

Output:

https://cdn-images-1.medium.com/max/800/1*xpzbKtCXBE3WffABaUlPCw.png

In addition to Set and Map, we have WeakSet and WeakMap. These have to do with objects. Let us take a look at how that works.

https://cdn-images-1.medium.com/max/800/1*mt0Xlk6CWwHHtba9uzFP_w.png

Output:

https://cdn-images-1.medium.com/max/800/1*Qyr1fxxT8dQ79AdDu1w29A.png

We created an object of Weakset and called it carWeakSet. We then created an object called firstCar with its properties been make and model. We then used the add method to add the firstCar object to the carWeakSet object as seen above.

Let us try an example with the WeakMap.

https://cdn-images-1.medium.com/max/800/1*0y0zXb1G29YQQmodObY0CQ.png

Output:

https://cdn-images-1.medium.com/max/800/1*9oOTaXuf17E8aZjqzPtFBA.png

We can see that the key created also has a value assigned to it. The method from the Set and Map can be applied to the WeakSet and WeakMap respectively.

Stay tuned for the final part on the new features of ES6.

Thanks for reading.

What's New in ES6 Part 1

Taiwo Iвι∂αpσ-Oвε — Thu, 28 Sep 2017 14:42:20 +0000

Okay so we have been hearing about ES6 for a while now and you might have been wondering what this is again.. Well don’t be scared. Its still the same JavaScript you know but just with some new features to make you write lesser codes. Awesome right?
Without wasting too much time, we are going to see what those new features are. The new features would be talked about in three parts. This is going to be part one.

Let and Const Declaration

These allows us to declare variables rather than the conventional “var keyword. The “let actually replaces the “var while “const is a new type of declaration. The “let allows us to have block level scopes meaning that if we declare a “let variable in the global scope and we use that same variable in a loop or an if statement, it’s going to be completely different and be on its own scope which has kind of been a pain in the ass for some developers. “const is just a declaration for constant values i.e values that are not going to change at any time.
Let’s take a look at how “var and “let differs.

Output:

Why is it so?

At the first initialization, “a is 10. When the if condition is met, for the first console.log, it takes the value of the local variable thereby outputting 50 which is correct but for the second console.log, even though a new variable a was created in the local scope of the conditional, it changes the value of the variable in the global scope thereby changing it from 10 to 50 which is probably not the output we were expecting. Let us take a look at how “let is going to handle this.

Output:

Why is it so?

At the first initialization, “a is 10. When the if condition is met, for the first console.log, it takes the value of the local scope variable thereby outputting 50 which is correct. Because we are making use of the “let”, it does not allow block scope to over right the global scope so in this case, once the conditional statement is complete, the local scope is done and once we try to do the second console.log, it takes the value of the variable in the global scope which is exactly what we wanted.
Let us check out the “let“ and “var in a loop.

Output:

Take a look at the snippet above, if we comment out the second console.log, our output stops at 9, but with the second console.log, the output goes to 10. This is because the i variable has affected the definition outside the scope thereby allowing the second console.log to go inside the loop again which is not what we want. Take a look at what “let does instead.

Output:

If you consider the output above, you would notice that the local scope for the first console.log remains intact and when the second console.log tries to access that same variable that was defined in the loop (the block declaration), an error message was received saying variable “i was not defined which is exactly what should happen.

Const Declaration.

The “const declaration is used to simply assign a constant value to a variable. When this has been assigned, the values contained cannot be changed. Let us take a look at how this works.

Output:

We have declared our brand to be a constant variable and we have used the push method to assign values to our array. Now let us try to change the brand declaration from an array.

Output:

We can see that we get an error anytime we try to change the declaration type of a “const variable.
That is basically the usefulness of using “let and “const declarations. is works.

Classes and Inheritance.

Classes are now available in plain old JavaScript so we don’t need typescript or anything fancy like that. It is pretty similar to PHP or Java classes or any OOP language that makes use of classes. Let us jump in and do something with classes and inheritance.

The above snippet is a basic creation of a class and a constructor.
Constructors are methods that would run when the class is instantiated or when the object is created. They can take in parameters. In this case, the parameters are username, email and password.

In line 47 to 49, what we did was to take in the values passed (parameters) and assign them to properties of the class.

Next up is to create a method in our class. A method is basically a function that belongs to a class.

Output:

Our register method was created in line 51. All we did was in the console was to take the property value and concatenate it with another string and print out the value when the function is called upon. Line 55 creates an object of the User class with some default arguments been passed in.

In line 57, we then call the function and we can see the output just as expected. In the register method, you can pass in other property values from the class to see the output on your own.

We can also have what we call static methods. To do this, all we have to do is use the keyword “static”.

You can use some methods statically and some you cannot. For instance. In the example above, the register method cannot be used as a static method because you need to instantiate an object in order to do it or call it, but in the case of the numberOfUsers method, it is going to be the same no matter what.

All it has to do is echo out the number of users. For the static method, they do not need to be instantiated. So, to call them, all you have to do is shown below in line 60 above.

Output:

We can make use of inheritance too in JavaScript. Making use of the same example above, let us create a Member class that inherits the properties of the User class and then has its own extra parameters.

In the snippet above, we created a Member call and extended the User class meaning we are taking the features of the User class and adding them to the Member class even though the Member class would have its own extra parameter (bouquetType).

In line 64, rather than having to use the “this keyword like we used in the User class to add the properties, we can make use of the super method. What this does is to take the properties of the super class (User) and assign them to the new Member class. Line 65 helps to add a new property to the Member class.

We now want to try and get items from the new Member class.

Line 67 is the method we are using to get items from the class. This is similar to the register method we explained earlier.

In line 71, we created an object of chris from the Member class. In line 72, we are calling a method (register) that is not in the class Member. This is still going to work perfectly because we are inheriting all the properties of the User class so it is possible for us to still have access to the methods that were defined in the User class.

The final line is the method call for the getBouquet method we defined.

Output:

So that is basically how classes and inheritance can be used in ES6.

Template Literals/Strings

Template literals is somewhat easy to grasp and its really helpful especially if you are not a fan of concatenating strings to numbers, variables etc.

We are going to do a little HTML here to work with template literals. Take a look at the HTML snippet below. It’s pretty just basic.

Take a look at line 10. We have an empty div with an id of template. That is where we are going to populate our content from the JavaScript side. Let us write out our JavaScript now.

Taking a good look at the code above, you would notice that we have 2 sets of quotes forming a single string to be stored in the template variable. The text in the h2 tag could be a variable and also the text contained in the p tag. In Plain JavaScript or ES5, for us to be able to merge the both of them into one single variable, we would have to make use of the plus (+) sign to concatenate them together. If we were to have a very long item to join, then it might begin to look really buzzy and all which might not look nice. However, with template literals in ES6, it makes it so easy and simple to do. Look at the snippet below to compare with the one above with both giving the same output.

Notice the simplicity of the code and how easy it is to read the code. We have eliminated the single quotes starting each line of the string and also the plus (+) symbol and replaced the entire string value with a back tick. The back tick is the button just to the left of button 1 on the keyboard. Let us do another example where we want to bind data. Say we want to store some content in a variable, then add the values we stored in the variable to the string. In our normal JavaScript, here is how we would do something like that.

The above snippet is just a basic example so you might not really feel the benefit of using template literals but when you begin to have really long lines of strings to concatenate, then the work comes out. Notice on line 9, we had to make use of 3 plus sign, several single quotes and all. There is a possibility that when the strings get really long, you might omit one or thereabout. Writing the above with template literals is way easier and not likely to run into errors that easy. Let us take a look at the same code written with template literals.

If you take a good look at the snippet above, you would observe that it is less prone to errors than the previous. The whole string is pt inside one single back quotes and the variables to be passed in are put inside curly braces with the dollar sign wrapping them ( ${ } ). It pretty easy and straight forward to work with something like this.

We can also make use of a function inside a template literal. Let us take a look at how we can do that.

I bet you already know what our output should be. Just in case, here is it.

Output:

So that’s it on Template literals.
Stay tuned for more on the New features of ES6.
Thanks for reading.

Getting started with React Native

Taiwo Iвι∂αpσ-Oвε — Mon, 07 Aug 2017 09:46:07 +0000

Hello and welcome again.
Today, I would be talking about React Native.
There is a probability that some of you might have worked with this guy and some do not even know what React Native is. Keep your mind at rest. It is something you can work with perfectly.

React Native is simply a JavaScript framework for building native mobile apps at once. Imagine you were to develop an android app and an IOS app for a client. You would probably be someone who knows JAVA and Swift or maybe one out of the two. This means that you might have to outsource or get someone to help you with the language you are probably not familiar with. When I say native, I mean Native.

React Native helps you to build apps that no one would ever tell you that you did not use a custom native language such as JAVA or Swift or Objective C. React Native gives you that extra feel. There are tons and tons of benefits of using React native.

React native is an open source framework
React Native runs on JavaScript. This means that even your web developer who writes JavaScript for you can become a mobile developer in one night without having to go learn a new language. Isn’t that just awesome? To get started with React Native, all you need is a basic understanding of JavaScript ES6.

To be honest, installing some features or tools to use might be tasking and annoying. You begin to wonder why we cannot just make use of a next-to-next GUI kind of installation and why sometimes we have to use command line and the likes. I also have that thought. To get started with React Native, you might not necessarily have to go through some rigorous steps to get your workspace running. This article is targeted towards the basic or newbie installation of getting started with React Native.

Create React Native App is the easiest way to start building a new React Native application. It allows you to start a project without installing or configuring any tools to build native code - no Xcode or Android Studio installation required.

STEP 1: Install Node.

Lucky for you, Node has a GUI installation so you do not have to do to your command line to have to start writing some lines that you might not probably understand or seems a little bit confusing. You can get the installer package from nodejs.org/en/download/

A download file for both Windows and Mac are made available there.

STEP 2: Install the Create React Native App

At this point, you would need to use the command line. Do not be scared. You are only writing one single line.
Open your command prompt or terminal and type in

npm install -g create-react-native-app
npm stands for Node package manager. 
-g stands for global.

This is how your terminal should look like. Press enter once you type that in.
Once that is done, type in

create-react-native-app myFirstProject

Press enter once you type that in. This would take a while for it to get completed.
NOTE: myFirstProject can be any name you wish to give your project or Application.
Once this is complete, you are set to begin your deployment.

Do a change of directory to the location where you installed the React Native App. From the snippet above, my folder would be inside Peter. So, all you need to do is make your way to the folder holding all your application files. This can be done using the change directory command as shown below.

Type in cd myFirstProject and press enter.

Type npm start and press Enter.

This will start a development server for you, and print a QR code in your terminal.

STEP 3: Running Your Application.

Go to your app store from an Apple enabled device or the Google play store from an Android device.

Search for Expo. Download and install.

Make sure your phone is on the same network with your computer.

Open the Application and Select to scan code.

In your command prompt or terminal, your code would have displayed when you wrote npm start. Use your phone to scan the QR code.

Tadaaa.. You are now done with the setup for your React Applications.

To modify your application, locate the App.js file in your folder or directory and open it with your preferred text editor. Do some little changes to the Text section and save your document. Notice the change on your phone instantly.

In case you do not notice any change immediately, shake your phone to open up the developer menu.

When the Menu is opened, select Enable Hot Reloading.

Your mobile app should now immediately reload once any change has been made to your source codes.

NOTE: Create React Native App makes it really easy to run your React Native app on a physical device without setting up a development environment. If you want to run your app on the iOS Simulator or an Android Virtual Device, you would have to learn how to install Xcode and set up your Android development environment. I would be giving the step by step approach on this in the next article.
Once you've set these up, you can launch your app on an Android Virtual Device by running npm run android, or on the iOS Simulator by running npm run ios (macOS only).

Happy Coding.. See You soon…

JavaScript Object vs JSON

Taiwo Iвι∂αpσ-Oвε — Mon, 31 Jul 2017 08:01:16 +0000

Hello and welcome again.
Today I would be talking about JavaScript Object vs JSON.
Before checking up this article, I am assuming you are already familiar with some basics of how the web works – in terms of building online projects with say HTML. You should also be familiar with JavaScript basics.
JavaScript and JSON sometimes can be really confusing for someone and that’s why I am writing this so it answers all your possible questions.
JSON stands for JavaScript Object Notation. It is basically a text format that makes it easy to share data between devices such as Clients and Servers. Its Origin is based on how JavaScript object works so in that sense, it is related/close to but not completely JavaScript Object. Regardless of the fact that it has its origin from JavaScript, it is widely used across many Languages like C, Ruby, Python, PHP just to mention a few. Because of the size and easiness to convert to a data structure, it is kind of a great alternative to other formats like XML.
A very good advantage of using JSON is how easy it can be to read.

https://thepracticaldev.s3.amazonaws.com/i/4maihr1kpvv86c9ys6cc.jpg

Consider the snippet above. I have created a JSON object with a few key-value pairs. The keys are on the left-hand side (name, language and hobbies) while the values of the keys are on the right-hand side. This can easily be understood as an Object by JavaScript and to anyone reading it.
Another good advantage of JSON is the ability to pass the value or data into a JavaScript object. This can simply be done using a JavaScript command as shown below.

https://thepracticaldev.s3.amazonaws.com/i/4auer2ao0s2n4xctiikh.jpg

With that single line command, you can access anything from the object data. So, say you were to get the name value, all you would do is simply type:
userInfo.name; // Using the dot notation.
userInfo[“name”] // Using the bracket notation
Another good advantage is that it is leaner than XML. When you try to run the same command or script using XML, you would observe that passing an XML can be time consuming whereas with JSON, it is much faster.
Let’s take a look at how JSON strings are written.

https://thepracticaldev.s3.amazonaws.com/i/p09vp0pz1r2x9teo9t6d.jpg

Take a very good look at the keys. You would observe that they are written in quotes. The keys can also be any valid string. The JSON values can only be one of the six datatypes (strings, numbers, objects, arrays, Boolean, null). JavaScript values on the other hand can be any valid JavaScript Structure.

https://thepracticaldev.s3.amazonaws.com/i/u245wunnwrhecozexd0t.jpg

In the snippet above, you would notice that the keys are not wrapped in quotes. This is a typical example of a JavaScript Object. JavaScript Object values can be any datatype including a function (which you CANNOT do with JSON. Take a look at the snippet below showing a valid JavaScript Object.

https://thepracticaldev.s3.amazonaws.com/i/9cp24lyb34nmoqyl4yuu.jpg

Unlike JavaScript Object, a JSON Object has to be fed into a variable as a String and then parsed into JavaScript. A framework like jQuery can be very helpful when doing parsing.

https://thepracticaldev.s3.amazonaws.com/i/80qhkpbkrowz5pov46ij.jpg

There are quite some tools you can use to validate your JSON code and some of them are listed below:
â€¢ JSONLite
â€¢ JSON Editor Online
â€¢ Cocoa JSON Editor (MAC)
â€¢ JSONPad
â€¢ JSON view for Mozilla and Chrome etc.
Stay tuned for more on Working with JavaScript Objects and JSON.
Thanks.

What Next?

Taiwo Iвι∂αpσ-Oвε — Tue, 18 Jul 2017 07:40:14 +0000

Hello and welcome to another episode of the Web Developer Series.
From the previous article on Starting from point Zero, you might have been looking at going further rather than just being a front-end developer. At this point, I have quite some tips on what next to do.
OPTION 1: Choose a Front-End Framework: Examples are Bootstrap, foundation etc.
OPTION 2: JavaScript/PHP Frameworks such as Angular, React, Vue, Laravel, CodeIgniter etc.
OPTION 3: Server-side language: such as PHP, Ruby etc
OPTION 4: Databases such as MySQL, PostgreSQL etc.
For me, I would suggest you go for Option 1. Select a front-end framework. Frameworks like bootstrap, foundation, Skeleton, MUI etc, saves you a lot of time for creating user interfaces. You might not be really good with designs, graphics and the likes, frameworks gives you that extra ability so all you have to do is add a little classes. One major advantage of this is the Mobile responsiveness. This is the ability of your web pages to fit in perfectly to any screen size without having to write tons of code to get this done. This is highly optional. You might not want to make use of frameworks. Its all left to user preference.
Next up I would suggest you go for after the front-end framework, is Option 3: the server-side scripting. There are several server-side scripting such as PHP, Node.js, Ruby on Rails (great framework but has leveled off a little), python etc. Among them all, I would suggest you go for PHP. You might be thinking why not Node js since I already have an idea on JavaScript. But it is left to you to decide which is best for me. I preferred PHP because I think its better I learn something new since I already know JavaScript. Node js is actually a very powerful framework too.
Ok so you are doing really great at this point. So what next??
Option 4: Databases should be you next shot. Note: You have to master the server side before working with databases. There are several databases to work with and some are MySQL, PostgreSQL, NoSQL databases etc. I would recommend you start with MySQL reason being that they have a larger community and it is far much easier to learn. NoSQL databases works similar to JSON. An example of NoSQL database is MongoDB which is a document database. Another example of a NoSQL database is the CouchDB. Databses work with the scripting language so I would suggest you pick one combination and focus on. Its either PHP with MySQL or Node.js with MongoDB. It would not be advisable going outside this combination.
Finally, you should consider other javascripts framworks. This just helps you write lesser lines of javascript codes. There are tons of frameworks to choose from such as Angular.js, React.js, Vue.js, jQuery, backbone.js etc. For me, I would advice you start with Vue.js. I think that should be the simplest. They are all very powerful frameworks but they all have their strengths and weaknesses. You could check them up online to read more about them.
There are other side technologies you should learn as a web developer.

GIT Version Control & Github.
SSH & Basic Command line
CSS PreCompilers — Sass/Less
APIs/REST Services.
HTTPS/SSL WOW… You made it this far.. At this point my dear, you are now a Web Developer. Things you can do at this point include:
Create simple to advanced web spplications
Build Backend APIs
Work with Servers
Admin Databases
Get a great Job
Keep freelancing etc. At this point, you can also consider the following:
Focus on your career
Go back and learn another stack
Keep up to date with new technologies
Learn a high level language such as JAVA, C# etc.
start evangelising about building for the Web. I hope this helped you in one way or the other. Stay tuned for more articles.

Starting from point 0

Taiwo Iвι∂αpσ-Oвε — Thu, 13 Jul 2017 10:07:31 +0000

This article is targeted towards people who have no idea about coding for the web or probably you are a front-end developer and do not know where to go next. Stay calm, I got you covered. You might as well know “Everything but you just want to know a little about what technologies are currently in, this should help you.

Ok so let’s get started.

WHERE DO I START?

This is probably the easiest question of all. Anyone who tells you not to learn HTML/CSS first is NOT a WEB DEVELOPER.

STEP 1: HTML/CSS

They are the building blocks of all web pages. No matter how technical or robust your web application might be, the front of such website is still going to be presented via HTML and CSS and probably some client-side JavaScript. HTML handles the mark-up and presentation while CSS handles the styling.

One other important reason to learn HTML/CSS first is that there is no alternative. They are always used. You cannot be a web developer without knowing them. When it comes to Server-side languages, you have tons of languages that handles that. But as far as front end is concerned, they still run on HTML.

Please note that It is advisable to know them very well. Positioning items on the web pages should not be a problem. They are pretty easy to learn compared to some other programming languages out there.

Basic Tools:

Text Editors: There are tons of text editors out there to make use of for making your web pages such as Notepad++, Sublime text Atom.io etc. I would suggest going for sublime text. There are also some IDEs such as Dreamweaver, netbeans just to mention a few, but I think those should be left for more complex programming task. Sublime text is excellent to make use of as a designer/developer.

Image Editing: Photoshop, illustrator etc are examples of complex powerful image editing software. Do not be afraid. All you need is the basics such as image slicing, cropping, resizing images etc. That should get you going as a front-end developer.

FTP/SSH Tools: At some point, you might want to push your website/applications unto the internet. You would be needing a file transfer tool for that and I think Filezilla is pretty good for you. Putty (for Windows) is also an option but I would strongly recommend Filezilla. Leave SSH a little at this point – if you are still a beginner.

STEP 2: BASIC JAVASCRIPT

Awesome job so far. You have learnt the HTML/CSS and you are pretty good with it, this is the next step you need to take. Now do not get it twisted. Am not talking about Angular js or Node js or React js etc. I am referring to the basic JavaScript. All you want to learn at this point is your data types (Strings, numbers, arrays, objects, etc), functions, conditionals, loops, operators, event handlers – I click on a button and something happens, etc. I would be doing a series on Basic JavaScript in my coming articles. It is really helpful to learn them now because they are the basics programming principles for any programming language. Also consider learning JSON. JSON stands for JavaScript Object Notation. Don’t be scared. It is pretty easy to learn. Most of the APIs today are in JSON format. You could master it in a day (if you put all your heart to it). I should also be doing a series on this too in the coming days. Finally, on JavaScript, try lay your hands on jQuery. Please and please, only take on jQuery if you feel you are already comfortable with JavaScript even though it makes things easier than the default JavaScript.

STEP 3 DEPLOY A BASIC WEBSITE:

If you are at this stage already. It means you are doing really great. No matter how small your website is, try push it to the internet. You could start out with a basic landing page, a portfolio page or something really small just to show that you are ready for the big thing coming next. All you need to get this done is a shared hosting (hostgator, immotion etc), domain and some basic CPanel information. It’s a lot easier than deploying a node js application.

TADAAAA!!! At this point, you can call yourself a WEB DESIGNER.

You might be wondering why I said Web Designer and not a web developer. This is so because you do not have the capability to do a backend or something. So, do not worry. You can earn a lot from this. Believe me, you can make a good living from this. There are things you can do at this point:

Build simple but professional websites.
Build UIs for web applications.
PSD to HTML/CSS Conversion
Work for a company as a front-end developer
Be a freelance web designer.

At this point, you might want to ignite more fire in you and go for something bigger. You then begin to ask yourself, “What Next after Point 0?”. Don’t worry, there is more to come. Stay tuned for upcoming articles.
Thanks a lot for reading. I hope it was worth your time. See you soon..

Hi, I'm Tσℓα Iвι αpσ-Oвε

Taiwo Iвι∂αpσ-Oвε — Thu, 13 Jul 2017 09:12:33 +0000

I have been coding for [2] years.

You can find me on Twitter as @taiwo_xyz

I live in [Abuja].

I work for [PayPorte]

I mostly program in these languages: [JavaScript, HTML5, CSS3, JAVA].

I am currently learning more about [JavaScript].

Nice to meet you.