Bart De Waele » Bram.us » February 2012

Basics of three.js

Posted: February 28th, 2012, 9:32pm CET by Bramus!

Tags: [edit]

Great presentation to get one kickstarted into fiddling around with three.js

Basics of three.js →

A Responsive Design Approach for Navigation, Part 1

Posted: February 28th, 2012, 6:46pm CET by Bramus!

Tags: [edit]

In succession to the aforementioned Responsive Navigation Patterns, a variant of “the toggle”

A Responsive Design Approach for Navigation, Part 1 →

Permalink for 'Bram.us/2012/02/28/Ringmark_%e2%80%93_Acid_test_for_Mobile_Browsers'

Ringmark – Acid test for Mobile Browsers

Posted: February 28th, 2012, 3:01pm CET by Bramus!

Tags: [edit]

Ringmark is a web-based test suite that measures how well a mobile browser supports the capabilities that modern mobile web apps require.

Roughly translated: “Acid test for Mobile Browsers”

Ringmark →

(via Jeremy)

Permalink for 'Bram.us/2012/02/28/Stuff_Instagramers_says'

Wimpy Braille Burgers

Posted: February 27th, 2012, 3:34pm CET by Bramus!

Tags: [edit]

Wimpy wanted to let visually impaired people know that they offered braille menus in all of their restaurants. To spread the word we built braille burgers that blind people could actually read. With the help of skilled chefs we took sesame seeds and meticulously placed them on burger buns so that the seeds formed braille.

Beating Borders: The Bane of Responsive Layout

Posted: February 27th, 2012, 3:17pm CET by Bramus!

Tags: [edit]

When coding a responsive site, one uses percentage based widths on your content which involves a little bit of math, but it’s actually super basic and can be handled by anyone with basic addition and multiplication skills.

Let’s say we want to add a border to our design. How do we do that? It turns out, we can’t set the border size as a percent, only a static value.

box-sizing: border-box; to the rescue! To my surprise this is supported by all browsers, except IE6 and IE7, which can be cured with a polyfill.

Beating Borders: The Bane of Responsive Layout →
A working example →

Resizer // A responsive design bookmarklet

Posted: February 27th, 2012, 2:56pm CET by Bramus!

Tags: [edit]

Resizer allows you to quickly change the dimensions of a webpage to test responsive design.

Based upon a handy testpage by Matt Kersley, and a later modified version by Briccs.net. Also available as a Chrome Extension.

Resizer →

The City of Samba

Posted: February 27th, 2012, 2:16pm CET by Bramus!

Tags: [edit]

Stunning Rio Timelapse/Tilt-Shift, shot around and during Carnaval

(via manuel)

Responsive navigation patterns

Posted: February 27th, 2012, 1:48pm CET by Bramus!

Tags: [edit]

As responsive design becomes more popular, it’s worth looking at the various ways of handling navigation for small screen sizes. Mobile web navigation must strike a balance between quick access to a site’s information and unobtrusiveness.

Responsive navigation patterns →

PixelPhones

Posted: February 23rd, 2012, 11:07pm CET by Bramus!

Tags: [edit]

Whilst strolling around on Seb Lee-Delisle‘s GitHub account, I noticed he pushed PixelPhones to it 5 days ago.

(Photo source: flickr/johansterenberg)

Seb’s PixelPhones project is one of the most amazing things I’ve seen ~~at Fronteers’11~~ ever: use your mobile device to visit a webpage where a connection is opened to the PixelPhones server (via a websocket). Once connected the server can send commands over the socket to change the background color of the page. The result is an entire room of screens simultaneously changing color.

The true jaw-dropping moment arrives when Seb asks everyone to turn his phone towards a webcam he has hooked to the computer running the PixelPhones server. By letting each phone flash a unique sequence of colors (think morse-code, but slightly different) he can define the precise location of each phone in the room. Given this he can target which part of the room should change color, and eventually send a streaming wave of color from left to right through the entire room.

All of these things can be seen in the video below:

More on PixelPhones →
PixelPhones Source on GitHub →

CreativeJS for non-coders: Create a particle system in 3 minutes

Posted: February 23rd, 2012, 10:52pm CET by Bramus!

Tags: [edit]

All examples can be found on GitHub, or one could attend one of Seb’s workshops.

(To those who attended Fronteers ’11: yeah, that’s what Seb also demoed on screen)

