Increasing Website Performance

The performance of websites and the impact that has, has been well documented over the years. In 2007 Amazon reported that for every 100 ms increase in load time of Amazon.com their sales decreased by 1%. Google also reported similar results in 2006 with their Google Maps product. Google found that by reducing the size of the page from 100KB to 80KB, their traffic shot up by 10% in the first week and then 25% in the following three weeks.

The above infographic by strangeloopnetworks.com illustrates the effect that a website’s performance can have on users.

It’s clear that monitoring the performance of a website is a must and should not be ignored as being an integral part of your web design workflow.
You may already be using some of the techniques that I’ll discuss today, whilst others you may not. Although you can use techniques on the server side to speed up websites, this article is going to focus on ways that we can increase performance from the front end. Let’s jump in..

Head on over to webdesigntuts+ to read the article in full

The post Best Practices for Increasing Website Performance appeared first on Aaron Lumsden | Aaronlumsden.com.

In 2007 Apple introduced the iPhone which changed the way that we use the web. In effect, websites were re packaged and re designed and brought to life under the guise of apps. All of a sudden the web could understand new information about us such as our location. I have often thought it would be good if we could access other information about our mobile phone such as contacts, the battery status and other network specific information from our call time provider. Well, Mozilla’s WEB API team have set out to allow this by introducing the Web API.

Let’s take a look at some of these new API’s available.

The Web Telephony API

The WEB Telephony API allows you to access your phones functionality which then lets you make and recieve calls wich can be operated trough javascript.

Mozilla’s Robert Nyman shows how this works

// Telephony object
var tel = navigator.mozTelephony;

// Check if the phone is muted (read/write property)
console.log(tel.muted);

// Check if the speaker is enabled (read/write property)
console.log(tel.speakerEnabled);

// Place a call
var call = tel.dial("123456789");

// Events for that call
call.onstatechange = function (event) {
    /*
        Possible values for state:
        "dialing", "ringing", "busy", "connecting", "connected", 
        "disconnecting", "disconnected", "incoming"
    */
    console.log(event.state);
};

// Above options as direct events
call.onconnected = function () {
    // Call was connected
};

call.ondisconnected = function () {
    // Call was disconnected
};

// Receiving a call
tel.onincoming = function (event) {
    var incomingCall = event.call;

    // Get the number of the incoming call
    console.log(incomingCall.number);

    // Answer the call
    incomingCall.answer();
};

// Disconnect a call
call.hangUp();

// Iterating over calls, and taking action depending on their changed status
tel.oncallschanged = function (event) {
    tel.calls.forEach(function (call) {
        // Log the state of each call
        console.log(call.state); 
    });
};

The Web SMS API

The Web SMS API does what it says on the tin and lets you send and recieve sms text messages. The good news is that it couldn’t be simpler to use.

// SMS object
var sms = navigator.mozSMS;

// Send a message
sms.send("123456789", "Hello world!");

// Recieve a message
sms.onrecieved = function (event) {
    // Read message
    console.log(event.message);
};

When can I use Mozilla’s Web API’s?

You can start to experiment with these new API’s right now by downloading Mozillas ‘Gaia’ which is the name of the user interface for Boot to Gecko. In the demonstration files you can find out more about Web API’s.

Gaia – The UI behind Mozillas Boot to Gecko which utilises the WEB API’s

In total there are over 50 new API’s that Mozilla have introduced and are said to be introducing more. I think this will definately be the way forward and we will start to see a new wave of apps that will take mobile to the next level. I’m just surprised that Apple hadn’t thoght to introduce something similar earlier.

What do you think of the Mozilla’s new Web API’s? Have you tried using them? Can you think of any apps that will now become possible due to these new methods? Let me know in the comments below.

The post A Look at Mozilla’s Web Telephony API & Web SMS API appeared first on Aaron Lumsden | Aaronlumsden.com.

Currently the WebRTC project is supported by Google, Mozilla and Opera. The technology is proving to be so popular that is estimated that it will be part of all major browsers within the next three to four months.

What is WebRTC?

WebRTC makes way for real time communication between browsers. In 2004 Ajax was introduced which allowed part of a web page to be updated rather than the whole page. This increased load time within web pages and allowed for a smoother user experience. WebRTC is like ajax on steroids!

