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

Wednesday, April 22, 2015

Let's face it, most of us starts blogging so that we can can hopefully retire in the Caribbean using money that we make from our blog. Well to do that we need ads on our blog. In this blog post we will go over the steps to associate, and setup Adsense ads on your Blogger blog.

Step-By-Step Instructions:

1. Log into your Blogger Blog account, then click on Earnings → AdSense

Monday, April 20, 2015

Blogger : Import Blog Posts From Another Blogger Blog

In the previous blog we've exported a blog from Blogger. In this blog we will import the .xml file that we've exported from that blog.

Step By Step Instructions:

1. Sign into the blog the you want to import your blog posts to

2. Under the "Settings" section click on the "Other"

Sunday, April 19, 2015

Blogger : Export Blog Posts From Blogger Blog

In this blog we will go over how to export your blogs in Google's Blogger blogging application.

Step-By-Step Instructions Exporting Your Blog:

1. Sign into the blog you want to export your blog posts from.

2. Select "Other" in the "Settings" section

Saturday, April 18, 2015

Blogger: Create A New Blog In Blogger

Creating a new blog in Blogger is really easy in fact it takes less than five minutes to do. Well maybe ten minutes if you have to take screen shots. Below is a step by step process of how to create your new Blogger blog.

Step-By-Step:

1. Log into blogger.com with your Google account, you will be logged into the Blogger dashboard

2. In the dashboard there will be button that says "New Blog", click on the button

Friday, April 17, 2015

JQuery: Search Context Parameter (Select Within A Container)

There's actually two selector parameters in JQuery. The second parameter is the context parameter. The context parameter specify the context that the selector should operate within that context. Let's use the bootstrap form field markup below as an example:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
        <title></title>
  <style>
   .form-label-spacing{
    margin-top: 15px;
   }
   
   .form-group-spacing
   {
    margin-left: 20px;
   }
  </style>
    </head>
    <body>
         <form>
   <div class="row">
   <div class="form-group form-group-spacing col-lg-4 col-md-4" id="registration-form">
    <label for="firstName" class="form-label-spacing">First Name:</label>
     <input class="form-control" type="text" id="firstName" placeholder="First Name">
    <label for="firstName" class="form-label-spacing">Last Name:</label>
     <input class="form-control" type="text" id="lastName" placeholder="Last Name">
    <label class="E-Mail form-label-spacing" for="E-Mail">Email:</label>
     <input class="form-control" type="email" id="E-Mail" placeholder="Email">
    <label class="form-label-spacing" for="password">Password:</label>
     <input name="Password"  class="form-control"  type="password" placeholder="Password">
    <div class="form-group">
     <label class="form-label-spacing" for="gender">Gender:</label>
      <div class="radio">      
       <label><input type="radio" name="gender" id="gender">Male</label><br/>
       <label><input type="radio" name="gender" id="gender">Female</label>
      </div>
    </div>

         <button type="button"  class="btn btn-default">Sign Up</button>

    </div>
    <div class="col-lg-8 col-md-8"/>
   </div>
      <div class="row">
   <div class="form-group form-group-spacing col-lg-4 col-md-4" id="another-registration-form">
    <label for="firstName" class="form-label-spacing">First Name:</label>
     <input class="form-control" type="text" id="firstName" placeholder="First Name">
    <label for="firstName" class="form-label-spacing">Last Name:</label>
     <input class="form-control" type="text" id="lastName" placeholder="Last Name">
    <label class="E-Mail form-label-spacing" for="E-Mail">Email:</label>
     <input class="form-control" type="email" id="E-Mail" placeholder="Email">
    <label class="form-label-spacing" for="password">Password:</label>
     <input name="Password"  class="form-control"  type="password" placeholder="Password">
    <div class="form-group">
     <label class="form-label-spacing" for="gender">Gender:</label>
      <div class="radio">      
       <label><input type="radio" name="gender" id="gender">Male</label><br/>
       <label><input type="radio" name="gender" id="gender">Female</label>
      </div>
    </div>

         <button type="button"  class="btn btn-default">Sign Up</button>

    </div>
    <div class="col-lg-8 col-md-8"/>
   </div>
  </form> 
    </body>
</html>

Thursday, April 16, 2015

CSS: Using Bootstrap To Make Your Form Fields Look More Professional

In this blog we will turn ordinary form fields to a more modernized and professional looking form fields by using the bootstrap library. Let's say we have the following form fields with no formatting, or layouts applied to it with the following markup.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
        <title></title>
    </head>
    <body>
         <form>
   First Name: <input name="First Name" type="text"><br/>
   Last Name: <input name="Last Name" type="text"><br/>
   E-Mail: <input name="E-Mail" type="text"><br/>
   Password: <input name="Password" type="password"><br/>
   Gender:
   <br/><input type="radio" name="gender" value="male" checked>Male<br/>
    <input type="radio" name="gender" value="female">Female<br/> 
   <input type="submit" value="Sign-Up"/>
  </form> 
    </body>
</html>

Tuesday, April 14, 2015

