As you might already know, Webkit has introduced support for css image masks. That didn’t come off as a real surprise, considering the stuff they’ve been up to recently.

I’ve been meaning to try and do a css-only image mask, but to no avail. It seems that the easiest way to do it does not work in Firefox: adding an :after pseudo-element to an image tag. Why? Because the :after pseudo-class generates a non-parsable html element that will be inserted as the last child of the element, in our case, the image tag. Which doesn’t really like children.

My second choice was floats, by the way.


.mask{
height:117px;
width:114px;
float:left;
margin-left:-114px;
}
.img{
float:left;
}

Here’s a nitty-gritty example. You can use the URL’s if you want to get the images. They work. But careful, mask.gif is totally transparent. Just right-click somewhere in the top left corner to save it.

If, for some reason, you’re trying to put a relatively positioned element inside a container element that has overflow:scroll, the child element will display in IE as though it had position:fixed. The way to fix this is by giving a position:relative to the container element as well. I think this is important from two standpoints: the bug has been preserved in IE7, and you can use it to hack your way to position:fixed cross-browser bliss (or so I hear).

Just thought I’d share. Via a forum reply that belongs to Jack Sleight. Thanks Jack!

Robert Nyman, the original author of the perfect little JS library, DOMAssistant, has done a little loop speed test and has come to a very useful conclusion that saves a lot of processing time. Next time you do a for loop through an array, start by saving the array.length into a variable, and use that:

for (var i=0, il=divs.length; i // Magic
}

Why is this faster? Well, if we don’t use the variable il, and do the loop like (i=0; i

Learned this the hard way: you cannot use underlines as the first character of a class name. This is very true. In fact, only IE6 has problems with it, but tell me of a time when that wasn’t enough. I thought I’d mark my utility css classes with a forward underscore (the clearfix and some default floats), but bloody IE6 does not accept that. So, I decided to go look for another character.

After Joe commented on my initial post (which was incomplete and very wrong), I did some soul-searching and started testing what characters you can use in a css class name.

Apart from the dash and the underline, you cannot use anything else, even if it’s other than the first character. The validator doesn’t say anything, but the browsers don’t apply the class. You can use numbers though, but not at the beginning. Oh, and they cannot be escaped anymore (by using the backslash \) as the css1 spec and the current official validator suggest.

So, the conclusion:

use a letter as the first character and remember that css is case sensitive

use letters, numbers, underscores and dashes for the rest of the characters, and still remember that css is case sensitive

When IE6 fades away, we will be able to use underscores as the first character too.

*thanks to Joe for pointing out my initial errors and for the impulse to do this “study”.

I have been fiddling with a script today for quite some time, trying to go around Microsoft’s buggy implementation of the DOM in their browser. Yes, Internet Explorer not only lacks proper CSS rendering capabilities, but has problems on the scripting side as well.
My problem was that I needed to listen for a key press, so that I know when [space] or [enter] is pressed by the user. Luckily for me, Firefox, Opera and Safari know about event.which. IE6 doesn’t. IE7 (still) doesn’t. Microsoft thought that using window.event.keyCode would be so much more chic. I found out about this from the w3schools.com website. As I soon found out, their code was flawed. Really, there’s just one tiny bug, triggered by the lovely IE7. We should not use e.keyCode, but window.event.keyCode.


function onkeypress(e){
if(window.event) // for IE
var keynum = window.event.keyCode;
else if(e.which) // for all the abnormal, stupid and useless other browsers
var keynum = e.which;
}

Eat that irony, Microsoft is not changing. This worked for me though, for onkeypress, onkeyup and onkeydown. Does it work for you?

A client of mine pointed me to a small bug in Internet Explorer that kept his site from working. I was hiding/showing some tables, based on what radio button the user selects. Pretty simple, but since they were tables, I thought I should set style.display to a value like “table” for when I needed to render the table (I used “none” for hiding). Surprised that this does not work on IE? I know I was.
The error both IE6 and IE7 displayed was “Could not get the display property. Invalid argument.” Which is weird, since I’m not getting, I’m only setting.

It appears that IE does not attribute values like “table”, “table-row” and the like to the style.display property. To solve this, you should set it like:

style.display = ”;

That will revert the element to its initial display state, and in consequence any style.dispay you previously set in the script will be overwritten.
Now, this is a great tip and one worth spreading. Here’s another one:

Always hide elements using JavaScript, not CSS.

Instead of defining a css rule to set the element hidden, leave it as is and hide it in the beginning of your script. In this way, when JS is disabled, your elements will still be there.

While focusing on other mundane tasks, I completely forgot to update this blog and explain the development process behind this app.
In the weeks that follow, I will describe every step taken to develop gosnip from a tiny frustration into a full-blown web application. We will talk about what gosnip is, how it started in my mind and what benefits can be gained from using it. Hopefully, no one will think this as a marketing blog (although I want to get a lot of users :P). I will aproach the subject having a general audience in mind. I hope that anybody in the communication field can benefit from this, as well as the average coder.

There will be articles describing the information architecture behind the website. I will try to raise a solid user base in order to run surveys and research new ways to manage information (taxo-folksonomy combination, you can spot it at work in the design at gosnip.net, also Focus Clouds, do a google, it’s very interesting).

Hopefully, we will delve into online advertising and how a small, user-centered webapp like gosnip can actually draw some profit from Google AdWords, Textlinkads and the like (at least, I will try). On a similar, more tech side, I will review any techniques and software that will go into the app, including the framework, the editor, microformats and OpenID, and all the stuff in between and beyond. A thing which will benefit everyone, since we have to know how these work. We are internet users, after all.

I’ll complete this post by analyzing the stir-fry: it’s tasty, easy to cook, and as healthy as it can be. It’s a chinese technique of cooking, I’m eating one right now and highly recommend it.

Happy coding!

I will stop ranting soon and develop gosnip. To be notified when we lauch (in a week or two) please subscribe to our RSS (via Feedburner).

In the meantime… I entered a contest on kupuk.com to win a copy of Helvetica, the film. The site feels really nice, being the home of a Mac enthusiast who makes great software (I think, waiting for some betas Until then, this blog is a very good read about life in tech (or vice-versa ?) in general, and typography in special.

And I did win, which is completely irrelevant to the purpose of this blog. But there is an explanation: I mistakenly used this blog’s address instead of my personal one.

For curious cats, my blog will be located shortly at: nomorestories.com

I do want to thank Paul for the contest and so I’m using this blog. So thank you!

There has been nothing going on with gosnip lately, but I’m working on my schedule to include it. To be notified when we lauch (in a week or two) please subscribe to our RSS (via Feedburner).

Thank you, and I hope we’ll meet for the launch for a very tricky competition!