Google Calendar - Interesting Calendars


I have just found a great feature of gCal called 'Interesting Calendars'.

1) Go to: https://www.google.com/calendar/render?tab=mc
2) In the bottom left, click the arrow on 'Other Calendars' > 'Browse Interesting Calendars' or go to 'Settings', then 'Calendars' then 'Browse Interesting Calendars'
3) Choose a category e.g. 'Soccer' > 'England' > 'English Premier League' and choose your team.

Pretty useful!

Writing jQuery plugins

There are a few simple rules to writing jQuery plugins which prevent issues later down the line.

1) start with an IIFE which passes through jQuery into its scope

(function($, window, undefined) {
// your plugin will go here 
}(jQuery, window));

2) Define your plugin functions as an object inside those brackets

var module = {
name: 'Carousel',
  defaults: {
    propertyName: 'value'
  },
init: function() {
// put your init code here
},
update: function() {}
}

3) Then register your module object as a function prototype so we can have multiple instances

function Plugin(element, options) {
    this.el = element;
    this.options = $.extend({}, module.defaults, options);
    this.init();
}
Plugin.prototype = module;

4) Then register as a jquery plugin with some code to test whether it has already been init'd on that element before

$.fn[module.name] = function(options) {
    var args = arguments;
    if (options === undefined || typeof options === 'object') {
        return this.each(function() {
            if (!$.data(this, 'plugin_' + module.name)) {
                $.data(this, 'plugin_' + module.name, new Plugin(this, options));
            }
        });
    } else if (typeof options === 'string' && options[0] !== '_' && options !== 'init') {
        return this.each(function() {
            var instance = $.data(this, 'plugin_' + module.name);
            if (instance instanceof Plugin && typeof instance[options] === 'function') {
                instance[options].apply(instance, Array.prototype.slice.call(args, 1));
            }
        });
    }
}

5) Then call your plugin on elements to load it

$('#example').Carousel({optionparam: 'example'});

6) To call another function you can use the format:

$('#example').Carousel('update', {newparam2: 'another example'});

Future of Web Apps London - Day Two


Day two most interesting things
A new trend, the rise of the machines
Nest, smart thermostat with app and API, updates itself
Arduino, open source prototyping platform
Facebook native app is twice as fast than html5 app, so users consume twice as much content.
Input file access, you can now upload photos within the browser in iOS6
Facebook now has 1bn monthly users
Users see friend activity and end up at your mobile web app
130 million monthly users on Facebook app center
Facebook mobile web payments, two screens with integrated payments
Mobile apps are now being built with javascript which is shared for each platform, User interface is then rendered using native code
Content in context, Focus on people and their context
Content is key, contextual content is more key
Social, local, mobility, solomo
Wireframe your prototypes, with 20%, 40% and 100% markers, Doug chiang inspired, machanika
Wireframes are much much cheaper than actually designing, do lots
Use the 53ways Paper app on iPad.
Fluid ui prototyping tool allows you to test on the web, scan with qr code to test on device.
Test and iterate, doesn't matter if you are right or wrong.
Fail cheap, fail early
Order matters in 3d css properties
Develop 3d css in chrome with flags composite layer borders
Avoid virtual reality gimmicks, the purpose of web design is to be better than reality
Boilerplates prevent you from understanding the original problems
If you dont know what its doing, why is it there?
You should start developing with nothing, it forces you to consider the implications of adding each thing
Pages are getting larger with polyfills just to support html5 and new features
Teach problem solving skills
Don't allow two tier developers, ones who write, and ones who cobble together solutions.
Always explain the problems before giving out the solutions.
Backbone.js mvc allows you to plumb things yourself
Node.js helps server side code and building
Require.js amd loader use with alternative syntax
Modules provide structures and conventions to keep your code organised
Unit testing, use jasmine, describe, it, expect
Automation, grunt command line javascript tool
Test using headless webkit automated tests phantom.js
Grunt can watch files, then run other tasks when there is a change
Meteor framework is example of next step where javascript is shared between front and back end

____________________________________________________

