gem install Michael

Michael Alexander's web development blog. First cohort student at Viking Code School.

[geminstallmichael]

Post-Course Thoughts

It's been a couple of weeks, but I've been meaning to recap my experience at Viking Code School now that I'm not in the midst of all those crazy highs and lows.  When I went into this program, I was one of the alpha-test members of cohort 1. I didn’t have a clear idea of what the day-to-day experience was going to be like because there were no alumni who had actually tried it. That's why I want to do everybody a favor and walk through the whole thing in some detail.   I expected an intensive program, but this was more immersive than I ever thought possible from a remote learning experience. It is not designed to be a low-intensity learn-to-code project, but it was the most I have ever learned in any 3 months of my entire life, and I am profoundly glad I stumbled on this incredible opportunity. Working full-time and completing the vast majority of the coursework is grueling beyond belief (I was the only person crazy enough to try that for all 13 weeks of my program), so please take that warning and ramp down your other commitments as much as you possibly can. By the same token, it's not a zero-to-sixty course. You really have to be a solid beginner who has done all of the course prep and even more, or you will seriously struggle. I came in with a little previous experience of founder Erik Trautman's work through my obsessive engagement with his The Odin Project, a free, open-source learn-to-code offering he kicked off about a year back. I was expecting something similar, with a firehose of written information for each unit, each one capped off by a massive project to tie together your understanding. Yes, those two things are part of the package, but it was a vastly more life-swallowing enterprise than I expected.  Material is original, extremely polished and in-depth. Projects push you further than you ever thought possible--Erik seems to think he's failed if you walk away feeling like you've completed all the work there is to complete, so you push and push and yell at cruel fate a little and then hack away some more until you give up with just barely enough to feel satisfied. What surprised me most: this was extremely multi-modal learning: reliant on lots of high-quality reading, but also targeted little exercises, large solo projects, huge pairing projects, group and pair video-chats multiple times a week, multi-hour recorded video demos, a 24-hour-a-day chatroom conversation full of tips and tricks on everything you could think of (nobody sleeps, it seems like), code reviews, over-the-shoulder visits from a TA to your Google Hangout to make sure your team isn’t off-track. The pre-course work is a good hint at how the curriculum is structured, so be prepared to read until your eyes fall out. It was grueling, much more than anything I've heard about pretty much any other online coding course. (HackReactor is probably at least this insane, but that's about it. ). I was working a full-time job when I did this, and it nearly killed me. There were weeks I was doing a 40 hour workweek and a 35+ hour learning week in parallel. I strongly recommend anybody interested in this find a way to block out as much time as possible and say goodbye to their life, preferably with part-time work only or none at all. This thing eats your life and spits you out a full-stack developer who wants to tackle all kinds of projects. I was really skeptical about remote pair programming as a learning strategy, but it just works. You spend 10-15 hours each weekend going through the highs and lows of building a major project with someone who was a complete stranger a few months ago—or as one of my partners called it, "learning by yelling on the Internet." Sometimes you get stuck on something idiotic for two hours, but then you either have a breakthrough or hash it out with an instructor and come out on top of the world. It's a pretty intense bonding experience for strangers on the internet. In a certain way, it's like having a hackathon every weekend for months. We'd build major object-oriented games, elaborate CRUD apps in Rails, admin dashboards powered by raw SQL, large full-coverage testing suites—huge projects for two novices in two days, but the assignment just kept happening, and every time was a major confidence boost. More than anything, I come out the other side of this course knowing that whatever I don't already understand, I can go out and learn. (Like the surprisingly stupid-simple experience of learning to build my own Rack server for static sites. A little googling, a little reading of the docs, and done.) Personally, I'm brushing up on my data structures and algorithms, planning a couple of complex, API-powered toy apps and a couple of entertaining practical jokes, and looking forward to a 2015 where I spend even more of my time coding than the year before. But I would never have gotten to this point so quickly without the pressure-cooker environment Viking Code School put me in, and I feel on top of the world for 2015.

[geminstallmichael]

2/3 Unstoppable