Permalink for 'Bram.us/2012/02/23/Pinterest%e2%80%99s_div_stacking_layout_algorithm'

Pinterest’s div stacking layout algorithm

Posted: February 23rd, 2012, 10:38pm CET by Bramus!

Tags: [edit]

The number of columns adjusts to fit more/less on browser resize and the vertical stacking is not dependent on adjacent column heights. The source code shows that each div is positioned absolute. I would love to know how to accomplish this.

What technology is used to generate pinterest.com’s absolute div stacking layout? →

Please Steal These webOS Features

Posted: February 23rd, 2012, 10:33pm CET by Bramus!

Tags: [edit]

When Apple introduced the first iPad in 2010, I bought one immediately. I didn’t know what I’d use it for, but I was sure that I would find some use for it. I never did. I played around with it, wrote some code for it, but eventually stopped using it.

So when I bought a TouchPad after HP discontinued it, I never assumed that I would use it for actual work. But I am doing just that. I’m using it to respond to email, to do research on the Internet, to take notes during meetings.

So why was it so easy for me to use the TouchPad for work, but not the iPad? I think it’s because there are a number of things the TouchPad does that make it more suitable for work.

Good list. One can add multi-user support to that … that’d make the iPad — or any other tablet — a real living-room companion.

Please Steal These webOS Features →

Permalink for 'Bram.us/2012/02/23/responsivepx_%e2%80%93_find_that_tricky_breakpoint'

responsivepx – find that tricky breakpoint

Posted: February 23rd, 2012, 11:16am CET by Bramus!

Tags: [edit]

Enter the url to your site and use the controls to adjust the width and height of your viewport to find exact breakpoint widths in pixels. Then use that information in your media queries to create a responsive design.

responsivepx →

Permalink for 'Bram.us/2012/02/23/What_We_Don%e2%80%99t_Know'

What We Don’t Know

Posted: February 23rd, 2012, 11:05am CET by Bramus!

Tags: [edit]

On any given request for our website there are loads of unknown factors. One of the more obvious unknowns is the browser. There are lots of techniques and tools we can use to ensure good experiences across any browser. But we also don’t know about the person. Who are they? Where to they live? What are they thinking? We should be admitting that we don’t know those things either. And how does that person interact with their browser? And how does that browser interact with the server behind our website? These are all unknowns. The first step is admitting it and the next is embracing it.

Rhythm

Posted: February 22nd, 2012, 9:56pm CET by Bramus!

Tags: [edit]

This sentence has five words. Here are five more words. Five-word sentences are fine. But several together become monotonous. Listen to what is happening. The writing is getting boring. The sound of it drones. It’s like a stuck record. The ear demands some variety.

Now listen. I vary the sentence length, and I create music. Music. The writing sings. It has a pleasant rhythm, a lilt, a harmony. I use short sentences. And I use sentences of medium length. And sometimes, when I am certain the reader is rested, I will engage him with a sentence of considerable length, a sentence that burns with energy and builds with all the impetus of a crescendo, the roll of the drums, the crash of the cymbals–sounds that say listen to this, it is important.

— Gary Provost

Photo Booth in your browser

Posted: February 22nd, 2012, 1:21pm CET by Bramus!

Tags: [edit]

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)

CSS calc() in Webkit

Posted: February 22nd, 2012, 10:12am CET by Bramus!

Tags: [edit]

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 →

Loop Waveform Visualizer

Posted: February 21st, 2012, 11:28pm CET by Bramus!

Tags: [edit]

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. Canary Chrome required.

Loop Waveform Visualizer →
The tech behind Loop Waveform Visualizer →

W3C Responsive Images Community Group

Posted: February 21st, 2012, 8:56pm CET by Bramus!

Tags: [edit]

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 →

turn.js

Posted: February 21st, 2012, 6:37pm CET by Bramus!

Tags: [edit]

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 →

People in Motion

Posted: February 21st, 2012, 12:47pm CET by Bramus!

Tags: [edit]

People in Motion →

I tried to watch Game of Thrones and this is what happened.

Posted: February 21st, 2012, 12:39pm CET by Bramus!

Tags: [edit]

Exactly.

The Oatmeal: I tried to watch Game of Thrones and this is what happened →

The Scale of the Universe 2

Posted: February 21st, 2012, 12:36pm CET by Bramus!

Tags: [edit]