Day two full notes

Daniel Appelquist - Bluevia
Bluevia create apis for Telefonica
Phone designs used to be so diverse, now they are all black rectangles
A new trend, the rise of the machines
Machine to machine, connected cars, appliances
Current solutions are driven by cost savings, closed systems, no apis, preserving existing business models
Nest, smart thermostat with app and API, updates itself
Nest must be doing something right because they are being sued
Electric vehicles are now all coming with their own apps
Drive to improve, recording mileage, speed etc
Arduino, open source prototyping platform
Telefonia have created a gprs mod for arduino
Arduino interconnected devices
Curzon memories app, control a model cinema
Cosm community, share data from arduino
Mbed, web based ide, arduino clone
Kickstarter startup funding for projects
Raspberry pi is a great prototyping platform
Lego mindstorms also used in hack days
Plug and play devices, coming into mainstream
3d printing
Global m2m sim from bluvia
Maker movement or homebrew?

Simon Cross - Facebook
Html5 on the desktop is here, on mobile it isn't
2010 facebook app was html5, because facebook were web developers and wanted the ability to push code out fast
2012 facebook app is native, because it's twice as fast as the html5 app.
Because it's faster users consume twice as much content.
More users use mobile web fb than ios and android app combined.
7000 devices a day access mobile web app
Performance, distribution, monetization are holding web apps back.
Cpu and frame rate, access to device features
Moores law applies to mobile, soon devices will catch up
Geolocation, and device sensors now available
Input file access, you can now upload photos within the browser in iOS6
No webgl or 3d games on mobile
No audio or video capture yet in the browser.
Founding members of coremob.org
Agre on core features, test, use cases
Ringmark mobile web test suite by coremob
Dolphin android browser is first the pass the tests
Webplatform.org open wiki for standards
Attacking these problems of html5
There are still problems with App store ecosystems, waiting for promotion etc
Developers are using phonegap just to be in the appstore
Facebook now has 1bn monthly users
600 million monthly mobile users, twice as engaged
Open graph structured data
Users see friend activity and end up at your mobile web app
Facebook largest referrer to soundcloud
174 million users sent to other app stores
Much more traffic sent to mobile web apps
Facebook app center is a list of mobile web apps
130 million monthly users on app center
35% more like to return the next day
Build for iOS first because it monetises well
Display ads only work for certain types of app e.g. News app
Credit card payments, 9 steps to enter details on a phone
Carrier billing, transaction costs are already set up, but too many operators
Bango, boku, zong allow you to take mobile payments
Facebook mobile web payments, two screens with integrated payments
Usage of web on mobile is different. Users want faster information rather than exploring

Eran Zinman - Conduit
Choice of Html5 apps or native apps or hybrid approach.
Html 5 is more than a technology, it affects how the company runs and employs staff
Phonegap, jqtouch, jquery, rest apis
Not so fast
iScroll library solution for scrolling html elements instead of browser scrolling
Webkit browsers are not all consistent
No hardware acceleration, bad performance
Split components into native elements header footer and web view.
Native to web view bridge for communication
Windows phone has a very unique ui
And at that time was ie 7, which doesn't have html5 or css3
Use backbone to separate views from code
Javascript sent information to native code, which would draw views
Rendered views in C for windows phone
Core javascript is shared for each platform
User interface is rendered using native code        
Linkedin mobile app, hybrid html5 and native, 4mb of js, html and css
Facebook mobile app, server based html css and js, wasn't fast so moved back to native

Eric Loehfelm - Universal Mind
Content in context, Contextual design
Consider where and how the content is consumed
Experience design challenge
Focus on people, their context
Graceful degredation,
Progressive enhancement, adaptive, responsive, target sizes not devices                                                      
Content is key, contextual content is more key
Social, local, mobility, solomo
Mobile first approach
Test on real people,
Use analytics to see whats going on
Functionality vs cost
Mobile responsive site
Native apps with widgets loaded using html5 and css3 js
Localisation,
Twitter bootstrap
Backbone
Custom webviews
Document journey as you go along
Cheap and fast with failures
Wireframe your prototypes, with 20%, 40% and 100% markers
Doug chiang inspired wireframes, machanika
Cheaper than actually designing.
Use the 53ways Paper app on iPad.    
Fluid ui prototyping tool allows you to test on the web, scan with qr code to test on device.
Export html website, export flow diagrams
Test and iterate, doesn't matter if you are right or wrong.
Design is about experience not how it looks.
Users and context
Fail cheap, fail early

