Who is User Agent Man?

When writing my blog post about Clicking Through Clipped Images Using CSS Pointer Events, SVG Paths and VML, I needed to create SVG paths. The problem is that they look so complicated and are not intuitive enough to produce by hand. However, I came across a cheap and simple way of creating SVG paths using the GIMP. People tell me I am also cheap and simple, so maybe that is why I love this solution so much (It takes only six simple steps!) So, for the rest of you like-minded people, I would like to share it this solution with you.

In HTML documents, setting a DOM object’s pointer-event property to none will result in any mouse event to pass through that node to the nodes positioned underneath. This, along with SVG Paths and some VML fallbacks for IE, can be used to make some very interesting effects. This article covers how to do this in depth, along with some interesting gotchas in even modern browsers that affect performance. You’d be surprised what eye-candy you can produce today, in both older versions of Internet Explorer to the most modern mobile device.

For the longest time I assumed that one couldn’t use CSS Transitions or animations to move DOM objects in anything but a straight path. Sure, a developer could use multiple keyframes to create a list of straight paths to simulate a curve, but I didn’t think one could just define a curve with just two keyframes. I was wrong. If you are coding for a modern web browser, then this is very doable!. This article will show you how it’s done in modern browsers, the math involved, and what to do with older versions of IE that don’t support CSS3 Animations.

I first created polyClip.js so I could combine the lossy compression algorithm of JPEGs with the ability to have a transparent area that PNGs allow. The result works well in all browsers, but can polyClip.js be fast enough to change the clipping area on-the-fly and even animate it at reasonably fast speeds with CSS3-style transformations on the clipping areas. The answer is a resounding yes and it is really fast even in older IE as well. This article will discuss in doing this with polyClip and a related library, Silk.js to do battery friendly and CPU efficient HTML5 animations.

I have been playing around with HTML5 Forms for a while now, and one of my favorite parts of the HTML5 Forms spec is the use of CSS3 pseudo-classes to show the validation state of the form fields to the user. I believe these validation hints make a better user experience and makes the process of filling out the form less frustrating. However, I think there are some shortcomings in the existing psuedo-classes that produce these validation hints. I hope that this article will start a discussion for a possible solution that could be easily added to the CSS3 UI specification.

Animations made with requestAnimationFrame appear less jumpy and stuttery than those using setTimeout or jQuery.animate by ensuring that animation frames are generated at the most optimal times according to the CPU load, what the browser is doing, what the graphics card is doing, etc. Recently, I researched a bit about how it works, how different browsers behave with it, and how well browsers are at animating both Canvas and SVG. This article will be a brain dump of all I have learned so far. Some of what I discovered may surprise you.

In his recent blog post Developers We Admire, Paul Irish called out to the web development community to blog about the developers they found important and inspirational. My contribution to that list is the late Walter Zorn who created a JavaScript library that allowed developers to create simple 2D graphics at a time before canvas and SVG were practical technologies. He has been one of my role models and has shown me that awesome and seemingly impossible things are possible with a bit of JavaScript, a little creativity and a lot of testing.

I have updated my html5Widgets package (now called html5Forms.js) so developers can create great looking, easy-to-use forms that can validate each field as a user types. It also has updated validation widgets so older browsers can display error messages like native HTML5 Form implementations do, and even allows developers to style error message bubbles in all browsers even in browsers like Firefox that don’t allow it natively.

Imagine you create software for a client. You do a good job, you are proud of your work, and you put your name and contact info in the heading of the code’s comments. I’ve done it many times with both code that I have been paid for as well as stuff I open-source and share with the community. If you are a web developer (or any type of developer for that matter) you probably have done the same thing. Who would have thought you could be sentenced to death for it? Please read this article and find out how you can help a web developer who is in this unfortunate situation.

HTML5 Progress Bars are cool, but where would you use one? If you are have a page with a lot of images that are being animated, you may not want to the content to be visible until is all loaded into memory, so why not use a progress bar to show the load progression? This article will show how to make a simple slideshow with a progress bar that updates as images are loaded. Proof that HTML5 progress bars are useful and not just a bunch of eye-candy with a fancy name.