Matt's Blog

Archive for the ‘Tutorials’ Category

Google Chrome Tab Processes

Thursday, September 4th, 2008

On my post yesterday on Google Chrome I mentioned that one of my kvetches about it was that there was no way to tell which chrome.exe process is associated with what tab. It turns out that this is incorrect. I’ll overview how to do this in this post.

There are actually two different ways to determine this, one’s more user friendly, and one’s for people who want more control than what the first method offers.

Using Google Chrome Task Manager

Google Chrome actually includes its own mini-Task Manager that shows all your tabs and plugins. This Task Manager is similar to Windows’ in that you can see memory and CPU usage and can end tab or plugin processes, but that’s about it. So, this is useful for those who just want a quick overview of resource usage and be able to terminate a tab or plugin. Here’s a little walk through on how to access Google Chrome’s Task Manager:

Right Click Above Tab Bar

Step 1: Right click on the browser right above where the tabs are located. Then click on Task Manager.

Google Chrome Task Manager

The Google Chrome Task Manager appears. From here you can view which tab or plugin is using how much resources, and terminate them if needed.

Using Windows Task Manager

For users that want a bit more control than what Chrome’s Task Manager allows, there is an alternative manner of going about this. This method involves finding out the tab’s PID (Process Identier) number and then using Windows Task Manager to find that process. Again, here’s a little visual walkthrough:

about:memory

Step 1: In Chrome, type about:memory into the Address Bar. This will take you to an overview of the processes Chrome is currently running. Here you can see an in-depth overview of the amount of memory and type of memory (physical or virtual) the browser and specific tabs are using. Take particular note of the PID column on the left-side of the screen.

Step 2: Open the Windows Task Manager. You can do this by simultaneously pressing Control-Shift-Escape on your keyboard, or by going to Start > Run (or just Start in Vista) and typing in taskmgr.exe and pressing Enter.

Windows Task Manager; View - Select Columns

Step 3: In the Windows Task Manager, click View and select Select Columns….

Windows Task Manager Select Columns

Step 4: In the Select Columns dialog box, click the checkbox beside PID (Process Identifier) and then click the ok button.

Windows Task Manager with PID Column

You will now see that Windows Task Manager has a PID column. You can reference these numbers to the numbers on about:memory to determine which tab is connected to which process.

Hopefully this guide helped you understand that in just a few simple steps you can manage your Google Chrome tab processes.

Conditional Comments

Wednesday, August 15th, 2007

Conditional comments are special HTML comments that can be used to do certain things in Internet Explorer only without using any scripting. They only work in Internet Explorer and were introduced starting with version 5. This can be quite useful when making a Website because all Browsers don’t display things exactly the same. Usually Opera, Safari and Firefox all display it alike, but Internet Explorer may display it differently (for me, usually correctly :P ). This is where you can use conditional comments to make IE use, say, some different CSS values than other Browsers.

Take Matt’s Blog’s current theme for example (the upcoming theme also does this). I use conditional comments to have a stylesheet called ie7style.css to be loaded if the Browser is Internet Explorer 7. In that stylesheet, it overrides values set in the main stylesheet to make the Sidebar display correctly in IE7. These conditional comments are only recognized in IE. Other browsers just see them as meaning-less HTML comments.

Conditional comments start are usually in the format of:

<!--[if <em>expression</em>]>Special IE Only HTML<![endif]-->

Usually (if not always) the expression contains “IE”. You can then add a version number after that (eg. “IE 7″). Here’s an example of what you would use if you wanted to show it to all versions (above 5) of IE:

<!--[if IE]>Will Show Up in Internet Explorer Only<![endif]-->

For IE 7 only:

<!--[if IE 7]>Will Show Up in Internet Explorer 7 Only<![endif]-->

You can only use operators such as less-than (lt), less-than or equal-to (lte), greater-than (gt) and greater-than or equal-to (gte). Here’s an example:

<!--[if gte IE 7]>Will Show Up in Internet Explorer 7 and Above Only<![endif]-->

Conditional comments are particularly useful for specifying IE only stylesheets that overwrite settings in the main stylesheet, to make your Site look good cross-browser.

You can see the full list of expressions in the Microsoft Developer Network.

Now, if only other Browsers would implement conditional comments…

Protecting Forms From SPAM

Wednesday, July 11th, 2007

eMoms at Home is having another Group Research Project, so here’s my post. :D  

In this age of the Internet, SPAM is an inevitability. If you have a site that’s open to the public, and it has some type of Form on it, it’s only a matter of time before SPAM starts rolling in.

Sure, you can filter it out at your end, but why not stop it from even getting through? Why not use rudimentary techniques to stop SPAM bots from even getting the comment to the processing stage? These rudimentary techniques are easy for humans to easily pass, but SPAM bots will have a hard time with it.

CAPTCHA

Probably the most common way of trying to stop SPAM is by using a CAPTCHA. CAPTCHA stands for Completely Automated Public Turing test to tell Computers and Humans Apart. What it is a dynamically generated (in other words, on-the-fly) image that contains a random string of letters, numbers and/or other characters or a word. The text is then made less readable by one or more of the follow methods:

  • distorting the text, such as by warping it
  • adding random lines
  • coloured shapes behind the text
  • grids
  • textures on the font
  • colours

There is a large flaw with CAPTCHA’s. People are making SPAM bots smarter and smarter, so CAPTCHA’s need to get harder and harder. That’s fine, but a lot of CAPTCHA’s cross the line of the human being able to read it. So, when it gets to that point, nothing’s going to get through that form, not even stuff from humans.

Another large flaw with CAPTCHA’s are that screen readers can’t read/see them. So when someone who is disabled or visually impaired comes to that form, they won’t be able to type in the CAPTCHA because they won’t know it’s there. Large corporations, such as Microsoft, have developed a way for the CAPTCHA to be spelled out. But, that’s extremely hard, and a waste of time, basically.

I’m not going to provide any code for CAPTCHA’s, mainly because every CAPTCHA should be different.

Simple Math

Another method of prevent simple SPAM bots from submitting SPAM into your forms is to make the submitter do some simple math. And by simple math, I mean like “1+1″, not “-(2x2 + 56 • 3xy3r2wc6)2 = 3456″. ;) Which I don’t even think is possible. :P Well, it might be…

Matt Cutts uses this technique on his blog, for comments.

Here’s some proof-of-concept code (note, this code might not work, that’s why it’s called proof-of-concept ;) ):

First of all, you would want to generate some random numbers. Now, since this is simple math, I recommend nothing over 10, so the user will, hopefully, know the answer without even thinking about it. I’m going to use the mt_rand() function. You could also use the rand() function, but mt_rand() is faster and is more random.

So, lets randomise some numbers!

<?php 
$number1 = mt_rand(1, 10); 
$number2 = mt_rand(1, 10); 
$equation_string = $number1 . "+" . $number2; 
$equation_answer = $number1 + $number2; 
?>

Now, you’ll want to use $equation_string right beside a new text input field.

Now, you could just take out $equation_answer and then store $equation_string in a hidden field and then process it on the flip side of the form. But, to make it easier, we’re going to do something different.

So, what you want to do is store $equation_answer in a hidden field (<input type=”hidden” />). But, wait, don’t leave it raw. By raw, I mean just the answer. It should be encoded first. For this, I’m going to use base64_encode(), simply because it’s decodable and it came to mind first. :P

So, replace the second to last line in the code before, with this:

$equation_answer = base64_encode($number1 + $number2);

Then, in the processing part of your form, you’ll want to grab the value of the text field and the hidden field (so make sure you put a id and name on it), use base64_decode() to decode the answer and check if they match. Assuming you put the fields in the variables $user_answer and $equation_answer, respectively: (you better make sure they submitted a number, too)

if (!is_numeric($user_answer)) {
echo "That's Not a Number!";
exit;
}
$equation_answer = base64_decode($equation_answer);
if ($user_answer == $equation_answer) {
// Okay, passed, carry on processing...
}
else {
// Failed, stop the script...
echo "Your Calculation is Incorrect!";
exit;
}

And, there you have it. :D

Conclusion

I have explained two different rudimentary ways of stop simple SPAM bots from even getting to the processing of your form. Please note, that it is nearly impossible to stop SPAM all together, but using a carefully thought out SPAM defense plan, you can a least minimize it.

Matt’s Blog Gets No-WWW.org Class B Compliance

Sunday, June 24th, 2007

I have just made it so that all traffic going to www.mattsblog.ca will be silently redirected to mattsblog.ca. Which makes Matt’s Blog a Class B (the preferred class) in No-WWW.org‘s books.

If you’ve never heard of no-www.org before, it’s basically a campaign trying to raise the fact that www. is/should be deprecated. They have 3 “ranks” or “classes”. Class A, B and C.

Class A All traffic to www.domain.com and domain.com is accepted, and no redirect happens.
Class B The preferred class. All traffic to www.domain.com is silently redirected (301) to domain.com.
Class C The hardcore class. Traffic to www.domain.com is denied and the user can only access the site through domain.com. This class is not recommended.

Most hosts default their DNS to Class A. Where all traffic to www.domain.com and domain.com is accepted. The problem with Class A is that Search Engines might penalize you for having duplicate content (because you have the same content on www.domain.com and domain.com) and you might end up with Search Results with and without the “www.“. You could even have 2 different PageRanks for your main page, depending on if you check with www. or no-www. Google allows you to define which domain you would like to show up in their Search Results. You can do this through Google Webmaster Tools. But, Google is only 1 of the many Search Engines.

So, how can you redirect www.domain.com to domain.com. Well, it’s actually quite simple. This way will only work on Apache servers with mod_rewrite enabled. First, create a file (or open it, if it already exists) in your site’s root called .htaccess (including the period, but nothing before the period). Then, place this code in it (replace domain\.com with your domain name, make sure you escape the period):

RewriteEngine On
RewriteBase /
RewriteCond %{HTTP_HOST} ^www\.domain\.com$ [NC]
RewriteRule ^(.*)$ http://domain\.com/$1 [R=301,L]

Let’s go over that code now.

RewriteEngine On simply tells Apache to allow you to use the mod_rewrite module (make sure it’s installed, first).

RewriteBase / makes sure we’re working on the root domain.

RewriteCond %{HTTP_HOST} ^www\.domain\.com$ [NC] tells the Server to see if the URI requested has the domain www.domain.com. The [NC] tells it that it’s case-insensitive.

RewriteRule ^(.*)$ http://domain\.com/$1 [R=301,L] says that if RewriteCond is true to silently redirect the user to domain.com. ^(.*)$ holds the value of what was after the original URI. $1 then makes sure that they’ll be redirected to the same page they requested. [R=301,L] will tell the User-Agent (browser, or bot) that the redirect type is 301 Permanent and and L tells the Server that it’s the last rule.

Note: If you’re using WordPress for the site in question, the above code must go above WordPress’ redirect stuff. So place it somewhere above # BEGIN WordPress.

Then, save the file and upload it to your site’s root. Now, all that’s left to do is to get Validated by no-www.org. Go here to do that. Your site should now be a Class B!

That’s it, your site is now even more Search Engine friendly.

Get it? Got it? Good!

DisAllow Indexing for “Random Post” Links

Thursday, May 31st, 2007

For those of you who use Matt Mullenweg‘s Random Redirect Plugin, this post will be useful for you.

If you’re not familiar with the Plugin, it will redirect you to a random post when you visit /?random.

I was searching Google with the top search terms to my Blog, and I noticed that for one of them, Google had the URL of the result as http://mattsblog.ca/
?random
. Which isn’t exactly going to be helpful, since the person who clicks on that result is probably not going to get the same Post that Google had gotten when they crawled the page.

So, how do you prevent this from happening? Simple, you tell bots not to index /?random. You can just add this to your robots.txt file:

User-Agent: *
Disallow: /?random

That’ll tell all the Bots that crawl your site (or, at least, the ones that follow the robots.txt standard) not to index /?random. Or, if you don’t want to do that, you can just add the following to your link for the Random Redirect:

rel="nofollow"

Now, hopefully those links to http://mattsblog.ca/?random will disappear out of search engines fairly quickly. :D

Oh, and by the way, you can get a Random Post by clicking here.