Having worked with many fastidious web designers in the past requesting that every single integrated page looks precisely to the pixel like the PSD file — you know who you are — I developped this little JavaScript technique that allows the integrator to enable/disable a 80% alpha JPEG image overlay, in order to visually find the discrepancies. The code is very ugly but cross-browser compatible, and I never felt compelled to make it better as it does perfectly what it has to do.
It’s quite easy to use: simply load the JavaScript file at the end of your HTML file, and have it point on your JPEG image to an default X/Y position.
<script language="javascript" type="text/javascript" src="watermarker.js"></script>
<script language="javascript" type="text/javascript">
setWatermark("images/mywatermark.jpg",-4,-5);
</script>
And voila, you can toggle your JPEG overlay, move it around, change it’s alpha transparency and reset it to its default position.
A small demo is available here.
watermarker.js (7.8k)
A friend of mine was twittering about accessibility, which gave me the idea to write on how to do no-javascript friendly stylish controls such as check boxes, buttons, and radio buttons.
Because graphic designers care more about the look and site designers care more about accessibility and usability, it’s often the developers’ role to satisfy them both. So here are the tricks I use to make stylish controls look cool when JavaScript is activated, and usable when it is not.
Being mainly a PHP backend programmer, I hate to see the design cripple the code. Therefore, I always make sure that stylish and standard controls end up sending the same data to the server.
In this post, I cover buttons, check boxes and radio buttons, and provide a simple PHP helper that automatically generates the code. You might also want to check out the demo page to have an idea of what it looks like.
More …
Most web applications in this World 2.0 target international users distributed among many different timezones. It is pretty simple to ask the users what their timezone is when they registered to your site. This article aims to solve the case of unregistered users who you can’t ask in a usable way. The solution isn’t perfect, but it’s better than nothing.
In theory and technologically, we could determine what timezone the user is in by:
- Using a geo location database to guess their longitude and latitude, and then find the probable timezone from it ;
- Using JavaScript to read the user’s workstation clock and calculate the probable timezone from it. You can see a live demo here.
Geo location, while pretty simple nowadays with free databases floating around, leaves us with a problem: the free databases are often not good enough to pin point a precise longitude and latitude, which will cause garbage in and garbage out when trying to translate it to a timezone. Moreover, the non-free and precise databases are pretty expensive compared to the added value of timezone detection, and are most likely not worth buying just for this purpose.
More …
In case you didn’t stumble on this pretty neat list of CSS techniques, tips and tricks from Smashing Magazine, well here it is.
Here are a few good ones:
Enjoy!
