Crash Course in Front-End Development

Published: 2014-09-21

Tagged: readings

Something ends, something begins. My new job has exposed me to a multitude of new learning material that I otherwise would not have had the chance to cover. The experience was, or rather still is, pretty intense and at the same time - very humbling. If you want to skip to the meat, click here, otherwise I'll submit you, gentlereader, to some personal ramblings in the next few paragraphs.

I was pleasantly jolted out of my comfort zone in many aspects but most notably in front-end development. I picked up HTML and bits of CSS when I was 11 or so - mostly by looking over the shoulder of a friend as well as looking at the source of html documents. This happening before I even dared to dream of Internet access and on an ancient 133mhz, 32mb ram machine running Windows 98.

It was enough to create pages about video games I liked or simple ezine articles. It was probably what got me hooked on the whole "get the computer to do what you tell it to" thing that many coders seem to share.

However, it is not enough to tackle a modern web application project so I set out to cover everything that has changed in this area for the past 10 years. The changes, while huge when viewed from the side, are manageable having a firm grasp of the basics I've somehow kept inside my head for over a decade.

I quickly combed StackOverflow and Amazon in search of the right sources that would update all I needed to know and two weeks later, while not a rockstar-ninja, basing on recent experience, I reckon I could get a junior front-end dev gig.

Front-End in a Pill

I'll list the materials I went through in the order I went through them as well as some notes on each one.

Update (10/04/2019): A friend brought to my attention that this site lists a ton of good JS-related courses: https://courseduck.com/programming/javascript/

1. Responsive Web Design - Ethan Marcotte

I started with this as it's the shortest of the trio and I thought it would give me a decent overview. I wasn't disappointed. The author goes through three techniques to make your design look good across a variety of devices:

• Sizing fonts using em.
• Using the ratio = target dimension / context dimensions equation to set element dimensions based on their parent containers. This is the basis of fluid layouts and it behaves better on different devices.
• The work-horse: media queries. These are css statements that apply the enclosed css only when certain conditions have been met - most often whether the max-width of the viewport is below a certain value.

This gave me a general understanding of how a layout resizes it self to fit, look good, and become usable on pretty much anything that renders the DOM.

(link).

2. Responsive Web Design with HTML5 and CSS3 - Ben Frain

I began reading this and the next and last book at the same time, but due to working with html for a while now, I was able to suck the information in at a faster rate.

This book touches again on responsive design that I went over in book #1, however it also provides some more historical context of how they came to be.

Next it launches into everything that has happened between html 4.01 and now - the semantic markup of html5, the new form input types, and on ARIA. This was refreshing as being able to create documents easier to read for both machines and people is what this whole game is about, right?

Later, the Author brings forth all that CSS3 brings to the table: improved selectors, web-fonts, colormodes, and a host of visual fireworks such as gradients, transforms, transitions, and animations. I knew these existed, by I was stuck in the world of CSS1. While reading this and trying out some of these techniques, I couldn't help but think "man, the blink and marquee tags were so rad".

Finally, Ben Frain brings up the topic of cross-browser compatibility. He touches on this throughout the book, pointing his finger at IE quite often, although I think many people who started web design/development recently won't get his jokes, but the last chapter goes into what are pollyfills and how to use them effectively with (modernizr)[http://modernizr.com/]. Modernizr is a way to make your projects not completely fall apart in ancient browsers suchs as IE8 or below, but the Author raises a good point: why devote development and maintenance time to fading browsers when you could be devoting this time to making a fast rising number of mobile users happy?. Pause. Breathe. This book is from 2012 - was that the year of Peak IE? Has enough time passed to show outdated browsers the middle finger and knowingly wink at a client before passing on the revelation to them?

(link)

3. Eloquent Javascript - Marijn Haverbeke

I don't think this book has to be introduced. Not only is it a great resource to get started with JS, it's also available free online. With interactive coding example. Whoa.

The books begins by going over simple syntax, which while familiar, allowed me to get a better handle on it. Then it goes into topics I've never touched upon - things such as the prototypical inheritance and the JS way to getting things done. Being able to run code, modify it, run it again quickly right at the lesson is a great feature.

In the second part, this knowledge is put into practice and into context by learning to work with the DOM. Again, I was able to fill in gaps in my knowledge thanks to this part and weave many little separate concepts into a bigger picture. The parts about even handling, working with forms, and XMLHttpRequests were most valuable for me. That and the part about Promises, which seem to be gaining momentum in this field as a great way to tackle complicated asynchronous tasks.

Last, but not least, we're treated to a small taste of node.js. While I'm not interested it in it and don't use it at work apart from installing a few packages such as Bower or Grunt, it satisfied my curiosity and heck, who knows, I might give it a go at a later point.

(link)

Following the Yellow Brick Road

I was able to fit these three works into two weeks of morning and evening sessions and even when I was in the middle of this retraining marathon, I was able to apply what I learned (even just that morning) to what I was doing at work.

Things, for which I always turned to plugins for, were now a matter of some quick work with JS events, html5 markup, and shiny CSS3 animations. I feel a bit stupid for putting this off for so much time, but now I feel I can tackle the assignments handed out at work with renewed vigor - because I finally understand what's going on and because of that knowledge I can estimate whether a task will eat an hour or a whole day.