Learning to Code: Reflections

Monday, August 10, 2015

Day 131: Ch 61 "A Smarter Way to Learn JavaScript"

Today, I'm starting with Chapter 61 The DOM: Junk Artifacts and Nodetype. There's 89 chapters in the book, so that means I'm a little over two thirds of the way done. I've learned quite a bit, and it makes me really happy to see myself getting closer and closer to my goal of becoming a web developer.

I learned about junk artifacts, which are placeholder text nodes which the browser inserts at various points, such as carriage returns. These artifacts make moving through the nodes more cumbersome, and various ways have been devised to get around this. One way, when wanting to target a particular element, for example, the text node within a paragraph element node, is by giving the paragraph an id and then directing JavaScript to go straight to it, like so:

document.getElementById("p2").innerHTML = "All his men.";

The code replaces the text node within "p2" with the string, "All his men." This code:

var nType = targetNode.nodeType;

Returns a number. A 1 means the targeted node (you don't type "targeted node," you type in the variable that represents the targeted node) is an element node, while a 3 means the targeted node is a text node.

Okay, I finished chapter 61, now I'm working on Chapter 62 The DOM: More Ways to Target Elements.

I finished Chapter 62, which introduced .lastChild, .firstChild, .parentNode, .nextSibling, and .previousSibling. I'll start tomorrow off on Chapter 63 The DOM: Getting a Target's Name.

SUMMARY OF CODING SKILLS

Total Treehouse Points: 5,385
Treehouse Points by Subject Matter (Miscellaneous not included):
HTML: 663
CSS: 1,599
Design: 1,193
Development Tools: 747
Javascript: 1,120

Treehouse Ranking (%): "You have more total points than 94% of all students."

Treehouse Badge(s) Earned Today:

Treehouse Courses Completed:
How to Make a Website
HTML
CSS Foundations
CSS Layout Techniques

Aesthetic Foundations
Design Foundations
Adobe Photoshop Foundations
Adobe Illustrator Foundations (66% complete, switched focus from web design to web dev)
Git Basics
Introduction to Programming
Javascript Basics

Codecademy (& other) Courses Completed:
HTML and CSS (Codecademy)

Books Read or in Progress:
Completed: "Head First HTML and CSS," by E. Robson & E. Freeman
In Progress: "Eloquent JavaScript," by Marijn Haverbeke (On pg 27)
In Progress: "Head First Javascript," by Eric Freeman and Elisabeth Robson (On pg 56)
In Progress: "A Smarter Way to Learn Javascript," by Mark Myers (on pg 199)

My Progress on The Odin Project:

1. Introduction to Web Development 100% Complete

2. Web Development 101 29% Complete

3. Ruby Programming 0% Complete

4. Ruby on Rails 0% Complete

5. HTML5 and CSS3 0% Complete

6. Javascript and JQuery 0% Complete

7. Getting Hired as a Web Developer 0% Complete

Hours Spent Coding Today: 2

Total Hours Coding: 595

Sunday, August 9, 2015

Day 130: Ch. 60 "A Smarter Way to Learn JavaScript"

I played around a little bit with that initial website project, www.adancode.com today. I haven't paid any attention to it, preferring to use my github account and linked in for networking and showing my projects, but once I get a larger number of projects to show, I'll update that site. For today, though, I wanted to make a change to an image on the site, to practice, and it was pretty easy, all I did was replace the old image with a new image and I named the new file the same as the old file in the FTP, and that was that. No further changes needed because all the html pointed to the same location.

It's great because I feel pretty comfortable with using the FTP software now, it's been a while since I last used it, and it only took a couple of minutes to do what I wanted to do.

So, I started earlier today on Chapter 60 The DOM: Finding Children. If we take this code as the starting point:

<body>
    <div id="cal">
      <p>Southern Cal is sunny.</p>
      <p>Northern Cal is rainy.</p>
      <p>Eastern Cal is desert.</p>
    </div>
    <div id="ny">
      <p>Urban NY is crowded</p>
      <p>Rural NY is sparse.</p>
    </div>
</body>

Then all the code below can be used to read the contents of the last paragraph of the markup.

var div = document.getElementById("ny");
var p = div.getElementsByTagName("p");
var lastP = p[1].innerHTML;

OR

var p = document.getElementsByTagName("p");
var contents = p[4].innerHTML;

OR

var p = document.childNodes[0].childNodes[1].childNodes[1];
var contents = p.innerHTML;

The third version is the one that I'm learning about in this chapter. In practice, though, we would usually code something like this to target that same text inside the second paragraph under the "ny" div:

var d = document.getElementById("ny");
var p = d.childNodes[1];
var contents = p.innerHTML;

This is interesting:

<div id="sample">
<p>This is a<em>piece</em> of a larger puzzle.</p>
</div>

For the code above, this code:

var d = document.getElementById("sample");
var emElement = d.childNodes[0].childNodes[1];

Would pull the <em> element, which is neat, so the "This is a" would be the first child of the <p> element, the <em> element is the second child of the <p> element, and the "of a larger puzzle" is the 3rd child of the <p> element. This is because any element enclosed by another element is a child of that element, so the text element is the first, the <em> tag is the second, and the last text element is the 3rd.

Okay, I finished chapter 60. The next chapter is Chapter 61 The DOM: Junk Artifacts and Nodetype.

SUMMARY OF CODING SKILLS

Treehouse Badge(s) Earned Today:

Treehouse Courses Completed:
How to Make a Website
HTML
CSS Foundations
CSS Layout Techniques

1. Introduction to Web Development 100% Complete

2. Web Development 101 29% Complete

3. Ruby Programming 0% Complete

4. Ruby on Rails 0% Complete

5. HTML5 and CSS3 0% Complete

6. Javascript and JQuery 0% Complete

7. Getting Hired as a Web Developer 0% Complete

Hours Spent Coding Today: 2

Total Hours Coding: 593

Saturday, August 8, 2015

Day 129: Ch. 55 "A Smarter Way to Learn JavaScript"

I started today on Chapter 55, Setting Styles. Okay, I've completed that chapter.

Now I'm on Chapter 56 Target All Elements By Tag Name. Okay, I've completed that chapter.

Now I'm on Chapter 57 Target Some Elements By Tag Name. Okay, I've completed that chapter.

Now I'm on Chapter 58 The DOM. So, this chapter is the longest chapter so far in the book, and I've really been looking forward to it. Today's been great!

So the DOM is simply a model that organizes a website into a hierarchical organization chart, with the goal of being able to locate any part of the site. The different subdivisions of a site are called nodes. Multiple paragraphs within a div, for example, are co-equal nodes, so one is not ranked lower than another simply because it is lower on the webpage.

There are three kinds of nodes, document, element, and text. Usually, a page starts with a document node, then comes the html (element) node, followed by the head (element) and the body (element) node, which are co-nodes, then the head node has a title (element) node within it and a text node within that. The body node meanwhile has it's own title nodes within it and paragraph nodes and text nodes within that.

Okay, I completed chapter 58.

Now I'm on Chapter 59 The DOM: Parents and Children.

Okay, I completed chapter 59.

Now I'm on Chapter 60 The DOM: Finding Children.

SUMMARY OF CODING SKILLS

Treehouse Badge(s) Earned Today:

Treehouse Courses Completed:
How to Make a Website
HTML
CSS Foundations
CSS Layout Techniques

1. Introduction to Web Development 100% Complete

2. Web Development 101 29% Complete

3. Ruby Programming 0% Complete

4. Ruby on Rails 0% Complete

5. HTML5 and CSS3 0% Complete

6. Javascript and JQuery 0% Complete

7. Getting Hired as a Web Developer 0% Complete

Hours Spent Coding Today: 3

Total Hours Coding: 591

Friday, August 7, 2015

Day 128: Ch. 53 "A Smarter Way to Learn JavaScript" and Buzzmill Coffee Shout Out!

I found a neat coffee shop called Buzz Mill, in Austin. I studied here last night until like 3 a.m. The music is a bit loud in the main area, but that's okay, because there's a quiet room if I ever want it to be real quiet, and also, I have some special ear plugs that fit really well, so I can wear them, but sometimes they have interesting music, so it can be pleasant background sound anyhow.

What I really like about the place is that they are open 24/7, so I can do long stretches of studying without having to relocate, and also, it's got a really great vibe, like if I want to take a break from studying, I can go to the outside section and watch a band if there is a band putting on a show (it's Austin, "Live Music Capital of the World"). Also, they post the wi-fi login on a little chalkboard that looks like it's a cross-section of a log, which means I don't have to ask them for it if it changes, but it looks like they don't change it too often, or at all, which is even better, unlike other places that change it frequently and make you ask every time, sometimes having to stand in line for a while to do so. Sure, having to ask for the wi-fi password every single time (at the places that change it frequently) is usually only a minor inconvenience, but nonetheless, as a business owner myself who takes pride in providing top notch service to my clients, I enjoy that this place values my time enough to streamline the process as much as possible.

