Tag: jQuery

Generating QR Codes in jQuery with jQuery.qrcode

You might not often need to dynamically generate QR codes in your web app but, when you do, jQuery.qrcode will be a timesaver. Written by Lars Jung, jQuery.qrcode is a wrapper to Kazuhiko Arase’s QR Code Generator.  There is a pure Javascript implementation of the original library so Lars wrapper only really makes sense if you are already using jQuery in your application but, if you are, it greatly simplifies the process.

Using jQuery.qrcode is as simple as including the library and calling it with the required parameters.


<!-- Load the libraries -->
<script src="jquery-1.10.2.js"></script>
<script src="jquery.qrcode.js"></script>

<!-- This is where the generated QR code will appear -->
<div id="img-buffer"></div>

<!-- Now generate the QR code! -->
<script>
    $('#img-buffer').qrcode({
    render: 'image',
    width: 400,
    height: 400,
    color: '#000000',
    text: 'http://dvolvr.davidwaterston.com',
    ecLevel: 'H',
    bgColor: '#FFFFFF',
    radius: 0.5
 });
</script>

The latest release (0.6.0) supports soft, rounded corners and the ability to embed an image or text in the centre of the code. There’s also a new interactive demo page that lets you to try out all the features, to see if the library suits your needs, before you download.

Because I could, I generated the QR code at the bottom of the right-hand sidebar using jQuery.qrcode.

More:

Advertisements
Posted on by David Waterston 2

The easy way to E.U. “cookie law” compliance

In May, 2012 a new e-Privacy Directive (adopted in 2009) became law throughout the European Union. Know colloquially as the “EU cookie law” (though it also regulates Flash ‘cookies’ and HTML Local Storage) this sets out rules about when and, to a lesser extent, how a website visitor must be asked for permission before a cookie is set in their browser. Unfortunately, despite having years to plan and implement the new regulations, their introduction has been botched. With each member state left to interpret the rules as they see fit, the result is a hodgepodge of laws, guidelines and contradictory advice which neither meets the needs of webmasters or the users of their site. The end result has been that, so far, many companies appear to have decided that ignoring the law is the best and/or cheapest option, despite the fact that failure to adhere to the regulations  can result in a hefty fine – in the U.K. the Information Commissioner’s Office (ICO) have the ability to impose a penalty of up to £500,000 for non-compliance.

Should you decide that you do actually want to comply with the law, you’ll find that it doesn’t have to be difficult or time-consuming. There are plenty of ready-made solutions,  my own favourite being Cookie Control from Civic UK. This free, jQuery based library provides a clean, unobtrusive and attractive way to notify the user of what exactly you are planning to use cookies for and, optionally, to gain their permission. It provides a comprehensive selection of display options to suit your usage patterns and built-in support for geolocation using the geoPlugin service so that you can target only those with EU-based IP addresses. I particularly like the triangle icon option that sits in the bottom left hand corner of the screen – as Civic develop for many U.K. government agencies, it’s likely we will see it becoming a commonplace and recognisable icon that immediately alerts site visitors to cookie policy.

With it’s online configuration tool, it takes next to no time to integrate into your site(s) – depending on how many cookies your site is setting it will most likely take you less time to implement that it took me to write this blog post.

The Cookie Control configuration interface

 

The Civic UK site provides comprehensive instructions for deployment of Cookie Control and while this is a job for a developer, it’s no more difficult than implementing any other jQuery-based library or plugin. The only feature I would like to see added to the Civic site is some links to the library in action. For now though, you can find a minimal version of it on their own site at http://civicuk.com and a more comprehensive implementation at this public library site – http://www.corkcitylibraries.ie/digital.

Bonus: it was developed in Scotland.

More:

Posted on by David Waterston 0

“Don’t be a semi-colon”

I missed it at the time but this blog post by Christian Heilmann is really the only thing worth reading with regard to the whole Twitter Bootstrap “wilfully screwed up code” debacle.

The reason why our parsers are so lenient is that the web is already filled up to the brim with horrible code and we don’t want to break backwards compatibility. It is not a carte blanche to write more sloppy code. We’ve done that, we should not write more code faster but cleaner code and re-use it more often.

— Christian Heilmann

More:

Posted on by David Waterston 0

A neat solution for in-page help

There’s no mention of browser compatibility and little in the way of documentation (it’s “look at our source and see”) but jQuery plugin Pageguide.js looks like an excellent (and very easy) way to add great looking, unobtrusive-but-there-when-you-need-it, in-page contextual help to a site.

Bonus: It’s free.

Pageguide.js in action
Pageguide.js in action

 

More:

Posted on by David Waterston 0