Digital-Worlds.com

Extreme-Artwork.com, collection of inspiration

Fri, 22 May 2009 19:08:29 +0100

A friend of mine has opened up a new website extreme-artwork.com. Every day he posts a new website that has great looks, is a cool concept or has some other innovative property.

This is exactly the kind of website I love to take a peek on at a daily basis. It keeps you updated and it's a great source for new ideas every day.

One of the great things is that he simply built on Wordpress. He has created his own design but used the stable and easy to use back end of the Wordpress framework. It features a voting system and the ability to comment on posts.

So go have a look and see for yourself!

Design pattern collection on Flickr

Tue, 31 Mar 2009 12:25:40 +0100

Looking for inspiration? Read on..

To be honest, i'm not really a designer. I love to code but when I try to design stuff I get stuck a lot on simple things like "does this look better? or should I position it there...".

I got these links a collegue today and he told me that's the place he shops for inspiration. It's a collection of screenshots of various parts of websites like 404 pages, headers, editors, calendars, footers, login forms etc.

So if you're looking for inspiration try checking out these collections:

http://www.flickr.com/photos/factoryjoe/collections/72157600001823120/

http://www.flickr.com/photos/guspim/collections/72157600047307884/

Green Valley trip 2009

Sat, 28 Mar 2009 15:14:40 +0100

A bit late but i just added the photo's on Flickr.

It was a fun trip but dirty, we to drive Quads, Jeeps and Sandbuggies, VERY fun but also VERY muddy. I've added a Flickr Set for all photo's.

Way too happy..

Friends forever

Guess he didn't like me taking pictures...

Someone got bored...

Handy dandy online browsers

Fri, 27 Mar 2009 19:23:03 +0100

Always have the need to test something in another browser? Now you can quite easily! Go check out http://www.xenocode.com/browsers/

You can run all major browsers directly from the website without any installations!

Very handy if you ask me.

Bicubic image scaling for IE

Mon, 23 Mar 2009 15:11:37 +0100

This is just a short link post, it seems IE has a trick to fix the image scaling. Normally if you forced an image to be smaller IE would screw it up but thanks to this nifty CSS trick this can be fixed

It works by simply adding the following snippet to a (preferably by Conditonal Comments hidden IE only) stylesheet:

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

Check out this page for more info and links about this subject.

HTML5: Canvas

Sat, 21 Mar 2009 00:14:35 +0100

I just love the new developments with HTML5. It's a bit old news already but simply thinking of this hitting the web and actually being supported by all major browsers makes me drool.

I'm talking about the new canvas tag introduced for HTML5 and already working in Safari and Gecko based browsers. canvas is a new HTML element which can be used to draw graphics using scripting (usually JavaScript). It can for instance be used to draw graphs, make photo compositions or do simple (and not so simple) animations. (source)

It really has some imba features and it shoots the web forward with more interaction, dynamic graphs and even games!

So if you haven't heard about it yet, go check out this tutorial. It has some great examples and shows perfectly what canvas is capable of.

Woops maybe I should update this?

Fri, 20 Mar 2009 22:39:04 +0100

Well well well, what do we have here.. a blog! And i haven't written in it for allmost a year!

Work Work Work...

Problem is that I have been quite busy with work. As you saw in my last post I got a job at a new company called Green Valley and I have been a VERY busy man since. We mostly work for governments and similar institutions.

It's fun, but tough. It's a lot of cleanup work because alot of new big projects were accepted with the 'old' ones still hanging around. But I must admit it gives loads of experience in the workfield.

Vacation Portugal

So what else? Well I've had a lovely vacation to Portugal, you can check out the set of photo's I've added on Flickr here.

Web services

In between work and other stuffI've still been active on the web. I just updated my Flickr and I kept my LinkedIn up2date. I'm even tricked into using Hyves (mostly dutch) to keep in touch with old friends. Hyves is nice, but it's a terrible website...

Oh well that's about it. I could post some work I'm doing for a project called Tafeltjesvrij but I'll do that later.

Cya!

First day at Green Valley

Mon, 05 May 2008 22:58:20 +0100

Well I've had my first day at Green Valley today. A whole new company, lots of new faces, a new programming language, a new system, everything new! But it was great! There's a great atmosphere and I felt very welcome there.

I've learned a lot about the way they work and the way they develop a new kind of content management system. It works a lot with inline editing, much like some stuff I've developed myself. I'll post some more about my 'inventions' later.

All very overwelming and I'm tired as hell so I'm keeping this short for now :-)

Koninginnedag 2008

Thu, 01 May 2008 22:50:17 +0100

Koninginnedag or queensday in the Netherlands is the national party day. I went with my 2 friends Johan and Jeroen to Amsterdam. Very.. VERY busy place to be :-).

Here are some pictures:

You can see all photo's in the Flickr set.

How to fix a style problem

Tue, 29 Apr 2008 22:18:53 +0100

