Bart De Waele » NetlashCollegas

NetlashCollegas (100 unread)

del.icio.us/dextro

EnduroFun

Posted: May 22nd, 2012, 10:32pm CEST by dextro

Tags: [edit]

EnduroFun
dakar-adventure.com

Posted: May 22nd, 2012, 10:31pm CEST by dextro

Tags: [edit]

dakar-adventure.com

Bram.us

CSS 3D Earth

Posted: May 20th, 2012, 3:52pm CEST by Bramus!

Tags: [edit]

Using CSS 3d to create an earth with shading and layers. It is not as good as using WebGL but it theoretically works on iPad.

CSS 3D Earth →
lolcommits

Posted: May 20th, 2012, 3:47pm CEST by Bramus!

Tags: [edit]

Takes a snapshot with your Mac’s built-in iSight/FaceTime webcam every time you git commit code, and archives a lolcat style image with it.

lolcommits →
Google’s Knowledge Graph

Posted: May 20th, 2012, 3:13pm CEST by Bramus!

Tags: [edit]

We’re in the early phases of moving from being an information engine to becoming a knowledge engine

Looks like Google is going after Wolfram|Alpha
Grand Theft Auto Classic WebGL

Posted: May 16th, 2012, 4:33pm CEST by Bramus!

Tags: [edit]

Before you get too overly excited by the title, no this isn’t a full recreation of the 1997 DMA classic. Instead it’s a WebGL tech demo put together by Niklas von Hertzen as an experiment, to test out the creation and performance of large static environments. It works by loading in the original GTA map files which are now freely available, parses all of the data out of them and re-creates the city in WebGL driven 3D.

Several of the game objects are also present, and a basic collision system allows you to teasingly walk around the city in pedestrian mode. I guarantee you’ll walk up to a car and try to get into it, but alas that won’t do much right now.

Having fooled around with GTA (Classic) quite a lot back in the day — remember Junction25, M1, Cops, and GTA Cars? — I’m quite stoked to see this kind of awesomeness!

GTA WebGL Demo →

(via creativejs)
How Yahoo Killed Flickr and Lost the Internet

Posted: May 16th, 2012, 10:02am CEST by Bramus!

Tags: [edit]

As a result of being resource-starved, Flickr quit planting the anchors it needed to climb ever higher. It missed the boat on local, on real time, on mobile, and even ultimately on social—the field it pioneered. And so, it never became the Flickr of video; YouTube snagged that ring. It never became the Flickr of people, which was of course Facebook. It remained the Flickr of photos. At least, until Instagram came along.

Also:

The reason we bought Flickr was not the community. We didn’t give a shit about that. The theory behind buying Flickr was not to increase social connections, it was to monetize the image index. It was totally not about social communities or social networking. It was certainly nothing to do with the users.

A long, but interesting read.

How Yahoo Killed Flickr and Lost the Internet →
Descent of ESA’s Huygens’ probe at Titan

Posted: May 15th, 2012, 11:21pm CEST by Bramus!

Tags: [edit]

This movie, built with data collected during ESA Huygens’ mission at Titan on 14 January 2005, shows the operation of the DISR camera during its descent up to touch-down. The almost 4-hour long operation of DISR is shown in less than five minutes – 40 times the actual speed up to landing and 100 times the actual speed thereafter

Wow! For a full explanation of the visualization, ESA has prepared a PDF with all info.

(via Michel)
Why Nikola Tesla was the greatest geek who ever lived

Posted: May 15th, 2012, 1:40pm CEST by Bramus!

Tags: [edit]

The only thing Edison truly pioneered was douchebaggery.

Why Nikola Tesla was the greatest geek who ever lived →

(via frank)
Proposition to change the prefixing policy

Posted: May 12th, 2012, 11:17am CEST by Bramus!

Tags: [edit]

When a browser vendor implements a new css feature, it should support it, from day 1, both prefixed and unprefixed, the two being aliased. If a style sheet contains both prefixed and unprefixed, the last one wins, according to the cascade.

Authors should write their style sheets using the unprefixed property, and only add a prefixed version of the property (below the unprefixed one) if they discover a bug or inconsistency that they need to work around in a particular browser.

If a large amount of content accumulates using the a particular vendor prefix to work around an issue with the early implementation in that browser, the vendor could decide to freeze the behavior of the prefixed property while continuing to improve the unprefixed one.

Makes sense, but still the problem will exist that many examples that exist now only contain a prefixed version (those “Webkit only”-demos) of a property, breaking in other browsers — hence Opera about to support -webkit prefixes.

Proposition to change the prefixing policy →
The Avengers opening weekend

Posted: May 9th, 2012, 3:36pm CEST by Bramus!

Tags: [edit]

With more than $200 million in box office revenue, The Avengers had the most successful first weekend in movie history. It broke the record set by Harry Potter last year by more than $30 million, despite the “massive” piracy.

The Avengers: Why Pirates Failed To Prevent A Box Office Record →
#NobodyPayingAttention

Posted: May 9th, 2012, 3:32pm CEST by Bramus!

Tags: [edit]

The future is happening, and there’s just nobody paying attention.
Instagram Socialmatic Camera (concept)

Posted: May 9th, 2012, 10:40am CEST by Bramus!

Tags: [edit]

(click to enlarge)

(click to enlarge)

Hipsters rejoice!

Welcome Instagram Socialmatic Camera! →
Plex Media Server v0.9.6.1

Posted: May 9th, 2012, 10:25am CEST by Bramus!

Tags: [edit]

One word: DLNA.

Plex is my favorite Media Center Solution. I have it running on a Mac Mini and it plays nice with my LG Smart TV, MacBook Pro and all my iOS devices. And if you jailbreak your AppleTV2, it’s also compatible with that. A Windows version of the server component is also available.
Firefox Release Channels

Posted: May 8th, 2012, 12:59pm CEST by Bramus!

Tags: [edit]

(click to enlarge)

Firefox and the Release Channels →
CSS3D Clouds

Posted: May 8th, 2012, 11:16am CEST by Bramus!

Tags: [edit]

An experiment on creating volumetric 3D-like clouds with CSS3 3D Transforms and a bit of Javascript.

Stunning. Based upon MrDoob’s WebGL Clouds

CSS3D Clouds →
Portal Cake

Posted: May 8th, 2012, 10:54am CEST by Bramus!

Tags: [edit]

The cake is a lie!

(again, via geekologie)
If Fry and Leela got kids

Posted: May 8th, 2012, 10:52am CEST by Bramus!

Tags: [edit]

Adorable.

(via geekologie)
“JavaScript Developer”

Posted: May 8th, 2012, 10:31am CEST by Bramus!

Tags: [edit]

It is impossible to hire real JavaScript developers as 90% of applicants come in and only know jQuery. They have no clue what an event handler is, how to navigate the DOM or create a simple XHR call without the library.

— Christian Heilmann

And that’s exactly why I do teach my students the bare JavaScript things, next to knowing how to work with jQuery. Heck, even you could learn those things, as our curriculum is freely available.
C&A Fashion Like

Posted: May 7th, 2012, 11:33pm CEST by Bramus!

Tags: [edit]

C&A Brazil:

A new initiative called Fashion Like allows people to ‘like’ certain items of clothing on the company’s Facebook page, and these clicks are collated and displayed on the relevant clothes rack in real-time. Customers are thereby able to view the item’s online popularity in the real world to help them make their decision.

Clever.

Real-time Facebook ‘likes’ displayed on Brazilian fashion retailer’s clothes racks →
SoundWave – Using the Doppler Effect to sense Gestures

Posted: May 7th, 2012, 9:02pm CEST by Bramus!

