I first thought about personalising my online CV to match these colours (with hair colour at the top, lip colour at the bottom and eye colour for links, etc). But somehow my body colours don’t make good website colours.

Instead I played around with those colours and created a pure HTML and CSS “image” of myself (the core code consists of just five divs). Et voilà, here it is.

You will only see the full beauty of it if you use a modern browser (and can see). It’s funny how IE6 still shows something which is recognisable as a face, but turns it into some kind of a monster:

Beauty is in the eyes of the browser

If I wanted to be buried (which I don’t) then I would love to be buried in a similar place. And seeing all those kitschy angelic statures, I would love to have a stature with a sappy angel (with wings and innocent look and all) as the upper half and a Manneken Pis as the lower half.

Enjoy a selection of the photos I took:

See more photos of the South Ealing Cemetery on Flickr by some other people.

I had the Worst Hot Chocolate right at Oxford Railway Station at VitaBurst. Their specialty is “Fresh juice and smoothies” and they really looked tasty and healthy (but I did not try them). I am afraid Hot Chocolate does not belong to their strengths. I got a cup mainly for keeping me warm that day on my way to the hotel. I threw it away after having drunken only about a third of it. I normally hate throwing food away, but it was really that awful.

If you need a Hot Chocolate at Oxford Railway Station, get one from AMT instead. It’s not the best, but decent.

I drank the Best Hot Chocolate ever of my life at Pret on Cornmarket Street!

I sometimes drink Hot Chocolate at Pret in Hammersmith Station, which is quite good. But this one in Oxford was nothing like it. It was so much better than any I have ever tasted, I asked them what was their “secret”. They told me, not every Pret uses the same Chocolate. They use a special kind of molten chocolate (in a machine which keeps it constantly molten)!
And maybe the great location (in a 16th century building with a great interior) is doing its bit as well …

I’m not a ‘Twitter person’ … I’m more of a ‘Shh person’. I subscribed to this ‘Shh network’, where you write something down, but don’t send it anywhere.

I thought someone might have picked this idea up or had the same idea before, but my short search for such an (obviously hoax) service was unsuccessful. So, I created one myself:

Shh…

Apart from the fun of “cloning” Twitter, writing a better front-end code and having the satisfying feeling of implementing a small project all in one day, I also had the idea of twittering silence on twitter itself. You can follow my as interesting as everybody else’s tweets on:

@_shh

By the way, I needed the underscore because a twitter user called ’shh’ already existed … as did ’shhh’ … and ’shhhh’ … and ’shhhhh’ … I could have taken ’shhhhhhhhhhhhhhh’, but maybe that wouldn’t have been such a good idea. Seems a bit desperate, doesn’t it?

These two projects are really a bit unrelated. They serve the purpose of linking to each other. (Yeah, my middle name is “PR”. Or was it “SEO”? Where is your birth certificate when you need it?)
And, of course, they share the same philosophy: “Silent twittering” for fun and more privacy awareness.

What I was looking for:

• usable in a production environment: should work in all major browsers
• should satisfy designers: should make it possible to have fancy borders, gradient backgrounds, drop shadows, etc
• should satisfy coders: usable, accessible, semantic (to a certain extent), no JavaScript, not too many unnecessary extra elements or hacks
• flexible: resizable, shrink-wrappable, same code for big boxes or small link buttons, easy to maintain, easy to adjust
• optional: creating them should not involve too much work

Nearly every technique I used before needed a fixed width or had only two rounded corners or had other drawbacks. I had only found one single technique that fulfilled all my basic needs, but was not very handy to use and had other limitations (such as no way to do a decent hover effect, difficult to maintain and one annoying bug in IE 6).

While I was searching for a new technique I came across one which already came quite close: Creating bulletproof graphic link buttons with CSS

But this technique has a few drawbacks:

• Additional to one big background image with all of the necessary elements in it, it also uses a second one just for the corners.
• It cannot handle fancy backgrounds.
• It doesn’t allow nesting of elements with rounded corners.
• Using the same technique for other elements needs adjusting.
• No fancy hover effects are possible.

So, I fiddled around with it and improved and enhanced it. Here is how:

The original solution

0. The Original

I won’t repeat what Roger Johansson wrote in his original article. I recommend reading it first to understand what I’m talking about.

Step 0: The Original (Demo)

1. One Background Image

The first thing I wanted to get rid of is this strange second background image. Although the corner.gif image contains all of the four corners with a lot of transparent space in between them, the original technique uses it only for the top right and bottom right corner. So, at least 90% of that image is not really needed.

I soon noticed that the bottom right corner does not need to use corner.gif, but can use the normal button.gif just like the rest. So, the only thing to fix was the top right corner.

Every other corner is easy to position because each previous element has a padding exactly where the following element cannot overlap the previous corner. The only tricky bit is the first corner that isn’t “protected” by a previous padding: the top left one. To “protect” the top left corner nonetheless, I just gave the first span a left margin, which I removed again from the second span with a negative margin of the same value. Et voilà, no second image needed.

Step 1: One Background Image (Demo)

2. One Span Less

Then I wondered: Why are there five background image placements and not four? The last innermost span has the background strangely attached to “right center”. And sure enough, I could safely delete the last span and thus could get rid of one unneeded span (13 characters per rounded element after all).
The padding from that deleted span is plainly added to the preceding span.

Step 2: One Span Less (Demo)

3. Fancier Background

Why should it be “tricky to give the button a non-flat background colour”? Mainly because the last, innermost span defines what the major part of the button looks like. Only because the original version chose that to be from the bottom right (and therefore without the 6px on the top and on the left) it is difficult to use an image with a gradient higher than 6px. It could use a much bigger gradient on the bottom without any problems, though.

But as gradients are mostly found at the top, I  simply turned the order around from “top left > top right > bottom left > bottom right” to “bottom left > bottom right > top left > top right”. And now you can have much higher gradients (as high as the container could get minus the 6px at the bottom).

Step 3: Fancier Background (Demo)

4. Rearrangement

Then I rearranged the code a bit, basically to removed things unrelated to the link nature from .button:link, etc and to move every occurrence of the background image to one single line, so that it’s easier to exchange.

I also fixed a bug in IE 6 introduced with the fancier background changes: IE 6 doesn’t like a bottom padding on the now innermost span.

Step 4: Rearrangement (Demo)

5. Hover

With those changes it is much easier to exchange the background image on hover with just a few more lines of code.

Step 5: Hover (Demo)

6. Hoverissimo

Some time ago my boss wished a link button that exchanges the gradient on hover from top to bottom. With this technique the only problem was the aforementioned problem that you can either have a link button with its main background at the top or at the bottom. To be able to exchange these background gradient positions, I had to turn the order of the background position around again (as in Step 3) as they were before, but this time only for the hover state.

Step 6: Hoverissimo (Demo)

7. Other Button Types

Now adding other different button types is a piece of cake: Simply add another class for each new type and give it a different background image (and change the background and font colour accordingly, if necessary).

Step 7: Other Button Types (Demo)

8.More Universal

Now there are only two problems left: If you plan to use this code not only for link buttons, but also for bigger boxes with block elements, you cannot use the code as it is now. You could just exchange the spans with divs and duplicate each line in the CSS code to accommodate that. But what if you have to use another div in there?

Although I’ve normally long outgrown the ‘classitis’ phase, in this case I think, using classes makes the code much more flexible to use. It reduces the CSS code, but increases the HTML again (by 42 characters per rounded element).
And I normally like to give semantic class names, but here rounded corners itself have no semantic meaning, so I contended myself with giving the classes names that are short and have a functional meaning instead. I also renamed “button” to “rounded”, because as soon as this technique isn’t used on a link button, its name would be erroneous.

Step 8: More Universal (Demo)

The new solution

9. Any Container

Finally, with these former changes it is now possible to use this technique on any container, not only on links or inline elements, but on bigger boxes, too. And these rounded containers can even contain other rounded containers.

Step 9: Any Container (Demo)

Final Code

My final basic code (without the “hoverissimo” code for the sake of brevity):

<a class="rounded <type>" href="#">
  <span class="i1 bg"><span class="i2 bg"><span class="i3 bg">
    Link
  </span></span></span>
</a>

<div class="rounded <type>">
  <div class="i1 bg"><div class="i2 bg"><div class="i3 bg">
    <p>Block level content</p>
  </div></div></div>
</div>

.rounded,
.rounded .bg {
  background-repeat: no-repeat;
  display: block;
}
.rounded {
  float:left;
  background-position:left bottom;
}
.rounded .i1 {
  padding:0 0 9px;
  background-position:right bottom;
  margin-left: 6px;
}
.rounded .i2 {
  padding:0 0 0 6px;
  background-position:left top;
  margin-left: -6px;
}
.rounded .i3 {
  padding:9px 12px 0 6px /* no bottom padding because of IE6 */;
  background-position:right top;
}

/* for each type */
.<type>,
.<type> .bg {
  background-image: url(<type_image>.gif);
  background-color: <type_background_colour>;
  color: <type_font_colour>;
}
/* for hover effect on links */
a.<type>:hover,
a.<type>:hover .bg {
  background-image: url(<type_hover_image>.gif);
}
/* left out :link, :visited, :active and :focus state
   for documenting purposes and readability */

The final result: The same technique for the box and the link button within

I called this technique “Sliding Doors Squared”, because it is basically an enhanced version of the Sliding Doors technique. Although this technique is great and recommended for two rounded corners with a flexible width or four rounded corners with a fixed width, it cannot be used for completely flexible rounded corners. The “Sliding Doors Squared” technique uses the Sliding Doors technique not only horizontally, but also vertically and therefore fills this gap.

Despite all its advantages, there are some disadvantages:

• the background image has to be rather large (the maximum width and height of the container are defined by the width and height of the background image)
• CSS sprites cannot be used for hover effects (at least not before CSS3), so there will be two requests and a flicker at first
• the corners must not be transparent

As yet I have tested this technique in IE 6, IE 7, Firefox 3, Opera 9 and Chrome and it behaves very well so far without any differences or even hacks (no, not even for IE 6!).

For just two rounded corners or simple four rounded corners with a fixed width this might be overkill. But as soon as you need more flexibility or need an easy way to use drop shadows, fancy borders, gradients or link states, this is the ultimate technique to use.

PS: After I finished the code I took a look at the comments for the original article and realised that the first two steps were already solved in there. That could have saved me about 30 minutes, but at least playing with the code got me going further.

Let us start with …

Yes, it is really that simple. There is nothing more to add to that.
Well okay, I will explain a bit …

Accessibility

Let some hard facts speak for themselves:

• Accessible tube stations in Berlin (BVG zone A): 47 out of 96 = 49%.
• Accessible tube stations in London (TFL zones 1+2): 17 out of 132 = 13%!

I do not know the perspective of a wheelchair user, but I once had to move a very heavy suitcase from Willesden Green to Plaistow and had to change twice. There were a lot of stairs, hardly any moving ones and no lifts at all (minus one point for the public transport system). But there was always someone to help me carrying the suitcase up and down the stairs (plus one point for the Londoners).

That could not have happened in Berlin. (Ambiguity intended.)

Cleanliness

Whenever I mention to Londoners that the London tube is so much cleaner than the Berlin tube, they are very surprised. Most Londoners find the tube in London very dirty indeed. But they obviously do not know the Berlin tube, especially not when it runs through Kreuzberg. Where else can you see garbage, vomit, condoms, broken bottles and blood stains all in one compartment?

I wonder why the tube in London is so clean.
Is it the extreme security? After all, every piece of garbage could potentially be a bomb.
Do they have more money to hire more cleaning staff? Possibly.
Or do Londoners just behave themselves? Highly unlikely.

Disclaimer: This is going to be a theatre review. I am by no means entitled to write one. In my whole life I have been to less than 10 plays. Although I am really interested in the concept of theatre and everything that I hear about it, the first 29 years of my life I had hardly any money and the last 3 years I had hardly any time. Since I came to London I have decided to change this. It would be a shame to reside in this city with such a big theatre tradition and so many (apparently) marvellous productions to go to and not to take advantage of this.
This disclaimer should just make clear that I really do not know a thing about theatre, but have an opinion nonetheless …

So, my first theatre experience here in London became to be the RSC’s production of Hamlet the day before Christmas Eve. Yes, I have to admit, I have been drawn to that production especially because of its two main stars — David Tennant (“The Doctor“) and Patrick Stewart (“The Captain“) together in one play: each sci-fi geek’s dream come true. And, of course, I was a bit disappointed when David Tennant had to retreat due to a prolapsed disk and had to be replaced by his understudy. But the fact that I was most disappointed of was not that I could not see his Hamlet (which I could never miss if I never saw it), but more the ticket price I had to pay and its sudden drop in value which meant I could not get rid of the second one that I had bought.

The Theatre

Although I had my camera with me, I somehow did not make a single photo. wolfsavard seems to have had nearly the same seat as I had, so if I had made a photo, it would have looked exactly like this.

As boring as it may sound, the (chronologically) first impressive thing about this production was the building, the Novello Theatre. (This may be due to my not knowing many theatre buildings, I suppose most of them are similar in splendid extravagance.) But just sitting there in itself was a great experience. I had one of the cheapest tickets and worst seats (very, very high in the balcony), but still the seat was quite good and I could hear everything and see nearly everything.

Some of the actors were so very nice and sometimes looked up to us. Sometimes it was because we were acting as The Sky/The Stars/The Sun/The Moon/The Fireworks. But often they looked up without a special reason. I also noticed that just some of them did that. Could it be a sign of professionalism? Anyway, I was especially glad of that, because after a while it gets really strange seeing people from above. And although Patrick Stewart’s bald head is by no means unsexy, his face is the even sexier part.

One thing I have heard is unfortunately quite common in theatres and annoyed me a bit: Being December there was a lot of coughing going on. It could have been worse, though.
Which reminds me of one my two most favourite Klaus Kinski citations: Wenn ihr nicht aufhört zu husten, geh ich nach Hause! (If you won’t stop coughing, I’ll go home!) And quite right he is: There are so many ways not to be so impolite as to cough in the theatre: If you really do not wish to stay at home, there is medicine you can take to prevent coughing! (I used it once in my life, while I was writing one of my A-level-like “Abitur” exams.)

The Actors/Characters

The posters outside the Novello Theatre were quickly replaced with Ed Bennett's likeness. (photo by thisstage)

My most favourite performances:

• Ophelia: The best performance of the evening (in my opinion) was delivered by Mariah Gale! I am not sure if her main attraction is the character (her benevolence, innocence and vulnerability), but I definitely thought her portrayal most remarkable. (This is one of the two reasons why I am writing this post: I did not really read any other reviews, but skimmed through a few and Mariah Gale was not mentioned once.)
• Gertrude: Being the Queen of Denmark, Penny Downie’s performance was the most majestic one. Much more majestic than Claudius anyway. (Was that intended? Maybe it should show that Claudius was somehow not the genuine King!?)
• Polonius: Everybody liked him. It is most probably the comic relief that just works. As I especially like weird old male characters the best, Oliver Ford Davies was the perfect choice.
• Hamlet: Most of the reviews have, of course, been written about Hamlet’s portrayal and the terrible pressure on Edward Bennett (“The Understudy”) and the fantastic way that he saved the play. There is nothing more to add to those. He definitely deserves all the praise he got.
• Claudius/Ghost: One thing I noticed about Patrick Stewart was that most of the time he was talking in a very low voice. I do not know if he was supposed to do that or if he probably had a cold. But I also noticed that he was perfectly audible nonetheless!

My least favourite performances:

• All of the actors were either superb or at least quite good. Except one: Laertes (The Understudy’s understudy) was plainly just speaking monotonous lines with hardly any acting at all. (Sorry, just my opinion.)
• Oh, and maybe André Tchaikowsky’s understudy (“playing” Yorick) was not as good as the original as well.
• Another slightly unpleasant thing that I was wondering about: Many of the actors were often too aggressive … I know theatre is supposed to be exaggerating, but I still prefer a realistic approach. Why were they shouting so often? It is okay for a madman (Hamlet, sometimes Claudius, sometimes Laertes) to shout now and again. But many times I was distracted by the thought: Whoa, they are reacting way too emotional!

The Scenes

There was really just one scene I did not like: The “play in a play in a play” (the Dumb Show) was portrayed in a ridiculous way by the “clowns”. Although I am quite sure this was intended that way, I still found it fairly annoying.
While reading the play, I could not understand why Claudius did not react to the Dumb Show (unfortunately I was not reading an annotated version). And I wondered if seeing its interpretation on stage would bring some sense to it. (I thought one way could be just merely hinting the “Clown King Poising”.) But it did not resolve anything and completely failed me. I was researching afterwards that the most common explanation would be the staging of this scene and that Claudius might not be able to see anything of it properly. If I had done the research before, I could probably have picked up what they had done to make this clearer. But as a play should work without prior research, this scene has definitely failed to work.

The play lasted three and a half hours. At least for me as a non-native speaker, this was a bit too long. It seemed to be hardly abridged at all. (I was proud to even recognise a few of the missing scenes.) 30 or 45 minutes less would have suited me better.

As to the best scenes: Sorry, I have to go a bit with the mainstream here.

One of my two favourite scenes was clearly the gravedigger scene. Funny, tragic and witty in a most formidable way that I was not able to imagine while I was reading the play.

The other one for me is Ophelia’s madness scene: This was the only scene which literally took my breath away. I was completely captured by the fragility and tragedy and brutality of this scene, the awkwardness, helplessness and inability to react properly to such madness and sadness.

People in the background

Praise to the costume maker: Forgive my reacting very female here, I am normally so not into fashion, but Gertrude’s dresses were just gorgeous! They certainly added to her majestic qualities.

I tried to illustrate the way they used the lanterns in a little drawing (yes, I cannot draw)

I really enjoyed the lighting in the opening night scene: They used reflections of their lanterns’ beams on the black surface floor as a way of lighting each other. This was just brilliant, especially as it brought a lot of movement into the scene and they kept using this device in more ways than I could imagine.
(Who is to compliment on this? The director, the lighting engineers, the actors?)

While I was reading the play (for the first time in preparation) I wondered how the ghost would be portrayed and especially if and what kind of special effects would be used on him. I thought they would be using a special kind of lighting and/or some fog. The actual way the ghost was presented in this production was a bit of a disappointment. It is still okay, as you do not really need any special effects to make the viewer understand that it is a ghost they are seeing. But it still would have added to the scene and I had looked forward to it.

After the Show

While slowly squeezing down the stairs after the show I had the pleasure of witnessing this conversation between an American and a British girl.

American girl:

Who was that skull?

British girl

explains

American girl:

And who was Yorick?

British girl

explains

American girl:

And whose grave were they digging?

That was the point where I thought, she must have not gotten and consequently misinterpreted at least half of the show.

The Summary

Good: Ophelia, Gertrude, costume maker, lighting, building
Bad: Laertes, ticket price, the Dumb Show

I do not know yet if I will carry on with theatre reviews. One of the next ones could possibly follow in May: “The Captain and The Wizard” …

me:

Does this dongle also work with Linux?

sales girl:

Linux? Is that a special programme?

me:

No, it’s an operating system.

sales girl:

…
(blank stare)

me:

… like Windows or Mac OS.

sales girl:

Oh, like HP or Dell!?

me:

Ehm, no. Like Windows XP — only different …

sales girl:

(turns to a senior sales man)
Does this work with Windows Linux?

sales man:

(uncertain, at least he seems to have heard of it)
Linux is a very heavy programme …
(indicating the sheer vastness of it with his hands: about one metre)

sales man:

Could be … If it doesn’t work with Linux, install Windows XP.

me:

…
(unbelieving blank stare)

sales man:

It only costs about 50 pounds …

So, why on earth should I finally give in (despite endless attempts to avoid it) and join the world of pointless babbling that calls itself the “blogosphere”? Here is why:

• I am bored and need something “useful” to do. (Distraction is my saviour from current unemployment insanity.)
• I am a Web Developer by profession. I need experience with one of the most important blogging engines. Therefore, I can haz WordPress.
• I just moved from Berlin, Germany to London, United Kingdom. There are plenty of things to talk about – and (yet) a lack of people to talk to.
• As my guitar is still in Berlin, I need a different creative outlet. (Which really means: I am a mixture of The Reverse Voyeur and The Tragically Geek.)
• I was urged repeatedly many times pleeeeease to do so. (Really, very often, you will not believe how often I was actually asked that. Every time only by one certain individual, but who counts.)
• I am under the delusional impression that at least some of the things I will write about could actually interest someone. No, really.
• It is still better than torturing bunnies.

What can you expect?

• Hereby I predict the following main subjects: web development, London, philosophy, random geekiness, music and anecdotes (from so-called “real life”).
• I will also use this blog as a bit of a web development playground. Do not expect gorgeous design and do not expect it to be ever finished. But do expect me trying to adhere to as many accessibility standards as possible and more niceties for Firefox than for Internet Explorer 6.
• As I am German, you can also probably expect: casual errors, quirky wording and a too simple language. (And I will most likely never mention the war.)

Let me end with my personal blog manifesto (a slightly abridged version of the “Statement of Audience” in a manner of “Blogoholics Anonymous”):

Hello, my name is Anika, and I realize that nothing I say matters to anyone else on the entire planet.