Even though I did watch Wonders of the Solar System and Wonders of the Universe: mind = blown

The Scale of the Universe 2 →

(via @bram_)

Sass & Compass: The future of stylesheets now

Posted: February 21st, 2012, 11:27am CET by Bramus!

Tags: [edit]

Everything is a Remix Part 4

Posted: February 17th, 2012, 6:42pm CET by Bramus!

Tags: [edit]

Part 4 in the series

Wallabee

Posted: February 17th, 2012, 6:29pm CET by Bramus!

Tags: [edit]

Ben Dodson, author of various Gowalla related tools in the past, has released Wallabee, a location based game he’s been working on the past few months:

WallaBee is the ultimate collectibles game for your iPhone. The aim of the game is to complete sets by collecting items in a variety of ways. Each item and set is uniquely numbered so you’ll need to be quick if you want to beat your friends to the lowest numbers!

As he says so himself:

I like to call it “The ultimate collectables game”. It’s a mixup of several ideas from things such as Gowalla, Pokémon, PackRat, and Baseball Trading cards

Think of it as the items part of Gowalla, but then with some clever additions (some of them were suggested to Gowalla back in the day) such as mixing items (think Doodle God)

Wallabee →
I’ve been looking forward to this day for a long time →

How Target Figured Out A Teen Girl Was Pregnant Before Her Father Did

Posted: February 17th, 2012, 6:14pm CET by Bramus!

Tags: [edit]

Data mining at Target:

Lots of people buy lotion, but one of Pole’s colleagues noticed that women on the baby registry were buying larger quantities of unscented lotion around the beginning of their second trimester. Another analyst noted that sometime in the first 20 weeks, pregnant women loaded up on supplements like calcium, magnesium and zinc.

With that knowledge, they can detect pregnant customers, and send them targeted mails. But then one father called, complaining that his daughter received baby-mailings … turns out Target beat him to learning his daughter was pregnant.

How Target Figured Out A Teen Girl Was Pregnant Before Her Father Did →

Intercepting LinkedIn Passwords

Posted: February 17th, 2012, 6:10pm CET by Bramus!

Tags: [edit]

At the Microsoft TechDays 2012 in Belgium, white hat Paula Januszkiewicz shows how the tool Fiddler can be used to intercept the password of a LinkedIn user. The reason is because the password is not being encrypted by LinkedIn, although https is being used.

Not that wow imho, as it’s basically a man in the middle attack using a self-signed (thus forged) certificate (on which the browser will give you a notification). Quite sure lots of sites are “hackable” in this manner.

Future Hipsters

Posted: February 17th, 2012, 12:37pm CET by Bramus!

Tags: [edit]

In the year 2062, a bunch of elderly hipsters are interviewed about the good old days of social media.

Experience Freedom

Posted: February 17th, 2012, 11:45am CET by Bramus!

Tags: [edit]

DARPA Legged Squad Support System (LS3)

Posted: February 16th, 2012, 10:16am CET by Bramus!

Tags: [edit]

The LS3 platform is designed with the squad in mind and is therefore significantly quieter, faster and has a much higher carrying capacity (+100lbs) for longer mission durations than DARPA’s earlier mobility technology demonstrator BigDog

By DARPA/Boston Dynamics, who also brought us BigDog (also see this spoof), LittleDog and AlphaDog

(again, via teusje)

The MorpHex

Posted: February 16th, 2012, 10:08am CET by Bramus!

Tags: [edit]

(via teusje)

Zoomooz.js

Posted: February 16th, 2012, 9:17am CET by Bramus!

Tags: [edit]

Zoomooz is an easy-to-use jQuery plugin for making any web page element zoom.

jQuery plugin that basically does the same as the aforementioned zoom.js. One thing that’s missing though is a shortcut (most likely something like the ESC key) to zoom out again, but that can easily be implemented

Zoomooz.js →

Niggas in Paris at Midnight

Posted: February 16th, 2012, 8:41am CET by Bramus!

Tags: [edit]

Jay-Z & Kanye West’s Niggas In Paris + Woody Allen’s Midnight in Paris =

(via kottke)

Scalability

Posted: February 15th, 2012, 10:36pm CET by Bramus!

Tags: [edit]

Justin Bieber Is a Scaling Problem.

(from Inside Instagram)

Tinycon

Posted: February 15th, 2012, 9:52pm CET by Bramus!

Tags: [edit]

