How the Web Works

Viking Code School Prep Work Q’s

Web Development Basics

  1. What is the internet?
    The internet is just billions of computers connected through wires run all over the Earth.
  2. How is information broken down and sent?
    Information is sent in packets to an IP address.
  3. What are packets?
    Packets are small bits of information sent over the internet.
  4. What is a “client”?
    You! Your browser or computer. Something that’s able to communicate with a server.
  5. What is a “server”?
    Server is where information is stored.
  6. What is HTTP and how does an HTTP request work?
    Hypertext Transfer Protocol. Protocol browsers and servers use to communicate. Browser will send a GET message across the internet when you enter a web address.
  7. What are DNS servers?
    Domain Name Servers are like a phone book. They hold all the domain names and match them with their IP addresses.
  8. What is HTML and how is it used?
    HTML (Hypertext Markup Language) is used to identify and display content.
  9. What is CSS and how is it used?
    CSS (cascading stylesheets) is used to style content.
  10. What is your browser’s Web Inspector (aka Developer Tools) and how can you use it to poke around in a page’s HTML?
    I use Chrome to see what the content and styling is for each HTML element
  11. What happens behind the scenes after you click “search” on
    Great explanation here:

    Unnamed QQ Screenshot20151209030654


JavaScript String Manipulation Challenge

Going through Udacity‘s free online JavaScript course, I came across this challenge:

Your Challenge

If given a string of a two word name formatted with any mix of capitalization, can you manipulate the string to ensure the first name has a capital first letter and the last name is totally capitalized? Assume there’s a space between the names. For instance, turning a string like "cAmEROn PittMAN" into "Cameron PITTMAN". Your answer should be a single string saved to the variable called finalName.

Take a look at MDN’s documentation on string methods for clues, then try it yourself!


My solution:

Unnamed QQ Screenshot20151001081020

The breakdown:

Line 1: var name = "AlbERt EINstEiN";

A variable called name has the value AlbErt EINstEiN. All lines in JS have to end with a semicolon so that the system knows it is the end of a line.