In sum, they're my kind of business, I feel really comfortable here, and that's the main thing, so until that changes, it's going to be my go-to spot for coding! I recommend it, check it out if you're in Austin!

I started today on Chapter 53 Swapping Images. We used functions to swap images when a used clicked on an image (onClick) or hovered over an image (onMouseover).

Okay, I finished chapter 53, and now I'm on Chapter 54 Swapping Images and Setting Classes. Okay, I finished chapter 54. Next is Chapter 55 Setting Styles.

SUMMARY OF CODING SKILLS

Treehouse Badge(s) Earned Today:

Treehouse Courses Completed:
How to Make a Website
HTML
CSS Foundations
CSS Layout Techniques

1. Introduction to Web Development 100% Complete

2. Web Development 101 29% Complete

3. Ruby Programming 0% Complete

4. Ruby on Rails 0% Complete

5. HTML5 and CSS3 0% Complete

6. Javascript and JQuery 0% Complete

7. Getting Hired as a Web Developer 0% Complete

Hours Spent Coding Today: 3

Total Hours Coding: 588

Thursday, August 6, 2015

Day 127: Ch. 51, "A Smarter Way to Learn JavaScript"

Today I went at Chapter 51 Reading and Setting Paragraph Text. We used this code:

<p id="slowLoris">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.<a href="javascript:void();"onClick="expandLoris();">Click for more.</a></p>

