Keefe

Powered By Jekyll

Fri, 19 Feb 2010 06:00:00 PST

Written by written by Tom Preston-Werner, co-founder of GitHub, Jekyll describes itself as a simple, blog aware, static site generator. As of today, this site will be powered by Jekyll, all previous posts and pages have already migrated from Wordpress.

The greatest advantage of Jekyll is that it allows you to store everything from the blog’s template to it’s content in your local machine. The contents are generated using the Liquid templating engine and you can write using standard html, Markdown or Textile.

How Is It Better?

When powered by Jekyll, it means everything is in plain-text. In order words, it may be be placed in your favourite version control software like Git or Subversion, allowing you to backup your data, track changes you’ve committed and accessing the files on other computer.

Serving static files also enables your site to be immune to high traffic especially those sites who had not prepared their site for that sudden surge of web traffic. This is due to the lack of caching in most database-powered website and the increase of traffic takes your site down or slows down the response time significantly.

Deploying

Of course uploading all the generated files to your server everytime you made a change is just plain wrong. Some have suggested using Git to do the hard work. I myself find Rsync much easier to get the job done. Others use a combination of Rake & Rsync.

Blog Exposure Through Submission

Fri, 22 Jan 2010 06:00:00 PST

For whatever reason we blog one thing remains constant, we want our blog to gain exposure. Even if you posted the highest quality of post, it would still go to waste if there is no one to read it. Naturally exposing your blog to the world is a high priority if not the top priority and there are many different ways to gain exposure. The easiest & cheapest way would be submitting your blog or blog post to other websites.

Every one of the sites that you submit to have their own visitors even if you only managed to grab 1% of the visitor’s attention, that can add up to a lot of them if you submit to 100 of them. 100 of them isn’t really a lot especially in design websites, where almost every one of these websites have community news where anyone can submit a post to be displayed at their site.

To that end, below is a list of design websites that you can submit your blog post to. Yes, there is exactly one hundred of them sorted in alphabetical order.

The thing about long list though is that they are error prone so if you spot any, please inform me. If you liked to submit your site to be included into the list you are welcome to do so as well.

The Problem With Drop Cap

Fri, 15 Jan 2010 06:00:00 PST

I’m pretty sure drop cap requires no introduction when it is commonly used in print material such as magazines & books, sometimes on the web as well. Creating drop caps is relatively simple, we style them in the early days using the <span> tag, then came the css selector where you can easily target the first letter of the paragraph using the :first-letter pseudo-element. Yes, creating drop caps is simple but to do it correctly is a different story.

To properly use drop cap, it must be on the same baseline as the last line of text it spans and on the same cap height as the first line of text. To achieve that in with css is actually harder than we imagine due to the fact that almost every rendering engine treats the drop caps a little differently.

Drop Cap

To give you an idea of what I mean below are the drop caps, rendered with padding, margin and line-height set at 0 on different browsers.

Safari 4

Firefox 3.5

Opera 10.10

As you can imagine styling them to render almost perfectly if not perfect across all browsers is a very challenging task. I find that it can only be done with a mixture of margin & line-height. Though to find the perfect mix requires heaps of trial & error which quite frankly is a little annoying.

I’m sure some of you may have more insight into this problem and I’d be very interested in seeing any evidence or suggestions you have on this problem.

Dropping Blog Comments

Fri, 08 Jan 2010 06:00:00 PST

As some of you might know, this site has no comment system. Many people wonder why I disable it when Wordpress has a great comment system—all I need to do is just style it—ready to be use.

No More Housekeeping

As Kroc Camen puts it “Public comment threads just encourage people to write a lot of words, and say nothing.”, and I do agree with that. When it comes to blog comments on the web, most of them are useless. There are too many comments like “Great post, keep up the work!” & “This is a stupid post” that does nothing but clutter up the comment thread.

Some say having a community inspires debate, but what I mainly observe is through the power of Internet anonymity, it mostly inspires hit-and-run comments. Unintelligent, senseless spams that in the end requires the site owner to do regular housekeeping is a waste of time. Wasting time of the site owner where he or she could use that time to write a quality article.

It Inspires Debate

Quality rebuttals, the ones that results in quality exchange of ideas. It is one thing to post meaningless comment on someone’s blog, it is another when you argue your points with your readers watching. When other people are looking you, its harder to make a fool of yourself. Who doesn’t care of their own reputation, especially those who have many readers following and judging everything you type.

