When in Rome

I really like learning new programming concepts and methods.  The beautiful and frustrating thing about software development is that it’s kind of endless.  No matter how much you learn, there’s almost always going to be something you don’t know.  As long as you don’t let that though overwhelm you, and focus on the process instead of the outcome, it can be a fun ride.

And the internet is a great place for learning.  Don’t get me wrong- it’s also full of inaccurate, opinion-tainted drivel, but you can definitely find really good resources.  How to tell them apart?  The compiler (or browser in the case of the web) doesn’t lie.  Learn something, try it on your own- if it works, on a real project you’ve found a good resource.

A couple months back I posted about Wes Bos’ great courses (seriously- if you want to learn, go get his stuff).  I also find Pluralsight very helpful (sometimes you feel like laying down and being lazy- why not watch videos too!).  Free Code Camp is another great avenue for learning.  I started that track a few years ago but drifted away due to work and time limitations.  When I went back a few weeks ago, I found even more great problems and projects to practice on.

One of them is the Roman Numeral Conversion algorithm problem.  It’s listed as an “intermediate” difficulty question, but the instructions are simple: “Convert the given number into a roman numeral”.  For some reason, this one was giving me a really hard time- I just couldn’t figure out how to do it without making a big map of numbers linked to their corresponding roman numerals.

So I decided to do exactly that.  I would solve the problem in the worst way I possibly could.  If my only idea was to make a big map, I’d just make a big map.  And something interesting happened along the way.  Patterns began to emerge.  Using my big map, I had a bunch of conditional logic, depending on the length of the number.  But I realized I could break that into a single loop.  I had a whole bunch of logic in that loop that really belonged inside a helper function, so that was the next step- abstract it out to a helper.  Finally, I realized that instead of the map (much smaller now), if I used an array, I could match the index up with the loop counter variable in my main function- passing the correct Roman Numeral letters without having to manually do so each time.

The code is available in some Github Gists- first, second, and final passes.  Apologies if there are errors- never used the Gist feature before, but it’s pretty cool!

I bet there are many ways to improve it- the logic in the helper seems unwieldy, but the best thing I learned from this exercise was the general process.  Get something working, see patterns, edit, repeat.

Get Twitchy

If you haven’t checked it out, https://www.freecodecamp.com is awesome.  It’s a great collection of challenges and projects that lead you down the path to software development enlightenment.  And – spoiler coming here – it’s all free!  If you’re even a tiny bit self-motivated, this is a very useful resource for learning to program.

One of the projects is to create a Twitch.tv ‘status’ app.  Take a list of streamer usernames and use the Twitch api to display their status.  If active, show what they’re doing.  Each listing should also have a link to their stream.

Sounded like a perfect place to practice some Angular.  Binding the UI to the data received from the api is kind of a perfect use case, no?  I was familiar with the basics, so I really tried to focus on Angular best practices.  Using services and factories to manipulate the data, instead of doing it directly in the controller.

Using a tool like codepen (http://www.codepen.io) is a great way to rapidly get up and running, as well as experiment with different aspects of the Angular app.  I could quickly set up the app the ‘bad’ way (everything in the controller), get it working, then refactor out the logic and data into services and factories.  Codepen also let me practice some other problem solving skills- it’s a great tool, but the ease of use can also cause some issues with other tools (Twitch’s api doesn’t like you accessing from a frame, and Angular routes had a little trouble with that as well, also- you can’t really use the templateUrl option in Angular with Codepen), but those minor negatives were far outweighed by the positives.

I’ve still got some work to do, though I did submit the app as ‘finished’.  I found myself playing and tweaking and changing every little thing- realized that this process could probably go on forever- and called it good.  Confession: I still manipulate the DOM in a controller in a couple places.  It just works, and it’s so familiar from the jquery days.  I’ll kick the habit eventually, but for now, that security blanket stays!  Confession 2: I still don’t really get how angular-animate works.  I can get simple show/hide use cases to work, but anything more complicated sends me running back to element.style.  Confession 3: I absolutely Googled the code for the css3 transitions on different views.  I made tweaks to get it looking as I wanted, but definitely stood on the backs of some people much smarter than I for that aspect.

Want to tear the project apart?  Tell me how bad it is?  Check it out at http://codepen.io/joedriscoll79/full/BKJQNa/