It makes the paragraph have a link at the end that says "Click for more." When the user clicks it, the paragraph expands, that is, new content is added to it. In order to make it expand to this:

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

We would need to use this function (you can name the function whatever you want, within variable rules):

function expandLoris() {
var expandedParagraph = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.";
document.getElementById("slowLoris").innerHTML = expandedParagraph;
}

Remember that that function would usually be in a separate JavaScript file, while the original paragraph would be in the initial html file. Here's the html file I used, and you can see the link to the external JavaScript file right above the body tag:

<!DOCTYPE html>
<html>
<head>
<title>Display Modes</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<p id="slowLoris">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.<a href="javascript:void();"onClick="expandLoris();">Click for more.</a></p>
<script src="myscripts.js"></script>
</body>
</html>

And then here's the JavaScript code (the file, in this case, was named myscript.js):

function expandLoris() {
var expandedParagraph = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.";
document.getElementById("slowLoris").innerHTML = expandedParagraph;
}

The book actually didn't go over the linking to the JavaScript instruction in this chapter, because we had already gone over that earlier, but since I wanted to test out the material on an actual document, I went ahead and set up an html file, a JavaScript file, and linked the two. I love how everything keeps building on everything else.

Okay, I finished Chapter 51, next is Chapter 52 Manipulating Images and Text. In order to give a user the option to have an image disappear, you first give the image an id, like so:

<img src="picture.jpg" id="picone">

Then we add an event handler:

<img src="picture.jpg" id="picone" onClick="makeInvisible();">

