JavaScript at highest position ever!!!

Fellow developers please understand HERE IT COMES!!!

Based on the TIOBE Index for February 2015 JavaScript has traveled 3 places in the index since February of 2014 shown below:

JavaScript is on fire and is coming “Faster than a speeding bullet”.

Each of the following should be at least be on your tracking and following list: TypeScript, Node.js, React.js, io.js, Angular.js and millions more and more have been made while typing this sentence!!

I have been working with Node.js / io.js to familiarize myself with the concepts and development paradigm to learn some coding practices and standards.

I have been a avid customer and supporter of the Pluralsight for years and have been trying to improve my skill set in all directions. “Jack-of-all Trades, Master of None”. I have seen some great videos from Scott Allen, Dan Wahlin and many others that have shown some great applications from JavaScript!!

I decided that I needed to develop an application that would be a created from scratch, an application that would help me understand and use Angular.js.

Well here is my attempt to develop that using an application that I have used before by developing an application in Backbone.js found here on my github account.

I decided to develop this application in a Angular.js format and my best understanding so far of “Best Coding Standards and Practices”. I am by no means an expert on this yet so please understand this could have some issues.

For a better understanding of “Best Coding Standards and Practices” please follow and check out Pluralsight. They are by far the best thing that I have ever done for my career and also to improve my skill set. “NO REPLACEMENT!!!”

Ok enough about me and on to the Angular.js application that I have created.

I will be using Sublime Text 3 as my development environment for this application.

I will place my code on to my github account here also if you want to use it as a reference.

I first have structured my code in the way that I have found works best for me also learned on Pluralsight. This seems to be somewhat simple but really powerful as well, the structure is shown below:

I first developed the root Birthday folder and then created subfolders of: css, fonts, js, lib, and finally the birthday.html file. The css and fonts should be self explanatory, the js folder is my JavaScript files I create, and finally the lib folder is the external libraries I have downloaded to use in this application shown below expanded.

The first file that I wanted to show is the birthday.html file I have created. Again this will be found in my github account also here:

This file is basically a HTML5 file that has basic html structure with a additional Twitter Bootstrap css for layout, and the improve the look of the page. The other thing that is added to this HTML file is the Angular.js, jquery, and my app.js and rectanglecontroller.js files.

In this application this is the View of the MV* Model / View / * (or Whatever).

Next I developed the app.js file that will be the definition of the module that I want have in my application. This gives the ability to develop a modular based structure in the application that will allow for “small do one thing well” process or module.

The app file is very small and is basically used to bootstrap the Angular.js application shown below:

Next really is the crux of the application that is basically the Model and Controller of this application. The model is defined in the rectangle controller and then I have functions that are encapsulated in the Model shown below:

Now the controller for the application that creates the Rectangles and has the order by function that does the work for Alphabetize and Numerical button.

Basically the simple application creates Rectangle Birthday Blocks on the HTML5 application that is dynamically generated with a ng-repeat Angular loop. After the Birthday Blocks are created then the Alphabetize and Numerical buttons will allow for you to sort the blocks. The Alphabetize and Numerical buttons will also do full reversal of the blocks if clicked again. You also have the ability to choose any Birthday Block and it will change color to show the selection. When you select another block the first one will revert back to original color and then new selection will change colors. The page is shown below:

In summary this is my attempt to start to develop an application that is based in the Angular.js, Bootstrap and HTML5 world of development.

There is no time like the present to start learning JavaScript it is coming an essential part of a Developers required toolset or skillset.

I hope you all enjoyed this blog post and remember to please follow my blog @ https://allangagnon.nettryx.net.