This image has been floating around Facebook and Twitter for a while now and I really got a kick out of it. I think this is the source of the image: Jay Mug – Stormtrooper Happiness

Related posts:

1. Finally! I’ve killed all the Vampires, Werewolves and Zombies on Facebook

Some reports say that 86% of people hate the new Facebook design, and I bet it’s the ticker that’s the target of everyone’s ire. I did some investigation and found that it was actually not too difficult to kill the ticker.. if you’re willing to get your hands dirty with CSS.

Background for non-geeks: CSS is a language that controls how a web page looks. Luckily, website users like us can also specify our own CSS to override what websites want to show us. In this case, we’ll be using our own CSS to hide the Facebook ticker.

Download the Stylish browser extension

Stylish is a browser add-on that enables us to use our own CSS for specific websites. It’s available for both Firefox and Google Chrome. Safari users can use the User CSS extension. (I’m a Safari user too, but the majority of the world isn’t. Hence the Firefox examples..)

Restart Firefox to complete the install process. The extension will now bring you to it’s website but ignore it. Go to www.facebook.com.

Write a new style for facebook.com

On the bottom left of Firefox, you should see a new ‘S’ icon. If you don’t, go to the menu bar, click View » Toolbars » Add-on Bar.

Click on it and select Write a new style » For facebook.com. Copy and paste the following CSS code in between the curly braces of the new window that appears.

/* Hide the ticker above the chat sidebar */
div#pagelet_ticker { display: none; }

/* Hide the divider between the ticker & chat sidebar */
div.fbSidebarGripper { display: none; }

/* Hide the ticker when sidebar is closed */
div#pagelet_rhc_ticker { display: none; }

You should have something like this:

Save it and voila! No more Facebook ticker

Safari and Chrome users, you should be smart enough to figure it out based on the above.

Update: You can add one more rule to stretch the chat sidebar to full height if you like:

/* Stretch the chat bar when ticker is hidden */
fbChatSidebarBody { height: 100%; }

If you found this post useful, please share it on Facebook by clicking the Like button on this page (how ironic).

Related posts:

1. How to Hide Tagged Photos on Top of New Facebook Profile
2. Finally! I’ve killed all the Vampires, Werewolves and Zombies on Facebook
3. Slap in the Facebook

Facebook recently revamped their Facebook Pages. One of the biggest effects of this is that you will no longer be able to create custom tabs with the Static FBML application by 11 March 2011. Luckily some people have quickly put out some excellent tutorials and resources to get everyone up to speed.

HyperArts has been publishing a series of tutorials on how to create iframe Facebook tabs.

• Tutorial: Add an iFrame Application to your Facebook Fan Page – 2011 Edition
  
• Facebook iFrame Apps – Getting Rid of Those Scrollbars
• Customizing your Facebook iFrame Application – Reveal Tabs Fan-gating & Other Cool Stuff

Webdigi shares not only a tutorial, but downloadable examples as well!

• Build better facebook pages with iframe tabs

Check these articles out and definitely bookmark them to bring yourself up to speed on creating iframe Facebook tabs.

Related posts:

1. Simple form validation with FBJS on Facebook Page Tabs
2. Finally! I’ve killed all the Vampires, Werewolves and Zombies on Facebook
3. Solved: Cufon text not refreshing on jQuery UI Tabs

My MacBook has served me well for 2.5 years. I had been planning to upgrade to a MacBook Pro but after a careful look at my financial commitments – an iPhone 5 upgrade, upcoming renovations and moving in to our new house, plus baby Zack – I decided upgrading to a new MacBook Pro would be burdensome for me. So instead I chose to upgrade the components of my existing MacBook.

I had already upgraded my RAM and replaced the battery, so this time I decided to replace my hard drive with a solid state drive (SSD). Why SSD? A SSD read and writes faster than a regular drive, which results in better performance for doing operations that involve reading and writing files. A SSD also promises better battery life and less heat. Check out this video of a SSD reduces boot times.

Installation Steps

Replacing a hard drive in a MacBook is a simple process that only involves 5 screws. See iFixit’s excellent guide for detailed steps with photos. Update: You can use Carbon Copy Cloner or SuperDuper – both of which are free and excellent – to clone your old hard drive to the new SSD before swapping them. Also, make sure you have the right tools:

1. Torx screwdriver (left)
2. Philips head screwdriver (right)

Click the images for full resolution versions.

First I removed the rear access door and battery. I then had to unscrew the bracket holding the old hard drive in place. After that I could simply pull out the hard drive with my fingers and disconnect the SATA cable.

Here’s why I needed the Torx screwdriver. I had to remove the 4 Torx screws around old hard drive and screw them into my SSD. The screws serve as holders that fit in the orange brackets in the hard drive bay. I then assembled everything back together with the SSD.

For the final (optional) step, I removed the rear panel to dust off the insides of my faithful MacBook. There was a lot of dust gathered in there from the past 2.5 years.

Upgrade if you can afford it!

I’ve only had the SSDs for a day but I already see some initial results. Boot times and launching apps are definitely faster. I can launch Safari and Mail in a single bounce from a cold boot! I didn’t do any real tests, but my old MacBook definitely feels zippier. If you afford to buy a brand new laptop, I think upgrading your drive to a SSD is definitely worth it.

The only catch is that SSDs are more expensive compared to regular drives. I bought my SSD from OWC and had it shipped all the way from the US. The 240GB drive, an enclosure for my old drive and shipping cost me USD533.50, or about RM1650. I also had to throw in another RM166 for custom duties.

However the RM1.8k+ was still cheaper than the price of 240GB SSDs being sold at LowYat, etc – at this point time in time anyway. The price is likely to go down, but if you want to upgrade now I highly recommend OWC’s range of SSDs. OWC has got great prices, frequent discounts and awesome customer service. Best of all, it takes only 5 days for the drives to arrive – no need to battle traffic and hunt for parking at LowYat.. Tempting right?

And now with the money I’ve saved from not buying a new laptop, I have cash for some more fun stuff!

Related posts:

1. Which geek am I?
2. 25 Geek Facts about David

Check out this Christmas Nativity told through social media – tweets, Facebook updates, YouTube, Foursquare check-ins.

Times change, feelings remain the same

Related posts:

1. Digital Edge 26
2. Did you *really* expect a Christmas card from David?
3. Reduce spam from Facebook contests

I recently got Unifi, Telekom Malaysia’s High Speed Broadband service. It’s been awesome so far, but I realized the default configuration that TM installers set up is pretty unsecure. In this article, I’ll show you some essential steps you need to take to protect your Unifi network at home.

Why is the default configuration unsecure?

First, let’s have a look at why you need to protect your network. Or if you’re impatient, jump to the solution.

1. The router uses a default admin password (which is public knowledge)

The D-Link DIR-615 (the orange box) that TM supplies comes with a default password which anyone can find. Just try Googling for “dir-615 default password“.

2. There’s a 2nd ‘secret’ account to the router that many aren’t aware of

Yup, even I wasn’t aware of this – and I’m quite a techie. This 2nd operator account is meant for technicians to easily access your router if you forgot your admin password. Hat tip to the Unifi Handbook for pointing this out to me.

3. Your Unifi username is broadcast for all to see by default

If you see a WiFi network like the highlighted one above, you know that 1) it’s a Unifi network and 2) the username isdavidw.

Don’t bother, that’s not my real Unifi username

4. Your default wireless network password is on the bottom of the router

’nuff said.

5. TM sends you all your passwords via email

In your Unifi registration confirmation email, TM sends you all your passwords, unencrypted. This doesn’t directly affect your wireless network, but it’s just super insecure.

In summary, the combination of the above is like leaving your house unlocked — not very safe. It’s an invitation to hackers to get into your network and use your broadband for free. Worse, hackers can monitor your traffic, steal your passwords, credit card & bank info, etc. Sounds dramatic but it can really happen!

Secure your router settings

Ok, let’s lock down that Unifi network!First, connect your laptop directly to the router (the orange box). You can do the following on a wireless connection too, but you will be disconnected when making changes and need to re-connect.

Step 1: Change the default router passwords

Open up a web browser (e.g. Firefox) and go to this address: http://192.168.0.1. You’ll see the login screen to the router’s admin like below.

Login as operator. Here are the default passwords for operator, courtesy of the Unifi handbook:

telekom
h566UniFi
<your Unifi username in reverse order>

Once logged in, click on the Maintenance tab (at the top). You will then see a screen called Administrator Settings where you can change both the Admin and Operator password. (If you logged in as admin, you won’t see the option to change the operator password).

Change it to something that has 6 characters or more that includes numbers and letters. Write that down somewhere and keep it safe. Click Save Settings.

Congrats, you’ve just changed your router’s default passwords.

Step 2: Change your Wireless Network name and password

Next, click on the Setup tab. Then click on Wireless Setup in the sidebar.

The first thing we want to do is to change the SSID a.k.a. Wireless Network Name. Click on the Multiple Wireless Network Name Setup button (at the bottom of the screen).

On the next page, change the Wireless Network Name to something else, e.g.:

Don’t forget to save your settings.

Finally, we want to change the default wireless password. Go back to Setup » Wireless Setup and click the Manual Wireless Connection Setup button.

On the Wireless Network page, scroll all the way down and change the WPA/WPA2 password.

Click on Save Settings. Awesome, you’ve changed your wireless network name and the password. Because you’ve changed the network name and password, your laptop, iPhone and other devices will no longer be able to connect to your old network. Just add this new network and everything will work again as normal.

Don’t take security lightly

I’m sure that you lock your car, your house door and don’t leave your mobile phone lying around unattended. In the same way, if you have a wireless network at home, it’s your responsibility to keep it secure.

Those of you who are more technically inclined can check out the Unifi Handbook for more info and tips on securing your home network. A big thanks to rizvanrp who put the site together.

Finally I hope that you found my tutorial useful. Please tweet or share this article on Facebook. If you have questions, please ask me in the comments. Thanks!

Related posts:

1. Restarting MAMP when it gets stuck

Today I was working on a custom Facebook Page which included a sign up form. On the sign up form was a checkbox with an id of confirmoptin that needed to be checked before the form could be submitted:

<form action="http://.." method="post" id="subForm" onsubmit="return validate_signup(this)">
<!-- email address -->
<input class="text" type="text" name="email" id="email" /><br/>
<!-- checkbox to confirm opt-in -->
<input class="checkbox" type="checkbox" id="confirmoptin" name="confirmoptin" />
<label for="confirmoptin">Yes, I want to receive email!</label><br/>
<input type="submit" value="Subscribe" />
</form>

With plain ol’ JavaScript, you can easily do a simple validation. This code will show a JavaScript alert window if the user didn’t tick the checkbox:

<script type="text/javascript">
function validate_signup(form) {
    if ( !document.getElementById('confirmoptin').checked ) {
        alert("You must confirm that you want to receive email from us");
        return false;
    }
return true;
}
</script>

On Facebook Pages, plain ol’ JavaScript is not allowed. Instead you have to use FBJS, which is very similar, but has got some modifications so it works with FBML and prevents dangerous hacks.

In the example above, the alert() function and checked object is not supported in FBJS. The code below translates these two unsupported functions into Dialog and getChecked respectively:

<script>
<!--
function validate_signup(form) {
	if ( document.getElementById('confirmoptin').getChecked() == false ) {
		(new Dialog()).showMessage('Confirmation Required', 'You must confirm you want to receive email from Rotiboy.');
		return false;
	}
return true;
}
//-->
</script>
</script>

In plain English, the code above is triggered when a user tries to submit the form. The code looks for the element with the id of confirmoptin and checks if it is checked (selected). If it is not selected (false), display the Confirmation Required message in a Facebook-style dialog box (pictured at the top of this article) and prevent the form submission. If it is checked, just return true and submit the form.

Hopefully the code above will help a few people who are scratching their head about the same thing. See the form in action on the Rotiboy Malaysia Welcome Tab.

Related posts:

1. PicApps gives bloggers access to licensed photographs for free

Update 11 Oct: Someone from the svnX team actually stopped by to add on to my post. See his comments below.

I’m not a programmer, but occasionally need to do programmer type things. One of these things is to use Subversion to keep collaborate on projects with other people. This is a tutorial on how to use Subversion on your Mac, for non-programmers like me. I’ll only cover the basics and what is absolutely necessary to get started with it. Ready? Let’s dive in.

What is Subversion?

So your latest project requires that you use Subversion (or SVN for short). What the heck is it? Subversion is a version control system that allows its users to keep track and manage changes to documents and files. So for example, if you create a website and track it with Subversion, you will be able to keep track of different versions of your HTML, CSS and JavaScript files, and revert to earlier versions if you need to.

If it’s a team project, you can split the work with different people and work on the same files at the same time. So if there are 2 people making changes to style.css, you can merge the different copies with Subversion to create the latest version. Cool huh?

Install Subversion and svnX

To get started the first step is to install Subversion on your Mac. You can do that by downloading the latest Subversion binary from here:

http://www.open.collab.net/downloads/community/

Next, download and install svnX. This is an open source (free) application that allows you to work with Subversion in a GUI, rather than from the Terminal or command line. Download the latest version of svnX from here:

http://code.google.com/p/svnx/

Basic Subversion concepts with svnX

Repository a.k.a. repo

A Subversion repository is the central place where all files are stored. This repo usually resides on a web server, or a computer in your intranet. The latest version of your project is always on the repo, so if you and your team mates’ computers all crash the project will still be safe. In this tutorial, I’m assuming someone has already set up the repo for you.

Now you need to connect to the repo. Launch svnX and look for the Repositories window. If you don’t see it, press Shift+Command+R. Click the plus button to add a new repo. Fill in your SVN login details and click on the repo name to finish.

Now double-click the repo name. If your login details are correct, a new window will appear and show you the contents of the repo. In the example below, my Demo Repository is still empty because it’s brand new.

Click for larger version

Checking Out

To start editing the project files, you need to download them from the repo to your computer. This is known as checking out the repo.

Working Copy

When you checkout a repo, it gets downloaded onto your computer as a Working Copy. This is where you make your edits and changes. To checkout and create a Working Copy of the project, click the Checkout button in svnX and choose where you want to store the project files.

This will also automatically create an entry in svnX’s Working Copies window.

Updating your Working Copy

Updating your Working Copy syncs your local files to the repo and ensures that it is at the latest version. Remember to update often so that you are working on the latest version of the project files.

Adding files to SVN

If you want a file to be tracked by Subversion, you must first add it to the repo. Let’s assume that I’ve created a file called hello.txt and added it into my local working copy demo folder. svnX will now see the file and highlight it in blue indicating that it has detected a new file. Select the file and click the Add button. hello.txt is now being tracked, but not yet uploaded to the repo.

Committing files and changes

When you make changes to the project – either by adding new files or editing files – the changes have only taken place on your local files (Working Copy). To share this changes back to the central repo, you need to commit the files and changes.

Before committing, be sure to update refresh your Working Copy to the latest version. svnX will then highlight new files that you’ve added and changes. Select the highlighted files and click Commit. A window will appear for you to enter a Commit Message. These are notes to explain the changes in this commit. Click Commit and svnX will send your changes up to the repo.

If you open your repo window you will see the revision number, the date of the commit, the person who made the commit and the commit message. Now if my team members update their working copy, they will get hello.txt.

All of us can work on hello.txt at the same time. When we commit our changes, Subversion will automatically merge them so that hello.txt in the repo will incorporate all the changes and always be the latest version.

