Browse > Home / Archive by category 'Articles'

| Subcribe via RSS

Smart recipes! Intelligent mobile-ready recipes for your kitchen. Share, invent and eat more adventurously!

CSS progress bars without extra DIVs

August 7th, 2010 | Comments Off | Posted in Articles, smrtr, Web Development

While working on the smrtr project I needed to create progress bars to show the completion. However, rather than having independent bars all over the place, I wanted to create bars that could be contained within another element.

The ideal solution would be the possibility to scale a background image to a given width with CSS but this is not available until CSS3 (if then). So another approach was needed:

1. Position absolute & z-index

Intially I approached this by including an additional div within the object to show the progress bar. By setting position:relative; on the container and position:absolute; top:0px; left:0px; on the internal div it was possible to overlay the bar on the container. An additional z-index:1 on the content stacks them up correctly and the bar can then be assigned a width to show the percentage.

This works fine, however, it restricts you from assigning bars to any span elements (can’t put a div inside a span) and gets messy due to the additional divs added. Adding extra elements for an effect is always a last-ditch option, as it complicates the readability of the code.

2. Background-position

So we have option 2. Originally this was option 1, but discarded because it ‘did not work’. A cup of tea later however, and I found a way to make it so it does. Background position positions an image relative to the top-left of the block, and nowhere else. This is a shame because if we could position from the top-right we could just slide the background image backwards and forwards to get the effect.

Setting background-position 0-100% slides it away from the left hand edge, leaving the space in the wrong place. We can set the background-position to -0 to -100%, but only if we know the width of the element and create the background-image to fit. Unfortunately that doesn’t apply here.

So the solution? Create an image that is 50% bar, 50% blank.

When this image is positioned at 50% the division line will the bang on 50% across the container. At background-position: 55% the barline will be 45% across the container. Yes, 45%. The positioning goes the wrong way, but it is proportional and stays so at any size container. All we need to do is subtract the value from 100 before applying the position.

The code can be applied to any element you like:


.percent-complete {
background: url(../img/progressbar-50.gif) repeat-y;
background-position:50%;
}

The source image:

It in action:

Tags: , ,

How to Have an Emergency

July 15th, 2010 | 2 Comments | Posted in Articles

Having worked in the emergency services for a number of years I noticed a serious lack of understanding from people about how the whole 999-Emergency thing works. It makes things harder for us, but also harder for the people calling & wouldn’t take much to rectify. Here’s a quick guide.

  • You dial 999

You’ll be connected to the first Emergency operator available. This may be in a distant part of the country like Milton Keynes, Bangor, Blackburn, Glasgow & so on. This has no effect on how quickly any help is getting to you, in fact it makes it quicker.

  • Operator: Emergency Operator, what service do you require?
  • You: Get me the police, ambulance, fire. Hurry up

The operator knows where you’re calling from & will connect you to the local services you request, in the order you request them. So, if there’s a fire ask for fire first. If somebody has been stabbed the ambulance is the best bet (although you might want the police too, unless you did it). That said, all the services talk to one another & constantly exchange relevant information.

The operator will start to connect you. Usually, you will be connected immediately, but you may be in a queue. Your call is important to us, we’re just busy dealing with that 20th call for the same traffic accident, or the drunk person who’s lying sleeping in the street. Yes, we’d rather not be doing that too, but we have to because it could be something more serious.

If you have to wait, use the time to do something useful.

If the operator cannot connect you to a particular centre after a certain time, they will try & pass you elsewhere (we occasionally take calls for the other side of the country). Do not get annoyed with the operator, the wait is not their fault (I refer you again to the drive-by callers & drunks).

  • Your connected….
  • Operator: name of exchange connecting, your telephone number
    Pssst… They’re talking to us. Your telephone number may seem irrelevant, but its the most important piece of information available to us. If the line drops, or you collapse, we can use it to trace your location. Without it we can do nothing. Be patient & be silent. If you don’t interrupt it will take approx 5secs to pass. If you do it’ll delay help to you.
  • Us: Whats the address of the emergency?
  • You: That hill, you know, with the 3 bushes on it, yeh? Near that. Come on!
    Tell us as if we don’t live in your town. Because we don’t. We don’t know the hill where Jimmy snogged Sharon last Saturday. At the very least a street & a town, a postcode, a landmark, or a grid ref is needed. Thats the best way to get help on its way to you immediately. This is your responsibility.

