How secure is your login?

Security has been an issue that is frequently talked about, especially internet security. No one wants their personal information known to outsiders, and they would be very cautious when dealing with those information. But unfortunately, not everyone shares the same belief, and the first thing that came to mind is this quote I found a few weeks back.

What is the difference between Mark Zuckerberg and me? I give private information on corporations to you for free, and I’m a villain.
Zuckerberg gives your private information to corporations for money and he’s Man of the Year.
Julian Assange

Regardless, Facebook still has a HUGE user base. Some people actually have their home address and phone numbers posted on Facebook and sadly they don’t really care if their information gets exposed.

Back to what I wanted to talk about, while WordPress.com handles your login securely with a TLS/SSL connection, self hosted WordPress blogs do not unless you have an SSL certificate, and they don’t come cheap, typically around $50-$300 or more per year, depending on which vendor you choose, and which services you need.

Usually when you log into your self hosted WordPress blog, your username and password is transmitted in plain text. Meaning any regular packet sniffers will be able to find out what your username and password is. The screenshot below is the login packet I took when logging into my own blog without any encryption. The username and password I used are

Username: demo
Password: demo123!

Unencrypted

Unencrypted

If you’re wondering, %21 is the hex code for !. So as you can see, a fully exposed username and password.

Well, as I’ve said, SSL certificates aren’t cheap, and I don’t plan to fork out a huge sum of money to get one. But I found a nice plugin that somewhat encrypts your password (but not your username) before transmission called Semisecure Login Reimagined It’s not a totally secure way of dealing with passwords, but it’s a free way, and it it fits my needs nicely. The screenshot below is the login packet I took with the Semisecure plugin actiavted. The username and password I used are the same as the example above.

Encrypted

Encrypted

Apple’s Website’s Blackout Effect: Revised

Note: For a list of revisions made, click here.

First of all, Happy Halloween to everyone, may all of your teeth rot from the gargantuan amount of candy that you will be consuming. I know I sound somewhat morbid, but the future doesn’t seem to be going to go well for me.

Well, with that said, if you’ve recently visited Apple’s website, you should’ve noticed that I made a cheap replica of their blackout effect. When I say cheap I mean it’s like those fake iPhones, similar, but not quite similar.

I tried to dissect Apple’s website source code but being the JavaScript illiterate that I am, I couldn’t find out much about the works of it. I searched on Google in hopes of finding the same effect that someone has made; But the only ones that showed up were paid ones, ranging from £5.00 to €5.99 ($8.02 to $8.35). I wasn’t going to pay for something simple like that. So I decided to make one my own. I have no prior knowledge on jQuery but how hard could it be right? In the end I took me about a day and a half to figure it out. FML

But because I hate people who charge money for simple and easy things like these, I am going to share my finding with everyone, and you will be allowed to take my code and do whatever you want with it, but I hold no responsibility if you fuck up. (Not that it’s possible as far as I know) The HTML code is validated as HTML5 and the CSS is validated as CSS 2.1. The code has been tested to be working on Safari 5.0.2, Firefox 4.0b6, Google Chrome 7.0.517.41, and Opera 10.63. I have no plans to test it on IE, but it’d be great if it works

DemoDownload (65KB)Demo [IE]Download [IE] (65KB)

Overlay HTML

The overlay is the black layer that covers the website when the fade in is executed. I created a different section just for that purpose

<section>
	<article>
		<div></div>
		<p>Happy Halloween!</p>
		<p>from seanooi.net</p>
	</article>
</section>

The empty div in line 3 is for the blackout image. In my demo, it would be the image with a left and right hand print on each side of the image. The div element is used to ensure that the image will display on Opera as well

Overlay CSS

body>section
{
	position: fixed;
	top: 0;
	left: 0;
	background-color: #000;
	width: 100%;
	height: 100%;
}

The position is set to fixed so that the background color covers the entire page and not only the viewable area of your web browser.

body>section>article>div
{
	background: url('images/demo-blackout.png');
	width: 625px;
	height: 200px;
	margin: 1em auto 0;
	display: none;
}

body>section>article p
{
	text-align: center;
	font-family: Helvetica, Verdana, Sans-Serif;
	color: #cc1100;
	font-size: 48pt;
	margin:.5em auto 0;
	display: none;
}

These 2 chunks of CSS is pretty much just positioning the image and text. But be sure that elements that you wish to fade in has to have the display: none; property in order for it to be able to fade in.

