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! ^^

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.

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!

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.

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?

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 : )

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!