Defining and Extending JavaScript Modules

After writing a few modules you will find yourself reusing the same parts of code such as:

- initiating a function with a prototype
- getting a reference to the dom element
- merging options with defaults

These are duplicated in each Module Class you write. here is a simple example of code duplication:

Panel.js
function Panel(id, options) {
this.el = document.getElementById(id);
if (!this.options) { this.options = {}; }
for (var item in options) { this.options[item] = options[item]; }
this.init();
}

Panel.prototype = {

init: function() {
this.el.innerHTML = 'options: <pre>'+JSON.stringify(this.options)+'</pre>';
}
}

Item.js
function Item(id, options) {
this.el = document.getElementById(id);
if (!this.options) { this.options = {}; }
for (var item in options) { this.options[item] = options[item]; }
this.init();
}

Item.prototype = {

init: function() {
this.el.innerHTML = 'A new item!';
}
}

Obviously we can improve on these 25 lines of code as these modules share the same init code. So here's a way to improve it using define as a global function name:

Main.js
function define(name, module, unique) {
function Module(id, options) {
this.el = Utils.getEl(id);
if (!this.options) { this.options = {}; }
for (var item in options) { this.options[item] = options[item]; }
this.init();
}
Module.prototype = module;
if (!window[name]) { window[name] = Module; }
}

Panel.js
define('Panel', {
init: function() {
this.el.innerHTML = 'options: <pre>'+JSON.stringify(this.options)+'</pre>';
}
});

Item.js
define('Item', {
init: function() {
this.el.innerHTML = 'A new item!';
}
});

Now it is 22 lines of code and we will save many more for every new module created. The added benefit of this is that we can now update the module base in one place for all modules at once. Here is an example where i've added the ability to define a singleton module that will only exist once ever on a page:

Main.js
function define(name, module, unique) {
if (unique == true) {
if (!window[name]) { window[name] = module; }
}
else {
function Module(id, options) {
this.el = Utils.getEl(id);
if (!this.options) { this.options = {}; }
for (var item in options) { this.options[item] = options[item]; }
this.init();
}
Module.prototype = module;
if (!window[name]) { window[name] = Module; }
}
}

Utils.js
define('Utils', {
elements: {},
getEl: function(id) {
if (this.elements[id]) {
return this.elements[id];
}
else {
this.elements[id] = document.getElementById(id);
return this.elements[id];
}
}
}, true);

So Utils is now defined as a singleton instead of a function with a prototype. But what if we need to extend modules off each other? Well this becomes simpler now as we can save and merge modules within our define function.


var modules = {};

Main.js
modules[name] = module;
if (module.extend) {
module.superclass = modules[module.extend];
module = Utils.extend(Utils.clone(module.superclass), module);
}


First we are saving all module prototypes to a list we can reference by their name. Then if a module contains an extend property we will merge the two modules together and set a property called superclass to reference the parent module at any later date.

The Utils class then is updated with the additional clone and extend functions:

Utils.js

define('Utils', {
elements: {},
getEl: function(id) {
if (this.elements[id]) {
return this.elements[id];
}
else {
this.elements[id] = document.getElementById(id);
return this.elements[id];
}
},
clone: function(o) {
var a = {};
for (var i in o) {
if (o.hasOwnProperty(i)) { a[i] = o[i]; }
}
return a;
},
extend: function(o, o2) {
for (var p in o2) {
try {
if (o2[p].constructor == Object) { o[p] = this.extend(o[p], o2[p]); }
else { o[p] = o2[p]; }
}
catch (e) { o[p] = o2[p]; }
}
return o;
}
}, true);


If you would like to see a real-world example of these modules in action, you can look at the source of my portfolio:
http://kimturley.co.uk/debug.html

http://kimturley.co.uk/js/Main.js
http://kimturley.co.uk/js/modules/Utils.js
http://kimturley.co.uk/js/modules/Events.js
http://kimturley.co.uk/js/modules/Template.js
http://kimturley.co.uk/js/modules/List.js




Manually upgrading to Android 4.2.1

If you are an avid Android user you will find the lack of updates to certain phone models frustrating. Manufacturers such as HTC and Samsung only support updates to supported phones and if you are one of the unlucky ones, you won't see the amazing new features of Android.

I am one of those Desire HD owners, which despite being a top end phone of it's time and fully capable of supporting Android 4, is not ever going to be supported.

Here is how to manually upgrade.

1) First root your phone. The Advance Ace Kit is good for Desire HD
http://tau.shadowchild.nl/aahk

2) Then unlock your phone. Easy-S Off is good for Android 2.2 or lower
http://forum.xda-developers.com/showthread.php?t=855403

3) Visit the xda forums and download a new img rom. I am using AOSP-4.2.1 which works really well!
http://forum.xda-developers.com/showthread.php?t=2003273

4) Download the Rom and the google app zip files to your computer e.g.
Rom: http://downloads.codefi.re/synergy/codefireX-Ace/cfx_ace-4.2-BR4.zip
Apps: http://goo.im/devs/KonstantinKeller/mako/gapps/gapps-4.2-JOP40C-121116.zip