Providing you have given a decent location, the information is passed automatically to dispatch & the help you requested is on the way. Nothing said after this point (apart from a change in address at confirmation) is speeding up or slowing down anything. We’re not driving the vehicle, we’re on the phone to you.

  • Us: Confirm the telephone number…
  • Us: Confirm the address…
    Tell us what you just said before, again. This is not a trick question. Making sure help is heading to the right location is important & we’d rather find out now than once the ambulance is at the wrong address.

Now we’ll ask some questions to find out exactly what’s going on and ensure you are getting the right help. If you don’t know the answer say “I don’t know”. This is quicker than starting an argument as to the reason for asking the question. It won’t make any difference to how fast anything is coming – because it’s already coming as fast as it can. Have you ever seen anything with blue lights & sirens not driving fast? No. But delaying your answer will delay us moving on to help someone else. Remember when you were in the queue?

Talk to us, not the people in the room with you. We’re trained to help, but unless you actually talk to us & tell us what’s happening there is nothing we can do to help you. Listen too. There will be people with you who think they know what to do – that uncle who did a first aid course in 1973 or that retired firefighter from next door. That’s fine, but things change & people forget. On the end of the phone is someone who is trained & (most importantly) kept up to date. Incorrect 1st aid can do more harm than good, listening could save a life.

Helpful Tips

  • Dont put yourself in danger
    I’m going to rant shortly about people who don’t help, but it’s just as important not to try and be Rambo (he killed people mostly). You are not invincible & under no circumstances are 2 dead people better than one.
  • Before you start dialling, say clearly “I’m calling 999″
    Do this & everyone around you knows you’re taking control & they don’t need to call themselves. There is nothing worse than two people standing next to one another and calling at the same time. Because we can’t take your word for it that someone else is making a call, all you are doing is keeping another emergency call from getting through.
  • If it’s taking a long time to get through to a service, use the time to do something useful. Here are some ideas.
    • Find out where you are.
      This is very important in getting to you. If you don’t know where you are what chance have we?
    • Find out whats going on.
      Ask someone. If someones sick, are they conscious & breathing? If it’s a crime, who did it? Where are they? Just why are you calling anyway? This information is very useful.
    • Calm everyone down.
      We can’t hear a damn thing when everyone is screaming. If we can’t hear you, we can’t help you. You dialed 999 so get some attitude & take control. We need to be able to act through you.
  • Seen a road accident? Driven past? Then why are you calling? Unless you know what’s happened you’re not of much use and simply clog up the lines for people trying to get through who do. I appreciate you want to help but half-assed help helps nobody. Either go the whole way, stop & actually do something, or drive away. You shouldn’t be on the phone while you’re driving anyway. Tut.
  • We can’t tell you how far away help is
    Sorry, but if it’s any consolation we don’t much like this either. It’s something to do with stopping us getting sued if the vehicle on its way breaks down or gets diverted. Who would do such a thing? Well someone tried to sue the ambulance service for burns recieved from a defibrillator when they were resuscitated, so who knows. What I can tell you is…

    • The nearest help to you set off as soon as you gave your location
    • Unfortunately (or should that be fortunately), we’re not expecting you to die, so we don’t park outside your house.
    • It’s coming as fast as humanly possible
    • There’s nothing you, I, or anyone can do to make that any faster
    • If we tried to the chances are it would crash, kill even more people & you’d have an even longer wait. First rule of emergencies – don’t make them worse
    • We can tell you what to do in the meantime. Only you can make a difference before the help gets there. Up to it?

Oh, you still on the line….?

  • Did you ask for more than one service? Stay on the line..
  • Operator: Connecting…

All comments, suggestions and hilarious stories welcome.

Note: I’m in the UK so this is all UK-centric, but generally the principles are the same. At our control we use a US system anyway, go figure…

smrtr: Learn Smarter Not Harder

June 22nd, 2010 | Comments Off | Posted in Articles, Linux, Miscellaneous, News, Web Development

This site has been sat quiet for a long time, hosting howtos and information on my wordpress plugins. But that doesn’t mean that I’ve been sitting here doing nothing. For the past few months I’ve been working on a new project: smrtr.