It’s basically an open framework that increases network speed in the transmission of audio, video and other components. These components can then be accessed through Javascript API’s which allow us developers to create high speed audio and video chat applications with ease.

When would I use WebRTC?

Initially the technology will prove popular in peer to peer video and audio chat style applications. Google already utilise this on thier ‘Google talk’ product. It’s not only great for any video/audio chat application but will also be beneficial to any kind of peer to peer, browser to browser communication app such as screen sharing or even instant peer to peer. Imagine Napster but with instant results.

What will be the benefits of WebRTC?

Previously it’s been difficult to implement such features with ease but due to WebRTC being relatively easy to use, it will surge the way for developers to experiment on this great new technology. Leading to more innovative experimentation with it and hopefully paving the way for a seamless instant web experience. The results of this innovation will, I’m sure, lead to apps that have never been before capable on the web.

To read more about WebRTC’s API’s you can visit the official API documentation.

Have you tried using WebRTC? What do you think of it? Are you excited about the news of it? Let me know in the comments below.

The post Say Hello to WebRTC, a HTML5 Framework That Will Revolutionise the Web appeared first on Aaron Lumsden | Aaronlumsden.com.

Cover image adapted from Norm.

Today’s websites and apps can contain thousands upon thousands of lines of CSS. A lot of the CSS in a stylesheet is repeated. Take for instance if you are designing a website for a company who’s main brand color is ‘orange’. You will have that color specified quite a few times through out your style sheet. Then one day that company phones up and tells you that they have had a brand redesign and their brand color is now ‘red’. This would mean that you have to go through all the instances of that color on your stylesheet (which can sometimes be across multiple files) and replace them. In some cases this might be a little more difficult than doing a simple search and replace.

In steps CSS Variables to the rescue

With CSS variables you would declare the property once and then reuse that variable throughout your CSS.

Let’s take a look

:root {
    -webkit-var-brand-color: red;

}
h1 {
  color: -webkit-var(brand-color);
}
div {
background-color;
}

In the code above you can see that we have declared the brand color in the ‘:root’ of the document and then have used that variable to style the color of the ‘h1′ tag and the ‘background-color’ of the div. If we then receive that phone call from the client asking for their brand color on their website to be changed, this would simply be a case of changing the ‘-webkit-var-brand-color’ property to another color, this would then change all the other colors that are utilising that variable.

This is a definitely a good, welcome addition to CSS and would make our lives much easier. CSS Variables are currently only supported by Google Chrome and nothing else (although this could change soon).

“The CSS Variables Module Level 1 proposal is not an Editors Draft anymore. It has evolved to a W3C Working Draft, which means it will become a part of the specification soon(ish).”

Enabling CSS Variables in Google Chrome

To enable CSS Variables in Google Chrome you need to type ‘Chrome://flags’ into the url bar and this will then bring up a list of features that you can enable or disable. Find ‘Enable CSS Variables’. Once you have done this you need to relaunch Chrome and you should then be able to use CSS Variables in Chrome using the syntax above (although this syntax could change when it is full implemented).

What do you think about the introduction of CSS Variables? Do you think it’s a welcome addition or will you stick to using other CSS prepocessor’s such as Less or Sass? Let me know in the comments below.

The post An Introduction to CSS Variables appeared first on Aaron Lumsden | Aaronlumsden.com.

The main area that I wanted to focus on was making sure that the site let’s you focus on the content that you come to the site for. I wanted the site to enhance this by giving a great reading experience. I’ve done this by using a base font size of 16px so that it’s nice and clear to read. The main reason people come to this site is to read and learn and that had to come first!

Here’s a few of the other updates:

Responsive

I’ve now made the site fully responsive, so that it can be viewed easily across all devices. I’ve optimised for smart phones and tablets so that it can be a pleasant viewing experience on them.

The site is now fully responsive and works across most popular devices.

More Focus

I’ve made the decision to move away from the site being a portfolio type blog into a more refined quality resource for web design and development, news, techniques and tutorials.

Specifically the site will be focussing on:

• CSS3 – There’s some truly amazing effects that are starting to become possible now thanks to CSS3 such as CSS3 Filters. This area will look at the latest specifications and recommendations as well as covering ones that have already been implemented through case studies, tutorials and roundups.
• HTML5 – as the migrate is occurring for apps to go from offline to online. This area will look at some of the latest features, tips and techniques that allow us to make great HTML5 web apps and websites.
• WordPress – A recent report stated that half of the top 1 million websites were now using WordPress as their foundation. I don’t know if that statistic is true but one thing I do know is that it is used a lot. In this area I’ll share some of my favourite WordPress snippets, as well as all the latest n WordPress, all with a couple of tuts thrown in as well.