5) Connect your phone via USB cable and mount the SD card as a drive. Copy the two zip files onto the route and name the Rom as update.zip.

6) Reboot your phone in Recovery Mode and first select backup phone. After backing up the phones current files, select wipe data / factory reset

7) Now select apply update.zip and wait for the files to be extracted to your phone. Then hit reboot and do the same again to apply google apps zip file to your phone. Happy days

Writing efficient JavaScript modules


Writing modular JavaScript gives you many advantages:
- reusable code
- separation of layout and logic
- prevent code duplication
- cleaner and easier to read

However there are still a few common mistakes which can be made, even when following guides. I've listed some of those below.

1) Putting your JavaScript code at the bottom of the html page prevents JavaScript from blocking the  browser rendering.

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Module Example</title>
</head>
<body>
<div id="example"></div>
<script src="js/modules/Module.js"></script>
</body>
</html>

2) When writing a JavaScript Class The function should only hold the unique properties of the module. Things like the html dom element and it's options. These are duplicated for each instance of the module so 1000 modules means 1000 references to elements and 1000 sets of options.


function Module(id, options) {
this.el = this.getEl(id);
this.options = options;
this.init();
}

3) The prototype should only hold the shared properties of the module. This is important as by adding it to the prototype, the object is only ever stored once in browser memory, even if you create 1000 instances of the module!


Module.prototype = {
name: 'Module',
elements: {},
init: function() {
this.el.innerHTML = 'options: <pre>'+JSON.stringify(this.options)+'</pre>';
},
getEl: function(id) {
if (this.elements[id]) {
return this.elements[id];
}
else {
this.elements[id] = document.getElementById(id);
return this.elements[id];
}
}
}

4) Now you can create instances of your module which will be very efficient and quick. In this example I have also added a caching function to the elements to ensure each element is only located and referenced once!


var module = new Module('example', {
test: 'hello world',
param: 23476
});




Setting up Virtual Machines on Windows 8


1) Go to Hyper-V Manager > right-hand side > Virtual Switch Manager

2) Choose External > Create Virtual Switch > give it a name and choose your internet connection > Apply > Ok

3) Then go back to Hyper-V Manager > right-hand side > New > Virtual Machine > Click Next > Type a Name > Next > Next > Choose the connection you have just created > Next

4) Then choose 'Use an existing virtual hard disk' and browse to the .vhd file of a virtual disk image. You can download different types from Microsoft at:
http://www.microsoft.com/en-us/download/details.aspx?id=11575

5) Then it will appear in the Manager list right-click and select 'Start'. When started right-click and select 'Connect'.

6) After booting into Windows you will need to install the Integration services by going to Action > 'Insert Integration Service Disk' if the vhd has previously had these installed you may need to remove them from control panel add/remove programs before this step

Some useful css optimisation articles

Some great tips in there when building your styles, every rule you write affects the speed of the page!

CSS optimisation
http://perfectionkills.com/profiling-css-for-fun-and-profit-optimization-notes/
http://csswizardry.com/2012/11/code-smells-in-css/

Animating css sprites
http://buildnewgames.com/dom-sprites/

Responsive, cross browser, object orientated

I thought it might be useful to share some tips and learnings I've gathered when building sites in html and css. In particular I am going to focus on:
- cross browser resets
- responsive html/css
- namespaced object orientated css

1) First we need to start with some basic html

index.html
<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Example</title>
  <link href="css/reset.css" rel="stylesheet" />
</head>
<body>

</body>
</html>

2) Then inside the body tags we can add some example content of a navigation and information panel

index.html
<div>
  <ul>
     <li><a href="#">Donec id</a></li>
     <li><a href="#">Elit</a></li>
     <li><a href="#">Non mi portas</a></li>
     <li><a href="#">Gravida</a></li>
    </ul>
</div>
<div>
    <img src="images/landscape.jpg" alt="image" />
    <h1>Donec id elit non mi porta gravida at eget metus.</h1>
    <p>Donec sed odio dui.</p>
    <p><a href="#">View details &raquo;</a></p>
</div>
<div>
    <p>&copy; kmturley 2012</p>
</div>



3) We need to reset some styles so that any layout or theme we apply on top will all react in the same way. You can use a reset stylesheet such as css reset or normalize. However I prefer to only reset certain elements, so lets create a file called reset.css and only put css targeted at elements.

reset.css

body {
    margin: 0;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, p {
    font-weight: normal;
    margin: 0;
    padding: 0;
}

a {
    outline: none;
    text-decoration: none;
}

iframe, img {
    border: 0;
}

ul {
    list-style-type: disc;
}

form, input, textarea, select, fieldset {
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
}




5) Looks a bit neater with some resets! For a site with a grid of rows and columns we need some building blocks which are standardised, so lets define a layout.css

layout.css

.container {
    max-width: 980px;
    margin: 0 auto;
}

