The code is really straight forward, but I wanted to share it anyway in case there’s someone out there who could make use of it or further its development:

$to = ""; // insert receiving email address
$from = ""; // insert sending email address
$body = "";
$bots = array('Googlebot', 'Yahoo', 'MSN'); //add the bots you want

foreach ($bots as $bot)
{
if (eregi($bot, $_SERVER['HTTP_USER_AGENT']))
{
$subject = "BOT DETECTED: " . $_SERVER['HTTP_USER_AGENT'];
if (mail($to, $subject, $body, $from))
{
// nudda
}
}
}
?>


I then took the code and compiled it into a WordPress plugin with a couple options for those people who prefer not to delve around in code. You can download the pluggin by clicking here, simply extract it, upload it to /wp-content/plugins/, activate it and look for the options panel in WordPress to configure your settings.

I used it when launching a website a few weeks ago; the client wanted to know when his website was indexed, so I installed the plugin on the website and had full control over when Google was crawling his site. Needless to say, I was able to alert him almost immediately when his site was indexed – happy client.

There’s a more detailed writeup on the code here, if you’re interested.

Drop me a comment if you use it please!

The combination of CSS3 transitions and CSS2 pseudo-elements will allow you to create an awesome ribbon menu, but please note that IE8 and IE9 don’t support CSS3 transitions so the hover states won’t be animated.

Right, let’s get to it:

First things first, the HTML:

The next thing we need to do is write some CSS to style the forked ends:

.ribbon:after, .ribbon:before {
margin-top:0.5em;
content: "";
float:left;
border:1.5em solid #fff;
}
 
.ribbon:after {
border-right-color:transparent;
}
 
.ribbon:before {
border-left-color:transparent;
}

Let’s setup the actual link styling:

.ribbon a:link, .ribbon a:visited {
color:#000;
text-decoration:none;
float:left;
height:3.5em;
overflow:hidden;
}

And now the animated folds:

.ribbon span {
background:#fff;
display:inline-block;
line-height:3em;
padding:0 1em;
margin-top:0.5em;
position:relative;
 
-webkit-transition: background, margin 0.2s; /* Saf3.2+, Chrome */
-moz-transition: background, margin 0.2s; /* FF4+ */
-ms-transition: background, margin 0.2s; /* IE10 */
-o-transition: background-color, margin-top 0.2s; /* Opera 10.5+ */
transition: background, margin 0.2s;
}
 
.ribbon a:hover span {
background:#FFD204;
margin-top:0;
}
 
.ribbon span:before {
content: "";
position:absolute;
top:3em;
left:0;
border-right:0.5em solid #9B8651;
border-bottom:0.5em solid #fff;
}
 
.ribbon span:after {
content: "";
position:absolute;
top:3em;
right:0;
border-left:0.5em solid #9B8651;
border-bottom:0.5em solid #fff;
}

And there we have it, an awesome ribbon menu with transition animation!

This tutorial was created by Jack Moore.

Some of the features are:

1. More built in tools for real-time editing.
2. Page Inspector allows you to look into a page’s structure.
3. Style Inspector allows for quick and easy style editing.
4. Scratchpad uses Eclipse Orion to give you syntax highlighting
5. A full-screen API for full screen web experiences.

Those aren’t shabby additions and some of them are definitely going to give Chrome’s developer tools a run for their money.

The tools come bundled with Firefox, so you’ll need to update to get them.

Over to you Chrome, let’s see how you come back!

CSS Refresh is a really small and unobtrusive JavaScript file that monitors your CSS files, when you make a change, the JavaScript file automatically implements the changes and you need not refresh your browser – think of how much time that could save you! If I had a dollar for every time I’d pressed F5, I’d be writing this from my villa in France!

Getting started is really easy, you just need to follow 3 really easy steps which you find here: http://cssrefresh.frebsite.nl/#how

It’s a really useful little tool, give it a go!