JQuery Basics : Selecting Attributes

In the previous blog about selectors we've gone over what a selector is. In this blog we will something that is a little more advance and use JQuery to select the attributes within a HTML element. Most HTML elements have attributes associated with them for example the <input> element has the id, name, and type in them. So let's create a typical registration form input fields for this example and use JQuery to select the form fields according to what attributes the form fields have:

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>JQuery Attributes Selector Demo</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script>
  </script>
    </head>
    <body> 
  <form>
   User ID: <input name="UserId" type="text"><br/>
   First Name: <input name="First Name" type="text"><br/>
   Last Name: <input name="Last Name" type="text"><br/>
   E-Mail: <input name="E-Mail" type="text"><br/>
   Password: <input name="Password" type="password"><br/>
   Gender:
    <br/><input type="radio" name="gender" value="male" checked>Male<br/>
    <input type="radio" name="gender" value="female">Female<br/>
   
  </form>
    </body>
 </html>

Monday, April 13, 2015

JQuery: Using Conditional Comments To Support Older Version Of Internet Explorer

A lot of you may have wonder why JQuery releases versions 1.x and 2.x, the reason is because the 1.x versions are released to support older versions of Internet Explorer. What a lot of people don't realize is that the 2.x version performs better, so if you have the choice between 1.x and 2.x you should choose the 2.x versions. Use the 1.x versions only if you have to. In this blog we will show how to use conditional comments which Microsoft created in Internet Explorer 5. Since it's specifically created for Internet Explorer other browsers will ignore it. Since Internet Explorer 9 seems to be the divider for support we will use it as the base case for our conditional comments. Here is the code to use the conditional comments to support older versions of Internet Explorer.

<html
    <head>
        <meta charset="utf-8" />
        <title>JQuery Conditional Comments Demo</title>
  <!-- [if lt IE 9]>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <![endif]-->
  <!--[if gte IE 9]><!-->
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <!--<![endif]-->
    </head>
    <body> 
    </body>
</html>

Friday, April 10, 2015

JQuery Basics: Selectors

Selectors are at the heart of JQuery in almost every task you want to perform in JQuery, your initial setup is to use a selector to select an element in the DOM to perform some action on it. So in this blog we will show you some the common selectors that you will have to use in JQuery to get the job done.

First let's make sure JQuery is working by creating an HTML file with a little JQuery test script in it:

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>JQuery Selector Demo</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <script>
   $(document).ready(alert("jquery is working"));
  </script>
    </head>
    <body> 
    </body>
 </html>

Thursday, April 9, 2015

Node.js : Setting Up Node.js "Hello World" Node.js

So according to Node.js's official website http://www.nodejs.org, NodeJs is

“a platform built on Chrome’s JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.”

So what does that mean in English? Well it basically means that Node.js enables developers to use JavaScript like it's a server. Allowing you to do JavaScript server-side like development without the backend servers. Under the hood of Node.js is the virtual machine call V8. If you need something lightweight Node.js should be able to fit the bill especially on the client side.

Here are the steps to step up Node:

1. Go to the website https://nodejs.org/
2. Click on the "Downloads" tab
3. Download the install file for the your system

Wednesday, April 8, 2015

Bootstrap: Setup Bootstrap Locally

If you use Bootstrap in a local environment it would make sense to use the local version of Bootstrap that you've downloaded from the Bootstrap website. Follow the steps below to setup Bootstrap locally.

Step-By-Step Instructions:

1. Go the website http://getbootstrap.com then click on the "Get Started" tab. You will see three choices for download. You want to click the first button that is labeled "Download Bootstrap"

Tuesday, April 7, 2015

JavaScript: undefined vs null

In JavaScript there are two kinds of values that most developers often believed to be the same. The "undefined" the "null" values. When understood correctly, they mean slightly different things.

undefined : no value has been defined, usually this means that a variable or object has not been defined or declared before you use it.
null : means that there is a value, but the value is not a valid value

undefined Example: In the example below we are going to examine the "undefined" value, and try to recreate some of the scenarios that an "undefined" value will be returned.

In an HTML file type in the following code:

<!DOCTYPE html>
<html lang="en">
<head>
<title>undefined vs null</title>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
 var person = {
    firstName : "Jane",
    lastName : "Cat"
 };
 
 document.writeln("First Name: " + person.firstName + "<br/>");
 document.writeln("Last Name: " + person.lastName + "<br/>");
 document.writeln("Phone : " + person.phone + "<br/>");
</script>
</head>
<body>
</body>
</html>

Friday, April 3, 2015

JSON (JavaScript Object Notation) : Using JSON With JavaScript

JSON is becoming the standard way to exchange data in a relatively short amount of time. The reason is because JSON is easier to work with than XML.

JSON Object:

JSON object is made up of name/value pairs

Single Object:

{ "firstName" : "John"}

Thursday, April 2, 2015

GIMP: Cropping An Image

Cropping an image is something that you will do often when you want to take out parts of the photo is uninteresting or distracting. For this blog we will be using the Key West photo that we resized in this blog.