Since I last posted here I have graduated (with a shiny BSc degree, sitting on my shelf collecting dust because the university book store wants an arm and leg for the frames and I’m rather fond of my arms and legs), went on a whirlwind hosteling trip around Japan which included an overnight at a JR station and now I am back in the real world. So much has happened in the web world while I was stepping through CPU simulators clock tick by clock tick and gluing coloured paper to poster board to make a paper interface prototype. Not that it wasn’t relevant or elucidating, just kind of stress inducing.
HTML5, CSS3, Responsive Web, and Ruby on Rails 3 are all topics I am extremely interested in investigating more thoroughly. JavaScript has also advanced and is gaining reputation in front-end and browser extension development, when it once was ill-respected as the thing that cut-and-pasters used to make snowflakes fall in their pages. Here’s what I’ve been up to thus far:
Ruby on Rails
This was pre-graduation but I was contributing to an open source Rails project, Markus during my last term at school. I wrote a blog for their dev blog, Ruby on Rails Tutorial: Ch1-5 Summary that extracts out key points from Michael Hartl’s Ruby on Rails Tutorial book.
Although Hartl’s tutorial is highly recommended as a good starting point to learning Rails, Hartl’s teaching style does not suit me. The tutorial makes use of a sample app, a twitter clone, and while learning by example is great in theory, I found myself getting lost in the details of the sample app and not really retaining information about Rails. To make things worse, the chapter conclusions always say something along the lines of “now push to github! and now push to heroku!” instead of, you know, listing out the learning outcomes and summarizing the chapter. I had to write my own summary to retain any information at all. The book also tends to say things like “do this, but don’t worry about it yet, we’ll explain it later!” – why not just explain it now and not in some hazy, undefined future?
In contrast, CodeSchool’s Ruby on Rails for Zombies course is awesome. The “Learn by Doing” method in which they feed you information in short 15min screencasts, and then get you to complete challenges relating to the material just taught is a great way to learn. I liked it so much, I actually enrolled -look at my pretty badges – and I’ve completed 8 courses besides Rails for Zombies since. Right now I’m going through Rails for Zombies 2, hopefully I can build my own app from scratch when I’m done.
HTML5, CSS3, Responsive Web
I didn’t think HTML5 & CSS3 were going to be anything special – HTML5 is just a handful of new tags right? – but they are! I coded my new portfolio web site, christine-yu.com with these new standards, and now the theme of this here blog pains me. If you look at the source, I have divs nested like 10 levels deep just so I can have multiple background images – CSS3 has multiple backgrounds built in! CodeSchool’s CSS3 course annoyed me a bit by constantly “challenging” you to add drop shadows to elements, but you gotta admit the drop-shadows look pretty spiffy. The new HTML5 elements define sections of a site semantically, and help me cure my divitis.
The idea of the “Responsive Web” is also intriguing, the Sweet Hat Club website is one example of a responsive site that is completely mind blowing. It looks like nothing more than a silly site at first, but when you start resizing it, crazy things start happening. Obviously, no one is going to sit there and resize their web browser, but the myriad of different devices that can view web pages are all different sizes. The person who first pointed me towards this topic was Yui and I really cannot thank her enough! My pilot attempt at making a responsive site can be seen at my portfolio again, but really is more adaptive than responsive because it can only sense the iPhone/iTouch screen size. When it does though, it moves the header items, hides the social icons etc. I will be putting more work into it shortly.
Plus I really need to make a new theme for this blog…
Javascript
Back in the day, I disliked Javascript. If you wrote a “password protected” page with JavaScript, you had to place the password in the script, which is of course viewable by any user with more than 2 brain cells when they view the page’s source. Similarly, if you wrote a quiz using JavaScript, the answers had to be coded in the script and was viewable in the source. When I was in the tenth grade, I took an IT class at school and the teacher would give us silly little quizzes written in JavaScript. Seriously?! Of course, the questions were ridiculously easy so the class was a complete waste of my time. The teacher did not know the subject matter well at all, he would take attendance and leave for an hour, and was amazed at the Flash animation and amateur website little 15-year old me cooked up. Even gave me an award.
But now, Javascript is so much more. The name is unfortunate because it’s nothing like Java at all; my university used to be a “Java” school meaning they teach you Java from the get-go (two or so years ago they started teaching Dr. Racket instead) so I am educated in Java. It is strange for me to see functions being declared, while being assigned to a variable all at the same time. While not having a name at that! Also loose typing – can I really depend on the language to know how many bytes I need, and exactly what to do for any variable? I watched Douglas Crockford’s JavaSciprt: The Good Parts talk, and I feel like my eyes have been opened.
To practice with the language, I’ve started writing Firefox extensions. Browser extensions, both Chrome’s & Firefox’s, are done in Javascript and HTML/CSS. I’ve done two, EyeBus which displays the next Translink bus times in the addon toolbar, and FireReads.
EyeBus is actually really useful to me because I often miss the bus because I was too busy surfing the internet – I wrote it awhile ago, but revamped it using Firefox’s new Addon SDK. If EyeBus seems stuck on the “Loading…” phase and really slow, it’s not stuck – Translink’s NextBus feature which it uses just takes around 10-15s to respond. It drove me nuts while testing the extension.
FireReads is a really basic extension that just sends the selected text to search on GoodReads. I was actually planning on doing more through GoodReads integration using GoodReads’ API, but I ran into trouble using OAuth through JavaScript. It takes a bit of time for the Mozilla editors to review an extension, so I thought I’ll ship a simple version to them for review first and puzzle out OAuth in the meantime. I like how the Mozilla editors provide some feedback for improvements, last time they advised me to not use innerHTML, so I’m eager to see what they’ll say.