Tinycon allows the addition of alert bubbles and changing the favicon image.

Usage is a simple as:

Tinycon.setBubble(6);

Tinycon →
Tinycon GitHub Repo →

Touched by a Wild Mountain Gorilla

Posted: February 15th, 2012, 12:44pm CET by Bramus!

Tags: [edit]

Don’t know about you, but this just made my day.

iPad Split Keyboard Hidden Buttons

Posted: February 15th, 2012, 11:57am CET by Bramus!

Tags: [edit]

(via devicemag)

Scalado Remove, Capture a clear view

Posted: February 15th, 2012, 11:21am CET by Bramus!

Tags: [edit]

When capturing photos in a busy area, like a public square or a concert for example, it is often difficult to get a clean shot without unwanted objects entering the frame. Now you can capture the shot anyway, and simply let the camera remove the people for you!

Scalado (Facebook) →

Couple Up, to Buckle Up

Posted: February 15th, 2012, 11:19am CET by Bramus!

Tags: [edit]

Clever campaign where it takes two to get the message

Introduction to Mobile First

Posted: February 14th, 2012, 10:31am CET by Bramus!

Tags: [edit]

By Jelle Desramaults from Gorilla

Codecademy

Posted: February 13th, 2012, 10:17pm CET by Bramus!

Tags: [edit]

Codecademy is the easiest way to learn how to code. It’s interactive, fun, and you can do it with your friends.

Sports a nifty interactive shell

Codecademy →

The Vibration API

Posted: February 13th, 2012, 10:13pm CET by Bramus!

Tags: [edit]

Part of Mozilla’s WebAPI, to controlling vibration of (handheld) devices:

The idea with the Vibration API is to be able to give the user a notification, in a game or other use case, by telling the device to vibrate. It accesses the native vibrator and tells it how long it should vibrate.

First was called the Vibrator API, but that sent out the wrong message

Using the Vibration API →
W3C Vibration API Spec →

PHPBench.com

Posted: February 13th, 2012, 10:02pm CET by Bramus!

Tags: [edit]

PHPBench.com was constructed as a way to open people’s eyes to the fact that not every PHP code snippet will run at the same speed. You may be surprised at the results that this page generates, but that is ok.

PHPBench.com →

zoom.js

Posted: February 13th, 2012, 9:55pm CET by Bramus!

Tags: [edit]

zoom.js is a proof of concept JavaScript API for zooming in on DOM elements or points. Click on any element on this page to zoom in and click again, or use ESC, to zoom out.

Kinda like iOS’s double-tap-element-to-zoom

zoom.js →

Radio Silence

Posted: February 12th, 2012, 9:53pm CET by Bramus!

Tags: [edit]

You might have noticed the absence of posts here on bram.us the past week. Culprit were the new lesson materials I have developed for the course Rich Internet Applications (next year to be renamed to Web & Mobile Development)

The developed materials consist of a set of interactive in-browser slide decks, powered by (a customized) Reveal.js and are freely available on GitHub. If you happend to find a bug or have a suggestion, feel free to fork off and send a pull request.

For now, only two slide decks are included in the materials. New slide decks will be added whilst the semester progresses.

RIA Course Materials →

Path uploads your entire iPhone address book to its servers

Posted: February 8th, 2012, 12:13am CET by Bramus!

Tags: [edit]

It all started innocently enough. I was thinking of implementing a Path Mac OS X app as part of our regularly scheduled hackathon. Using the awesome mitmproxy tool, I started to observe the various API calls made to Path’s servers from the iPhone app. It all seemed harmless enough until I observed a POST request to https://api.path.com/3/contacts/add.

Path uploads your entire iPhone address book to its servers →

Siri vs. Scotland

Posted: February 4th, 2012, 12:57pm CET by Bramus!

Tags: [edit]

Many in Scotland find that their voice-activated virtual assistant can’t understand them …

The iPhone’s Siri doesn’t seem so smart in Scotland →

Upside Down, Left To Right: A Letterpress Film

Posted: February 3rd, 2012, 1:33pm CET by Bramus!

Tags: [edit]

A short film about letterpress and one of the few remaining movable-type printing workshops in the UK, situated at Plymouth University, featuring Paul Collier.

Black

Posted: February 2nd, 2012, 12:15pm CET by Bramus!

Tags: [edit]