Tags: [edit]

Do Kinect-like things on your computer, but without the Kinect: the technique uses your speakers and microphone to sense what gesture you are making.

Called SoundWave, the new technology uses the Doppler effect to detect any movements and gestures in the proximity of a computer. The Doppler effect, if you remember high school physics, is where the frequency of a sound alters depending on your distance from it. In the case of SoundWave, your computer’s built-in speaker is used to emit ultrasonic (18-22KHz) sound waves, which change frequency depending on where your hand (or body) is in relation to the computer. This change in frequency is measured by your computer’s built-in microphone, and then some fairly complex software works out your motion/gesture.

Sheldon would be proud.

Microsoft creates Kinect-like system using your laptop’s built-in speaker & microphone →

(RT’d by tweeted:
)
requestAnimationFrame – The secret to silky smooth JavaScript animation!

Posted: May 7th, 2012, 3:04pm CEST by Bramus!

Tags: [edit]

Good introduction to working with requestAnimationFrame(). Be sure to also give the aforementioned requestAnimationFrame example a look.

requestAnimationFrame — The secret to silky smooth JavaScript animation! →

Wolf's Little Store

Windows Phone design – setup and resources

Posted: May 7th, 2012, 12:35pm CEST by Wolf

Tags: [edit]

In the post I’ll be sharing some information about designing for Windows Phone (7) that might help other designers.

First, a bit about the hardware. In order to use the Microsoft Windows Windows Phone SDK I need a physical Windows machine. Not visible in the picture is the PC under my desk.

I use my 27″ iMac and switch between the PC and iMac using target display mode (Command+F2) (this only works on older iMacs).

I use the Nokia Lumia 800 as a reference device, but since I can’t take any screenshots I mostly use it to check out the interaction design.

There are some design resources I found, like the aforementioned grid.

Microsoft has a set of PSDs and some other resources on MSDN. You’re going to need the SegoeWP font installed on your system (not the same as Segoe UI!). That font comes with the PSD download.

Unfortunately, the Microsoft provided PSDs are largely incomplete. The icons are made of bitmap shapes. The panorama PSD mentions something about a new version coming soon, and some of parts exist out of 1 layer (instead of being fully layered).

Most online resources are pretty crappy. There’s one vector based resource by Clarity Consulting worth downloading.

I use Illustrator on the Mac to make wireframes. For an application flow that looks sort of like this (anonimized) it makes sense to work with vector shapes. Especially if there’s going to be different Windows Phone screen sizes in the future.

Since there are no good vector design resources out there I set out to create my own. Here’s a sample of what I have so far:

The first version of this resource can be downloaded here. It’s not 100% yet but provides some base shapes for wireframing and/or designing. Make you sure have the SegoeWP font installed (the fonts are not outlined on purpose).
Windows Phone & screenshots

Posted: May 7th, 2012, 11:52am CEST by Wolf

Tags: [edit]

In order to create better designs for Windows Phone I have to be able to take screenshots. Apparently there is a screenshot application out there (why is there no offical way to make screenshots?) To be able to install applications on your phone, you need to register your device as a developer device.

First you need an app hub account. When I try to register, I get this nondescript error:

When I then try to contact support, I’m greeted with a screen about €299 one-off support contracts:

Welcome to the world of Micro$oft? All I wanted is to take screenshots of the official apps. I’m not a big company that needs a Microsoft support contract.

One can start to wonder why there are so few quality applications in the marketplace.

Bram.us

VideoSWS – HTML5 Video Player Comparison

Posted: May 7th, 2012, 10:52am CEST by Bramus!

Tags: [edit]

VideoSWS — HTML5 Video Player Comparison →
Avería – The Average Font

Posted: May 6th, 2012, 9:39pm CEST by Bramus!

Tags: [edit]

This is the story of the creation of a new font, Avería: the average of all the fonts on my computer.

And it looks quite nice!

Avería →

(via tweeted:
)
Adobe Creative Cloud

Posted: May 6th, 2012, 9:31pm CEST by Bramus!

Tags: [edit]

Adobe finally gets their pricing right and affordable: for $49.99/month you get access to practically all Adobe apps (latest versions) and a few services such as Typekit. That’s a steal at $600/year.

If you’re an existing CS3+ customer or a student/teacher it’s only $29.99/mo.

Adobe Creative Cloud →
WebSockets: A Guide

Posted: May 6th, 2012, 8:46pm CEST by Bramus!

Tags: [edit]

Great guide to WebSockets. Not only talks about the JS implementation in browsers, but also takes a look at the raw data, lists Websocket servers, and points towards pub/sub systems which you’ll need to keep your sanity when creating complex WS-apps.

WebSockets: A Guide →
Opera Mobile Emulator with support for (some) -webkit vendor prefixes

Posted: May 6th, 2012, 5:33pm CEST by Bramus!

Tags: [edit]

Opera, along with Mozilla, announced at a CSS Working Group meeting that we would support some -webkit prefixes. This is because through our site compatibility work, we have experienced that many authors of (especially mobile) sites only use -webkit prefixed CSS, thereby ignoring other vendor prefixes and not even including an unprefixed equivalent. This leads to a reduced user experience on Opera and Firefox, which don’t receive the same shiny effects such as transitions, gradients and the like, even if the browser supported those effects.

They’ve made some beta (labs) builds of their mobile emulator supporting -webkit prefixes.

Opera Mobile Emulator Labs Builds →
Opera Mobile Emulator Labs supported -webkit properties →

Be sure to also read Faruk Ates’ two posts on the the topic.
HTML5 Drag and Drop

Posted: May 6th, 2012, 5:21pm CEST by Bramus!

Tags: [edit]

Good and complete article by Opera on Drag and Drop. A must read if you’re new to the subject (or a good summary if you’re somewhat familiar with it)

HTML5 Drag and Drop →
Frogatto Editor

Posted: May 6th, 2012, 5:16pm CEST by Bramus!

Tags: [edit]

In-game level editor like the one we saw in Bret Victor’s aforementioned Inventing on Principle.
iPad Keyboard Prototype

Posted: May 6th, 2012, 4:30pm CEST by Bramus!

Tags: [edit]

Makes sense.
The Art of Film & TV Title Design

Posted: May 6th, 2012, 3:32pm CEST by Bramus!

Tags: [edit]

(via jnack)
The camera collection

Posted: May 6th, 2012, 3:14pm CEST by Bramus!

Tags: [edit]

Pixelated animation on the history of cameras

(via jnack)
Cogoo Turntable Rider

Posted: May 6th, 2012, 3:11pm CEST by Bramus!

Tags: [edit]

(via iso50)
Automatic website publishing with Git, GitHub-Style

Posted: May 6th, 2012, 1:30am CEST by Bramus!

Tags: [edit]
One of the things I like about GitHub is the fact that it sport a gh-pages branch. Anything you push to it, is automatically published on your GitHub subdomain http://username.github.com/projectname/.

Inspired by this GitHub publishing flow, I’ve set up a likewise method on our web servers at work: a branch which gets published automatically onto our web server whenever we push code to it. This way we can eliminate the manual (and tedious) task of FTP’ing to the server (or opening up a network share) and copying the files onto the server in order to publish.

