Internet Tools Social Networking

Use twitter in Windows active desktop to post anytime!

Windows active desktop is a feature that allows you to embed a browser window (viewport) on your actual desktop. Instead of a window form, it’s accessible anytime on the desktop yet never takes up any task bar spaces.

Windows XP users can activate active desktop following these procedures. Basically you just right click on the desktop and select Properties to open Display Properties. Go with Desktop tab, click Customize Desktop and select Web tab in the dialog form.

Create a channel for Twitter by clicking New. Type in for Location and click OK.

It starts to synchronize for this new web item. After a few seconds you should be good to go. Just make sure Twitter / Home is checked for display.

You may notice that there’s a nicely embedded browser window of on your desktop now. Move it around and place it somewhere handy after resizing it a little bit to fit the screen.

Isn’t that great! You can start posting twits from there from now on or if you can’t chances are you haven’t logged in yet.

PHP Tips & Tutorials

How to parse a URL in PHP to get the domain / host name

This is just that easy to do as picking up a dollar on the ground.

You can, of course write your own function to parse a string that looks like a URL and return various parts such as the domain, directory, requested file and possible data fields. However, PHP has come with exactly the function you need so you really don’t have to reinvent the wheel.

That is parse_url().

$url_parts = parse_url('');

The output looks like:

[scheme] => http
[host] =>
[path] => /search
[query] => q=obama

