It’s a time where one should take the time ( if not the whole year ) to go out and meet all your friends and family all over again. Talk about nothing, talk about future plans, exciting new relationships, adventures or problems. Talk about music, life, food, performances. Tell each other really bad jokes, and laugh with them just before you go to sleep. Learn to cook, learn to shoot with bow and arrow, learn to learn. Do something really, really stupid. Travel, see the world, see the people living on this world. Go out and have fun. Have fun in what you do, every day, with people you can talk with, about life, about the summertime…

On a more professional note: we are working / finishing a lot of different projects, which will be released over the next couple of months. Expect update soon, you must.

summerlove, henry

learn more about wabi-sabi

The opening talk was by one of the Github founders, Chris Wanstrath. He is the living evidence that developers can be rockstars. The tattooed, long haired geek explained how Github handles the awesomeness behind the scenes and the collaboration with Rails. A lot of plugin and Rubygem names past the revenue. It was a great talk, well brought, excellent vibe and if you don’t have a Github account yet, now’s the time to get one goddammit!

Next was José Valim, who gave us an excellent overview of the plugins and gems he uses to make his life a lot easier (or as José calls it: the plataforma way). Some names that caught my attention were Devise, Simple Form, Responders &Capybara (apparently the biggest rat in the world, even bigger than Webrat ^^).

The talks about document oriented databases by the guys from MongoDB & CouchDB were also mentionable. Mike Dirolf from MongoDB did an excellent explanation on what NoSql databases is all about. Although it’s hard to make the switch in the head, but with document oriented databases, we can let go difficult joins or other complex transactions. Jonathan Weiss quoted that this kind of databases are written for the web. JSON will be your main guide to transfer data around, and that is just music in the ears of a lot of developers! Although these technologies are relatively new, you don’t see it that often in production, but they’re definitely something to keep an eye on and sure worth playing around with!

Yehuda Katz was the man behind the mobile Rails apps topic. He talked about the pro and cons of current mobile devices and our possibilities as developers. The biggest concern most developers have is that the mobile story is going to be a struggle, a lot of browsers, a lot of differences on CSS & javascript support. Katz reassured that we’re not heading forward to another IE6 equivalent, because the mobile browsers are moving way faster than there computer variants. Mobile applications are also a big reason for everyone to pick up HTML 5 as soon as possible. A lot of problems can be solved easily and almost every browser is able to use the most of this technology or can deal with it and degrade it gracefully.

Carl Lerche brought us a roundup of what things we can expect from Rails 3. While he knew, he would be talking to a Rails loving audience, his talk scraped the surface and I think a lot of people were expecting some more underground insights. Also, they didn’t mentioned a release date, but we can’t blame these guys, if you see what Rails 3 is going to bring us, it will be worth waiting!

And the last talk, was by Jarkko Laine and was actually a great speech about perfectionism. We all know the problem that we start working an a great idea, but somewhere at the near end, we just can’t get it ready to launch. Jarkko’s advice: drop the details, and ship it! The only way your application can evolve is letting people use it, listen to feedback, and feed it on the road. It was nice to see, that everyone in the room was nodding along, and by the end of this talk, you really had the feeling of just releasing some beta projects of your own.

Overall a great meet up with like minded people from all over the world in a beautiful city.

We’ll definitely be at the next edition!

What does “Remote Error Reporting” even mean? Let’s say you have new application ready to be deployed on your client’s server. Everything runs great on your own server, but once it’s copied to the production server, things start to go wrong. Maybe it’s just an image folder without the right permissions, a wrong version of a beloved Gem, or a file that got misplaced. You ask your wonderful client for access to the error logs but they go “Ehrmmmm, error what?”. This is were Failtale can be one hell of a tool.

Wouldn’t it be great if you could insert a little code snippet in your code that reports errors to you? Without having access to logs, ssh accounts and what not.

How does this all work? All you need to do is:

1. Sign up to get an API key for your application. An API key is nothing more than a long, random string that identifies your application. Failtale needs this key in order to be able to log errors to the relevant application.
2. Download one of the libraries and integrate it with your project
   ( please write your own if you can’t find one for your language )

   With Actionscript, it looks like this:

   // create your own API key on www.failtale.be
   public static const FAILTALE_API_KEY : String = "your-api-key-goes-here";
   public static const FAILTALE_GATEWAY : String = "http://failtale.be";
   private var failtale : Failtale;
    
   private function initFailtale () : void
   {
     failtale = Failtale.getInstance();
     failtale.init( FAILTALE_GATEWAY, FAILTALE_API_KEY );
   }
    
   // what follows is a poor example probably
   // you shouldn't track every single error or become a lazy coder
   private function triggerError ( e : Event ) : void
   {
     // try to remove a dummy instance from the displaylist
     try
     {
       removeChild( dummy );
     }
     catch( error : Error )
     {
       // removing dummy failed ( e.g. it was not added to the displaylist )
       // let Failtale know about it
       var fm : FailtaleModel = new FailtaleModel();
       fm.comment = commentInput.text;
       fm.error = error;
       fm.arguments = arguments;
       failtale.log( fm );
     }
   }

   This example will generate a simple error report. Following screenshot shows 1 of 3 screens you can use when debugging your application.

   

3. Check your Failtale account the next time your client calls you about this exotic bug and you’ll find a nicely formatted error report right in front of your nose. No SSH sessions, no remote logins required. All done with a library, a code snippet and a Failtale account.

We’ve allready written ( and released ) 2 libraries ( Ruby and AS3 ) and a third one ( Javascript ) to integrate with one of your projects, is on it’s way. We sure could use one for Perl, Python, PHP, …

We appreciate any kind of feedback, code contributions, suggestions, anger, love, …

the beginning

It was a great place, and boy, if those walls could speak! Birthday parties, barbecue in the summertime, late-night-coding-sessions, … and of course some kick-ass working! ^^

Our wolfpack started with 2 lone wolfs, around 2006. We were looking for some interesting wolves to add to our pack. We found them and our little love-nest got too small after a while. So on the 1st of March 2010, we officially moved from our trusty beacon in the south of Antwerp, to a really nice place, located more in the heart of Antwerp. Here are some images of us packing up our stuff.

the move

The new place is still getting the final works done by us, so here are some random impressions and some feet on our new floor ( we simply LOVE our floor, it’s the best!! ).

the party

Moving means celebrating! So we did, you can check those pictures out on our flickr-page. We made a nice little slow-motion booth to boot! It was great fun, and we also made a quick edit. Hope you spot yourself!

the invitation

for the party, we also made an invitation, how else are you going to let people know? So yeah, here it is, there are some folding-it-open pictures on flickr, and also a making-of… We had a lot of fun folding every little confetti-bomb ^^

the conclusion

To end this post, we just want to say that we are really happy in the new office! Mr. Henry hopes to see you soon, for work or coffee! ^^

There is NO denying that these gentlemen have earned eternal stardom with their actions ( or was it their … ‘STACHES? ) We humbly tried to step inside those big shoes of our ancestors, men, manly men. We do this every year, it’s called SNORRENDAG, “moustache-day” in English. This will be our 3^th time of doing this annual event!

NOTE: some of our dear people at the office couldn’t make it today, kind of a big snow-disaster today in belgium ( traffic jams over 900km!! )

AgatonSax wrote…
“looking for a wordpress plugin that allows the site’s authors to post messages to each other in the admin panel…”

That sounds interesting! We had never heard about something like that but after some quick research,we found a plugin that did the job. But it was not on the dashboard, and with an overall bad user experience. So after discussing it in the office, we decided to make better one from scratch.

Why?

Reason one: when you are capable of helping someone, you definitely should.

Reason two: the dashboard is a good place to leave personal messages on. It would be great to be able to send a message to a client saying something like “We just made the upgrade to the latest version of WordPress”, or maybe something more cute like “we love you”.

What?

It ended up as a quite simple dashboard widget with a lot of focus on the visual feedback. When thinking about how to handle long conversations we decided for a few things:

• Don’t send a query to the database and ask for all messages at one time. It could get heavy.
• The user should be able to decide how big the widget should be. There might be other widgets that are important as well.
• A tiwtter-like appending at the bottom of the page is nice for loading older messages.
• The visual feedback when loading older messages should be as good as swimming in the city of Stockholm a warm summer day.

When combining the twitter-like appending with some animated scrolling and resizing with the use of  jQuery (now shipped as version 1.4), we cover the whole list above.

This is version 1.0 and expect more to come. Feel free to use it and abuse it. And remember: jQuery is your friend. In the re-tweet is a link to the WordPress plugin directory which also serves as a svn repository (thanks again WordPress).

wearemrhenry wrote…
@AgatonSax http://wordpress.org/extend/plugins/dachat #tadaah

