Day 20 (Pt 2)

I started the Object Oriented JavaScript course today and completed section 1, Introduction to Methods. We covered:

  • Objects
    • Methods – provides functionality of objects and may or may not return values.
    • Properties – stored data or state of an object
    • Keys – the name of a property
    • Values – the contents of a property
    • Native & Host objects

In this section, we also built the beginnings of a calculator which has given me an idea for my weekend project: update the code of my JS Calculator using a calculator object. Not only does it actually make a lot of sense, but I also think that my code will be cleaner and easier to read when re-organized this way.

Day 20

Goals for Day 15:

  • Complete JavaScript and the DOM (3 hours)
    Finished! It took me a few days longer than day 15, but I still feel good about it.

 

 

Goals for Day 25:

  • Complete Object Oriented JavaScript (2 hours)
  • Complete The Module Pattern In JavaScript (16 minutes)

 

 

Day 13

 

So far, so good!

I set my expectations for these first 2 weeks as increasing how much time I spend coding. Coming from a few months of nearly 0 times per week, I’m up to at least 4. Success!

Weekends are where I fell off which surprised me a little bit. Since I obviously have more time to code on the weekends, I thought my productivity would increase like it had previously. I found that it was actually harder to interrupt a day of doing nothing to do something that I kind of classified as “work” in my mind. To combat this, I will use weekends to focus on completing projects more so than courses. I still have plenty left on FreeCodeCamp and have a few ideas of my own.

Going Forward, I will also post an update every 5 days – specifically days ending in 0 and 5. I’ve mentioned this before, but writing has not only been fun, but beneficial in retaining information. Being able to talk about what I am doing in detail – in a way both techies and non-techies can understand is a skill I appreciate having and improving.

Goals for Day 15:

  • Complete JavaScript and the DOM (3 hours)

 

 

Sasstronaut + WordPress

So I got into kind of a “what now?” slump after finishing the Front End track. I didn’t feel like I knew “enough” to confidently move forward with something else, and I felt too creatively stumped to design a project for myself. But I knew I didn’t want to stop. That’s when I started the Web Design track.

The last course in the track was Sass Basics. I’ve seen terms like Sasstronaut all around since I’ve started learning, and I was pretty excited to add myself to the list of cool people that use Sass.

I fell in love with Sass pretty much right away. I even found myself comfortable with using the command line to install and use it.

Soon after, I updated my github hosted website (for maybe the dozenth time), this time coding my styles with Sass. I also got rid of the resume style I had going on for the past month or so, and updated it with this fancy layout, featuring a photo from Unsplash.

cerita.github.io screenshot

cerita.github.io screenshot

It’s still pretty bare right now though, isn’t it? Creating a bio is still a bit awkward for me, and I’m not sure what projects are ‘good enough’ to showcase. Though, I suppose if they were good enough for my blog, they should be good enough for a some kind of portfolio.


Speaking of my blog, which is hosted on free WordPress.com, I’m now on to the WordPress Development track on Team Treehouse.

I already completed How To Make A Website With WordPress and The WordPress Codex a few months ago out of curiosity. Today, I got WordPress set up locally on my machine (which was kind of a headache, not gonna lie) and I’m ready to do this thing!

The WordPress Theme Development course is next for me. It covers taking a basic HTML/CSS/JS prototype and converting it into a WordPress theme. It also goes over responsive navigation, templates, custom post types, and widgets.

Unfortunately, now that I’ve moved, my WiFi usage is a little different (limited) and plugging away at videos isn’t the best plan of action for me. At first I was a bit bummed because once I get started on something, it’s really hard for me to stop. And, let’s be honest, I really love marathoning things on Hulu. But, this forces me to pace myself through the courses and will hopefully encourage me to play around a little bit more with what I’ve learned so that it sticks with me longer.

Maybe I’ll even find myself getting unplugged for some time!

That’s It, That’s All!

I am officially finished with the Front End Web Development track on Team Treehouse!

In the past 6 or so months, I’ve gone from nearly no knowledge of web development to having worked with HTML, CSS, JavaScript, jQuery, AJAX, the console, and Git.

To be honest, it was a tad bit anti-climatic. I finished the last section of Git Basics and that was just about it. I went back to the track details to double check, and it now had a check mark and the word “Completed.” Not that I was expecting fireworks or a parade, but at least a “Yay! You did it” screen, ya know?

