Allow me to introduce myself.

Photo: Don Kittle

I am Zoltan "Du Lac" Hawryluk (and yes, Zoltan is my real name).

I am a web developer born and raised in Toronto, Canada. I research new web technologies, especially the ones with the sexy overused acronyms, like HTML5 and CSS3. I am also the creator of several JavaScript libraries (cssSandpaper, html5Widgets, visibleIf), a few online tools (IE Transform Translator, CSS3 Matrix Construction Set) and other random things (CSS3 Font Converter).

When I discover stuff, I post my findings here — partly because I want to share with the community, and partly because I forget things if I don't write them down. More about me.

Recent Posts

Accessible Form Placeholder Text

February 20th, 2017 by zoltan · 3 Comments

Placeholder text is used quite a bit in modern HTML5 forms. It is not meant to replace form labels, but is intended to be a hint about the format of what the form field data should take. While checking the accessibility issues on a recent project, I noticed that placeholder text is sometimes indistinguishable with form field values when using certain screen reader/browser combinations. This post talks about how to work around this issue with just a little bit of JavaScript.

Read the whole article »

Flex Layout Fail: Fixing Firefox’s Keyboard Accessibility Bug With The CSS order Property

January 28th, 2017 by zoltan · 2 Comments

Firefox, unlike every other browser on the planet, changes the way that keyboard navigation works in designs that use the CSS order property. Since a lot of developers use flexbox, this can create a lot of cross-browser accessibility issues. This article shows a fix for this problem using a small amount of Javascript.

Read the whole article »

Implementing an Accessible Skip Navigation Link Requires More Thought Than You’d Think

December 15th, 2016 by zoltan · No Comments

One of the most common and straightforward accessible features of a web site is the “skip navigation” link. These links are intended to make it easier for users with screen readers to skip all the links in a webpage’s header navigation in order to read the content on the rest of the page. However, many developers don’t know all the tricks that are needed to use in order to implement one correctly. This article will go into this in depth.

Read the whole article »

Making Framework Agnostic Isomorphic Web Applications with Query Strings and HTML5 pushState

December 11th, 2016 by zoltan · No Comments

Do you want the state of a web page to be rendered by both the client and the server side? Is having the state of a JavaScript rendered web page to be controlled by the page’s query string important to you? Is important for you to ensure that your page’s state can be shared correctly via email and social media? If you want all of this without being tied into any specific framework (e.g. React, jQuery, Angular, etc) and done using progressive-enhancement, read on.

Read the whole article »

How To Fix Transformed Text in HTML5 Canvas In Firefox For Windows

May 10th, 2016 by zoltan · No Comments

The Firefox team has made some unique choices when rendering fonts in the Windows operating system. As a result, certain fonts under 16 pixels in size render really bad in HTML5 Canvas as well as CSS. This blog post shows how you can fix this issue and have clean, transformed typography in any OS.

Read the whole article »

Creating Alpha Channel JPEGs Using SVG

November 7th, 2015 by zoltan · 2 Comments

sun-alpha-thumb PNGs with alpha channels are great, but they can take up a lot of bandwidth. Alternative image formats such as JPEG-XR, JPEG 2000 and WEBP are more efficient, but they are not supported by FIrefox (and may never be). In comes a full cross-browser solution: SVG files that encapulate a JPEG with an alpha channel. This post will cover how to create these image files a number of different ways, and show how you can animate these images as well.

Read the whole article »

Fixing Badly Formatted .properties Files and Using LibreOffice/Excel to Make Them Translator Friendly.

October 4th, 2015 by zoltan · 2 Comments

Although .properties files are used to give multi-language support in JSP pages, they are not just restricted to Java platform — libraries exist for JavaScript, Ruby, Perl, Flex and a whole slew of other languages). When used in multi-developer environments, they can get rather messy and they can be rather translator unfriendly. In this article, you’ll see how you can quickly fix these issues with z4n, a set of shell scripts I created to manage .properties files and includes tools for developers to extract translation data from Excel spreadsheets. Read on, and I’ll show you how to keep .properites files sane for all your web projects.

Read the whole article »

Augment Photos With CSS3 matrix3d() Transforms

July 16th, 2015 by zoltan · 1 Comment

teaser It’s possible to super-impose dynamic HTML content on top of a photos using 3D transforms to give the appearance that it is part of the picture. However, using a combination of translate3d(), scale3d() and rotate3d() functions to do this is difficult. This article discusses how to use the matrix3d() CSS transform with the Matrix Construction Set to get pixel-perfect 3D transforms easily and without any knowledge of matrix arithmetic. It also discusses the differences between matrix() and matrix3d(), as well as what fallbacks to use for browsers that don’t support transforms.

Read the whole article »

Using WEBP/JPEG 2000/JPEG-XR/APNG Now With Picturefill and Modernizr

January 14th, 2015 by zoltan · 11 Comments

teaser WEBP, JPEG 2000, JPEG-XR, APNG … these image formats have features that are not available in the traditional GIF/JPEG/PNG/SVG image stack, like animation, lossy compressions paired with alpha channels and better quality at higher compression levels. However, each browser seems to support only some of these formats. With the <picture> element, along with the picturefill polyfill, you can use these great formats today while using the older formats for an old-fashioned fallback. This blog post will explain how to use picturefill or modernizr to use these formats, why you would want to use these image formats, and what tools you can use to generate them.

Read the whole article »

Fixing Cross-Browser Issues With CSS3 Viewport Units in IE9+ and Safari for iOS

September 24th, 2014 by zoltan · 1 Comment

With viewport units, you can describe width, height, font-size and other CSS styles as percentages of the viewport width and height. There are, however, a few nasty gotchas when it comes to using them in iOS Safari and IE9 and 10. They also don’t always play nice in CSS3 calc() statements and don’t work at all in IE Visual Filters. Using them in iframes can also be problematic. This post talks about how to work around these issues easily using a JavaScript buggyfill (not polyfill). I have used viewport units in production sites today, and now you can too, on any phone or device used in the wild today.

Read the whole article »