~
The Setup
The web server at work is a Windows 2008 R2 machine running a WAMP stack to serve the (mostly static) sites. Each hosted subsite is configured a vhost and is stored in its own subfolder on disk. Apache is being run as a separate user which has limited access to the filesystem.
```
<VirtualHost *:80>
    ServerName subdomain.ikdoeict.be
    UseCanonicalName On
    DocumentRoot "c:/apache2/htdocs/vhosts/subdomain.ikdoeict.be/wwwroot"
    php_admin_value open_basedir "c:/apache2/htdocs/vhosts/subdomain.ikdoeict.be;c:/php/temp"
</VirtualHost>
```
Next to the web server we also have a private Git server running Linux to/from wich code is pushed/pulled. Repositories are accessible via HTTPS and authenticating to this server is done via an HTTP Username & Password (not via a SSH key).

Of course your mileage may vary: you might be running all-linux machines (in which case you might be better off with Capistrano); or you might have one single server function as both the web and Git server; or you might your code stored onto a public Git server; or you might skip out on the gh-pages branch and want to deploy your master; etc. — either way: adjust/skip where necessary to reflect your setup/preferences.

~
Prerequisites Install Git on the Web Server
As it’s a Windows server I’ve installed Git for Windows, choosing to run Git and the Unix Tools from the Windows Command Prompt.

Once installed, I’ve restarted the server to get the git command available anywhere on the server.
Create new repository on the Git server
Create a (bare) repository on the Git server and make sure that is externally accessible so that you can clone it on an other machine.

~
Gitting [sic] started Clone, Branch & Develop on your local machine
Develop your site on your machine as you’d normally do (in my case: on the master branch).
```
git clone https://user@gitserver/project.git .
[build site]
git add .
git commit -m 'the one true commit'
git push origin master
```
Also create a gh-pages branch which will be the version to be deployed to the web server. If the gh-pages branch won’t differ from the master, feel free to skip out on it and deploy the master on the web server.
```
git branch gh-pages
git checkout gh-pages
[make changes, such as adding a Google Analytics Tracking Code]
git add .
git commit -m 'changes for online version'
git push origin gh-pages
```
Clone on the Web Server
On the web server, clone the project into the vhost’s DocumentRoot and activate the gh-pages branch so that the web server will serve that version.
```
cd c:/apache2/htdocs/vhosts/subdomain.ikdoeict.be/wwwroot
git clone https://user@gitserver/project.git -o gh-pages .
```
Be sure to verify with your favorite text editor that you’ve got the correct version. If it’s correct you’ve successfully deployed your site onto the web server.
Security Alert!
You might not know this but whenever you clone a Git project onto disk, you’ll end up with a (hidden) .git directory in the root of your project. In that directory, everything about the project is stored: branches, hooks, ignore files, remotes, etc.

Now that you’ve deployed the project onto the web server, that .git directory will also be present in your vhost DocumentRoot, meaning that it — and its files — are now publicly accessible via http://subdomain.ikdoeict.be/.git/

To prevent this adjust your apache config to disallow the .git folder from being accessed over HTTP.
```
<VirtualHost *:80>
    ServerName student.ikdoeict.be
    UseCanonicalName On
    DocumentRoot "c:/apache/htdocs/vhosts/student.ikdoeict.be/wwwroot"
    php_admin_value open_basedir "c:/apache/htdocs/vhosts/student.ikdoeict.be;c:/php/temp"

    <Directory "c:/apache/htdocs/vhosts/student.ikdoeict.be/wwwroot/.git">
        Order allow,deny
        Deny from all
    </Directory>

</VirtualHost>
```
~
Getting the server to fetch updates Deploying changes
Now, how to get changes onto the web server? Make changes on your local machine as you’d normally do, and push them upstream when commited. Be sure to merge your changes in the gh-pages branch as that’s the version on the web server.
```
git checkout master
[make changes]
git add .
git commit -m 'changes'
git push origin master

git checkout gh-pages
git merge master
git push origin gh-pages
```
On the web server, do a git pull to get the latest version
```
git pull origin gh-pages
```
Storing password in your repository’s config
As our setup requires HTTP username + password authentication it’ll ask for the password each time I push/pull something. In order to bypass this just clone the repository as https://user:pass@gitserver/project.git. If you’ve already cloned without a password, just edit .git/config so that the remote url contains the password.

Beware though: everything is stored plaintext! If other people have access to the machine, this might not be a good idea! Also be sure to have implemented the security step above.

In order to automate deployment (next step), git pull should run fine without any user intervention such as requiring to enter a password.

~
Automating Deployment PHP, do your thing!
Up until now we can deploy changes onto the server, yet it still requires us to log in to the server and manually invoke a git pull. What if we could just open up a webpage in our browser which does the updating for us?

Luckily for us, PHP has a built-in command shell_exec, which allows you to execute a command via the shell and which returns the output. Given this, it’s fairly easy to knock up a PHP script that executes a git pull
```
<php
    echo nl2br(shell_exec('git pull origin gh-pages 2>&1'));
```
Note: the 2>&1 at the end of the commmand is to route encountered errors to the output.

Add this file to your gh-pages branch, and — for the final time — do a manual git pull on the web server.
```
git checkout gh-pages
[create update.php]
git add .
git commit -m 'update script'
git push origin gh-pages
```
Once the file is on the web server, you can from then on update the version on the server by visiting http://subdomain.ikdoeict.be/update.php. The file will give output when done.

Note: Since Apache is running as a limited user, you must give that user R/W permissions on your DocumentRoot so that it can do all basic CRUD file manipulations.
Putting the magic in automagic
Deploying new versions goes smooth by now, yet it’s not fully automated … yet. You might now know this but Git supports hooks. Hooks are executed after a certain action is performed and are stored in .git/hooks. For example: after a commit, you could let a hook store the commit information in a MySQL database.

One of the hooks that’s interesting for us is the post-receive hook, a server-side hook which is executed after a client has performed a push. We can take this hook, and let it call the update.php script for us. This way, we just have to push, and the web server will be updated automagically.

First, create the hook by renaming the sample provided
```
cd .git/hooks/
mv post-receive.sample post-receive
chmod +x post-receive
```
Second — and most important — adjust the hook’s content so that it calls the update.php script
```
#!/bin/sh
curl -s http://subdomain.ikdoeict.be/update.php
```
Tip: If you want some actual feedback to see if everything works fine, adjust update.php so that it sends you an e-mail.

Wolf's Little Store

Windows Phone emulator

Posted: May 4th, 2012, 10:19pm CEST by Wolf

Tags: [edit]

If you install the Windows Phone SDK, an emulator is included:

Will probably be reporting more when I learn more. Designing for a new platform is always exciting.
Windows Phone grid

Posted: May 4th, 2012, 11:30am CEST by Wolf

Tags: [edit]

Via.

del.icio.us/dextro

Motor Sideroads

Posted: May 3rd, 2012, 9:46pm CEST by dextro

Tags: [edit]

Motor Sideroads

Bram.us

Cube – A game about Google Maps

Posted: May 3rd, 2012, 9:31am CEST by Bramus!

Tags: [edit]

The aforementioned Play your world with Google Maps has gone live, and is now known as “Cube”.

Cube →
Dropbox Dropquest II

Posted: May 3rd, 2012, 8:53am CEST by Bramus!

Tags: [edit]

Many of you were around for last year’s Dropquest, where we sent y’all on a magical journey through Dropbox and the interwebs. Wordokus were solved, music puzzles were deciphered, origami cranes were folded, and dragons were slain. All in all, nearly half a million Dropquesters were rewarded for their craftiness, skill, and effort. That was well over a year ago, and since then we’ve been holding our cards and toiling away to craft a Dropquest successor worthy of the first.

That being said, we’ve got something to say about the Dropquest landing next weekend:

It’s back.
It’s harder.
It’s epic-er.

Mark your calendars: May 12th.

Dropquest II: The Future is Now →
Google Street View Wifi Snooping Cover-Up

