7 HTML5 features that you may not know about

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

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.”

<input type="hidden" hidden="hidden"/>

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">

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.

http://www.aaronlumsden.com/articles/7-html5-features-that-you-may-not-know-about

JavaScript split Bugs: Fixed!

The String.prototype.split method is very handy, so it's a shame that if you use a regular expression as its delimiter, the results can be so wildly different cross-browser that odds are you've just introduced bugs into your code (unless you know precisely what kind of data you're working with and are able to avoid the issues). Here's one example of other people venting about the problems. Following are the inconsistencies cross-browser when using regexes with split:

• Internet Explorer excludes almost all empty values from the resulting array (e.g., when two delimiters appear next to each other in the data, or when a delimiter appears at the start or end of the data). This doesn't make any sense to me, since IE does include empty values when using a string as the delimiter.
• Internet Explorer and Safari do not splice the values of capturing parentheses into the returned array (this functionality can be useful with simple parsers, etc.)
• Firefox does not splice undefined values into the returned array as the result of non-participating capturing groups.
• Internet Explorer, Firefox, and Safari have various additional edge-case bugs where they do not follow the split specification (which is actually quite complex).

http://blog.stevenlevithan.com/archives/cross-browser-split

Jasmine 1.2 released

Jasmine 1.2 has been available, quietly, for a few weeks now. But consider this the official announcement.

This release is relatively minor, but has a lot of things under the hood that will make it easier for us to continue to improve the project. Some highlights:

Core Fixes & Features

• New HTML Runner/Reporter (designed by Sean Durham) is now the default
• An improved toEqual matcher for deep Objects

Gem Fixes & Features

• Detection and support for the Rails Asset Pipeline
• All requests served with no-cache headers, helping out when your browser supports them correctly

Development Fixes

• Catch-up on issues with recent Rubygems and Ruby 1.9.3
• Fixed bugs when developing for Jasmine on Linux
• Moved CI to Travis
• Cleaned up the building/concat of jasmine.js
• Overall better task code, now tested, for building & testing Jasmine

http://pivotallabs.com/users/dwfrank/blog/articles/2144-jasmine-1-2-released

JavaScript Style Guides And Beautifiers

Recommended JavaScript Style Guides

1. Idiomatic.js. This is not only highly recommended and very comprehensive, but is also the style guide we've adopted for several of the projects I'm involved in. It includes contributions by jQuery core contributor Rick Waldron, jsPerf contributor Mathias Bynens and many other experienced JS devs in the community. Not all developers agree 100% with the practices it advocates, but that's the great thing about a forkable style guide – it's easy to adapt to your own needs.
2. jQuery Core Style Guide. Perhaps the most popular style guide modern JS developers are aware of, it is used by the jQuery core team, jQuery UI, QUnit and many other projects. Rick Waldron once again had a hand in this as have Adam Sontag and John Resig, also of jQuery fame.
3. Google JavaScript Style Guide. Written by former Google JavaScript developers such as Robby Walker (Closure Linter), this contains several readability best practices that those from a particularly traditional software engineering background will appreciate. Further comments on it can be found here.
4. Dojo Style Guide Another very comprehensive alternative by the people that brought us the excellent dojo toolkit. Interestingly this guide is based on the structure of the Java programming conventions guide. If you like what you see, you might also appreciate dojo's inline documentation sguide, which remains my favorite style of inline commenting in JS.
5. Aloha Editor JavaScript Style Guide This guide comes from the authors of the relatively non-trivial contentEditable-based Aloha Editor. Whilst it recommends the jQuery style guide, it has some useful (minor) additions such as how they suggest styling AMD modules.
6. Crock's Code Conventions For JavaScript Another good guide, although perhaps not as detailed example-wise as others. I feel this has been superseded by Idiomatic.js, but if you strongly disagree with it or the jQuery core style guide, this is a much recommended fallback.
   
   
   http://addyosmani.com/blog/javascript-style-guides-and-beautifiers

JavaScript Primitive Types vs Reference Types

HTML5 Offers ‘Scoped’ CSS for Precision Styling

HTML5′s controversial “scoped” style attribute is now supported in the latest Canary builds of Google’s Chrome web browser and Mozilla may eventually add support to Firefox as well.

HTML5 adds an attribute, scoped, to the style element which limits the scope of the styles contained within the tag. Google’s Alex Danilo has a good introduction to scoped over at HTML5Rocks. Essentially scoped allows you to nest styles within HTML and those styles will only apply to any child elements.

http://www.webmonkey.com/2012/04/html5-offers-scoped-css-for-precision-styling

Swipe.js

Swipe brings content sliding to the mobile web to preserve space and allow for new types of interaction. Many mobile web sliders currently exist but few embody all the rules a slider like this should follow.

1:1 touch movement

1:1 movement, as described above, is about tracking the position of the touch and moving the content exactly how the touch interacts. This interaction is very common in native apps.

Resistant bounds

When Swipe is at the left-most position, sliding any more left will increase the resistance to slide, making it obvious that you have reached the end. This detection/resistance occurs at both left and right bounds.

Rotation/resize adjustment

When a user rotates their device (in turn resizing the browser window), the slider resets to make sure the sliding elements are the right size. This is only necessary for sliders without declared widths.

Variable width containers

Swipe allows you to set a width to the container, which designates the width of each slide element. This is important if you do not want a full width slider (the default).

Scroll prevention

Scroll prevention is one of the most overlooked pieces of mobile sliders. Swipe detects if you’re trying to scroll down the page or slide content left to right.

Library agnostic

Swipe doesn’t rely on any library. Trust me this is a good thing. All you have to do is pass in the container element, set some parameters, and BOOM goes the dynamite– you're all set. You may choose to pass the element to Swipe with a library, but it’s not necessary.

http://swipejs.com/

CREATING A MOBILE-FIRST RESPONSIVE WEB DESIGN

We're going to walk through how to create an adaptive web experience that's designed mobile-first. This article and demo will go over the following:

• Why we need to create mobile-first, responsive, adaptive experiences
• How to structure HTML for an adaptive site in order to optimize performance and prioritize flexibility
• How to write CSS that defines shared styles first, builds up styles for larger screens with media queries, and uses relative units
• How to write unobtrusive Javascript to conditionally load in content fragments, take advantage of touch events and geolocation
• What we could do to further enhance our adaptive experience

http://www.html5rocks.com/en/mobile/responsivedesign/

Workaround for Ruby support on Netbeans 7.1

The main issues with getting a good release of community-ruby in the catalog for NB 7.1 are:

1. https://netbeans.org/bugzilla/show_bug.cgi?id=207075 -- Some infrastructure broke which makes it impossible to release at the moment. This may seem like the big problem but in fact….
2. Netbeans 7.1 updated some components (as software is known to do). One of those components was html.editor.lib. Ruby support was dependent on version 1, but NetBeans 7.1 only ships version 2 now. This is the main reason why the Ruby support from 7.0 is un-installable on 7.1.

If you are interested in installing preview1, then grab the preview zipfile. Once you have this file, unzip it (note location) and then within Netbeans 7.1 you can:

1. Select Tools->Plugins from menu
2. Select Downloaded tab
3. Press Add Plugins...
4. Navigate to where you unzipped the nbms files
5. Select all files which end in .nbms (you can do this all in one selection but if you include any non-nbms file it greys out the open button)
6. Accept and install…

http://blog.enebo.com/2012/01/workaround-for-ruby-support-on-netbeans.html

ARRRRCAMP VIDEO'S

• JOHN LONG - DESIGN WORKFLOWS FOR RAILS

  

  Design Workflows For Rails
  We've come a long way since the early days of Rails. And the entire Rails system, while much more robust, can be intimidating and downright frustrating for designers to get started with. In this talk we'll discuss a couple of different strategies for integrating designers into your team and what you can do to optimize your current designer/developer workflow. We'll be discussing a couple of tools that can assist you in this (including John's very own Serve project) and will ask the if any of this can be applied to Open Source. Along the way we will be talking a lot about the value of taking a design-first approach to software development and you will walk away with a number of practical approaches that you can apply to your current project even if you aren't working with a designer.

