Tech Junkie Blog

Latest Posts

Monday, April 23, 2018

The Array.sort() methods sorts the array in alphabetical order by default, or you can pass in a custom sort function.

So let's say you have an array of names that's our of order that you want to sort.


    <script>
        var names = ["zack", "jim", "bob", "adam", "jason"];
    </script>

If we call the names.sort() method we would get resulting array in Alphabetical order








Monday, April 16, 2018

The Array.reverse() method reverses the order of the array elements.  The easiest way to demonstrate this is to have an array with the numbers 1 to 5.  If we call the Array.reverse() method we should get an array of 5 to 1.  The Array.reverse() does not create a new array, it simply rearranges the array into a new order.  Just keep that in mind when you are using this method.

So let's declare our array from 1 to 5


    <script>
        var numbers = [1, 2, 3, 4, 5];
    </script>

So if we call the numbers.reverse() method we should get an array of 5 to one in the reverse order


Monday, April 9, 2018

The Array.join() method converts all of the elements of an array into strings and concatenates the elements.  If no delimiter is defined it is separated by a comma.  The most common use for this is to convert an array into a comma separated list of strings.

For example let's say we want to convert an array of zip codes into a comma separated list.

    <script>
        var zipCodes = [90210, 90211, 90212, 90213, 90214];
    </script>

If we just call the zipCodes.join() method we will get a string of comma separated list








Thursday, April 5, 2018

Wednesday, April 4, 2018

R is a programming language used by data scientists to present and manipulate data.  In this blog post I will go over the steps you need to do to install R in your Windows machine.

Here are the steps to install R:

1. Type the following URL into the address bar https://cran.r-project.org

2. Once you are on the page click on the link that says "Download R for Windows"

Tuesday, April 3, 2018

In CSS you can define styles for HTML elements and apply the styles globally on the page where the HTML element is used.  For example you can define styles for the entire html element or the p element.  Like the following markup


        html {color:blue;}
        p {font-weight:bold;}
        h1 {color:red;}

This is a paragraph

This h1 tag


You can also group your selectors by using commas to define a style for more than one element. Like h2, h3 {color: blue;}

This is h2

This is h3


So far we have define one declaration at a time. But in CSS we can chain together more than one declaration for each element. Let's say we want to make our h4 element a little bit more fancy by combining multiple declarations together.
h4 {font: 12px Ariel; color: green; background: yellow;}

This is the h4 style


Monday, April 2, 2018

JavaScript itself does not have multidimensional arrays, instead you can use an arrays of arrays instead.  Multidimensional arrays are basically arrays that you can reference by rows and columns.  The most obvious real world use is to store rows and columns of a database record.  Imagine if you have a row of the database product from the database from the table "Products".  Instead of storing each value in an individual variable you can store them in an arrays of arrays.

Let's say you have the following database Products table







This is a perfect scenario to use an arrays of arrays in JavaScript.

Here is how you would store the records, let's ignore the column headers and just concentrate on the record rows and columns.

Friday, January 19, 2018

Since an array is a collection of elements of objects, values, etc.  The most common function performed on it is to iterate through each elements of the array.  The most frequent way to do that is with a for loop.

Let's say you have an array with the following:

var numbers = ["one","two","three","four","five"];

The numbers array above contains five string elements, which also has a indexes associated with the it.  There's also a length that is defined with each array that we will use for the for loop we are about to write.  So what do the you length of the numbers array will be?

If we output the array to the browser with the statement console.log(numbers.length) do you think we will get the length to be 5 or 4?

If you guess 5 you are correct because there are five elements in the array.  However, the arrays have zero based indexes therefore the index is always length -1

for(var i = 0; i < numbers.length; i++)
{
     console.log(numbers[i]);
}

Friday, January 12, 2018

When you define an object as an Array in JavaScript you get the benefits of inheriting some useful methods with it.  Some of the common methods are those that allows you to add and delete elements from an array.  The .push() method adds an element at the end of the array, the unshift() method adds an element at the beginning of the array.  The delete keyword deletes an element at the specified index.

Let say you have an the following array:

var numbers = [3,4];

If you output the array in the browser console you will see that the array has two elements with the number 3 occupying index 0 and the number 4 occupying index 1.














Friday, January 5, 2018

In the previous post we created arrays of different types, in this post we are going to read the values from our arrays.