Please visit lowimpactgirl.be to know what we’re talking about ^^

What do you do for a (six)teener who wants a website that reflects her inner-self, and could last 2 years? Yup, you draw some pretty figures, use a lot of soft, girly colors, and place them all on one page. The site actually has a countup! Instead of a countdown! Her project ends on the 30th of june, 2011. During this period, she will embrace different “zones”, ( fashion, travel, … ). The first zone is fashion, watch her work her magic.

Each post has a day numbered. When the project is completed, a lot of this content will appear in a book, and by using the days as a marker, it’s double easy for her to write that novel!

Like the modern, social person that she is, you can follow her, stalk her and talk to her! The logo-stamp was created by Jurgen Maelfeyt, everything else by us.

a wee-bit technical

At Mr. Henry, we love to work with the WordPress platform. So much actually, that we’ve made our own custom element within the existing system. It’s not thàt mindblowing, but it’s easier and more fun for us to work with.

It’s just something we’ve been working on, and in the future, you can expect a separate post about this. “It really kicks the llama’s ass!”

And oh yes, THANK YOU ASTRID FOR THE SITE-LAUNCH-PIE!! UH-UH-HMMMMMMM

Thanks for your attention!

We are working on a website ( NDA ) that needs (!) a 3D caroussel. To make things a little exciting for ourselves, we added depth of field ( DOF ). This post will explain the basic steps involved in getting the maths work for that purpose.

Below you can see a screenshot of the demo application we developed to research the problem in 2D. The solution will also work in a 3D world, for example: in our Papervision3D caroussel. In the resulting caroussel we’ll be able to use the calculated distance to blur a given DisplayObject3D, relative to it’s distance to the camera and thus get depth of field.

As you can see there are dots, lots of ‘em, layed out on a circle. The circle has it’s own axis. The dots remain on their fixed position within the circle. What does change however, is the rotation of the circle relative to the observer ( the gray disk, which you can drag around ). This poses a problem for us. The distance of the orange dots are constantly changing.

We can use very simple maths to solve the problem. With cosinus and sinus.

// PSEUDO CODE - this code is meant to illustrate
// the thoughts behind the calculation
 
// distance on the horizontal axis between dot and observer
var dx : Number;
// distance on the vertical axis between dot and observer 
var dy : Number; 
// rotation of the dot on the circle relative to the observer
var da : Number; 
 
// we know the angle of the dot in the circle: ( 2 * PI ) / numberOfDots
// 2 * PI = 360 degrees expressed in radians
da = angleOfDotOnTheCircle + rotationOfCircle;
 
// use the given angle to calculate dx and dy
 
// cos will be between -1 and 1, multiply with the radius of the circle and you have dx
dx = Math.cos( da ) * radius; 
 // sin will be between -1 and 1, multiply with the radius of the circle and you have dy
dy = Math.sin( da ) * radius;
 
// now that dx and dy are set we can get the distance ( between dot and observer ) as follows
var totalX : Number = circle.x + dx - observer.x;
var totalY : Number = circle.y + dy - observer.y;
// calculate the distance between dot and observer with this formula
var dist : Number = Math.sqrt( totalX*totalX + totalY*totalY );

Maybe the following image can help to figure the pseudo code out yourself.

Be careful: the rotation of the circle is expressed in degrees, but the Math methods ( cos and sin ) use radians. To convert degrees to radians use:

radians = degrees * 180 / PI;

Try out the demo app for yourself – it’s ‘view-source‘ enabled. Right click to check it.

Please leave your questions in the comments. We really want you to get it before we move on to a next post featuring the 3D demo application with ( read the following words with your best death metal voice ) Depth Of Field.

When you look at the page structure of a Wordpress installation, it’s nice to know which is the top parent page. For example, you want to decorate every page and all it’s children with a different background.

There’s are several classes present on subsubpages:

• page-id-3
• page-parent
• page-child
• parent-pageid-2

The function

But when we look at the subsubpages, the parent page ID is that of it’s nearest parent and not the ID of it’s top level parent.

You can easily extend the body_class function with this ID by adding following function in the functions.php of your current theme:

add_filter('body_class','top_level_parent_id_body_class');
function top_level_parent_id_body_class($classes) {
	global $wpdb, $post;
	if (is_page()) {
	    if ($post->post_parent)	{
        	$parent  = end(get_post_ancestors($current_page_id));
        } else {
        	$parent = $post->ID;
        }
        $classes[] = 'top-level-parent-pageid-' . $parent;
	}
	return $classes;
}

