PAGES

18

Oct 11

Modern Web Development with HTML5 and Javascript



I’ve been doing web development since 2005, matter of fact, the first website I ever builtis still around .  Back then it was DotNetNuke and WebForms projects, and it sucked.

 

I honestly had no idea what real HTML was until .Net MVC came out.  The first time I had to write a real form and learn what happened when you posted information was a mind blowing experience.  I’ve been hooked ever since.

 

Modern web development still sucks.  But I’ve learned to manage some of the sucky parts with what your going to see here today.

 

Step 1: MVC FTW

 

You need to learn MVC 3 immediately.  There should be absolutely no reason we ever willingly start a new WebForms project again.  It’s beyond this article to teach the intricacies of MVC style web development, but I will say that it will immediately boost your HTML, CSS and Javascript understanding.

 

MVC Resources

 

Step 2: HTML5 Boilerplate, Normalize.css, Modernizr and YepNope + Polyfills for browser consistency

 

Battling display inconsistencies with different browsers is never really going to go away.  Legacy IE versions are entrenched in the enterprise world and likely will be there for years to come.  However, we can stand on the shoulders of giants in the web community who have put together a group of collected tips, tricks, magic spells and hacks that give us a pretty consistent baseline experience across most browsers.

 

 

The HTML5 Boilerplate project is a great project for not only getting a jump start on a consistent site look and feel, it’s also a great way to learn about the cutting edge in web development.  HTML5 Boilerplate code is chock full of tasty bits of knowledge ready for you to expand your mind when you’re ready.

 

 

HTML5 Boilerplate and Normalize.css Resources

 

Step 3: HTML5 != Just put a Canvas in it, bro

 

I’ve worked on a couple HTML5 sites… err applications, and I’ve never once found it helpful to use a canvas element in something that is not a game.  There are so many other cool things in the HTML5 spec that aren’t a canvas element that people don’t even know about.  The best parts of HTML5 are the things that make you write less code that is more readable.

 

[gist id="1294650"]

Isn’t that cleaner than a bunch of div’s?  And, not pictured, but equally as important is the cleaner CSS that results from not having class pollution everywhere.

 

I could go on about all the new API’s but the point I want to make is that it’s no longer acceptable to say “All HTML5 adds is just a canvas and audio element, right?”. No,  HTML5 is a collection of state of the art browser API’s and semantic markup elements built to let you make the next generation of applications that make use of native resources without the native application walled garden.

 

HTML5 is a collection of state of the art browser API’s and semantic markup elements built to let you make the next generation of applications that make use of native resources without the native application walled garden.

 

HTML5 Resources

 

Step 4: Javascript: with great power comes great responsibility

 

It’s amazing how intimidating javascript is to the new comer.  I think when faced with the intricacies and inconsistencies of javascript people often fall back to a mess of procedural code with the caveat that “Hey, it works, so I don’t want to change it”.  This is lazy, and not the good kind of lazy either.  We need to, and can, write javascript code that is object oriented, loosely coupled and efficient.

 

Here are some signs that your javascript code is starting to suck:
- You have one long javascript file
- You have everything in the global namespace

 

If you find yourself with a long javascript file and wish you could separate things out into nice manageable chunks, try using a framework like SquishIt to combine and minify your javascript files for you as part of the build process.  Complicated open source projects like jQuery use a similar process to break things down into smaller, more manageable chunks.

 

Cluttering the global namespace is like having all your variables in an application be shared with everything else.  Information hiding is a core principle of object oriented programming and to that end you should know how to write code that protects it’s private data and exposes a nice clean API for you, or someone else, to take advantage of.  One way of doing this is by taking advantage of the Module (or Module-Export) pattern.

 

[gist id="1294687"]

 

These two tips amplify their awesomeness when used together.

 

Step 5: jQuery… I mean YAYQUERY!!!

 

Now, all the purist code snobs out there are going to tell you that you should know how to get elements, modify attributes and animate things with pure javascript.  Well, I think that’s crap.  If I want to build a deck I’m going to use a damn circular saw because it’s fast and I’m trying to build a deck, not learn all about the art of building decks or the inner workings of wood cutting devices.  Just to drive this metaphor home; jQuery is a damn fine circular saw.  And I like to build decks.

 

If I want to build a deck I’m going to use a damn circular saw because it’s fast and I’m trying to build a deck, not learn all about the art of building decks or the inner workings of wood cutting devices.  Just to drive this metaphor home; jQuery is a damn fine circular saw.

 

There are lots of other javascript frameworks out there, but they all do pretty much the same thing and with about the same amount of performance.  Most of us are never going to need much better performance than what jQuery can provide to us, so the easy learning curve and vast amount of plugins available make it a superior choice in my opinion.

 

Here are some of my favorite jQuery Gems I’ll share with you:

 

[gist id="1294683"]

 

jQuery Resources

 

Wrapping it up

 

That ought to get most people up to speed on what I use for Modern Web Projects.  Maybe next time we can talk about taking a site from design file to HTML.

 

 

_
0 comments , permalink


Tagged ,