One example of this is when Kroc Camen linked one of my post. His comments was constructive, leaving me reflecting on some of the poor choices I made. It is no shame in being told you are wrong, in fact I would appreciate it more when people points out what I’ve done wrong. How else can one be right without being wrong?

Show What You Want To Show

Take this site for example, this website belongs to me, it is written for people that wants to read my site. When my visitors visits my site, I expect them to read what I write. What I written has always been what I could to my best ability and I want my visitors to see what I want them to see.

That can never happen when the blog is bloated with comments. With the addition of comments, visitors that read the blog will need to skim through the content and decide which content is worth the look and which isn’t. That is nothing like what I imagine the visitors will need to behave when they come to this site.

What Then?

I am not here to suggest an alternative but people have been exploring different ways to bring the discussion elsewhere, be it with twitter or forums. They all have their strengths and weaknesses.

As for me I prefer the good old fashion email. It is been around longer than I have and it has served the people on the web quite well. Those who absolutely must get their comments out of their chest can email me. Those who just want to say hi can email me. Those who wants to inform me of their rebuttal can email me.

v2 Revisited

Fri, 01 Jan 2010 06:00:00 PST

v2 was introduced more than six months ago. The theme was meant to grow and improved constantly and it has been so it is time to look at some of the changes that has been done in 2009.

Look & Feel

Visually the theme is very much different from it’s initial release. The biggest change of v2 is that the layout is now one column.

As v2 continue to improve, one major thing that concerns me is the distraction of the sidebar. After many considerations, I’ve decided to remove the sidebar completely and the items from the sidebar will be relocated to a new page. The page now looks refreshingly focused, at the same time putting more emphasis on the content.

Another major visual change of v2 is the font. Unlike the last few changes, I’ve always used san-serif fonts and sized at 12px. Currently v2 has been changed to using a serif font sized at 16px. With bigger font size, the site’s readability instantly improved, though it requires some time to get used to the larger font size. This has been explained clearly, many feedbacks were fairly positive as well.

The main motivation behind the many design changes for v2 is that I believe ultimately design is about stripping away unnecessary elements. When it comes to design, the ultimate goal is to communicate a message to the audience and the easiest way is to present them as simple as possible.

Below are screenshots of the major visual changes of v2 for those who have not seen the previous design.

Initial Release

v2 first major interface change

v2 second major interface change

Mobile Version

When the theme was first launched, there was no support for mobile devices. v2 now supports mobile device that supports css 3 media queries. Everything is handled by css, while the markup remains exactly the same as the desktop counterpart.

Starting from markup is no news for me as that has always been the way I design websites. With good markup you can easily create a different style without ever changing the markup, that’s the beauty of seperation of style and content.

A well structured html markup will stand the test of time.
keefe tang

Targeting devices through screen resolution however presents a major flaw. Take the new Verizon Droid for example, it’s screen dimension is about the same as the iPhone but the resolution of the Droid is 854px by 440px. The current media queriy used targets a maximum width of 480px, effectively leaving the Droid out from the mobile style, though it would make sense to include it to display the mobile style.

Currently this is not much of a problem since iPhone’s mobile Safari dominates the mobile browser market. Until it is necessary, I would still prefer using css than sniffing user agent.

v2 mobile version (portrait)

v2 mobile version (landscape)

Style Sheet

The css has been rewriten and seperated into sections controled by css 3 media query. The style starts with the general style of the website, then the printing styles, followed by the mobile styles.

The reason I combine everything into one style sheet instead of linking them with seperate <link> tags with media="print" etc, is because the browser downloads the style sheet regardless. That is why I combine all styles into one style sheet, making editing much easier while reducing http requests.

To make it easier to view my style sheet, I’ve also used Apache’s url rewrite engine to rewite my style sheet’s url to http://www.yun4.net/css/, giving it a much simpler url.

2010

Right now there is no huge plan for v2, the theme will continue to improve no doubt but right now I can’t think of anything major to be improved but to change that dull anchor link to something other than #000. Perhaps some of you can shed some light on it or just provide some feedback to me.

Keep Your New Year Resolution

Fri, 25 Dec 2009 06:00:00 PST

New year is around the corner, it’s that time of year again where we look back and reflect on what we’ve accomplish in 2009. It is also the time where we look forward to what next year has to offer and what we wish to accomplish in the coming year.

