Tibor SzászInteraction matters

Customizing the SoundCloud waveform image

For the last months, I'm using SoundCloud's API to create an application. I had several issues, that I managed to solve, and this one I'm going to show you is one of my favorite. The waveform that soundcloud generates for a song, looks like the one I attached to the post.
It's not bad, as long as you can integrate the gray mask with your application design. If you can't then you can start to scratch your head. I did. :)

Category: Programming - Tags: soundcloud javascript canvas - 2

Video maximizer script

I've added a new feature to my blog and I would like to share it with you. It's damn easy and very useful, if you care about design.
The reason I created this script is that the videos I embed has various sizes and enlarging them is a boring task, so let a small code do it:

function fixVideos()
{
	// Maybe you should be more specific, than me
	var videos = document.getElementsByTagName('embed');
	var cwidth = 550; // The width you want to resize to
	var ratio = 0;
	for( i=0; i < videos.length; i++ )
	{
		ratio = videos[i].height / videos[i].width;
		videos[i].width = cwidth;
		videos[i].height = ratio * cwidth;
	}
}

Category: Programming - Tags: javascript resizing - 1

What tables could be also good for?

Finally, we live at an age where even a beginner web developer finds it embarrassing to use table layout for sitebuilding. Tables are very good what they created for: displaying arrays of data. You can style, script, enhance them in many ways.
I often have to hack into CMS systems functionality to make them customized for the clients and requests can be sometimes tricky to do, but I think there is always a simple solution. These clients usually use WYSIWYG editors to manage their pages, but I can't expect that they know XHTML or JSON to manage fancy widgets.

This was the case last time, when I needed to add a tabbed JS widget to a Drupal website. I came up with the idea, that tables can be used for describing data, nothing more and after processing the cells data, the whole table can simply be replaced with the markup for the widget.
This is a dirty hack I know, but at least the users can cope with it. It worked pretty well, the first column is the tab's name and the second column is its contents. There is a valid table attribute "summary" that is suitable for triggering the conversion, the user only have to enter "tabs" to it and the script does the rest.
It is not a problem if the javascript is turned off, because the data is still accessible and it can still be formatted with CSS to make it look pretty.