tehCpeng.net - Behind the scenes

tehCpeng.net was born on midnight, 14 February 2008. And no, it is not a result of leakages. Planning on the name, hosting plans, domain name, layout, design etc. began months before that.

TCP Screenie

2008 marks a new beginning for this blog as it once again goes through a major milestone. From its early crawling days, it has now its very own domain and a whole new name - tehCpeng.net.

Not forgetting its roots, my blog had its humble new beginnings thanks to my fellow Kuwaiti friend, Stafa. On 5th January, 2005, Stafa offered me hosting on ember.geuvara.com before shifting to ember.stafa.us on 11 March 2006. With that, I have been relying on his sheer kindness for a whopping 3 years and 2 months. Words can’t express my gratitude to him, only credits at most. So, thank you man!

Why tehCpeng? Why not Barleypeng or something?

Because its my favourite drink. Enough said. Hehe okay, another reason would be that it symbolises Kuching in a way since Kuching is well known for its teh-C pengs. Heck, I could even use this chance to promote Kuching teh-C peng. =P

Also, as I stressed before in my About page, tehCpeng.net has absolutely nothing to do with that chinese forum at tehCpeng.com. The fact that the spelling and the upper case ‘C’ being similar is purely coincidental.

Wordpress?

Wordpress is a blogging platform kind of like those of Blogger, MovableType, Windows Live Spaces, LiveJournal and so on. It’s free, open sourced, and what I like about it most is that it is customizable down to every single nook and canny. And if you’re itching on some missing features, just get yourself a plugin from a myriad of available plugin repositories all over the web.

Wordpress allowed me the flexibility of customising my own theme without compromising usability and simplicity in writing and posting. That itself, is a huge advantage for peeps like me who regard designing as a hobby, but just wouldn’t dig much into coding the actual backend. Wordpress takes care of that for you, and does a brilliant job at it.

Seriously, designing and maintaining a blog haven’t been this easy. =D

I had always loved to recommend would-be bloggers to embrace the Wordpress love. If you have hosting and your own domain, get yourself a free copy of the Wordpress package at Wordpress.org and start blogging! If you don’t have hosting or a domain, don’t worry, you are not left out because the guys behind Wordpress created Wordpress.com where you can start your own Wordpress.com blog for free, hosting and all! =D What are you waiting for?

Can I have your theme?

Unfortunately, not at this moment.

I don’t think I would be releasing this theme anytime in the near future. That defeats the purpose of creating my own theme anyway - for originality. =) And I wouldn’t want to bear the responsibilities of maintaining support or compatibility issues for the masses.

I have yet to name my theme or should I even name it at all? It is essentially a heavily modded hemingway theme by Kyle Neath of Warpspire. So heavy, nobody would notice it is based on Hemingway at all.

But keep your fingers crossed. A release may just happen in the future, just, maybe. =P

The Design

Early concept sketches

The concept and design of tehCpeng.net were thought out even before I settled for the tehcpeng.net domain. In fact, that cup you see on the top right isn’t filled with iced milk tea in the first place. It was merely meant to be cup of coffee when I planned to acquire the 31stdecember.net domain (for obvious reasons) during the early stages.

Choosing a domain name proved to be the hardest when I eventually dumped the 31stdecember.net idea due to its lengthiness and a couple of other reasons. After tremendous amounts of brainstorming, I settled for tehcpeng.net.

As a result, I had to fire up Photoshop to add the extra ice cubes for that teh-C peng look.

Clip

I took a top-down view of a table-top approach in designing the elements of the layout. Incorporating (hopefully) life-like visual effects that give the illusion that the blog is placed on a large flat surface with cups, notes, random daily objects, a digital camera, stacks of paper and tape scattered all over it.

TCP cup

Reach out for that cup on the top right and help yourself to some iced milk tea. =P

It was easily my first time creating a whole layout from mock-up to code. The easy part was to create a flat image of the whole layout in Photoshop. The real challenge was to convert that flat image (the mock-up) in Photoshop to workable code.

CSS Editing

A good month and a half was spent coding the Hemingway theme to bits. The coding work were not limited to bug-squashing and testing for browser compatibility. For a CSS and HTML rookie like me, this part was daunting for most of the time I resorted to coding through trial and error. But hey, it is through mistakes, they say, that you learn. =)

At the end of the day, I was proud that I had achieved, with whatever newbie coding skills I had poured into it, a theme with 95% similarity with my mock-up.

Tools of the trade

As mentioned above, all vector graphics such as the Walkman earphones, cup of teh-C peng, etc were produced in Adobe Illustrator.

Vectoring the earphones

Blog layout and the rest were crafted in Adobe Photoshop.

The pure CSS layout is based on the Hemingway theme and was hand-coded using the Wordpress built-in Theme Editor.

Slicing in PS
the final slicing process of the theme’s mock-up in Adobe Photoshop

Plugins Galore!

If you ever wanted to know, here’s list of plugins that keeps my Wordpress installation running with more juice:
WP-Table
Wordbook
Ubernyms
SparkStats
Search Everything
Framed Maintenance
Dunstan’s Time Since
Ajax Comment Posting
FeedBurner FeedSmith
WP Ajax Edit Comments

Credits

First and foremost, to Stafa of stafa.us for kindly hosting my blog all these years without asking anything in return. You’re truly a great friend! Thank you.

Many people have been a great help in making tehCpeng.net what it is today. I would like to extend my gratitude to

Looking for more? Check out my ‘For the geeks‘ page!

8 Comments

Jump to comment form | comments rss [?] | trackback uri [?]
  1. tehCpeng.net » Blog Archive » The Inaugural Post 18.03.08 / 8pm

    [...] admit this is no teh-C peng, but rather coffee. Read why here. I’d say its teh-C panas. [...]

  2. Matthieu 11.04.08 / 2pm

    Forgive ME, but more about the subject, please!! You are going away from the topic too frequently, therefore it is uneasy to read your posts.

  3. ember 11.04.08 / 5pm

    Which subject you might be referring to? I know, heh. I have that huge tendency to stray away from my points but I can’t find what I could be missing on on this particular page. =\

  4. Eli James 20.04.08 / 9pm

    I’m amazed you actually drew those headphones. They look like fairly complicated beasts. Did you use a tablet, then?

    I’d appreciate it if you added a subscribe to comments plugin, ember. I’ve left so many comments here I’m lost. Don’t know where to start checking for replies.

  5. ember 20.04.08 / 11pm

    Those headphones were rather easy. But i’ll tell you what was the pain in the ass - the ice in the cup! Those little buggers took a bloody long time to be crafted into (hopefully) perfection. And no, I don’t use a tablet. It ranks fairly high in my wishlist though. =P

    Hrm, I wouldn’t expect many to subscribe to my main rss feed since I don’t update that regularly, let alone set up a comment rss feed. But since there is a request..check the footer for the link! =D

    By the way, thanks for all the comments! I’m flattered. =)

  6. guchi guchi 02.09.08 / 1pm

    hi, i’ve been to your blog before when it was hosted in the old server.

    I’m considering hosting my blog as well but before that i want to work on a custom theme for my current site.

    What tools are best for doing mock ups, testing different browser versions and the actual coding?

    thanks

  7. ember 02.09.08 / 10pm

    Hey there! Welcome back! Hope you like what i’ve done with the place. =D

    I’m not really experienced myself, but as I’ve described above i’ll just relate to you what tools I used to design this blog of mine.

    For mock ups, I used primarily Photoshop for the layout and slicing and then occasionally Illustrator for the more illustrative parts of my design.

    For testing in different browser versions, I have as many different browsers installed on my current workstation as possible and constantly render my page in them to check for consistency.

    I also happen to have an old XP desktop which caters for my needs to test my page on IE5 and IE6.

    You might find these useful: Install multiple versions of IE or Browsershots

    I’m sure there’s a better way but I coded much of my blog using the built-in editor in Wordpress. =D

    Feel free to ask if you have anymore doubts!

  8. guchi guchi 03.09.08 / 11am

    thank you very much

Drop something.

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>




Safari hates me
clipimg

Recently

Categories