Ignore files

Finally, you may want to ignore files in your Working Copy. Let’s say I create a file called _reminders.txt and I place it together with the other files in the Working Copy. svnX will show that there’s a new file and keep nagging you about it.

Fortunately, you can tell Subversion to ignore the file. First, switch to the tree view. This will allow you to see the directory structure. Select the folder the file you want to ignore resides in. Since my _reminders.txt is located in the root of my Working Copy, I have to select the root folder, which is named ‘.’ in svnX.

Next, click Properties and the property dialog will appear. From the dropdown, choos svn:ignore and type in the name of the file(s) you want to ignore in the space at the bottom. Finally click the plus sign. svnX will ask you to confirm that you want to ignore the files. Click OK and svnX will no longer track these files, and will not commit them to the repo.

Click for larger version

Now you try it

The above should be enough for non-programmers to get started with Subversion. I hope that the tutorial was useful. Feel free to ask questions in the comments!

So I got an iPad. Don’t worry, I’ll spare you the fanboy gushing. I actually want to talk about Amazon’s Kindle service.

I’ve been wanting to stop buying paper books for a while now. I’ve also been buying ebooks in PDF and ePub format. Reading these ebooks have been less than ideal because I’ve had to read them on my computer (inconvenient) or on my iPhone (too difficult).

Knowing that I was getting an iPad, I started investigating iBooks–Apple’s ebook solution. The other contender was Amazon’s Kindle application. I couldn’t test iBooks since it only works on the iPad (which had not yet arrived) so I thought I would buy a Kindle book. I planned to start reading the book on my iPhone and finish it on the iPad.

I bought Daemon by Daniel Suarez which I had heard rave reviews about and started reading on my iPhone. I found that I was reading more because I always had my phone with me and could whip it out to read anywhere–in the backseat of the car, in the dark room while waiting for baby Zack to sleep, at the in-laws when there’s nothing to do. If I had a hardcover book, I wouldn’t even have bothered to bring it along with me. By the way, I ended up liking the book so much that I finished it in 3 days and immediately bought the sequel, Freedom.

The other really cool thing about the Kindle is that you can send yourself samples of a book. I’ve downloaded tons of samples that I can read before deciding if I want to buy the book. Reading reviews of books isn’t really the same as reading the 1st few chapters, so this feature is really great for me too.

I’ve already started to read more with my Kindle service. 2 books in the last 2 weeks already and already itching to buy a few more. Compare that to the 3-5 books I have sitting on my bookshelf (which I bought!) that are still not read. The amount that I read has greatly decreased since finishing university and in the meantime the only things I read are articles on web sites and blogs which have completely spoilt my attention span and comprehension, so I’m definitely looking forward to reading more books on my iPad.

Quick comparison to iBooks–Apple’s solution also allows you to download samples. However it’s more difficult to buy books (from Malaysia) because you need to have iTunes credit. Amazon also requires a work around but it’s generally easier to buy Amazon credit which I use to pay for the books. Plus, Amazon’s catalog is much wider and slightly cheaper. On the plus side for iBooks, the application is a lot more polished and it’s also easier to import books from other sources. Long story short, eBooks (digital format books) will hopefully get me reading regularly again.

As you know I’m a big fan of the Headway WordPress theme. So much so I’ve been using it in client projects.

The one (small) drawback is that Headway puts a notice in the Dashboard every time there’s a new version. For certain clients I really don’t want to have anything to do with them after the project, so I would like to disable the notification. Here’s how.

In Headway’s custom_functions.php, simply add this line:

remove_action('admin_notices', 'headway_update_notice');

Solved. No more nagging client asking me what is this “Headway update thing”.

Related posts:

1. blogjunkie.net now powered by Headway (and free giveaway)
2. Can you drastically change how WordPress looks in 10 minutes? The Headway theme can!
3. Drupal tip: disable Pathauto URLs for specific content types