Peter Westendorp - Mint Digital
3D css has gpu acceleration
Normal perspective is around 700px,
Transform origin defaults to 50% 50%
Transform style preserve 3d to set all children
Order does matter in css properties
Perspective or the parent means they share vanishing point
Perspective origin changes the scene camera
Backface visibility to hide other side
Get computed style on 3d transform outputs matrix 3d
Examples are Beercamp, css 3d clouds, foldable me
Test in beta versions of browsers aswell
Develop in chrome with flags composite layer borders
Chrome gpu page gives you stats
Anti alias in firefox fix by setting outline to 1px
Photon.js plugin using matrix 3d and lighting and shading
Gimbal lock, if two loops align you lose rotation. solution is to rotate only 2 axis with different speeds.
Traqball.js animation on 3d objects
Dont intersect planes, problems in Chrome.
3D css is flat planes, no proper lighting, not cross browser.
Alternatives, webgl, create in blender then import with three.js
soon we will have css custom filters, shaders bend page and add shadows
quote: Avoid virtual reality gimmicks, the purpose of web design is to be better than reality                                

Steve Sanderson - Microsoft 
Apps need to communicate with data services
Node, rails, mongo database, backups?
Backend as a service products, stackmob, azure
used by hobbyists, client app devs, web devs
Data in the cloud, push notifications, cloud scaling, auth, cross platform, open source.
Download the example app from azure already set up.
Integrated social logins so you can add keys to the app
Edit server side editor to add columns to tables dynamic schemas.
Push notifications to change tile images or push text.

Rachel Andrew - Perch
Added code and useful hacks are used by people who don't understand the original problem
Respond.js, html5 polyfills are examples
Ie8 no media query support, why not use a fixed width site
No html5 element support, use html4 elements
Lack of css3 selectors, selectiviser polyfill is not always necessary
No solution for responsive images
Think what is the problem, constraints, solutions, polyfill or own solution.
Boilerplates prevent you from understanding the original problems
Modernizr is another example
If you dont know what its doing, why is it there?
What happens if the user doesn't have javascript, polyfills don't work?
What is safe to delete from a boilerplate? how do you know if you don't understand it
You should start with nothing, it forces you to consider the implications of adding each thing
Pages are getting larger with these polyfills just to support html5 and new features
Size matters
If developers copy and paste code they don't learn
You need to make mistakes to learn.
We are all learners and teachers.
for example Html reset removes paragraphs spacing.
Teach real html, css, javascript
Teach problem solving skills
Weighing up the pros and cons.
Two tier developers, ones who write, and ones who cobble together solutions.
Test without javascript
Always explain the problems before giving out the solutions.                                                

Andy Appleton - Mint Digital
Javascript is growing up with mvc frameworks
Backbone.js is one that allows you to plumb things yourself
Models, collections, views
Node.js helps server side code and building
Require.js amd loader use with alternative syntax
Modules provide structures and conventions to keep your code organised
Require r.js build script can be run from Node.js
Backbone router object listens for url change and presents view  
Handlebars for templates
You can put templates in html page using script type text/template. Then use dom lookup by id.
Requirejs has handlebars plugin, hbs! to load external templates
other patterns, use mediator publish subscribe. Clone backbone events to get this
implement model caching, sharing across views to reduce requests
Unit testing, use jasmine, describe, it, expect
Automation, grunt command line javascript tool
Grunt auto lints against files, grunt jasmine runner github
Test using headless webkit automated tests phantom.js
Grunt can watch files, then run other tasks when there is a change
github examples at mrappleton/jasmine-examples/
Meteor framework is example of next step where javascript is shared between front and back end

