‘Clickjacking’, if you haven’t heard of it, is a method used by malicious individuals to trick users like you into clicking something without you knowing what you’ve clicked. It’s also known as UI-redressing and only works in browsers that support frames/CSS.

The idea is simple: An iframe is positioned above what looks like a clickable button on a website. This iframe is invisible to the user (opacity:0) and so the user unknowingly clicks on the iframe which may contain anything! This can be achieved through CSS alone, no JavaScript is required. A variation of this technique involves the use of JavaScript to move the iframe around the screen inline with the user’s cursor, therefore achieving the same thing but without having to convince the user to click on a button.

Background info

I believe the original concern was related to Flash and how a user could unknowingly enable their webcam and microphone so the attacker would have access. There are some other examples shown here: http://www.grc.com/sn/notes-168.htm.

Adobe resolved this issue in October of last year with a new release of Flash Player. Obviously this only offers protection for that particular exploit – gaining access to webcam/microphone; other more rudimentary techniques still work perfectly today.

Last week Nettuts’ editor Jeffrey posted about a new screencast competition. This isn’t my entry – it’s just a test-runner to see if I’m any good at the whole screencast thing. It’s a 30-minute screencast about event delegation in jQuery and in it I explain event bubbling/propagation and then go on to demonstrate how to develop an event delegation plugin for jQuery.

Note: The quality isn’t too great but if you make it full screen it’s much better!

Thanks for watching, if you have any feedback I’d love to hear it! I’m planning on recording my entry for that competition soon, it’ll also be on jQuery although I’m not sure of the exact topic yet…

As far as the internet is concerned, you’re a spammer until proven otherwise. In fact, many websites require us to pass a test just to prove that we are human. We might fool ourselves into thinking that we have the whole bot/spam think under wraps but truth be told, it’s much worse than we think; it’s controlling us!

In a perfect world we’d be able to detect a spam-bot from it’s movement around a website without having to interrupt a visitor (who could potentially be a human); actually, in a perfect world there would be no spam-bots at all but, due to the greed and idiocy of mankind, such perfection will never be achieved…

If there’s a crux to this entire issue then it would be this question: How exactly can we use technology to determine between something which is human and something which is not? It is definitely possible but with current methods we’ll never be able to guarantee a spam-free environment.

There is another really big problem though: many spam messages you’ll receive on a daily basis will have originally been typed out by a real human!

Take this example, I received this as a comment on an older post at 7:46pm tonight:

My name is Sabrina and I’m new to this site.

According to this message, a person, probably female, has arrived at my website and has been so enthused that she’s decided to write about her recent accomplishment (the accomplishment of being new to a website)!

Five things about this message make me 99% sure it’s spam

About a month ago I decided to begin on the long and tiresome journey of learning regular expressions. I even bought the book! So, in this post I’m going to share some of the awesome things I’ve learnt so far on my "journey".

The first thing to note is that I’m no way near the end of my journey and I’m still very much a novice in this area, so if an expert happens to stumble across this post I would very much appreciate some light-hearted critique! If you’re a novice like me I hope you can gain something from my ramblings.

Unrelated: I’d like to attribute the top speech bubble in the image to the right to XKCD. It’s from this comic!

Defining Regular Expressions in JavaScript

Most modern programming languages have support for regex (regular expressions) but I’ll be focusing on JavaScript’s implementation because that’s what I’m best at! It doesn’t really matter though because the typical regex notation varies little between implementations (As far as I know).

Like everything in JavaScript you can either create a regex pattern by using literal notation or by calling the constructor function of the ‘RegExp‘ object:

// Using a regex literal:
var myRegexPattern = /Regular expression goes here.../;
// Calling upon the object:
var myRegexPattern = new RegExp('Regular expression goes here...');

More info on the two methods can be found here: developer.mozilla.org/en/Core_JavaScript_1.5_Guide/Regular_Expressions

