web development

Object-Oriented Programming

Thinkful Week 3: Object-Oriented Programming, AJAX, and Advanced JQuery

Posted on by jasonwalkow1

In my third week with Thinkful’s Front-End Developer Career Path Program, things are moving along pretty quickly. I’ve already got some great projects under my belt and I’m looking forward to building on those projects as I progress my skills. But, although I was able to cruise through most of the earlier projects with no major roadblocks, Object-Oriented Programming (OOP) hit me pretty hard. I think I built my confidence up a bit much when it came to grasping JavaScript, and then reality settled in.

Object-Oriented Programming (OOP)

Thinkful’s lessons on this were short and to-the-point…possibly too short. For such abstract and fundamental concepts, there wasn’t a ton of original content to go off of. Now, I will say that they provided a guide to an incredible amount of resources, and they probably thought, “Why would we re-write this material when other sites like MDN have written it so brilliantly?” They’ve definitely got a point. I guess my issue with these lessons is that there wasn’t really a clear step-by-step project to add these fundamentals to as you learned – which has made it so easy to learn in the past lessons. Anyhow, I decided that I wasn’t going to just keep combing through online resources and hope to understand OOP, so I picked up a few extra books to compliment my learning: A Smarter Way to Learn Javascript and JavaScript & JQuery: Interactive Front-End Web Development.

Each of these books provide a different style of learning, but I’ve found that they work incredibly well together. “A Smarter Way” is sort of like Codecademy in that you learn lesson by lesson, and then you have an exercise after each lesson to instill the knowledge in your brain. I’ll admit, it starts off a bit slow and simple, but that was the perfect way to build on fundamentals. “JavaScript & JQuery”, on the other hand, is more of a big-picture type of learning tool. It’s beautifully designed and written, and gives you practical examples to review. There are online resources to practice, I believe, but I haven’t looked into those. Anyhow, using these two books a little bit everyday has really helped my JavaScript understanding and I highly recommend them. And what a steal! I think the pair cost me like $30 total.

Interactive Quiz App

So, after I got a little better handle on JS Objects, I was ready to take on the Interactive Quiz App. This was our biggest project yet, as it had us create a wireframe, create a static version, then add interactivity, and, off course, debug in the console as we worked. This took me a good deal of time as I put a lot of work into the design of the app as well. I used Sketch to wireframe and to create my digital assets. For those of you who have not heard of Bohemian Coding’s Sketch, please check it out. It’s taken my design skills to the next level.

This project was tough in that Thinkful let you fly the nest a bit. Instead of holding your hand through the entire thing, they let you discover what you don’t know, learn it on your own, and then use it – which is probably the best way to make sure that it sticks. I’ll be honest, after posting a bunch of questions to the Slack community for help, and bugging my mentor at each session, I went ahead and looked at other student’s projects to see what they came up with. Little did I know that we all sort of arrived independently at the same basic type of structure and code. That boosted my confidence a lot and allowed me to know that i was moving in the right direction. So, after a bit of work, here’s my Hemingway Quiz App:

http://jasonwalkow.github.io/hemingway-quiz/index.html

AJAX and Advanced JQuery

Admittedly, I had played around with AJAX, JSON, and API hacks a bit when I was learning with Treehouse, so the lessons weren’t totally new to me, but there was still a lot of information to cover. First, we played around with the IMDB API to get an idea of what an AJAX request looks like and what to look for in our JSON data. Honestly, the hardest part of this lesson, for me, was remembering not to type “jason” (my name) when I went to type “json”. The rest of the lesson was pretty straight-forward, culminating with the creation of the “Thinkful Tube Project” which uses the YouTube API to retrieve videos from a search term. We got to add our own styling and on this one and go a little wild, so I did (with a little photo help from Unsplash):

http://jasonwalkow.github.io/thinkful-tube/index.html

 StackOverflow Reputation Builder

The StackOverflow Reputation Builder assignment was fairly similar to the Thinkful Tube Project, except that this time we were on our own. I forked the project from GitHub and took some time to look over the code and see what I was getting myself into. The code was pretty straight-forward and it looked like it was going to be pretty easy to add everything dynamically. On this project, we weren’t supposed to spend anytime of style, but I sort of had a template from the Thinkful Tube Project already built, so I added it in:

http://jasonwalkow.github.io/stackerAJAX/index.html

API Hack

For our final project on APIs, we were assigned to use any API that we wanted (or more!) and create an app of our choosing. I truly loved this project. It was wide open and it really let me explore my talents and skills to apply what I had learned. This was going to be our first truly original project. So, what did I come up with?