Future of Web Apps London - Day One


Today I attended Future of Web Apps London.

It was really interesting and thought I would share my notes from the first day. Looking forward to tomorrow's speakers!

Most interesting points of the day
Future of content is orbital content
Design should be focused on the content and always start with the smallest screen first.
Measure your overall performance using 'the K factor', a * b * c * d
Release, build, measure, learn, release again in quick cycles
Shared hosting will never be fast
Perception of speed is more important than the speed itself
Identify the biggest problems backed with data
Solve in limited time scale and then prove it
Create an experiment to prove a hypothesis
Test your biggest hypothesis first
Test with real users in their environment
TV across the room appears the same size as a smartphone at arms length, so actually need similar design solutions
Social is used less and less, the larger the device is
Governments are freaking out over the use of modern technology
Western senior politicians are from traditional jobs, e.g. doctors, lawyers, compared to China politicians who are mostly engineers
We all have robot brains which we rely on, our smartphones.
Smartphones are intimate devices, we use 10% of our brain thinking about our phones at any time.  
We are in a future only we understand
We are designing to get insides peoples heads
Controlling the psyche of people through their robot brain.
Different cultures need different optimisations.
Software makes enormous cultural influences e.g. Facebook imposes openness and lack of privacy.
We are ruling the world with the technology we are creating and governments are scared
Make sure you see the real world effects of technology on people with whatever you create

______________________________________________________________

Full notes from each speaker

Jeffrey Zeldman - A list apart
Content is a design problem
Everyone is designing experiences, even programmers
Design is only complete when there's nothing left to remove, especially sidebars!
31% of users are using mobile devices
Content is always the focus e.g. Instapaper, readability
Advertising and subscription money does not normally cover costs of generating content
Future of content is orbital content
Designers now aren't in control of the content e.g. browser plugins, api's, future design changes
Loose designs are better anyway for visually impaired
Ideal viewports are just a consensual hallucination
Users bypassing the design is no longer a minority, custom stylesheets, apps to scrape content
All driven by users need for content
Design is now getting the right user, the right content, at the right time.
Progressive enhancement, get the basics right first
Responsive design but always start with the smallest screen first.
Content first, design out from that, 320px up

Simon Cross - Facebook
How to create a Viral effect, look at Causality loops, chain effects
First Map, measure and optimise your traffic
Shares drive traffic, which drives growth
Identify traffic sources, social vs non social
Whats the ratio of shares vs impressions
Ratio of facebook share impressions to fb shares
Ratio of facebook clicks to site impressions
Amount of dropoff on login screens
Ratio of logged in users to not logged in
Login dialog impressions
Accepts vs declines
Measure your overall performance using 'the K factor', a * b * c * d
A = % of shares per visit
B = Shares per user per visit
C = Users from social networks
D = % of authed users
Measure this per app platform, device and publish type, like, comment etc
Monthly unique visitors, monthly auth'd users, daily auth'd users, daily published actions
Social logins, make them prominent, detect if referrer is facebook then show overlay to get them to log in
70% of users auth'd within overlay as the message was customised to their network
Auto login if available
app to user notifications
Easy lightweight social actions such as like, add to favourites, save, send
Focus on user retention

Giorgio Sardo - Microsoft
Desktop is now touch
New pointer events api
W3 standard
Multi-touch, pointer type, pen, etc

Jonathon Howell - Huddle
Return of the client app
Moving towards web apps with always on internet
Mobile has led swing back to native apps for performance
Each technology has advantages and disadvantages
There is always a trade off
Cloud apps are better than web apps
They both have centralised data and states
But user interface is different based upon device and can be native if it requires it
Build cloud services using rest apis and oauth2
Use mvc code client side to create the user experience

Sujay Tyle - Scopely
Social games have lower acquisition costs than other methods
Social integration is key
Virtual goods and in game purchases are the best way to monetise an app at the moment
Role playing games and gambling are the most profitable of those
This will increase as passbook and google wallet are integrated into iOS and android
Nordstromcom agile app video          
Release, build, measure, learn, release again in quick cycles
Make design principles applicable to success metrics.
Fail fast and often.