The first method (using a regex literal) is faster than the second but it compiles your pattern when the script is evaluated as opposed to the second method (Calling the object constructor) which compiles your pattern at runtime. So, if you wanted to include some variable data (perhaps from user input) in the pattern then using the object constructor is your only option. e.g:

I thought I may as well join in and give my best shot at forecasting the happenings of 2009 within the web industry.

Before I begin on what is bound to be a whole load of rubbish I’d like to share a few of the predictions from BT (British Telecom) [PDF] which were made back in 2005 (the following are expected to happen between 2006 and 2012):

• "Self destructing DVDs used for video hiring" (Erm…)
• "Personalised adverts on Radio" (Not yet)
• "e-ink screen advertising billboards" (Cool idea, but no)
• "Live CD-based OS distributed in newspaper" (What’s the point?)
• "MP3 Net downloads dominate over CD distribution" (I think this has happened)
• "Supercomputer as fast as human brain" (well we’re close)
• "Paypal migrates onto high street" (has this happened?)

My predictions

Good news for jQuery

This isn’t really a prediction, more of an obvious truth. jQuery’s recently acquired corporate endorsements (Nokia, Microsoft) will ensure the library’s ’survival’. jQuery 1.3 will surely be another smash hit, and with it, jQuery’s (Aka Mr Resig’s) monopoly will continue to grow. Sizzle will prove fantastic and will be massively adopted, not just by other libraries, but also as a means to quicker DOM traversal/management without the overhead of an entire library (web developers are bound to adopt it as a single entity).

jQuery will eventually (probably by the end of 2009) plateau at a high usage level and will remain largely static on a comparative level, however it will certainly continue to grow alongside all other JavaScript frameworks/libraries.

Other libraries will continue to grow steadily. MooTools will probably gain more exposure and more web developers will pick it up as a skill. In general, web designers/developers will become more accustomed to using frameworks and libraries, not just on the client-side either. YUI’s ‘market share’ will remain largely static. The status of the JavaScript framework ‘industry’ will remain largely oligopolistic although, as I’ve said, jQuery will definitely remain the most popular!

IE6 < 10%

Before the end of 2009 IE6 will probably fall below the 10% usage mark with the majority of it’s users adopting IE7, possibly IE8 later on in the year. More websites and web developers will stop supporting the browser completely. If things go to plan, I’ll probably drop support of IE6 around July although, to be honest, it probably won’t save us as much time as we think it will.

Smashing Magazine is probably the most popular web design blog of 2008, it has over 100,000 subscribers and publishes about 6/7 posts per week. I’m sure many web designers and developers think of it as the ‘goto’ resource for tips, tricks and advice but unfortunately it’s probably only a small handful of these people who are able to separate the good content from the not-so-good content. By "not-so-good" I either mean outdated or simple incorrect.

The purpose of this post is not only to weed out some of the not-so-good content but also to offer more modern solutions.

I want to have this post finished before lunch so I’ll only be covering a couple of the JavaScript follies of which there are quite a few:

POST: "jQuery and JavaScript Coding: Examples and Best Practices"

"This post was quite a good one actually, it covered many important features of the jQuery JavaScript library and touched on a few basic but essential good practices such as unobtrusive coding, degradability and accessibility." – this would’ve been my review if I was at least a tiny bit satisfied!

Rule #1 under the "Unobtrusive DOM scripting" section of this post dictates that you should separate JavaScript functionality. This is the central theme of unobtrusive coding – to make sure the content (HTML), the CSS (presentation) and the JavaScript (behaviour) are all separated and that the only line of dependency is backwards. By this I mean that the content should not depend on JavaScript and neither should the presentation but the JavaScript can depend on the content and the presentation. This SM article illustrated this practice with a code snippet:

BAD: <a onclick="doSomething()" href="#">Click!</a>  
GOOD: <a href="backuplink.html" class="doSomething">Click!</a>