• MARIUS MATHIESEN - SLEEPING WITH THE ENEMY

  

  Sleeping with the enemy
  Have you ever copy/pasted an extconf.rb file and thought "there has got to be a better way"? **There is, but it may not be what you think. I will present Mutt, a JRuby application that serves Git repositories over HTTP using the beautifully designed JGit library. No Makefiles, no segfaults, it may even work on Windows.

• JONAS NICKLAS - PRACTICAL TESTING FOR ASSORTED LANGUAGES

  

  Practical testing for assorted languages
  You're building web applications and now you're writing tests as well. But do your tests really cover all parts of your application? What about that pile of JavaScript spaghetti that keeps on growing? In this session you will learn practical techniques to test a larger part of your Ruby code, as well as how to write testable JavaScript, and cover it with solid, flexible and useful unit tests. A solid, comprehensive test suite allows you to take charge of your codebase and refactor with confidence.

• ANTHONY EDEN - BUILD AND TEST APIS WITH RUBY AND CUCUMBER

  

  Build and Test APIs with Ruby and Cucumber
  Web apps are hot, web apps with APIs are even hotter. These days popular sites are opening up more and more of their functionality via web APIs and you should too. This talk will cover how to develop web APIs with Ruby, either using Rails or Sinatra. It will also cover how to test those APIs with Cucumber.

• BRIANN QUINN - SPREE: THE OPEN SOURCE E-COMMERCE PLATFORM

  

  Spree: the open source e-commerce platform
  A whistle stop tour through Spree's key features as modular and customizable e-commerce platform. With an in-depth look at how it uses Ruby, Rails, mountable engines and the asset pipeline.