At my job I spent a lot of time fixing stylebugs made by myself or a collegue. But I've quit this job and moved on to another company. I actually wanted to leave something they could follow when they had one of those nasty IE6 bugs or just couldn't figure out why there was that weird open space between two elements.

I'm thinking out loud now I don't have a magic solution yet or some 5 step plan to follow and everything will be better. But I really think such a plan is possible.

What do I do when I encounter a problem? Well I know allmost all of them because I've spent days fixing them and trying to get to the source of the problems. PositionIsEverything.net (PIE) has helped me identify a lot of bugs or atleast helped me to give them a name. According to PIE
bugs can be categorized by browser which I think is pretty good however PIE then simply displays a large list of bugs.

Well? Got a better idea?

Actually no, like I said before I'm thinking out loud but lemme try something.

What kind of elements are there? Boxes or blocks and inline elements right? So we could seperate the list in 2 types of bugs block level and inline elements. The disadvantange of this approach is that sometimes it's unclear if the source of the problem is a block or inline element.

As I'm checking out the list of bugs on the explorer page of PIE I can't help noticing that 4 out of 18 of the bugs are fixed using a term called 'hasLayout' or 'Holly Hack'. They are fixed by giving some element a layout property making it behave as it 'should'.

So what are the characteristics of these 14 bugs that are fixed by Holly? As far I can tell it's Layout all the bugs that screw up boxes, make them float incorrectly or push them away with bad margins are usually fixed with the so called Holly Hack wich applies a 1% height to the element. A better fix is sometimes giving the element a zoom property of 1 so you don't have to use height.

So we've just put 77.7% of all IE bugs on 1 fix. If the first batch of bugs were caused by layout, the rest should be in the inline area right? Well not all, because the doubled float bug in IE6 is fixed using display: inline instead, making it behave like display: inline-block according to On having layout. So there's a layout bug not fixed by giving it height and the same goes for "Floats, Margins and IE" which is also fixed by a display: inline property but in my opinion describes the same bug as the doubled float bug but in more detail.

So the only bugs left are the "Missing First Letter Bug", which only lives in IE5.5, and the "Duplicate Characters Bug" of IE6. Well I don't care a rats ass about IE5.5 and when I bug occurs which needs to be fixed for IE5.5 a conditional stylesheet should fix it. The duplicate characters bug occurs only when there are comments between 2 floating boxes. I don't want to take the easy way out but people..... just remove the comments then will ya?

So it seems that all mentional IE bugs are fixed by giving it a layout. Saved you a trip to the big PIE list? But then the title of this post is "How to fix a style problem".

How do you fix a style problem then?

If you get a piece of code that cannot be changed because of deadline issues or simply can't be altered for any reason you should try fixing it using either the layout fix or changing the display.

If you can change the code try cleaning it up. Try using less floats or clearing up your CSS by removing stuff like line-height on all elements or margins on elements that don't really need them. Padding is a much more bug free way to create a spacing to if you can use padding.

Furthermore a lot of bugs are caused by too many elements wrapping eachother. And if that isn't really causing it, it is making the bug harder to track down because of all the code blurring your view.

How about other browsers?

Are you kidding me? So fare IE is the only browser that doesn't fix it's flaws. Other browsers such as FireFox and Opera fixed most bugs in the latest versions. And really, why care about people that keep ignoring the 'Update me!' messages? Old browsers can be safely kept in the past except for IE6 which is still used on (too) many machines.

I hope I've cleared some of the mess for you on searching for a solution. If not, good luck!

I found a bug!

Mon, 28 Apr 2008 12:52:08 +0100

Was cleaning up when I found this bugger on my window!

Good oppurtunity to test how manual focus works with my camera.

Why Prototype?

Tue, 22 Apr 2008 22:28:57 +0100

Couple of weeks ago a collegue asked me: "Why Prototype?".

The answer? I don't know. I can't say I've worked with every single Javascript framework there is and really I couldn't care less about framework X doing activity Y better than Prototype.

So? Why stick with it? Because I like the way it's documented and I like the way the developers of Prototype try to make code readable. Readabillity is crucial these days. Ever tried learning a new language? Well I'm recently hired as a developer at Green Valley, and so far I've only developed websites using PHP. Green Valley uses JSP which means I have to learn JSP to be able to actually keep the job more than one month.

I haven't done that much but I have been checking out some code samples on the web and I have to say that the average JSP developer likes to use varables with very VERY short names. Let's store our title in public string T; or maybe we should store the template name of a footer in a variable named 't_F'? Makes reading so much easier...... Yes that was sarcasm.

I'm sorry but when you have to read a script that tries to parse 't_B' which has to include 'tC' (no I didn't forget the _, it simply wasn't there) and also contains a list of 'SMitms', of which I think it means Submenu items you get lost quite easily.

That's why I like Prototype. It makes scripts readable! Which makes it easy to explain stuff to developers who haven't worked that much with Javascript. Especially the way you can chain several methods on a single element like this:

element.wrap('p').update('hide me!').down('p').hide();