Don’t forget to include the body_class function, if it’s not present already.

And when you check the subsubpages again, you’ll find a class like top-level-parent-pageid-1

But, wait…

Now, there’s a little bug in the 2.8.4 version (and versions below). When using the get_post_ancestors function, sometimes you will get an empty array. To fix this, you will have to pop up the hood and look into wp-includes/post.php and add the code you’ll find here.

Credits

Thanks to Alen Grakalic for a snippet of code that makes this work.

More specifically if you’re working as a developer for the Flash Platform. We’re not looking for apprentices here. We’re looking for that one person that’s really on fire. Is at ease with frameworks, throws in some vertex’s when we’re not looking and who’s handled a deadline or two.

It’s absolutely necessary that you have an eye for high quality work. For yourself and the team you work with on a day to day base.

Your profile should cover: Flash, Flex, Air, AS3, able to work in a team, able to work on your own, eager to learn, eager to fail, English, basic understanding of databases and related techniques, …
And please: do include your online portfolio while your at it, with working examples of your magnificent work!

No agencies, headhunters, other-timezone-related-teams pls.

( first seen on our Twitter account )

Wherever you are Elevators ( we like to call them like this ), we hope you enjoy them!!

And for those blasphemists out there, here are the 7 works…

1. Feed the hungry
2. Give drink to the thirsty
3. Clothe the naked
4. Shelter the homeless
5. Visit the sick
6. Visit the imprisoned
7. Bury the dead

Lots of love, jesus euh Mr. Henry

Thanks to everyone for dropping by, the couches were just enough to seat everyone. A special thanks to Klaas, Bartek (Poland) and Eugene (Russia) for lighting up the room with their vibrant words and visuals. We’ve uploaded some visuals, both static and moving!

Thanks to Tom van Sand for filming and editing the video, and thanks to Otman Fathi for taking some pictures while everybody was enjoying the show! Also, respect to our 2 swedish friends who joined us, Fred & Kristoffer you crazy Swedes!

All your media ( flickr / vimeo ) are belong to us! ( all the presentations are currently being uploaded to youtube Vimeo, so you can watch every session over and over again )

We hope to be able to do this some more, for the love of it! If you liked what you saw, and want to help us with sponsoring or donating your sexy body to us, please STAY IN TOUCH! ^^

Check out some Flickr

clickr for the flickr

Check out some Vimeo

video + editing by tom van sand

MONTAGE

SESSION KLAAS

SESSION BARTEK

SESSION BRAM

SESSION EUGENE

Thanks very much again to everyone for coming, and we hope to see you again pretty soon!

b-y-e

We have 4 European speakers. Topics include: Papervision ( Bartekd! ), image processing ( Eugene of Inspirit! ), a live vj workflow explained ( Klaas Verpoest ) and we‘ll give a little talk about Flex Development.

Besides these amazing speakers from Poland and Rrrrussia, we also have a truely, unique location: “Felix Pakhuis” ( browse the image gallery for pics ). It’s located in an old warehouse, next to the water ( and yachts ). ^^

You can visit the Meetup page and register ( it’s free! ) or just keep an eye on our blog-e-di-blog. We would really appreciate you registrating at the Meetup page so we can prepare ourselves for things to come. And besides: the registration pages of Meetup are really slick!

We’ll be talking about "Restfulx: Flex, Rails and Coffeebreaks". In 180 seconds. John doesn’t call us “Three Minute Wonders” for nothing.

Missing out on FOTB is a big mistake if you’re even remotely interested in Rich Internet Applications, digital art and / or looking for inspiration. Brighton, where it all takes place, is a city full of cosy restaurants, a lively vegetarian scene and loads of good music.

See you soon!

We are developing an Adobe Air tool that installs on a regular desktop. Using SQLite for storage and a webcam for the snapshots and live preview ( but might upgrade to a high end camera in the end ).

Lots of fun! And we do feel a bit privileged working with a great client like Heinz.

Through the hand of time, we’ve created something alike, because there isn’t something like “the perfect starting files”. And after all, everyone has other needs and preferences. You can easily make one yourself too! Let’s take a closer look at our starting files.

We have a Github repository where you can download or fork our files:
http://github.com/mrhenry/head-start/tree/master

The tree

First of all, notice the tree structure. This is just a basic setup, but it contains essential folders for most websites. An other advantage is that you create a name spacing that you can use into all your projects.