• JIM GAY - RADIANT 1.0 NOW AND THE FUTURE

  

  Radiant 1.0 now and the future Take a deep dive into the new features of Radiant 1.0. Explore hidden gems of rendering content and get tips on saving yourself from unnecessary work. We'll discuss the goals of the next major release on Rails 3 and how you can help guide the development.

• ROY TOMEIJ - STOP SWASHBUCKLIN' AND SHIPSHAPE YER FRONT-END

  

  Stop Swashbucklin' and Shipshape yer Front-end
  Front-end code should be fun to write and fast to run. Combine front-end meta languages like Haml, Sass & CoffeeScript with the Rails 3.1 asset pipeline and achieve both.

• ELISE HUARD - DATA-DRIVEN DEVELOPMENT

  

  Data-driven development
  Statistics are hot. In the last few years, the internet and increasing capacities have made it possible to gather large amounts of data ... and now we're starting to work out what to do with it. I'm talking about data-driven development, not unrelated to the principles of Lean software development - how we can use data to drive our development.

• JULIEN BIEZEMANS - THE BEHAVIOUR-DRIVEN PROGRAMMER

  

  The Behaviour-Driven Programmer
  The first steps of a Behaviour-Driven Developer
  An introduction to Behaviour-Driven Development, the second-generation agile methodology that aims at delivering software that matters. Most of us know that BDD has something to do with tests and the way code is produced. But what is it exactly? How does it differ from Test-Driven Development? We'll discover the technical principles and practices lying at the heart of BDD, as experienced from a naive programmer perspective. But BDD is not only about writing better tests and code. It really holds higher purposes...

• LENNART KOOPMANN - MANAGING THE LOGS OF YOUR (RAILS) APPLICATIONS

  

  Managing the logs of your (Rails) applications
  The good thing: Most companies started collecting and centralizing their logs. The bad part: Most of them did not unleash the power of log management and analysis yet. In this talk I will show you how to effectively manage your logs and the scope of Rails specific log analysis. I am the author of Graylog2 (www.graylog2.org) and work at XING where we have a really mature Rails logging environment.

• ANDREW NESBITT - A/B TESTING EVERYTHING WITH SPLIT

  

  A/B Testing everything with Split
  Just because the tests past doesn't mean that your users will actually like the change, you can test your features in front of real users using A/B testing. A/B testing is becoming an important tool on the web to test out new features on a subset of your users to find out if they fulfil their purpose and make your decisions based on data not opinions. Split is a rack based A/B testing framework, it works with Rails, Sinatra and any other rack based web framework. Find out why we needed another framework and how to use in Rails, Sinatra and Radiant and the best practises of A/B testing.

• EWOUT VAN TROOSTENBERGHE - DANCING WITH AREL: FILTERKIT AND REPORTKIT

  

  Dancing with Arel: filterkit and reportkit
  Get me all invoices since 2007 for clients that are in the photography business where I was responsible for, and group them by fiscal year and client with running totals." In business applications like th!nx, extensible filtering and reporting is paramount. While rails offers good abstractions for basic CRUD, it lacks facilities for complex aggregation. Filterkit and reportkit are two open-source libraries that work together to fill this gap, harnessing the power of arel. The goal? Not having a single line of SQL in your application while being able to create many reports like the one described above on demand. The API?
  class Invoice
  column :total_price, :money, arel(:line_items)[:total_price].sum
  end

• JULIAN FISCHER - THREE WAYS TO SCALE TOWARDS HAPPINESS

  

  Three ways to scale towards happiness
  Your project is evolving just fine, you have a steady, non-linear growth and your roadmap is tightly packed. You feel hosting issues become more and more time consuming. So what to do? In this talk we will see that the answer to this question is not as easy as: "we'll jump into the cloud". More than this three different ways to solve this problem will be presented: high-end hardware, commodity hardware and a cloud deployment scenario. This gives you options to choose from. For each scenario an exemplary system design illustrating its hosting structure will be shown. We will workout individual pros and cons which need to be considered carefully in respect to your individual requirements. In order to support your decision making we will draft a rough decision tree to help you picking the best possible scenario for your situation. So at the end of the talk should be able to plan your next scale out step, easily.

• COREY HAINES - FAST RAILS TESTS

  

  Fast Rails Tests
  Look at your Rails unit test suite. Now look at mine. Now look at yours again. Mine are sub-second. Yours aren't. Having a slow unit test suite can hinder an effective test-first or test-driven approach to development. As you add tests, the suite starts to slow down to the point where you stop running them after each change. Some people even talk about multi-minute unit tests suites! Band-aids like spork are just covering up the problem. Test-driven development is a major player in keeping your design malleable and accepting of new features, but when you stop paying attention to the messages your tests are sending you, you lose this benefit. In this talk, I will go over some techniques for keeping your test suite lean and fast. Along the way, we'll discuss the design improvements that come out of these changes. Now, look atmy unit test suite again. Yours can be like mine.
  http://arrrrcamp.be/videos/2011