The sad state of matrix transformsMarch 17, 2015

TL;DR - do not use anything except translate, everything else is broken in modern browsers, nobody cares.

What’s the fuss?

Well we have transforms for how long supported cross browsers? Right, since IE9, released at Mar-14 2011. Much longer on “modern browsers”. Below i show you that unfortunately in the Spring of 2015 only IE gets them right and all other “modern browsers” still fail miserably on scaling and rotating. Surprising? Oh yes.

continue...

Prototype of a Two-Dimensional PresentationJune 16, 2014

About 5 years ago i needed to implement a web-based portfolio presentation for a company i worked then.

The problem with portfolio presentations at prospective clients office is that you do not know them, what hey like and what they don’t. If you cram too little, it may not be enough, too much, they will get tired before you get to the end. So i got an idea to do something flexible, cramming all in, but allowing easy change of presentation as it rolls.

continue...

Fix Webkit Rubber Band ScrollJune 8, 2014

The rubber effect on scrolling overflow is inconsistent. iOS webkit has nice rubber effect when you scroll the content over the maximum of minimum. But it only works as expected when you start scrolling at not the maximum or minimum. Initially, when scrollTop of scrollable is 0, and you try to scroll down, the whole page rubbers instead (image at left). What the heck?

continue...

Keys In Javascript Objects Can Only Be StringsMarch 24, 2014

Happened to me lately.

The backstory is that the actual property names i was using were passed to me by browser (touch event identifiers) as numbers in touchstart event. Here’s the simplified to barebones code:

var i = 1
var O = {}
O[i] = 'foo'
var K = Object.keys(O)
K.indexOf(i) // -1

And the result is naturally… -1,
as property name can only be string and Object.keys() returns array of strings. The same property as number was passed by touchend event and my search by that failed miserably.
Took me some time to find the cause.

continue...

Yes We Can Do Fraction Of A PixelSeptember 22, 2013

I was reading HN the other day and stumbled to Cloning the UI of iOS 7 with HTML, CSS and JavaScript. In that the author had problem of creating 1px solid border for retina screens.

Besides, another problem to be dealt with are Retina screens. On Retina iPhones, the browser automatically “translates” the 320x480px viewport into the 640x960px screen resolution. While this solution works well for most elements, it fails to reproduce the famous 1px-thick borders iOS uses extensively as they are translated to 2px-thick borders. Intuitively, we would be tempted to set a 0.5px border but this is impossible as it must be a positive integer. Yet, as always, there’s a solution, found by Stephan Bönnemann (see also this link by Brad Birdsall). Basically, it consists of replacing this code: border-bottom:1px solid rgb(200, 199, 204); by this one: box-shadow: 0 1px 1px -1px rgba(200, 199, 204, .5);.

Hmm. You can’t simply specify a border of 0.5px? Is that the consensus around front-end developers? Or can you?

Well, of course you can. That’s what i have been doing last 6 months - ditching the pixel based rendering.

continue...

Layered HTML LayoutJune 11, 2011

Another day, another Photoshop layout with drop shadows, gradients, rounded corners, whatnot, your designers gives you to slice. You do and something changes, like – column gets wider – and you slice it again, and again. And then background color changes. In the end of the day you ask yourself, isn’t there a better way? A way where you can keep all the pieces separate and change them independently, easy and fast. Well, there is.

Following I introduce you to layers in HTML and I do it backwards, I’ll show how I construct my sites and then I’ll explain how it is done in HTML & CSS.

continue...

Convert SVG into RaphaëlFebruary 22, 2010

and have really nice VML rendering in IE as a bonus.

Why?

One day I thought that if I need to use SVG’s for my web layouts (and I do) the better way is to draw them with the tool I’m used to - Adobe Illustrator - and just convert them into Javascript. Easier said than done, it seem that there’s no public project for this. What the heck, I have done something like this before and as SVG is pure XML all I need to do is write some small PHP script. So here we go. I have a logo I use in one of my client sites, let’s use it as a test.

continue...