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.
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() constructor altogether. That is why I was thrilled when I came across String::format. It was inspired by and duplicates Python
&& 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?
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? 😀