I was recently shown (via Reddit) possibly one of the biggest crime against UX, a lightbox which asks you to share the website or wait 600 seconds.
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.
The HTML5 canvas is a really neat new feature which allows you to draw shapes. It’s a little unknown of how it will be implemented in the mainstream web, however current forecasts suggests it can create really cool games such as Pirates Love Daisies, applications such as Sketchpad or even a new method of CAPTCHA.
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:
Your page has the html5 doctype, otherwise it might not work.
You add a width and height, otherwise your graphics may look cropped.
You add a “Your browser does not support the HTML5 notice” notice in the canvas tag for older browsers.
Building a website is not difficulty, but making it look perfect in very browser is almost impossible. Here are a few essential tools to make cross browser testing a little easier.
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.
CSS sheets revolutionized the way websites are managed and created; they essentially made managing the design a piece of cake.
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.
