I just read an article that is quite useful on the hackification site. There are a few things that I don’t totally agree with, but this is one of the most practical posts I’ve read on development that isn’t full of bias for one framework/approach/toolset or another.
10 Development Tips in a nutshell are:
- Use a Reset Stylesheet
- Use a Browser Development Plug-In
- Learn JavaScript
- Pick a JavaScript Framework, and Learn It
- Learn Photoshop
- Use Semantic HTML – And No Cutting Corners
- Find Out Why It Doesn’t Work – Don’t Shotgun-Debug
- Test on Internet Explorer Earlier
- Don’t Be Afraid of AJAX
- Charge For Old Browser Support
I have a few random thoughts about this list. Mostly I agree. Here is my $0.02 on the points, but not in the original order:
Disagree with Photoshop
To start, I just can’t accept PhotoShop as the only option! It is very expensive. The learning curve is huge. It has been promoted by many experts as the best graphical creation package in the world, but that is only true if you prefer flying a jet over driving a Rolls-Royce.
There are plenty of other image tools to choose from that can produce a high-quality product. Check out GIMP as a full-featured open source alternative. Several good web graphics people I know use Fireworks. I find that Acorn is pretty good for easier image manipulation, but I hate the way it puts the “BUY NOW” sash across your workspace.
The Browser Problem
Some of these top 10 involve directly or indirectly the problem of Internet Explorer. IE’s market share has been dropping steadily for a couple of years, and it has about 54% of all web usage now. Surprisingly, IE6 (an ancient relic) still has about 20% of the market. I know, that seems really disgusting.
One of my friends manages the MS consulting practice at a huge global conglomerate. He told me recently, “Nobody uses IE6 anymore.” The stats say differently. If you choose to ignore it, you should warn users that come to your site or app that they won’t get the best experience on that old broken browser they are using. I frankly dislike working with any version of IE, but it’s a hazard of the trade. The point to web developers is that IE6 is a bad problem.
Microsoft has never chosen to be strictly standards compliant with IE, but they have made recent statements regarding improved compliance from here on. Most say IE8 is much better, and that may well be, still I’m not celebrating because they are starting from such a poor compliance position.
Will you support IE6? It can easily add more time to your build/test cycle than all the other browsers combined. (heavy sigh)
Not only does IE butcher the rendering of our good, compliant, and pretty pages, IE is by far the slowest browser in the world. For more info on browser performance, there are some good side-by-side tests published. Here is the best one I’ve seen.
Find Out Why It Doesn’t Work
For point #7 in hackification’s list, I’m especially guilty of debugging in a shotgun approach, so that tip may be the most helpful to me personally. I’ve always been a ‘fix and run’ guy. I hereby pledge to dig deeper immediately and figure out the root cause. Shouldn’t we all?
Use a Browser Development Plug-In
Firebug is a Firefox plug-in that is heavily used for step-by-step interactive debugging of Javascript in a visual environment. Also, it can really help with measuring the performance of your pages by analyzing network usage. It helps with HTML inspection by pinpointing elements in a page easily. Firebug can send messages to the console directly from your page through Javascript.
The Firebug website says you can extend the plug-in and add your own features. Good luck if you try it, and let me know how that works out for you.
The accolades for Firebug are numerous, and the consensus is clearly that it is an outstanding tool for web development.
For additional performance measurements, Yahoo!’s YSlow can provide more information about the cause of slow document load times. It is an extension to Firebug with more analytical capability.
If you choose not to ignore Internet Explorer, and I recommend that you do NOT (as tempting as it is), then the IE Developer Toolbar is useful. It’s an IE plug-in that tries to provide much of the same debugging and measuring as Firebug. Ummm…not quite there yet. It doesn’t get high marks from most people.
Reset Stylesheet
The reset stylesheet is something I’ve seen and used in several apps. However I’m not very consistent with it. I found on Yahoo something that looks pretty good for establish a standard kit of stylesheet definitions. The foundational YUI Reset CSS file removes and neutralizes the inconsistent default styling of HTML elements, creating a level playing field across A-grade browsers and providing a sound foundation upon which you can explicitly declare your intentions.
In addition to a reset sheet, Yahoo provides a base stylesheet to make browser safe initializations. It is called YUI Base CSS and it can be a good compliment to a reset stylesheet because it sets common HTML elements in a consistent manner.
Here’s an example of a reset stylesheet (must be tweaked for your code):
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; } table { border-collapse:collapse; border-spacing:0; } fieldset,img { border:0; } address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; } ol,ul { list-style:none; } caption,th { text-align:left; } h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; } q:before,q:after { content:”; } abbr,acronym { border:0;
}
Here’s another good one I’ve used.
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ”; content: none;
}
/* remember to define focus styles! */ :focus { outline: 0;
}
/* remember to highlight inserts somehow! */ ins { text-decoration: none; } del { text-decoration: line-through;
}
/* tables still need ‘cellspacing=”0″‘ in the markup */ table { border-collapse: collapse; border-spacing: 0;
}
Here’s an example of a base stylesheet (must be tweaked for your code):
h1 { /*18px via YUI Fonts CSS foundation*/ font-size:138.5%; } h2 { /*16px via YUI Fonts CSS foundation*/ font-size:123.1%; } h3 { /*14px via YUI Fonts CSS foundation*/ font-size:108%; } h1,h2,h3 { /* top & bottom margin based on font size */ margin:1em 0; } h1,h2,h3,h4,h5,h6,strong { /*bringing boldness back to headers and the strong element*/ font-weight:bold; } abbr,acronym { /*indicating to users that more info is available */ border-bottom:1px dotted #000; cursor:help; } em { /*bringing italics back to the em element*/ font-style:italic; } blockquote,ul,ol,dl { /*giving blockquotes and lists room to breath*/ margin:1em; } ol,ul,dl { /*bringing lists on to the page with breathing room */ margin-left:2em; } ol li { /*giving OL’s LIs generated numbers*/ list-style: decimal outside; } ul li { /*giving UL’s LIs generated disc markers*/ list-style: disc outside; } dl dd { /*giving UL’s LIs generated numbers*/ margin-left:1em; } th,td { /*borders and padding to make the table readable*/ border:1px solid #000; padding:.5em; } th { /*distinguishing table headers from data cells*/ font-weight:bold; text-align:center; } caption { /*coordinated marking to match cell’s padding*/ margin-bottom:.5em; /*centered so it doesn’t blend in to other content*/ text-align:center; } p,fieldset,table { /*so things don’t run into each other*/ margin-bottom:1em;
}
Conclusion
My conclusion is that web development is hard, and it’s getting harder all the time because the pieces and parts are getting more advanced – translated “complex”. Yet, that makes it fun and challenging. Isn’t that why we make the big bucks?! 😉
I like hackification’s list. Some of these were a great addition to my best practices. I recommend you read the full article over there, even if I don’t agree with everything.
Have you ever read the 7 Habits of Highly Effective People? There is a key concept that Covey calls “sharpening the saw”. As a web developer, taking a step back to put these top 10 tips into your daily routine is like sharpening the saw – it will make your work go faster later. Especially the framework stuff.