Installing Bower on Ubuntu 14.04 LTS

Bower is a package manager for the web and offers a generic solution to the problem of front-end package management. For example the Polymer library uses Bower for package management. In fact, the primary reason for me to install Bower was to use Polymer. The main difference between Bower and pther package managers is that Bower will manage any packages, even if that means HTML, CSS, or images. In this case, a package means any third-party code, usually publicly accessible from a Git repository.
Read More

Flexible date manipulation in javascript

Date manipulation is a common programming task a developer does regularly and many times can get tricky and cumbersome. If youy web applications relies heavily on date manipulation on the frontend than moment.js is the library you have been looking for.

In short this is what you can do with moment.js

moment("20111031", "YYYYMMDD").fromNow(); // 2 years ago
moment().endOf('day').fromNow(); // in 2 hours
moment().startOf('hour').fromNow(); // 9 minutes ago

moment().subtract('days', 6).calendar(); // Last Wednesday at 10:09 PM
moment().add('days', 1).calendar(); // Tomorrow at 10:10 PM

Read More

Speech Synthesis API : Making your web apps talk

The Web Speech Synthesis API allows your web apps to convert page text or any other predefined or dynamic text to be rendered to speech. Although currently supported only in Chrome 33, the api enables you to add nice accessibility support to your web apps. However, I’m hard-pressed to find a suitable application for the use of it, besides maybe online games and browser slideshows with background commentary. A demo is given below.

Read More

Intercepting mouse events on an iPad

In the last post we saw how we could easily work with mouse events on an iPad. Touchscreen devices like the iPad do not have a cursor, so the user cannot exactly move the mouse over an HTML element triggering a ‘mouseover’ event. One of the readers requested on how we could use a different interaction pattern on an iPad for a ‘mouseover’ event than on a desktop browser. For example in the following web page code the image-container class is attached to images div which displays a preview link overlay on mouseover.
Read More

Making ‘mouseover’ event work on an iPad

Because of the way Safari on iOS creates events to emulate a mouse, some of your web page elements may not behave as expected on iOS. In particular, some elements that only use mouseover handlers need to be changed because iOS doesn’t recognize them as clickable elements, such as the div below. As the image-container div is not clickable in iOS, the corresponding mouseover event is not fired.
Read More