15 Feb

Customizable page layouts

I recently redesigned my site running on WordPress, which gave me some ideas about a bit more convenient layouts. I hope they are of some value to anyone who is designing their own layouts.

I wanted to tackle a common problem: on a modern (1280+ pixels wide) screen resolution it is often hard to read because the text rows are simply too long.

The easiest way to limit text width layout-wise would of course be to create a fixed-width layout. However, some viewers probably would like to have as wide text as the screen allows. Using some Javascript and DHTML magic, it is easy to make the fixed-width layout resizable. The site can even keep the same width across different pages if it is stored in a cookie.

In Javascript, you can easily change an element’s properties, here is how you would change the width of an element with the ID ‘resizable‘:


Values can be saved in a cookie as follows (using / as the path sets the cookie for all pages under the domain, important if you want to keep the same width across different pages, cookie expires after days days):

var expire = new Date();
expire.setTime(expire.getTime() + 1000*60*60*24*days);
document.cookie = cookieName+"="+escape(cookieValue)+

It is suboptimal to resize the layout after it loads, this will result in an annoying redraw of the page after a few moments. Using some server-side scripting, you can inject the width from the cookie so the page renders at the desired width from the beginning. On my page it is done like this:

<div style="width: <?php echo $_COOKIES[page_width]; ?>">

Probably the most technical thing when implementing the resizing is handling mouse drag in Javascript. On my page, I check if a mouse click happens on an element that has a class name of “drag” and if it is, the drag begins. If the mouse button is released, the drag ends and the resized width is calculated.

var dragging=false;
var start_x=0;

function mousedown(e) {
  if (e.target.className=="drag") {

function mouseup(e) {
  if (dragging) {
    // drag ends, we moved move_x pixels

After we know how much the X position changed, we can adjust the element width. The following code extracts the number part from the width, adds the X movement to it and again adds the ‘px’ unit in the end:


The element width should change by the same amount the user dragged the mouse. At this point you might want to set the cookie as described above.

That’s about it! I am quite sure someone who has no experience of doing things in Javascript and CSS doesn’t get much from the above. I intented this post to be a heads-up of sorts, this is quite easy to implement and in my opinion can be quite convenient. You can try it by dragging the right edge of this post.

If you really want to have that on your site but can’t figure out it by yourself, leave a comment and I’ll help as much as I can. Also, you can look at the source code of this page to see how I did it.


10 Jun

Five efficient ways to cripple your awesome Firefox extension

  1. Make sure the extension crashes the browser even if just once a week. What will your fellow developers say of you if you even can’t crash the environment with pure JavaScript? It’s sometimes enough if the extension simply doesn’t work.

  2. Stuff everything — and I mean everything — inside the right click context menu. Or, in fact you can add your menu items anywhere as long as it’s not that convenient for the user. Forget about nice buttons the user could move around in the toolbar.

  3. Keep the usual GUI design rules in mind. For example, if your feature is called, say, “dTaOneClick“, make sure the user can’t really just click once but maybe twice. No keyboard shortcuts allowed.

  4. Forget about other extensions. And stuff even more things inside the context menu with useless descriptions. Do not group your menu stuff inside a submenu.

  5. Never continue supporting your extension. After all, every Firefox user wants to install Nightly Tester Tools to be able to use your extension after a critical update from to

29 May

Webdesign stuff that annoys me

Here are some annoyances I still encounter in the Web even though I’m sure they have been featured in rants since the WWW was introduced to the masses (an event somewhat similar to when Titanic was introduced to frozen water).

  1. Checkboxes that aren’t linked to the actual text so you can’t click on the text to check the box. I can only imagine how much this annoys people who actually have a physical handicap. Or, are drunk. Which I can imagine very well.

  2. Pages that don’t have a descriptive title. Come on, people. It’s about time to adopt this groundbreaking new technology. Also, try to make the title descriptive even if there are only the first 30 or so letters visible because you can’t fit everything on a tab title bar that you can fit on the window title bar. For example, have the subpage title first and then your homepage title.

  3. Text links that look the same whether if you have visited them or not. There is a reason why they should look different: computers are tools made for us stupid, stupid people so they can act a bit less stupid. In my case my computer tends to remember things better than me so it’s nice when once in a while it reminds me I have clicked a link already during the past few weeks.

  4. Text links that look just like normal text. No, I don’t have the time to check every piece of underlined text for links. Better leave the links either underlined or blue, that way most people automatically associate them to text links (because, like, in the old-school interwebs the text links were blue and underlined — always).

  5. Pages that change the mouse pointer without any good reason. Yes, there are different pointers available but they exist only to offer information to the user. And you can’t even click properly that pixel size 5 text (very often seen with other shitty design traits) with a hourglass pointer.

  6. Links used to trigger JavaScript that have the onClick attribute set but also have the href attribute set to “#”. You should put the href point to “javascript:yourFunction()”. I don’t care if that’s some voodoo to make it work on IE, it still annoys the hell out of me when clicking something that should open a popup or something also makes the browser scroll the page to the top.

  7. Usage of new “Web 2.0” techniques to push usability back to Web 0.5. Yes, it’s really nice if you can fade the page black and show an image over it. Even though that also makes the image not display progressively as it loads and generally overrides how the browser would show it. OK, it’s not really nice, it’s stupid.

  8. Finally, the most annoying thing is that the people who are guilty of the above most likely make more money than me.