Most of us do it, we tell ourselves that we will change and by the end of the year most of us fail to live up to our promise. The problem is we often make vague promises. We tell ourselves to exercise more or smoke less, and while they are all well intentioned, they lack clear goal and very often quite hard to accomplish.

Simplify

Start with something that can be easily accomplished. Instead of saying exercise more, say 30 push ups a day or instead of saying smoke less, say smoke one cigarette less a day.

Breaking down a seemingly difficult task into smaller pieces makes accomplishing it much easier. For example, if you want to quit smoking, watching yourself picking up a cigarette everyday will make it harder for you to quit but if you start by reducing the amount of cigarette you smoke by one a week eventually you’ll find yourself successfully kicking the habit.

The best thing about the future is that it only comes one day at a time.
abraham lincoln

Breaking your goal into smaller pieces not only helps you better achieve your goals. Should you ever failed to achieve your ultimate goal, you would still have accomplished some of your smaller—and yet still significant—goals. Even if you didn’t kick the smoking habit entirely, you would’ve at least dropped the amount of cigarette you smoke a day.

Execute

Many people find themselves not knowing where to begin changing. With the goals broken down into smaller bits and carefully planned out, starting doesn’t seem to clueless anymore.

The journey of a thousand miles begins with a single step.
lao-tzu

Breaking down tasks into smaller, simpler pieces can only make it easier to accomplish, in the end it all boils down to how determined you are in keeping your resolution.

Today

Fri, 18 Dec 2009 06:00:00 PST

Some of you might already know that I have commited myself to Project52, this is a good cause having people to commit to a meaningful challenge where writers will be committing to produce at least one article a week for a year.

Some of you might also notice that I’ve started posting articles when the challenge is suppose to start at the 1^st of January 2010. Why? In short because I am doing this to improve my writing skills and I don’t really see why I can’t start right away because I am doing this for myself.

I will do it tomorrow.

Haven’t we all said that. Whether it be an exercise, diet, assignments, we like to procrastinate. It seems to be the easier choice. We get to put off doing the task, while assuring ourselves that it will be done in the future. Brilliant! That way we can protect our ego while avoiding the feeling of guilt. Brilliant! How about instead of telling yourself tomorrow, you ask yourself “Will tomorrow be any different?”.

The answer is it wouldn’t be. So why not get it done right away and have the rest of the time doing what ever you like to do with nothing to worry about?

We often forget the importance of now, we cannot undo the past, we cannot foresee the future and yet we are very often obsessed with the past & future but rarely the present. What happens next is the direct consequence of one’s action now. So why not make the difference now?

No one can truly help you but yourself. We need to start looking inward into ourselves and revisit the question, “Why do I want to this?”, because ultimately there is no better person to motivate yourself than yourself.

There is no other help but self-help—doing one’s best, dedicating one’s self wholeheartedly to a given task, which happens to have no end but is an ongoing process.
bruce lee

Many would think that with the public judging you would motivate you to be more committed in completing the challenge people who thinks so are greatly mistaken. The fear of public humiliation is what I consider a “negative” motivation—writing because you fear being judged by people in a public forum. While that can be a good motivation tool people who are motivated this way are almost always driven and consumed by fear. That is why a fearful person is easily manipulated.

The key to self motivation is to be honest with yourself. For me, the reason I accepted the challenge is to improve my writing skills. When we the motivation comes from within, you are accountable for yourself. If you truly intend to be honest with yourself, it is most likely you would succeed. Remember this: “The difference between negative and positive motivation is the difference between surviving and living.”.

Don’t get me wrong, there is nothing wrong at all in setting a date for the project52 challenge, it gives people time to prepare and sink in the idea of posting quality contents regularly. This provides ample time for to spread the word and lure more people to join the challenge. As I have mention on my previous post, people are always resistant to change but when people around them are committed to change as well, we become more likely to successfully change.

But I am here today telling you that I am changing now. I will post at least one article a week starting now.

The problem with change is that it’s always a day away. Tommorrow, always a day away. Well I’m making the change today, not tommorrow, today. Today! The sun needs to rise today not tomorrow. It’s just not good enough to say we will do it tomorrow.

Feed Again

Sun, 13 Dec 2009 06:00:00 PST

