Blog

HTML5 Series - Semantic Tags

Before HTML5 the HTML for your page's layout was probably primarily made up of a lot of div tags with id's a class's to give them a visual structure and layout. It might look something like this...

1<div id="header">My Site Name</div>
2<div id="content">Bla bla bla site content......</div>
3<div id="footer">Privacy policy, copywrite info etc</div>

This though has 2 problems. Firstly it's not great for computers like search engines or screen readers to understand as everything is a div. There is extra code you can add to improve on this (have a look at Scheme.org). Secondly your code isn't very, again because everything is a div.

HTML5 however introduces new semantic tags like <header>and
<footer> to make your data more structured. So the above example would become...

1<header>My Site Name</header>
2<article>Bla bla bla site content......</article>
3<footer>Privacy policy, copywrite info etc</footer>

Other tags are as follows:

Tag Description

<article> For external content, like text from a news-article, blog, forum, or any other content from an external source

<aside> For content aside from the content it is placed in. The aside content should be related to the surrounding content

<details> For describing details about a document, or parts of a document

<summary> A caption, or summary, inside the details element

<figure> For grouping a section of stand-alone content, could be a video

<figcaption> The caption of the figure section

<footer> For a footer of a document or section, could include the name of the author, the date of the document, contact information, or copyright information

<header> For an introduction of a document or section, could include navigation

<hgroup> For a section of headings, using

<h1> to <h6>, where the largest is the main heading of the section, and the others are sub-headings

<mark> For text that should be highlighted

<meter> For a measurement, used only if the maximum and minimum values are known

<nav> For a section of navigation

<progress> The state of a work in progress

<section> For a section in a document. Such as chapters, headers, footers, or any other sections of the document

<time> For defining a time or a date, or both

URL parameters with Javascript

So this took me by surprise the other day. JavaScript doesn't have a function to retrieve a URL parameter value. i.e. There is no Request.Querystring command! Of course it wouldn't start Request as it's executing on the browser rather than the server but you would have thought there would be a built in command to do it.

After a bit of searching though I came across this script that does it:

1// Read a page's GET URL variables and return them as an associative array.
2function getUrlVars()
3{
4  var vars = [], hash;
5  var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&amp;amp;');
6  for(var i = 0; i &amp;lt; hashes.length; i++)
7  {
8      hash = hashes[i].split('=');
9      vars.push(hash[0]);
10      vars[hash[0]] = hash[1];
11  }
12  return vars;
13}

The function returns an array/object containing the parameters and their values. e.g. The following URL:

http://www.example.com/?Name=Tim&Sex=Male

Would return:

1{
2    "Name": "Tim",
3    "Sex": "Male"
4}

To use it in your code you would write

1var name = getUrlVars()["Name"];

And that's it

Converting users from Membership to SimpleMembership

In ASP.NET 2 Microsoft introduced the Membership provider. By many accounts it is not perfect, but as a one size fits all solution it's not bad. Plus it had a major advantage that a lot of other people would also be using it, so if you wanted to grab a forum solution to stick on your site, chances were it would use the same Membership provider.

Now though there is a second Membership provider from Microsoft called SimpleMembership. It simplifies a lot of things that weren't needed with the original Membership provider and also introduces support for working with OAuth providers. Not only that but if you create the MVC 4 project from the default template that is what your solution will be set up to use.

The problem however is Membership and SimpleMembership are not compatible. They store their information in separate tables and if you do try to copy all the users from one to the other, you will soon discover the hashing algorithm used on the password is different. You probably also had all your passwords one way hashed so you can't even generate the new ones.

There is a solution however. Paul Brown has written a nice bit of code to update the MVC 4 account controller so that when your users log in they will first be authorised against SimpleMembership, if that fails it will then authorise against the original Membership and if that succeeds it will generate the new password in SimpleMembership using the one just provided by the user.

Over time as your users log in the will be slowly migrated over. The second time the log in the SimpleMembership will authorise them and the extra code won't even be hit.

http://pretzelsteelersfan.blogspot.co.uk/2012/11/migrating-legacy-apps-to-new.html

Calorie Buddy

Calorie Buddy is the latest of my apps released during summer of this year. Following on from the series of apps Training Buddy and Weight Buddy, Calorie Buddy is another app aimed at helping you keep track of your general health and fitness.

As the name suggests Calorie Buddy is all about monitoring your calorie intake. Simply set a target, enter your consumption each day and a handy pie chart will show you how many calories you have available left to eat that day. To navigate between different days simply swipe to the left or right.

One of Calorie Buddy's best features though is its live tile that enables you to see your remaining calories that day without even opening the app!

Download Calorie Buddy today