Posted: May 3rd, 2012, 8:50am CEST by Bramus!

Tags: [edit]

Image Courtesy Agence France-Presse/Getty Images

The engineer who wrote the code to capture the data told his managers about it. He told his colleagues about it. He wrote the code in his “20% time” – the “spare” time that Google allows staff to do projects that interest them – and it was then incorporated into the code used on the Google Street View cars which drove around the public byways of the world, capturing pictures … and also data from open Wi-Fi networks.

And what did Google say? Initially, that the data collection happened “mistakenly”. No, it didn’t. Initially, that only “fragmentary” data was collected. No, it wasn’t: the first page of the FCC report says that: “On October 22 2010, Google acknowledged for the first time that ‘in some instances entire emails and URLs were captured, as well as passwords’.” That it was the work of one engineer acting alone, and not in any way part of how Google rolls.

Google’s problem is that it now believes itself above others – even governments →
Google staff ‘knew of wi-fi snooping’, report says →

(via ★)
Real life clock

Posted: May 2nd, 2012, 12:20am CEST by Bramus!

Tags: [edit]

Mesmerizing. http://iprl.wz.cz/ →

(via OrT)
IKEA Cardboard Camera

Posted: April 27th, 2012, 10:41pm CEST by Bramus!

Tags: [edit]

The disposable cardboard camera that we once used to know, is back. Smaller form. USB-Pluggable. Still cardboard.

From the same IKEA that also builds sewing machines and TVs

Clever move by IKEA, as they’ll most likely sell a truckload of these (imagine taking these to a festival, or giving one to your kids).

IKEA Cardboard Camera Called KNÄPPA, to Land on Store Shelves Soon →

(via Tim)
Portal 2 Level Editor

Posted: April 27th, 2012, 2:11pm CEST by Bramus!

Tags: [edit]

To be expected on May 8, 2012

Promo Trailer:

Late nights here we come!

Wolf's Little Store

Setting boundaries

Posted: April 27th, 2012, 1:26pm CEST by Wolf

Tags: [edit]

“The most important thing a creative person can learn professionally is where to draw the red line that separates what you are willing to do, and what you are not.”

—Hugh MacLeod (via SwissMiss)

Bram.us

State of the web 2012

Posted: April 26th, 2012, 11:52pm CEST by Bramus!

Tags: [edit]

Very true.

The Oatmeal: State of the Web Spring 2012 →
Descriptive Camera

Posted: April 26th, 2012, 9:59pm CEST by Bramus!

Tags: [edit]

The Descriptive Camera works a lot like a regular camera—point it at subject and press the shutter button to capture the scene. However, instead of producing an image, this prototype outputs a text description of the scene.

Descriptive Camera →

(via Jeremy)
Festo SmartInversion

Posted: April 26th, 2012, 9:51pm CEST by Bramus!

Tags: [edit]

SmartInversion is a helium-filled flying object that moves through the air by turning inside-out. This constant, rhythmically pulsating movement is known as inversion and gives the flight model its name.
Fink at Motel Mozaïque 2012

Posted: April 26th, 2012, 7:48pm CEST by Bramus!

Tags: [edit]

Last week Fink, one of my favorite artists, came to Belgium to play in the Ancienne Belgique. An unfortunate event however prevented me from going. Luckily the people of 3voor12 have recorded his gig at Motel Mozaïque the day after.

Best track indefinitely is the final track — “Sort of Revolution” — starting at 0:51:02
Lucidchart and Google Drive

Posted: April 26th, 2012, 2:38pm CEST by Bramus!

Tags: [edit]
At the school I teach at, we’ve been using Lucidchart to create our website wireframes. What caught my eye today is that they’ve launched a tight Google Drive integration
With Lucidchart installed for Google Drive, you can:
- Create, open and share Lucidchart documents from Drive
- View, open and edit Microsoft Visio documents from Drive
- Export Lucidchart documents as a PNG, JPG or PDF to be stored in Drive
- Initiate daily or weekly backups of all of your Lucidchart documents to be stored in Drive
I think this will be one of the features that could set out Google Drive from its competitors: an early on and direct integration of webapps, directly accessible from within Google Drive.

Introducing Lucidchart integration with Google Drive →
Google Drive’s Privacy Policy

Posted: April 26th, 2012, 11:04am CEST by Bramus!

Tags: [edit]

Google Drive’s Privacy Policy compared to the other players out there.

In short, Google is giving itself all the permissions it could possibly need to run all of Google services, with the specific limitations that it doesn’t own anything you upload and it can’t use your data beyond running its services.

Also:

Dropbox’s language is definitely friendlier than Google’s, but it’s actually more expansive, since it’s more vague. Where Google specifically lists the rights and permissions it needs to run its services using precise legal terminology like “create derivative works,” Dropbox just says you’re giving it “the permissions we need” to run its services.

Lots of cruft has been circulating, because most people some to neglect/not mention this little part from Google’s policy:

You retain ownership of any intellectual property rights that you hold in that content. In short, what belongs to you stays yours.

Is Google Drive worse for privacy than iCloud, Skydrive, and Dropbox? →
Man DDOSes his S3 bucket by adding its images in a Google Spreadsheet

Posted: April 26th, 2012, 11:00am CEST by Bramus!

Tags: [edit]

I login to my AWS account to see what is going on, and I see this: $1177.76 in usage charges! A thousand, one hundred, seventy seven dollars. Out of which $1065 in outgoing bandwidth transfer costs. The scary part: 8.8 Terabytes of outgoing traffic! Tera. Not Giga. Terabytes.

To make things worse, I realized that the cost was going up hour after hour. Fifty to hundred dollars more in billing charges with each. passing. hour. I started sweating.

The Google attack: How I attacked myself using Google Spreadsheets and I ramped up a $1000 bandwidth bill →

(via @codepo8)
Google Drive

Posted: April 24th, 2012, 8:37pm CEST by Bramus!

Tags: [edit]

As expected, the service will offer 5GB of storage space for documents, videos, photos, PDFs and other files, and Google Docs is built-in to the service. Users will be able to upgrade to 25GB of space for $2.49 a month, 100GB for $4.99 a month, or 1TB for $49.99 a month, and upgrading to a paid account will expand your Gmail storage to 25GB.

Google Drive officially launches with 5GB free storage, Google Docs integration →
Inventing on Principle

Posted: April 23rd, 2012, 8:49pm CEST by Bramus!

Tags: [edit]

Finally got around to watching this awesome presentation. If you haven’t already, I suggest you watch it now; and don’t let it lingering around for two months like I did.

mind = blown
Paper Prototyping

Posted: April 23rd, 2012, 8:43pm CEST by Bramus!

Tags: [edit]

As a designer I find it’s important to remove myself from the digital space and explore solutions that can originate in physical space.

Interface Origami →
Photoshop Google Maps Tile Cutter Script

Posted: April 23rd, 2012, 8:39pm CEST by Bramus!

Tags: [edit]
Last week, I coded a Google Maps Tile Cutter script for use with Adobe Photoshop. The script automatically cuts/carves a very large image you’ve opened in Photoshop into tiles which you can immediately use in Google Maps.
Download
▼ Download PS_BRAMUS.GoogleMapsTileCutter
Example The source image (originally 5670 x 3402)
The resulting tiles, ready for use with Google Maps
The Google Maps Integration

A live example of an integration is available at [bramus.github.com]
Installation
- Download and extract PS_Bramus.GoogleMapsTileCutter
- Move PS_Bramus.GoogleMapsTileCutter.jsx to your Photoshop scripts directory
  - For Photoshop CS5 on Mac OS X this is /Applications/Adobe Photoshop CS5/Presets/Scripts
  - For Photoshop CS5 on Windows this is C:\Program Files\Adobe\Adobe Photoshop CS5\Presets\Scripts