As an aside:

document.getElementById(sampleElementId).innerHTML;

Is for paragraphs, divs, and other HTML elements, while:

document.getElementById(sampleElementId).value;

Is for form fields.

Back to images, then, there's a CSS class for invisibility:

.hidden {display:none;}

And here is the function that gives the image a class of "hidden," so that is disappears.

function makeInvisible() {
document.getElementById("picone").className = "hidden";
}

If you want to add a new class to the element, but also retain any classes it already has, you would do that like so:

function makeInvisible() {
document.getElementById("picone").className += " classname(like hidden)";
}

Make sure to put a space before the class name in the += version. O.k., I completed chapter 52, next is Chapter 53 Swapping Images.

SUMMARY OF CODING SKILLS

Treehouse Badge(s) Earned Today:

Treehouse Courses Completed:
How to Make a Website
HTML
CSS Foundations
CSS Layout Techniques

1. Introduction to Web Development 100% Complete

2. Web Development 101 29% Complete

3. Ruby Programming 0% Complete

4. Ruby on Rails 0% Complete

5. HTML5 and CSS3 0% Complete

6. Javascript and JQuery 0% Complete

7. Getting Hired as a Web Developer 0% Complete

Hours Spent Coding Today: 3

Total Hours Coding: 585

Wednesday, August 5, 2015

Day 126: Linked in, The Odin Project Study Group, and Student Blogs

Today I visited the Odin Project study group on Facebook and worked on my Linked in Profile. I made linked in connections with my fellow students in the study group and I also added links to my blog (this one) and to my GitHub on my linked in profile.

I also looked up blogs made by other Odin Project students, it was a pretty inspiring day, especially reading a certain blog post by one student whose journey was very similar to mine. He took two years to go from starting studying html and css to landing a position as a developer. He also, like me, got distracted with studying web design through a lack of an organized curriculum. He also, like me, enjoyed the Treehouse courses, and then found the Odin Project's structured curriculum to be the next step. He mentioned that he did quite a few 12 hour days within the process, and on a sample week in his blog he had about 20 hours one week and 30 hours another week. That means he was doing about 4 to 6 hours a day on those weeks. That's much more than I've been putting in lately, but he went through the same things I did, for example, of going a whole month or two without doing any studying, and then getting back on track. It was really great to read his post, but out of respect for his privacy, I won't be posting a link to it.

That said, it was amazingly inspiring.

I signed up for a website called code wars. To sign up, you first had to pass two code challenges, but they were really simple. I'll explore the website further later.

SUMMARY OF CODING SKILLS

Treehouse Badge(s) Earned Today:

Treehouse Courses Completed:
How to Make a Website
HTML
CSS Foundations
CSS Layout Techniques

1. Introduction to Web Development 100% Complete

2. Web Development 101 29% Complete

3. Ruby Programming 0% Complete

4. Ruby on Rails 0% Complete

5. HTML5 and CSS3 0% Complete

6. Javascript and JQuery 0% Complete

7. Getting Hired as a Web Developer 0% Complete

Hours Spent Coding Today: 3

Total Hours Coding: 582

Monday, July 27, 2015

Day 125: General Assembly Web Dev Meetup

I joined The Odin Project study group on Facebook, and also, CodeBuddies.com, which is a site used for taking part in Google Hangouts for studying purposes.

I went to a web development meetup today at the public library on Cesar Chavez, in downtown Austin, hosted by General Assembly. I thought it would be a great opportunity to learn about General Assembly. The class was hosted by Elias Carlston, a web developer who started out as a coding hobbyist. He emphasized the importance of notation in code, and the similarities between learning a foreign language and learning to code.

He defined a bug as code that produces an undesired output. Sometimes a bug can be redefined as a feature, haha, if you change your mind about the usefulness of the output. Web development is a niche of programming. Some programming, for example, in certain car parts, is not web development, as there may not be a connection to the internet. He mentioned DRY, "don't repeat yourself." He mentioned that it is usually not ideal to reinvent the wheel, so we should adopt code from a library, if possible.