There has been some mix up with the site’s feed lately. The issue has since been resolved but unfortunately it couldn’t be done without changing the feed url. I strongly recommend resubscribing to the new feed link by clicking the feed icon located at the top right of the page. Apologies for any inconvenience caused.

BIG on type

Fri, 11 Dec 2009 06:00:00 PST

Many of you may wonder what is the deal with the big font size on my website. The font size is really not at all as big as you thought it is. We only think it is big because we are surrounded by website with freakishly small font size.

Take DaringFireball for example, the font size set on this website is 11px, that is extremely difficult to read comfortably without placing your face near your screen. Even it’s level 1 heading is sized at 1.55em, that is 17.05px just about a pixel bigger than the default font size.

It’s Not Big

When talked about 16px font size we immediately say big font or large type. The fact is it is not big or large, it is the default size. Website using font size smaller than 16px are the ones we should be calling small and yet 11px & 12px font size have dominate the market so such a long time it has been perceived as the default size by the viewers. Being presented with the default font size now seem to be huge and odd.

The default font size is not odd, in fact, when you look at it again for a few times it almost seems right. The question then becomes “why isn’t most website using the default font size?”.

To understand it we have to look at the old age. The time where computers are starting to gain public recognition, as a tool that can use at home to simplify our life. A time where the Internet is booming. A time where displays are still relatively expensive and most website are faced with a problem. The displays have low resolution.

Using the default size means that information is hard to display as 800×600 can’t display that many lines of words on the screen so we use a smaller font to get the message across. Using a smaller font size makes sense back then but somehow web designers never kept up with the display changes. We are no longer confined by 800×600, I don’t even have visitors viewing this website with 800×600 resolution. We find so much space in design and there are so many empty spaces on both sides and I don’t think anyone wants to fill them with 12px Helvetica.

It’s Small

Physically 16px is about as big as 12pt in print. That is not at all big, most print material are print with this size. Add to that is that we normally read from a distance much further than we do with print material, the impact is significant.

The saying 95% of web design is typography should be familiar to web designers—if it isn’t I suggest you don’t call yourself one to save yourself from embarrassment—then what is more important than to design your website to be easily read without printing your face onto the screen every time you need to read—I believe we have enough young children wearing glasses.

There is no reason at at all to squeeze that much information into the screen, in fact it is even recommended by w3c. Having a font size bigger or equivalent to 16px could also be beneficial to businesses as well.

The problem here is a basic usability and accessibility issue: a good design should look good without requiring the user to enlarge or reduce the text size.

Join Now

Change is hard. Why venture into the unknown when we are comfortable just the way we are?

We people are always resistant to change, a study however have found that happiness can lift the mood of a person’s extended network of friends and that very same support can influence change in someone. People are better able to change when people in their social network are changing as well.

People are more likely to make positive changes in their lives not only when their friends do, but when their friends of friends do, and when their friends of friends of friends do.

All it takes is just to define the font size with font-size:100%;.

minimal design

Sun, 06 Dec 2009 06:00:00 PST

The word design have a very scattered applications—as a verb, a noun and an adjective—many of us does not seem to fully grasp the goal of design. Design plays a crucial role in communicating message to the audience. A great design will generate interest thus encouraging the audience to examine the content of your message.

Web audience show a relatively short attention to posts and articles they find on the internet due to the massive amount of information available. To go through every article in detail would be too time consuming, that is why the audience skim through, and yes, sometimes the good articles are missed.

The goal of minimal design is to strip away unnecessary design elements from your design, unnecessary design elements that will only confuse the audience rather than keeping them interested.

You know you’ve achieved perfection in design, not when you have nothing more to add, but when you have nothing more to take away.
antoine de saint-exupéry

The common misconception about minimal design that it is used to focus the audience to the content of the website rather than the visual presentation of the design. That is simply not true at all. Minimal design, like all design principles is to compliment and enhance it’s content rather than to shift the audience’s attention to the content.

Once a good design catches the attention of the audience, the audience will naturally find interest in examining your content. Minimal design merely does that more quickly than others due to the nature of the design.

Minimal design aims to deliver a clear and direct message across to your audience. Cramming all the information you can find will only make a bad impression on the audience and very often the audience becomes uninterested and leaves.

Design is all about simplifying our life, enabling us to accomplish tasks more effectively. If your product does that, I don’t see why your audience will not trusts you and return for more.