I’ve been doing web development since 2005, matter of fact, the first website I ever built
is 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
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.
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.
- You have everything in the global namespace
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.
These two tips amplify their awesomeness when used together.
Step 5: jQuery… I mean YAYQUERY!!!
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.
Here are some of my favorite jQuery Gems I’ll share with you:
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.