Computer scientists are not necessarily web developers, and web developers deal more strongly with monetizing the product and with user experience, for example. He discussed Twitter's fail-whale, and how letting users know how many followers they had in real time was taking up a large amount of computing power.

There's a quote:

"It's going to be hard whether you learn fundamentals or not...might as well be a superstar."

Dennis Rodman was told he good overall, but was great at defense. So, he focused intensely on defense, and became great.

We should learn the fundamentals so as to build a solid foundation on which to grow on. There's usually a complicated way to do things, and a shortcut way to do things, for example, via the use of a library. We should learn the complicated way to it, so that we understand why the shortcut way works, but we should use the shortcut way.

General principles:

1. Security
2. Stability
3. Scalability

The speaker also spoke of premature optimization, which deals with not optimizing code if you don't have to, basically in order to ship a feasible product within a desired time frame. We can then optimize once it needs to be done and we have more resources with which to do so.

You have to enjoy solving problems, coding, and the logical/mathematical beauty of the code, in order to be willing to put in the time required. The distinction between front end and back end only began to be really discussed in about 2008. However, there isn't a hard line between the two. Elias stated he's never had a project where he didn't have to at least do a little bit of back end work (Elias is a front end specialist).

HTML, CSS, and JavaScript are the most common files. An analogy could be made with the human body, with HTML as the skeleton, CSS as the skin, and JS as the muscles. If a browser doesn't understand an HTML tag, for example a geo-location tag run on an older browser will simply be ignored. This makes HTML very flexible, because support for new tags can be added to newer browsers, without crashing older browsers, as the new tags will simply be ignored by the older bowsers.

He spoke of single page apps, noting gmail as an example, which is in JavaScript. He said these apps are becoming more and more popular, because the page doesn't need to be reloaded to access various functions of the app. JavaScript is able to make these pages, and so front end developers are becoming JavaScript developers.

JQuery can be used to minimize problems caused by developers having to create different versions of their code for each browser. JQuery is becoming less necessary as browsers are standardizing.

Elias then moved over to talking about the server side. We went over DNS (domain name system), which converts your domain name into an IP address. MySQL is open source database software, it's free, can be scaled up, and it's very popular. Oracle is database software which is used by banks and other high requirement users.

Java tends to be a more complicated back end programming language, which tends to correlate with high paying, professional, big company jobs. He mentioned that Ruby is an elegant language that's very user-friendly.

The instructor used starting your car as an analogy to using an API. We turn the key, and the car starts. We don't see the inner workings of how the car actually starts, as the pieces interact, we simply insert the key and twist, and our wrist motion then starts the car, almost as if by magic.

Apache and NGiNX (pronounced Engine X) are server software technologies. GUI is the Graphical User Interface, and it is pronounced gooey.

The # 1 skill for a web developer is desire. If you love coding, you will put in the effort required and be a great coder. Vietnam has been educating children in programming for about ten years, and many of their graduates are very, very competent. To work as a junior web developer, it can take you about 90 days, if you go at your training full time. Elias mentioned that the jobs are out there, if you put in the work.

If you want to do remote work, other than git/github, is there any web dev language that might give you an edge in securing a remote position? With remote work, your people skills matter a lot, more than any particular language, because you have to work as a team/coordinate, while dealing with time differences and distance.

O.k., now let's get back to Chapter 51...

SUMMARY OF CODING SKILLS

Treehouse Badge(s) Earned Today:

Treehouse Courses Completed:
How to Make a Website
HTML
CSS Foundations
CSS Layout Techniques

1. Introduction to Web Development 100% Complete

2. Web Development 101 29% Complete

3. Ruby Programming 0% Complete

4. Ruby on Rails 0% Complete

5. HTML5 and CSS3 0% Complete

6. Javascript and JQuery 0% Complete

7. Getting Hired as a Web Developer 0% Complete

Hours Spent Coding Today: 2

Total Hours Coding: 579