• favicon.ico
• index.html
• crossdomain.xml
• flash
  • expressInstall.swf
• images
  • backgrounds
  • buttons
  • general
  • icons
  • titles
• javascripts
  • application.js
  • cufon-min.js
  • DD_belatedPNG.0.0.7a-min.js
• stylesheets
  • general.css
  • ie.css
  • print.css
  • reset.css
  • typography.css

Ok, now you know what our tools are, let’s dive into our index.html. And we start at line 1!

Doctype

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

This is where it all starts, and all can go wrong. It’s really important that you choose the right doctype for the job. We prefer to work with HTML 4.01 or XHTML 1.0. Always choose for the strict version because we write clean code and don’t use presentation tags. There’s a lot of fuzz about this so if you’re a selfrespecting front-end developer, you should read about this! Oh, and don’t leave it out if something goes wrong with your layout, it’s probably your code, not the doctype *grin*.

Meta tags

In our head section of our document we start with some very important meta tags. They still are very important for search engines and their crawl bots, but also for your visitor’s browser. You can easily give a lot of information about your page in machine language.

The first one declares that we the character encoding is Unicode.

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

This second one removes the image actions of Internet Explorer when you hover over images. Personally we don’t like this behavior, so it’s kind of personal wether you put this one in or not.

<meta http-equiv="imagetoolbar" content="no">

And these are important for our search engine friends. They’re easily forgotten but can make a huge difference! We picked out the most relevant ones for us. And yes, again, you can flavour this at own taste!

<meta name="distribution" content="Global">
<meta name="robots" content="INDEX,FOLLOW">
<meta name="revisit-after" content="31 Days">
<meta name="email" content="hello@mrhenry.be">
<meta name="author" content="Mr. Henry">
<meta name="publisher" content="Mr. Henry">
<meta name="copyright" content="copyright 2009 Mr. Henry">
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="rating" content="">
<meta name="expires" content="never">

Favicons

These tiny little icons are a simple but effecient signature of your site. By adding the following line, you can make your own cool icon in .gif or .png format, and not the hard-to-make .ico. Maybe you can try an animated one!

<link rel="shortcut icon" href="/favicon.gif">

Title

Your page title is a very important key to search results. It’s a good practice that you keep your H1 and the first part of your title the same. Preserve the second part of your title, behind a seperator, for your site’s name.

<title>Starting HTML template | Site name</title>

Including the stylesheets

Now we’re going to link our stylesheets. As you saw in our tree structure, we use a couple of CSS files. It’s a best practice to divide your CSS files in proper sections. First we load a reset.css file, because we want to look good in every browser *shine*. Afterwards we pick up the general.css and typography.css files. And last but not least we link the print.css and a special dish for our good friend Internet Explorer (no sarcasm). Those strange tags around ie.css are hiding it from all other browsers. They’re called conditional comments and are only recogniced by Mr. IE. If you need to write hacks, it’s better not to but sometimes there’s no other way, write them for IE, in these files. So the rest of your css stays clean and valid.

<link href="stylesheets/reset.css" rel="stylesheet" type="text/css" media="screen, projection">
<link href="stylesheets/general.css" rel="stylesheet" type="text/css" media="screen, projection">
<link href="stylesheets/typography.css" rel="stylesheet" type="text/css" media="screen, projection">
<link href="stylesheets/print.css" rel="stylesheet" type="text/css" media="print">
<!--[if IE]><link rel="stylesheet" href="stylesheets/ie.css" type="text/css" media="screen, projection"><![endif]-->

Including the javascript

In modern webdevelopment, we all use javascript to let the user experience sparkle. Forget about the 90’s and the sloppy pop-up and -under scripts! Nowadays we have great frameworks at our side and they’ve taken the development speed to the next level. It’s fun to write and you can do really crazy things with them. Oh and they take care of all the browser differences too! My god, where have they been all these years! Enough blessings. Let’s move on!

Our favorite javascript library is jQuery. It’s easy to learn, fast to develop and has a huge active community. If you look at the way we load our library, you can see that we use the google.load() function. Since a couple months, this is a great way of including your favorite javascript libraries, because it’s on the Google servers and this method is used on a lot of big sites. Your visitors probably have these links already cached, which results in faster loading times! It’s a good idea to choose your version number of the library you want to load, just in case, you never know if an update can change your script’s behavior.

