Learning to Code: Reflections

Monday, January 4, 2016

Day 167: "JavaScript & JQuery," by Jon Duckett and Solving a Bug!

Something interesting happened today, I was so into my coding that I woke up super early, just to get started on the book...

I mean, really early, it's 5:30 a.m., and I went to bed at 1 a.m., so I've only slept 4 and a half hours. Sometimes I wake up at 6:30, 8, or 9 at the latest, depending on how early I want to be up and about and what I've got going on, but this week, I've been waking up at like 9 a.m., so 5:30 is a pretty big change.

That's fantastic.

Ok, I'm starting today on pg 314, learning more about JQuery today!!! I can't wait to learn enough to master the knowledge necessary to complete the Pomodoro Clock FCC project...

So, right before I got to studying, I checked my facebook and saw a post that a coder from San Francisco had made, her website was scrolling infinitely, and she wanted to make is stop doing that. She said she had been working on debugging it forever but could not figure it out.

So, I added this to the code:

body{ overflow-x: hidden;}

And that solved it, at least on Chrome for the Mac. I commented on her post letting her know! If she tries it and it works for her also, that will be the first time that I solve a real-world bug for someone else, and she's a web dev from San Francisco! I'm so stoked to see her reply.

Page 345 of the book is awesome. It shows how to add items to a list via Jquery.

Also, I learned how to grab the html file from any site and load it up on my text editor. It's super simple, but I had just never done it, I had only accessed the html for sites via the web dev console for Chrome or Firefox, for example.

All right, I'm on page 378, and it's 5:38 p.m. So far so good. I have to finish this book by tomorrow at midnight, so the more I finish today, the more leeway I have for tomorrow, in case some of the material takes me longer to complete than expected.

There's 622 pages in the book, so I'm 60.77% done with it. Let's see how far I can get today before I pass out!

I'm on page 412 now, learning about API's. The AJAX section was not familiar to me at all. I don't think I learned much from it because I haven't had a project yet where I needed to use AJAX technologies. That said, I'm looking forward to rereading that section of this book when I need to use AJAX technologies for one or more of the front end projects coming up.

I'm having a great day, I like being so productive.

I'm working with the geolocation API now.

Now I'm on Web Storage API, on page 420, which means I'm 67.74% done with the book.

JQuery UI accordion is a really neat feature that is discussed on page 130. It's simple to accomplish, yet the effect is very polished. JQuery UI tabs is neat also, but I like the accordion better.

I'm on page 434 now, learning about AngularJS. This is awesome. I feel like it's all coming together now. I'm learning about a software development approach called MVC (model view controller), which is the approach that Angular is based on.

I'm on pg 440, learning about platform API's.

I'm on pg 456, learning about error handling and debugging.

SUMMARY OF CODING SKILLS

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

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

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)
Console Foundations
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

Completed: "A Smarter Way to Learn JavaScript," by Mark Myers

Completed: "HTML and CSS," by Jon Duckett
In Progress: "JavaScript and JQuery," by Jon Duckett (on pg 456 of 622)

My Progress on The Odin Project:

1. Introduction to Web Development 100% Complete

2. Web Development 101 33% Complete
Note: I switched to FCC for the great online community and better updates/support.