- Restart Photoshop if it was already running
How to use Cutting tiles
- Open Photoshop and open the image you want to process.
- Access the script from the scripts menu in Photoshop: File > Scripts > PS_Bramus.GoogleMapsTileCutter.
- The script will start carving the tiles for as many zoom levels as possible.
  - During this phase it will look like Photoshop is going berzerk, this is normal, as it is.
  - Depending on the size of the image it might be a good idea to take coffee break.
- When the script has finished carving, you will find the tiles on your desktop, in a tilecutter subfolder (~/Desktop/tilecutter)
Implementing the tiles
The resulting tiles can be used directly in Google Maps by setting up a custom map type, using a google.maps.ImageMapType instance

A fully working example is included in the examples directory that came with the download of PS_Bramus.GoogleMapsTileCutter.

A live example is available at [bramus.github.com]
Notes
- The included example and Google Maps documentation referenced is for Google Maps Version 3.
- PS_Bramus.GoogleMapsTileCutter will resize the canvas to being a square one, as this is easier to process and implement
  - A result is that extra (empty) tiles will be generated. In a future version it’ll be possible to omit these tiles from being saved, to save diskspace from being wasted.
- If you’re familiar with JavaScript, you can adjust lines 11-25 of the script to change some settings like the targetPath (where to save the files), bgColor (background color for empty tiles), etc.
Credits
PS_Bramus.GoogleMapsTileCutter is based upon the Automatic Tile Cutter by Will James, Curtis Wyatt, and Nate Bundy.

Basically PS_Bramus.GoogleMapsTileCutter is an improved, cleaned up version of their work.
Make a donation
It certainly is no obligation but it would most certainly put a smile on my face
The Box

Posted: April 22nd, 2012, 2:47pm CEST by Bramus!

Tags: [edit]

Neat 3D scene implementation, all done via JavaScript and (quite few) CSS3 3D transforms.

The Box →

(via The Mozilla Dev Derby (March 2012))
CSS/JS 3D Image Transitions

Posted: April 22nd, 2012, 2:39pm CEST by Bramus!

Tags: [edit]

3D Image Transitions →

(via The Mozilla Dev Derby (March 2012))
Valve Handbook for New Employees

Posted: April 22nd, 2012, 2:35pm CEST by Bramus!

Tags: [edit]

So you’ve gone through the interview process, you’ve
signed the contracts, and you’re finally here at Valve. Congratulations, and welcome.

Valve has an incredibly unique way of doing things that will make this the greatest professional experience of your life, but it can take some getting used to. This book was written by people who’ve been where you are now, and who want to make your first few months here as easy as possible

Be sure to read the part on Stack ranking, a concept which I applaud and — as a lecturer in a technical university, which means that employment is government regulated — have been tinkering about quite a lot lately.

There’s also a PDF version available →

Wolf's Little Store

Value created vs. time spent

Posted: April 22nd, 2012, 1:37pm CEST by Wolf

Tags: [edit]

Yesterday, I was in the zone for about ten hours (see: Flow). I started working at 1 PM, I didn’t actually plan to work ten hours, but it was 11 P.M. when I started yawning and realized I had been designing and developing for a solid ten hours (minus a diner break).

This doesn’t happen very often.

The last few weeks I’ve been working from a co-working space in Antwerp instead of at home and I am reminded how bad interruption is for your productivity.

Fog creek Software:

“Since the beginning, Fog Creek’s promise has always been that every developer gets a private office with a door that closes. Don’t want a private office? You get one anyway. If you want camaraderie, you can walk down the hall, put your witticisms on company chat, or store them all up and let fly at lunch.”

Campaign Monitor:

“For us, private offices were non-negotiable. Over the years we’ve had fully open plan, only offices and a combination of both. In my experience, closable offices for each team member are by far the best configuration for a software company.”

Paul Graham:

“After software, the most important tool to a hacker is probably his office. Big companies think the function of office space is to express rank. But hackers use their offices for more than that: they use their office as a place to think in. And if you’re a technology company, their thoughts are your product. So making hackers work in a noisy, distracting environment is like having a paint factory where the air is full of soot.”

Regarding that software part, I am very happy I that can buy the software I want to get the job done, whenever I want to, without any discussion.

It used to be that I had to argue with someone higher up whether a $30 piece of productivity software would save the company money. At a billable rate of $110/hour for 2 persons, it takes about 8 minutes of discussion until you reach a potential $30 lost revenue.

I don’t understand how any company can charge for coffee. If you calculate the gain it’s probably better to hand people money to drink coffee every two hours.

(OK, I’m joking here, I know you just need to drink 2 liters of water every day and you’ll be more productive and healthy. But don’t take away my coffee.)

Closed plan offices are expensive. The best hardware is expensive. Software is expensive. But interruption is really expensive.

Bill Dallesandro:

“A study by Microsoft showed just how lethal interruptions are to productivity. The researchers taped 29 hours of people working in a typical office, and found that they were interrupted on average four times each hour. Sounds like a day at most offices. Here’s the kicker – 40% of the time, the person did not resume the task they were working on before the interruption. The more complex the task, the less likely the person was to resume working on it after an interruption.”

Consider the task I was working on yesterday: first I forked an old project, made it reusable, refactored the code, and merged it into an existing website. I’m not saying what I’ve done was hard or ground-breaking, but it sure required a lot of concentration.

Take this little nugget of information about the history of Valve:

“Gabe tells it this way. When he was at Microsoft in the early 90’s, he commissioned a survey of what was actually installed on users’ PCs. The second most widely installed software was Windows.

Number one was Id’s Doom.

The idea that a 10-person company of 20-somethings in Mesquite, Texas, could get its software on more computers than the largest software company in the world told him that something fundamental had changed about the nature of productivity. When he looked into the history of the organization, he found that hierarchical management had been invented for military purposes, where it was perfectly suited to getting 1,000 men to march over a hill to get shot at. When the Industrial Revolution came along, hierarchical management was again a good fit, since the objective was to treat each person as a component, doing exactly the same thing over and over.”

The rules of the game have changed. You can’t solve a problem by throwing more people at it. A single developer can make a huge impact. A team of 13 can be bought for $1 billion.

I have a vision for a software design company, and that vision falls somewhere between what Valve is doing (PDF link), what Joel Spolsky is all about, 37Signals’ view of work, and Apple’s output.

If what I’m saying appeals to you, we should talk.
Looking for a developer

Posted: April 22nd, 2012, 12:36pm CEST by Wolf

Tags: [edit]
Short version: looking for an Antwerp based web developer.

Long version: I’m currently in the process of merging my photography page and my Project365 tumblr into a new photography page. Here’s a screenshot of the dev version:

I’m pretty far: I have a running responsive slideshow, have all of the content ready, and it looks good.

There are 3 ways to view the photos:
- As thumbnails, to quickly find a photo
- As a list, to scroll through the biggest versions of the photos
- As a slideshow, to see each photo in detail
The slideshow part specifically is pretty badass (thanks @joggink for your JS help):

Switching slides triggers a nice CSS animation, and the page is fully responsive. I’m using intrinsic ratios to make sure no photo is ever deformed. There’s an option to display diptychs and triptychs without having to use Photoshop:

Everything can be controlled through keyboard shortcuts. And every photo is available at it’s own unique URL. Getting all things right is important.