8 weeks and counting!

This Sunday was the 2/3 mark in my stint at Viking Code School, and I’ve only been quiet here because I’ve been so insanely busy. Once the Rails portion of the course really hit its stride, the building was more important than the reading, so we started getting hit with 3 and 4 assignments a week, little sprints to learn particular topics all around the main projects.

Last post here was what, end of week 4? Yeah, in between, I learned how to throw together CRUD apps in my sleep, replace my hard-coded SQL queries with fancy ActiveRecord, play around with complex polymorphic associations, wrestle with API docs, roll my own auth 3 or 4 ways, grumble at Devise until it did my bidding, rack up 20 cents of Heroku bills spinning up a worker dyno to send emails in the background, tear my hair out over Amazon S3 policies— in general, to take off the training wheels and just start building things. 

This last month is mostly going to be focused on testing and JavaScript, which means that I know pretty much all the Rails this course is going to teach me. Curious how much that is? Fire up danebooking.herokuapp.com; that was the midterm solo assignment, when we finally went off on our own (no pairing), got thrown a bunch of Pivotal Tracker stories and simply asked to make a site happen.

I have to say, even if the visuals are a little lazy so far, I think I’ve crossed a major threshold in the learning process. The second my whole life isn’t eaten by this program, I’m going to start building the hell out of solo projects. At this point, that’s not even so far away.

[geminstallmichael]

In Which Our Heroes Parse Endless SQL Queries

Phew!

This week was a long and highly productive week getting a deep SQL refresher and then learning to parse the stuff in ActiveRecord. Personally, I have a soft spot for the clunky straightforwardness of a good database query, so I was a little resistant when we had to start splitting up a good declaration like

SELECT thing, COUNT(stuff) FROM place JOIN other place ON place.stuff=other.stuff WHERE other thing is true GROUP BY (name)

into

Thing.      joins("only part of the join statement").      where("this stuff applies").      group(:name).      count

Not totally convinced the second really holds up in readability, you know? That said, since I haven't dug into the real power of ActiveRecord yet (no polymorphism, no associations), I'm suspending judgment. People tell me it's going to be worth it, even if correlated subqueries in Rails kinda make me twitch right now.

Here's the result of the project, a quick Bootstrappy internal analytics dashboard with enough cool partials in it to be able to auto-generate new date ranges with a quick change of variables. For something that never has to face a user, I think this looks pretty great on its own, with very little hand-coded CSS. 