Dutch ISP XS4ALL was ordered to block several IP addresses and domain names (presumably) linked to The Pirate Bay (full list here). In response, they blacked out their homepage.

Roughly translated from Dutch:

For the first time in history a Dutch ISP was forced to revoke access to a foreign site. The Den Haag court ordered XS4ALL to block several IP addresses and domain names.

The judge ruled that the freedom of information — a European civil right — is less important than the interests of the entertainment industry. A wrong decision. So XS4ALL will appeal.

XS4ALL has three issues with the ruling:

An IP block is way out of line (one of the blocked IPs only shows the word “yeah” when surfing to it).

“BREIN” (to keep things simple: the Dutch RIAA) can update the blacklist any time they want

A block won’t solve anything

Bart De Waele » Bram.us » February 2012

Feeds

Bram.us (51 unread)

Posted: February 28th, 2012, 9:32pm CET by Bramus!

Tags: [edit]

Posted: February 28th, 2012, 6:46pm CET by Bramus!

Tags: [edit]

Posted: February 28th, 2012, 3:01pm CET by Bramus!

Tags: [edit]

Posted: February 28th, 2012, 9:18am CET by Bramus!

Tags: [edit]

Posted: February 27th, 2012, 3:34pm CET by Bramus!

Tags: [edit]

Posted: February 27th, 2012, 3:17pm CET by Bramus!

Tags: [edit]

Posted: February 27th, 2012, 2:56pm CET by Bramus!

Tags: [edit]

Posted: February 27th, 2012, 2:16pm CET by Bramus!

Tags: [edit]

Posted: February 27th, 2012, 1:48pm CET by Bramus!

Tags: [edit]

Posted: February 23rd, 2012, 11:07pm CET by Bramus!

Tags: [edit]

Posted: February 23rd, 2012, 10:52pm CET by Bramus!

Tags: [edit]

Posted: February 23rd, 2012, 10:38pm CET by Bramus!

Tags: [edit]

Posted: February 23rd, 2012, 10:33pm CET by Bramus!

Tags: [edit]

Posted: February 23rd, 2012, 11:16am CET by Bramus!

Tags: [edit]

Posted: February 23rd, 2012, 11:05am CET by Bramus!

Tags: [edit]

Posted: February 22nd, 2012, 9:56pm CET by Bramus!

Tags: [edit]

Posted: February 22nd, 2012, 1:21pm CET by Bramus!

Tags: [edit]

Posted: February 22nd, 2012, 10:12am CET by Bramus!

Tags: [edit]

Posted: February 21st, 2012, 11:28pm CET by Bramus!

Tags: [edit]

Posted: February 21st, 2012, 8:56pm CET by Bramus!

Tags: [edit]

Posted: February 21st, 2012, 6:37pm CET by Bramus!

Tags: [edit]

Posted: February 21st, 2012, 12:47pm CET by Bramus!

Tags: [edit]

Posted: February 21st, 2012, 12:39pm CET by Bramus!

Tags: [edit]

Posted: February 21st, 2012, 12:36pm CET by Bramus!

Tags: [edit]

Posted: February 21st, 2012, 11:27am CET by Bramus!

Tags: [edit]

Posted: February 17th, 2012, 6:42pm CET by Bramus!

Tags: [edit]

Posted: February 17th, 2012, 6:29pm CET by Bramus!

Tags: [edit]

Posted: February 17th, 2012, 6:14pm CET by Bramus!

Tags: [edit]

Posted: February 17th, 2012, 6:10pm CET by Bramus!

Tags: [edit]

Posted: February 17th, 2012, 12:37pm CET by Bramus!

Tags: [edit]

Posted: February 17th, 2012, 11:45am CET by Bramus!

Tags: [edit]

Posted: February 16th, 2012, 10:16am CET by Bramus!

Tags: [edit]

Posted: February 16th, 2012, 10:08am CET by Bramus!

Tags: [edit]

Posted: February 16th, 2012, 9:17am CET by Bramus!

Tags: [edit]

Posted: February 16th, 2012, 8:41am CET by Bramus!

Tags: [edit]

Posted: February 15th, 2012, 10:36pm CET by Bramus!

Tags: [edit]

Posted: February 15th, 2012, 9:52pm CET by Bramus!

Tags: [edit]

Posted: February 15th, 2012, 12:44pm CET by Bramus!

Tags: [edit]

Posted: February 15th, 2012, 11:57am CET by Bramus!