Many people asked me why did I create the website, or more specifically, why a website about performing arts?

The short answer is, well, very logical. Dennis creates websites for living. Dennis loves performing arts. Thus, Dennis created a website about performing arts.

Don’t buy the short answer? Okay here’s the long one. But before that, grab your coffee, sit down, relax and get ready because it’s going to take a few hours to finish.

Just kidding.

Well, I’ve always love performing arts ever since I was young. I choreographed a few dance performances during high school even though no one has ever taught me how.

I can still remember when I went to watch my first musical — Fame the Musical — exactly 10 years ago in 2001, I loved it so much I spent all my money to watch it twice. After watching it I wished I could leave everything behind and tour with the group to perform on stages all over the world.

But of course it didn’t happen. Those were the naive days.

However, my love for performing arts is still as strong as always. The only problem is, it’s hard to find a friend who actually would like to go to watch a show with me.

“I’m not a performing arts person.”

“Performing arts? Boring…”

“It’s so expensive lah…”

Those were the excuses I got from my friends all the time. And most of the time, they have never been to any good stage performance before.

But of course there were also friends who actually liked musicals once they attended their first show. And some even got shocked when I told them they could attend the orchestra at Dewan Filharmonic Petronas, KLCC for as low as RM20.

So I was thinking, it’s not that people don’t like performing arts, it’s just that they are lacking of exposure of what performing arts really is.

So one fine day during midnight, the idea of creating a website about performing arts suddenly strikes me. I was so excited then I started to think, plan and design.

Okay, fast forward till today. Tada…!!! There you have it, StageKL. A comprehensive website hopefully to increase people’s exposure and interest on our booming local performing arts industry.

There are more improvements to be done. If you still want to read more texts, head on to read my welcome note where I talked about my future plan for StageKL.

Before I end this long post, one small request, please help me to spread the word on Twitter. I’ve made it easy for you, just click here and you will see the following message ready for you to tweet.

Check out http://stagekl.com/ for latest musical, concert, theatre and dance around Kuala Lumpur @stagekl

You will never know if any of your friends will find the website useful. So thanks a lot! And don’t forget to check out http://stagekl.com/ because there are at least 5 good shows happening this weekend!

So what is this StageKL thingy?

Well, if you still remember, I’ve mentioned this before in my blog about me starting a personal project and I will announce what is it when the time is right.

And now the time has come.

Proudly present *drums roll* StageKL!

StageKL is a website where you can find all the performing arts events such as musicals, theatres, concerts and dances happening around Kuala Lumpur.

The website is now in final stage of development so stay tuned to http://stagekl.com because the real thing is coming very soon.

What does it mean? It means that if you are logged into Facebook, you don’t have to enter your name, email or website every time you comment.

However, if this is your first time commenting with your Facebook account, or you have logged out from Facebook, you will see the blue Connect button like the one on the right.

Click on the Connect button and you will see the login screen below.

Once you have connected your Facebook to my blog, you can start commenting without entering any additional information.

Just leave your comment as usual and your avatar will appear automatically. You will be able to see your own comments instantly without waiting for my approval.

If the page doesn’t look right, refresh the page or clear your browser’s cache. Comments and suggestions are welcome.

I will explain in detail because I thought those interested in web design and development might want to know more.

Font embedding

I dodge sIFR and go for CSS font embedding instead.

Initially, I’m willing to give up any usability issues just to get the beautiful headings displayed in Helvetica Neue Thin. I have had enough of web safe fonts already.

I had to use sIFR to replace the headings with flash because I can’t embed Helvetica Neue due to copyright issue.

However, the solution was far from perfect due to,

1. You can’t right click on the headings to bring out the context menu
2. You can’t middle click on the headings to open the link in a new tab or windows
3. Safari runs JavaScript and replace the headings after every single image is loaded
4. iPhone doesn’t support flash

Those are the prices I have to pay just to get beautiful headings. Not much options I have.

But everything changed when I stumble upon the article 20 New High Quality Free Fonts from Smashing Magazine yesterday.

I found a free font that is very close to Helvetica Neue Thin which is the Vegur Light from dot colon.

Vegur is a really beautiful and high-quality font designed by a Japanese designer goes by the name Arro. And the best part is it’s free!

Vegur Light looks somehow similar to Helvetica Neue Thin and I think most people won’t even notice I’ve changed it if I don’t mention it here. I embeded the font with CSS and all the issues I mentioned above solved.

One drawback is that older browsers do not support CSS font embedding (see @font-face browser support). Besides, Internet Explorer doesn’t support TrueType or OpenType fonts.

But I think I can live with that considering most of my blog readers are intelligent enough to stay away from Internet Explorer and upgrade their browsers frequently (I think).

Scroll follow

Besides font embedding, I changed the scroll follow as well.

So yes, I heard you. Scroll follow is annoying. Well, I kind of expected that.

Initially I already planned to include a button that says “Stop following me will ya?” but I didn’t do that because I want to make it easy for people to comment.

After considering all the feedback I got, I try to disable the animation as suggested by Kevin but there’s just no easy way to achieve the effect I wanted.

I was searching Google up and down but without much luck because it seems like no one is actually doing this.

So I modified the scroll follow JavaScript and I’m glad I finally managed to do it. If you still think that it’s annoying, let me know.

After all these changes, I think I’m more or less happy with the theme already. I can finally concentrate on writing all the pending posts.

Not forgetting to thank those who took their time to comment and feedback on the previous post.

I’m calling it the Minima|eesm theme for its simple, clean and minimal design.

Previous design

This is the second time I redesign my blog. The previous design was done early of the year on 1st January 2009.

I really like the previous design for its colourful header. But I needed a more flexible layout to accommodate bigger pictures.

So I decided to redesign. Although I’ve planned this redesign since August but I’ve got no time to do it until recently.

Inspiration

This time, inspiration came from a website I kind of stumble upon. It’s the Ministry of Type.

I love its simple and minimal design so I decided to go for minimalist design.

What’s new

Let me explain to you what changes I’ve done compare to the previous design and how I did it.

One of the biggest change is of course, as you can see, clean and minimal. Besides, I’m using HTML5 and a little bit of CSS3 for this.

At the top of the page is my latest Twitter status grabbed from Twitter using the Twitter Tools plugin.

I’ve added the related posts as well (appears in single post pages only). This is a difficult one. First of all, I have to use the Yet Another Related Posts Plugin (YARPP) to generate the related posts. I’ve tried several plugins but YARPP gives the most accurate results compare to other plugins. But too bad it doesn’t generate thumbnails. So I have to modify the codes to use another PHP script timthumb to grab the first picture in the posts and generate a thumbnail out of it. I spent a few days doing that.

Next, the scroll follow thingy. It’s the post information and the comment form that keep following you wherever you scroll. It’s rather easy to achieve this effect. I used the jquery-scroll-follow JavaScript and with just a few lines of JavaScript and it’s done.

Ok, the next one is something I am most proud of and spent the most time doing it. The timeline archive page. It’s accessible from the footer via the “View all posts” link. I saw it first at astheria.com and immediately I knew I’ve got to do this. The difficult part is not only I have to group all posts by month, but I have to calculate the distance between the posts according to their difference in days.

Beside all the big changes, there are other smaller changes as well like using icons from bwpx.icns project by Paul Armstrong, using the sIFR for replacing the headers with Helvetica Neue Thin, comment author’s avatar grabbed from gravatar.com and also the next and previous post navigation.

Conclusion

Of course this is not 100% done yet. I’m still making some minor changes here and there. But overall, I’m very very happy with the result. If you have any suggestions or bug report, please leave a comment.

Update: changed font embedding and scroll follow.

After using the Minyx theme by Storelicious for one year (thank you Minyx, you had served me good and now it’s time for you to go),

followed by a failure attempt to redesign the blog in 4 days with this,

and then I decided to give myself ample of time with no deadline pressure and finally I came up with this.

The bright-and-colourful-morning-up-above-the-sky kind of new design wasn’t really my initial idea and it is completely different from the first attempt, but it turned out to be pretty good.

I love the cheerful and energetic characteristic. It makes me feel like a brand new wonderful day. Whenever I look at it I just feel, happy. I believe there’s no better name than “Happy” for this theme. So I’m going to name it the “Happy” theme.

Inspirations

The new design was initially inspired by the wallpaper below which I found at a website called emotioncore04.

The wallpaper was named “A trip to wonderland” designed by secroit. Although it doesn’t look like a wonderland to me but when I first saw it, I fell in love with the style, the details and also the colours.

I followed the style but added more personal stuffs such as a DSLR (which I will get 1 soon), a flute, an iMac and also some coffee beans.

The rainbow river was inspired by these contemporary abstract paintings.

I always love abstract paintings with vibrant colours. How I wish I have the second painting in my room.

Large text sizes

You might be shocked when you first see the texts became so big. Please, let me explain.

After reading The 100% Easy-2-Read Standard written by Oliver Reichenstein at his website, I got so inspired and decided to adapt the standard by making the text size on my blog bigger.

At first, you’ll be shocked how big the default text is. But after a day, you won’t want to see anything smaller than 100% font-size for the main text. It looks big at first, but once you use it you quickly realize why all browser makers chose this as the default text size.

I couldn’t agree more with what Oliver said. Using the default browser text size at 16px is much more easier to read and it makes the reading experience more comfortable and faster.

In a nutshell

I will continue to work on my blog to improve it. I really enjoyed the process and so far I’m loving the outcome. Hope you will like the design too.

Wish everyone a very best year ahead and Happy New Year!!!

I have officially published 67 posts and you are reading the 68th.

While reading the first post dated exactly 1 year ago titled The return of me had brought back a lot of memories. It’s been a long way.

My initial plan for commemorating this anniversary was to revamp the blog with my own new blog design. It’s a shame for a web designer to use other people’s design for one year.

So I bet with Kevin that he will see a new design on 13th of December 2008.

I had almost 1 month to do this but I never start until the last week. Hahaha… I guess I’ll never change. If you were to put me back to the past where I have enough time to redo my Final Year Project during my college time, I bet the result is going to be the same.

It took me 4 days to come up with this design.

Click on the picture to view its original size (Warning: 1600 x 1600 px).

I worked for whole Friday night until 3 in the morning for that vector portrait of myself. It turned out to be less satisfied.

I kind of like the overall layout except the design of the header and the background.

With a less satisfied design and limited time to convert the design into WordPress theme, at the end I gave up designing and watch Sex and the City instead.

Yes Kevin, I will buy you Jogoya as promised.

But it doesn’t mean the end of the story. I will continue to work on this design and hopefully I can finish it before 2009.

The toughest client of all is no body else but myself. I want the blog to reflect who I am, what I do and what I like. But deisgning it is harder than I thought it would be.

So if you have any ideas, comments or critics, do let me know.

After seeing Ah Max posting those beautiful pictures of Gaborone Dam, I feel like making them even more beautiful. And now I want to share with you how to enhance a scenery picture using some simple techniques in Photoshop.

I’ll be using this picture taken by Ah Max at the Gaborone Dam in Botswana as an example. Thanks to Ah Max allowing me to use this picture for the tutorial. You are the man.

This is a very nice picture and it looks professional, but with a few simple steps we can make it even nicer and it will look like as if it was taken using a film camera.

First of all, what we need is, of course, Photoshop. Besides that, I’ll be using a plugin call Virtual Photographer where you can download it from their website for free. It’s my favourite plugin.

Okay, lets get started.

Step 1 — Make selection

Make an oval marquee selection at the center of the image. Then go to Select — Inverse (Shift+Ctrl+I) to inverse the selection.

Step 2 — Create black vignette

Create a new layer (Ctrl+Shift+N). Fill the selection with black colour using the Paint Bucket Tool. Press D to reset the color picker, then using the paint bucket tool to fill the area with black or press Alt+Backspace to fill the selection with foreground colour.

Remember to deselect the area (Ctrl+D).

This will create a black vignette around the picture. I find it pretty nice to add black vignette on scenery pictures as it will make the picture looks more dramatic and draws the viewer’s attention to the center.

Step 3 — Soften the vignette

Blur the vignette using the Gaussian Blur filter. Go to Filter — Blur — Gaussian Blur and set the radius to 100 pixels.

Step 4 — Set the blending mode

Now, make the vignette less obvious. In the Layer Palette, set the blending mode of the vignette layer from Normal to Overlay. Then lower down the opacity of the layer to 40%.

This will make a nice vignette effect which darkens the corners of the picture.

Step 5 — Process colour using Virtual Photographer

Here comes the interesting part. Make sure you have Virtual Photographer installed.

Select the background layer. Then go to Filter — OptikVerve Labs — Virtual Photographer. The Virtual Photographer windows will pop up.

Select Landscape from the Presets drop down menu as shown in step 5.1.

Then, drag the slider of the Film Speed to the left most (-10) as shown in step 5.2. This will prevent the plugin from adding too much noise to the picture.

Click Process.

You may want to play around with different presets to find the effect you like. You can even make it a black and white picture.

Done!!!

Take a look at the original one.

And the enhanced version. Click on the image below to view the original size (1024 x 768).

With the help of Virtual Photographer, the picture now looks more vibrant, more contrast and more gorgeous without much of hard work.

That is it! My first ever tutorial. Feel free to leave your comments and I hope you enjoyed it.