Well, as an Etsy Seller, DeanFred Rex Prints, I sometimes get orders from customers asking is they can pick it up same day or next day locally. Now, all they really see is that I post my address as “Los Angeles”, but LA is a big city and they might be 50 miles away – who knows. So, I decided that I would make an app where someone could search for Etsy shops in their neighborhood by entering in an address. This would use the Google API, Geocoder API (location), and the Etsy API – which would give me a real dive into AJAX and advanced JQuery. I ran into a few roadblocks along the way (mainly knowing what JSON data to use where and when) and then of course there were some Etsy API restrictions that I had to wiggle around. But, with a ton of help and guidance from my mentor, I came up with a pretty cool project, myEtsyNeighborhood:

http://jasonwalkow.github.io/my-etsy-neighborhood/index.html

Stay Tuned

Well, that’s it for Week 3. Next week, I’ll be finishing up the first part of Front-End Development and moving into Intermediate Front-End. As always, if you’re thinking about taking a course with Thinkful, don’t be afraid to contact me and get an idea about the program. Thanks for reading!

Coming Next Week: Portfolio Site Re-Visited, Mobile-First Design, and Gulp

jQuery

Thinkful Week 2: Delving Into jQuery and JavaScript

Posted on by jasonwalkow1

It’s my second week in with the Thinkful Front-End Developer Career Path Program and I must say, things are going a lot faster than I thought they would. In my first week, I just tried to get the hang of the program and balance my schedule with work and Etsy and y’know…life stuff. But, for my second week, I was truly ready to kick it in high gear. So, how did I do?

jQuery and Manipulating the DOM

Going through Treehouse, I got semi-comfortable with jQuery, at least to the point where I could add plug-ins and attach the functionality to certain elements. Though it took a great deal of finagling, I was able to get most of it to work. But, what I learned after going through the first few lessons of Thinkful was that I wasn’t really using jQuery. I mean, sure I was copying and pasting and this and that, but I wasn’t truly learning it.

So, as I made my first “Hello World” document, got a feel for the Document Object Model (DOM), and practiced some jQuery basics with searching and traversing the DOM, I felt as though I was really getting a feel for the utility and understanding how and when and why to use the jQuery library. With those basic tools in hand, I was able to take on the jQuery Street Fighter Project.

I thought that Thinkful did a great job with the content on this project, showing you the basic set-up and some best practices, but letting you go at a certain point to make it all happen. I was able to put the basic project together, so it looked like most other students’ projects, but I decided to go the extra mile. As a former avid Street Fighter fan, spending much of my youth throwing hadoukens and striking the cool pose with Ryu, I was able to find a level background image to include, as well as the Street Fighter logo, which I thought was pretty cool. And for the finishing touch, some brilliant web philanthropist had posted the Ryu Theme Song as an mp3 for download. Hadouken! Project defeated:

http://jasonwalkow.github.io/jQuery-streetfighter/main.html

More jQuery with The Shopping List

Next up was a project that allowed me to build upon the principles I picked up in the Street Fighter project: The Shopping List. This time, we were told to start with a basic wireframe of the app, then build a static version using HTML and CSS, and then once we got all of that worked out, basically delete all content (minus the divs) and dynamically fill in content using jQuery click and key methods.

This project was a little more difficult and took a bit more work with my mentor Matt. Although I remember building almost the same sort of app using vanilla JavaScript with Treehouse, this was much different. But, as always, Matt was extremely helpful and not only showed me the way to get bugs fixed, but the best way to make sure that each operation was nearly error-proof. That was a huge step and a big learning jump for me. Here’s how it turned out:

http://jasonwalkow.github.io/shopping-list/index.html

Learning the Basics of JavaScript

I hadn’t touched much JavaScript since I stopped learning with Treehouse and I admit that I had pretty much lost most of what I had learned. I hadn’t kept up the practice, which I learned was 100% necessary, and I felt a little overwhelmed. Thinful’s courses started out simple, which was a relief, but I was getting a little worried working toward the section project… The FizzBuzz Challenge.

I had read about the Fizzbuzz Challenge here and there and everywhere. Supposedly, it’s a pretty common interview tool to see how a programmer thinks and processes functions. Some people hated it, some people didn’t mind it, and a lot of people didn’t really seem to understand why it was used as such a barometer of skill. Needless to say, FizzBuzz sounded rough.

The FizzBuzz Challenge

