30 Extraordinary Clock Designs

Posted by Harshad

30 Extraordinary Clock Designs

30 Extraordinary Clock Designs
Getting Started with Modernizr
Wallpaper Wednesday: Dual Screen Wallpapers

Posted: 28 Jan 2013 01:54 AM PST

There’s not a single day we don’t look at clocks, watches or other time-dictating devices to track our daily activities. For years though, we have been conforming to traditional mechanical or digital clock designs without actually exploring the alternatives. Most of us are still used to clocks that comprise of the classic hour, minute and second hands against a square or circle clock face filled with 12-hour numerals.

Today, I will show you how some creative and unorthodox clock designs. Whilst some of them may not seem practical as a time-telling device, the key takeaway from these innovations is their ability to break away from what we have often considered the usual way to tell time.

Recommended Reading: 20 Alarm Clocks To Wake You Up Creatively

Binary Clock. A clock in binary code. Would you buy it? (Image Credit: Firebox)

Time Tuner. This radio tuner-inspired clock will bring a fresh new perspective on time. (Image Credit: Antrepo)

Around Clock. The concept of this rotating clock is based on the constant and subtle rotation of the globe and is thus a better representation of time than the common clock. (Image Credit: Anthony Dickens)

Canna by ChronArte. Like the sand in an hourglass concept, the individual tubes represent the hours of the day while the height to which each of time is filled by water shows you the minutes. (Image Credit: Heinz Mutter)

Recycled Sanyo Clock. This retro clock is made out of a recycled Sanyo turntable and is bound to be a conversation starter with guests around. (Image Credit: Allan Young)

Continue Time. Any idea how to tell the time for this one? (Hint: It’s 3:40:05) The minute hand is attached to the end of the hour hand, while the seconds hand is attached to the end of the minute hand. The result is a truly fluid clock that changes its shape constantly. (Image Credit: Sander Mulder)

Aspiral Kinetic Clock. As the clock face turns, the red ball within rolls slowly and tells you the time at the moment. (Image Credit: Will Aspinall & Neil Lambeth)

Decode Clock. The writins on the clockface are all gibberish until the hour hand passes each of them and decodes the hour for you. (Image Credit: Arthur Yung & Clement Cheung)

Domiuno Clock. Tell time with dominoes. (Image Credit: Carbon Design Group)

Digimech Clock. While the display is in digit form, it is not an LCD or LED display. Each of the digit is formed by a vertical slider which slowly move into a black decrypting box to reveal the time. (Image Credit: Duncan Shotton)

Good Afternoon Clock. Using beams of light as the hour, minute and second hand, this minimalistic clock aptly represents time as intangible and fleeting. (Image Credit: Mile Project)

Frivolo Black Wall Clock. This creative clock design says it all: Clock faces don’t always have to be in fixed shapes like squares or circles. After all, time is a boundless entity. (Image Credit: Calleadesign)

Sundial Clock. An interesting blend of traditional time-reading through sundials and modern-day analog clocks. Thee numbers on the clockface are all formed by shadows cast from the 3D digits. (Image Credit: Porro)

Handmade LED Clock. Very exquisite design that was handmade from scratch to create an old-school jukebox-like clock. (Image Credit: Barry Nijkeuter)

Hoos O’Clock. A clock that is (almost always) looking at you. (Image Credit: Zanzara)

Vacuum Tube Clock. Using vacuum fluorescent display (VFD) technology, time illuminates in neon-like bright lighting in this old-school vacuum tube clock. (Image Credit: Jason von Nieda)

Melting Clock for Shelf. Who says clocks need to be flat and upright? This ‘melting’ clock challenges such traditional notion and bring to life the clocks in the masterpiece of Salvador Dali, The Persistence of Memory. (Image Credit: Hilary Wiezbenski)

Mhin Clock. We’re so used to loading bars on our computer or mobile screens, so why not put them in clocks? (Image Credit: James Tobin)

Eyeclock. Don’t get paranoid and think that this pair of eyes are checking you out; they’re just telling you the time. Its cross-eyed look says 03:50. (Image Credit: Mike Mak)

Vague Clock. If you don’t like a clock that’s always showing you the time and pressuring your life, this vague clock will only provide the time when you press on it. (Image Credit: Sejoon Kim)

Normal Timepieces. In this cleverly designed clockpiece, the hour hand of this clock is actually a rectangular hole that exposes the time on the face. (Image Credit: Ross McBride)

Orolodiana. This minimalistic clock seemed to have borrowed its concept from a volume knob. As you would’ve guessed, the outer ring shows you the hour while the inner circle with the thinner black stripe across shows you the minute. (Image Credit: Enrico Pandolfini)

Atom Clock. Specially designed to resemble the the atomic planetary model, this clock stands apart from typical squarish or circular clocks. (Image Credit: Arti & Mestieri)

Empty Clock. An environmentally-friendly clock made only from bamboo and metal, and with only hands and no clock face. (Image Credit: Shuo Yang)

RollOClock. This looks a lot like another ‘loading bar’ clock, except there are two colors in this one. As the day progresses, the bar gets’ filled up’ displaying how much time you’ve left for the rest of the day. (Image Credit: Aleksey Belyalov)

Segmentus Clock. This looks like an electromechanical scoreboard except that it works 24/7 to tell you the time. (Image Credit: Art Lebedev Studio)

Suede ‘Metal Mickey’ – Retro Redesigned. A very slick-looking retro wall clock made from Suede ‘Metal Mickey’ original 7" single is bound to take you back to the iconic Britpop era. (Image Credit: Amy Dolan)

Gear Clock. It’s always an awesome feeling to observe how individual gears fit together in complex ways to bring together a seemingly simple contraption to give you the time. (Image Credit: Invotis)