However, there are some big things I don’t have the chops for:
- Performance optimization through AJAX loading of content (e.g. in list view, an infinite scrolling type loading like Twitter; in thumbnail mode a way to load more thumbs by clicking a more button)
- Extreme image optimization: when uploading an image at full res, several smaller versions should be generated, and these versions should be loaded when appropriate (i.e. someone viewing photos on an iPad should only ever see a 1024px wide version of images, any extra data would be a waste)
- Automating the upload process: it should be possible to update the photography section easily (i.e. through Dropbox or iffft). This will probably be a backend module where each photo is a new post, using the WordPress post mechanisms.
I am specifically looking for a person that is in Antwerp, is freelance and can take new projects on a regular basis.
Extended requirements
- You are proficient with git and Github: you know how to merge and branch and work with remote repos
- You know jQuery like the back of your hand and if needed you can write vanilla Javascript
- You care about design details and getting everything “right”
- You have a deep knowledge of the web and what works and what doesn’t (read: you are experienced)
- Knowing WordPress or not knowing WordPress is not really an issue: WordPress development = PHP anyway
- You also need to be a badass developer, but I think that’s pretty obvious.
Q: Why are you looking for someone in Antwerp?
I would like to develop a working relation with a developer in Antwerp so it’s easier to sit together for new projects in the future.
Q: What is the budget?
We should go through the features together and decide a budget based on what needs to be done. I know that quality costs money.
Q: Where should I apply?
Send me an e-mail.

del.icio.us/dextro

Uptime by fzaninotto

Posted: April 21st, 2012, 11:19pm CEST by dextro

Tags: [edit]

A simple remote monitoring utility using Node.js and MongoDB
Writing and using php streams and sockets

Posted: April 21st, 2012, 11:14pm CEST by dextro

Tags: [edit]

Writing and using php streams and sockets
PicMonkey - Photo Editing Made of Win

Posted: April 21st, 2012, 6:17pm CEST by dextro

Tags: [edit]

PicMonkey - Photo Editing Made of Win
What does Twitter know about its users? #NOLOGS | Privacy International

Posted: April 19th, 2012, 9:06am CEST by dextro

Tags: [edit]

What does Twitter know about its users? #NOLOGS | Privacy International

Bram.us

Thomas Elliot is famous!

Posted: April 15th, 2012, 12:11am CEST by Bramus!

Tags: [edit]

Last Saturday we went to a popular mall in Virginia and conducted a bit of a social experiment. Using his real first and middle name, and with the help of just a few staged people, tons of people believed Thomas was a famous actor, including mall security. The mall assigned us a security detail who escorted us everywhere and helped close stores for the supposed celebrity. They also took us through private corridors to avoid the frenzy.
What makes someone leave a website?

Posted: April 14th, 2012, 12:30am CEST by Bramus!

Tags: [edit]
1. Bad Navigation
2. Too Many Ads
3. Bad Content Structure
4. Obtrusive use of Audio & Video
5. The Registation Requirement
6. Boring Content, Boring Design
7. Poor Legibility
8. Lack of Frequency
What Makes Someone Leave A Website? →

(via Inventis)
Spotify Play Button

Posted: April 14th, 2012, 12:21am CEST by Bramus!

Tags: [edit]

This should work:

Too bad it opens up Spotify, instead of streaming the audio inline. But on the other hand, I can think of many reasons why that’s disabled.

And way too cool that the embedded player actually follows along with progress meters and playing indicators as you progress listening a track and/change it in Spotify (the app) itself.

Spotify Play Button →
1024×768

Posted: April 14th, 2012, 12:19am CEST by Bramus!

Tags: [edit]

Screens with a 1024×768 resolution are a bit like Windows XP: there have long been better options, but they still remained the most often used screens on the web. That is, until now.

Quite convinced it’ll keep on sticking around though, due to the iPad.

Move Over 1024×768: The Most Popular Screen Resolution On The Web Is Now 1366×768 →
Statcounter Global Stats →
HTML Animation with requestAnimationFrame

Posted: April 13th, 2012, 11:52pm CEST by Bramus!

Tags: [edit]

Good introduction to working with requestAnimationFrame:

Rocker Chick Demo & Source →
Adobe Shadow Labs Release 2

Posted: April 13th, 2012, 11:36pm CEST by Bramus!

Tags: [edit]
This version of Shadow focuses primarily on the following:
- Local Host URL Support
- Adobe Edge Integration
- Improved workflows for sticky caches, HTTP Authentication Support and URL Monitoring
Shadow – Labs Release 2 now available →
Adobe Shadow on Adobe Labs →
iPad GUI PSD (Retina Display)

Posted: April 13th, 2012, 11:24pm CEST by Bramus!

Tags: [edit]

For Photoshop CS6

iPad GUI PSD (Retina Display) →

Wolf's Little Store

Location of iOS simulator in iOS 5.1 SDK

Posted: April 13th, 2012, 4:24pm CEST by Wolf

Tags: [edit]

For future reference, the path of the iOS simulator in the iOS 5.1 SDK:

/Applications/Xcode.app/Contents//Developer/Platforms/
iPhoneSimulator.platform/Developer/Applications/iPhone\ Simulator.app

You’ll need this if you want to test for retina iPad. It’s now showing my default since iOS 5.1 since it’s now part of the Xcode bundle. To navigate to it in Finder you would right click on XCode and choose the “View package contents” option. Thanks Jan and Werner.

Bram.us

Honda Crossrunner

Posted: April 13th, 2012, 1:10pm CEST by Bramus!

Tags: [edit]

(via teusje)
CSS :nth-letter()

Posted: April 13th, 2012, 12:56am CEST by Bramus!

Tags: [edit]
Adobe is working on implementing :nth-letter() in Webkit:

The desired syntax was :nth-letter(), where the argument would (ideally) take the same values that :nth-child() can (e.g, a simple index, even/odd, or an expression like 2n+4).

This code:
```
<p id="sentence">My fourth letter is awesome.</p>
#sentence:nth-letter(3) {
    color: red;font-family: "Comic Sans MS";
    font-size: 3em;
    font-weight: bold;
}
```
Results in this:

Whenever a final implementation lands, along with :nth-word() and the like, I guess we can say goodbye to lettering.js

Adobe WebKit Hackathon Summary →
RSS Graffiti 2.0

Posted: April 11th, 2012, 2:16pm CEST by Bramus!

Tags: [edit]

RSS Graffiti (RSS importer for Facebook) has a new version. Must say the UI is very slick.

RSS Graffiti →
Mac OS X Flashback Trojan

Posted: April 10th, 2012, 1:32pm CEST by Bramus!

Tags: [edit]
Two months ago, a new variant of the Flashback Trojan started exploiting a security hole in Java to silently infect Mac OS X machines. Apple has since patched Java, but this was only on April 3rd. More than 600,000 Macs are currently infected with the Flashback Trojan, which steals your user names and passwords to popular websites by monitoring your network traffic.

To know if you were infected, run these commands:
```
defaults read /Applications/Safari.app/Contents/Info LSEnvironment
defaults read ~/.MacOSX/environment DYLD_INSERT_LIBRARIES 
```
If both give an error/notice that ends with “… does not exist”, you’re safe.

Over 600,000 Macs infected with Flashback Trojan →
Trojan-Downloader:OSX/Flashback.I Manual Removal →
Java for OS X Lion 2012-002 Security Update →
Hitchcock’s Rear Window Timelapse

Posted: April 10th, 2012, 12:07pm CEST by Bramus!

Tags: [edit]

I dissected all of Hitchcock’s Rear Window and stiched it back together in After Effects. I stabilized all the shots with camera movement in them. Since everything was filmed from pretty much the same angle I was able to match them into a single panoramic view of the entire backyard without any greater distortions. The order of events stays true to the movie’s plot.”