.row {
    margin-right: -20px;
    overflow: auto;
}

.col {
    float: left;
    padding-right: 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}




6) we can also add some responsive rules to work for modern browsers IE9+ which will resize our rows and cells accordingly.

layout.css



/* width percent */

.w1of1 { width: 100%; }
.w1of2 { width: 50%; }
.w1of3 { width: 33.33333%; }
.w2of3 { width: 66.66666%; }
.w1of4 { width: 25%; }
.w3of4 { width: 75%; }
.w1of5 { width: 20%; }
.w2of5 { width: 40%; }
.w3of5 { width: 60%; }
.w4of5 { width: 80%; }

/* 20em = 320px */

@media (max-width: 20em) {
    .flow-xs.col,
    .flow-xs .col {
        width: 100%;
    }
}

/* 30em = 480px */

@media (max-width: 30em) {
    .flow-s.col,
    .flow-s .col {
        width: 100%;
    }
}

/* 48em = 768px */

@media (max-width: 48em) {
    .flow-m.col,
    .flow-m .col {
        width: 100%;
    }
}

/* 64em = 1024px */

@media (max-width: 64em) {
    .flow-l.col,
    .flow-l .col {
        width: 100%;
    }
}

/* 80em = 1280px */

@media (max-width: 80em) {
    .flow-xl.col,
    .flow-xl .col {
        width: 100%;
    }
}

7) We now need to update our html to use the new row and cell classes also adding a couple of extra divs and the layout stylesheet.

index.html

<div class="container">
        <div class="row">
            <div class="col w1of1">
                <img src="images/landscape.jpg" alt="image" class="w1of1" />
                <h1>Donec id elit non mi porta gravida at eget metus.</h1>
                <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
                <p><a href="#">View details &raquo;</a></p>
            </div>
        </div>
</div>

8) Now you can resize your browser and see the responsive rules in action! Lets add some extra cells inside each row to see the percentage rules working effectively

index.html

<div class="container">
        <div class="row">
            <div class="col w1of2">
                <img src="images/landscape.jpg" alt="image" class="w1of1" />
                <h1>Donec id elit non mi porta gravida at eget metus.</h1>
                <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
                <p><a href="#">View details &raquo;</a></p>
            </div>
            <div class="col w1of2">
                <img src="images/landscape.jpg" alt="image" class="w1of1" />
                <h1>Donec id elit non mi porta gravida at eget metus.</h1>
                <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
                <p><a href="#">View details &raquo;</a></p>
            </div>
        </div>
</div>




9) All very nice but that's only the elements reset and the layout working responsively. Lets create a theme/skin/style for the site now. As always we need to namespace our styles so we don't conflict with anything else so lets create themes.css which will contain our default theme:

themes.css

.default {
    font-family: 'Lato', Arial, sans-serif;
    font-size: 0.875em;
    color: #444444;
    background-color: #ffffff;
}

.default h1 { font-size: 3em; }
.default h2 { font-size: 2em; }
.default h3 { font-size: 1.5em; }
.default h4 { font-size: 1.286em; }
.default h5 { font-size: 1.143em; }
.default h6 { font-size: 1em; }

.default p {
    line-height: 1.429em;
    padding: 0 0 0.715em 0;
}

10) After setting the defaults for the entire site we can create specific themes which we can choose to apply to a certain section or elements so it's important to use classes only (never ever use id's or dom elements as selectors)

themes.css

.light {
    color: #333333;
    background-color: #ffffff;
}

.light .c1 {
    color: #333333;
}

.light .c2 {
    color: #2989D8;
}

.light .c2:hover {
    color: #71A8D6;
}

.light .bg1 {
    background-color: #ffffff;
}

.light .bg2 {
    background-color: #eeeeee;
}

.light .bg3 {
    background-color: #aaaaaa;
}


11) we can now apply the theme stylesheet and classes to the html

index.html

<div class="container">
        <div class="row light">
            <div class="col w1of1">
                <img src="images/landscape.jpg" alt="image" class="w1of1" />
                <h1 class="s1">Donec id elit non mi porta gravida at eget metus.</h1>
                <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
                <p><a class="c2" href="#">View details &raquo;</a></p>
            </div>
        </div>
</div>




12) Now we have themes up-and-running you can switch the light theme class name to switch the theme on an entire section without needing to change the classes below. Lastly we need to make site specific changes such as aligning the nav items. guess what? we should be namespacing this too!

modules/nav.css

.nav li {
    display: inline-block;
    margin: 0 0 5px 0;
}

.nav a {
    padding: 5px 10px 5px 10px;
}




So there we have it, a finished working cross-browser responsive site. In older browsers what will happen?

IE8 supports percentages but not responsive css, so it will retain the cell layout whatever the width of the users browser. If you would prefer you can move the max-width attribute to a responsive rule so IE8 will stay a fixed width site no matter what.

You can download and view the final code on my github account at:
https://github.com/kmturley/alley

Hope that helps you get a responsive site working faster!












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: