At first I thought it was fake, but if you visit the offending website, it’s unfortunately real. So yeah, after a short time of giggling and raging I worked on a way to bypass this.

How to bypass it

The easiest way, is to vote with your feet and not use the website. But in some cases, that isn’t always an option.

A working method I found (if you are using Google Chrome or Safari) is to hide the element.  With your mouse right click on the element and click “Inspect Element”, this will open the developer tools. Then under the “style” side menu just add the rule “display:none;” and it should disappear. In most cases, it might look a bit like the screenshot below.

You can also right click on the element in the developer tools and click “delete node” on the html causing the ragebox.

Extra Notes

• This is the same method using on my post labelled: Bypass Facebook’s “Like this to see the picture” pages using Google Chrome.
• You can also add a rule to your AdBlocker to stop these working on most websites, but that might affect sites which use lightboxes to look pretty.
• We totally need to standardise the <lightbox> tag into HTML5, just to deal with crap like this

Here is a quick cookbook on how to get started with Canvas where you will learn how to draw basic shapes and colours.

Finding your Feet

The first thing you need to start playing with the canvas tool is a browser which supports canvas. Currently most modern browsers do support canvas (This includes, IE9, Google Chrome and Firefox).

Next, set up the shell of your HTML5 page. To save you time I have made a basic example you can copy.

The important thing to remember about adding the canvas tag to your page is:

1. Your page has the html5 doctype, otherwise it might not work.
2. You add a width and height, otherwise your graphics may look cropped.
3. You add a “Your browser does not support the  HTML5 notice” notice in the canvas tag for older browsers.

Making a Square

Making a square is pretty simple; in a nutshell all you need to be able to do is understand how x/y coordinates work. I’ve uploaded this demo.

// More canvas stuff  will go here.
context.moveTo(5, 10); // Move the start point to x = 5, y = 10
context.beginPath(); // Open the path i.e. Start drawing
context.lineTo(55, 10); // Draw the line to x = 55, y = 10 then continue
context.lineTo(55, 60);
context.lineTo(5, 60);
context.lineTo(5, 10);
context.closePath(); // Close the path, so that javascript knows the shape is done.

// Fill the shape.
context.fillStyle="#8ED6FF";
context.fill();

// Colour in the border of the shape.
context.strokeStyle="#0000ff";
context.stroke();

Building a Circle

Creating a circle is a little different, instead of just putting the x/y coordinates you also have to state the starting radius, ending radius and whether if you your arc to be anti-clockwise (Weird right?). Here is the code example.

context.arc(100,75,50,0,Math.PI*2,true); // arc(x coordinate, y coordinate, radius, startAngle, endAngle, anticlockwise)

Rotating your Canvas

This is probably one of the most useful features for most web designers out there. Pretty much you can rotate the canvas. Check out my example.

// Rotate the canvas 15%
context.rotate(0.15);

Further Reading

• MDN Canvas Tutorial
• How to Draw with HTML 5 Canvas by Think Vitamin
• HTML5 Canvas Cheat Sheet
• The canvas element – HTML Standard

View on YouTube

This video makes use of Google Chrome’s Developer Tools which allows you to edit CSS/HTML in real-time on a web page.

Update: If you use Greasemonkey the Facebook Like Bypass script will do the above for you.

IETester – Internet Explorer is a pain to build a website on, mainly because standalone versions are difficult to run on Windows Vista and Mac. This little tool makes testing your website on multiple versions of Internet Explorer a breeze.

IETester allows you to compare you website in Internet Explorer Versions 5 to 8. Its interface is easy to understand and while there is still work needed to be done on it, I would be surprised not to see it on every web developer/designer’s desktop.

iPhoney – Lots of users are now browsing the internet on their iPhone. It makes sense for webmasters to make sure their website works correctly on the small screen.

BrowserShots – BrowserShots is quite famous for allowing designers to see their websites is lots of browser (in the region of 93) on major OS’s.  The main disadvantage though is that you have to wait over an hour to see the screen shots.

IE NetRender – Similar to BrowerShots, in terms of a web based screen grab service. But this website does not require a wait of up to an hour to see a screen shot. However, it does only support Internet Explorer.

However, many webmasters (and blog lords) forget to add a print sheet (many of the themes for wordpress lack even a simple CSS print sheet). Here is a quick video tutorial on creating a simple print CSS really quickly.

Linking to the Print CSS

Linking to the Print CSS is quite simple; essentially all you need to do is use the following code:

<link href="URL TO PRINT CSS HERE" rel="stylesheet" type="text/css" media="print" />

Hiding everything unnecessary

Hiding elements can be quite tricky, but here is a snippet of code I normally use:

#element_you_want_to_hide{
	visibility:hidden;
	position:absolute; top:0px; left:0px;
}

Further Reading

Don’t Rely on Background Colors Printing – A really neat article on why using colours in your print CSS is just a bad idea.

CSS Mastery: Advanced Web Standards Solutions 2nd Edition – An awesome book which is recommended by most professional web designers and developers.

Google offers Webmasters an easy solution to create simple or and quite complex graphs in the Google Chart API section of the Developers Guide. It is quite simple to use, if you want to create an image such as above, just link to the following image:

]http://chart.apis.google.com/chart?cht=p3&chd=t:60,40&chs=250x100&chl=Pie|Not%20Pie

Google will then do the graphical generation stuff; here is a quick overview of the URL structure (key -> value):

• cht – What type of chart you want:
  • p3 – 3d pie chart
  • p – 2D chart
  • v – Venn diagram
  • s – Scatter Plot
  • lc – Line Chart
  • bhs – Horizontal Bar Chart
• chd – The Chart Data
  • Separated by commas, for example 10, 20 , 30
• ch1 – Chart Label
  • Labels separated by Vertical Lines (pipes)
• chd – Chart Dimensions (Maximum – 1000×300)

Make sure you take a look at Google’s documentation, it will show you how to do some more complex stuff.

How to use Conditional Comments

Conditional Comments let you execute sections of code in just IE, so you can import custom CSS sheets (to deal with IE’s weird rendering engine) or special JavaScript; here is how to use conditional comments:

<!--[if IE]>
This will only show for Internet Explorer (IE)
<![endif]-->
<!--[if !IE]>
This will only show if the client is not using IE.
<!--[endif]>
<![if IE 6]-->
Only shows on IE6
<!--[endif]>
<![if lte IE 6]-->
Any IE browser less than or equal to version 6.
<!--[endif]>
<![if gte IE 7]-->
Any IE browser higher or equal to IE 7
<!--[endif]>

Just place snippets of the above code anywhere in your code. If you want more information conditional commenting take a look at the Conditional Comment Wikipedia page.

Add the following to the top of your CSS:

* {
	margin: 0;
	padding: 0;
	color: #000;
	background: #FFF;
	font-style: inherit;
	text-decoration: none;
	font-size: 100%;
	font-weight: normal;
}

Example

Click here to see Live Demo

The Code

<style type="text/css">

<!--

/* Style the links */

#exmaplebox a {

    float:left;

    text-decoration:none;

    font-size:14px;

    font-weight:bold;

    height: 22px;

    width: 100px;

    text-align:center;

    display:block;

    padding: 0 10px 0 10px;

    margin: 2px 10px;

    border:1px solid #CCC;

}

#exmaplebox a:hover {

    text-decoration:underline;

}

/* this bit is the drop down bit */

#exmaplebox ul {

    float:left;

    margin:0;

    padding:0;

    height: 26px;

    width: 150px;

    overflow:hidden;

    list-style:none;

}

#exmaplebox ul:hover {

    overflow:visible;

}

#exmaplebox ul li {

    float:left;

    width:300px;

    margin:0;

    padding:0;

}

-->
</style>
<div id="exmaplebox">

<a href="#link">Link</a>
<ul>
<li><a href="#link">Link</a></li>
<li><a href="#link">Large Sub-Link</a></li>
<li><a href="#link">Sub-Link</a></li>
</ul>
<ul>
<li><a href="#link">Long link</a></li>
<li><a href="#link">Sub-Link</a></li>
<li><a href="#link">Large Sub-Link</a></li>
</ul>

<a href="#link">Link</a>
</div>

Download the Code