This makes stuff readable and enables people to understand the language a lot faster than trying to hide as much code as you can by using ridiculously short variables or method names.

Ye, Ye, Ye, Mootools uses a lot of the same methods etc.. bla bla bla. I really couldn't care less because Mootools is EVERYTHING! It comes with effects (i know you can strip em out) and all sorts of other crap. I want a frameworks that supports MY code and I don't want to write code that supports some framework. If I want effects I'll use script.aculo.us which is something written on a framework instead of being a framework itself.

Enough yelling for now and if you will excuse me I have some JSP to decode.

Prototype: Invoking an Insert

Thu, 17 Apr 2008 18:48:22 +0100

Yesterday I was trying to insert serveral links in every fieldset of my form but it just wouldn't work!

I was trying to invoke() the insert() method on every fieldset and creating a new Element each time. The problem was that it did work but after the first element was inserted in the first fieldset, the element was then moved to the next instead of a new element being created.

Not knowing what was causing this I posted a question in the Ruby on Rails: Spinoffs google group and got my answer quite fast:

this one uses only 1 iteration:


$$('form fieldset').each(function(element){
   element.insert(new Element('a',{ href: '#' }).update('advanced')
  .observe('click', function(event) {
     this.up('form').toggleClassName('simple')
   })
 });

After updating my code to make it work I checked the rest of the comments and saw this:

How about taking advantage of toElement (making insert act like a factory):

$$('form.form fieldset').invoke('insert', {
  toElement: function() {
    return new Element('a').update('advanced')
      .observe('click', function() {
        this.up('form.form').toggleClassName('simple')
      })
  }
})

- kangax

Why haven't I used this before? The usage of the toElement property is clearly under utilized and after reviewing some of my old code I've seen 2 situations where I could use the same solution.

So Kudo's to kangax who posted this heads up!

Dan Webb's code highlighter

Thu, 14 Feb 2008 19:32:43 +0100

For some this might be as new as four wheels on a car but to me it was pretty new. I've implemented the javascript code highlighter of Dan Webb on this weblog.

It works pretty simple. There is a core script with the actual replacement code and a language file that specifies the language specific regular expressions. The rest is a piece of css to actually style the code.

Here's an example of highlighted code:

$('myel').update(new Element('a', {href:'http://danwebb.net/'});

Now I am a prototypejs fanatic but this piece of code is pretty good. Maybe I'll even try to make a prototype version out of it. :-)

Happy New Year

Tue, 01 Jan 2008 19:50:38 +0100

I wish you all a happy new year!

Microformats!

Sun, 23 Sep 2007 18:23:57 +0100

Today I've added some more microformats on the website. Microformats are elements with specific classes that 'tag' specific words on a website with special meaning.

For example my name in the copyright footer is tagged as a microformat. I've used the relation 'me' and an URL to this website stating that this is my website. I've done the same for Bastiaan Terhorst on my 'about' page.

By now microformats aren't that widely used but it's growing steady and a lot of programs and websites are making use of it. I use an addon for Firefox called Operator by Michael Kaply. It's one of the best readers available and it allows you to combine data on a website with web services like Google Maps or Calendar.

Microformats are a revolution on semantic HTML and finally makes it possible to add interactive data in a webpage.

But isn't that already possible?

Some people use the <address> tag to markup a real house address. But that is not the use how W3C wanted it. The address tag is to be used for contact information of the authors of the current document, NOT just any address there is.

I strongly advise everyone that is creating websites to at least have a look at microformats.org. Some features are quite easy to implement. For example the rel attribute for an anchor is something everyone could add with no trouble at all.

The next generation HTML will probably have some of the same technologies, but since that's a long way from arriving here I think we could start by doing this right now.

Vacation in Turkey

Tue, 18 Sep 2007 13:09:44 +0100

At the end of august it was time for me to relax. So I took a vacation and went to Turkey with my girlfriend Margaretha. We went to Bodrum in south western Turkey and stayed in an appartment of Pedalisa Apart. It was incredibly hot so we haven't done that much besides swimming and hanging around the pool area.

Check out our appartment on Google Maps

But it was very nice! I've never been so far from home in my life and I must say that if I get the chance to go back, I would, just to feel that eastern atmosphere again. I've posted some photo's on Flickr, visit this page to check them out.

Visit the Flickr page to see more.

New site design finally live!

Wed, 05 Sep 2007 23:32:36 +0100

Yes the new design is finally finished!

Due to a lack of inspiration for the style of the site it took quite a while before anything happened. But it's finally here so tell me what you think of it.

I've built in some new features such as RSS feeds and I make use of microformats. My knowlegdge of accessibility and standards has grown a lot the last years and I've tried to implement as much of it as possible.

The portfolio is not fully up to date, but I'll add the rest later. As you can see I've dropped the gallery. I'm not making wallpapers or other images anymore, for that you should visit some other sites.

I'll try to update the website or post in this weblog on a regular basis, but if you have any tips or improvements let me know!