Who is User Agent Man?

Photo of Zoltan Hawryluk
Photo: Don Kittle

I am Zoltan "Du Lac" Hawryluk (and yes, Zoltan is my real name) and User Agent Man is my blog of all things web development.

I am a web developer born and raised in Toronto, Canada. I do research on all types of web technologies. I am also the author and contributer to all sorts of open source projects including both as a primary author (e.g. Progressive Pushstate and The CSS3 Font Converter) and well as a contributer (e.g. Picturefill, Viewport Units Buggyfill and a Slack plugin for Pidgin and Adium).

When I have time, I like to write about what I learn here so I can give back to the web development community. More about me.

Recent Posts

How To Create SVG Paths Easily Using The GIMP

April 26th, 2013 by zoltan · 6 Comments

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.

Read the whole article »

Clicking Through Clipped Images Using CSS Pointer Events, SVG Paths and VML

April 26th, 2013 by zoltan · 3 Comments

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.

Read the whole article »

Animating Circular Paths Using CSS3 Animations.

March 3rd, 2013 by zoltan · 15 Comments

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.

Read the whole article »

Cross-Browser Animated Image Masking (Even in IE) Using polyClip.js

January 14th, 2013 by zoltan · No Comments

dad 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.

Read the whole article »

CSS3 Pseudo-Classes and HTML5 Forms: Their Limitations and a Possible Solution

November 5th, 2012 by zoltan · 2 Comments

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.

Read the whole article »

Cross Browser GPU Acceleration and requestAnimationFrame in Depth

September 23rd, 2012 by zoltan · 4 Comments

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.

Read the whole article »

A Developer I Admire — Walter Zorn

August 26th, 2012 by zoltan · 12 Comments

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.

Read the whole article »

Cross Browser Styling of HTML5 Forms — Even In Older Browsers.

May 17th, 2012 by zoltan · 11 Comments

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.

Read the whole article »

Help Free Saeed Malekpour: Sentenced To Death For Writing Code.

January 23rd, 2012 by zoltan · 2 Comments

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.

Read the whole article »

Caching Images With JavaScript and HTML5 progress Bars

January 16th, 2012 by zoltan · 5 Comments

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.

Read the whole article »