We use the same method to load SWFObject. You probably don’t need it in every project, but it’s handy in your head-start files.

<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
google.load("swfobject", "2");
</script>

After this hazzle dazzle, we include the application.js. In this file we write our home-made javascript, fueled with jQuery.

<script src="javascripts/application.js" type="text/javascript"></script>

Of course, we can’t leave the house without a decent PNG fix. We’ve tried tons of PNG fixes, and every one of them had it’s disadvantages. But then, one day, there was the DD_belatedPNG fix. And, as they describe it themselves, it’s the pure medicine for your IE6 PNG headache! It uses a total other approach than all the others, a better one, a more simple one. Instead of using Microsoft’s AlphaImageLoader, it uses VML, Microsoft’s baby for creating vector graphics. And miraculously, PNG images and their transparency show correctly in a VML fill element. Notice the conditional comments around, because we only want IE6 to read and execute these lines.

<!--[if IE 6]>
<script src="javascripts/DD_belatedPNG_0.0.7a-min.js" type="text/javascript"></script>
<script>
DD_belatedPNG.fix('*'); /* string argument can be any CSS selector */
</script>
<![endif]-->

We can close down the HTML head section and start working on our B.O.D.Y. There’s not much to say here because you probably want to start clean every project.

A quick look inside our stylesheets

When you look inside our CSS files, you will find some predefined styles, very limited, but these come in handy when it comes to rapid development. Then comes the question whether you like CSS frameworks or not. We personally like to do it from scratch when it comes to styling. But with the limited styles available from the beginning, yes, we’ve created our own little framework. There is absolutelly nothing wrong using a CSS framework, it just has to suit you. If you are more deleting than using styles of some framework, consider NOT using one, or simply create one at your needs.

Taming Microsoft’s internet navigator

And last but not least, a quick look into our special blended CSS file for Internet Explorer. Some people use different files for the different versions. We prefer one file with version hacks. It’s easier to keep an overview this way on what you allready hacked.

