Learning to Code: Reflections: 2016

Sunday, September 4, 2016

Day 316: React

All right, I've got today, tomorrow, and the first part of Tuesday to dive deep into either React and the MERN stack or PHP/Laravel. I could go either way, as I'm open to learning PHP, and Laravel looks really powerful, but at the moment, I decided to dive deeper into React and the MERN stack the goal being to get myself up to "employable" level in that stack, and also, to become pretty good at at least once stack before I start diving into a completely new stack.

I figure if I can get several MERN stack projects up (MySQL is cool too, I like both MongoDB and MySQL), I'll be in a strong position to start applying to Jr. Dev positions.

So, first on the agenda for today is a Team Treehouse course on React. It's supposed to take 183 min (about three hours), but we'll see, the estimated course completion times on Treehouse are sometimes very optimistic.

Now, I've already completed one React project, but I want to grasp React at a very high level, so I'm starting from the basics today, I'm not afraid of putting in time learning the fundamentals of anything! :)

Ok, I just had an issue with the React tutorial, the tutorial wasn’t using a server and the page would render on Firefox, but not on Chrome due to the CORS error, so I asked in the forum about that and a fellow said that Chrome is more finicky than Firefox on that, so I should set up a local server and run it that way. Before the boot camp, I would have been like, “Set up a local server with react-router? Huh?” Now, I was like…it’ll be just a few minutes…got it up and running using react-router and all those dependencies. Moving along.

Not going to lie, that feels pretty sweet. :)

That said, one of the forum members said, "Adam, using React Router to set this project up is like using a bazooka to kill an ant." Hahaha, he's right, and as a minimalist, I normally avoid doing things like that, but I just wanted to be able to do the course and happened to get that done in a few minutes. He suggested I download an npm package, http-server, which, after being installed globally (you can do that by entering npm install http-server -g into the command line) allows you to run a server with this simple command (while in your project's root directory):

hs .

That's it. It worked, and it's great.

You can find the package here if you want to check it out: https://www.npmjs.com/package/http-server

SUMMARY OF CODING SKILLS

Books:                                                                                               Status

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

"A Smarter Way to Learn JavaScript," by Mark Myers                          Complete

"HTML and CSS," by Jon Duckett                                                        Complete

"JavaScript and JQuery," by Jon Duckett                                            Complete

Team Treehouse (Front End Web Dev Track Complete): Status

How to Make a Website Complete

HTML Complete

HTML Forms Complete

HTML Tables Complete

HTML Video and Audio Complete

CSS Foundations Complete

CSS Basics Complete

CSS Layout Techniques Complete

CSS Layout Basics Complete

CSS Selectors Complete

Responsive Layouts Complete

CSS Flexbox Layout Complete
Framework Basics (Bootstrap and Foundation) Complete

Git Basics Complete

Console Foundations Complete

Introduction to Programming Complete

JavaScript Basics Complete

JavaScript Loops, Arrays, & Objects Complete

AJAX Basics Complete

JQuery Basics Complete

Interactive Web Pages With JavaScript Complete

Object-Oriented JavaScript Complete

Accessibility Complete

Website Optimization Complete

Front End Performance Optimization Complete

Aesthetic Foundations Complete

Design Foundations Complete

Adobe Photoshop Foundations Complete

Adobe Illustrator Foundations 66% Complete

Other Courses: Status

HTML and CSS (Codecademy) Complete

Introduction to Web Dev (The Odin Project) Complete

Web Dev 101 (The Odin Project) 33% Complete

Free Code Camp (FCC) Status

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 Front End Development Projects Complete
7. Basic JavaScript Complete
8. Object Oriented and Functional Programming Complete
9. Basic Algorithm Scripting Complete
10. JSON API's and Ajax Complete
11. Intermediate Front End Development Projects Complete

12. Intermediate Algorithm Scripting Complete

13. Advanced Front End Development Projects Complete

14. Claim Your Front End Development Certificate Complete

The Coding Boot Camp at UT Austin Status (starts 4/19/2016)
Week 1-6: Mastering the Browser (HTML, CSS, JavaScript, JQuery) Complete

Week 7-10: API & JSON (RESTful API"s, parsing JSON, AJAX) Complete

Week 11-14: Server Side (Node.js, MySQL, MongoDB) Complete

Week 15-18: Frameworks (React, React Native) Complete

Week 18-21: Full Stack Coding Complete
Week 22-24: Final Project

My Web Dev Portfolio: www.adamcamacho.com
CodePen Projects: http://codepen.io/Adancode/

GitHub Projects: https://github.com/Adancode

LinkedIn Profile: https://www.linkedin.com/in/adamcamacho1
Team Treehouse Profile: https://teamtreehouse.com/adamcamacho
Free Code Camp Profile: http://www.freecodecamp.com/adancode

Hours Spent Coding During This Blog Entry: 6

Total Hours Coding: 1,717

Sunday, July 31, 2016

Day 285 - 315 (All of August): Express Review and Working with Sequelize, Building a Scraper, Reviewing MongoDB, and Diving into React

August has been extremely busy for me. It's Sept 3, and I've put in 215 hours of coding this past month. Here's my Rescue time screenshots for the last 5 weeks:

Week 1 of August:

Week 2 of August:

Week 3 of August:

Week 4 of August:

Final week of August/first few days of Sept:

The number in the upper left of the screenshots is the amount of time I was actually on my computer that week, which doesn't mean anything, the actual productive time is right at the bottom of the circle. This month (plus the first couple of days of Sept.) I racked up 215 HOURS of web development. The vast majority of that time was time spent on the ATOM text editor, coding.

I'm not going to count the extra hours I spent coding in July, because I had my Rescue Time time tracking app turned off at that point, and I've not gotten into the habit of using but It had to be an extra 40 or so, at least.

I dove really deep into the back end this month, and I'm at the point now where I just want to dive deeper into web development, both front and back end. I enjoy creating these apps. Here's my group's app, Spare Space:

Here's a Redesign of it that I'll keep working on if I redo that app in MERN, which I may decide to do as my final project for my boot camp:

And here's a MERN stack project I created that pulled data from the New York Times API:

I know the UI is super simple on that one, but it's my first crack at a React project, I'm going to dive much deeper into it, that's actually my plan for the next few days.

As an aside, my group won "Best in Show" for Spare Space, the project we built for the boot camp. :)

So that's my update for August, it's a high-level update, I'm not getting into the details so that I can use that time instead to dive into React and keep leveling up my skills on the entire MERN stack.

SUMMARY OF CODING SKILLS

Books:                                                                                               Status

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

"A Smarter Way to Learn JavaScript," by Mark Myers                          Complete

"HTML and CSS," by Jon Duckett                                                        Complete

"JavaScript and JQuery," by Jon Duckett                                            Complete

Team Treehouse (Front End Web Dev Track Complete): Status

How to Make a Website Complete

HTML Complete

HTML Forms Complete

HTML Tables Complete

HTML Video and Audio Complete

CSS Foundations Complete

CSS Basics Complete

CSS Layout Techniques Complete

CSS Layout Basics Complete

CSS Selectors Complete

Responsive Layouts Complete

CSS Flexbox Layout Complete
Framework Basics (Bootstrap and Foundation) Complete

Git Basics Complete

Console Foundations Complete

Introduction to Programming Complete

JavaScript Basics Complete

JavaScript Loops, Arrays, & Objects Complete

AJAX Basics Complete

JQuery Basics Complete

Interactive Web Pages With JavaScript Complete

Object-Oriented JavaScript Complete

Accessibility Complete

Website Optimization Complete

Front End Performance Optimization Complete

Aesthetic Foundations Complete

Design Foundations Complete

Adobe Photoshop Foundations Complete

Adobe Illustrator Foundations 66% Complete

Other Courses: Status

HTML and CSS (Codecademy) Complete

Introduction to Web Dev (The Odin Project) Complete

Web Dev 101 (The Odin Project) 33% Complete

Free Code Camp (FCC) Status

1. Get Started with Free Code Camp Complete