Still to come…

Over the next coming weeks you’ll start to see more changes coming to the site including a Jquery section which will show a monthly round up of the best Jquery plugins, tools and snippets around.

Let me hear your feedback!

Although the site has new areas, I’ll still be covering everything that has previously been included in the blog such as UI design, mobile web apps, latest tools etc. The site is going through changes and I’d like your input into what you would like to see me cover on this site. Is there a cool new tool on the latest social network that you’d like to learn how to create?, or perhaps a new section that you’d like to see on the site that you think would be useful. Whatever your ideas for this site then you can let me know by tweeting me or by leaving a comment below. Just give me a shout and I’ll see what I can do.

The post A Few Updates to AaronLumsden.com and What’s Coming Soon! appeared first on Aaron Lumsden | Aaronlumsden.com.

Adobe Edge Reflow.

Edge reflow makes it easier to create responsive web designs. It comes in the form of a visual editor which lets you create breakpoints for different screen or device resolutions. Once you’ve done this you can then add CSS styles to each element including styles such as CSS3 gradients. You can also ad background images to an element too. Although full designs can be achieved, from the promo it looks like it would be more handy for creating a HTML/CSS wireframe type structure for your responsive sites.

Adobe describe Edge Reflow as

“Create truly responsive layouts thanks to an intuitive user interface. Design simultaneously for all screen sizes without sacrificing quality or capability.”

Once you’ve created the layouts you can then export the code into your favourite editor.

There’s no news from Adobe as to when it will be available but you can sign up to be notified of when it’s available.

The post Responsive Web Design Made Simple with Adobe Edge Reflow appeared first on Aaron Lumsden | Aaronlumsden.com.

Cover image by Zachary VanDeHey

Tim Berners Lee, inventor of the World Wide Web, at the London 2012 Olympic opening ceremony.

Sample from the article

The web is a wonderful place. It connects people from across the globe, keeps us updated with our friends and family, and creates revolutions never before seen in our lifetime. It has certainly come a long way since its humble beginnings back in the early 1980′s.

In order to understand the history of the World Wide Web it’s important to understand the differences between the World Wide Web and The Internet. Many people refer to them as the same thing, but in fact, although the end result is the common perception of most everyday users, they are very different.

The internet is a series of huge computer networks that allows many computers to connect and communicate with each other globally. Upon the internet reside a series of languages which allow information to travel between computers. These are known as protocols. For instance, some common protocols for transferring emails are IMAP, POP3 and SMTP. Just as email is a layer on the internet, the World Wide Web is another layer which uses different protocols.
The World Wide Web uses three protocols:

• HTML (Hypertext markup language) – The language that we write our web pages in.
• HTTP (Hypertext Transfer Protocol ) – Although other protocols can be used such as FTP, this is the most common protocol. It was developed specifically for the World Wide Web and favored for its simplicity and speed. This protocol requests the ‘HTML’ document from the server and serves it to the browser.
• URLS (Uniform resource locator) – The last part of the puzzle required to allow the web to work is a URL. This is the address which indicates where any given document lives on the web. It can be defined as :///

In the Beginning…

Ideas for the World Wide Web date back to as early as 1946 when Murray Leinster wrote a short story which described how computers (that he referred to as ‘Logics’) lived in every home, with each one having access to a central device where they could retrieve information. Although the story does have several differences to the way the web works today, it does capture the idea of a huge information network available to everyone in their homes.

The real vision and execution for the World Wide Web didn’t come about until around 40 years later in 1980 when an English chap by the name of Tim Berners Lee was working on a project known as ‘Enquire’. Enquire was a simple database of people and software who were working at the same place as Berners Lee. It was during this project that he experimented with hypertext. Hypertext is text that can be displayed on devices which utilize hyperlinks. The Berners Lee Enquire system used hyperlinks on each page of the database, each page referencing other relevant pages within the system.

Head on over to webdesigntuts+ to read the article in full.

The post A Brief History of the World Wide Web appeared first on Aaron Lumsden | Aaronlumsden.com.