Below you will find the version hacks we use. They’re commented so everyone who uses the file can easily look up which neat hackedihack to use.

    .box {
       background: #00f; // all versions including Mac IE
       //background: #f00; // IE8 only
       *background: #f00; // IE 7 and below
       _background: #f60; // IE 6 and below
    }
    html>body .box { *background: #007; Only IE7 }

The very very last thing you can say about IE is that he renders images really ugly when you downscale the actual size. We’ve added the following line to our ie.css and IE is showing those scaled images of you as they where that size ‘fo real’!

img { -ms-interpolation-mode: bicubic; }

That’s it for our first head-start files. As usual: comments are open for you much appreciated feedback.

We’ve been getting cakes and cookies on such a regular bases, that we just needed to show our love! Just look at the little knight on his Speculaas Horse! Thanks for all the crunchy cookies and amazing cake Elien!

ps: her coconuts are great!! ( cakes that is )
pps: if anyone else wants to send us food, please do!!

This saturday it’s “World Blood Donor Day”. A great opportunity to become a blood donor. It takes one hour of your time: registration, a checklist, a little talk to a doctor and the donation itself. You’ll be rewarded with cookies and a softdrink to get you started again.

If you live in Belgium, go over to www.debloedgroep.be. If you’re an international this page might come in handy.

He’s from the Netherlands, and we taught him about andalouse, the best sauce out there! Anyway, we gave him his total weight in this nectar-of-gods, that’s a staggering 70kg’s!!! Thanks for a great time Gilles, and come back soon! 

Please contact him if you want to throw a barbecue or something! ( don’t let him tell you he doesn’t have “tha soose” ( yeah he talks like that, because he’s mad gangsta yo! ) )

After some soulsearching and tweets, we found Drobo, the world’s first storage robot ( as they say ). It has all the features we needed as a small company and it manages to look pretty slick to! At the moment we have a whopping 8TB running in Beyond Raid, formatted in ext3 and attached to our Ubuntu fileserver using iSCI.

What it means in plain english is: we can pull one drive out and replace it with a new drive when bigger drives hit the shops, or when one decides to fail ( like 3 out of 3 Lacie Ethernet disks did in the last three years at the office here ).

As we speak we are rsyncing everything.

We’re still looking for a name for our new pet! Any suggestions?

One thing though: if you are a Mac Ports user, you have to make sure you drop the “passenger_pane_config.rb.ports” file in the contents/resources folder of the Passenger Prefpane ( Library/PreferencePanes/PassengerPrefPane – right mouse click, “show package contents” ). And remove the .ports extension from the file to experience the love of a very handy pref pane!

1. Open up your System Preferences
2. In your Internet & Network settings, click on Sharing
3. Check File Sharing
4. Select the File Sharing Options
5. Check “Share files and folders using FTP
6. Check your user name
7. Now you can FTP to your current IP address with the user name and password of your computer

More info about our topic after the jump… ( clique-clique! )

view our slide + code page ( cool dev’s only! hehe )

RESTful^X

RESTful^X is a wonderful framework for Flex/Air which allows you to communicate with RESTful backends like Rails, CouchDB and many others. The framework is somewhat modeled after Rails as it uses ActiveRecord like model objects. It also separates the MVC layers very nicely.

From the backend’s perspective (we use Rails) you just send some (f)XML or JSON in response to the CRUD actions (including #index and #show) just like you would with any RESTful controller. Most of the time the standard controller scaffolds will do just fine.

Factoids

Let us take this opportunity to list some factoids about pirates and their traditions ( great fun! )

• the flag aboard a ship is called ‘Jolly Roger’. It comes in all kinds of different colors and figures, but the most famous one is ofcourse ( thank you Johnny Depp ) skull & bones, on a black background. That being very scary, sea merchants were happy if the flag wasn’t red, because that meant the pirates wouldn’t show any mercy… That’s also probably where the word ‘Jolly Roger’ came from. From the french ‘Jolie Rouge’ or ‘Pretty Red’… More
• the ship of a pirate could be about everything, the most important thing was that she ( yea, it’s a she ) would be able to move swiftly and precise, and attack quick. Now, they don’t just build a pirate-boat and pirates sure as hell won’t buy a boat. So in those days, the most common thing was to steal one. This could be anything that floats, they would add features. Think of pirates like the first tuning-people ( hold the spoilers, neon-light and spinners… hello cannons, extra sails etc… )

Post your pirate-facts below! ( and also anything about the actual arrrrcamp / restful x stuff : )

What we needed was: set the values after the HSlider fired the creationComplete event in a function, after the HSlider accepted these new values, the HSlider should start to fire a change event when a user interacts with the component and call a certain method. We did not want a change event when we set the initial minimum and maximum values.

After a small bughunt we found that our code fired the change event anyway – which we did not want … This happens because we are setting the props and the event listener in the same frame. Internally the component calls the inherited invalidateProperties method after the event listener is added, the event listener is added immediately, before the values are set. Talk about confusing theories.

This did not work for our situation:

    private function initDateRange () : void
    {
    	// set min and max dates for hslider component
    	with( dateRange )
    	{
	    	labels = [ dateFormat.format( new Date( dateRange.values[0] ) ),dateFormat.format( new Date( dateRange.values[1] ) ) ];
			minimum = dateAdd( 'date',-30,new Date() ).getTime();
			maximum = dateAdd( 'date',60,new Date() ).getTime();
			values = [new Date(),dateAdd( 'date',10,new Date() )];
    	}
    	// even though we are adding the listener after we have set the props
    	// it is still triggered by the code
    	dateRange.addEventListener( SliderEvent.CHANGE, filterCarts, false, 0, true );
    }

Our fix that does the trick:

    private function initDateRange () : void
    {
    	// set min and max dates for hslider component
    	with( dateRange )
    	{
	    	labels = [ dateFormat.format( new Date( dateRange.values[0] ) ),dateFormat.format( new Date( dateRange.values[1] ) ) ];
			minimum = dateAdd( 'date',-30,new Date() ).getTime();
			maximum = dateAdd( 'date',60,new Date() ).getTime();
			values = [new Date(),dateAdd( 'date',10,new Date() )];
    	}
       // wait one frame before adding the slider event change handler
    	callLater( addChangeHandler );
    }
 
    private function addChangeHandler () : void
    {
    	dateRange.addEventListener( SliderEvent.CHANGE, filterCarts, false, 0, true );
    }

Another mystery solved!

When you pass a PSD around, with different compositions ( eg home, calendar and a faq page ), it’s kind of hard for developers to know wich layers to switch on and off. Off course Adobe had allready foreseen this probleem and solved it with “layer comps”.

Go to window > layer comps and use the controlbar at the bottom to create and update your layer comps.

You can activate a comp by clicking on the relevant layer:

click on a comp layer to select the relevant composition

If you’re new to this feature, your fellow developers / designers will love you. Even more.

This is the feedback from OnePage Publishing on the georgette website:

We have been to the Georgette website recently and are very impressed with its creative and appealing design, in particular the lovely animation and navigation, with screens flying by, balloons and hearts that show the progress of loading, the scrollover taskbar below and of course, the presentation of the shoes, the option for a real-life view of the shoe on a real foot, and how they fall nicely into the shopping cart once you click Buy. The website is fun and aesthetically pleasing yet simple to use and intuitive, which is what we are looking for.

That’s like… a good review! ^^

At the initialization of our slide show, we take the image width, so we know how many pixels we have to slide. The bug was in our jQuery selector. jQuery returns an array, so the width() function returned null.

We changed:

imgWidth    = jQuery("img.slideshow, this").width();

into:

imgWidth    = jQuery("img.slideshow:first").width();

In our case, all the images have the same width, so it’s save to take only the width of the first element with the :first operator.

However, at the 500-kilometre-or-so height of the International Space Station, gravity is only about 15 per cent weaker then on Earth’s surface. The real reason astronauts are weightless is that they and their spacecraft are in free fall just as surely as someone in an elevator when the cable breaks. The difference is that they never hit the ground. Why? Because Earth is round and, as fast as they fall toward the surface, the surface curves away from them. They, therefore, fall forever in a circle.

Something you don’t see we did, is some analyzing ( pretty popular word these days hu? ) of the previous website. Making all their content easier to navigate is something we were eager to do. The collection of Cette is very, very extensive. Working closely together with brands like Olivier Strelli and Trinny & Sussanah, they are pretty good at what they do. The site is deployed in more then 50 countries! We ♥ Jean-Marc for his fantastic mind! Truly a great guy!

Visit the result online, make the click!

And oh yeah, our favourite piece is the “Shanghai” one…

Visit the 5-minute-one-pager now at www.posterliefde.be

We sincerely hope all the Belgians, Dutch, Australians, Americans, Portuguese and Danes enjoy their ink! ( If YOU are reading this, please take a picture of the paper on your wall and email it back to mother! )

Thank you!

Mr. Henry loves to share, so what follows is how we made this cover, from the ground up! ( after the proposal getting approved of course, out of 3 proposals… )

Step 1: photography

We did all the photography, knowing we wanted to build 3D letters on a wall, and used a dark backside to create some contrast… Initially, the inside was also going to be a mix between photo and 3D, but ended up as a 3D render because of the tight timeframe.

All pictures were taken in Brussels, Beursschouwburg ( on that one day in Belgium when ALL public transport was down, and the centre of Brussels was filled with people on strike.. Hello 3-hour drive-what-was-supposed-to-be-25-minutes )

Step 2: building the letters

We’ve built the entire letter composition in illustrator. Each “cube” of text is a separate file. We then composed a parent file, that had all the “cubes”, and we drew a box around each cube, making it look like every word is placed inside a box. The entire box needed to be a compound shape, because when we want to extrude everything ( that’s a 3D term yeah yeah ), you can’t have seperate objects, it looks like crap. So compound that shape, and make sure nothing overlaps!!! ( cfr. image 4 ). Pretty tiring process, a lot of trial and error…

Step 3: let’s go 3D!

When the letters are finished, we need to make everything “real”… Basically, one needs to find the perfect lighting and environment settings. And then it’s just pressing a button. But of course, we had some problems on the way. For one, the overlapping ( as you can see in the outline-view above ) is a scary sight! We then aligned the scene with the perspective in our final picture.

Step 4: comp everything together!

The final result! Throw everything into photoshop, and paint away… Sold exclusively on her concerts, not in stores ( too bad for all the fans! ) And oh yeah, here’s her myspace!

We will post upcoming secrets projects, funny factoids happening in the office and much more! Over the course of the coming years, we’ll share a laugh, shed some tears… but we will always bring it true! ^^

from left to right: inge, bram, simon, yves, gilles, hans, jesus and henry in the middle
from left to right: anastasya, egor, ivo, vadym , yaki, gnat, jesus and henry in the middle

Here some food for the technical people among us: we’ve used the super-duper WordPress as our basis, and then DID EVERYTHING OURSELVES CUSTOM yeah yeah!! ^^ Look around and use our fuzz-filter, follow us on twitter, subscribe to the newsletter, stalk us on flickr, go out and have some fun and spread the word!

We wish everybody a brilliant 2009!

Thank you for reading