This is a live post of notes I am making at .NET Generate Conference

Oliver Reuchenstein – Information Entropy

The numbers:

51,117,600 new websites in 2012

250 million domain names

Over 1 Billion facebook users

1.1 Bilion Smartphone users

182.5 billion tweets

380 billion photos

1 trillion facebook likes

52,852 billion emails

99.99% of emails end up in the trash

48 billion hours of video on Youtube

1 billion times Gangnam style

The web has become like TV, some people say its like telephone because we talk to each other but its mostly passive and it is boring.

To much of it is Advertisement.

The internet became like TV because that is what people want, the medium is a mirror, humans are messy and everything will continue to get even messier.

Some people think the mess is good because they say mess means more meaning.

Jack Franklin – the new era of JS

JACKS SLIDES

The world of javascript development is growing, Jack will try to be your lego manual for building your Millennium falcon.

Bit of history

jQuery came out in 2006/2007 and allowed us to forget about browser inconsitencies

But it meant we ended up with 1000’s of image carousels

It meant anyone who knew CSS could write javascript as it lowered the barrier of entry.

Jack hates image carousels.

In 2010 backbone.js was launched and allowed us to build more complex web apps, and meant we could use javascript for more

Less and less people were using Internet Explorer.

Lots of libaries and engines have started springing up

But now things have matured (pic of cheese on screen)

20 odd libraries came out, several became popular like jQuery.

Now

Jack doens’t believe there is any difference between web apps and websites, we all building sites that people visit, do something and leave. Differentiating websites vs web apps is no good to anyone.

EMBRACE THE ECOSYSTEM

Its not an all of nothing approach though

Developers are lazy – very true

Jack hasn’t used FTP in years, a huge number of people in audience have.

Templating

So generally people write html in javascript like

var html = “<p>” + variable1 + “</p>”;

But instead we can use templates which can be written in underscore and javascript. These are a quick win.

Testing

Write tests using jasmine, mocha and qunit to ensure your code works as you expect

The client or the server

Should we have the client which we hit with API requests or do we render on the server.

It depends on the project.

Should we support people without Javascript

“Don’t turn off a native language and expect things to work.” Todd Motto

Bustle.com

Built on ember, it loads in through javascript and loads really fast

The site still works without javascript, using serverside for content instead.

rdio.com

Backbone.js app, doesnt work without javascript

Sometimes javascript being on is something people will just have to have.

skillswap.in

Built in ruby on backend and ember.js on frontend

Audience mostly coming from Firefox and Chrome.

Your the only person that knows your app, so only person who can make the decision is yourself, but this approach is only going to become more popular. Most of the libraries are now stable with Ember JS 1.0 just coming however don’t build client-side JS just because you can.

Stephanie Rieger – Beyond Progressive Enhancement

Stephanie Riegers Slides

Self driving cars collect gigabyes of data

Mannequins that watch, listen and analyse who we are

mobile stores with 3D scanners

Smart roads are being tested in Korea

Stomach acid powered sensors that communicate with applications on your smart phone

a fork that senses how you eat.

toilet that tracks when you go

When you look at these things its hard to think about where the web fits in, when we think about the future and about how everything is meant to be seamless, the future is the pathways from todays apps to apps that talk about anything.

The current approach is to develop API’s, the theory being that only a more capable and powerful web can compete with native apps, things get added to native platforms faster than the web. One idea is to replace the native platforms with the web but its like we are missing part of the story, this doesnt meant its the wrong path. Were far from the only industry that has been challenged by the power of technologies.

ITs natural to try and compete with new technologies but rather than compete we need to adapt and embrace new technologies and completely rethink how we relate to them.

Native software will not go away. We need native software to power complex experiences like where we layer geolocation with camera, 3D rendering, gyroscope and video & audio. The hardware and software evolves quite quick, the web can’t always keep up, devices are getting quite powerful and you want to be able to take full advantage of powerful new chipsets an technologies. Software can have dedicated cores dedicated to a specific purpose EG iPhone 5S has the new motion chip, low power because concentrates on one thing without loading up the CPU. With a world of things to chat with people do not always care enough to start a full-on relationship.

The web is the ubiquitous pathway, a veritable superpower that will only increase once everyone is connected.

How do we make things better

Progressive enhancement is using technologies to creating great experiences. Enhancement can be beyond the web, people are now dipping in and out of the web every day, choices people make on devices are more complex and irrational. Services need to embrace this complexity and you can’t predict precisely which touchpoint people will it. Its natural that we want to drag people to the web but its counter-productive as it doesnt improve peoples lives.

Dixons have recently scrapped individual sales commissions in favour of store-wide schemes linked to measures of customer satisfaction, this is a progressive approach because it doesnt matter where people buy the product, its about engagement. A online sale after someone has visited the store is credited to the store.