UI/ UX designers are constantly trying to push forward with cool new ways to interact with our devices. For the majority of the past we have been focussed on navigating a website by using the standard menu across the top or in the sidebar. Since the advent of mobile apps we are being introduced to new ways to navigate.

What we’ll be creating

View DemoDownload

This has been tested in Chrome, Safari, Firefox & Opera

The Path menu makes you hit one button from which a host of sub menu options spring out from the original menu button.

An unique approach to navigation has been set out by the guys at Path inc who are the people behind Path.

For those who are unfamiliar with Path it is described as:

“A the personal network where you connect with family and close friends. By limiting you to 150 connections, Path is a safe and trusted place to share the moments that matter with the people who matter most.”

The HTML

The html markup for the menu really is quite simple. We start by creating a div with an id title “container” that will hold the menu. This is followed by the main button which is an anchor tag with an id of “centerbutton”. We then need to create an unordered list that we give a class of “circles”. With each list item representing a circlular sub menu item. Within each list item we add a span with a class that related to what the menu item is. These spans are just so that we can store the image for them items. That’s basically all there is to the markup. Simple!

<div id="menu">

	<a id="centerbutton" href="" title="">+</a>

	<ul class="circles">
		<li><a href="" title=""><span class="camera"></span></a></li>
		<li><a href="" title=""><span class="location"></span></a></li>
		<li><a href="" title=""><span class="music"></span></a></li>
		<li><a href="" title=""><span class="chat"></span></a></li>
		<li><a href="" title=""><span class="moon"></span></a></li>
	</ul>

</div>

The CSS

I’ve chosen to only display the -webkit prefix for the tutorial below but you can download the source code which contains the other vendor prefixes.

The CSS is a little bit more than the HTML markup but is still nothing to be afraid of. Firstly we give the #container some position styling. This just centers it nicely in the middle of the screen.

#container {
	width: 500px;
	height: 500px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -250px;
	margin-top: -250px;
}

Next we create the styling for our main button. By setting the width and height to 66px and creating the border-radius at 37px we are able to create a nice rounded circular shape using CSS. Usually you would do it half of the width but in this case we need to take into consideration the 4px white border that we add to it. We have then again positioned it in the center both top and bottom. We then need to add a gradient with a sudden stop. To create your own CSS3 gradients easily you can use this CSS3 generator. After this we position the text in the center of the button. In this case the text is the ‘x’ that we have used in our HTML markup that will act as a close or open button. Finally we add a CSS3 transition so that the button can be animated.

#centerbutton {
	display: block;
	width: 66px;
	height: 66px;
	border-radius: 37px;
	background: rgb(213,46,23); /* Old browsers */
background: -webkit-linear-gradient(top, rgba(213,46,23,1) 50%, rgba(230,79,49,1) 50%);
position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -50px;
	margin-top: -50px;
	color: white;
	text-decoration: none;
	text-align: center;
	line-height: 56px;
	font-size: 63px;
	font-weight: bold;
	z-index: 100;
	border: 4px solid white;
	-webkit-box-shadow: 0px 0px 3px 3px rgba(0,0,0,.3);
	-webkit-transition: all .1s ease-in-out;

}

We also need to add a little bit of extra code to make the line-height of the ‘+’ play correctly in Firefox.

@-moz-document url-prefix() {
    #centerbutton  {
        line-height:65px;
    }
}

The next two steps are to create some different states for the #centerbutton. The first one is to rotate it by ‘-45deg’ so that it will rotate from ‘+’ to an ‘x’ when we click on it. We will add this ‘click’ action later using Jquery. We also add an active state that is scaled up to ’1.3′ its original size. This will make the button larger.

#centerbutton.centerbuttonon {
	-webkit-transform: rotate(-45deg);
}

#centerbutton:active {
	-webkit-transform: scale(1.3);

}

Now we have the main button complete. Its time to move onto the sub category navigation holders. We start by positioning the container ‘.circles’. Once this has done we now need to create the list items. The way these will work is by creating each list item to be 200px tall and 50px width. Inside these ‘li’ containers will sit the anchor tag that will act as our circle. The reason we create the list items like this is so that once we have created all 5 of them we can rotate each one by a certain amount of degrees so that they all flow round in the quarter circle equally. The illustration Below demonstrates this.

Each ‘li’ item contains the circle and is rotated using CSS3 transforms to allow the mini circles to form a perfect quarter circle.

