VileWorks

Windows Vista has a nice option labeled Show characters right below password input fields:

Windows Vista "Show characters" checkbox under a password field

And Useit.com recommends it: It’s time to show most passwords in clear text as users type them. So without further ado, here’s what it looks like on the web: unmasking the password field

This is the HTML code from the example:

Continue reading…

Say I had some CSS or JavaScript techniques/effects I wanted to show in a blog post.

Obviously it would have been uncomfortable for me to actually include the thing in the post (CSS needs to be in the head, JavaScript may conflict with other JavaScript, etc), so the best option would have been to just link to the file demonstrating the effect.

Using inFrame the reader doesn’t have to go away from the blog post to view demo files… just add a class of inframe to each of these links.

Try it out: Click on the links to view/hide

Some random example from A List Apart: “CSS Sprites2″: regular link to the file

Slick animation menu (from nettuts): regular link to the file

Smooth Gallery, a mootools gallery: regular link to the file

The jQuery JavaScript

Of course, you have to include jQuery if you’re not using it already in the page. Continue reading…

Why shouldn’t you use flash for your website? Can there be anything wrong with a website that “enhances” the user experience by flying/zooming/swirling/flipping in like a .PPS document?

Well, besides the lack of SEO, low usability (for example: back button not working, “find on this page” not working, the “make text bigger/smaller” button not working etcetera), nonstandard user interface, fully flash based sites are pretty much ok.

This is a really old issue and of course modern technology offers solutions like Flex for powerful web applications, but unfortunately the web is still filled with flash based sites… which use flash just for the design’s sake.

I’m not stating here that flash is bad or anything. It actually is GREAT! It’s the best choice right now for online streaming video or audio, the only choice for some web applications or games, a good way to make your banner ads stand out (even though this can be really annoying for the visitors but that’s a different topic).

Seeing how this is such an old topic, I need not to go in any more details as some people excellently did that already:

Making god use of flash: When you should and shouldn’t use it. Is Flash going to help me in communicating with my audience?

Flash: 99% Bad.

Really, people… these things are so last decade even my article looks old fashioned. There’s all the talk about web 2.0 and taking this paradigm to the next level… Do you think the definitions “the web as a platform” or “the web as a database” can include your site that not even Google can index due to the fact that the only navigation you have between pages is a flash menu?

Update: Fixed! Scroll to the end of the article to see how to fix this.

Large centered bg image + Firefox + 800×600 resolution = trouble.

Ok, let’s say my website has the following CSS code for the body:

background: #000000 url(img/bg.jpg) top center no-repeat;

That’s a black background with a centered image on the upper side. The “center” part should mean that the middle of the image will be in the middle of the browser’s view port. That’s pretty straight forward and looks as it should in any browser with CSS support.

Except in Firefox and Opera on a low enough resolution, or if the browser’s window size is small enough the background image starts going left at a certain point! Works fine in IE.
If you’re on Firefox or Opera, go ahead… resize this window making it narrower and narrower. You’ll see the VileWorks logo going left. Now scroll right to see how the design broke apart Update: not anymore.

Usually, when something works on Internet Explorer and doesn’t work in Firefox it’s somehow my fault and the fact that it works ok in IE is an IE bug. But I can’t see how the above code couldn’t be correct. And it doesn’t just happen to me, I’ve seen this on a lot of sites with large, centered, no-repeat background images. All of these designs break somehow on a (for example) 800×600 resolution.

body {
    background:#000000 url(img/bg.jpg) center top no-repeat;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size:14px; line-height:20px;
 
    /* These two: */
    display:table;
    width:100%;
}