www.vingebarna.com
FRIENDS
Author Archives: Sam
MODx Professional Partner
Once again a big chunk of time passes by without a blog update. I really have to fix that. Things have been busy behind the scenes here, and a few things are changing, I’m really excited about 2012 and the new projects and collaborations it’s bringing with it. There’s also a new website slowly brewing away….
I’m also pleased to say that Toasted Digital is now an official MODx professional partner. It’s nice to finally become a part of the program after years of using the CMS and building countless sites using it. It’s great to see how it’s grown in that time, and where it’s heading.
New Launch : Films & Music LLP
Things have been quiet on the blog front recently, but that’s in partly due to how busy it’s been on the work side of things here at Toasted Digital. There’s been no shortage of great projects with agencies and freelancers a like.
The latest TD driven project is for a new company called Films & Music, who are doing creative business development for various levels within the music industry. With some help from Pixsaul on the MODx backend, we’ve illustrated, designed and built them a new web presence.
Facebook Apps Require SSL From 1st of Oct
If you’re into Facebook app development, it’s worth noting that Facebook appear to be going ahead with making it mandatory to serve your Canvas and Page Tab content from a secure connection from the 1st of October 2011. The Facebook blog very briefly mentions that you’ll need to obtain an SSL certificate to use these features. This’ll mean app owners will need to purchase a certificate to serve their content via https.
Summer News
It’s been a little while since I updated the blog, I do have some new tutorials and articles in the works, but it’s been a very busy summer at Toasted Digital.
I’ve been working for and with some really great people, including v-on, working on the classy Krailler converting their site to MODx Revolution, and Designing John Bassam‘s online presence. Krailler are doing some really big things in their London workshops, really excited to see how that progresses.
Interior Designer John Bassam
Next, Toasted Digital has taken on creating the full online identity for Wales based Klazar Marketing, expect an illustrated design work for that very soon.
Finally, I’ve been working with Pixillion on an exciting new project, still stamped top secret, for the Royal Geographical Society. All will be revealed on that soon…
On top of this a big new Toasted Digital experimental project (more details soon) and illustration/HTML5 app work here and there, and that’s a very busy summer! I’m always on the look out for interesting new projects as well, if you have something you’d like to chat about, get in touch. I also have a great network of freelancers always hungry for exciting new work.
MODx Evolution to Revolution Tag Converter
I’ve been doing a few MODx Evolution to Revolution conversions recently, and developed a simple jQuery script to handle converting the Evolution template tags to the new Revolution syntax. It’s pretty basic, but it does the job, so I thought I’d share with the community. Hopefully in the future there will be an easy way to upgrade, but in the meantime little tools like this should help a little 
Check it out
Confusion of the EU Cookie Law
I’ve recently written an article on HTML5′s Local Storage. The technology gives users a new level of ease through being capable of such things as remembering half completed forms for completion whenever they like. However, from the 26th of May 2011, this action is now illegal in the UK without the user’s prior consent.
The law, which comes from the EU’s Privacy and Electronic Communications Directive will apply to all websites within the EU. It affects all websites which store ‘non-essential’ cookies. So while we have the technology to remove extra hassle for users, as developers we’re now required to implement an extra consent handler (such as a popup) in order to use it.
The ICO website now has a slide which asks the user to accept cookies. Does the average internet user even know what a cookie is?
What does this mean? From what most people seem to understand, (and I use the word understand fairly loosely, as no one seems to completely understand this law, even the ICO are vague), this will basically make for instance, any website that uses google analytics, illegal. It’d also make remembering users’ preferences illegal without consent, which potentially means if a user chose not to grant permission, we can’t even remember that choice, creating a rather laborious cycle.
The law covers anything which stores information on a user’s computer, so HTML5 Local Storage would be inclusive of this despite being a similar technology, rather than a cookie.
From the ICO guidelines, it seems at least this would not affect ‘strictly necessary’ cookie data, for instance an “add to basket” action on an online shop.
We’ve been given a 1 year grace period to implement changes to our websites, but the general consensus is of being fairly uncertain exactly how to do this. From the point of view of a developer, the EU have been incredibly narrow-minded with their view of how cookies are used, and are at least in my opinion, massively hindering the progression of what we’re trying to achieve with making the online user experience as simple and easy to use as possible.
For a good break down and explanation of the law head over to Silktide or have a look at their very good video below.
Follow The Flag
Very happy to have launched a new Toasted Digital designed and built website last night. Follow The Flag is a directory for independent businesses run by forces families. It’s exclusively for people connected to the armed forces, and gives them a great online outlet to get their businesses seen in and around the community.
The website has been endorsed by both the chief executive of the Soldiers’ Charity, and the Controller of the RAF Benevolent Fund, as well as supporting the Royal Navy & Royal Marines Charity. All subscription profits are donated to these charities.
The website was fully designed and built by Toasted Digital, using a highly customised WordPress backend and FoxyCart for the subscriptions.
Check it out, and some of the nice businesses they’ve already got signed up, and give their Facebook page a like to be in with a chance of winning some Boden vouchers.
HTML5 & jQuery: localStorage forms
Working on a very cool new HTML5 application, I’ve had some useful experience with using localStorage. For those new to localStorage, it’s simply a way to store key and value pairs locally, meaning that like with cookies, even after the user has left the page, data can be retrieved. It works differently from cookies in that the data is not stored on the server, rather its stored within the client web browser. It’s especially useful for forms and enhancing the user’s personal experience.
Modern browsers support it well (even IE from 8+). It’s very simple to implement with a little JavaScript. In this example I’ll show you how can store the user’s form data using some jQuery.
First we’ll create a simple form.
1 2 3 4 5 6 7 | <form name="local_storage_form" method="post" action=""> <input type="text" name="your_name" id="your_name" value="" /> <input type="text" name="your_surname" id="your_surname" value="" /> <input type="submit" value="Submit" /> </form> |
<form name="local_storage_form" method="post" action=""> <input type="text" name="your_name" id="your_name" value="" /> <input type="text" name="your_surname" id="your_surname" value="" /> <input type="submit" value="Submit" /> </form>
Notice I’ve given the input field the class “localStore”. You can apply this class to all of your fields. We’ll later use this to store the data.
Now the jQuery. We want to check a field as it is updated, and update the localStorage value on the fly. For this we’ll create the function:
1 2 3 | $('.localStore').keyup(function () { localStorage[$(this).attr('id')] = $(this).val(); }); |
$('.localStore').keyup(function () {
localStorage[$(this).attr('id')] = $(this).val();
});This function will update localStorage, using your field ID, every time you press a key. You could choose to use change() or whatever suits your needs.
Now we will create an init() function to fill in the form automatically if there are values stored in the relevant keys.
1 2 3 4 5 6 7 8 | function init() { if (localStorage["your_name"]) { $('#your_name').val(localStorage["your_name"]); } if (localStorage["your_surname"]) { $('#your_surname').val(localStorage["your_surname"]); } } |
function init() {
if (localStorage["your_name"]) {
$('#your_name').val(localStorage["your_name"]);
}
if (localStorage["your_surname"]) {
$('#your_surname').val(localStorage["your_surname"]);
}
}In this example, we’re identifying each field manually. We check if the variable is set, and if so update our field. You could potentially loop through the keys as well.
So our full code is
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | $(document).ready(function () { function init() { if (localStorage["your_name"]) { $('#your_name').val(localStorage["your_name"]); } if (localStorage["your_surname"]) { $('#your_surname').val(localStorage["your_surname"]); } } $('.localStore').keyup(function () { localStorage[$(this).attr('id')] = $(this).val(); }); init(); }); |
$(document).ready(function () {
function init() {
if (localStorage["your_name"]) {
$('#your_name').val(localStorage["your_name"]);
}
if (localStorage["your_surname"]) {
$('#your_surname').val(localStorage["your_surname"]);
}
}
$('.localStore').keyup(function () {
localStorage[$(this).attr('id')] = $(this).val();
});
init();
});Once your completed, go ahead and fill in the form, leave you browser and come back to see your data sat there waiting for you
This is a very basic example of what can be done with localStorage. The possibilities are really great and are already in use around the internet today; games, apps, user customisation. Support is good within modern browsers, but I would still see this as a bonus feature rather than something to be used as a fundemental of a site. Check out the w3 working draft on Web Storage here.
VingeBarna :: Norwegian Kids Clothing
A little while ago I completed a small store for the new Norwegian kids clothing range VingeBarna. The site is a clean build using some nice CSS3 features like @font-face, built on a simple MODx backend with FoxyCart and uses some custom shipping values. This is my first site in Norwegian, a language which I’m becoming a bit more familiar with, and hopefully not the last! I think I’ll stay well clear of the “Never translate Norwegian Bokmål” button for a little while yet though…
Crucial BMX Shop
After starting many moons ago, a site I’ve developed with Adi Gilbert and Richard Homer of 99Seconds has just gone live. Crucial BMX is the biggest BMX shop in the South West, and they needed a good online shop to sell their well-over-1000 different products. It’s clean and simple with awesome artwork by Adi, and has some personality packed in with javascript touches here and there.
Check it out! It’s powered by MODx Evolution and Foxycart and accepts major credit/debit cards securely.