.circles {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -208px;
	margin-left: -47px;
}
.circles li {
	position: absolute;
	width: 50px;
	height: 200px;
	display: inline-block;
	-webkit-transform-origin: 40px 200px;
	position: absolute;
}
.circles li a.out:hover {
	-webkit-transform: scale(1.5) rotate(-30deg);
}

Creating the sub Navigation Circles

The actual circle’s are created in a similar way to the main button but they’re just a little smaller. We also add a class of ‘out’ which will become active for when the main button has been pressed. This will be added later using Jquery. This just rotates the circles to give them a spin effect and adds a drop shadow.

.circles li a {
	background-color: #44403d;
	width: 50px;
	height: 50px;
	border-radius: 29px;
	display: block;
	position: absolute;
	-webkit-transition: all .3s cubic-bezier(.36,.88,.26,1.26);
	color: white;
	line-height: 50px;
	text-align: center;
	bottom: -30px;
	text-decoration: none;
	border: 4px solid white;
}
.circles li a.out {
	bottom: 200px;
	-webkit-transform: rotate(360deg);
	-webkit-box-shadow: 0px 0px 3px 3px rgba(0,0,0,.3);

}

We now rotate each link holder so that it gives each containing anchor circle its position when the mini circles have all popped out. Each container is rotated by 22deg from the previous list item.

.circles li:nth-child(1) {
	position: absolute;
	top: 0px;
	left: 0px;
	-webkit-transform: rotate(0deg);
}
.circles li:nth-child(2) {
	position: absolute;
	top: 0px;
	left: 0px;
	-webkit-transform: rotate(22deg);
}
.circles li:nth-child(3) {
	position: absolute;
	top: 0px;
	left: 0px;
	-webkit-transform: rotate(44deg);
}
.circles li:nth-child(4) {
	position: absolute;
	top: 0px;
	left: 0px;
	-webkit-transform: rotate(66deg);
}
.circles li:nth-child(5) {
	position: absolute;
	top: 0px;
	left: 0px;
	-webkit-transform: rotate(90deg);

}

To give even more spring to our animation, we add a little delay to each of the circles so that they all pop out sequentially.

.circles li:nth-child(1) a {
	-webkit-transition-delay: .30s;

}

.circles li:nth-child(2) a {
	-webkit-transition-delay: .25s;

}

.circles li:nth-child(3) a {
	-webkit-transition-delay: .20s;

}

.circles li:nth-child(4) a {
	-webkit-transition-delay: .15s;

}

.circles li:nth-child(5) a {
	-webkit-transition-delay: .10s;

}

.circles li:nth-child(6) a {
	-webkit-transition-delay: .05s;
}

We’re almost done with the CSS but before we’re finished its time to add the icons to each circle. We do this using a sprite image that I created using spritepad. This is a great little tool for making sprites easily. We also add a little but of rotation so that each item sits correctly when it is popped out.

.camera,.chat,.location,.moon,.music {
	background-image: url(../images/sprites.png);
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -11px;
	margin-left: -11px;
}

.camera {
	background-position: 0 0;
	width: 22px;
	height: 22px;
}

.location {
	background-position: -27px 0;
	width: 22px;
	height: 22px;
	-webkit-transform: rotate(-20deg);
}

.music {
	background-position: -53px 0;
	width: 22px;
	height: 22px;
	-webkit-transform: rotate(-40deg);
}

.chat {
	background-position: -80px 0;
	width: 22px;
	height: 22px;
	-webkit-transform: rotate(-70deg);
}

.moon {
	background-position: -107px 0;
	width: 22px;
	height: 22px;
	-webkit-transform: rotate(-80deg);
}

The Jquery

The jquery is super simple as well. We create the document ready function and then on click of the main button we toggle the class ‘.out’ onto the circle anchor tags and also toggle the class on the ‘#centerbutton’ to ‘.centerbuttonon’. This allows the main button to rotate from the ‘+’ position to the ‘x’ position.

jQuery(document).ready(function($) {
	$('#centerbutton').click(function(e) {
		e.preventDefault();
		$('.circles li a').toggleClass('out');
		$(this).toggleClass('centerbuttonon');
	});;
});

Wrapping it up