Drew McLellan - Edge of my seat
How quickly your site responds.
The ease the user moves from a to b
Performance is a feature
Cheap hosting is less performant
Shared hosting will never be fast
Run each section of code once and cache the results
Cache depending on how often the content changes
Convention over configuration
Varnish cache layer.
Split requests over sub domains to improve browser request performance.
Avoid cookies which add bulk to each request and bust caches.
Use cdn to remove traffic like cloudfront.              
Configure the resource headers e.g. Expires
Gzip content up to 70%. Apache mod deflate
Move Javascript to bottom of page
Perception of speed is more important than the speed itself
Use a script loader. Script.js, control.js, google loader
Use Google page speed and yahoo yslow.
Load other api scripts after your scripts
Eewei Chen - Ex-Sky
Design should also be lean and agile
Hacking agile. Lean start-ups are the future of agile
Build, measure, learn.
Become part of the future or you will die out
Innovative but applicable solutions
Identify the biggest problems backed with data
Solve in limited time scale and then prove it
Understand roles and responsibilities of the people you are working with.
Shared understanding by information shown to everyone live
Golden circles, start with why, then how, then what
Always have an elevator pitch.
Use pirate metrics. Aarrr.
Business model canvas mixed with lean start-up
Assess output, outcome, impact
We believe [output] by [assumption] by [impact]
Empathy map your assumptions. Impact vs how easy something is
Use split tests, analytics accurate track where that success came from
Fenyman, the key to science
Create an experiment to proove a hypothesis
Guess or assume, consequences, experiment
test your biggest hypothesis first
test with real users in their environment

Bruce Lawson - Opera
Media queries for monochrome
Remapping physical to virtual pixels
Css zoom viewport spec
Rem css units                        
Flex box, vertical centering with margin auto
Nested media queries
Future support for detecting js, hover, pointer, touch, interactive, keyboard, remote
TV across the room appears the same size as a smartphone at arms length, so actually need similar design solutions
Social is used less and less, the larger the device is                          
Retina images we have hope with new css hints  

Ben Hammersley - Futurist
Looking at the political and social implications of technology
Governments are freaking out over the use of modern technology
Moores law where power doubles every 12-18 months        
Exponential growth
Western senior politicians are from traditional jobs, e.g. doctors, lawyers.
Compared to China politicians who are mostly engineers
Internet technology has stormed through every other industry.
We all have robot brains which we rely on, our smartphone.
Smartphones are intimate devices, 10% of brain thinking about phone.  
We are in a future only we understand
We are designing to get insides peoples heads
Controlling the psyche of people through their robot brain.
Smart city, sensors and internet becoming very cheap
There will be City API's to create apps for people.
current examples are GPS sensors on the bus telling you its late
Pavement pedestrian density sensors in SF with a heat-map
Optimise your life using the data
Different cultures need different optimisations.
Software makes enormous cultural influences.
Facebook imposes openess and lack of privacy.
We are ruling the world with the technology we are creating.
Make sure you see the real world effects of technology on people.

Google mod pagespeed

If you are looking to increase the speed and performance of your website, Google have just release an Apache server module which improves page loading times by changing the way resources are delivered.

I haven't given it a try yet but people are reporting pages loading at almost twice the speed! That will make a big difference to your audience and definitely worth installing:
https://developers.google.com/speed/pagespeed/mod

Live RegEx tester

If you are writing regular expressions quite often you may need to try combinations to create the match you want. Previously I've been using a flash based tool to check the RegEx live on test data but Flash RegEx and JavaScript have a few differences e.g. lookbehind

Just found a JavaScript equivalent which solves that problem:
http://www.gethifi.com/tools/regex

Quick node.js setup


1) install Node
cd node
git checkout v0.6.18 #Try checking nodejs.org for what the stable version is
./configure
make
sudo make install

2) install file upload helper library
npm install formidable

3) write a simple index.js file
var http = require("http");
var url = require("url");