What is the FizzBuzz Challenge? Well, basically, you are assigned the following problem: “For each number from 1 to 100, if it’s not divisible by 3 or 5, print the number. If it’s divisible by 3, print ‘fizz’. If it’s divisible by 5, print ‘buzz’. And finally, if it’s divisible by both 3 and 5, print ‘fizz buzz’.” Sounds…complicated, right? Well, it is, until you break it down to it’s most basic pieces. First, you figure you need a loop. Good, easy, make a for loop: “If, else”. Next, you decide which numbers are divisible 3, then which numbers are divisible by 5, and which numbers are divisible by both – just to get an idea of what result should print out. What’s the magic number? 15. So, I started building the thing and I was able to get a solid loop going using the division operator. But, as I soon found out, I was dead wrong. Sure, the division operator works for 3, and 5, and 15, but what about 6 or 9 or 10 or 30 or 90? You can’t set a parameter to give you the results you need. What you need is the modulo operator. That will give you the remainder of the operation, which of course, you will need to be 0 after dividing each of the denominators.

Even with the stigma surrounding it, I was truly happy to see it as a project goal on Thinkful. It shows that they really create their content based on making you a job-ready developer. And they didn’t just glaze over it, they made it a serious checkpoint. A checkpoint which they prepare you for during the coursework. Again, we were told that we didn’t necessarily need to worry about style, but I couldn’t help it:

http://jasonwalkow.github.io/fizzbuzz-challenge/index.html

Functions and Scope

After finishing the FizzBuzz Challenge, we learned a little more about JavaScript in the way of functions. Practice, practice, practice…that’s all I can say about functions. That’s really the only way to understand it and get a hang of the syntax and the methods. For a small project, we had to refactor our FizzBuzz Challenge to allow for the user to enter a max number (I set mine between 1 and 1000), and the function would print out the FizzBuzz up until that max. It took a little bit of jQuery, and a few little JavaScript changes here and there, but I got it to work and learned the power of functions and how much time and energy it saves both you and your program. Take a look:

http://jasonwalkow.github.io/fizzbuzz-refactor/index.html

Lastly, as a finish up project, we were assigned the Hot or Cold App, which generates a number between 100 and allows the user to guess the number, telling them along the way if they are getting “warmer” or “colder” to the number. This project was a little different than the rest, as the static page was provided for us (set-up and design) and we just had to add functionality. We were supposed to focus solely on the JavaScript. Now, the design piece is often a big part for me. I love designing things from start to finish and tinkering away until they’re perfect – so I wasn’t nearly as excited for this project. But, then I noticed that the app was designed by a former student named Jeya Karthika. If you don’t know about Jeya, she wrote a pretty solid blog post discussing her learning journey with both Thinkful and Bloc and is also a pretty great designer. A lot of what I read from her journey helped me to choose Thinkful in the first place, so I really dig her work. This made me totally okay with working from a template. And, the programming was pretty straightforward and fairly similar to the things we had already built on, so I won’t go into it much here. Here’s the finished project:

http://jasonwalkow.github.io/hot-cold-app/index.html

Stay Tuned

Well, that seems like enough for this week’s post, so I’ll go ahead and wrap it up. Thinkful’s courses for jQuery and beginning JavaScript were extremely helpful and I hardly had to look at other sites for help or extended learning. I really can’t explain the importance of having a mentor through all of this. As the lessons have gotten more and more complex, Matt has really helped to break things down practically and show me some cool extra things along the way. Knowing that I have three separate days of “safety net talks” with Matt every week really takes the pressure off and allows me to just learn and practice and learn and practice some more. Again, if you’re thinking about taking a course with Thinkful, don’t be afraid to contact me and get an idea about the program. Thanks for reading!

Coming Next Week: Object Oriented Programming, AJAX, and APIs

Thinkful Check-In: My First Week

Posted on by jasonwalkow1

pSJ2dTf

Well, I definitely meant to write this sooner, but better late than never. After a little over a month of going it on my own and learning programming through codeacademy and Treehouse, I decided to take the next step and really get serious about the journey and do a Massive Online Open Course (MOOC). If you’re wondering how far I got on my own, check out my current portfolio site:

http://jasonwalkow.com/

I did a painstaking amount of research, reading everything I could on Quora and Course Report, speaking with representatives from each school, and deciding what I could handle while working a full-time job and running my Etsy shop. Sure, I looked into intensive bootcamps. The romance of it all was very appealing – the idea of being completely and utterly wrapped up in coding for 12 weeks – but I just couldn’t swing the time, cost, and serious effect on my work-life balance. So, I narrowed it down to two programs: Bloc Front-End Development Path and Thinkful’s Front-End Developer Career Path. So, how did I decide?

