Radial Progress Indicator in CSS

So I had to show a progress indicator for an online questionaire and I also wanted it to look really nice.

Around the web you will find many different approaches so it can be a bit of a job to just sort through it all. In the end I settled on a CSS based approach with some javascript to set it up. Compared to the pure javascript approaches this has the benefit of nicely antialiased and resolution independent rendering across browsers. This means that even for never devices with retina screens but a pixelwise half size virtual screen – this will look as sharp as possible without any work on my part :)

There is a downside of course and it is that the technique uses the CSS3 rotate transform which is only supported on newer browsers. So if you have to allow for those with old IE versions to use the site you should probably look elsewhere.

I have based the code on an older pie graph timer example which is in turn based on an even older pie graph tutorial. In my case I wanted the progress indicator to not be a pie but actually a ring and also I wanted that ring to have a background-color that I could set. Having the background-color settable was not part of the examples I found so I have modified it to allow for that. Also I have modified it to work nicely with Twitter Bootstrap 3 – there was some problems due to the border box box-sizing applied everywhere by default in Bootstrap 3. In the spirit of sharing I am providing the code for you to download and improve upon.

In case you are wondering what it looks like you can have a look at the Signs Of Dyslexia Test that originated this work (just start answering the questions to see the progress indicator in action) or here is a screenshot:

css radial progress indicator


You can download the code here.

Fixing The Twentythirteen WordPress Theme

By default the twentythirteen theme that comes bundled with WordPress is a great looking theme. It uses modern fonts and large orange coloured graphical accents.

Another benefit of using this standard theme is that you can be sure that a lot of work has been put into it – the WordPress brand depends on it!

Still I believe it has a few drawbacks for most : the comments feed is broken and it does not honour the setting to show summaries of posts on the frontpage instead of full posts. In this article I will fix both, it is really quite easy.

First of all the comments feed will actually return xml but it will do so with a 404 not found http response code which will cause the Google crawler to report it as a broken link on each and every page. This is not good for SEO. Fixing it involves hooking the feed_link action and return false if it is the comments-link :