Let's work with the following arrays
  1. var numbers = [1,2,3,4];
  2. var stringArray = new Array("USA", "Canada","China");
  3. var objectArray = [{firstName: "Jane", lastName:"Johnson", weight:"115lbs"},{firstName: "Jack", lastName:"Johnson", weight:"200lbs"}];
Let's start with getting a value from an array:

To get the second value of an array you would write the following code by using the :

console.log(numbers[1]);
console.log(stringArray[1]);
console.log(objectArray[1]);












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);

The first example creates an empty array using the [ ] syntax, the second example creates an empty array by instantiating a new Array object with it's default constructor, then the third example creates an array with the Array constructor passing in the element argument of zero.  If you output the array with console.log(empty) they would all be the same output, an array with zero elements








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







By default the toString() method outputs the long form of the date and time.  If we want to output a format that is tied to the current locale of the browser.  We can call the toLocaleString() instead. Like the following:

console.log(date.toLocaleString())

and the output will be like the following:







The toString() method works for arrays as well.  Let's say we have an array of countries like the example below:

var countries = new Array("U.S.A","Canada","China");

We can output the toString() method to the console with the following code:

console.log(coutnries.toString());

and you would see the following output.






However, the toLocaleString() method will give you the same result because the method does not perform any special locale functions for you.  It only works for the date.  In order to out the locale representation for the array you need to write your own custom toLocaleString() method for the array.


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

   console.log(game.name);

  As you can see the output is as expected, it prints out the value of $n the private property because we have a getter method name()  things get interesting when we try to assign a value to name.  Its a bit confusing because we access the name method with a dot notation, the same as how we would access a property.

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();

        product.name = "Chai";
        product.category = "Tea";
        product.country = "India";
        product.badProperty = "Bad Property";
        product.badProperty2 = "Bad Property 2";
        product.supplier = {
            name: "ACME Tea Of India",
            location: "New Delhi"
        };

console.log(product);

If you view the above code in a web browser window you will see the following.












We are going to use the delete operator to delete badProperty and badProperty2.  As with the way we access properties we can delete properties with either the dot notation or the [] operator.  To delete the properties type in the following.

delete product.badProperty;
delete product["badProperty2"];

If you type console.log(product) again the two properties will no longer be there












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();

        product.name = "Chai";
        product.category = "Tea";
        product.country = "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.

product.city; or type console.log(product.city)







If the developer still persists and still tries to access property by checking it's length he will get the TypeError:








As you can see these errors are not very descriptive, so the best thing to do is to avoid them all together.  The way to do that is to check to if a property exists before you access it with the example below.

var length = undefined;

if(product)
  if (product.city)
      length = product.city.length;


Now if console.log(length) we will get an undefined if the "city" property does not exist.  It's way better than getting a TypeError exception and it's the expected result because you initialized the length variable to "undefined".  Another alternative is to use the .hasOwnProperty() method or the in
operator to test if the property exists in the product object.

For the .hasOwnProperty()

The code would look something like this

if(product.hasOwnProperty("city")
     length = product.city.length;

With the in operator the code would look something like this.

if("city" in product)
   length = product.city.length;

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.


This is H1

This is a paragraph tag!



As you can see even without any line break tag <br/> the elements puts at tag all by itself.

The inline-level elements:

The inline-level elements are the nice kid that shares toys with his friends, while his CEO friend the block elements tries to dominate everything.  If you have to think of it that way you can!  The inline-element works within the context/text etc. and does not generate a line break.

For example if we put a <strong> in the middle of the paragraph tag text it won't generate a line break. with something like this <p>This is a <strong>paragraph</strong> tag!</p>


This is a paragraph tag!


As you can see the <strong> tag in the middle of the sentence did not break up the text into a new line.


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();

        product.name = "Chai";
        product.category = "Tea";
        product.country = "India";
        product.supplier = {
            name: "ACME Tea Of India",
            location: "New Delhi"
        };

        console.log(product);
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 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"













3. A login prompt pops up, log into your Azure account














4.  Once logged in, you will be connected to your 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.



























3. Now type into Powershell the command Import-AzurePublishSettingsFile "path of the publishsettingsfile"




4. Now you are connected to Azure from Powershell

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 https://portal.azure.com
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 : https://portal.azure.com
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 http://7-zip.org/download.html 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 https://manage.windowsazure.com

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

1.  Type into the browser https://manage.windowsazure.com/
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.

Follow the steps below to create a virtual network in Azure:

1.  Click on the "Networks" link on the left hand side





















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

product.name

or with array notation

product["name"]

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"
});

console.log(person);

Here is how the object looks like: