Hello there. I am Terry and I am a full-time undergraduate based in Singapore. I take photos, write a blog and design websites.

And no, I'm not a teddy bear.

Bookmarked: Memorial Day, by Boston The Big Picture

Memorial Day, by Boston The Big Picture

Don’t forget the soldiers who had fallen, and those who are still fighting overseas for your safety so that you don’t have to fight them on your own country. My heart goes out to the families and friends of the brave soldiers who have perished in battles and attacks. Rest in peace.

Soldiers are just the pawns of the government – while I fight for the cause to withdraw as many troops as necessary for the safety of the soldiers, it’s not fair to put all the blame on them for the death of innocent civilians.

Implementing sIFR 3

When teddy-risation Theta was released a few days ago, I packed a feature that was previously not present in my older themes – text replacement for headers, namely the post and page titles. Eli expressed the difficulty in implementing sIFR3 on a webpage on Twitter, so I thought that it’ll be great if I can share how I did that for my blog in the recent makeover.

Embedding a font

There are other ways to embed a font in a webpage – you can use @font-face in your CSS (it’s part of the CSS3 module) or the Web Embedding Fonts Tool (WEFT) by Microsoft. In my first few years of blogging when I was blatantly unaware of proper typography and appropriate choice of fonts, I used WEFT to embed the font Kristen ITC in many of my blog pages.

However, both methods have their own shortcomings – cross-browser support for @font-face is patchy at best, while WEFT is only recognised by Internet Explorer and not in other major browsers people are currently using to prowl the interwebs.

Dynamic text replacement

Then we have brilliant people developing different methods of text replacement – the idea behind these methods is the same: to replace a block of text of a common font to a block of text with a desired font, either by means of rendering an image or placing a flash movie in the original position of the text block.

Facelift Image Replacement (FLIR), by Cory Mawhorter, is a great way to replace text with images – the javascript scans the page for text blocks to be replace. FLIR finds the ones that you’ve specified. It screams of joy, grabs the text and sends it to a PHP script where it parses whatever text that is in the block. Transparent PNG images are rendered as a result, and they are sent back to the browser for display.

Scalable Inman Flash Replacement (sIFR, version 2 and see the latest version 3), by Mike Davidson and Mark Wubben, and initially conveived by Shaun Inman, uses flash videos to replace selected blocks of text. Javascript checks for Flash installation and then places a flash video file in place. The flash video file loads the font, and starting from 6 point font size, upsizes the font until it fits snugly.

What happens when Javascript is not available? For both FLIR and sIFR, they degrade gracefully and nothing happens – the text still displays, but in the original font-family that you’ve specified in your stylesheet, and nothing is royally screwed up :)

For this tutorial, I will be demonstrating how to get sIFR 3 installed, up and running on your webpage or blog. This tutorial is also helpful for those who’re intending to upgrade from sIFR 2 to sIFR 3 – the Javascript implementation is a little different between the two versions, so upgrading is not as simple as I initially imagined (that’s why I had to pull the Maintenance Mode page up for 2 hours).

Continue reading “Implementing sIFR 3″

Bookmarked: Death Cab for Cutie – Little Bribes

Today on Twitter, Jason and Susan shared this amazing video found on Vimeo. It’s an unofficial music video by Death Cab for the song Little Bribes, made by Ross Ching using “every time lapse, stop motion and live action camera trick that he could think of”. What is really impressive about this video is that Ross managed to avoid any repetition in the presentation of the song’s lyrics – a feat that needs a lot of creative juices, woah.

WP theme: teddy-risation Theta

teddy-risation Theta released!

teddy-risation Theta released!

So here we have, the eight teddy-risation WP theme in it’s fully glory. Just like the other write-ups that I do for my previous themes, I will be doing one for this one as well, no exceptions. Not only does this entry helps to catalogue my list of themes and my insights of designing them (I have goldfish memory, so a backup medium for my cranial storage is needed), but I hope it will also inspire others as well.

teddy-risation Theta is coupled with the tiny rebranding movement I’ve embarked on, to ditch the funky (and not very impressive) capitalised letters in the site name and my nick as well. Known by the pseudonym ‘teddY’ in the past, I am now changing back to ‘Teddy’ or as simple as it gets, my real name, Terry. You can address me with both names now, I really don’t mind, no worries!

This theme took the longest to design – the date of its conception was actually somewhere during and after my first year final semester examinations. Ideas always have to came at the wrongest of all wrong times, don’t they? I did a simple sketch on what I wanted on paper, and moved on to my studies. When the exams ended, I immediately started materialising the layout in Photoshop, starting from the header section.

Theme Hybrid

Theta is actually a child theme of Theme Hybrid. It is a free WP theme and you can modify it in anyway you want, or even create your own child themes that rely on the Hybrid framework. I did modify a few core files on the Hybrid theme, but other than that, all the styling and customisation you see here leaves the original Hybrid files completely untouched. That means that I can easily update my theme when Hybrid issues one, without breaking my child theme.

In the past I’ve always used Sandbox. However, I’ve decided to try out other new WP themes because sadly, the Sandbox creators have paused the development of the theme and the future is rather bleak. I have to say that I really loved working on Sandbox, Andy and Scott – I really appreciate the support and help you’ve rendered to users of your theme and your dedicated effort. Because of that reason, I realised that I have to start learning how to work on other WP themes – out of the many available options like Thematic, WP Framework, Whiteboard and The Buffet Framework, I’ve chose Hybrid… for just one reason – the main colour scheme is greyish blue. What a biased choice, isn’t it?

Hybrid was a little hard to tame at first, I find myself constantly referring to different files in the library for hooks, filters and etc. The styling was a little more challenging to do, because unlike Sandbox that came in plain and simple, Hybrid has a basic stylesheet built into it and it takes time to figure things out. One thing I really love about Hybrid is that it has wonderful typography – while I have inherited the font family from the previous theme, the spacings and arrangement of text-based elements are all inherited wholely from the 22px stylesheet. Hybrid comes with a few different stylehsheets – 18px, 20px and etc, indicating the line height. I wanted my text to be more spaced out, so I picked 22px.

Randomity, and the essence of it

This theme incorporated some interesting randomity in it – the gallery images in the gallery window changes everytime you load it – not only does the array of images displayed changes, their arrangement is also jumbled up upon each reload. I’ve combined several shuffling and randomising techniques to achieve that, maybe I’ll blog about it later :) if you want it, just tell me.

Another one is the Twitter users that I follow – I have their avatars displayed in the sidebar. I have a lot of them, but I only randomly display 14 of them while the rest is hidden so that I do not clutter the sidebar up. It’s a lot of PHP stuff that I had to do, but it was fun! I spent one whole day just doing the PHP part for the Twitter widget. Tedious, but very fun and enlightening.

Fonts and sIFR

The main typeface I use for the headers and the introductory paragraph is Alte Haas Grotesk by designer Yann le Coroller. The fontw as featured in the previous week’s Fonty Friday feature, which I run on a weekly basis. For the logo, I used Colaborate Regular by Ralph Oliver du Carrois.

Since not everyone has Alte Haas Grotesk installed in their computers and that the CSS support for @font-face is rather patchy, font replacement methods, whether is it by flash or by images, are preferred. I did a little research and decide to settle for sIFR – Scalable Inman Flash Replacement. I’ve made sIFR to only replace post and page titles, so that I won’t overload your computer and make performance sluggish – anyway, it’s really, really not recommended that you use sIFR for a big chuck of text! Keep it to headers only :)

Javascript-powered feautures that gracefully degrades

One feature that I put in a lot of effort struggling to make sure that it gets incorporated into the theme is gracefully-degrading javascript-powered features when javascript is not available or disabled. As you know, many sites nowadays are powered by javascript and many of them actually breaks when JS is disabled – a good example will be YouTube – try disabling JS in your browser and see what happens.

Most of the effects you see here are powered by jQuery, a very light-weight javascript library that helps you to achieve many things that requires advance knowledge of javascript in the past. Simple actions like the toggle effect in the comment form (try clicking on the labels and see what happen) and in the Twitter section on the sidebar (visible on main page only) are easily achieved by knowing just a little bit of jQuery. Lovely, isn’t it?

jQuery also allows me to select last-child of a parent element – the :last-child pseudo-class is not very well supported in every single browser (hint hint, IE6) and so we can actually use jQuery to insert a class to the last-child. If JS is disabled, the visual impact is not too obvious to be seen while in most JS-enabled visitors, it helps to achieve a uniform, consistent appearance of list items and etc.

jQuery is also used to create the fading effect of the header navigation links, as well as the Next and Prev buttons of the gallery window in the header. I might be writing a little more about how that is achieved in the future, but I shall not bore you to death in this entry.

I’m still learning how to use jQuery, so in this theme’s functions.js file, I’ve also added annotations and urls to useful websites for first-time jQuery learners. They are excellent resources where one can start learning jQuery, with little prior knowledge of any programming languages.

The 404 page

For this theme, I’ve also designed a cute little 404 page that people will land on if they’ve followed a broken link (it can be any, but I ‘m giving you this for convenience’s sake). Check it out!

Improved gallery

Last, but not least, the Gallery page has been improved upon too. Without the obstruction of the sidebar, there’s now more space for photos, heh!

That’s all!

I guess I shall keep this post short. If you have any questions, feel free to shoot! Anyway, I have a question for anyone who’s reading this: what WP themes do you use for your theme framework? Do you create a theme completely from groundup, or modify existing themes (like me) ?

There’s something in the making

teddy-risation Theta, in the making.

Ah,this is the best what I can show for the moment being. A little more and I’ll be spilling the beans of my upcoming (not to be publicly released though, sorry guys) WordPress theme. teddy-risationâ„¢ Theta is the 8th generation of my custom made, hand-coded WordPress theme, starting from Alpha of course. There’s a comprehensive list of screenshots of my previous WP themes at the about page, you can head over there to have a look at the older ones. I actually have two older ones – the Green and Blue versions but they’re so ugly that I wouldn’t be specifically calling for them here. Nonetheless, they are one of my first few experiences with full-scale theme design for the WP blogging platform.

The upcoming theme will be presented in an even more minimalistic way than the current layout is (you’re currently viewing Eta at the moment this post was published). It still consists of lots and lots of blue, a dark background evident from the screenshot, and a faint-coloured content holding area. I’ve always been dreaming of trying out a completely dark background theme but after seeing how Veerle and Abduzeedo (just to name a few) pulled out the colour scheme is such a divine way, I gave up trying it and stuck to the conventional white background black text variation.

If you haven’t noticed, I’m also in the process of rebranding this blog – the capitalised ‘Y’ and ‘N’ in the blog title has to go, I told myself. I’ve also started using Terry or Teddy instead of the teenage-feel ‘teddY’ nick when leaving comments on your blog. The nick was created almost half a decade ago by a teenager who has never knew much about design and branding, let alone the stupidity behind weirdly capped words.

The theme will be ready around the weekend, or latest by Tuesday if everything goes well. Claudia has engaged me to design a WP blog for her, I just submitted the mockup to her today morning. She’ll be forwarding the decision to me on Monday, so that I can start with the skinning of the WP theme. I think I will most probably be using Sandbox as the base theme because I have been using it for the past three themes and it’s such a joy to use :) If the Theta is not ready to be released by then, it will probably take another week or two to be finally done with. That is because I’ll have to place my client’s (and my paying job!) at top priority. Converting the PSD for Claudia shouldn’t be so hard this time because I’ve struggled and learned a lot when designing Theta. Theta is my first theme being converted from a true PSD to XHTML/CSS – I can’t believe that in the past, I just had a rough sketch of what I want in mind and then jump direclty into the coding. Nightmarish scenario!

Fonty Friday!

TGIF! I’m a little late for those GMT +7 and beyond folks because it’s already Saturday by now. Introducing you Petit Latin by Manfred Klein, a gracious, beautiful serif font. I’m personally not very fond of serifs because of my very specific taste for the little tiny ticks (serifs, as they call it) at the tips of the characters – besides from Georgia, I can only name Petit Latin.

Fonty Friday - Petit Latin

How to convince (insert name) to lock up the door

This is a hilarious prank video I was directed to on Facebook yesterday. Zachary posted about it and I laughed just so hard! Note: if you have a instrinsic, deep-down, uncontrollable and potentially fatal fear of the Jason mask, do not proceed (I’m just exaggerating by the way, but don’t tell me you weren’t warned).

Here’s the video description:

This kid wants to teach his aunt that she should lock her doors by putting on a hockey mask and scaring her while she is on the phone. Her reaction from the scare is awesome.

Get the Flash Player to see this content.

p/s: I love his aunt’s ringtone!

Updates on life

I hope you are not royally pissed of me for not leaving comments on your blogs. Life is a little too busy for the moment being – juggling the design of two WP themes is already enough, let alone my commitment of swimming 10km every week during the entire summer (I can also use that to prepare myself for the Perhentian Islands vacation). Today was a little unusual because I actually swam 5km instead of the stipulated 2.5km – the pool was surprisingly empty for a Friday evening and so I siezed the chance to swim a few more laps. When I hit the 40th lap (one lap is 2 x 50m – on the 50m long pool, it’s a return trip teehee) I told myself that since I’m already into it, I might as well double my day’s goal from 25 laps to 50 laps.

I train in sets of 3 laps (6 x 50m, that is) – 2 breaststroke (B) and 1 freestyle (F), and I cycle between BBFBBF for the set. I wouldn’t call it training because I’m not aiming to join some competition from my swim – swimming to me is exactly like photography and blogging to me – I have never had any idea in mind to earn money (or anything equivalent) from it, and I treat it as a personal pursuit and responsibility, a hobby that I indulge and a past time to enjoy. I embrace swimming only when I return home because the club pool is always vacant on weekday afternoons and I can have a whole pool to myself – plus a lifeguard watching over. It feels like you’re having a bodyguard because he just has to look after you and make sure that you won’t drown, haha.

Lately I’ve been watching Judge Judy off and on during design work to take my mind off things – it’s funny to know that there are still so many stupid people around. Like how this dumbo sued her friend over a damaged toilet seat, and the case was dismissed in 2.5 minutes haha. EPIC FAIL, I tell you. You should listen to Judge Judy’s comments, very hilarious indeed.

Oh, and the crappy local ISP, Streamyx, is making Twitter load at a crawl for me. I hasn’t been on for days and I’m itchy all over! I call that the Twitter Withdrawal Symptom. Darn. Well, Streamyx is shiteous at its best. So much for being a monopoly in the Malaysian broadband market.

That’s all for today! :) have a great weekend!

Page 18 of 194« First...10...1617181920...304050...Last »

Hello Easter Egg hunter! You've discovered the magic of the Konami Code!

Yea. You probably know what the Konami code is before getting to this page. So now what? Here is a randomised YouTube video on my favourites list... which includes Rickroll, if you're luck enough to get it.

You are currently watching You have been rickrolled!. Loving it? You can even watch the video in its full screen glory :)

The Konami Code:
Konami Code sequence