Tech Junkie Blog - Real World Tutorials, Happy Coding!: 2017

Friday, December 29, 2017

Arrays in JavaScripts are a collection of values stored in what are called elements.  Each element is represented by a numeric index that is zero based, meaning the first element of an array starts at index zero.  JavaScript arrays are dynamic and can contain many types of objects including functions.  The useful thing about arrays is that they are a specialized object that contains a variety of built-in methods that are useful in the manipulation of the array.

First let's create an empty array, there are several ways to do this:

  1. var empty = [ ];
  2. var empty = new Array();
  3. var empty = new Array(0);

Friday, December 22, 2017

Every JavaScript object has a toString() and a toLocaleString() method defined with it.  It is a string representation of the object.

For example if we define a date object like the following:

 var date = new Date();

and we output the console.log(date.toString()) method without any extra code we would get the current date and time automatically

Friday, December 15, 2017

Most people don't realize JavaScript has object property setters and getters or accessor methods.  When an object has a setter only it is a write only property, when it has a getter only method that it is a read only property.  If a property has both then it is a read/write property.  A perfect example is if you are working with a private property in JavaScript which has the $ prefix in front of it.

Let's say you have an object with a private property $n like the example below:

        var game = {

            $n: "Awesome Game!",

            get name() { return this.$n}

The code above only has a getter name that exposes the private property $n when you console.log you should get value of the $n like the code snippet below

Friday, December 8, 2017

In JavaScript you can delete an object's property with the delete operator.  Let's use the product object again as an example.

Let say you have the following JavaScript code to create a product object.

        var product = new Object(); = "Chai";
        product.category = "Tea"; = "India";
        product.badProperty = "Bad Property";
        product.badProperty2 = "Bad Property 2";
        product.supplier = {
            name: "ACME Tea Of India",
            location: "New Delhi"


Friday, December 1, 2017

There are times when you will get an error when you tried to access a property in an object, sometimes you think a property exists in the object but it does not.  Let's use the product object from the previous blog post as an example.

        var product = new Object(); = "Chai";
        product.category = "Tea"; = "India";
        product.supplier = {
            name: "ACME Tea Of India",
            location: "New Delhi"

Let's say another developer works on the project and he assumes that since there's a "country" property that there should be a "city" property.  If he tries to access the access the "city" property in the product object he will get an undefined, because the property does not exist.   If he types the following he will get the undefined message.

Monday, November 27, 2017

Since CSS does not live in an island no technology does.  It has to interact with it's neighbor HTML on a regular basis.  In the HTML world there's the block-level elements and then there's the inline-level elements.  Most developers could care less what the meanings of these words mean.  For the designers, it's okay they are just trying to make things look pretty cut them some slack :)

First let's look at block elements:

Block elements are needs to stand on it's own, meaning there's no elements at either sides.  They generate a break on the top of bottom of itself.

Here is an example:

The <h1> and <p> tags are block elements.  Even if you write the code <h1>This is H1<h1><p>This is a paragraph tag!</p> in one line next to each other without any breaks.  The resulting respresentation of those tags in the browser would look like this.

Friday, November 24, 2017

Now that we've learned to create objects in all sorts of ways it's time to set and get the object properties that we've created.  In this blog we will go over how to access the object properties either to set them or get them.

First let's create an object that we can work with:

Type in the following code in the between the <script type="text/javascript"></script> tag in an html page.

        var product = new Object(); = "Chai";
        product.category = "Tea"; = "India";
        product.supplier = {
            name: "ACME Tea Of India",
            location: "New Delhi"

If you run the page with the code above you will see the following in the browser console:

Tuesday, August 1, 2017

In this blog post I am going to show how to connect to your Azure subscription in Visual Studio 2015.  As a developer it's nice to have the Azure subscription integrated into Visual Studio so that you don't have to log into the Azure portal every time you want to interact with Azure.

Follow the steps below to connect to your Microsoft Azure subscription in Visual Studio:

1.  Open Tools → Connect to Server
2.  On the top of the "Server Explorer" connections list right click on "Azure" and select "Connect to Microsoft Azure Subscription"

Tuesday, July 25, 2017

In this blog post we are going to get the Azure subscription in Powershell using the secure certificate method.

Follow the steps below to get the Azure subscription:

1.  Open Powershell as an Administrator
2. Type Get-AzurePublishSettingsFile once you type the command into the Powershell command line it will pop-up the Azure authentication prompt.  Authenticate into Azure and save the publish file settings into a place that you will remember.

Tuesday, July 18, 2017

Tuesday, July 11, 2017

In this post I will show how to download the automation scripts that Azure provides when you create a new virtual machine in Azure.  This is great for PowerShell scripting or if you want to interact with your VM in Visual Studio.  You don't have to start from scratch.

Here are the steps to get the automation scripts for your VM in Azure:

1. Log into the Azure portal at
2. Click on "Virtual Machines"

Tuesday, July 4, 2017

Tuesday, June 27, 2017

Tuesday, June 20, 2017

People often get confused when they work with Azure because there are two versions of Azure.  Most people call it the classic mode and the new portal Azure or the more official term is ASM vs ARM.  In this post we will create a CentOS Linux virtual machine in the new Azure portal.

Follow the steps below create a new Azure portal:

1. Go to the URL :
2. Log in with your Azure credentials
3.  Click on "Virtual Machines" make sure it doesn't say classic on the link

Wednesday, June 14, 2017

Don't have money to buy Winzip?  If you are looking for a good file achiver or extractor look no further than 7-Zip.  It archives and extract most of the file formats and the best part of the value proposition for this great application is that it's free!  And if you act now, you will get it for free!  So hurry while supplies last! It's still free!  Anyways I haven't had any problems with the application.  Even though it's free it's high quality.  So head over to the official website at and download the version for your OS.

Tuesday, June 13, 2017

In this blog post we are going to deploy a Linux virtual machine in Azure.  Most of the steps takes place in the Azure portal.  To get to the Azure portal type in the browser this address

Follow the steps below to create a Linux virtual machine in Azure:

1.  Type into the browser
2.  Log into Azure with your Azure credentials
3.  On the left hand side of the portal click on the "Virtual Machines" link

Tuesday, June 6, 2017

In the previous blog post we created an Azure cloud service.  Now we are going to create a private virtual Azure network.  The importance of this is that when you create a virtual machine in Azure you will use this virtual network to connect to your virtual machine.

Tuesday, May 30, 2017

The first thing you want to do in Azure is to create a new "Cloud Service" which is a deployment service your resources will be deployed in such as a virtual machine or a web site.

Follow the steps below to create a new Azure "Cloud Service":

1.  Once you are logged into the Azure Portal click on the "Coud Services" on left hand side

Monday, May 1, 2017

In JavaScript there are two ways to access an object, first by dot notation like this

or with array notation


They both get the job done.   However with the array syntax [""] you access the object as if it's an array but instead of accessing it by numbers or index you access it by the property names.  That's because JavaScript objects are associative arrays.  They look like other objects in other languages such as C, C++, and Java.  However they behave very differently.

In other languages objects are defined in advance, their properties are methods are fixed.  To add a property or method to the object you have to change the class the object instance is created from.

Friday, April 28, 2017

Object.Create( ) is a static function which can take two arguments.  The first argument is the prototype of the object, while the second argument is the properties of the argument.  A prototype is a second object that is created with every JavaScript object.  It is like a blueprint, or the model that the object is built on.  Think of it as a car prototype.

So let's create an object with Object.Create( ) function:

var person = Object.create({
    name: "Tech Junkie",
    location: "Mars",
    hobbie: "Video Games"


Thursday, April 27, 2017

In the previous post we visited how to create an object with an object literal.  In this post we are going to create the same object using the new keyword.  When creating objects using the new keyword it is required that the it is followed by a function call.  The purpose of this function call is the needs a way to call to the constructor of the new object.  A constructor is used to create or initialize the created object.

Here is the code to rewrite our literal object using the new keyword:

var product = new Object(); = "Chai";
product.category= "Tea"; "India";
product.supplier= {
    name: "ACME Tea Of India",
    location: "New Delhi"

product.related = new Array("Earl Grey", "Green Tea", "Dark Tea", "White Tea");
product.display = function () {

Wednesday, April 26, 2017

The most common ways you see how objects are created in JavaScript is the object literal syntax.  The object literal syntax is the open { } with comma separated name: pair value lists.  The name: part is the name of the property.  The part after : is the property value which can hold a primitive value or another object.  It could even be a function.

Here is an example of an object literal:

var product = {
    name: "Chai",
    Category: "Tea",
    Country: "India",
    supplier: {
        name: "ACME Tea Of India",
        location : "New Delhi"
    related: ["Earl Grey", "Green Tea", "Dark Tea", "White Tea"],
    display: function () {

Tuesday, April 25, 2017

JavaScript error handling is a lot like other languages where you have the try/catch/finally  statement that you can used.  The basic premise is

     // try some codes here fingers crossed that nothing bad happens
     // oops something bad happened, this is where it gets handled or I tell the user
    // I don't care what happens I am going to execute and get paid

Here is the error handling in action:

Monday, April 24, 2017

The for/in loop is a for loop that is used to iterate through the variables in an object. It can iterate to through that anything that can evaluated on the left side of the assignment expression call the LValues.  Let's use the for/in loop to iterate through an object "person".

Here we created an object called "person" with three properties we are going to use the for/in loop to display the property names as well as the values of those properties

var person = new Object(); = "Tech Junkie";
person.occupation = "Blogger";
person.location = "Mars";

for(var p in person)
console.log(p + ": " + person[p]);

Friday, April 21, 2017

The do/while loop is similar to the while loop.  The difference is that the first the loop expression is tested after the do statement block is executed at least once.  For example let's use our countdown example again.

If we have the code below the countdown displays the same results as the output.  However, the first iteration is performed without a evaluation of the expression.  It's not until the countdown is 9 that the while part of the loop kicks in.

Thursday, April 20, 2017

The while loop statement in JavaScript simply executes a statement block until a condition is not true anymore the syntax for the while loop is as follow

while (expression is true)
     execute these statements

The while loop is an iterative loop if the condition is true and the statements are executed, it starts at the top of the loop again and executes until the expression is false.  Therefore, there's a potential for an infinite loop.

Wednesday, April 19, 2017

Tuesday, April 18, 2017

In JavaScript the DOM is an acronym for "Document Object Model" that's quite a mouthful.  Most people just refer to it as the DOM.  The DOM is basically a collection of objects/elements organized in the tree structure.  To perform any functions in JavaScript you first have to find a reference to the object or element you are working with.  Luckily, there are a few handy JavaScript methods that can help you find the elements in the DOM that you want.

Let's take a look at the methods:

  • getElementById - this method gets the element based on the unique id that is assigned to the                                   element
  • getElementByClassName - this method gets the elements that has the class name that is passed                               into the method
  • getElementByTagName - this method gets the elements that matches the tag name
  • querySelector - this method gets the first child element that matches the CSS selector being                                passed in
  • querySelectorAll - this method gets all the child elements that match the CSS selector

Monday, April 17, 2017

The previous blog post we setup our application to work with Heroku locally.  In this post we will deploy our application to the live Heroku platform.

Here are the steps to deploy our application to Heroku:

1.  First we need to check in our code into a local Git repository to add our code to Git is easy first type git init

Friday, April 14, 2017

The switch statement is there to make the code more readable if the if statements contains too many branches and becomes too hard to read.

Consider the code below

var x = 6;

if (x === 1)
else if (x === 2)
else if (x === 3)
else if (x === 4)
else if (x === 5)
     console.log("x is not 1-5");

Thursday, April 13, 2017

In this blog post we will setup our AngularJS SPA application for Heroku and testing it locally to make sure we got all our ducks in a row if you need a refresher for how to setup Heroku you can visit this post.  By deploying to Heroku we can access our application online making our application live.

Here are the steps to deploying the AngularJS shopping application to Heroku:

1.  Find out the node and npm version you have installed on your machine by typing in the following command

node --version
npm --version

Wednesday, April 12, 2017

The for loop is a looping construct in JavaScript that are more simplistic than the while loop.   When writing the for loop there are three three parts they are

  1.  Initialize - a count variable is initialize, it's usually zero but it doesn't have to be
  2. Test - A test to see if the loop should continue
  3. Increment - finally the count is incremented, it doesn't have to be an increment it could be decrements as well

Let's use the JavaScript code to demonstrate:

If you execute the loop below you will bet a for loop that executes when i is less than 10

for (var i = 0; i < 10; i++)
    console.log("i is " + i);

console.log("i outside of for look is " + i);

Tuesday, April 11, 2017

In the previous blog we setup the folder structure to use the Jade view engine just to make sure Express is working correctly.  In this blog post we are going to tell Express to serve file static files as well in our app folder.  In the previous part when we browse to http://localhost:3000 we get the "Express" index page.  Using a view engine is a preference that some people have, but I feel more comfortable developing in HTML.

Monday, April 10, 2017

The conditional ?: operator in JavaScript has three operands the first part goes before ? the second goes between the ? and the : symbol and the third operand goes after the : symbol.  You can think of this operator as shorthand way of writing a an if statement.  The first operand evaluates to a boolean, if the first operand is true then evaluate the second operand else evaluate the third operand.

Let's say we want to want to see what the gender of the baby is and assign it a name, let's demonstrate it with code.

var gender = "girl";

var name = gender === "boy" ? "Julian" : "Julie";


The code above assigns the variable gender to "girl" then it uses the conditional ?: to assign a value to the variable name if the gender is "boy" then assign the name "Julian" to name, else assign the name "Julie"

Friday, April 7, 2017

Heroku is a service provider that you can use to host your Node application quickly.  In this blog post I will how you how to install Heroku on a Windows machine.

Here are the steps to setup Heroku on a Windows machine:

1.  Go to and sign up for a free account, follow the instruction on the page
2.  Download the Heroku toolbelt from the Heroku website at

Thursday, April 6, 2017

Wednesday, April 5, 2017

The eval() function in JavaScript provides the power of dynamic evaluation, it evaluates a strings of JavaScript codes and returns a value.  If you use the eval on pair of string numbers it will be forgiving and give you the number if it can.  For example if you type int

eval("4+5")  the result will be 9 even though it's a string

Tuesday, April 4, 2017

Monday, April 3, 2017

In this post we will create the Category Repository to retrieve information from the database about the the different categories in the NorthwindCafe database.

Here are the steps to create the Category repository class in the NorthwindCafe application:

1.  Create the ICategoryRepository interface for dependency injection, create a file call ICategoryRepository.cs in the "Models" folder with the following code

using System.Collections.Generic;

namespace NorthwindCafe.Web.Models
    public interface ICategoryRepository
        IEnumerable GetAllCategories();
        Category GetCategory(int Id);


Friday, March 31, 2017

In JavaScript anything defined outside of a function is considered a global scope while anything that's defined inside a function is called a variable scope (local or function scope) meaning it exists inside the lifetime of the function.  Let's use code to demonstrate this point

var streetFighter = "Ryu";

function displayFighter()
    var streetFighter = "Ken";



Thursday, March 30, 2017

In our AngularJS SPA application we will be using the Express web server to serve up our web application.  In the previous blog post we installed the Express-generator globally.  Now we can install Express in the root folder of our SPA application.

Here are the steps to create an Express application:

1.  Open the command line prompt at the root folder of the SPA application

Wednesday, March 29, 2017

Logging is a good service to add as the application gets more complicated.  It will allow us to see what the error is when things goes wrong.

To add logging to our ASP.NET Core application follow the steps below:

1.  Open the Startup.cs file and add the logging service to the ConfigureServices method with the line


So your ConfigureServices method should look like the following

        public void ConfigureServices(IServiceCollection services)
            var connectionString = Startup.Configuration["Data:NorthwindContextConnection"];
            services.AddDbContext(options => options.UseSqlServer(connectionString));


Tuesday, March 28, 2017

When the browser window opens and navigates to a webpage with your JavaScript code. A global object is created for your JavaScript program.

If you type the following line as the first line of code in your JavaScript file

var globalObj = this;

What do you think will get?  In this case you are referencing the Window object, which is JavaScript's object for the browser window.  As you can see there's a whole bunch of global properties and methods already defined at the global level.

Thursday, March 23, 2017

In order to install the Express web server on the fly on your machine you need to install the Express generator.  Fortunately with NodeJS it is as easy as typing in a command in the command line.  This step used to install Express globally so that it will be easy for development.

Here are the steps to install Express generator globally:

1.  Open up the command line and type in the following command
     npm install -g express-generator


Wednesday, March 22, 2017

In the previous blog we created the NorthwindCafe database with Entity Framework Core.  Now we are going to seed the database so that we can work with the data.

Here are the steps to seed the NorthwindCafe database:

1.  Create a file call DBInitializer in the NorthwindCafe.Web folder, in the file type in the following code

using System.Linq;

namespace NorthwindCafe.Web.Models
    public class DbInitializer
        public static void Initialize(NorthwindContext context)


            var categories = new Category[]
               new Category {Name = "Coffee", Description="Coffee", Products = new Product[] { new Product { Name = "Dark Roast", Description = "Dark Roast", Price = 2.0M } } },
               new Category {Name = "Tea", Description="Tea", Products = new Product[] { new Product { Name = "Chai", Description = "Chai", Price = 1.5M } } },
               new Category {Name = "Pastry", Description="Pastry", Products = new Product[] { new Product { Name = "Cupcake", Description = "Cupcake", Price = 1.25M } } },
               new Category {Name = "Food", Description = "Food", Products = new Product[] { new Product  { Name = "Hamburger", Description = "Hamburger", Price = 5.0M } } }

            foreach (var c in categories)



Thursday, March 16, 2017

In the previous blog post we created a configuration file for our MongoDB database in this post we will install MongoDB as a Windows service so that we don't have to start the service in the command line every time we want to use it to save development time.

Here are the steps to install MongoDB:

1.  Open the command prompt as an "Administrator"

2.  Change the mongo-db-config.conf file to use absolute paths.  You can get the instructions on how to create a MongoDB configuration file in this blog post

            dbpath = C:\techjunkie\mongodb\db
            logpath = C:\techjunkie\mongodb\mongo-db-server.log
            verbose = vvvvv

if the folder dpath folder does not exists in Windows create the folder "db" inside the "mongodb" folder, else the service start will fail

Thursday, March 9, 2017

In the previous blog post be installed mongoDB now, we are going to create a configuration file for mongoDB to use during startup.

In this configuration file we will specify the following:

  • location of the data files
  • log file path
  • the verbosity of the log file

Here are the steps:

  1. Create a folder in your operating systems
  2. create a file call mongo-db-config.config in the folder
  3. Type in the following lines of configuration settings
            dbpath = /techjunkie/mongodb/db
            logpath = /techjunkie/mongodb/mongo-db-server.log
            verbose = vvvvv
           dbpath : specifies the path of the data files
           logpath : specifies the path of the log file
           verbose: specifies how verbose we want out log files to be, in this we want our log files to be very verbose we want to log everything.  The settings is from v to vvvvv  going from least to most verbose

Thursday, March 2, 2017

Now that we have our AngularJS environment set up we need a database.  We are going to use MongoDB as a database.  MongoDB is a NoSQL database which is a perfect fit for JavaScript centric applications that we are building.  To install MongDB go to to make sure you are installing the "Community Edition" of MongoDB.  On the "Community Server" tab select the operating system that you will be installing MongoDB in, then click on the "Download button.

Search This Blog