add_action( 'feed_link', 'remove_comments_feed', 10, 2 );
function remove_comments_feed( $output, $feed ) {
  if ( strpos( $output, 'comments' ) > 0 )
  return $output;

This is simply added to the functions.php file of the theme (“wp-content/themes/twentythirteen/functions.php”).

Next we modify the summary-generation in the content.php file. You should look for the hardcoded if statement :

<?php if ( is_search() ) : // Only display Excerpts for Search ?>

it is line 33 in the file. You then force it to summarize for all the standard multiple-post views by changing it to :

<?php if ( is_search() || is_author() || is_tag()
       || is_archive() || is_home () ) : ?>

and you are good to go!

Apache Catch-all Default Site

Are you running several name-based virtual hosts on the same Apache server? If so you need to be aware that it can cause problems if there is ever a DNS record pointing to the server that is not also configured as a virtual host.

The reason for this is that by default Apache will send unmatched requests to the first site found in the configuration. This sounds like a good fallback until you realize that in practice the first site in configuration files is a rather arbitrary choice and also that the result is duplicate content!

Duplicate content is bad for SEO so you should really try to avoid it. As an example if you have example1.com setup as a site in your Apache configuration and also example2.com is setup in the DNS records – Apache will serve the exact same content (from site example1.com) to both example1.com and example2.com visitors!

Not only that but at least in Google Analytics it can distort your statistics as when this happens it will sometimes show as if example2.com is a referrer for visitors to example1.com when in fact is was simply because Apache served example1.com content to example2.com visitors.

Fortunately it is really easy to avoid when you know to look for it. What you do is simply to add this code in your httpd.conf file :

<VirtualHost _default_:*>
   DocumentRoot /var/www/html

In this case the site in /var/www/html is shown when no virtual host matches in the hostname. This is where the default Apache site is stored so visitors will get a generic welcome to Apache page.

One important detail is that this section needs to be before the “Include conf.d/*.conf” line as otherwise it will not be the first site in configuration and you have not solved anything.

The ultimate CSS guide for email templates

Top 10 “Gangnam Style” Fan Videos

Honey – find and try coupon codes with one click


Save time and money when you shop online with Honey, a free Google Chrome based extension. Honey automatically finds the best coupon codes while browsing the vendor’s website. All you have to do is to click the find a coupon button which is automatically inserted in the page’s source code.

Currently supported websites/stores (more added daily):

  • Amazon – amazon.com
  • Amazon Canada – amazon.ca
  • Amazon UK – amazon.co.uk
  • Ace Hardware – acehardware.com
  • American Eagle – ae.com
  • Aeropostale – aeropostale.com
  • Athleta – athleta.com
  • Banana Republic – bananarepublic.com
  • Barnes and Noble – barnesandnoble.com
  • Bath and Body Works – bathandbodyworks.com
  • Beauty.com – beauty.com
  • Best Buy – bestbuy.com
  • Bodybuilding – bodybuilding.com
  • Brookstone – brookstone.com
  • Cafe Press – cafepress.com
  • Calvin Klein – calvinklein.com
  • Carters / Osh Kosh – carters.com
  • CVS – cvs.com
  • Dell – dell.com
  • Destination Maternity – destinationmaternity.com
  • Dick’s Sporting Goods – dickssportinggoods.com
  • Dockers – dockers.com
  • Dominos Pizza – dominos.com
  • DSW – dsw.com
  • EMS – ems.com
  • eToys – etoys.com
  • Fandango – fandango.com
  • FAO Schwartz – fao.com
  • Forever 21 – forever21.com
  • Gap – gap.com
  • GNC – gnc.com
  • GoDaddy – godaddy.com
  • Godiva – godiva.com
  • Gymboree – gymboree.com
  • Home Depot – homedepot.com
  • Hotels.com – hotels.com
  • JC Penney – jcpenney.com
  • JCrew – jcrew.com
  • Joann Fabric – joann.com
  • Kmart – kmart.com
  • Kohls – kohls.com
  • LL Bean – llbean.com
  • Macy’s – macys.com
  • Mattel – mattel.com
  • Michael’s – michaels.com
  • NewEgg – newegg.com
  • Nike – nike.com
  • Nordstrom – nordstrom.com
  • Old Navy – oldnavy.com
  • Overstock – overstock.com
  • Papa John’s Pizza – papajohns.com
  • Petsmart – petsmart.com
  • Piperlime – piperlime.com
  • Pizza Hut – pizzahut.com
  • Radio Shack – radioshack.com
  • Restoration Hardware – restorationhardware.com
  • Sears – sears.com
  • Sephora – sephora.com
  • Shutterfly – shutterfly.com
  • Snapfish – snapfish.com
  • Sports Authority – sportsauthority.com
  • Target – target.com
  • The Limited – thelimited.com
  • ToysRUs – toysrus.com
  • Walgreens – walgreens.com
  • Wayfair – wayfair.com
  • Zales – zales.com
  • Zulily – zulily.com

Instagram – Updates to Terms of Service and Privacy Policy

Instagram - updates to terms of use and privacy policy

The Instagram community has grown by many millions of people since they wrote their original Terms of Service and Privacy Policy. As the Instagram team announced in December, they have updated their Terms of Service and Privacy Policy. These policies also now take into account the feedback they received from the Instagram Community. According to the announced made last month, these updated policies will be in effect as of January 19th, 2013.

Here are a few key updates:

  • Nothing has changed about your photos’ ownership or who can see them.
  • The updated privacy policy helps Instagram function more easily as part of Facebook by being able to share info between the two groups. This means that the Instagram developer team can do things like fight spam more effectively, detect system and reliability problems more quickly, and build better features for everyone by understanding how Instagram is used.
  • The updated terms of service help protect you, and prevent spam and abuse as Instagram grows.

And remember, these updates don’t change the fact that you own your photos that you post on Instagram, and the privacy controls work just as they did before.