Rear Window (Loop) →

(via jnack)
Microsoft acquires (part of) Netscape

Posted: April 10th, 2012, 11:59am CEST by Bramus!

Tags: [edit]

Here’s a deal that would have made many minds explode back in the 1990s: Microsoft is buying Netscape. Or at least most of the important parts of the company that used to be synonymous with “Internet.”

That’s a side component of the $1 billion patent sale that AOL and Microsoft announced this morning.

Attention Marc Andreessen: Microsoft Just Bought (Part of) Netscape →
Microsoft Buys 800 AOL Patents for $1 Billion →
Photography anno 2012

Posted: April 10th, 2012, 11:51am CEST by Bramus!

Tags: [edit]

Kodak goes bankrupt and Instagram is worth a billion dollars. 2012, y’all.

del.icio.us/dextro

Noodlesoft | Hazel

Posted: April 9th, 2012, 11:22pm CEST by dextro

Tags: [edit]

Automated organisation for your mac

Bram.us

Photoshop Blend Modes coming to CSS

Posted: April 9th, 2012, 11:05pm CEST by Bramus!

Tags: [edit]
If you’re a user of our design applications such as Photoshop and Illustrator, you know how you can create very cool effects with blend modes.

Last year, I joined the W3C and started contributing to the SVG and FX task forces. I am now spending the bulk of my time on editing, discussing and implementing the CSS compositing and blending spec. The new draft will introduce a new CSS property: blend-mode

Supported values for blend-mode:
- normal
- plus
- multiply
- screen
- overlay
- darken
- lighten
- color-dodge
- color-burn
- hard-light
- soft-light
- difference
- exclusion
- hue
- saturation
- color
- luminosity
Bringing blending to the Web →
Compositing and Blending 1.0 Spec (Editor’s Draft) →
Facebook buys Instagram

Posted: April 9th, 2012, 8:37pm CEST by Bramus!

Tags: [edit]

The Zuck™:

I’m excited to share the news that we’ve agreed to acquire Instagram and that their talented team will be joining Facebook.

We’re committed to building and growing Instagram independently. Millions of people around the world love the Instagram app and the brand associated with it, and our goal is to help spread this app and brand to even more people.

Facebook to Buy Instagram For $1 Billion →
Facebook Buys Instagram For $1 Billion →

Wolf's Little Store

Cloud issues

Posted: April 9th, 2012, 12:04pm CEST by Wolf

Tags: [edit]

One of the fundamental parts of the internet is that once a piece of information is published, it should stay available at the same URI (URL). Tim Berners-Lee famously wrote about this in his article Cool URIs don’t change.
Bye bye Feedburner, it was nice knowing you
The promise of the Feedburner service (acquired by Google for a nice $100 million a few years ago) is that your feed stays at a permanent URL so if you change websites you still have the same subscriber base. Let’s say I change my company name from Wolf’s Little Store to Company X, then I could direct all the (old) feed traffic to Company X, and thus not lose any of my subscribers.

Apparently the Feedburner service has not been working that well lately. The help forums are full of unanswered messages. My feed has been lagging behind for months. The current Feedburner page displays a blog post that is 2 weeks old.

I’ve believed in this service for years and have recommended it to a great deal of people, but it’s time to say goodbye. As of now the RSS feed is available wolfslittlestore.be/journal/feed. For the people who got rid of RSS already there is the Twitter feed. The most important posts will be linked via my own Twitter account.
How to keep your data?
Keeping your data is an interesting discussion. Jason Scott has written about this 3 years ago in an article I could heartily recommend to everyone.

Tantek Çelik syncs everything back to his own domain including his tweets. This is a bit hardcore, not to mention hard to do, but it does seem like the best solution to keep your data.

The Delicious “sunset” made a lot of people move to Pinboard. Pinboard creator Maciej Ceglowski talks about the business of bookmarking in this PDF.

There is a growing group of geeks who are of the opinion that if you don’t pay for a service you are the product being sold. Specific services (e.g. Twitter) take up a big part of our lives, but they might as well be gone tomorrow since they don’t have a business model. Last year at Build Conference, Jeremy Keith presented about this subject.

Every day we entrust services with our data that should essentially stay our own. A few weeks ago Flickr basically held my data hostage if I didn’t pay up: there was no way to export my data without renewing my account. Flickr [as a community] has been dead for a while now so I didn’t feel like paying again, but I had no other choice.

There is a perversity somewhere in here, if you’re building a product, investing time in data export options does not pay financially; it just gives users an easier way to exit the service. If you don’t have data export options, you’re more likely to keep lock in your customers. It’s not the right thing to do, but not everyone has the same business ethics.
If this then that

Posted: April 9th, 2012, 11:16am CEST by Wolf

Tags: [edit]

I’ve experimented a bit with ifttt (“If this then that”). Basically this web service allows you to create recipes that follow a “if this then that” logic.

For example, I created a task to automatically add photos to my new 365 photo project tumblr whenever I export a photo to a certain Dropbox folder.

The other task I made was to let @wolfsls automatically tweet whenever there is a new journal entry here.

I’ve been obsessed with automation lately, trying to eliminate all parts of my workflow that are repetitive in order to focus on the actual work. Automator has been a large help. Layer Cake came out a few days ago, removing another tedious task from my workflow. I wonder what else I can automate.
Tych Panel 2

Posted: April 8th, 2012, 9:41am CEST by Wolf

Tags: [edit]

Tych Panel 2 + Vintage Film Effect + some shots from the last time I went to the U.S. = above image.

Bram.us

Wind Map

Posted: April 5th, 2012, 8:58pm CEST by Bramus!

Tags: [edit]

An invisible, ancient source of energy surrounds us—energy that powered the first explorations of the world, and that may be a key to the future.

This map shows you the delicate tracery of wind flowing over the US.

Wind Map →
Project Glass

Posted: April 5th, 2012, 4:46pm CEST by Bramus!

Tags: [edit]

We think technology should work for you—to be there when you need it and get out of your way when you don’t.

A group of us from Google[x] started Project Glass to build this kind of technology, one that helps you explore and share your world, putting you back in the moment. We’re sharing this information now because we want to start a conversation and learn from your valuable input. So we took a few design photos to show what this technology could look like and created a video to demonstrate what it might enable you to do.

Project Glass →

Wolf's Little Store

Layer Cake FTW

Posted: April 5th, 2012, 11:19am CEST by Wolf

Tags: [edit]

I just tested Layer Cake, a new app by MacRabbit (creator(s) of Espresso and CSSEdit). It’s an app to quickly export images from Photoshop files. Here’s how it works:

1. Name your layer groups e.g. likeaboss.jpg:

2. Save your PSD.

3. Drag it to Layer Cake:

4. Layer cake starts extracting…

5. Boom!

Automation FTW. Well worth the $20. Buy it here.

Renoveren & Restaureren

Trap achterbouw

Posted: April 4th, 2012, 6:42pm CEST by Dirk Sabbe

Tags: [edit]

De trap aan onze achterbouw is ondertussen ook geïnstalleerd. Hiep hoi! Om binnen in het atelier zoveel mogelijk ruimte vrij te houden hebben we de trap om naar de eerste verdieping te gaan buiten geplaatst. Dat spaart toch al gauw een paar vierkante meter kostbare ruimte binnen uit. We hebben een aantal grappenmakers, excuseer, trappenmakers, vergeleken en zijn uiteindelijk in zee gegaan met

Bram.us

SVG stacks

Posted: April 4th, 2012, 2:58pm CEST by Bramus!

Tags: [edit]

