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 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.
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.
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.