Spire. Can you even tell that this is a clock? Drawing inspiration from a Japanese folding fan, the hour and minute hand spiral while it unfolds and folds the blades as time ticks by. (Image Credit: Wireframe)

The Bent Hands. Instead of straight hands to give you the time, this clock has one long spiralling hand to tell you the time for different major cities at one go. (Image Credit: Giha Woo & Shingoeun)

Getting Started with Modernizr

Posted: 28 Jan 2013 01:55 AM PST

Modernizr is a JavaScript Library used by many popular websites including Twitter, USMagazine, Good.is, About.com, etc. In our previous posts, we have mentioned it several times, but we have not actually dug into what Modernizr is.

So, in this post we will specifically discuss this JavaScript Library.

What is it?

First of all, let’s get the essential question answered: what is Modernizr?

Based on the official site, Modernizr is “A JavaScript library that detects HTML5 and CSS3 features in the user’s browser.”

Although HTML5 and CSS3 are great but many of the new features they have, as we already know by now, are not much applicable in old browsers. Modernizr, helps to address this problem by testing the user’s browser on whether it supports a particular feature. If the feature is “unsupported”, then we can deliver an appropriate script or function to imitate the feature it lacks.

Recommended Reading: What Modernizr doesn’t do?

Setting-up Modernizr

At the Modernizr official website, we will find two options to download the file, Development and Production version.

The Development version is a full and uncompressed version consisting of all the primary feature tests; while in the Production version, we can select the feature tests that we only need.

As you can see, there are a lot of options for feature tests in the download page. In this example, we will select all the primary feature tests. Generate and grab the codes. Then, insert the file inside the <head> section.

  <script src="modernizr.js" type="text/javascript"></script>

Lastly, we also need to add no-js class to the <html> tag.

  <html class="no-js">

This class is necessary, in case the user’s browser is running without the JavaScript enabled, we can add an appropriate fallback through this class. If it does, Modernizr will replace this class with just js.

That’s it, now we are all set up and ready to go with Modernizr.

Working with Classes

Now, if we do an Inspect Element on our webpage, you will see that there are many CSS classes added in the <html> tag. These classes are generated from Modernizr and will vary depending on the browser’s capabilities.

For instance, if the browser does not support CSS3 Animations, then Modernizr will generate theno-cssanimations class.

But when it does, it will remove the no- prefix and simply become cssanimations.

Let’s take a look at the code snippet below;

  <html class=" js no-flexbox no-canvas no-canvastext no-webgl no-touch no-geolocation postmessage no-websqldatabase   no-indexeddb no-hashchange no-history draganddrop no-websockets no-rgba no-hsla no-multiplebgs no-backgroundsize   no-borderimage no-borderradius no-boxshadow no-textshadow no-opacity no-cssanimations no-csscolumns no-cssgradients   no-cssreflections no-csstransforms no-csstransforms3d no-csstransitions fontface no-generatedcontent no-video   no-audio no-localstorage no-sessionstorage no-webworkers no-applicationcache no-svg no-inlinesvg no-smil   no-svgclippaths no-placeholder">

The code above is taken from Internet Explorer 7 and as we can see from the generated classes, this browser clearly lacks in so many good new features, such as no support for CSS3 border-radius.

So, in case we want to replace the border radius presentation, let’s say, with rounded corner images in Internet Explorer 7, then we can use the no-broderradius class.

  .no-borderradius div {  	/*--  do some hacks here --*/  }

If you are wondering how far your current browser is able to handle new HTML5 and CSS3 technology, Modernizr has provided a test suit you can use. Visit this page (Modernizr Test Suit), and you will instantly see the output.

Recommended Reading: Reviewing CSS Priority Level

Browser Feature Test

Next, as mentioned above, Modernizr is made to detect or test browser features (easily). To test the browser feature we can use the following syntax;

  Modernizr.featuretodetect

Assuming we want to test whether the browser supports WebGL we can write;

  if (Modernizr.webgl) {  }

We can also negate the statement, that way the result will return the opposite; it is true, when the browser doesn’t support the feature;

  if (!Modernizr.webgl) {  }

Or, if we want to run different scripts depending on the result test, we can also extend the code, as follows;

  if (Modernizr.webgl) {  	/* Script A */  } else {  	/* Script B */  }

The code above states that if the browser supports WebGL then Script A will run, if it does not, then Script B will run. That way, the script will only be loaded when the condition is met and the script is actually needed.

Modernizr.load

One more thing that we are going to take a look at from Modernizr is the Modernizr.load. Modernizr.load is a conditional resource (CSS and JS) loader that is based on Yepnope. Let’s take a look at the following code;

  Modernizr.load({    test: Modernizr.webgl,    yep : 'three.js', /* JavaScript 3D Library */    nope: 'jebgl.js' /*  */  });

Similar to the previous section, in the example above, we run a test to see if the user’s browser supports WebGL. If the result returns yep (it supports WebGL) then we will load three.js, but if it returns nope (it does not support WebGL) then we will load jebgl.js as the alternative.

In case we only need one condition to load the script, we can remove the other one that we don’t need. The following examples shows how we load placeme.js, if the user’s browser does not support placeholder attribute and will load nothing when it does.

  Modernizr.load({    test: Modernizr.placeholder,    nope: 'placeme.js'  });

This practice, as in our previous discussion, will ensure that the users will have the best load performance by avoiding unnecessary bits to download – in other words, we will only load script, only when it is needed.

For further advanced implementation of Modernizr.load you can refer to its official documentation or you can also refer to Yepnope documentation where it is originally derived from.

Final Thought

Modernizr has already done the hard work and save a lot of our time for us, so there is no reason to not include this JavaScript Library when you are working with HTML5 and CSS3, particularly when you need to fill in the gap between new technologies and old browsers.