My Progress on Free Code Camp (FCC):
1. Get Started with Free Code Camp Complete
2. HTML5 and CSS Complete
3. Responsive Design with Bootstrap Complete
4. Gear up for Success Complete
5. jQuery Complete
6. Basic JavaScript Complete
7. Object Oriented and Functional Programming Complete
8. Basic Algorithm Scripting Complete
9. Basic Front End Development Projects On 4 of 5
10. Intermediate Algorithm Scripting On 4 of 21 (#13 and #14 also done)
11. JSON API's and Ajax
12. Intermediate Front End Development Projects
13. Claim Your Front End Development Certificate
14. Upper Intermediate Algorithm Scripting
15. Automated Testing and Debugging
16. Advanced Algorithm Scripting
17. AngularJS
18. Git
19. Node.js and Express.js
20. MongoDB
21. Full Stack JavaScript Projects
22. Claim Your Full Stack Development Certificate

After the 800 hours of FCC work above, there are 800 more hours of non-profit coding projects.

Hours Spent Coding Today: 9

Total Hours Coding: 775

Sunday, January 3, 2016

Day 166: "JavaScript & JQuery," by Jon Duckett

Ok, I'm starting today on page 198, we're going over nodelists.

I'm on pg 234 now, working on modifying attributes and text via DOM manipulation.

I'm on pg 276 now, learning about events.

I'm on pg 304 now, learning about JQuery.

Closing out the day on pg 314, learning more about JQuery!

SUMMARY OF CODING SKILLS

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

Books Read or in Progress:

Completed: "Head First HTML and CSS," by E. Robson & E. Freeman

Completed: "A Smarter Way to Learn JavaScript," by Mark Myers

Completed: "HTML and CSS," by Jon Duckett
In Progress: "JavaScript and JQuery," by Jon Duckett (on pg 314 of 622)

My Progress on The Odin Project:

1. Introduction to Web Development 100% Complete

2. Web Development 101 33% Complete
Note: I switched to FCC for the great online community and better updates/support.

Hours Spent Coding Today: 9

Total Hours Coding: 766

Saturday, January 2, 2016

Day 165: "JavaScript & JQuery" by Jon Duckett

Today's the first day of the new year. I'm starting on page 96 of the Duckett book. I have to finish as much as possible today, so as to finish the book by my goal date of January 5th.

I learned a new way to create a function, via a function expressions, like so:

var area = function(width, height) {
return width * height;
};

You could then call it like so:

var size = area(3, 4);

When you use a function expression, it can only be called AFTER the interpreter gets to the declaration statement, whereas with a regular function you can call it before you have defined it, as long as it is defined somewhere in the code.

I'm on page 104 now. Gotta keep it up. We can create an empty object in two ways, here's two examples:

var hotel = new Object();

or

var hotel = {};

Either works. To add properties and methods, we would do this to add a property:

hotel.name = "Miramar";

or this to add a method:

hotel.checkAvailability = function() {
return this.rooms - this.booked;
};

To delete a property, we can do:

delete hotel.name;

If you just want to clear the value of a property, simply set it to a blank string, like so:

hotel.name = "";

This is a constructor function (note that its name is capitalized):

function Hotel(name, rooms, booked) {
this.name = name;
this.rooms = rooms;
this.booked = booked;
this.checkAvailability = function() {
return this.rooms - this.booked;
};
}

So then at any time, I can simply call the function, enter parameters, and it creates a new Hotel object. When we create an object using that function, we should use the new keyword, like so:

var miramar = new Hotel("Miramar", 400, 287);

I'm on page 130.

I learned about immediately invoked function expressions, which allows you to prevent other variables from intruding on your function, the abbreviation for these is IIFE.

We started working with milliseconds (a thousandth of a second), and it comes in handy when using the date object. There's 31556900000 milliseconds in a non-leap year. If you want to add 7 days time in milliseconds, you would do this:

today.getTime() + 7 * 24 * 60 * 60 * 1000

Neat.

The Logical Not logical operator reverses a boolean value, like so:

!(2 < 1)

Would evaluate to true, instead of false, due to the Logical Not operator.

When a variable has been declared, but not yet assigned a value, it would be undefined. If you try to do this:

('ten'/2)

The result would be NaN, which is a number data type value that stands for Not A Number.

Ok, I closed out the day on page 198.

SUMMARY OF CODING SKILLS

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

Books Read or in Progress:

Completed: "Head First HTML and CSS," by E. Robson & E. Freeman

Completed: "A Smarter Way to Learn JavaScript," by Mark Myers

Completed: "HTML and CSS," by Jon Duckett
In Progress: "JavaScript and JQuery," by Jon Duckett (on pg 198 of 622)

My Progress on The Odin Project:

1. Introduction to Web Development 100% Complete

2. Web Development 101 33% Complete
Note: I switched to FCC for the great online community and better updates/support.

Hours Spent Coding Today: 5

Total Hours Coding: 757

Thursday, December 31, 2015

Day 164: "JavaScript & JQuery" by Jon Duckett

Today I'm starting on page 64 of the JavaScript & JQuery book by Jon Duckett.

I'm on pg 96 now. I learned that you can have a function return two results, by using an array. The example os on pg 95 of the book, it's neat.

I made a commitment to finish the book by the 5th, because I've got to start making progress again on the Pomodoro Clock project.

It's 11:06 p.m., December 31st, the new year is about to start. I'm going to eat 12 grapes and make 12 wishes in a moment (it's a Spanish custom).

SUMMARY OF CODING SKILLS

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

Books Read or in Progress:

Completed: "Head First HTML and CSS," by E. Robson & E. Freeman

Completed: "A Smarter Way to Learn JavaScript," by Mark Myers

Completed: "HTML and CSS," by Jon Duckett
In Progress: "JavaScript and JQuery," by Jon Duckett (on pg 96 of 622)

My Progress on The Odin Project:

1. Introduction to Web Development 100% Complete

2. Web Development 101 33% Complete
Note: I switched to FCC for the great online community and better updates/support.

Hours Spent Coding Today: 2

Total Hours Coding: 752

Sunday, December 27, 2015

Day 163: Bill 'n' Bonnie's Website

All right, since I finished the book yesterday, I'm starting today by going over mobile first design briefly, and then I'm coding up the website for Bill and Bonnie, a married couple here who are mobile mechanics. It will be super basic, the main reason for it is simply to have something for people that find Bill and Bonnie on Yelp to click on. That, and for me to have a project I can start from zero to finish by myself, using mobile-first design principles. Later on, perhaps I'll add some special effects with JavaScript or JQuery.

For the mobile site, we can use max-width, and for the desktop site, we can use min-width. Now, for the in-between site, we can do this:

<style>
  @media (min-width: 500px) and (max-width: 600px) {
    h1 {
      color: red;
    }
  }
</style>

So that covers all the page widths between 500px and 600px. I'll be using a mobile-first design approach, so the first thing I'll do is design the mobile site, then build up from there. Once it's all designed, I'll code it up and deploy it. All right, let's get started!

O.k., I'm done with the site, I made it super basic, and I also made a Yelp account for Bonnie, that will be the more important thing, as people will actually be able to find her. Here's the yelp site:

And here's the actual site:

I also read 64 pages of the JavaScript book, it was lots of basics, nothing I don't already know, so I won't make any notes of it, but that's where I'll start my next entry.

SUMMARY OF CODING SKILLS

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

Books Read or in Progress:

Completed: "Head First HTML and CSS," by E. Robson & E. Freeman

Completed: "A Smarter Way to Learn JavaScript," by Mark Myers

Completed: "HTML and CSS," by Jon Duckett
In Progress: "JavaScript and JQuery," by Jon Duckett (on pg 0 of 622)

My Progress on The Odin Project:

1. Introduction to Web Development 100% Complete

2. Web Development 101 33% Complete
Note: I switched to FCC for the great online community and better updates/support.

Hours Spent Coding Today: 6

Total Hours Coding: 750

Thursday, December 10, 2015

Day 162: "HTML & CSS," by Jon Duckett

All right, I left off on page 393 last time, so that's where I'lll start off today. The current theme is grid-based layouts, which is great, because I really wanted to go over that again.
The book went over the 960 grid system and how to use multiple stylesheets, if desired. If we link to CSS and also use the @import rule within the CSS, the rest of the code in the CSS style sheet takes precedence over the code within the @import rule (because we always place the @import rule at the top of the CSS file, and the CSS below it, being after, would take precedence.

We went over how the new HTML5 elements are treated as inline element by older browsers, and the code we should enter to avoid this issue.

All right, I finished the book. It did not go over media queries, so I'll have to refresh on that. I'm thinking I will code and deploy the mobile mechanic website tomorrow. That, or start on the "JavaScript & JQuery" book.

SUMMARY OF CODING SKILLS

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

Books Read or in Progress:

Completed: "Head First HTML and CSS," by E. Robson & E. Freeman

Completed: "A Smarter Way to Learn JavaScript," by Mark Myers

Completed: "HTML and CSS," by Jon Duckett
In Progress: "JavaScript and JQuery," by Jon Duckett (on pg 0 of 622)

My Progress on The Odin Project:

1. Introduction to Web Development 100% Complete

2. Web Development 101 33% Complete
Note: I switched to FCC for the great online community and better updates/support.

Hours Spent Coding Today: 4

Total Hours Coding: 744

Friday, December 4, 2015

Day 161: "HTML & CSS," by Jon Duckett

All right, I'll do the website after I finish this book, in case I want to apply more of the HTML5 on my site, and just to see if I can learn a bit more that will allow me to add some features to the site. The site's going to be deploying live, and it's more work to deploy and make changes to a live site, so I want to make sure I've got a good product before it's deployed.

I'm up to pg 393 of the book now, and I'll stop there today. It's been a great refresher so far, my goal is to finish the book tomorrow and perhaps the webpage as well.

I went over the float and clear properties, which was great, as well as the z-index, positioning, fonts, colors, and many other HTML and CSS basics. My blog notes on the book are sparse, but that's because most of the content is material I already understand and have actually blogged about earlier.

SUMMARY OF CODING SKILLS

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

Books Read or in Progress:

Completed: "Head First HTML and CSS," by E. Robson & E. Freeman

Completed: "A Smarter Way to Learn JavaScript," by Mark Myers

In Progress: "HTML and CSS," by Jon Duckett (On pg 393 of 490)
In Progress: "JavaScript and JQuery," by Jon Duckett (on pg 0 of 622)

My Progress on The Odin Project:

1. Introduction to Web Development 100% Complete

2. Web Development 101 33% Complete
Note: I switched to FCC for the great online community and better updates/support.

Hours Spent Coding Today: 6

Total Hours Coding: 740