The Decision

Now, I could state it plainly and say…cost. But, that’s not really fair. Bloc’s program was not that much more than Thinkful’s in the end. And, if you’re going to plunk down more than a couple thousand dollars on a program, the minor difference in cost shouldn’t really be that big of a deciding factor. So, I guess a more honest answer would be value. After speaking with people from both programs, Thinkful seemed more up to the task of taking you from 20-120 en route to getting you career ready. I get Bloc’s thinking…they do not want to advertise everywhere that they will undoubtedly make you job-ready, because who can guarantee that?

In the end, I guess I chose Thinkful because of the number of projects they offer and the breadth of topics they cover in their program. I think Bloc goes more into detail and really focuses on making you an expert in a few areas, but for me it is much easier to be introduced to a bunch of different topics and then do the hard work on my own (for free). And so I joined up with Thinkful.

My advice: If you are on the fence about which program to join, and you think you might be leaning towards Thinkful but you just can’t decide… speak with Derek Fogge at Thinkful. He’s the Career Path Program Manager at Thinkful and it just one of the nicest guys you’ll ever meet. He started out as a designer and ending up learning code through a few different ways, then became a Thinkful student, then a Thinkful mentor, and now a Thinkful leader. When I spoke with him, he was full of so much passion and inspiration that it was, well, inspiring. He was really concerned with where I wanted to go with Thinkful, what I wanted to learn, and how they could help me get there. Thinkful is really focused on helping you learn your way and the Career Path gives you access not only to that particular curriculum, but really all of their content and beyond. I spoke with Derek about possibly getting into Node and React and maybe even some UX/UI. He was more than happy to help me through my journey and will regularly check in with your progress. He helped seal the deal for me.

Learning with Thinkful

The first two weeks has been a whirlwind. In the beginning, I was very worried about the expected “20-25 hours of coursework” each week. Working a full-time job, running an Etsy shop, managing life balance with my girlfriend and two dogs…I wasn’t quite sure where that 25 hours was going to come from. But, to be honest, you just find the time. As soon as I got access to the curriculum, I started jamming away.

Before I knew it, I had installed Sublime Text, set up my CodePen account, gotten my feet wet in Git, and had started to pump out projects. The beginning projects are more of a refresher if you’ve done HTML and CSS through codeacademy or Treehouse, so I was able to breeze through. Still, I learned the reasoning behind best practices, as Thinkful’s content has a lot of great narrative to explain WHY you are doing things, not just HOW.

HTML and CSS

Next, we got into really thinking about how to develop static pages with a plan in mind. Working from a quick wireframe, using semantic HTML, choosing a color scheme through Adobe Kuler, and using CodePen to its fullest power in designing CSS. Here is the “About Me” project that you end up with:

http://codepen.io/jasonwalkow/full/eNbXaX/

Developer Tools and Command Line

From everything I had read up until Thinkful, knowing how to use Chrome or Firefox’s Developer tools goes a long way in saving you from headaches and dead-ends. Thinkful gets you started early with a cool walk-through on how to hack webpages and find elements using these tools. Here is my “Hack the New York Times” project:

http://prntscr.com/80lv7c

As for the command line, even though I had worked through Treehouse’s courses on Git and Github, I still felt completely out of my depths and was a little scared by the simplicity of the terminal. But, with continuous practice and reinforcement through Thinkful’s course, I began to feel right at home. That’s what is so great about Thinkful: They don’t just teach you something, check a box, and then move on. They make sure that you keep coming back to those principles and make sure that you are using them in your workflow. Deploying and installing from the command line is crucial, and now I understand why.

Building a Modern Landing Page

When you first look at the preview of Karma’s Landing Page, the next project in the course, you might think “How am I ever going to make that happen?” But, lo and behold, you just, well, do. This project really helped me come a long way and create a project that I’m proud to show to my family and friends. It’s a great progress point, really. You build a navigation bar, use Font Awesome, work with background images, and a lot more. If this is sounding a little basic to you and you’re thinking “Well, I already know how to do all that”, let me tell you: so did I. Or, at least I thought I did. If I had done this project on my own without any of the lessons, sure, I might have gotten to the same result. But, it would have taken me three times the amount of work and code, and I wouldn’t have learned anything new. Here’s the “Karma Landing Page Project” I made:

https://jasonwalkow.github.io/startupclone/index.html

Mobile and Responsive Design

Up next is a course on mobile and responsive design. To be honest, I feel Thinkful could have spent a little more time on this part. Something like 70-80% of web pages are viewed on mobile devices, which makes it one of the biggest challenges for early developers. I’m guessing that we get into it more later in the program and this course was just sort of an introduction, but we’ll see. Here’s the updated “About Me Portfolio Page” I made:

https://jasonwalkow.github.io/portfoliopage/index.html

Your Mentor

cpKiYKi

Now is probably a good time to talk a little bit about the Mentor program at Thinkful. It is, I think, their biggest selling point, as you are getting access to a seasoned pro every other day throughout the length of the program. Throughout the HTML and CSS courses, I didn’t really need the help of my mentor. Like I said, it was more of refresher. But, I definitely needed help with Git, and bad. And this is where your mentor comes in to save you.

I set up my mentor sessions for one hour, three times a week, after I got home from work. My mentor is Matt Smith, who I’m pretty sure is one of the smartest and nicest dudes I’ve ever met. Matt is an incredibly friendly and unbelievably knowledgeable mentor to have at such an early stage. It really is a steal-of-a-deal getting to talk with him for three hours a week. Admittedly, at first, I didn’t have a lot of questions working through HTML and CSS, but that didn’t stop Matt from showing me some cool plug-ins for Sublime and helping to hone best practices and time-saving tricks. He also expanded my knowledge by providing me with some great resources and quick go-to-guides for when I get stuck on my own.

Also, one of the most important parts about having a mentor is the motivation they instill in you. It sounds silly, but having a mentor to work with really makes you want to work hard and progress through the program. You want to be able to show your mentor your progress and the cool things you’ve built – so you put in that extra effort and come to the sessions ready with questions. The mentor sessions is the true value of Thinkful, so you’d better make the most of it.

So, when it came to my Git confusion, he was able to break it down for me to the very basic fundamentals of its use. He went slow, kept encouraging me, and totally removed my Git stress. His help has been invaluable, and I think I really lucked out with getting him as a mentor.

Stay Tuned

Now that I’ve wrapped up my first week, I hope I’ve given you some insight into Thinkful’s program. I’ll be posting more and more as I progress through the program, so stay tuned. And if you have any questions or need some advice, please feel free to get in touch with me.

Coming Next Week: Delving into JQuery and JavaScript

Getting Into It

Posted on by jasonwalkow1

I believe, in some strange way, I was always destined to go into web development. I have always veered my interests towards design and filled my hobbies with creative outlets. I started with an Etsy Shop called DeanFred Rex Prints that allowed me to create digital posters for my favorite movies, television shows, and books. I had only briefly used PhotoShop and Illustrator a few years back in school, and had never really used them to power my own interests – only assignments given in my courses. While I didn’t have the funds to go full Adobe Suite, I did want to use a graphic illustrator to put my creativity to use. I found a free illustrator program called Inkscape and put it to work. To be honest, I was pretty surprised with how fast I was able to pick it up. I just sort of taught myself some basics and dialed any advanced commands I was looking to do into Google for help forums. Little did I know that this little hobby would eventually drive me to pursue a career in web design and development.

I had been doing the Inkscape thing for a while when an opportunity came up at work to re-design the website. The quotes that we had gotten from web design firms were outrageous for our small start-up company (as then I didn’t really know what went into such a task i.e. man hours, expertise, etc.). I had heard of SquareSpace, from nearly every single podcast ad in the universe, so I told my boss that I’d be comfortable taking that little project off their hands. Had I ever used SquareSpace before? Well, no…But, as I was coming off my high of learning Inkscape so quickly, I figured “how hard could it be?”

The short answer: Not that hard, depending on how much Googling you’re willing to do. I started to really get into the design of the website, using SquareSpace’s platform to build it while using Inkscape as a pseudo-photo-editor and illustrator. It was starting to come along, and I was understanding the SquareSpace commands more and more, but I began to get super frustrated by its limitations. Now, SquareSpace is an incredible CMS that makes it pretty easy to build a great looking website, but I needed more. I started going online and learning about injecting custom HTML and CSS into the site. Truth be told, I was copying and pasting tags that I had no earthly idea about, but I was able to get them to work. And that…is when I figured it all out. “What if I could learn this…I mean, REALLY learn this and use my skills to create incredible websites?” Great idea! But, I didn’t really know where to start. So, what was I to do?

Read my next post for how I REALLY started learning web development.