Monitoring a site with UptimeRobot

I’m late to this one, but there is a fantastic service called UptimeRobot for monitoring site uptime. A killer feature is the ability to add a simple status page via a subdomain to your site. Example: status.sheru.uk.

First, head over to UptimeRobot and sign up.

Uptime Robot sign-up page

  • There are no sites configured initially, so we need to add one

Adding a site

  • Now you need to decide what site(s) to monitor.

Adding a site to UptimeRobot

  • Once you’ve done this, you can create a custom status page. This can be accessed from clicking My Settings at the top of the page and scrolling down until you find the option for Add Public Status Page.

Adding a custom status Page

  • If you don’t want your public status page to be public, you can enter a password. I left mine blank.

Setup public status page

  • We want this status page to be available on a subdomain of an existing site (status.sheru.uk). Once the form is complete, we need to edit our DNS record (this will be either where you registered your domain, or your server host) and add a new CNAME record. We point this at stats.uptimerobot.com.

Updating DNS record

  • This should be available almost instantly. Visit the subdomain you created and you’ll see your new status page.

Example public status page

You can continue to add as many sites as you like to this status page, or go back and edit the settings if you decide you don’t want this information to be public. You can also create different status pages, with their own privacy settings –but you’ll need to use a different subdomain for each.

Animated CSS reveal on page load

I’m still playing with animations on page load and put together a little demo and some notes.

What do we want to animate?


@keyframes fadeinanimation {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

Now we can apply the animation to our elements (the .fadein class):


  .fadedin {
    opacity: 0;
    animation: fadeinanimation ease-in 1;
    animation-fill-mode: forwards;
    animation-duration: 1s;
    animation-delay: .2s;
 }

See it in action:

http://codepen.io/shellbryson/pen/pRJqxj

Community site

With the migration to my new development server well under way, I was mulling over what to do with a place-holder page for the building I live in (because, buildings need sites too?)–then yesterday a notice board appeared in the shared hall. No excuses. So I replaced the site on the newly minted server with a hand-spun single page.

Features played with:

  • CSS animation on load
  • Google Maps API

NorthLeithMill.com (+git source)

Screenshot of NorthLeithMill.com
Updated community placeholder site