First we give each of our icons in the SVG file a unique ID and the same class name, add some CSS to hide all icons and only display the one that gets selected with :target. And now we can use a hash in the URL to pass the ID into the SVG file, like background: url(icon.svg#ID).

Genius. Already works in Firefox.

SVG Stacks →
Girls going wild in red light district

Posted: April 4th, 2012, 2:46pm CEST by Bramus!

Tags: [edit]

So you think you will dance? Awareness campaign for Stop The Traffik.

Watch until the end.

Stop The Traffik →
Paperfold CSS

Posted: April 2nd, 2012, 12:37pm CEST by Bramus!

Tags: [edit]

I’m currently working ‘buddycloud’, a federated social network. This is a proposal for a visual folding-effect for hidden comments.

The plugin takes a dom element, slices it into parts and arranges them like a folded paper in 3d space.

Paperfold CSS — Fold divs like paper →
Hammer.js

Posted: April 2nd, 2012, 11:40am CEST by Bramus!

Tags: [edit]

A javascript library for multi-touch gestures

Comes as a standalone or jQuery flavored.

Hammer.js →
BrowserQuest

Posted: March 29th, 2012, 12:00pm CEST by Bramus!

Tags: [edit]

BrowserQuest is a tribute to classic video-games with a multiplayer twist. You play as a young warrior driven by the thrill of adventure. No princess to save here, just a dangerous world filled with treasures to discover. And it’s all done in glorious HTML5 and JavaScript.

BrowserQuest →
Background Info →
BrowserQuest Source (GitHub) →

Wolf's Little Store

BBC device stack

Posted: March 28th, 2012, 9:21am CEST by Wolf

Tags: [edit]

“We launched our new site today, and this is how it looks on all of the devices we test on. [m.bbc.co.uk] #rwd”

Crazy! (via)
iOS design resources

Posted: March 28th, 2012, 8:20am CEST by Wolf

Tags: [edit]
Somebody on Twitter suggested that I make a list of all the resources mentioned in the presentation I posted yesterday. Great idea! Here goes:
Handy PSDs/AIs/PDFs/Omnigraffle stencils
- ZURB iPad stencils (free)
- ZURB iPhone stencils (free)
- iPhone Vector UI Elements (free)
- Touch gesture reference guide (free)
- Teehan + Lax iPhone 4 GUI PSD (free)
- Teehan + Lax iPad sketch elements
- Teehan + Lax iPhone sketch elements (free)
- App icon template by PixelResort (free)
- List view PSD on Dribbble
- Mikael Eidenberg iPhone template (“3D”)
Case studies
- The making of Spice Invaders
- Repeat timer pro case study
Software that could come in handy
- Skala preview (paid)
- Mou app (free)
- OmniGraffle (paid)
- (Adobe CS, obviously)
General info on designing for iOS and being productive doing that
- The #1 thing every iOS designer should have read: Apple iOS HIG
- Almost everything on the Bjango blog
- Wolf’s Little Store – Journal – Automator (continued)
- Wolf’s Little Store – Journal – Designing for iOS
- Wolf’s Little Store – Journal – Exporting image files for iOS from Photoshop
- Design then Code (paid)
My previous presentations
- Design for Developers
- Designing better user interfaces

Bram.us

Android or Condom?

Posted: March 27th, 2012, 5:23pm CEST by Bramus!

Tags: [edit]

Here’s a simple rule: if your product isn’t a condom then don’t name it like one.

What’s in a Name? →

(via ★)

Wolf's Little Store

iOS design: a case study

Posted: March 27th, 2012, 2:20pm CEST by Wolf

Tags: [edit]

Yesterday I gave a presentation on iOS design for the Belgian chapter of Cocoaheads. Over 50 people attended making it the biggest Cocoaheads meetup in Belgium so far. For the best experience, download the file and view it fullscreen. Alternatively, view the slides on SlideShare.

(Edit: the slides reached over 110K people. Cool!)

← Familie NetlashStagiairs →

Bart De Waele » NetlashCollegas

Feeds

NetlashCollegas (100 unread)

Posted: May 22nd, 2012, 10:32pm CEST by dextro

Tags: [edit]

Posted: May 22nd, 2012, 10:31pm CEST by dextro

Tags: [edit]

Posted: May 20th, 2012, 3:52pm CEST by Bramus!

Tags: [edit]

Posted: May 20th, 2012, 3:47pm CEST by Bramus!

Tags: [edit]

Posted: May 20th, 2012, 3:13pm CEST by Bramus!

Tags: [edit]

Posted: May 16th, 2012, 4:33pm CEST by Bramus!

Tags: [edit]

Posted: May 16th, 2012, 10:02am CEST by Bramus!

Tags: [edit]

Posted: May 15th, 2012, 11:21pm CEST by Bramus!

Tags: [edit]

Posted: May 15th, 2012, 1:40pm CEST by Bramus!

Tags: [edit]

Posted: May 12th, 2012, 11:17am CEST by Bramus!

Tags: [edit]

Posted: May 9th, 2012, 3:36pm CEST by Bramus!

Tags: [edit]

Posted: May 9th, 2012, 3:32pm CEST by Bramus!

Tags: [edit]

Posted: May 9th, 2012, 10:40am CEST by Bramus!

Tags: [edit]

Posted: May 9th, 2012, 10:25am CEST by Bramus!

Tags: [edit]

Posted: May 8th, 2012, 12:59pm CEST by Bramus!

Tags: [edit]

Posted: May 8th, 2012, 11:16am CEST by Bramus!

Tags: [edit]

Posted: May 8th, 2012, 10:54am CEST by Bramus!

Tags: [edit]

Posted: May 8th, 2012, 10:52am CEST by Bramus!

Tags: [edit]

Posted: May 8th, 2012, 10:31am CEST by Bramus!

Tags: [edit]

Posted: May 7th, 2012, 11:33pm CEST by Bramus!

Tags: [edit]

Posted: May 7th, 2012, 9:02pm CEST by Bramus!

Tags: [edit]

Posted: May 7th, 2012, 3:04pm CEST by Bramus!

Tags: [edit]

Posted: May 7th, 2012, 12:35pm CEST by Wolf

Tags: [edit]

Posted: May 7th, 2012, 11:52am CEST by Wolf

Tags: [edit]

Posted: May 7th, 2012, 10:52am CEST by Bramus!

Tags: [edit]

Posted: May 6th, 2012, 9:39pm CEST by Bramus!

Tags: [edit]

Posted: May 6th, 2012, 9:31pm CEST by Bramus!

Tags: [edit]

Posted: May 6th, 2012, 8:46pm CEST by Bramus!

Tags: [edit]

Posted: May 6th, 2012, 5:33pm CEST by Bramus!

Tags: [edit]

Posted: May 6th, 2012, 5:21pm CEST by Bramus!

Tags: [edit]

Posted: May 6th, 2012, 5:16pm CEST by Bramus!

Tags: [edit]

Posted: May 6th, 2012, 4:30pm CEST by Bramus!

Tags: [edit]

Posted: May 6th, 2012, 3:32pm CEST by Bramus!

Tags: [edit]

Posted: May 6th, 2012, 3:14pm CEST by Bramus!

Tags: [edit]

Posted: May 6th, 2012, 3:11pm CEST by Bramus!

Tags: [edit]

Posted: May 6th, 2012, 1:30am CEST by Bramus!

Tags: [edit]

Posted: May 4th, 2012, 10:19pm CEST by Wolf

Tags: [edit]

Posted: May 4th, 2012, 11:30am CEST by Wolf

Tags: [edit]

Posted: May 3rd, 2012, 9:46pm CEST by dextro