2. HTML5 and CSS Complete

3. Responsive Design with Bootstrap Complete

12. Intermediate Algorithm Scripting Complete

13. Advanced Front End Development Projects Complete

14. Claim Your Front End Development Certificate Complete

The Coding Boot Camp at UT Austin Status (starts 4/19/2016)
Week 1-6: Mastering the Browser (HTML, CSS, JavaScript, JQuery) Complete

Week 7-10: API & JSON (RESTful API"s, parsing JSON, AJAX) Complete

Week 11-14: Server Side (Node.js, MySQL, MongoDB) Complete

Week 15-18: PHP (CodeIgniter, Laravel) In Progress

Week 18-21: Full Stack Coding
Week 22-24: Final Project

My Web Dev Portfolio: www.adamcamacho.com
CodePen Projects: http://codepen.io/Adancode/

GitHub Projects: https://github.com/Adancode

LinkedIn Profile: https://www.linkedin.com/in/adamcamacho1
Team Treehouse Profile: https://teamtreehouse.com/adamcamacho
Free Code Camp Profile: http://www.freecodecamp.com/adancode

Hours Spent Coding During This Blog Entry: 215

Total Hours Coding: 1,711

Tuesday, July 5, 2016

Day 268 - 284: Boot Camp Survey/Test, Node, Express, and Handlebars

This is an entry for the last 12 days of July in which I had class, plus 6 extra days in which I coded a lot. I'm not counting the other days in which I didn't code more than an hour or two.

I started the first day by completing a 3 hours test/survey given to us by the boot camp to see where we were at. I finished with that, then started on a class on React and touched briefly on React Router, Webpack, Babel, and Axios. Babel converts the JSX into JavaScript. Axios makes http requests.

I made a back end project called "Liri" which dealt with accessing songs on an API via node.js/arguments on the command line.

I made a project called Friend Finder, which doesn't use a database, here it is, it's very simple, and it's deployed on Heroku (https://thawing-journey-78394.herokuapp.com/survey):

I made a full stack CRUD app, called "Eat Da Burger," which allows the user view the burgers currently on the menu, to create a burger and add it to the menu, to remove burgers from the menu and add them to the "devoured" area, and finally, to delete devoured burgers from the database altogether. It's also on Heroku (http://gentle-brook-29511.herokuapp.com/burgers):

I'm learning a ton. We used handlebars also, which allows us to use templating for our html, it's part of the V in MVC (Model, View, Controller), which I've been learning about all month. I had class 12 times since the last entry, and each time we have class is at least 5 hours of coding for me, as I get to class early (but usually more like 8 or 10 hours). For example, my Tuesday/Thursday class begins at 6:30 p.m., but I'm usually at the coffee shop a few feet away from our classroom sometime between 10 a.m. and 2 p.m., because I don't want to get stuck in traffic. So I get to class 4 to 8 hours early on those days. On Saturdays, class usually starts at 9 a.m., if we have a speaker, and at 10 a.m., if we don't, but we usually do (but I don't count the hour listening to a speaker as coding). Then, after class, I usually keep studying. For example, yesterday after class, my friend Michael Desantis and I went to a tea house/coffee shop and kept coding until 9 p.m. We got a lot done, we were working with Sequelize, which is an ORM we were taught to use this week.

I've learned a LOT in the last few months. Our project for this coming Saturday is to make the "Eat Da Burger" app, which used vanilla mySQL, again, but this time using Sequelize as the ORM.

Again, I apologize for not updating the blog too often, I'm just quite busy with coding.

SUMMARY OF CODING SKILLS

Books:                                                                                               Status

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

"A Smarter Way to Learn JavaScript," by Mark Myers                          Complete

"HTML and CSS," by Jon Duckett                                                        Complete

"JavaScript and JQuery," by Jon Duckett                                            Complete

Team Treehouse (Front End Web Dev Track Complete): Status

How to Make a Website Complete

HTML Complete

HTML Forms Complete

HTML Tables Complete

HTML Video and Audio Complete

CSS Foundations Complete

CSS Basics Complete

CSS Layout Techniques Complete

CSS Layout Basics Complete

CSS Selectors Complete

Responsive Layouts Complete

CSS Flexbox Layout Complete
Framework Basics (Bootstrap and Foundation) Complete

Git Basics Complete

Console Foundations Complete

Introduction to Programming Complete

JavaScript Basics Complete

JavaScript Loops, Arrays, & Objects Complete

AJAX Basics Complete

JQuery Basics Complete

Interactive Web Pages With JavaScript Complete

Object-Oriented JavaScript Complete

Accessibility Complete

Website Optimization Complete

Front End Performance Optimization Complete

Aesthetic Foundations Complete

Design Foundations Complete

Adobe Photoshop Foundations Complete

Adobe Illustrator Foundations 66% Complete

Other Courses: Status

HTML and CSS (Codecademy) Complete

Introduction to Web Dev (The Odin Project) Complete

Web Dev 101 (The Odin Project) 33% Complete

Free Code Camp (FCC) Status

1. Get Started with Free Code Camp Complete

2. HTML5 and CSS Complete

3. Responsive Design with Bootstrap Complete

12. Intermediate Algorithm Scripting Complete

13. Advanced Front End Development Projects Complete

14. Claim Your Front End Development Certificate Complete

The Coding Boot Camp at UT Austin Status (starts 4/19/2016)
Week 1-6: Mastering the Browser (HTML, CSS, JavaScript, JQuery) Complete

Week 7-10: API & JSON (RESTful API"s, parsing JSON, AJAX) Complete

Week 11-14: Server Side (Node.js, MySQL, MongoDB) In Progress

Week 15-18: PHP (CodeIgniter, Laravel)

Week 18-21: Full Stack Coding
Week 22-24: Final Project

My Web Dev Portfolio: www.adamcamacho.com
CodePen Projects: http://codepen.io/Adancode/

GitHub Projects: https://github.com/Adancode

LinkedIn Profile: https://www.linkedin.com/in/adamcamacho1
Team Treehouse Profile: https://teamtreehouse.com/adamcamacho
Free Code Camp Profile: http://www.freecodecamp.com/adancode

Hours Spent Coding During This Blog Entry: 92

Total Hours Coding: 1,496

Monday, July 4, 2016

Day 267: React and Node.js

All right, my goal is to start looking for a job by the end of August, so I can access the boot camp's resources during my job search. If I wait until after the boot camp is finished, then I won't have the same network available to me. So, In order to do that, I plan to put in at least 4 hours of React study per day (Monday through Friday), from 10 a.m. to 2 p.m. I can study more if I want, but those hours are exclusively devoted to React. I will also squeeze in more Node.js study time, but that will be outside of the React time (unless the React project requires some Node work, of course).

Because of this new study plan, I'll be going back to blogging more regularly.

I am noticing that many React jobs pair React with Node.js on the back end, so that's something to keep in mind.

All right, so far today I've introduced myself in the slack channel for the tutorial I'm taking and I've also joined the React Discuss forum/message board. Both those actions are part of diving into the React community.

Okay, now I've gone ahead and organized my bookmarks for the GitHub repos for the course, the slack channel, and the React Discuss forum/message board in a way that makes them easy to access on a day to day basis. I also renamed several of the bookmarks, so it's easier to remember what they are.

So we went over imperative versus declarative code. Imperative is when we tell the computer how to do something, explicitly, like with a for loop, for example, and declarative is when we use things like .reduce to tell the computer what to do, and it already knows how to do it because of built in functions, for example.

The teacher says declarative code is more readable and we should strive to code in that manner. One example of the benefits of declarative code is that we don't have to keep track of state as much as with imperative code, because the functions take care of (abstract away) some of that.

React is declarative, for the most part. Ok, I'm saving this:

$(this).toggleClass('addHighlight');

Will toggle the class, as in, if it's on, it'll turn it off, if it's off, it'll turn it on. We used that in the video, and I've probably used it before, but I thought I'd save it anyhow.

This was the full code, and it works:

$(document).ready(function() {
$('#theId').click(function() {
$(this).toggleClass("highlight");
$(this).text() === 'Add Highlight'
? $(this).text('Remove Highlight')
: $(this).text('Add Highlight')
});

}); // Closes jQuery wrapper

That's cool. So, this is the react version of it (from the tutorial, but I'm not sure if the first word should be capitalized or not, in the tutorial, he does in one part, but not in another, so, to be continued...):

<theId
onToggleHighlight={this.handToggleHighlight}
highlight={this.state.highlight}>
{this.state.buttonText}
</theId>

So that's React...again, "theId" may or may not need to be capitalized, the example isn't clear, but still, this is great!

jQuery takes the state out of the DOM and puts it into the React component (at least in the first example, anyhow).

The argument that React is declarative comes mostly from it's components, because the code above would be calling this:

this.setState({
highlight: !this.state.highlight,
buttonText: this.state.buttonText === 'Add Highlight'
? 'Remove Highlight'
: 'Add Highlight'
})

All right. When programming in React, we need to think of the idea of breaking everything (every element on the page) down into a component. These components have elements nested within them, just like HTML.

React applications are basically built out of a bunch of React components.

A lot of react is just JavaScript, and it uses things like .map. So in this course, I'm covering:

React,
React Router,
Webpack,
Babel, and
Axios.

SUMMARY OF CODING SKILLS

Books:                                                                                               Status

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

"A Smarter Way to Learn JavaScript," by Mark Myers                          Complete

"HTML and CSS," by Jon Duckett                                                        Complete

"JavaScript and JQuery," by Jon Duckett                                            Complete

Team Treehouse (Front End Web Dev Track Complete): Status

How to Make a Website Complete

HTML Complete

HTML Forms Complete

HTML Tables Complete

HTML Video and Audio Complete

CSS Foundations Complete

CSS Basics Complete

CSS Layout Techniques Complete

CSS Layout Basics Complete

CSS Selectors Complete

Responsive Layouts Complete

CSS Flexbox Layout Complete
Framework Basics (Bootstrap and Foundation) Complete

Git Basics Complete

Console Foundations Complete

Introduction to Programming Complete

JavaScript Basics Complete

JavaScript Loops, Arrays, & Objects Complete

AJAX Basics Complete

JQuery Basics Complete

Interactive Web Pages With JavaScript Complete

Object-Oriented JavaScript Complete

Accessibility Complete

Website Optimization Complete

Front End Performance Optimization Complete

Aesthetic Foundations Complete

Design Foundations Complete

Adobe Photoshop Foundations Complete

Adobe Illustrator Foundations 66% Complete

Other Courses: Status

HTML and CSS (Codecademy) Complete

Introduction to Web Dev (The Odin Project) Complete

Web Dev 101 (The Odin Project) 33% Complete

Free Code Camp (FCC) Status

1. Get Started with Free Code Camp Complete

2. HTML5 and CSS Complete

3. Responsive Design with Bootstrap Complete

12. Intermediate Algorithm Scripting Complete

13. Advanced Front End Development Projects Complete

14. Claim Your Front End Development Certificate Complete

The Coding Boot Camp at UT Austin Status (starts 4/19/2016)
Week 1-6: Mastering the Browser (HTML, CSS, JavaScript, JQuery) Complete

Week 7-10: API & JSON (RESTful API"s, parsing JSON, AJAX) Complete

Week 11-14: Server Side (Node.js, MySQL, MongoDB) In Progress

Week 15-18: PHP (WordPress, CodeIgniter, Laravel)

Week 18-21: Full Stack Coding
Week 22-24: Final Project

My Web Dev Portfolio: www.adamcamacho.com
CodePen Projects: http://codepen.io/Adancode/

GitHub Projects: https://github.com/Adancode

LinkedIn Profile: https://www.linkedin.com/in/adamcamacho1
Team Treehouse Profile: https://teamtreehouse.com/adamcamacho
Free Code Camp Profile: http://www.freecodecamp.com/adancode

Hours Spent Coding During This Blog Entry: 4

Total Hours Coding: 1,404