(Update: link on Heroku, after figuring out the gnarliness of moving over to PostgreSQL: http://sleepy-escarpment-9365.herokuapp.com/ )

(any crookedness between these is just lazy cropping on my part)

[geminstallmichael]

I swear this is the last Tetris! But I have finally, finally hacked together all the todos including proper rotation, all the pieces randomly generating in random positions and orientation, and suitably rage-inducing difficulty level options. Refactoring to come before I post the Github repo, but I have already accomplished more with this than I ever expected.  (Now to start from scratch and do 20 hours of Rails reading!)

[geminstallmichael]

Tetris from scratch is coming along! Apparently I was the only one in the cohort crazy enough to attempt it on top of the rest of the workload, so they were suitably impressed. This video: Full, multi-block pieces that handle movement left and right, gravity and speed correctly, as well as (not seen here) proper row clearing. Input is all realtime via nonblocking i/o, and there are difficulty levels based on a logarithmic sleep delay curve. Also, if you didn't notice: high scores saved and loaded via YAML dump. All I have left to do, other than some fierce refactoring, is to get rotation and instant drop-down working, and the game will be totally feature-complete. I have learned so much this past week about Ruby, about slicing and dicing problems into OOPy bites I can tackle one by one, not to mention my own ability to learn from scratch (and StackOverflow) when I have gaps in my knowledge. More thrilled than ever about choosing this program, and ready for the next 6 weeks of nothing but Rails.

[geminstallmichael]

Non-blocking I/O gaming magic

I've gone mad with power. Thanks to investigating every single comment and answer to this Stack Overflow post and combining key features of a couple answers, I have assembled a single Ruby method that handles nonblocking, carriage-return-free i/o beautifully for realtime little scripted games. BEHOLD:

require 'io/wait'

def char_if_pressed   begin     state = `stty -g` #turn raw input on     system `stty raw -echo -icanon isig`     c = nil if $stdin.ready?     c = $stdin.getc   end     c.chr if c   ensure     system `stty #{state}` # turn raw input off and                              #restore state   end end

So glorious for this baby Rubyist here. Only problems: it still seems to be iffy on whether echo is actually suppressed. Oh well. Open to suggestions. Till then, Tetris is coming together even cooler than I thought.

[geminstallmichael]

A sneak preview of the physics model of my CLI Tetris clone in Ruby. Gameplay coming soon!

[geminstallmichael]

A Tale of Two Face-Clones

Today I want to talk about what happens when you spend a week doing a code school prep work assignment cloning a certain popular social media website—only to discover on Day 1 that your assignment for the week is to clone that very same popular social media website.

The first time around was pretty puny. I have had very basic HTML and CSS for years (I spent a while doing QA on ebooks at one point, and I spent a lot of time fiddling with XHTML). Even so, I had only recently finally buckled down to learn how to align a div properly or clear a float or make vertical-align: middle do anything at all. Even with plenty of reading material and all the StackOverflow posts I could find, every single line was a struggle; the navbar was a nightmare; and I spent a lot of time throwing in shady alignment based on hard-coded pixels that won’t scale. (@media queries were just too much for my brain back then).

Take a look here at the iffy yet very earnest results, including links to preview each page:

http://htmlpreview.github.io/?https://github.com/betweenparentheses/facelook/blob/master/newsfeed.html

(other links here:)

https://github.com/betweenparentheses/facelook

Okay, now fast-forward a week: hours reading through HTML5/CSS3 course materials and tutorials, experimenting with Twitter Bootstrap docs and Sass, grinding out my first Bootstrap page on Wednesday (“why are navbars so hard???”), and receiving feedback from the instructors that I am trying way too hard to fight Bootstrap with my own CSS.

Friday night I sit down to screen-share with my project partner, Andur(https://github.com/LaMarseillaise), in my very first pair-programming session ever. It didn't get very far. Two hours of awkwardly trying to follow along with each other's code and fake our ways through entirely competing approaches to the navbar, in which neither one of us knew what the hell we were doing. I am so glad we took the extra time, because on Saturday we had already worked through the tug-of-war and could get down to the real enemy:  complex and finicky sample material for Bootstrap navbars, the confusion of trying to bolt semantic HTML5 on top of div-happy Bootstrap, and the horrors of trying to override classes that are specified 3 or 4 layers deep—not to mention the time we wasted half an hour trying to specify a clever new class named "invisible" without realizing one of the same name already existed!

By Sunday morning, though, we had gotten into a flow and finally cracked the code of Bootstrap columns and rows, had a couple of pages laid out perfectly, and were able to bang out the last 3 pages in a couple hours flat. Worried that we had more to learn than some of the other students, we went all-out, then turned out to be the first to finish. The end result? Pages like this, which are also linked together well enough that I don't need to give you any of the others:

http://htmlpreview.github.io/?https://github.com/betweenparentheses/danebook_pages_public/blob/master/timeline.html

I'd say that's about more than I ever expected to learn in a single week. After 15 loopy aggregate hours of coding, one dream about deployment on Heroku, and a couple of real head-scratchers, I can honestly say that doing the same project twice over was far more rewarding than I could have expected, even if the thought of a third time makes me twitch.

Stay tuned next week for pure Ruby, gaming insanity, and maybe Tetris?

[geminstallmichael]

A complete SASS tutorial in dialogue form

Week 1 of Viking Code School is all about hacking together static pages in HTML5 and CSS3, but unlike the prep work, we're doing it the quick way with Bootstrap and Sass. Since I was new to Sass, I went outside the program and asked my high school best friend and intrepid coding buddy Lucian to help me out while I devoured the VCS materials.

Our highly elevated dialogue follows.

Michael: DUDE, if I had to learn Sass _really fast_, is there anything you would recommend? they have materials 'n whatnot

but I know you just spent time learning at it, and I figured you are wise and know stuff

Lucian: I will give you a crash course in Sass right now. Ready?

Michael: OKAY!

Lucian: In CSS, if you wanted to target the h1 inside .bluh, you would write it as .bluh h1 { }

Michael: YES.

Lucian: In Sass, you would write it as .bluh { h1 { } }

but give those all new lines

Everything is nested.

Michael: so, like:

.bluh {

h1 {

}

}

Lucian: Correct. And you'd stick all the children of .bluh inside the .bluh nest

Michael: oh man, bluh was FECUND

Lucian: hahahahahaha

Michael: but okay, that makes sense.

this makes it a lot more visually easy to see hierarchy when headings are different inside your navbar from a particular section or whatever

Lucian: exactly

Variables are indicated with a dollar sign. Example

$color: #839219;

Now you can use code later on that's like

background-color: $color;

Michael: okay. so you can make a bunch of pages with the same 4 colors underlying all the elements. like $buttoncolor $backgroundcolor $textcolor $shoutingtextcolor

Lucian: Correct.

Michael: thank you for letting me summarize to myself I know it can be annoying

Lucian: And if you decide to change the color, you only change it in the initial declaration.

So you don't have to look for all the [censored] instances of that color, just change the value of $color.

Michael: right. having just [censored] copied Facebook with regular CSS I HEAR YOU

Lucian: hahahahaha

You can also create entire parts-of-layouts this way, by making a @mixin.

For example:

@mixin foxyboxy {

width:300px;

height: 70px;

border: 3px green dotted;

}

Michael: FOXYBOXY

Lucian: Then say you want to bring that into a div.

You'd be like:

div {

@include foxyboxy;

font-family: ComicSans;

color: mauve;

}

Now the div inherits all the foxyboxy styles, plus the extra ones you added.

Michael:

Gee-whiz!

[have excluded banter less flattering to the amazingness of our heroes…]

Lucian: The only other thing you really need to know to get started with Sass...

is that let's say you make a Sass file, and it's called FoxyBoxy.scss

Go into the directory where FoxyBoxy.scss is...

IN YOUR BASH

yes

and in the bash, inside that directory, type:

sass --watch .

While Sass --watch is active, this will cause your computer to real-time compile FoxyBoxy.scss into a file called FoxyBoxy.css. It edits and updates automatically as you edit the .scss file.

Michael: OHHHH RAD.

Lucian: When you're ready to stop working on it, just abort the command in your bash.

I strongly recommend having two bashes open, so that you can run git for version control without exiting out of sass --watch.

Michael: EXCELLENT.

Lucian: Now you have everything you need to get started with Sass.

AND IT WAS TRUE.

Follow Lucian on Twitter @LucianKahn.

[geminstallmichael]

T-minus 20 minutes

In about 20 minutes, I start code school. AHHHHHHH!!!!!!

I feel crazy to admit this, but it’s only been two weeks since I committed to Viking Code School and decided to throw my life into an intensely focused program to learn Rails development. It’s not that I wasn’t pounding out 20 hours a week of Ruby/HTML/CSS/Javascript/Data Structures/Algorithms practice the past few months, but I hadn’t realized how ready I was for this kind of all-in commitment until somebody offered me the chance to take a serious online boot camp.

Ever since, I’ve been tearing through the prep work as fast as humanly possible, aiming to get caught up in time for the main event (now!). Highlights:

First, a repeat of Intro to the Web (all those elementariness like “what is the web if not a series of tubes?” or “what is an HTTP request?” or “what’s the difference between front end and back end?”)—mostly a skim job for me, because I’ve been neck-deep in this since late spring. 

Second, the one furthest out of my comfort zone: Intro to Design (UX, UI, static page design, teardowns and mockups), which was fascinating conceptually but a little rough on my 3rd-grade-level artistic skills. I draw like a third-grader, and I have the color sense of an 11-year-old dressing in the dark, so I have no shame about that. Even so, my print media experience made the ideas pretty accessible, and I’m always fascinated by the effort to build things to fit the way humans think and experience the world sensorily. 

Third, the part where things got exciting: Software Engineering and Agile Project Management, which really light up my brain. I’d gotten a little taste of this sort of thing by reading Sandi Metz’s Principles of Object-Oriented Design in Ruby last month, a book so lucid it hurts. I came out of that book ready to write long-lasting, beautiful code that is modular and flexible, code built from the start to reshape itself with changing circumstances. (Then I looked at the actual spaghetti code I was writing, and I cringed. This is a long road, right?) Anyway, diving deeper into engineering and project management was pure brain candy for me, and it’s exactly the reason I want to be a developer: I read this stuff, and I think, this is what I want my brain to be full of all my workdays. This is the kind of problem I want to be tearing apart and solving. I would give my left kidney to think about this stuff all day.  (For now, luckily, all I had to give was my tuition fee.)

Fourth was Coding Basics, stuff I have already covered pretty well in various tutorials and the Odin Project curriculum. Still a little fatigued from the design section, I skipped over CSS and started with the Ruby challenges: duplicate the exponent operator; a method to spit out factorials; clone the Enumerable #uniq method for arrays; write #is_prime?; input the corner coordinates  of two rectangles and determine whether they overlap anywhere in Cartesian space; model a complicated counting game where ten people in a circle shout out consecutive integers one after another, switching directions or skipping a person every time the number is divisible by certain factors (after some consideration, this just turned out to be super-powered FizzBuzz, and it wasn’t actually hard). After that, the rest of the test-first Ruby challenges, and I was ready to go: clearly my Ruby, which is my favorite part of the job, is more than enough for the beginning of this course.

After that, with one more week to go, I caught up on the HTML/CSS half of the coding unit: a few days  making simplified static pages cloning Facebook. On the upside, it did get me faster and smoother at laying down divs and polishing my HTML and CSS.  I can’t claim I’m a visual genius, but it completed the project and taught me more about box-sizing: border-box and nested divs than I’d ever thought about before.

There was an optional bonus assignment which I just didn’t have the time to do: THE ENTIRE HARTL TUTORIAL. “Um, hey guys, if you have loads of extra time, could you maybe just do these 50 hours or more?” Sorry, dude, I tried, but it is not happening. Obviously, I am going to have to trust my quick-learning skills and minor Rails experience and dive into this course without the extra practice. Not worried about it.

Instead, with about three days to spare, I decided to take the weekend off, rest my brain, and spend a few minutes a day practicing keyboard shortcuts in Sublime Text. (SHIFT-CMD-D, where have you been my entire summer?). A great tool for that? shortcutfoo.com, which I found to be ENTIRELY worth the $5 per learning track or $11.95 for three. Anyway, soaking up a little extra sunlight before the inevitable deep dive seemed like good self-care, so I enjoyed the late summer light and took some nice jogs and hikes instead.

Anyway, this is all word dribble right now, but I am incredibly excited to start this next chapter of my life and so ready to start dreaming in code. More soon.

[geminstallmichael]

As part of the pre-course assignments, we're blowing through a bunch of challenges in Ruby (a method to identify overlapping rectangles was particularly fiendish), as well as banging out a whole stack of static HTML pages for practice based on Balsamiq mockups. Here's one of the goofier ones: an axe store for that special Viking in your life.

[geminstallmichael]

Hello World!

I'm starting this blog to document a major step in my self-taught coding career, my acceptance into Viking Code School. After months of learning various pieces of Ruby and other languages alone via tutorials, personal projects and open-source curricula (thanks especially to The Odin Project, which has eaten my brain since June), I decided to make it official and get the mentoring and support I craved. Now gearing up for a 30-hour-a-week dive into full-stack development centered on Ruby on Rails and JavaScript/jQuery/AJAX. Considering I'm holding down a day job, the next few months could get intense. More soon!