We're growing into something new. Read More

Matteo Lissandrini


What No One Told You About Z-Index

Are you ready to have your mind blown? Prepare yourself on laying in shock and disbelief while you read how actually the simple specification of `z-index` is not so simple. > Z-index seems so simple: elements with a higher z-index are stacked in front of elements with a lower z-index, right? Well, actually, no.



This is pretty slick: Draw a box, select content type, repeat. You can easily sketch some layout to start organize your content both on a desktop-browser template and a mobile-browser template.

[rebound] New work draft: any feedback?

This is a rebound of: forrst.com/posts/… I had some good feedbacks by @brettsantore, but the graphics were not accepted. They asked for bigger pictures and a more linear layout. This is a rough draft for the new course, again, any feedback is welcomed.

New work draft: any feedback?

Hi! I'm sharing a new draft here, and I'm wondering what do you think about the use of the sans-serif font (e.g. is it readable enough, is in a good balance with the others?) and about the distribution of whitespace. Any feedback is welcomed.


Templating With DOM

Here the (awesome) @kroc_camen is sharing a new way of thinking the "templating" task. He talks of “100% separation” and provides a code implementation of this system ( in php). One of the good things of it is that, with this system, the template has no need to know the programming language you are using. Honestly also h2o-template.org/ doesn't depend on the programming language, you can parse the template files with another engine. What really makes a difference in DOM templating is that here you really do not have any "logic" embedded in the template. This really doesn’t mix logic and HTML Raw Code » I believe in the aim of it, but we need to think also about feasibility. Do you see drawbacks in this approach? Performance? Maintainability? Is adding a this sort-of abstraction layer a bad thing in this case?


Creative CSS3 Animation Menus

This is a really nice experiment. The basic context is a sort-of call to action menu with really catching animations on hover. Actually the markup doesn't seem very semantic, but the final result is very impressive.


Full Window Background content Slider

Everything started with this tweet twitter.com/ I'm in search of a background content slider ala bit.ly/… #jQuery #tutorial So I thought it was feasible using the JQuery Cycle Plugin which is fully featured, highly customizable and well documented. Just a couple of tweaks to have the image slider resizing, also after window resize, and that's it! Free for all! Actually I wanted to fire the cycle sliding only when at least two of the images (or in any case a preset quantity) are actually loaded, but I have no idea and no time for this improvement now, so if you can help, you are welcomed, and will be added to the list of copyright holders of course :-) Let me know!

$c  = 'bcdfghjklmnprstvwz'; //consonants except hard to speak ones
$v  = 'aeiou';              //vowels
$a  = $c.$v;                //both

for ($i = 1; $i <= 100; $i++) {
    $pw = '';
    //use two syllables...
    for($j=0;$j < 2; $j++){
        $pw .= $c[rand(0, strlen($c)-1)];
        $pw .= $v[rand(0, strlen($v)-1)];
        $pw .= $a[rand(0, strlen($a)-1)];

    echo $pw . "<br/>";

Random pronounceable words in Php

Here is a nice php algorithm which produces random pronounceable words. Here is the source and the full back story. nelm.io/blog/2011/08/the-algorithm-that-named-us-nelmio/ Please note that the code is not mine nelm.io/blog/2011/08/the-algorithm-that-named-us-nelmio/