smrtr is collaborative learning, quiz and study tool. Take quizzes, track progress and receive recommended study aids to build your knowledge. Ideal for students, professionals or general-knowledge know-it-alls alike – focus your learning where it’s needed most!

All this, and it’s community generated too. Following the example of wikipedia, the site allows everyone to contribute their own questions, build their own exams and form their own groups on topics of their choosing.

Take a look at the site and leave feedback here. It’s early days, but this could change the way you learn forever!

Look forward to hearing what you think!

Getting Started with AdSense Manager 3.x

AdSense Manager 3.x is the latest update to the popular WordPress ad management plugin. More than a normal gradual update, version 3.x represents an almost complete rewrite to support a number of changes in the Google AdSense service and the recent explosion in new blog-targeted ad networks. As of writing, AdSense Manager 3.x now also supports Adpinion, AdRoll, AdBrite, Commission Junction, HTML Code, ShoppingAds and WidgetBucks.
More »

WidgetBucks CPM Location Filtering

January 25th, 2008 | Comments Off | Posted in Articles, Tutorials, Web Development

The new widget advertising network from WidgetBucks has been getting popular recently for the higher click through rate and potential earnings. To maintain the amounts advertisers were willing to pay, they recently switched CPM ads for international traffic. Unfortunately this means that non-US & Canada visitors get lower earning non-targeted ads.

Until WidgetBucks targets non-US/Canada traffic better or provides Google-style “alternate ads”, it would be useful to be able to show something else to non-US/CA users in an attempt to maintain relevance.
More »

AdSense Manager – New features, interim update

December 8th, 2007 | 8 Comments | Posted in Articles, News, Wordpress Development, Wordpress Updates

Users of the AdSense Manager for WordPress may be interested in an update from Kaspars Dambis which brings Google’s new Rounded Corners and Ad Slot Ids. These features will all be rolled into the updated AdSense Manager v3.0 coming shortly, but in the meantime Kaspar has provided a download of the updated plugin.

AdSense Manager v3.0 should be along in the next week, so if there are any other updates you would like to see let me know!

Free SMS Text Messaging via Email

April 7th, 2007 | 9 Comments | Posted in Articles, Miscellaneous, Mobile, Tutorials

Most mobile providers provide a method for sending SMS messages to handset by email, although many do not publicise this capability. Messages sent to these specially formatted email addresses are forwarded directly to your mobile device. In effect this service gives you free SMS messaging from PC to mobile phone.

It can take time to get this information direct from your mobile provider, so I’ve compiled a database of all known SMS Email addresses used by the major international networks.

To get your own personal SMS Email address, use the automated form to generate your own personal address.

Migrating Email Accounts in Outlook 2003

April 6th, 2007 | Comments Off | Posted in Articles, Office

Ever find yourself wanting to copy emails from one Outlook account to another? Say maybe someone moves on to another job and you want to keep a record of what’s been done, or your company is reorganised and departmental emails need to be seperated up.

If you’ve ever tried to do this in Outlook 2003 you’ll have been banging your head against a wall trying to figure it out. It may be that newer version of Office provide this function automatically (I don’t know, I use OO.org) but many offices do not upgrade to the latest Office software regularly. For that reason, here’s a step by step guide to save you half an hour of your life.
More »

Developing with WP-Plugins SVN

March 26th, 2007 | 2 Comments | Posted in Articles, Tutorials, Wordpress Development

The new wp-plugins.org adds extra incentive for plugin developers to use SVN.

There are a number of detailed SVN guides available, as well as an entire online book. But for casual plugin developers wanting to get the benefits of using the system most of the information is over detailed or not specific to the wp-plugins.org system. This tutorial covers adding and updating plugins through the wp-plugins.org SVN.
More »

KDE fileprotocol+transportprotocol://

March 20th, 2007 | Comments Off | Posted in Articles, Linux, Tutorials, Wordpress Development

While getting started using the new wp-plugins.org SVN I was looking for a quick way to download the contents of an SVN to local disk. This can be useful when doing research on methods employed by other plugins or for getting a local development copy where SVN access is unavailable. Under KDE you can normally access any remote location using the standard URL format. For example, an SVN (using the svn://) protocol would normally be accessed using the URL style svn://svn.wp-plugins.org.
More »