body>section>article, body>article
{
	display: none;
	width: 980px;
	margin: 0 auto;
}

These 2 tags have been set to display: none; as well to avoid the blackout images from flickering before it starts to fade in. body>article will be explained below

Main HTML

The main part of the page is just a few short lines for this demo.

<article>
	<div></div>
	<p>This is a demo mimicking <a href="http://www.apple.com">Apple's</a> blackout effect</p>
</article>

Main CSS

The body>article tag has been set to display: none; so that the page will not show before the blackout effect is ready, so we set it to fade in after the blackout effect executes.

body>article>div
{
	background: url('images/demo.png');
	width: 525px;
	height: 200px;
	margin: 1em auto 0;
}

body>article>p
{
	text-align: center;
}

Be sure that you position your page image below the blackout image so that when the blackout image fades out, it will be seen as if the image stayed.

jQuery

This is the part where I had a little difficulty with because I wasn’t literate in the language, but Google has been a big help to helping me find what I needed.

$(document).ready(function (){
	$('section').find('article').delay(1000).fadeIn(1);
	$('section').find('div').delay(1000).fadeIn(2000);
	$('section').find('p').delay(3000).fadeIn(2000);
	$('body').find('article').delay(4000).fadeIn(2000);
	$('section').delay(6000).fadeOut(2000);
});

As you can see, it’s pretty self explanatory. Take line 2 as an example

$('look for an element X').find('find the element within element X').delay(time it takes to execute the next command in milliseconds).fadeIn(time it takes to fade in in milliseconds);

In line 5 we give body>article a 4 second delay before it fades in behind the overlay layer.

That’s all there is to it. If anyone has a better way of doing the same thing I did, please do drop me a message. I will be very interested to know about it. Any comments are welcome too.

Revision

November 12, 2010:

  1. I received a request yesterday for an IE version of my code, so I have just revised and uploaded a new set of codes that are compatible with IE.
  2. The post will still be explained in HTML5, so if you decide to go with the IE version, you’re on your own. But the code should be fairly straightforward.

Comment Feature Back Again (Revised for WordPress 3.2)

When I first created this theme, I contemplated between having or not having the comment function implemented. In the end I went with a blog without the comment feature; Only the trackback function was enabled.

I initially thought the contact form was good enough as a means of communication, and that if no one knows how to use it, they don’t deserve to be using the internet. But I was told that to use the contact form for a simple comment would be overkilled. In addition to that someone asked for me to put up the comment section again. So I set out to think of ways to make my comment section different from the default layout yet fool-proof.

I thought for awhile and decided to make the comment page a separate page, meaning one whole page just for posting comments. The idea sounded easy, but it was actually more work then I expected it to be. For someone who had absolutely no prior knowledge to PHP, it was almost like making James Bond follow the law; Not impossible, just hard.

I searched online and came across a site that explained exactly what I wanted to do, but the instructions were pretty messy and static, so hopefully my version of instructions will be of use to anyone who wish to do the same.

In my version, you will be editing 5 files instead of the original posts’ 3 files, and with the link to the comments page left untouched. Files from your current theme folder will be:

  • single.php
  • functions.php
  • comments.php

The 2 other files will be from your /wp-includes directory. If you’ve just updated your WordPress script, these will be the only 2 files you need to edit. Click here to skip the themes section.

  • comment-template.php
  • link-template.php

Theme Folder

  1. First step is to go into your themes folder and open up the folder of your current theme.
  2. Open up single.php and wrap the following code around your single post syntaxes, within the loop
< ?php if (!isset($_GET['show'])) { ?>
	[single post codes here]
<?php } ?>
  1. Next, look for <?php comments_template(); ?> and replace it with the following code
<?php if (isset($_GET['show']) && $_GET['show'] == "comments") { ?>
	<?php comments_template(); ?>
<?php } ?>
  1. You can now go ahead and close your single.php file after saving your changes.
  2. Now open up your functions.php file and add the following function.
function curPageURL() {
	$pageURL = 'http';
	if ($_SERVER["HTTPS"] == "on") {$pageURL .= "s";}
		$pageURL .= "://";
		if ($_SERVER["SERVER_PORT"] != "80") {
			$pageURL .= $_SERVER["SERVER_NAME"].":" .$_SERVER["SERVER_PORT"] .$_SERVER["REQUEST_URI"];
		} else {
	$pageURL .= $_SERVER["SERVER_NAME"] .$_SERVER["REQUEST_URI"];
	}
	return $pageURL;
}
  1. Save your changes and open up your comments.php file and add the following code before the </form> tag, which is usually near the end of the file
<?php if (function_exists('curPageURL')) { ?>
	<input type="hidden" name="redirect_to" value="<?php echo curPageURL() ?>" />
<?php } ?>

You’re done editing your theme files. Next we’ll move on to the wp-includes directory.

/wp-includes

  1. Open up your comment-template.php file
  2. scroll to line 507. Replace #comment- with:
?show=comments#comment-
  1. Scroll to line 519. Replace #comments with:
?show=comments#respond
  1. Scroll to line 1001. Replace #respond with:
?show=comments#respond
  1. Scroll to line 1062. Replace # with:
?show=comments#
  1. Scroll to line 1113. Replace #$respond_id with:
?show=comments#$respond_id
  1. Scroll to line 1206. Replace #comment- with:
?show=comments#comment-

You’re now done with comment.template.php. Moving on…

  1. Now open up link-template.php
  2. Scroll to line 1767. Replace #comments with:
?show=comments
  1. Scroll to line 1881. Replace #comments with:
?show=comments

If everything went well and accordingly, the <?php comments_popup_link(); ?> function should now link to your comments page by appending ?show=comments#respond to your single post permalink rather than just #respond.

If any of you noticed, the trackback link that was previously under every post has been taken away. The reason for that is because I still have yet to figure out how to put trackbacks on a page by itself because posting it as a comment will be a mess and in addition to that, trackbacks have no avatars, therefore ruining my whole comment section design.

Mac OS X Tips and Tricks: Part 1

Apple’s Mac OS X is so versatile that you can do almost anything you want with it; Yes, even sexing it up if you want to. The point here is, there are many hidden features and settings that many users never bother to know, with the exception of enthusiasts. So I will be trying to compile these treasures as often as I can; Therefore I do not know how many parts this post will be in, but rest assure that it will come to an end… when Apple comes to an end.

I wrote about one Dock trick in an earlier post and have decided to expand my “Tips and Tricks” archive. Most of the tips and tricks I will be mentioning in this post will apply to Snow Leopard and they will be in the form of terminal commands, so for those of you who are not familiar with the terminal, have no fear. The terminal app is located at /Applications/Utilities and you can copy and paste or just highlight then drag and drop the commands into your terminal window. “I know, you can’t do that in Windows!”

After executing the commands, you will have to restart the targeted application for the changes to take effect. If it’s a Finder or Dock tweak, the easiest way is to execute the appropriate command in terminal as follow:

  • killall Finder
  • killall Dock

To revert the changes you’ve made, just change the keywords of the command you executed as listed below:

  • YES to NO and vice versa
  • TRUE to FALSE and vice versa
  • 0 to 1 and vice versa

Commands

1. Quick Look X-Ray Folders

Enables you to preview files that are in a folder through a translucent folder icon when using Quick Look. The files will cycle through every 3 seconds when there are more than 5 files in the folder.

defaults write com.apple.finder QLEnableXRayFolders 1; killall Finder

Quick Look

Quick Look

2. Mouse-Over Highlights In Stacks
Items in your stacks that are in grid view will be highlighted when you hover your mouse cursor over them.

defaults write com.apple.dock mouse-over-hilite-stack -boolean YES; killall Dock

Grid

Grid

Fan

Fan

3. Make List View Look Like Grid View
Change list view to closely mimic grid view in your stacks.

defaults write com.apple.dock use-new-list-stack -bool YES; killall Dock

List

List

4. One-Window Dictionary
I like using the contextual menu to look up words when browsing the internet as oppose to using Command+Control+D[1] because of the keys being too close together, but since Snow Leopard, every time I look up a new word Dictionary just keeps opening new windows and that annoys the hell out of me. For those of you who are like me, the following command will force Dictionary to use only 1 window.

defaults write com.apple.Dictionary ProhibitNewWindowForRequest -bool TRUE

5. QuickTime Remaining In Full Screen
Whenever watching a movie on my Mac I occasionally get IM messages and when I Command+Tab[2] to view the message, my QuickTime window will always exits full screen, which isn’t what I want it to do. To keep QuickTime always in full screen execute the following command.

defaults write com.apple.QuickTimePlayerX MGFullScreenExitOnAppSwitch 0

6. Auto Play QuickTime Videos
By default QuickTIme does not auto play a video file when you open it. To enable auto play upon opening a video file execute the following command.

defaults write com.apple.QuickTimePlayerX MGPlayMovieOnOpen 1

7. Automatically Turn On Closed Captioning and Subtitles
Sometimes when playing a movie, I like to turn on subtitles because let’s face it, not all actors and actresses have been taught to speak clearly in theater school. But always having to click the menu to check if there are subtitles is just troublesome. The following command will automatically turn on closed captioning and subtitles when playing a video if they are available.

defaults write com.apple.QuickTimePlayerX MGEnableCCAndSubtitlesOnOpen 1

8. Address Book Debug Menu
The debug menu in Address Book enables some extra options, with one of them being able to toggle contact picture reflections; But the menu is hidden. To show the debug menu, run the following command.

defaults write com.apple.AddressBook ABShowDebugMenu -bool TRUE

Address Book

Address Book

Reference

[1] Command+Control+D allows quick definition look-ups within Cocoa applications such as Safari, Mail, Adium, etc.

[2] Command+Tab allows you to switch between running applications, just like CTRL+Tab on a Windows machine.

Google Testing New Search Page

An update from Webmonkey shows that Google is currently testing their redesigned search page. Nothing has been mentioned on Google’s Blog yet, so it is unsure if the new search page will go live.

Changes that I’ve noticed are:

  • The Google Search button background has been changed to a blue gradient instead of the grey to white gradient.
  • Top bar link colors have been changed from Medium Blue #0000cc to Royal Blue #4272db
  • Bottom link colors have been changed to Persian Blue #1111cc
  • The Google logo drop shadow and TM branding has been removed
  • Not too sure about this, but there’s a “Make Google your homepage” link now
  • The search box has been embossed up instead of down with
  • The Advance Search and Language Tools links on the side of the search box has been removed
  • Overall dimensions look slightly larger
  • A more aesthetically pleasing visible sidebar

If you’re like me who just can’t wait until it’s official, Google Blogoscoped found a JavaScript snippet that you can use to activate the new page by following the steps below:

  1. Go to Google’s homepage
  2. Log out of your Google account if you’re logged in
  3. Paste the following code in your browser’s address bar and hit enter. It means deleting “http://www.google.com/” from the address bar and pasting the following code
javascript:void(document.cookie="PREF=ID=20b6e4c2f44943bb:U=4bf292d46faad806:TM=1249677602:LM=1257919388:S=odm0Ys-53ZueXfZG;path=/; domain=.google.com");
  1. Refresh your Google homepage

The JavaScript code sets a new cookie, which is why you have to log out of your Google account before you can see the changes. Once the cookie is set, refresh your Google homepage and you should be looking at the new Google.

Google's New Homepage

Google's New Homepage

Google's New Search Page

Google's New Search Page

SSH Into iPhone Without Wireless Router

I have always wondered if it were possible to SSH into my iPhone without a wireless router and search results on Google always pointed to no… This was before I found out that it was possible to do so.

Steps that I will be explaining will only apply to jailbroken iPhones and Macs, because I do not want to waste my time tinkering with Windows’ complicated network settings, so if you’re a PC user, I’m sorry, you’re out of luck. But if you found a way to do so, please do let me know and I can post it up as reference.

Instructions will be based on Mac OS X Snow Leopard 10.6.2 Things you will need will be of course, an iPhone, and a Mac with wireless capabilities. Which covers almost all Macs.

  1. Go into System Preference
  2. Click on Network
  3. Click on AirPort
  4. Turn AirPort on if you haven’t already
  5. Click on the Network Name dropdown menu and choose Create Network…
  6. The Name field will be your wireless name, or SSID. Leave the Channel as it is, and tick Require Password if you wish to do so.
  7. You will be asked to key in your admin password to finalize your network creation

Now that you’ve created a network, it’s time to connect your iPhone and SSH into it.

  1. Connect your iPhone like you would with any WAP.
  2. After you’re connected, give it awhile to register an IP address.
  3. Tap on the blue arrow beside your connected network to reveal your IP address. This is the address you will be using to SSH into your iPhone
  4. I like to use Coda for FTP purposes. But if you don’t have an FTP app, you can try Cyberduck
  5. Fire up your FTP app and click Connect on Coda or New Connection on Cyberduck.
  6. Change the Protocol to SFTP
  7. In the Server text field, type in the IP address you found in step 3
  8. Your username is root
  9. Your password is alpine[1]
  10. Leave the Port as 22 and click Connect

You have just SSH’ed into your iPhone without a wireless router. This method is most probably noted already somewhere on the web, but I have never been able to search for it. So hopefully this post will be of help to cheap people like me who do not want to fork out $50 for a wireless router

Reference

[1] In a previous post, I wrote on the vulnerability of not changing your iPhone’s root password and steps on how to do it. It is highly recommended that you do so as to secure your iPhone.

How To Change Your iPhone Root Password

Recently there’s been a lot of news about jailbroken iPhones being hacked and held for ransom or just having their wallpapers changed.

The reason this only happens on jailbroken iPhones is because they have the SSH daemon running, which is common in most jailbroken iPhones, with the default root password left unchanged. This will enable hackers to gain access into their iPhones and have total control over them, which basically means hijacking their phone.

They can send text messages from your number, use it to call or record your calls, and actually whatever they want, even use it for their hacking activities.

So to prevent it, all you have to do is to change your default root password, which is as easy as following the steps below:

Note1: This will only work if you have not changed your default root password before.

Note2: When typing in your password, don’t worry if nothing shows up. It’s just how it should be.

  1. If you haven’t installed MobileTerminal yet, go to Cydia and search for “MobileTerminal” and install the app.
  2. Launch MobileTerminal, type in su and hit return.
  3. When asked to key in your password, type in alpine and hit return.
  4. You are now logged into your phone as the root user. Now type in passwd and hit return.
  5. You will then be asked for a new password. Type in your new password and hit return.
  6. You will be asked to re-enter your password. Re-enter your new password and hit return.

You’re done! Your root password has been changed and your iPhone is secure once again for now. Right now all you have to do is to not forget what you changed your root password to.

My Blog, Now iPhone Friendly

Just a few days ago I was talking to Keefe about the iPhone version of his blog and how I’m not worried about mine because of 2 reasons:

  1. I don’t have many readers
  2. I don’t know many people who uses the iPhone

Not long after our discussion, I started noticing more and more of my friends using the iPhone, mainly through Facebook, so the latter wasn’t so true anymore, and I decided to make my blog iPhone friendly as well.

My first attempt at searching online always ended up with results with “Just install <some name> plugin and you’re good to go”, which I hated. I don’t know why, but it has always been my personal preference to have it written right into the core of my theme rather than rely on a plugin. Frustrated, I quit my web browser and watched a movie instead.

During my second attempt, I found what I was looking for. No plugins, just altering my CSS file. All I had to do was to add following @media selector in my CSS file and target any elements within the curly brackets.

@media only screen and (max-device-width: 480px) {
}

We declare max-device-width: 480px because of the iPhone’s unique screen size. To style for average mobile devices, using the following selector should be sufficient.

@media handheld{
}

These methods are a nice way of enabling web developers and designers to style their websites to be mobile friendly. But occasionally, there’s bound to be some elements that just can’t be styled the way you want them to because of the original code itself being placed so ever obscurely. The way I countered this was by using a mobile detection script and adding an if/else statement in my PHP file. That way, I can rearrange all my codes for the mobile version of my site without having to temper with the original ones.

After hours of typing and clicking on the refresh button, I’m not-so-proud to unveil the iPhone version of my site.

Main Page

Main Page

Navigation Links

Navigation Links

Landscape View

Landscape View

Mac OS X Dock Spacers

I was reorganizing my desktop when I noticed how cluttered my dock was, so I set out on a quest to find ways on how to make it look more organized and found out that adding spacers to it can help divide my applications into different sections, thus making it look cleaner and neater.

To add spacers to your dock, just fire up Terminal (Applications > Utilities) and run the following command:

defaults write com.apple.dock persistent-apps -array-add '{tile-data={}; tile-type="spacer-tile";}'

Don’t worry if you don’t see any changes yet, because you still need to reload the dock. To do so, just run the following command in Terminal as well.

killall Dock

Your dock will reload and you should be seeing an empty space (spacer) on your dock now. To add more, just run the first command for as many spacers as you want and reload the dock.

You can add spacers to the right side of the dock too, or also known as the “Stacks” side of the dock. To do so, just run the following command for as many spacers as you want as well, and remember reload the dock when you’re done.

defaults write com.apple.dock persistent-others -array-add '{tile-data={}; tile-type="spacer-tile";}'

To remove these spacers, just right click on them and select “Remove from Dock” or just drag them out of the dock and it’ll *poof* away.

Dock Spacers

Dock Spacers