As a web application developer, progress bars are great when you want to show the user that some action is happening, especially when it can take a long time. Creating them is easy with the HTML5 <progress> tag. This article will discuss how this tag is rendered by default in all operating systems and browsers and how to style the progress tag with CSS, even in browsers that don’t officially support the it. It will also show some interesting examples using advanced CSS3 techniques.

[Read more »]

Up until now, if a developer needed to clip an image in a non-rectangular shape, it was necessary to save the image as a PNG with an alpha channel. If the image is a photograph, the file-size balloons up to unacceptable levels. My new library, polyClip.js, allows developers to clip these images using photograph friendly JPEGs instead. This article guides you step by step on how to use it yourself.

[Read more »]

While researching the possibilities of using text-shadows in IE, I noticed that there wasn’t any silver bullet that produced multiple CSS3-like text-shadows in IE. However, combining my cssSandpaper script with a refactored version of a text-shadowing script by Kazumasa Hasegawa, we can now have IE text-shadow goodness.

[Read more »]

Even though onforminput is deprecated, oninput will allow developers to do dynamic calculations on forms with little JavaScript knowledge. Unfortunately, it doesn’t work in IE8 and lower, and there are some small bugs in IE9′s implementation when trying to delete characters inside a form field. So I implemented a fix for these issues with an update to my cross-browser HTML5 Forms polyfill, html5Widgets.

[Read more »]

The onforminput event has been stripped out of HTML5, and it makes me sad. This article will show examples of how it works, how you can use it today in browsers that don’t support it, and hopefully will also present a good case as to why it should be put back into the HTML5 specification. Should something this useful and easy-to-use be abandoned?

[Read more »]

Ruby Characters, although used originally to help people read complicated Chinese and Japanese characters, can also be used to annotate all types of information to written text. This article shows how you can use it in browsers that support it, but also in ones that don’t using a simple stylesheet.

[Read more »]

The seemingly impossible task of coming up with color codes off the top of your head can be done easily using CSS3′s hsl color notation. Read how you can use this “human-friendly” and how it can work in the few browsers that don’t support it natively.

[Read more »]

Next generation web forms using HTML5 is hard to do today due to spotty browser support. I demonstrate how a suite of JavaScript libraries can be used to help us use HTML5 Forms today.

[Read more »]

One thing HTML5 forms can’t do is dynamically show and hide form elements according to the data that the user has already entered. My new library, visibleIf gives you a very easy way to do this using the HTML5 data- attributes.

[Read more »]

In the first in a planned series of posts, I update cssSandpaper with new features. This week I add IE support for translate() support to CSS transforms and alpha channel support to linear gradients.

[Read more »]