Blog

Super Mario Brothers Plushies

I got these awesome plushies as a present recently, for my 30th birthday. They are handcrafted originals and simply perfectly done!

Check out the Facebook and Deviantart page of their creator:

She also has some incredibly looking My Little Pony plushies, by the way ;)

The clearfix hack

The "clearfix hack", a way of clearing floating html elements within a container without an additional clearing element simply by using a CSS class. css-tricks.com maintains a good article about the current state of the art.

Previous versions of the clearfix hack were true cross-browser implementations, some even considering IE for Mac. However with the decline of IE6, IE7 and of course IE-Mac these cross-browser considerations are not that important anymore. Thus the most recent and also most straight forward implementation is simply:

.cf:after {
	content:"";
	display:block;
	clear:both;
}


This creates an empty block element at the end of the container with a clearing attribute. Simple enough. I changed it from display:table; to display:block; since table is only necessary when using :before. But the contenteditable problem in Opera seems to be gone, thus the :before style is not necessary anymore either (see Nicolas Gallagher's micro clearfix).

A test of this clearfix method can be seen in this jsfiddle from my CSS Only Equal Height Columns article.

CSS Only Equal Height Columns

Website designers often want to create columns that are equal but still dynamic in height. i.e. the height of all the columns should be dictated by the largest one. This is not that straight forward though using only HTML and CSS and there are many different ways to do it. Some are more convenient than others, some use JavaScript for the sake of having a simpler mark-up.

I recently had a go on it myself, using a method that I haven't seen on any of the popular (albeit already old) tutorials: using "background divs" behind the actual content divs.

css-tricks.com has a comprehensive list of methods for Fluid Width Equal Height Columns. Many of these methods use simple backgrounds or column oversizing in conjunction with overflow:hidden in order to get the visual effect of having columns that are all equal in height. However, if you want to have more complex backgrounds or borders on your columns, these methods aren't suitable. We need to assign those CSS properties to block elements that are properly aligned with our content.

Read more …

Clouded Music

Spotify is a well established music streaming service, that allows you to build up a library which you can play any time on any device (assuming you use a premium account). However, Spotify's music library does not include every music track you could ever want to hear. In such cases, the Spotify Desktop application lets you include local files (which you may have bought elsewhere) into your library. But these also only exist locally.

If you use multiple devices, this is a little bit of an inconvenience. Of course it would be best, if you have your complete music library accessible everywhere. But the good news is: you can keep your music library consistent on multiple devices, if you simply synchronize these additonal files with your desktop devices manually.

Read more …

New website

After quite some time, I finally got around to do a new personal website design. It's nothing too exciting or fancy, but it serves as a testing ground for some Contao and fluid and responsive layout experiments. I deliberately went overboard with the fluid aspect, which also gives the website a very low Google page speed rank ;)

Also the way I use the column layouts for content could be confusing. If you go to the Spotify + Dropbox Blog entry for example, you may see 2 or 3 columns, within several row. The content would be read in this order:

123
45 

 

But traditionally, if you take newspapers as a reference, you would read one column from top to bottom. So one could expect to read it like this:

135
24 

 

Which would be the wrong order then. I could of course consolidate everything into only 3 columns. But then, if the content of one column is very long, you would may be have to scroll down to read it to the end and then scroll back up again to start with the next column. This would defeat the purpose of having such a fluid and responsive design a little bit, since it tries to show you as much information as possible on your screen (within your browser). Since websites are viewed mostly in a landscape aspect ratio, long vertical columns are not as convenient to read than several columns positioned horizontally.

 

The old website can still be accessed under old.spikx.net.