iOS smart app banners

iOS smart app banners can prompt usrs to open or instlal you app, easy to implement using meta tag and are less obtrusive than modal windows and are native components. While less intrusive than other methods, generically linking to it is as useful as generically dumping all smartphone users to your mobile home page so you should pass your full URI reference to the app so they get to the content they were engaging with.

Custom URI schemes

URI schemes are implemented on iOS and Windows mobile, on Android you have something different.

App developer registers the scheme within the native app e.g polar:// then when a user clicks on a link on a web page the native app recognises the scheme. The app then opens and resolves the full URL. Unfortunately they do not gracefully degrade, if the app isn’t their the browser doesn’t know what to do with it. On iOS you get an error, other browsers fail silently.

At the moment URI schemes are a bit of a hack as they do not degrade

Android has Intents

Intents are the glue between application components both within an app and across different apps. They allow apps to outsource tasks to other apps (that they may not even know about) using predetermined interfaces.

Users can choose the app they want to use for the purpose, the developer doesn’t have to think about it in advance. This gives users the choice.

Android apps can register their ability to accept an intent.

Clicking a hyperlink is one of the may user actions that triggers an intent, it is therefore possible to build both an app and a mobile optimised site to enable behaviours. The user clicks a link within a web page and are given option to open in app or in browser.

Once the experience is over they automatically end up where they initiated the task. Developer and user does not need to do anything. Your job is to just link tasks together.

It is a shame that only Android does this however Chrome on iOS does mock intents with integration with apps like Pocket iOS app. This could come to web in the form of web activities which is in Firefox OS. Mozilla hope that web activities will be adopted as a standard, the development of web intents a similar thing has been abandoned with focus on web activities instead.

NFC

NFC is simple but poweful wireless technology, there are 1 million NFC enabled Android devices activated each week, Windows mobile support it but Apple doesn’t and are focusing on Bluetooth LE.

Examples of NFC

Touch the poster which contains a passive NFC tag to receive a product related URL, similar to QR code but you don’t need a individual app.

NFC can be used for sharing media, it activates bluetooth and then pairs devices and sends file.

NFC has been used on headphones to power up headphones, activate bluetooth and pair devices.

Summary

Things get more interesting when you chain everything together.

The idea is you tap your phone enter store, get 10% off voucher, then you can interact with that voucher, can then pay with NFC with 10% off and the web is part of this but is not the whole experience.

We need to tear down the Silos

We are building products and brands, in a world where everything is connected every company is a technology company.

Technologies are not solutions, they are just tools, we need to tear down walls and tell stories our customers deserve.

Stephen Hay – UI design and layout with CSS Flexbox

Took 8 years to get a man on the moon

Tim berners lee wrote first web browser in a year,

Took 2 years to write the first CSS specification, we have had CSS for 17 years and only now are we starting to get real layout, but “Layout is hard” is what we hear from the browsers. We have a robot roaming around Mars but “Layout is hard”.

“Layout solutions are a interesting area in CSS to me” – Tab Atkins

There are two types of web layout

Page Layout – grid layout and template layout

UI/Component Layout – Flexbox

Before you get all excited its not a good idea to use Flexbox for page layout because of issues with nesting.

New terminology of Flexbox

Axes & Size

Flex

Alignment

Order

So you need to leave your layout baggage at the door. Leave how you have dealt with layout behind and start with a blank mind.

Flex containers

Flex items

Main axis/size/dimension

Cross axis/size/dimension

So lets use bob as a flex container

#bob {

display: flex;

}

The children of a flex container are called flex items, even anonymous block boxes. The direction that your blocks go is called the main axis.where as its intersection is the cross axis. We have start, end and center on both the cross axis and main axis. We can finally properly align things in the center (even vertically).

Flex items properties

align-content

align-items

flex-direction

flex-flow

flex-wrap

justify-content

Flex items properties

Missed making a note of these

Common use cases

True centering

Unknown menu items

Display order

Wrapping

Tab groups

Form layout

Martin Gorner – Animate your HTML5

This talk had a lot of code which is easier to read direct from slides at http://animateyourhtml5.appspot.com/

Ways we can animate in the browser

Use CSS3 Transitions by adding a class using javascript to activate activation

CSS now has support for 3D Transitions

SVG is now implemented in most browsers

Canvas – 2D only

WebGL + Three.js – full 3D

CSS shaders – 3D shaders controllable from CSS

Andy Hume – CSS for grown ups

Quality of code like:

OOCSS

SMACCS

CSS Lint

BEM: Block-Element-Modifier

In the beginning

CSS came about when we were using tables and we were looking at web standards, removing presentation aspects of the code to a separate layer and what pushed this forward was CSS Zen Garden.

There was one HTML document and then lots of people submitted different CSS but we were not thinking about what it is like to build CSS for large websites. People embracing the early days of CSS were normally working on smaller sites or personal projects so early best practices didn’t reflect the real world

Nothing is perfect

Nothing lasts

Nothing is ever finished

CSS should not be completely reliant on the structure of the content in the page.

Managing complexity

The biggest problem we have these days is how we use selectors.

CSS gives us really powerful tools and their are not many constraints and when you are building big complex things, constraints are good. For example if you write the styles for tweetbox you want them to be encapsulated with the tweetbox.

Modern programming languages allow you to protect your classes, variables etc. With CSS we have no protection so someone could apply styles to an anchor which will effect all your blocks containing links even if that is not the intention.

Code Quality

Correctness

Reusability

Reliability

Performance

Web 2.0 Complient

Testability

Extensibility

Maintainability

What is more important is to optimise for change, this is the definition of maintainability. If you can’t optimise for change you can’t offer good value for time it takes to maintain the site.

Layers of CSS

HTML Document -> Base Styles -> Module Styles -> Layout Styles

Examples (only included a couple as slides have these)

This is perfectly fine to use if you update class name if you update color name

.green{

color: green

}

If you want to apply specific styles to a specific heading use a class, the heading level (h2, h3 etc) may later change, the css will be flexible

.promo-box-heading {

font-size: 1.2em;

}

Surgical layout helpers can be useful

.margin-top{

margin-top: 8px;

}

.margin-bottom{

margin-bottom: 8px;

}

Leisa Reichelt – Prototyping UX Strategy

Abstraction requires your best ideas when you know the least.

You are fooling yourself if you think problem solving is anything but squiggly.

How Leisa works now

get a multidisciplinary team quickly

sketch to HTML and stay out of design packages

use real content, prototype/testing content

multiple prototypes (test lots of ideas don’t commit)

quickly test both qualitative and ‘active’ use

let stakeholders ‘touch’ your ideas

iterate, the more quickly to learn more

only document what you really need to

Who does she do it with

start ups

large tech conservative organisations

large conservative governments

(so basically anyone)

Prototyping beats abstraction

Be making not documenting, design is how it works and you can’t get feeling how it works from a wireframe or Axure prototype, use a proper html prototype.

Shoow, don’t tell design principle is both a design principle and a way of working, if the client is able to see how it works you can prove to them how it will work and it makes it feel real to the client.

Leonie Watson – Rock n roll guide to HTML5 & ARIA

Accessibility Stack

Assitive Technologoes

Accessability APIs

Accessible Rich Internet Appplications (ARIA)

Document Object Model (DOM)

ARIA Roles

There are more than 30 ARIA roles including alert, dialog, checkbox, menubar, progressbar, slider, tab etc

ARIA States

9 including aria-busy, aria-checked

ARIA Properties

More than 20 ARIA properties

Tab index

tabindex=”0″ fit into natural tab order of page

tabindex=”-1″ takes it out of the natural tab order

Elements with tabindex=”>0″ are a bad idea

Summary Design pattern

Favourite Pink Floyd</summary </details> with ARIA roles would become <details role=”group”> <summary role=”button”>Favourite Pink Floyd</summary </details> when we add an ARIA State to show it has already been clicked on <details role=”group”> <summary role=”button” aria-expanded=”true”>Favourite Pink Floyd</summary </details> ### Main page design pattern This is a sample page structure <div id=”header”> </div> <div id=”main”> </div> <div id=”footer”> </div> Without ARIA roles a screen reader does nothing, if we add ARIA roles for landmarks we can make a screen reader understand this. <div id=”header” role=”banner”> </div> <div id=”main” role=”main”> </div> <div id=”footer” role=”contentinfo”> </div> But with HTML5 we don’t technically need this (but for now its worth leaving it in for backwards compatible). <header role=”banner”> </header> <main role=”main”> </main> <footer role=”contentinfo”> </footer> ### Navigation Design Pattern <ul role=”navigation”> <a href=”home.html”>Home</a> </ul> There problem with this is that the role is on the ul but it should be on the nav tag <nav role=”navigation”> <a href=”home.html”>Home</a> </nav> ### Section Element Back to blank The section element is called region in ARIA however if we use aria-labelledby we can give it a more informative name by providing the ID of the sections heading <section aria-labelledby=”heading”> <h1 id=”heading”>Back to blank</h1> </section> ### Baskets For baskets we need to tell the screenreader to monitor the basket for changes, when changed it will read to the user the contents of the basket Basket summary <div aria-live=”assertive” aria-atomic=”true”> Your basket contains <span id=”quantity”>0</span> items.

Are you looking for your next role? I work as an Lead Engineer at RVU where we are currently looking for Full Stack software engineers based in our London office. Find out more

Please enable JavaScript to view the comments powered by Disqus.