Sour Code Sour Code


TweetWish – Your wishes from twitter

Published on April 11th, 2009

It’s a single page site displaying all tweets that mention “I wish”. It gets new tweets from Twitter every 10 seconds. Click the refresh button in your browser to view new tweets.


TweetWish.com – Your wishes from twitter.

I’ve used jQuery to add visual effects like the tweets fading in and out on hover, the stars on the background and the alignments of the tweets (adding a class to every odd tweet). The tweets themselves are called from a custom query to Twitter Advanced Search and parsed and displayed with Simple Pie, a RSS/Atom feed parser running on PHP.

I might improve the site by loading new tweets with ajax so the site will auto-refresh itself.

Internal link building the bad way

Published on April 3rd, 2009

The way they do this isn’t special. They’re just linking to tag overview pages from within blog posts, nothing special here. If you do this the right way, it will help your internal link building. However, if you’re going to go ahead and hide those links from your users you are going into a dangerous area.

Let’s take this blog post for example: Top selling PS1 games in the Playstation Store. At first glance there’s nothing special going on. But, let’s take a better look at the page.

Kotaku Links

Nothing special here. Just a blog post.

Kotaku hidden links

Same post with outlined links.

Those words with the red borders around them in this posts are links, you won’t see these unless you use a tool to outline links or hover over them. So that’s 5 internal links in this short post. 2 of those go to the same page. And all of them are hidden.

Hiding links is dumb

It’s pretty simple. If you style your links the exact same way you style your content you’re hiding them. Google isn’t stupid, they will notice this.

I’ve blogged about this form of nasty SEO before, and I’m truly stunned about how big – respected – websites keep trying to hide their links and linking methods.

Asking people to Digg something is sad

Published on February 11th, 2009

Today I got the following ridiculous email from WooThemes (I’m in their mailing list, don’t ask me why):

Subject: Please Digg our new, free icon set
From: WooThemes

Hi  Damien van Holten,

We know you love WooThemes and that you’ll do everything in your power to help us out (feeling obliged now huh?)… So we just released a new, free icon set, the WP WooThemes Ultimate Icon Set, and we’d like to request your help in sharing this with your friends.

If you can visit the following link and Digg this release, we would really
appreciate it! –>

Some more new themes on the way next week by the way… 🙂

Over and out,
The WooThemes Team

Not even a download link?

Just the Digg link? They go trough all this trouble to create icons, send all their members an email and they don’t even link the article/download page? Come on! If your this desperate to get Digged you’re doing something very wrong. I get why someone would ask some friends to Digg their article, just to get started. But doing this on such a mass scale is just wrong.

Apart from insulting their users by saying they can’t make decisions for themselves this email shows how little trust they have in their own content. If your content is is good enough and you have a well placed Digg button, people will Digg it. The worst thing is: the icons are actually well made and I can imagine their usefulness. This only makes it worse.

You can find the original post here. Now go ahead and Digg this article, you know you want too. 😉

Multiple domain www-rewrite

Published on January 26th, 2009

A while ago I wrote about how to rewrite non-www requests to www requests. While that solution is solid and has been working for me the past couple of years I came across a related challenge today: rewriting non-www to www requests on multiple domains at the same time.

Why would you want to do that?

There’s only one good reason why you would want do do this: if you’re using a single file system (thus a single .htaccess file) for multiple websites/domains.

RewriteEngine on
RewriteBase /
RewriteCond %{HTTP_HOST} !^www.* [NC]
RewriteRule ^ http://www.%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

Enter the code above into your .htaccess file. Now all requests will be rewritten to have the www. prefix. For instance: the request for http://domain.com/directory/filename.html will be rewritten to http://domain.com/directory/filename.html. Independent from the domain request. The %{HTTP_HOST} and %{REQUEST_URI} will get the original domain from the request.

The .htaccess file

The .htaccess file can be found in the root of your website directory (where you also find your index file). If you can’t locate the file it might be hidden; file names starting with a dot are automatically hidden by a some FTP clients. Set your FTP client to show hidden files.

Another reason for the .htaccess file not showing up could be that it doesn’t exist (yet). Just create a new empty file on your server and copy the rewriting code to it.

Be sure to notice that your server needs to have the mod_rewrite module installed and activated.

Magento: iDeal implementation guide

Published on December 29th, 2008

Getting iDeal to work with your webshop can be tricky. With this iDeal implementation guide for Magento webstores it should go a lot smoother. This implementation guide covers the following iDeal versions:

  • ING/Postbank iDeal advanced
  • ABN iDeal advanced
  • Rabobank iDeal professional (Advanced)

1. Check the openSSL module for php

Not all hosting packages are suited for iDeal. The first thing to check if the openSSl module is active on your php webserver. You can ask your hosting provider or you can check it with a simple phpinfo() request. You’ll need openSSL to read the required security certificates.

2. Installing the iDeal module from Magento Connect

From the Magento Admin Panel navigate to the Magento Connect Manager (System > Magento Connect > Magento Connect Manger). Now get the extension key for the iDeal extension and enter it into the Connect Manager. It should be done installing the extension in a few seconds.

3. Changing the extension to work with your bank

The Magento iDeal Advanced extention was created to work with the ING bank. If you want to use it for Rabobank or ANB you’ll have to change the target url’s within the script.

You can find the target url’s in the file “magento/app/code/core/Mage/Ideal/Module/Api/Advanced.php”. You’ll find the following code around line 62 – 65.

if ($this->getConfigData('test_flag') == 1) {
$acquirerUrl = 'https://idealtest.secure-ing.com/ideal/iDeal';
} else {
$acquirerUrl = 'https://ideal.secure-ing.com/ideal/iDeal';

Change both to the url’s to match your bank of choice. For example: idealtest.rabobank.nl or ideal.abnamro.nl.

4. Create the openSSL certificate

Use my guide on creating OpenSSL certificates for Magento.

This results into two files: a private key (.pem) and a certificate (.cert, .cer, .crt). Take care that the certificate file you upload to the iDeal Dashboard has a ‘.cer’ extention.

5. Uploading the private key and cerficitate

Upload the private key and the cerficitate files to a directory on your Magento server, use ‘includessecurity’ for instance.

Upload the certificate file (the exact same) to the iDeal Dashboard. You will have to repeat this step since you have a iDeal test environment and a live environment. Both Dashboards should use the same certificate.

6. Put the Magento IDeal module into test modus

Navigate to the Magento iDeal module (System > Configuration > Payment Methods) and enter all the details. Use the password you used to make your private key. The merchant ID should be the same as your Acceptant ID found in your iDeal Dashboard.

Be sure to use the absolute (server) paths to the private key and certificate files. Take care to point the url’s to the locations you uploaded the files too.

Very important: set the Test Mode in Magento iDeal module to ‘yes’.

7. Make the 6 obligatory test payments.

To test your iDeal implementation and payment handling iDeal wants you to do 6 test payments. Create an aditional shipping method with a € 0 cost and create a test product that costs € 1.

Now go ahead and order this product 1, 2, 3, 4, 5, and 7 times creating orders of € 1, € 2, € 3, € 4, € 5 and € 7. You’ll get to see various errors and messages; this is all right. Just go ahead and finish your testing. If you log into your iDeal Dashboard you’ll see that the various test payments have succeeded.

8. Half a day of waiting time

If all test payments have succeeded iDeal will copy the succeeded settings from the test to the live environment. They do this about 2 to 3 times a day. Keep checking the (live) iDeal Dashboard to see if this has happened.

When everything looks right in the iDeal Dashboard the activation tab will be come – yeah, I know how this sounds – active. The moment is here… you can finaly push that ‘activate’ button.

9. Switch Magento test mode off

Navigate to the Magento iDeal module (System > Configuration > Payment Methods) and set the Test Mode setting to ‘no’. This is also a good time to check if the country settings are correctly set.

This was everything you needed too do to implement iDeal into your Magento webstore. It wasn’t that though right?

OpenSSL certificate for Magento

Published on December 29th, 2008

This tutorial explains how to create your own iDeal certificate on Windows (XP/Vista) and Mac OS X machines. On Mac OS X you won’t need any software, since you’ll be using terminal (command line). To create iDeal certificates on Windows you’ll need a tool called openSSL.

1. For Windows users.
Download openssl and unpack/install it. Browse to the ‘Bin’ directory where you installed openSSL (C:OpenSSLBin for example) and double click on ‘openssl.exe’. This will open up a new screen with ‘OpenSSL>’.

1. For Mac OS X users. Open a terminal window ( Finder > Applications > Utilities > Terminal.app) and type ‘openssl’. This will change the command symbol to ‘OpenSSL>’.

2. Now enter the following code:

genrsa -des3 -out merchantprivatekey.pem -passout pass:PASSWORD 1024

Where you replace ‘PASSWORD’ with a password of your choice.

3. After that enter the next line where you replace ‘PASSWORD’ with the password you used in step 2.

req -x509 -new -key merchantprivatekey.pem -passin pass:PASSWORD
-days 365 -out merchantprivatecert.cer

4. Now you will receive a couple of questions about Country, State etc. Enter the following information:

Country Name (2 symbol code) [AU]: NL
State or Province Name (full name) [Some-State]: YOUR-STATE
Locality Name (eg, city) []: YOUR-CITY
Organization Name (eg, company) [Internet Widgits Pty Ltd]: COMPANY-NAME
Organizational Unit Name (eg, section) []: DEPARTMENT-NAME
Common Name (eg, YOUR name) []: WWW.DOMAIN-NAME.COM
Email Address []: YOUR-EMAIL

5. After entering your email address you click enter again. You’ve just created 2 files: merchantprivatekey.pem and merchantprivatekey.cer. Windows users can find these files in the ‘Bin’ folder. Mac OS X users can find these files in the root of your user folder.

6. Now you can upload these two files to the directory ‘includessecurity’ by FTP to the website where you’ll be using iDeal. Be sure to rename the file ‘merchantprivatekey.cer’ to ‘merchantprivatekey.crt’.

7. Now upload the ‘merchantprivatekey.crt’ in the iDeal Dashboard.

ING/Postbank users: You should be using different names for the files: ‘merchantprivatekey.cer’ should become ‘cert.cer’ and ‘merchantprivatekey.pem’ should become ‘priv.pem’.

That’s it, you’re all done. Now you can continue with the tutorial on implementing iDeal into Magento.

Are you ready for Google Chrome?

Published on September 2nd, 2008

With Google’s new browser they seem ready to take a bite in the browser market. Of course we don’t know what it’s capabilities will be considering CSS 2.1 or maybe CSS 3 but I’m hoping for the best.

Google announced it’s new browser Google Chrome yesterday. It should be non-bloated and task-focused as that’s what Google’s apps usually look like and it’s what they are saying.

“On the surface, we designed a browser window that is streamlined and simple. To most people, it isn’t the browser that matters. It’s only a tool to run the important stuff — the pages, sites and applications that make up the web. Like the classic Google homepage, Google Chrome is clean and fast. It gets out of your way and gets you where you want to go.”

The interface redesign approach is very interesting. I’m looking forward too seeing their innovations in browser usability and functionality.

Also read the post about Google Chrome by Matt Cutts. He seems really enthusiastic (as he should be getting paid by Google) but doesn’t want to spill the milk before it launches. Typical Cutts there.

“I can’t wait to talk more about Google Chrome, but I’ll hold off until it officially launches. Once people can download Google Chrome, I plan to talk about my experiences using Google Chrome, to lay some truth on you about questions you might ask about Google Chrome, and to give some tips for power browsers.”

I’m not looking for a new browser to use since I love Firefox and it’s capability to run add-ons and lots of other stuff. However, I like seeing some fresh blood in the browser market. Hopefully it won’t cause too much trouble considering XHTML/CSS support. Are you ready for Google Chrome?

Update: They are working on Mac and Linux versions but Google Chrome will be launching for Windows only. Small chance I’ll get to test it out since I don’t use Windows PC’s.

The TechCrunch redesign

Published on August 28th, 2008

If you have any affinity with the internet market you probably visit TechCrunch a couple of times a week, whether you have them in your RSS reader or you just come across them when you’re surfing around.

TechCrunch went live with a redesign recently. I wanted to share my opinion of the new look and feel. The first and most important thing is their increased usage of whitespace. This makes the blog a lot easier on the eye.

TechCrunch Redesign

Old TechCrunch on the left. Redesign on the right.

TechCrunch redesign critique

With the menu going into the background – from white/green to white/gray – and the lack of green I think they took a step backwards branding wise. Pages are easy to read but bland and I could probably say that instant recognition of a TechCrunch article is less likely now.

The homepage overhaul is great, scanning it has become easy and not showing full articles is good since most readers probably aren’t going to read every single article and just pick out what they like. There’s still an abundance of banner ads on all pages but they are all constrained to the right hand sidebar.

My main annoyance is that header and title links aren’t indicated as links. Links inside articles are fine: green and bold but article titles are black without a underline. Of course with article snippets they give you a ‘read more’ link but that’s not the point here, a link should look like a link.

TechCrunch Redesign Critique

If it’s a link it should be styled as such.

Overall I think the redesign is a step forward but I do hope they will work on branding the pages more. It’s a bit too generic for me at the moment.

Beijing 2008 usability failure

Published on August 14th, 2008

It’s been said enough times already but I’m gonna go ahead and repeat it one more time: JavaScript should be used to enhance the UX (user experience) not be the UX.

I came across a great example on how people screw this up on a daily basis on a site that I can imagine has quite some traffic: The Official Website of Beijing Olympic Games.

On the middle of the page there’s overview of previous, current and upcoming gold medal matches. Which I can imagine is one of the most used functions on the homepage. I can’t imagine why but to view the list they offer a javascript button scrolling system. Cool right? Well yeah, apart from the the fact that the scrolling system is slow as hell. It takes over 15 seconds to scroll down 5 results.

Beijing 2008 usability failure

Where’s my scrollbar when I need it?

Considering that a lot of people will check this site at work this is bad. Real bad. I turned of javascript because I figured I would get my scrollbar back. Nope, nothing. Of course, the scrolling system stops working and so do the tabs.

Beijing 2008 usability failure buttons

You can click all you want, nothing will happen…

Why is it so hard to make also function without using javascript? The big boys do it right, and so do the smaller one’s. It’s a good thing the Chinese are better at sports then the are at online usability.

Dutch stop words

Published on August 8th, 2008

In finding a complete list of dutch stop words to use in an application we are building I came across the biggest names on the web to the dark back alley’s we all know are out there. A good list of dutch stop words wasn’t to be found though.

I collected all stop words lists that seemed useful, had lengthy discussions with my colleague’s about verbs en nouns and had late nights going over each and every one of them. With great pride I present to you: The most complete list of dutch stop words known to mankind™.

  • aan
  • af
  • al
  • alles
  • als
  • altijd
  • andere
  • ben
  • bij
  • daar
  • dan
  • dat
  • de
  • der
  • deze
  • die
  • dit
  • doch
  • doen
  • door
  • dus
  • een
  • eens
  • en
  • er
  • ge
  • geen
  • geweest
  • haar
  • had
  • heb
  • hebben
  • heeft
  • hem
  • het
  • hier
  • hij
  • hoe
  • hun
  • iemand
  • iets
  • ik
  • in
  • is
  • ja
  • je
  • kan
  • kon
  • kunnen
  • maar
  • me
  • meer
  • men
  • met
  • mij
  • mijn
  • moet
  • na
  • naar
  • niet
  • niets
  • nog
  • nu
  • of
  • om
  • omdat
  • ons
  • ook
  • op
  • over
  • reeds
  • te
  • tegen
  • toch
  • toen
  • tot
  • u
  • uit
  • uw
  • van
  • veel
  • voor
  • want
  • waren
  • was
  • wat
  • we
  • wel
  • werd
  • wezen
  • wie
  • wij
  • wil
  • worden
  • zal
  • ze
  • zei
  • zelf
  • zich
  • zij
  • zijn
  • zo
  • zonder
  • zou

That introduction might just be over the top a bit. I do think this list will come in handy for some of you out there. Also available in .txt format.