We’re now complete, we have now recreated the Path menu using CSS3 & jquery. You can add more bounce to the animation by using the CSS3 transition property ‘cubic-bezier’, although this isn’t supported by all modern browsers. This allows us to control our own easing effect. We just need to replace the ‘ease-in-out’ effect on ‘.circles li a’ with the one below.

	
-webkit-transition: all .3s cubic-bezier(.36,.88,.26,1.26);
	-moz-transition: all .3s cubic-bezier(.36,.88,.26,1.26);
	-o-transition: all .3s cubic-bezier(.36,.88,.26,1.26);
	-ms-transition: all .3s cubic-bezier(.36,.88,.26,1.26);
	transition: all .3s cubic-bezier(.36,.88,.26,1.26);

Have you tried using this effect or similar on any navigation items. Let me know if you have before or let me know if you get stuck and I’ll be happy to help!

The post Recreate Path’s IOS Style Navigation Using HTML, CSS3 & Jquery appeared first on Aaron Lumsden | Aaronlumsden.com.

The post Recreate Paths Ios Style Menu Using HTML, CSS3 and Jquery Demo appeared first on Aaron Lumsden | Aaronlumsden.com.

HTML5 image by Matthias Kampitsch

To check what browsers support these following features visit When can i use.

HTML5 autofocus Attribute

The autofocus attribute let’s you automatically focus on an input, button or textarea as soon as the page has loaded. Previously I’ve had to refer to using javascript to implement such solutions. Autofocus is a great way to provide a good user experience as it is saving the user having to click on an input.

<input autofocus="autofocus" />

HTML5 download Attribute

The HTML5 download attribute allows developers to force a file to download rather than go to that specific page. No longer do we have to rely on server side coding to force the file to download. This can be great for web apps. In the href you add the location for the file that you want to download. In the download attribute you specify what you want the name of the file to be called, so in the example below the name of the download file would be called “MyPDFReport.pdf”.

<a href="my.pdf" download="MyPDFReport">Download PDF</a>

HTML5 Link Prefetching

Prefetching allows the browser to download another page or asset in the background. This can be great for paginated pages. For example whilst you are on page 1 you would ‘link prefetch’ the 2nd page of the paginated pages. This would result in page 2 loading almost instantly as it has already been preloaded. It can also be used on other assets such as images making it great for things like image sliders or implementing a photo album somewhat similar to how Facebook photo browsing works. It proves to be more responsive and therefore creating a smoother user experience.

Here’s the code for it.

<link rel="prefetch" href="http://www.aaronlumsden.com/page2">

HTML5 hidden element

The hidden attribute works in a similar way to CSS ‘display:none’. It basically hides an element. It can be described as:

“The hidden attribute can also be used to keep a user from seeing an element until some other condition has been met (like selecting a checkbox, etc.). Then, JavaScript could remove the hidden attribute, and make the element visible.”

<div  hidden="hidden"> </div>

HTML5 Spellcheck

The spellcheck attribute works on any input (apart from passwords), textarea’s and editable content divs. It determines whether the browser should spellcheck the text that it contains.

<input type="text" spellcheck="true|false">

HTML5 Datalist Element

This is a nice little welcome addition to our web development toolkit. The HTML5 datalist element behaves much like an auto suggest input. Prior to the introduction of the ‘datalist’ element we had to rely on a combination of javascript and server side coding to talk to our database to pull in the suggestions. This element does a way with all that.

<form action="form.php" method="get">

<input list="mylist" name="mylist" >
<datalist id="mylist">
  <option value="CSS">
  <option value="HTML">
  <option value="PHP">
  <option value="Jquery">
  <option value="Wordpress">
</datalist>
<input type="submit" />

</form>

HTML5 output Element

The output element acts like an input field except it doesn’t accept any data input. It is good for apps such as a calculator where the output element would be used for the sum result of the calculations. It will be handy for any type of mortgage calculator, loan repayments, or tax rates calc. I will be using this when I do some updates to my invoicing app billappp as at the moment I’m just using some spans. The official definition for the output element is:

“The output element represents the result of a calculation.”

Here’s how we define an output element:

<output name="output"></output>

What do you hink to these elements. Will they save you time? Have you tried any of them out yet or is there any other elements that you like that I’ve not mentioned? Let me know your thoughts in the comments below.

The post 7 HTML5 Features That You May Not Know About appeared first on Aaron Lumsden | Aaronlumsden.com.