On good sites I find that the page will still makes sense with stylesheets turned off. If it does make sense then it is a good sign that the document has been coded semantically. This is good news for search engines, accessibility and maintainability. Good coders will always use the right HTML tools for the job, and you can see this by turning styles off.
If you are browsing using Firefox you can turn stylesheets off by hitting CTRL Shift S on Windows or Apple Shift S on OSX
I always like to see if I can increase the font size on a design. I look to see that the design scales without the layout breaking. Often design items like curved boxes do not enlarge with text. The best coders will make sure that design elements scale without breaking. Dan Cederholm formed much of this philosophy in his excellent book Bulletproof Web Design.
If you are using Firefox you can increase the font by pressing CTRL ++ on Windows or Apple Shift + on OSX.
I check whether there is a print stylesheet in the code and then preview it to see how it is designed. A carefully thought out print stylesheet is a strong sign of a talented coder. Print stylesheets are a real strength of CSS and it is a great shame if they are not used.
In Firefox you can preview how a page prints by going to File > Print Preview on Windows or File > Print > Print Preview on OSX.
I look for the site to continue to be usable with images turned off and for meaningful alt text to have been given to the images. This is good for users who browse with images turned off and improves the accessibility and SEO of the site.
If you install the Web Developer Toolbar for Firefox you can have a look at sites with images turned off. Go to Images > Disable Images > All Images.
I always like to look closely at the typography on a site. If a little care and attention has been given to the type it really makes a difference. I find that typography is a good sign of coders who give an extra polish to their work.
Checking the size of the document gives me an idea of how quickly the page is likely to load. I look for a document size of under 175k, and ideally much lower, so that the site will load quickly and that the user won’t suffer long download times. Making sure the page load time is acceptable is a skill in itself and on a very rich site it is often an education to see how it is done.
You can check the document size using the Web Develper Toolbar in Firefox. Go to Information > View Document Size.
Looking at the CSS file on good sites I often find a clearly commented stylesheet. This is a great sign that the site has been coded with maintainability in mind. A quick glance at ids and classes given to divs is another way to see a good coder. With good coders you will usually be able to understand where the div is without viewing the source.
Microformats have emerged as an excellent way to give HTML documents extra semantic meaning. Finding microformats on a site is a sign that the latest developments in HTML are being followed. It is a sign that the coder knows their stuff and that they are likely to stay on top of future developments.
You can see if a site has microformats by using the Firefox Tails Export plugin.
Our industry is unique in that you can see the inner working of someone’s work at any time from anywhere. Learning from others by looking over and appreciating their work is a great way to improve skills.
How do you assess good front end coding?
Have an update or suggestion for this article? You can edit it here and send me a pull request.
Build your own Vim statusline
Statuslines in Vim are not hard to create. Making your own means one less dependency in your life.
Custom Vim Bindings in tmux 2.4
tmux 2.4 made a significant change to key bindings. Here is how to support custom keybindings for versions before and after tmux 2.4
Using template files in Vim
Vim templates or skeletons, allow you to specify a template to be used for new files with a certain extension.