Adventures in Website Design && Development – 2/20/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.

In this third installment, I will example two, no three JavaScript libraries, one to add features to your site, another to write less CSS, a third to help with all that pesky string concentration, a sweet CSS generator website to make your site pop, in addition to two free services to help your site’s type look its best!


-prefix-free is a JavaScript library self-proclaimed to “let you use only unprefixed CSS properties everywhere. It works behind the scenes, adding the current browser’s prefix to any CSS code, only when it’s needed”, or in other words on the site, “Break free from CSS prefix hell!” Vendor prefixes can be a pain to deal with, not to mention remembering if a certain property needs a prefix or not and placing them in the proper order! prefix-free helps alleviate those issues, freeing you to type only the unprefixed properties. I have used this myself in my Not Pong animation (though it is currently disabled for debugging purposes). Be aware of its limitations before using it, as they might be a deal-breaker for you. Otherwise, be prepared for your CSS stylesheet to become a lot smaller thanks to -prefix-free.

jQuery Browser Plugin

A lot time ago in a galaxy not far from here, the legendary jQuery library contained a function called $.browser(), a simple way to detect the user’s browser. But alas, the largely outdated function was depreciated in version 1.4, and finally removed in v1.9. The now recommend method for detecting a browser is feature-detection, but there are still times when detecting the actual browser name/version is still necessary, something that cannot be done using feature-detection.

Introducing the jQuery Browser Plugin. Using a lot of the original $.browser() code (which is possible thanks to the library’s MIT license) and decent improvements (such as new/better detection), this plugin easily restores the functionally and avoids having to parse the browser’s user agent yourself. I have used it as a small addition to my Not Pong animation, and have found it worthy of use.

CSS triangle generator

CSS circles are easy to make. Simply make a square <div> and apply a border-radius of 50%. Though circles can make for nice website designs, why should you jump off the ledge do what the crowd does? Your website should be yours and what you want it to be. Be different. Make it unique. I am slowly working on an addition to the Triangle Land annex on GitHub, and you better believe I am following my own advice. Instead of boxes and circles, I am using CSS triangles. How do I make them, you ask? By using the CSS triangle generator, of course! CSS triangles are actually a bit of a trick to make, so much in fact I haven’t attempted to do it myself yet! The generator, however, makes it quick and easy. With options for triangle shape (such as equilateral, my favorite), rotation, width and height, even color, you can create virtually any size and color triangle you want! What is there not to like? Now go, break the circular mold, and make your website how you want to be! 😀


Coming from a Python background, I sorely miss Python’s format() string constructor. It removes the need to use plus signs to concentrate strings and variables. But alas, JavaScript has not such function to duplicate this functionality, much less a format() constructor altogether. That is why I was thrilled when I came across String::format. It was inspired by and duplicates Python format() constructor. I have been using it in an currently unreleased (and WIP) project and slowly adding it into my Not Pong site, and have enjoyed not having to use so many plus signs to write my messages! Even if you have no prior Python experience, I recommend you download and use String::format solely for the easier coding it creates. The project’s readme gives clear usage examples, so I doubt you could get confused by the syntax. While plus signs for string concentration do not seem to be going away in the world of JavaScript anytime soon and certainly will not disappear from you project completely with this library, String::format makes coding a little bit easier. Now if only something could be done about that lack of multi-lined string literals… 😛

Google Fonts && Adobe Edge Web Fonts

Although you may have already heard of the latter, the former might need some explanation.

Serif and Sans-serif are relatively good choices for your type’s font, but they generally work best as last resort font-family fallbacks rather than first choice displays. You could use a font that is normally installed on a visitor’s computer, but there are some fonts users will not have (an example would be Impact, a font nearly all computers have but mobile devices lack). There is the powerful @font-face which would work everywhere, but that requires a copy of a font type to be legally purchased (or download a free and/or open-source one ) and stored on your server in multiple formats to handle browser’s different supported font types. For many developers (myself included), this is out-of-reach. What is a web designer to do for nice looking type?

That is where Google Fonts and Adobe Edge Web Fonts come into play. Search their font libraries for a font you like, choose your font options, grab the embed code and add it (per the directions) to your project. Vollia! You now have a good looking font for your type while they handle the different font formats for you. Google Fonts has been around for a while, thus is more well known. Google Fonts also allows importing the font using HTML, CSS, or JavaScript. Although Edge Web Fonts only allows embedding from HTML and I am finding a lot of overlap between Google Fonts and Edge Web Fonts (which is not surprising, as Adobe partnered with Google for both projects), their website is clean and easy to navigate, plus the filter options are more direct than Google’s. There is also a Brackets/Edge Code CC extension to make adding fonts even easier.

Both Google Fonts and Adobe Edge Web Fonts offer quick and easy ways to improve your site’s type. Which one you choose to use mainly boils down to the method you use to import the fonts.

Who knew Adventures in Website Design && Development could be so exciting? 😀