Nyligen startades en inofficiell programmeringstävling på Sweclockers som går ut på att skriva ett program som genererar ASCII-baserade “bilder” utifrån faktiska bilder. Detta lät givetvis som en trevlig utmaning, och jag hade en idé.

Min idé gick ut på att använda den wavelet-transform som används i JPEG2000-formatet för att frilägga kanterna från bilden. En wavelet-transform ger bland annat skillnaden från pixel till pixel, och kan därmed ge en storlek på förändringen som man sedan kan använda för att förstärka kanterna i den slutgiltiga bilden. {continue reading}

Recently an interesting discussion occurred at Sweclockers regarding the semantics of HTML classes. I argued that classes in HTML should hold significant semantic meaning, and was surprised to find that many disagreed. It started when the following piece of code was posted as a suggested solution to the original thread problem:

<div class="content white">
    <p>White text</p>
</div>

Forms are an integral part of the web; but how do you design an effective, user-friendly form using valid HTML5 and CSS? Well, the answer is not as easy as it might seem; there are a lot of considerations to make. First, you have to decide what information you want to gather from the user. If you’re designing a registration form, you want to gather as little information as possible to make the registration simple and quick. Extra information can always be gathered on a profile/settings page when the user has registered. With new technology such as OpenID, registration forms can be reduced to one text input field and one button; it won’t get much simpler than that.

Setting/profile forms tend to get a bit larger. This is perfectly fine, as long as you have a sensible layout and, if your form is really large, split it up in several parts that can optionally be submitted separately. Again, using modern technology such as AJAX, the user experience can be greatly enhanced in these cases. {continue reading}

I recently came across a topic on a certain Swedish forum I frequent where the poster wondered whether you could create simple tooltips with definitions for certain words. The post immediately got my attention and I started working on a small implementation of this using jQuery and the excellent <dl> element in HTML.

The result was very good indeed. It uses jQuery and the jQuery tools (conveniently fetched from Google and flowplayers CDN, respectively) to wrap all occurrences of certain words in a <span> element with a predefined class. These elements are then hooked to their respective <dd> element, which displays as a tooltip when you hover the word. Add some nifty CSS to style the tooltip and <span>s and suddenly you’ve got excellent definition tooltips. {continue reading}

Someone got the brilliant idea to set up a CSS naked day, on which all CSS will be stripped from participating web pages. I decided to join in, and luckily I’m very strict when it comes to semantics, so my blog is still usable even without CSS.

The CSS naked day is supposed to promote better CSS usage, a separation of style and content, and show the importance of semantics. I like the idea.

Captions can be displayed in a semantic way using the :after pseudo-class and the content declaration to display the image’s alt text as a caption. The basic CSS is pretty simple, but you can of course style this caption any way you want. A simple example:

img:after{
content: attr(alt);
/* Below is just caption styling */
display: block;
text-align: center;
padding-top: 1em;
}

This is known to fail in some browsers, such as Safari 3.2.1 and Internet Explorer, but works in others. Opera 10 has been confirmed to work by me, while Firefox 2.0.0.17 fails. If you’ve tried it in another browser, let me know. Also, there’s a demo over here.