Line 3: function nameChanger(oldName) {

A function called nameChanger will take in an argument called oldName. All functions will start with a curly brace after the function name.

Line 4: var finalName = oldName;

A variable called finalName has the value of oldName.

Line 6:  var nameArray = oldName.split(' ');

The value of oldName is taken and a .split() method is called to make a string array from oldName. The array values are created using a ‘ ‘ (space) as the separator. For example, if
oldName = "AlbERt EINstEiN";
oldName.split(' ');
would equal have the values: [AlbERt', 'EINstEiN']

Then these values would be saved in a new variable called nameArray.

Line 7: var lastName = nameArray[1].toUpperCase();

The second value (since arrays start with 0, nameArray[1] would be the second value) in nameArray is changed to all uppercase letters. This is stored in a new variable called lastName. For example, if
nameArray = ['AlbERt', 'EINstEiN']
nameArray[0] = ['AlbERt']
nameArray[1] = ['EINstEiN']
would be equal to ['EINSTEIN']
var lastName = ['EINSTEIN']

Line 8: var firstName = nameArray[0].toLowerCase().split('');

The first value in nameArray is changed to all lowercase letters. Then the letters will be separated from each other since the .split(”) is an empty string. So if
nameArray[0] = ['AlbERt'],
firstName = ['a', 'l', 'b', 'e', 'r', 't'];

Line 9: var firstLetter = firstName.splice(1).join('');

firstName will start the array from the second value (1) and then the array will be joined together to form one string. For example:
firstName = ['a', 'l', 'b', 'e', 'r', 't'];
firstName.splice(1) = ['l', 'b', 'e', 'r', 't'];
firstLetter = ['l', 'b', 'e', 'r', 't'].join('') = ['lbert'];

.splice() method
.join() method

Line 10: var firstNameJoin = firstName[0].toUpperCase() + firstLetter;

The first value in the array firstName is changed to uppercase, then added to the value of firstLetter.
firstName = ['a', 'l', 'b', 'e', 'r', 't'];
firstName[0] = ['a'];
firstName[0].toUpperCase() = ['A']
firstNameJoin = ['A'] + ['lbert'] = ['Albert'];

Line 12: finalName = firstNameJoin + ' ' + lastName;

finalName = [‘Albert’] + [‘ ‘] + [‘EINSTEIN’] = [‘Albert EINSTEIN’];

Line 14: return finalName;

Saves the value of finalName.

Line 18: console.log(nameChanger(name));

'console.log' will show on the screen whatever is in the parentheses. Inside the parentheses, the function we made, nameChanger, is called with a parameter inserted called ‘name‘. ‘name‘ is the name of the variable that was defined in the beginning on Line 1.

There are many other ways to find a workable solution, so don’t think you HAVE to do it this way.

Rails for Zombies | Code School

I just completed the Rails for Zombies by Codeschool. It’s a FANTASTIC way to learn how Rails 4 works. The professor Gregg Pollack is great at explaining the code and how models are connected to controllers to views. The course Rails for Zombies Redux is free, includes 5 lessons, and follows the following structure: video lesson, 4-5 exercises to practice what you learn, wrap-up video.

There’s exercises after every video lesson that let you practice what Gregg explains in the video so you can apply what you learned. I highly recommend watching the video lessons more than once and have a pen and paper in hand (or whatever you use to take notes) to write down his clear explanations.

Here are some screenshots:

ruby for zombies

rails for zombies

rails for zombies codeschool

After completing the course, you can add a completion badge to your LinkedIn profile. I highly recommend this course to anyone learning Rails, and especially for before tackling the Hartl tutorial.

Cash Register lesson in Codecademy

While completing the Cash Register (step 3/7) exercise on Codecademy’s JavaScript course, I came across this answer from tony de araujo that helped me understand how the code I was writing was executed.

alt text

On line 29 we call the scan method from object cashRegister and pass in an item called “eggs”

“eggs” gets inserted into the function via the input parameter item which is an interface.

For this function call instance, “eggs” becomes the value of variable item.

The switch switches the case “eggs” to true, which triggers the function add on line 4 and the value of 0.98 is added to variable total on line 2.

In truth, the program only starts executing at line 29. All the stuff above line 29 is preliminary data that JavaScript will use once it starts running the program. What I mean is that JavaScript scans the program once and it makes an inventory of what is supposed to do. Then, it starts running at line 29 and downward.


Free Code Camp

A friend recommended a new free coding resource for learning full-stack development called Free Code Camp. I’ve been trying out their lessons the past two days to see how they are. I’m very impressed with their community, network, organization, and support. They don’t teach Ruby and Ruby on Rails, which is what I’ve been learning the past few months. Instead they focus more on JavaScript and Node.js.

This is what their curriculum looks like:

800 Hours of Practice:

    800 Hours of  Real World Work Experience:

  • 100-hour Nonprofit Project
  • 200-hour Nonprofit Project #1
  • 200-hour Nonprofit Project #2
  • 300-hour Nonprofit Project

I really love the idea that you can work on some real-world non-profit projects after you complete their lessons. It’s great to get real experience and add a project to your portfolio. I don’t know any other free or paid coding school that gives you such a great opportunity.

Their HTML and CSS portion was fairly easy to go through and it was a great review since I had learned it earlier in the year. Their jQuery and JavaScript lessons use Codecademy, so you will still need to go between the two websites. I’m currently going through the Free Code Camp JavaScript so we’ll see how their subsequent lessons fair.

Free Code Camp is also on LinkedIn as an education institute and they encourage you to add them to your LinkedIn profile. Also check out Free Code Camp on Github. They are also on Facebook. I joined the Atlanta chapter.

Github for Beginners

If you’re learning coding/programming and haven’t already, you must sign up for a Github account to showcase your work.

Some resources for learning Github:
I did these series of challenges twice. The first time I was completely lost, as it was my first time using the command line on my Windows computer. The second time around, I was able to fully understand every step.
This website is really simple and straightforward. Write down each of the steps listed in this guide to know what order you have to do git commands.
This is a great article that breaks down everything about Github and explains the who, what, when, where, why, and how.