function start(route, handle) {
function onRequest(request, response) {
var pathname = url.parse(request.url).pathname;
console.log("Request for " + pathname + " received.");
}

http.createServer(onRequest).listen(1337, '127.0.0.1');
console.log('Server running at http://127.0.0.1:1337/');
}
exports.start = start;

3) then run by typing in your command line
node index.js

4) view the app in the browser by going to:

This site has a really good explanation step by step guide at:

Really useful JavaScript plugins/helpers

Smashing magazine has posted a really useful long list of plugins and utilities to make web development easy and faster. You can view the full list here:
http://coding.smashingmagazine.com/2012/09/23/useful-javascript-libraries-jquery-plugins-web-developers/

I thought I'd highlight some of the most interesting items I saw on the list:

Sisyphus.js
This script allows Gmail-like auto-saving of drafts. It stores form data to the HTML5 local storage of the user’s browser and restores it when the user reloads or reopens the page or opens the page in a new tab. The data is cleared from local storage when the user submits or resets the form.
http://coding.smashingmagazine.com/2011/12/05/sisyphus-js-client-side-drafts-and-more/

Avgrund: Better Modal Boxes
A jQuery plugin for displaying a depth illusion between popup and page. The original script by Hakim El Hattab uses CSS transitions and transformations, and the plugin gracefully degrades in those that do not support transitions and transforms. MIT licensed.
http://labs.voronianski.com/jquery.avgrund.js/

Validate.js
A lightweight JavaScript form validation library. You can validate form fields using over a dozen rules and set custom messages; the library doesn’t have any dependencies and you can define your own validation callbacks for custom rules. Works in all major browsers (even IE6!).
http://rickharrison.github.com/validate.js/

cryptico
An encryption system utilizing RSA and AES for JavaScript.
https://github.com/wwwtyro/cryptico

FTColumnflow
Developed by the development team of Financial Times, this library is essentially a polyfill that fixes the inadequacies of CSS column layouts. With the library, you can provide configurable column widths, gutters and margins, define elements spanning columns, keep-with-next to avoid headings at the bottom of a column, group columns into pages and standardize line height to align text baseline to a grid.
https://github.com/ftlabs/ftcolumnflow

SlabText.js
The script splits headlines into rows before resizing each row to fill the available horizontal space. The ideal number of characters to set on each row is calculated by dividing the available width by the pixel font-size – the script then uses this ideal character count to split the headline into word combinations that are displayed as separate rows of text.
http://www.frequency-decoder.com/demo/slabText/

Smart Time Ago
This little jQuery library provides you with an intelligent way of updating relative timestamps in your documents. Smart Time Ago checks and updates every 60 seconds the relative time, within a scope which you specify at the start. It checks the newest time in your scope and tunes the checking time interval to a proper value. The tool can be used as a jQuery plugin, or – if using node – can be installed from npm.
http://pragmaticly.github.com/smart-time-ago/

Piecon
Piecon is a tiny JavaScript library for dynamically generating progress pie charts in your favicons. It has been tested to work in Chrome 15+, Firefox 9+ and Opera 11+.
http://lipka.github.com/piecon/

geolib
A small library to provide some basic geo functions like distance calculation, conversion of decimal coordinates to sexagesimal and vice versa.
https://github.com/manuelbieh/geolib

zip.js
A JavaScript library to zip and unzip files. zip.js provides a low-level API for writing and reading large zip files (up to 4GB with File Writer API). Works with Chrome, Firefox, Safari 6 and (unfortunately) Internet Explorer 10+. With Safari 5 and IE9, you must disable Web Workers and use a Typed Array polyfill.
http://gildas-lormeau.github.com/zip.js/

Leaflet: Open-Source Interactive Maps With JavaScript
A library for creating tile-based interactive maps for desktop and mobile browsers. An easy-to-use API is available, and the tool emphasizes usability, performance, flexibility and excellent browser support. The library offers a variety of map layers, including tiles, markers, pop-ups, image overlays and GeoJSON. It supports panning on both mobile and desktop browsers, double-tap zoom on mobile browsers (plus multi-touch zoom on iOS) and more. On iOS, hardware acceleration is enabled, and Leaflet has a modular structure that lets you reduce the size of the library to make it even faster. The project is open source and available for further development and forking on GitHub.
http://leaflet.cloudmade.com/

