Bram.us

Photo Booth in your browser

February 22, 2012 by Bramus! 2 Comments

Use Canary Chrome (and enable MediaStream in about:flags) to actually use your webcam instead of the provided recording. Works surprisingly fast.

HTML5 Webcam Toy — Photo effects using WebGL and getUserMedia →

(via badassjs)

Elsewhere effect, getusermedia, html5, link, photobooth, webcam, webgl 2 Comments

CSS calc() in Webkit

February 22, 2012 by Bramus! Leave a comment

As mentioned before, CSS calc() was about to come to Chromium/Chrome (Webkit). Since about a week ago, the first part of the implementation has landed into the Canary builds:

Adds calc expressions to CSSPrimitiveValue. This enables simple (ie no mixing of percents with numbers/lengths) expressions to be evaluated on most properties.

No mixing yet, but quite sure that’ll land with the next commit

Simple -webkit-calc() test-cases →
Webkit trac: Changeset 107688 →

Elsewhere calc, chrome, CSS, css3, link Leave a comment

Loop Waveform Visualizer

February 22, 2012 by Bramus! Leave a comment

The Loop Waveform Visualizer uses a combination of level and waveform data to produce a circular audio visualization of any MP3. Use the mouse to tilt and the mousewheel to zoom.

Now this thing is really amazing. Couldn’t even imagine this being so responsive. Very, very neat. Latest Chrome required.

Loop Waveform Visualizer →
The tech behind Loop Waveform Visualizer →

Elsewhere link, music, three.js, visualization, webgl Leave a comment

W3C Responsive Images Community Group

February 21, 2012 by Bramus! Leave a comment

A working group, pondering a proper solution to one the responsive web design challenges: responsive images:

Our goal is a markup-based means of delivering alternate image sources based on device capabilities, to prevent wasted bandwidth and optimize display for both screen and print.

W3C Responsive Images Community Group →

Elsewhere link, mobile first, responsive images, responsive web design Leave a comment

turn.js

February 21, 2012 by Bramus! Leave a comment

Turn.js is a plugin for jQuery that adds a beautiful transition similar to real pages in a book or magazine with HTML5. It works in all modern browsers including touch devices. And it is easy to manipulate, and lightweight with only 15k.

turn.js — The page flip effect for HTML5 →