Adventures in Website Design && Development – 7/6/14

As a practicing and learning Website designer && developer, I come across many Website creation related tools, examples, demonstrations, and concepts. When possible, I try to use these elements in my own work. Adventures in Website Design && Development documents my many findings and passes them along to you. In this way, we both are on an adventure to become better website designers and developers.

We are finally getting back to the more traditional AWD&&D format with this edition. I have come across lots of pickinic baskets full of delicious goodies in the last month and a half since I started doing more teachy editions, and I am way too eager to jump right in to give a quick summary, so let’s get right to it!


It’s a fact, the recommended way of checking if a browser supports something is via feature detection. This can be done yourself, or be handled for you via a JavaScript library such as Modernizr. However, for those times you really have to use user-agent sniffing and suffer from extreme “Everything must be correct” personality, you may want to give WhichBrowser a look. Seriously, this primarily PHP library is UA-sniffing overkill. Created by Niels Leenheer, who runs the fabulous, WhichBrowser should be able to accurately detect all browsers you throw at it. Using this thing for a personal or cooperate website is massively out of place (use feature detection instead), but for a very small number of applications and, this may be exactly what you and your meticulous details need. πŸ˜›

jQuery Runner

I am surprised I have not showcased this one already. Basically, jQuery Runner is a stopwatch jQuery plugin that pulls double duty as a countdown timer when that option is enabled. This is what I used for the timer in both A LANDSLIDE HAS OCCURRED and TEE VEE HERE. It is small, simple, and does what it says without fuss. You can even format the timer the way you want. What more can you ask for? If the need for a stopwatch or countdown timer ever arises, this is and will be what I turn for to get the job done. ‘Nuff said.


Judging by the name, grunt-dentist could sound like a very odd, useless, silly Grunt task some person hacked together in 30 minutes after watching a lot of tooth-pulling videos on AFV or the infamous dentist sketch by Tim Conway and Harvey Korman. However, it is not that at all. grunt-dentist is actually a task that converts all instances of link and script tags into a single instance. In other words, it takes the links to multiple CSS and JavaScript files, removes all but one, and changes the remaining one to point to a single, ideally minified CSS and JS file. You will need to handle the creation of the minified files yourself, but that is understandable. grunt-dentist can even take all inline styling and scripts and relocate them to an external file. I can see grunt-dentist being used in website deployment, when you need to condense all your styling and script assets.


Self described as a “painfully obsessive cheat sheet” for favicon sizes and file types, favicon-cheat-sheet contains possibly everything you wanted to know about good favicon practices. From most basic browser compatibility to the flurry of iOS versions to GoogleTV??? and beyond, the writer’s “obsessive research” certainly shows. If you ever have a question about favicons, this is where you go. Quickly looking it over, it seems I need to revise my favicon practices a bit, minus a good part of the obsessive compatibility fever. πŸ˜›

That does it for this edition of Adventures in Website Design && Development! I apologize for getting these last few out late. I have been really swamped this Summer semester, and I have not had as much time to prepare for it like I used to. I sadly cannot promise it will not happen again, but I am doing my best to pull it back to the proper day. πŸ™‚