SVGeezy: a JavaScript plugin for SVG fallbacks
A JavaScript library which detects SVG images on your website and automatically “looks” for a standard image fallback for those older, less capable browsers. Created by Ben Howdle and Jack Smith.
http://twostepmedia.co.uk/svgeezy/

A Magnifying Glass With CSS3 And jQuery
This technique achieves an aesthetically pleasing visual effect. The CSS3 box-shadow and border-radius properties are used to create the magnifying glass itself, while jQuery is used to detect the cursor coordinates and mouse movements and present the larger image. And when your cursor moves off the image, the magnifying glass elegantly fades away. The included tutorial makes it very easy to learn and understand how to achieve this effect. The technique includes both a small and a large image in the markup, so optimizing the technique to load a larger image on demand might be a good idea.
http://thecodeplayer.com/walkthrough/magnifying-glass-for-images-using-jquery-and-css3

Data Visualization JavaScript Libraries
A growing, curated collection of data visualization JavaScript libraries that make it easier to create meaningful and beautiful data visualizations. If you haven’t one a useful data visualization library in the list above, you’ll definitely find the right one in this overview.
http://selection.datavisualization.ch/

Trunk8
Trunk8 is a text truncation jQuery plugin that cuts off just enough text from a large block of text to prevent it from spilling over. While conventional truncation just limits the character length, this library is able to measure the content area for spill-over and chooses the text that best fits into a given space.
https://github.com/rviscomi/trunk8

Handsontables: Excel-Like Tables For The Web
This jQuery library allows you to use auto-expanding and auto-complete as well as add new rows and columns. It also includes a legend, scrolling (so as your table grows, it won’t take up your entire page and become unwieldy), context menus, conditional formatting and other features. You can even set it to track changes made to the table. And, all the data you enter in Handsontable can be copied and pasted to Excel, Google Spreadsheet, or LibreOffice.
http://warpech.github.com/jquery-handsontable/

Csonv.js
Paul Engel has released a tiny library to fetch relational CSV data client-side (JSON). When using CSV, one file represents one entity; the librarycan also nest relational data within the resulting objects as if you are joining SQL tables.
http://archan937.github.com/csonv.js/

Resumable.js
The library is designed to introduce fault-tolerance into the upload of large files through HTTP. It thus provides multiple, simultaneous and resumable uploads through the HTML5 File API. That means, losing the networks connection doesn’t require a completely new upload. Users can also manage their uploads without loss of data. However, due to the reliance on the HTML5 File API, support is currently limited to Firefox 4+ and Chrome 11+.
https://github.com/23/resumable.js

History.js
The library gracefully supports the HTML5 History/State APIs (pushState, replaceState, onPopState) in all browsers. Including continued support for data, titles, replaceState. Supports jQuery, MooTools and Prototype. You can modify the URL directly, without needing to use hashes.
https://github.com/balupton/History.js/

Touchy.js
A JavaScript library which handles touch events without any dependencies. It’s an easy way to assign hand functionality for touchscreen devices to your website. You might want to check out Hammer.js as well.
https://github.com/jairajs89/Touchy.js

CSSrefresh
A useful small script file that immediately implements changes on your browser made to your CSS-files, by surveying the CSS files in your Web page. Saved CSS-files are executed right away.
http://cssrefresh.frebsite.nl/

Filer.js
Eric Bidelman released a wrapper library for the HTML5 Filesystem API. Filer.js reuses familiar UNIX commands and makes the HTML5 API more approachable for developers that have done file I/O in other languages. Repetitive operations (renaming, moving, duplicating) are easier to manage. You might want to check out DownloadBuilder.js, a library that supports concatenation of local files and uses session storage to cache Ajax/JSONP requests.
https://github.com/ebidel/filer.js