Completed Front End Web Development Track Graphic

What’s next for me?

Well, for one, I want to find some more projects to start building. I want to create new things that I am proud of and can put into a portfolio. I want so many more “Look at this cool thing I built!” moments.

I also want to tackle the Web Design track. I like building awesome things but I want to make them look awesome too. Mastering design and development definitely come from practice, but having a good foundation in the basics doesn’t hurt either. Treehouse’s Design track covers not just using Photoshop and Illustrator, but also things like CSS layout, color theory, UX, SEO, and Sass.

I’ve also been thinking about full-stack development. Following FreeCodeCamp.com, the next challenge on the list is learning node.js,  a server-side environment built on JavaScript. In the past, I’ve worked with PHP, another server-side language, which Treehouse also has a track for. When I first started this, the thought of becoming a full-stack developer seemed like it was so far off into the future. But, with all that I’ve accomplished in the past few months, it really doesn’t seem that impossible at all.

AJAX Basics: jQuery, APIs

Time to cross another course off of my list: AJAX Basics. Done.

AJAX is definitely no walk in the park, but it’s also a little bit less intimidating than it seemed when I first started this course. While there’s still some things I didn’t completely understand from the lecture-type videos, I was able to complete this course and it’s DIY challenges without a headache. Win.

jQuery and AJAX

We revisited the Office Status project from the previous section. Nothing changed in the details of the project except changing the vanilla JavaScript to jQuery. And, once again, the challenge for this project was to add AJAX for the room numbers, this time using jQuery.

Challenge

The challenge

Office Status Code

My code

Office Status

AJAX and APIs

API stands for Application Programming Interface.

We used Flickr’s API to build an app that lets you click on a button with a type of animal (cat, dog, or moose) and AJAX displays recent photos with the appropriate tag.

The big challenge this time was to change the code to use a search form field instead of the pre-selected animal buttons from before.  To do this, I had to replace the button’s click event handler with a form submit handler. Since I’m using AJAX, I don’t want the submit button to open up a new HTML page which means preventing the browser’s default action.

Screenshot 2015-01-25 17.06.52

Should you choose to accept it…

Workspaces

My code

I was able to complete the challenge with my own knowledge once again! By now, I shouldn’t be surprised that I was able to handle it, but I spent most of the lecture-type videos scratching my head going “WTH?!” I may not completely understand everything about AJAX, but I can create working code which is still pretty awesome in my book.

After the challenge, I added a change to the submit button that changes its text to “searching…” after you hit submit and switches back to its original text when the AJAX request is over.

Flickr API

It’s Always Cold In Chicago

jQuery definitely helps to make working with AJAX easier (which is great becuase jQuery is here to make our lives easier) and I feel like I’m really starting to get the hang of using jQuery, especially with extra practice using CodeSchool’s Try jQuery course.


Now, all I’ve got left are Console Foundations and Git Basics before I complete this track. Wish me luck!

jQuery Is Fun + A Learning Experience

I really enjoyed the jQuery Basics course on Team Treehouse. I think it really helped that there were 5 projects to do instead of just 5 minute lectures followed by quizzes. Each project was different, but they built on each other with knowledge. With every project, I was able to imagine what the code might look like before it was explained to me. It’s an amazing feeling when you realize you’re really starting to understand what’s going on.

But jQuery is also a pain in the butt. Or, rather, syntax is.

With one of the projects in Treehouse, I built Drawing application where the user could pick an existing color or add a new color and draw on the canvas.  It was the longest project in the course and introduced the HTML5 canvas, but the coding wasn’t the hardest part. The hardest part was getting to the end and trying to figure out why the only color that worked was red, and only if you didn’t choose a different color first. Weird.

I re-read my code over and over to make sure it made sense.  I even re-watched videos to make sure I didn’t miss anything. Then, I realized that there was one thing Andrew did throughout the whole process that I simply watched him do instead of doing it myself.

Open the Dev Tools!

If I had been doing it from the get-go, I may have noticed that when I click on any color but red, the value was always undefined. Always. Even if I went back to red afterwards. And, if I had caught that when I was coding that part of the project, I probably would have noticed that I forgot one stupid little semi-colon.

Dozens of lines of code and it was broken by a semi-colon. Womp.

TL;DR:

jQuery is fun, but don’t wait til the end to test your code. Just don’t.