De absurditeit van de implementatie van Nederlandse Cookiewetgeving

Wat zijn cookies?
Cookies zijn kleine bestanden die uw voorkeuren tijdens het surfen onthouden en opslaan op uw eigen computer.

Dit soort teksten verschijnen overal. Verplicht. Op iedere Nederlandse website.
Je moet dan OK klikken en dan is alles weer normaal.
Je hebt cookies geaccepteerd.

Maar wat als je cookies NIET accepteert?
Dan wordt er een cookie gezet, die deze voorkeur onthoud.
Dit is de standaard implementatie van deze vervelende, onnodige, maar vooral ondoordachte wet.
Natuurlijk wordt er een cookie gezet. Want je wilt toch niet, dat gebruikers deze melding iedere keer krijgen, alleen maar omdat ze geen cookie willen?

Al deze verwarring rondom cookies leidt tot cookiemuren, niet technisch noodzakelijke cookies en geen toestemming mogen vragen voor de opslag van cookies.

Er is net weer een wetsvoorstel aangenomen ter vergroting van het gebruiksgemak, die deze implementatie legaal wil maken. (Want het is op dit moment illegaal, toch?)

http://www.eerstekamer.nl/wetsvoorstel/33902_wijziging_artikel_11_7a

Je hoeft niet alleen cookies te kunnen implementeren, je moet 80 pagina's wetsvoorstellen en amendementen doorlezen in krom gesteld Nederlands. En dan, misschien weet je dan wat je wel of niet mag doen of wel of niet mag/moet laten.

Ik weet het in ieder geval NIET meer.
Mijn beste manier om cookies op te slaan:

Closing soft keyboards on 'enter' on mobile

Have you ever run across this problem:
You use contenteditable because every browser claims it's supported and you can style it much better than a text-input.
And then the soft keyboard on mobile just won't shut when you are getting just a single line from the user??

Well here is the answer:
http://jsfiddle.net/uc7merbd/1/

Uploading images in HTML5 by dropzone.

Uploading images in HTML5 by dropzone.

HTML:

<div id="drop_zone">Drop files here</div>

<output id="list"></output>

STYLE:

 .thumb {

    height: 75px;

    border: 1px solid #000;

    margin: 10px 5px 0 0;

  }

#drop_zone {

border: 2px dashed #bbb;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

border-radius: 5px;

padding: 25px;

text-align: center;

font: 20pt bold 'Vollkorn';

color: #bbb;

}

JAVASCRIPT:

function handleFileSelect(evt) {

    evt.stopPropagation();

    evt.preventDefault();



    var files = evt.dataTransfer.files; // FileList object.



    // files is a FileList of File objects. List some properties.

    var output = [];

    for (var i = 0, f; f = files[i]; i++) 

    {

      // Only process image files.

      if (!f.type.match('image.*')) {

        continue;

      }

      var reader = new FileReader();

      // Closure to capture the file information.

      reader.onload = (function(theFile) 

      {

            return function(e) 

            {

              // Render thumbnail.

              var span = document.createElement('span');

              span.innerHTML = ['<img class="thumb" src="',

                                e.target.result,'" title="',

                                escape(theFile.name),'"/>'].join('');

              document.getElementById('list').insertBefore(span, null);

            };

      })(f);

      // Read in the image file as a data URL.

      reader.readAsDataURL(f);

       

      output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',

                  f.size, ' bytes, last modified: ',

                  f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',

                  '</li>');

    }

    document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';

  }



  function handleDragOver(evt) {

    evt.stopPropagation();

    evt.preventDefault();

    evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.

  }



  // Setup the dnd listeners.

  var dropZone = document.getElementById('drop_zone');

  dropZone.addEventListener('dragover', handleDragOver, false);

  dropZone.addEventListener('drop', handleFileSelect, false);

TEST IT: http://jsfiddle.net/sdorLj3e/

Loopable Soft Noise

Generating Soft Noise on a Canvas

I'm making a space paralax game and I need a function for soft, loopable noise, to make space a little more interesting.
I've been looking at perlin-noise, but speed is an issue..

So I've been fiddling to generate this:
http://jsfiddle.net/LwDC9/1/

As you can see the texture is generated to be completely loopable at ANY format. (Perlin noise usually needs something like 2,4,8,16,32... etc)
If you want a 2048x2048 loopable texture, you'll have to wait a bit, but it'll get there. You can reduce the complexity of the rendering to optimize.

Also the texture is transparent. This is because I want to use it in a parallax.

So let's use that technique to create a huge (640x480) spaceview animation that you might know from games. (using a parallax)

http://jsfiddle.net/LwDC9/3/
Please try the fiddle, the image doesn't do justice to the animation.
I've put some text underneath the canvas, to show it's pretty transparant.
I'd like to see what the performance is on an iPad or something, but right now, I'm pretty happy with the performance in Chrome.

Now when a star dissappears it immeadeately reappears on the other side, the same goes for the colors. That kind of kills the illusion.
So I made the generated bitmaps bigger than the shown ones. I generate 4 bitmaps of 1024 by 512 and show them in a frame of 800x200.

http://jsfiddle.net/LwDC9/5/

Delft stationshal plafond - virtual reality model

Ceiling is ready

The ceiling of Delft is ready, a great moment.

Now we can see the effect we've only seen in Virtual Reality during the design fase for real.

And the match is perfect.

Resizing, cover, center, fit

When you work with pictures and layouts this problem seems to crop up every time:
How do you handle content that doesn't fit?
With the mobile devices ranging from 16:9 to 4:3 and with strange formats like 3:2, 16:10, 5:3, 8:5 etc
this is becoming a more and more pressing matter.

It's like when your TV tries to fit a 4:3 image in a 16:9 container. Almost all solutions given by my remote control suck completely, why is that? In my book there are only two options:

1. You want to see everything (fit) 

1. You don't want the famous black bars. (cover). For instance if you have a decorative movie about a fire, or clouds, anything that is more atmosphere than content.

http://jsfiddle.net/rRE5L/
Cover exactly (centered) code:
http://jsfiddle.net/rRE5L/1/

So I've been fiddling a bit.. You can set the original size and the box size to see what happens in the different scenarios.

Fit exactly code:

But I'd like to have something a little more precies. I'd like to be able to set a box inside the image, that tells us which part of the image is important. That way we can make it fit the container in the best possible combination of the above solutions AND the script can figure out what that needs to be itself from just that data for EVERY container.

I'd like my script to be intelligent enought to arrive at the conclusions above without further assistance.
So it would try to cover as much as possible, using as much of the picture we can show. Unless that means the important bit gets cropped. In that case it will FIT the important bit (and if that means you end up with bars, so be it. It will center the result, to have the bars nice and even.

Now this is not really a solution for TV's any more, because on a tv screen the important bit moves around. But if your problem is you want to watch a movie with subtitles and still see as much of the movie as possible, it would be a solution. So TV-manufacturers pay attention, I want this on my next one!!!

I'll get back with a fiddle on that soon enough..

Advanced gestures

The idea of gestures comes from touch screens, but it's actually quite usefull for mouse too.
I've been toying with these gestures here:
http://www.snoep.at/labs/html5/demo_gestures/

Should work with both touch and mouse.
Working on the multitouch, can't predict what will happen there yet.

DEMO:

http://www.snoep.at/labs/html5/demo_gestures/