The returned is an array containing a breakdown of the given URL. This way not only do you have the host name ( but also protocol scheme (http), server path (/search) and query string (q=obama).

Easy enough, huh?

PHP Tips & Tutorials

Bad practices in PHP coding

As opposed to best practices, we may as well take this as a collection of worst practices of PHP programming.

I have been a PHP coder for 1 and a half years. Not an expert myself, but I learn as much as I can and try to code to the highest standard possible. Below are some worst practices I absolutely vote against. If you are ever going to learn PHP or just starting as a PHP novice, taking my advice would make you feel a lot better in the days to come.

What you shouldn’t do in PHP:

  1. Relying on register_globals or too many global variables across the application or using global $xxx too much in function definitions.
  2. Using double quotes instead of single quotes for plain strings that don’t have anything inside to be evaluated such as variables.
  3. Using whatever the user inputs without checking for malicious attempts or never validating user provided data before using it.
  4. Mixing HTML, PHP and SQL in a total mess that you can’t tell the logic from the presentation.
  5. Suppressing errors by @ without using isset() in a conditional logic to check resource availability first.
  6. Using a resource without first checking its availability.
  7. Suppressing errors with error_reporting(0) in development. Actually even in production phase, it’s highly frowned upon.
  8. Falling in love with eval().
  9. Using <? … ?> instead of <?php … ?> just for convenience.
  10. Copying redundant logic (code) here and there which basically does the same thing.

That’s all for me. So if you are a PHP developer, what’s the worst practice in your opinion?

PHP Tips & Tutorials

Pretend your scraper script as a browser when scraping in PHP

It’s easy to make a simple scraper script in PHP but it’s also easy for data-centric sites to detect and keep out suspiciously continued page accesses done in large amounts and a small period of time. There are usually 2 ways for a site to detect possible scraping activities.

One is to make sure the visitor client has a justifiable name which a lot of unprofessional scrapers don’t have and the other being to detect if a large number of page fetches are done in a relatively small time span.

It’s almost impossible to deal with the 2nd but we sure can pretend to be someone who we are not, can we. The solution is to use cURL the PHP Client URL Library. Not only do you use cURL but also you specify the http request headers and referer:

$url = '';

$headers = array(
	"Accept-Language: en-us",
	"User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30)",
	"Connection: Keep-Alive",
	"Cache-Control: no-cache"
$referer = '';

$get = curl_init($url);

curl_setopt($get, CURLOPT_HTTPHEADER, $headers); // this pretends this scraper to be browser client IE6 on Windows XP, of course you can pretend to be other browsers just you have to know the correct headers

curl_setopt($get, CURLOPT_REFERER, $referer); // lie to the server that we are some visitor who arrived here through google search

// curl_setopt($get, CURLOPT_USERAGENT, $_SERVER['HTTP_USER_AGENT']); // this one's a plus, it specifically sets User-Agent in the headers. As we already have set that in $headers, we don't need it this time

Good to go. Now you know why server analytics and traffic statistics are just a bunch of well organized lies. Welcome to the real world!


CSS z-index doesn’t work?

CSS style property z-index determines the stack order of an element overlapping with others. There might be times when you find it not working for you and element with a bigger z-index falls behind one who has a smaller one.

Frustrating but why?

First, make sure the elements who has z-index property also has position:relative or position:absolute.

z-index simply doesn’t work on elements who are position:static which is unfortunately also the default position style for all HTML elements if you don’t specify otherwise.

Now is it working correctly?

Well, to understand more about the z-index thingy, head to here.

CSS & HTML Tips Web Design Tips and Insights

Make scaled images in IE smooth

As ugly as it can get, an image displayed in IE in dimensions other than its original physical sizes would look rugged. So how to smoothen scaled images in IE? An engineer at flickr revealed the secret:

img { -ms-interpolation-mode:bicubic; }

That’s it! Just add the rule to your stylesheet!


Business and Marketing

Harness the power of exponential growth, part 2 – what can you do?

Well after reading the first part, I was a bit lost. What the hell is this guy talking about exactly? Yes, exponential growth it is, and we should all make sense out of it in our business endeavors wherever possible. Okay, it’s sweet but how? How is this concept going to help us? And what are the practical approaches we can take to get to real exponential growth?

Building websites that’s viral in nature

Plain information sites created and maintained by owners alone aren’t naturally viral because visitors don’t spread your site by themselves. They may, of course, if they are pleased to. But no matter how many incentives you provide, be it extremely beautiful site design, unbelievably useful content or even monetary rewarding referral program – it’s not viral in nature.

Natural viral sites, however, integrate human connections in the bare bone business model and the entire value providing process. The referral mechanism works inherently in the system rather than motivated by external factors.

An article directory is a typical naturally viral site. The idea is old but it works exponentially for the owner once its popularity passes the critical mass. Because it’s popular and bears lots of useful content, gaining unparalleled search engine authority and luring mountains of traffic, internet marketers flood to write even more articles for the site, making it even more useful and popular. Why not? It’s a win-win. The owner now can just sit there and enjoy the exponential growth. The groundwork – the past hard work – has paid off and now is working for the owner into the future.

Stuck with the business model? Choose wisely and make it viral in nature so 1 hour you spent on it now is worth hundreds in 3 years. Successful examples of article directory include, and

There are tons other naturally viral business models, one of the most common is email service. The communication via email, which is just the essence of it, advertises and spreads the service provider itself because you have to always make public your email address thus publicizing the provider’s domain.

reCAPTCHA is also a natural viral model.

Produce not only happy buyers / customers but extremely happy ones

By extremely happy, I mean they are so happy that they can’t wait to recommend you to their colleagues and friends. Businesses who produce such customers are a rarity. Things they hardly do or never did include but not limited to:

  1. Brewing breaking ideas and market them to the public instead of just tangible products or services. Because ideas spread.
  2. Creating products that deliver value 10 times the price.
  3. Making customers into fans by fixing everything they have screwed up. No questions asked.
  4. Proactively answering the plea for help 8 months after contract closure.
  5. Forming lifelong relationships with each and every customer, providing not only support but also personal help.
  6. …

Part 1: Harness the power of exponential growth


8 Golden Rules of Writing CSS

Update: added 1 more rule.

CSS is not hard to learn yet tricky to master. What differentiates a veteran from a bunch of rookies is scale. The C language isn’t that sophisticated to crack – though still need quite a few months to get through the core and be properly trained – but there’s apparently huge gap between a 10-year C developer and one who’s just been doing stuff for 5 years. 5 years is hell of a long time for any language or technology. Anyone with an average brain can learn anything quite well given that much time in study and practice. But there’s always always a little more.

The road goes ever on and on.

— J.R.R. Tolkien

You know everything the C language offers and have a good command of all the features. You are also well educated in algorithms, software engineering and project management. Now you graduated after 4 years of respectable training in C. However can you write another Linux from scratch as Linus Torvalds did? No you can’t. So what separates him from you?


These 10 rules below apply effectively in large projects consisting of tens of thousands of CSS rules. However you may benefit equally from them on relatively small projects.

  1. Provide as less presentational information as possible.
    1. Keep only absolutely necessary styling rules and eliminate any that doesn’t exist for a solid reason. Redundant styling makes it a nightmare to debug in large projects.
    2. Let the browsers (computer) do the math for you, you just provide them with initial layout parameters such as width. If you find yourself doing arithmetic calculations about width, padding and border over and over, you are doing it wrong. Although it may appear all right at first, it will take considerable amount of time to alter the layout later simply because you have more than 1 places to take care of.
    3. Take height out of any element containing text inside.
    4. Redundant coding is the easiest way to bugs.
  2. Keep track of everything you have done along the way.This includes how you have done the layout, what positioning techniques you have used and where. Inspect your styling every 500 rules to make sure you have a clear framework of what you are doing in the mind.When you look at the work in browsers, you know all the things you have put up together don’t come in a haphazard way but well organized and can be altered in whatever way you want anytime. It’s a state of mind that’s in control.If you find a problem solution after hours of blind struggle without knowing why or thinking that there’s no need to do that and move on, you will be in big trouble very soon.
  3. Logically group your rules. I group rules in the order:
    • general styles (mostly in tag names)
      • reset
      • links
      • headings
      • inline tags
      • general form styles
      • other elements & tags
    • page layout & structure (mostly in id)
      • body styles
      • layout divisions
      • layout positioning
    • helper styles (mostly in class, named after the effect they create)
      • errors
      • notifications
      • specific button style and so forth
    • cross-page components (class or id, named after the component function)
      • most of your styles go here
    • page-specific components (same as above)
      • most of your styles go here
    • components positioning
      • cross-page or site-wide positioning
      • page-specific positioning
    • overrides
      • cross-page or site-wide override
      • page-specific override

    This is a component oriented styling structure. Alternatives always exist for different situations, such as helper style oriented styling structure.

    If the logic flow goes rather lengthy, create separate CSS files to accommodate them, logically.

  4. Hacks are ok but if you find yourself abusively using them to adapt the styles to IE or any other browser, you might be doing it wrong in the first place. It’s totally possible to do things without any hacks at all especially simple undertakings but with a few unpleasant compromises.
  5. For any styling component, separate its positioning styles (styles that prescribes how the component interacts with its environment) and its inherent styles (styles that the component bears wherever it goes on the page or when it’s moved to another page).
  6. Reduce the length and levels of any selector wherever possible. If you don’t care about it in a large project, chances are as you write along, the length and levels of selectors will grow until you have a lot of !important here and there and you still have to keep growing them if the work goes on. That’s not a pretty sight.
  7. Code simplicity is the enemy of modularization. Choose your clan wisely.
  8. Cascading is your dear dear friend. Cascade it for the sake of coding ease and elegant style structure!
  9. Float and Position: Avoid, if at all possible. Think twice before floating any element or make it positioned relatively or absolutely, is it REALLY necessary?

Well actually I have much more coming trivial tips just they don’t fit in the macro style I’ve laid from the beginning of this post. As many languages and software engineering itself does, CSS should nurture its own building patterns to adapt to different situations and solve specific engineering problems.

Fonts & Typography

Symbolic fonts: Webdings and Wingdings

Webdings, Wingdings, Wingdings 2 and Wingdings 3 are very interesting symbolic fonts shipped in all versions of MS Windows but not included in other OS and platforms such as Mac OS. All versions of Internet Explorer display them correctly in CSS typography but in other browsers you can’t expect them safe for text glyphs because most of the characters or symbols are not found in Unicode.

Make a tiny image of the glyph for web usage.

Here is a complete collection of usable glyphs found in Webdings, Wingdings, Wingdings 2 and Wingdings 3 assembled in layered PNG. Download and open it in Fireworks so you can easily extract any of them to make an adorable tiny symbol image in your web designs or logo designs.

Webdings, Wingdings, Wingdings 2, Wingdings 3

Note that they are not web safe because only Windows comes equipped with these fonts. For a list of web safe fonts, read here.

CSS & HTML Tips Fonts & Typography Web Design Tips and Insights

Let’s use Lucida Grande for a change – 13 web safe fonts revisited

The 10 web safe fonts, Arial, Impact, Georgia, Times New Roman, Trebuchet MS, Comic Sans MS, Verdana, Tahoma – ahhh, wait a minute, I can’t remember the last 2. Let me take a look at the 9 web safe fonts, ok, it’s Courier New and Arial Black. Tahoma isn’t included in the 9 browser safe fonts list – are those that look almost the same across platforms such as Windows, Mac OS and other reading devices able to load web pages.

Serious web designers use and only use these fonts for web page texts to make sure the intended typography are correctly rendered in all visitor browsers. In addition to a few non-text symbolic fonts such as Weddings, below is an alphabetical list of the common web safe fonts for CSS typography:

(Windows font | Mac font | Font family)

  1. Arial, Arial, Helvetica, sans-serif
  2. Arial Black, Arial Black, Gadget, sans-serif
  3. Comic Sans MS, Comic Sans MS, cursive
  4. Courier New, Courier New, Courier, monospace
  5. Georgia, Georgia, serif
  6. Impact, Impact, Charcoal, sans-serif
  7. Tahoma, Geneva, sans-serif
  8. Times New Roman, Times, serif
  9. Trebuchet MS, Helvetica, sans-serif
  10. Verdana, Verdana, Geneva, sans-serif

Yeah, right. But that’s not all. These 10 fonts are not only web safe but also bear the same name across platforms. Or is it? Nonetheless, we have a few more choices than these that are also safe to use in cross-platform and cross-browser CSS typography:

(Windows font | Mac font | Font family)

  1. Lucida Console, Monaco, monospace
  2. Lucida Sans Unicode, Lucida Grande, sans-serif
  3. Palatino Linotype, Book Antiqua, Palatino, serif

Actually there are a few more, however as they are bitmap fonts rather than in TrueType, they’d look rugged when resized in browsers.

The 9 web safe fonts I have included in an image are very very incomplete. Not only does it miss Tahoma, Geneva, sans-serif but 3 advanced web safe fonts that’s our point here. Though they have fundamentally rather different names on different platforms, you can just copy and past the font-family lines above to use in your CSS, expecting the typography to look exactly the same on both Windows and Mac.

Let’s use Lucida Grand for a change! 🙂