Ring a bell when someone visits your website

I love the new realtime Google Analytics. I love the fact how you can see what people are doing on your website right now. However I can’t stare at the interface all day, so why not play a little sound every time someone visits your website?

Note that this idea was inspired by bellbot, a website with the same functionality. My solution requires no signup or client side code (besides Google Aanalytics) though.

This is a little bookmarklet that you can run on your realtime Google Analytics page that plays a bell everytime a new visitor enters your website. The video below shows how it works.

It is now even easier to ring a bell, here are the updated steps to Ring a bell!

  1. Add Ring a bell! as bookmark to your browser.

  2. Get Google Analytics and make sure you have access to the realtime data.

  3. Navigate to the Realtime overview: Home – Realtime – Overview

  4. Click on the Ring a bell! bookmarklet.

For those curious, here is the javascript function.

(function( d, c ){
   var beep = new Audio( 'https://mikevanrossum.nl/stuff/doorbell.mp3' )
     , check = function( old ) {
      var visitors = parseInt( d.getElementById( 'ID-overviewCounterValue' ).innerHTML );
      // c.log('visitors: ' + visitors);
      // only try the second time and up
      if( old || old === 0 ) {
         //the difference between the old number and the new number
         var dif = visitors -- old;
         // if the new number is higher, we have new visitors
         if( dif > 0 ) {
            // play a sound & log for each visitor
            while( dif-- ) {
               c.log( 'Ding! New visitor!' );
               setTimeout( function() { beep.play(); }, 500 * i );
            }
         }
      }
      setTimeout( function() { check( visitors ); }, 2000 );
   }
   check();
}( document, console ));

Sharing JSON data between jQuery and PHP using Ajax

When building interactive websites I often find the need to send or receive data after a page load. Ajax is the perfect solution for this problem, as it permits data sharing between the front end (javascript) and the backend (PHP) in the background.

Why would I need Ajax?
When you you start using Ajax it opens endless possibilities for your website, think about autoupdating a page (timing), showing specific content on a click or adding new content on a scroll (for example when scrolled to the bottom), or logging details (think Google Analytics).

When you use jQuery you can use a couple of very powerful build in functions to make Ajax a breeze.

more

Posted at February 05, 2012, under jQueryPHP.

The most amazing webGL projects

In this post I’ll list creative and beautiful webGL projects which I think are worth noting. I mainly created this list for myself, it contains cool webGL content from around the web. I’ll try to update it when I find new stuff worthy enough.

WebGL is a technique that extends javascript in a way that enables browser to render graphical stuff super fast (by using the GPU). You need a modern browser for the links to work.

The coolest stuff is on the top of the list.

Automatically backup your SQL database every day

As I build this site I decided to create my own site analytics instead of using Google Analytics. I need to create a solid backup system to save those analytics in case something goes wrong with my database.

This solution has two parts:

  • A mysqldump that saves an export of my whole databse into a file
  • A PHP script that mailes the export as an attachment to a Gmail mail account.

Both parts are automated using cron.

The mysqldump was pretty easy:

/usr/bin/mysqldump -u x --password=y z | gzip > /backups/export.sql.gz 2> /home/vgemtdpx/backups/export.sql.err

Replace the x with your database username, the y with your password and the z with the name of the database you want to backup.

That command tries to dump an export in /backups/export.sql.gz, if it can’t (if there is any output) store that output (the error) instead in export.sql.err.

You can cron that right away.

For the next part we use PHPMailer so we can attach the export. This is the backup.php:

$address = 'x@gmail.com';
$password = 'y'
$name = 'Mike van Rossum';

$path = dirname(FILE);

require $path . '/path/to/phpmailer.php';

$mail = new PHPMailer();

$mail->IsSMTP();
$mail->SMTPDebug = 2;

gmail settings

$mail->SMTPAuth = true;
$mail->SMTPSecure = "ssl";
$mail->Host = "smtp.gmail.com";
$mail->Port = 465;
$mail->Username   = $addres;
$mail->Password   = $password;

the senders

$mail->SetFrom($addres, $name);
$mail->AddReplyTo($addres, $name);

$mail->Subject = "daily backup of DB: mikevanrossum.nl";
$mail->AltBody = "See attachment";
$mail->MsgHTML("See attachment");

$mail->AddAddress($addres, $name);

add attachments

$mail->AddAttachment('/backups/export.sql.gz');
$mail->AddAttachment('/backups/export.sql.err');

Once you’ve replaced it with your data you can cron this script to using something like this:

/usr/local/bin/php -q -f /path/to/backup.php

Make sure the mysqldump runs first and the PHP runs an interval later (mine is set for 15 minutes), my experience is that both take a couple of seconds to complete but it’s better to be safe than sorry.

Beveiliging van mijn eigen CMS

You’ve found a dinosaur, this post is only here for archiving purposes. The content is outdated and is not applicable anymore.

In de post ga ik in op de beveiliging die ik heb toegepast op deze website. Ik verantwoord keuzes uit mijn ontwerp en leg uit hoe ik problemen heb opgelost. Graag rekening houden dat dit mijn eerste eigen PHP website is en ik alleen zaken heb beveiligd waarvan ik wist dat ze een mogelijk gat waren.

more