The ‘good’ alternative may seem suitably unobtrusive at first but the chosen class name is definitely not! All elements should be named according to their content/meaning – giving an element a class of ‘doSomething’ is just as bad as giving it a class of ‘Button2pxBorderWhite’. HTML content should reside quite suitably on it’s own – when you add your JavaScript enhancements, ideally, you shouldn’t have to touch the HTML, even to add ‘hooks’. Fortunately the DOM API and the various JavaScript libraries available make DOM traversal incredibly simple, so adding ‘hooks’ (IDs/classes etc.) just for the benefit of the behavioural layer is not necessary and is somewhat obtrusive.

I was out today doing a little bit of Christmas shopping and decided to pickup the latest copy of the ‘net’ magazine. I like to see if they have anything good to say, usually I’ll find at least one pretty decent article which might offer up something innovative and interesting. This copy however was quite a disappointment… Have a look:

You might be thinking, "Wow, I ought to pick up a copy too!" – Well, don’t; there’s nothing interesting in there at all! In fact, just by the cover, this magazine could quite easily have been a copy from 12 months ago (apart from the ‘2009′ bit) and nothing inside the magazine is particularly thought provoking or innovative either. Just for this post’s sake we’re doing to ignore the ‘iPhone’ nonsense on the front-cover because I don’t see platform specific development as of a prime importance.

I’m sure none of you have missed the recent hype surrounding the new ‘Let me google that for you’ initiative, but for those who did miss it here’s what it’s all about, from the site:

This is for all those people that find it more convenient to bother you with their question rather than google it for themselves.

I think it’s an awesome idea and I’m already making use of it… it’s so much more fun to retort with a LMGTFY URL instead of the everyday "Have you tried Google?"!

I’m quite lazy and can rarely be bothered to go to the LMGTFY website so I created a cool bookmarklet which will let you enter a search phrase then it will go off and get a shortened version of the "let me Google that for you" URL. (It’s shortened so that when you post it on a forum/IRC/chat the recipient won’t know what hit ‘em until they click on it!)

You can try it out now by clicking this link:

Let me Google that for you!

If you want to keep it then drag the bookmark up to your bookmark panel/toolbar. (Or right-click to add to favourites).

UPDATE: The above bookmarklet doesn’t appear to work in older browsers and is a little bloated. I’ve created a much simpler one which will alert the shortened LMGTFY URL:

Let me Google that for you! (simpler)

Let me know if you spot any bugs in the second one (the simpler version) – it should be working in ALL browsers.

I recently completed a new template which has now been approved and is for sale on Envato’s ‘Theme Forest‘.

The template is aimed at photographers, either firms or individuals. It features integrated slideshows and a custom built jQuery gallery which emulates the high standards you would expect to find in a Flash solution.

Here are a couple of screenshots:

More info: themeforest.net/item/pixelle/22363

Even if you don’t plan on buying it please let me know what you think, it took ages to finish so any feedback is welcomed!

Recently I wrote a tutorial for NETTUTS.com which was published on Monday. "How to Mimic the iGoogle Interface": The tutorial takes the reader through the process of developing a mimic of the iGoogle interface using jQuery and its UI library.

Many of the comments have been really positive, thank you, it’s great to see all my hard work paid off!

Anyway, a few of the commenters wanted to know how they could save user preferences in some way, and some of them specifically mentioned ‘cookies’ as a reasonable storage medium for such data. To be realistic, the only alternative would be if you had a user-membership system, in which case a database would be ideal..

I’ve created a new (extended) version of ‘iNettuts’ which has the capability to save preferences to a cookie. It seems to work quite well, I’ve tested it on all the main browsers and it’s totally operable!

See the cookie demo | Download the new source.zip

To tryout the new cookie goodness try moving around a couple of the widgets or changing their titles/colours, then refresh the page, or even close the browser, re-open it and go back to the page, your widgets should be just how you left them!

Note: A widget’s collapsed/un-collapsed state is NOT saved – I might work this in at a later stage. « It now saves a widget’s collapsed state!