BarCamp London: What is HTML5? - Kai Hendry

Kai Hendry is the angry young man who stormed out of the Vodafone/Novarra presentation at Mobile Monday London. He has a similar disposition to Luca Passani, only more so…

HTML 5 evolutionary rather than revolutionary — taking hints from what is actually supported by the browsers

WHATWG specs include good descriptions of what a browser does with tags

As opposed to W3C saying XHTML is the way to go — not backwardly compatible

W3C invited WHATWG to work with them

Bits that are new

Web Forms 2.0 — supported now in Opera — provides declarative validation in HTML (javascript not needed)

HTML5 validator

Also adding video & audio into the markup (as supported by Web Kit & Opera)

Dropped DOCTYPEs (browsers actually ignore them…)

BarCamp London: First view of the new BBC home page - Richard Hodgson

This hasn’t been released yet, but was shown to us in beta form. It looks good — most people liked it — and it’s a portal style page with drag & drop customisable widgets. Here’s some of the discussion points that were raised…

People pay license fee — feel that they have a bit of ownership

Traditional media — people want reassurance of seeing some news and editorial content on the front page

Simon Willison: have you tried using Flash cookies? — doesn’t go away when clear browser cookies, also cross-browser

BBC have to support all browsers with all capabilities

Currently fixed width to 960px and centered — bbc stats show very few using 800x600 (having a JS bug that records screen size + browser width)

• various people commenting that liquid layouts are possible (even with drag & drop widgets) but harder
• Richard Hodgson revealed that the BBC had tried out a liquid layout (complete with the widgets) but had settled on the fixed width for the moment

Has drag and drop widgets between columns — can turn widgets on and off

Doing an iterative process — rather than usual BBC all-at-once

Part of a larger BBC initiative to get faster at designing web sites, e.g. design pattern layout

• full grid layouts, shared by the designers

Aiming for a streaming iPlayer widget on home page, probably by July

Getting rid of grey bar across the top of all BBC pages (yey!)

The page changes the background colours of all widgets when you change to a different tab for the main content — controversial — no real point

BarCamp London: Obscure Mac Apps - Melinda & Martijn

These are a collection of the more obscure Mac apps that Melinda and Martijn find useful. Not all of them are free, but none of them are expensive. Anything that more than five people already knew was skipped…

KeyCue — hold down the apple key, and see all the commands that are available at the moment

iStat Menus (like MenuMeters & MagiCal combined) — free

Caffeine — menubar item keeps your laptop from sleeping when open (useful for presentations/videos)

NameChanger — visual file renaming

• but I just use Larry Wall’s rename.pl

Yojimbo — stuff database

• can sync to web/iDisk
• also has passwords & serial numbers
• works with tags — have smart folders that pick up tags
• similar to DevonThink

Keyboard Cleaner — disables your keyboard so you can clean it without typing nonsense (only responds to Apple-Q)

Audio Hijack Pro — only $20

• can record audio from old DOS games in Parallels :-)

BibDesk — can throw all your PDFs into it and can add references to them from within Textmate

Papers — iTunes for PDFs (linked to Pubmed), but no link to editors

Sim R2D2 — really annoy someone else :-)

Picturesque — adds lots of borders, shadows etc to images

• can also batch process to lots of images
• not free

ImageWell — batch processing & uploading of images

• similar to Skitch but free

XLD — converts audio files between formats (esp. lossless)

ZAPMac — scan reading by flashing words large across the screen

Nocturne — for viewing screens in the dark (cuts down the glare)

Remote Buddy — controls everything with an FrontRow-like interface

• works with wii remote over bluetooth (wii remote is about £20)
• also works with the EyeTV remote

Open Terminal Here — on Mac Update

iSquint — video compression to iPod

Simple Movie X — simple video editing & recompression; shows keyframes

And some of my current more obscure favourites…

They’ve updated Keywurl to work with Safari 3.0 on Leopard (you’ll need SIMBL, but this is provided with the download).

I find 1password indispensable for keeping web passwords. It saves them securely in the OS X Keychain and makes them available at a keystroke for any browser.

Mini Battery Logger does a really good job keeping track of how much battery I have left — and I can use it to figure out when I need to get a new one.

For those applications that don’t include automatic self-updating using Sparkle, I use AppFresh to tell me when there’s a new version.

BarCamp London: Tools I use for Front End Development - Natalie Down

TextMate to write HTML + server side

• New From Template
• or HTML mode then doctype tab-->

Image Editing with the GIMP or Picnik (online)

Microformats

• nice bookmarklet available to pick them up (cross browser)

Warnings

HTML Tidy as a Firefox plugin

• gives good warnings and has refreshable source

Webdev toolbar

• quickest way to disable javascript
• good for accessibility

CSS

CSSEdit

• can group CSS styles in sidebar — uses comments in source
• dragging and rearranging in sidebar, rearranges text in source
• can rename group names in source; sidebar updates automatically
• don’t really use CSSEdit preview — use Firebug instead

Squarefree

• Test styles — pops up a separate window for adding CSS
• Better than Firebug for changing large amounts of styles as it stays when refresh main page
• Another one to show grey backgrounds — lighter for more heavily nested

Firebug

• can edit layout directly in layout view
• can grab bits in console and then click on them

Javascript

Firebug useful for checking for memory leaks

• use Profile over a period of time

Can test out CSS class changes by hand, before you run the

YSlow — has JSLint built-in for checking poor Javascript style

Insert jQuery bookmarklet

IE Javascript debugging:

• Visual Studio 2008 Web Developer Express
  • see article: “how to debug javascript with ~” written by Bernie for ways to do it
• Better: [Debug Bar] or http://www.my-debugbar.com/wiki/CompanionJS/HomePage Companion JS

Colours

Color Schemer Studio (costs something small)

• screen colour picker

Color Blender (meyerweb.com/eric/toold/color-blend/

Testing

Using IE in Parallels

• can install Bonjour on Windows — automatically detects local webserver

Source control

svnX provides Tortoise-like behaviour for OS X

BarCamp London: Introducing J2ME Polish

Here is the presentation I made at London BarCamp 3. It’s been a long while appearing on slideshare, but in that time the guys at J2ME Polish have released version 2.0, complete with all the features promised in the slideshow and more.

We use J2ME Polish at Kizoom and I’m really impressed with how easy it makes mobile development. You can’t forget about the fragmentation issue, but the issues you have to deal with are reduced to sizing images and choosing formats rather than writing code to switch between them.

| View | Upload your own

BarCamp London: The Transmission of Tradition - Jeremy Keith

Slides available

Jeremy gave us a great rendition with his zouk. This blog post or the slides don’t really capture it — you need musical intermissions every few minutes :-)

John Philip Sousa hated both gramaphones & radio:

• problem was with his business model — he sold sheet music and did live performances

Irish traditional music — no tradition of making money from writing it

• some exceptions: people writing music to celebrate a sponsor
• most jigs, reels, etc: nobody knows who wrote them

The music was learnt aurally — still the best way to learn (all the little phrasings, etc)

Consequently, there was an enormous amount of musical variation in Ireland

Francis O’Neill, chief of police in Chicago, started collecting tunes

• Cliche — Irish policemen in Chicago If you could play an instrument you were guaranteed a job
• O’Neill’s 1001: “The Book” — saved music for future generations since population of Ireland was being decimated by famine and people leaving

Sharing music moved onto the internet with mailing lists

• no music or images, so ABC format
• software could take this format and output sheet music
• regional variations starting to die out, since most popular lives longer

Jeremy’s contribution: thesession.org

• now 3000-4000 tunes
• mostly public domain — some conflicts where 20th century ideas of licensing & intellectual property
• some people will compose a tune and not take credit — hope that it gets accepted

What’s going to happen with music in the future?

• like irish tradition? music getting out there, variations, mutations, etc
• or like Disney? extending copyright length each time Mickey Mouse comes up for expiry

Jeremy thinks the 20th Century might be a blip

• had the idea of the commons for a long time
• only been 100-120 years of having false economy of scarcity

BarCamp London: Learning jQuery - Simon Willison

• simpler than Dojo
• Prototype & mooTools stick lots of functions in your namespace — don’t interact well

Step 1: get some stuff

e.g. jQuery('div#intro') — find DIVs with id # intro

jQuery provides lots of CSS 2&3 selectors

• e.g. li#current ~ li (LI siblings that follow #current)

also lots of magic selectors (begin with colons)

essentially a domain-specific language for querying the DOM

Step 2: do stuff

return a jQuery collection

• can be treated as a javascript array
• can also call methods on it (e.g. ~.each(function() { ... }) )
• can also modify it by calling methods like .attr()

can also control css properties & html content, including animations

using Simon’s bookmarklet called “inject jQuery” that injects the jQuery object into any HTML page live

• can then use Firebug console to try things out interactively

jQuery also lets you introspect the DOM objects

• e.g. can call height & width — very useful for drag & drop etc.
• traversing DOM — parent, next, etc

in functions that you add to jQuery objects, often refer to $(this) in order to set something on the page that’s just been called

Unobtrusive javascript — get the page working without and then add a bunch of javascript to enhance the functionality

• in order to do that, need to call javascript when DOM is ready
• jQuery has $(document).ready(), but has been overloaded into $(function() {...}) call

jQuery allows method chaining (like LiFT) to provide concise representations, and end() method provides descoping:

• methods that change context can then be descoped to get back to previous context
• works well with find() method

AJAX & Animation

can load any external URI into the innerHTML of jQuery collection

can chain animations — one will happen after the other

can also roll your own animations

Plugins

one to fix PNGs in IE, another to help with drag & drop

can write your own

Further reading

Good API reference — http://visualjquery.com

BarCamp London: Messaging Scales – Matt Biddulph

Asynchronous messaging coming in to web (been around for a long time, esp. in banking & finance)

Concurrent languages: erlang, scala, haskell, e

If everything is done with message passing, there is no need for shared state

messaging systems:

• dopplr uses ActiveMQ (using JSON as message bodies)
• spread is another
• google gears — provides local message bus for thread worker pool

long-running processes:

• e.g. kayak.com travel search, gradually fills in your results

dopplr coincidence calculations:

• local information done immediately
• rest of social network done by passing a message to queue
• workers just collect and get on with it
• if queue is too long can start up some Amazon ECS resources to process the queue for an hour or so

extreme late-binding

• Alan Kay said that he may have overstated the objects in object orientation :-)
• important thing is messages — work can happen anywhere if messages contain context

can have shared state using sequenced messages

• update your own state by sending messages to the bus
• everyone can share the same state
• when go offline can store messages to pass, ready for when reconnect
  • can speculatively update state to present to the user
  • when reconnect can discard speculative state and catch up properly

network quake

• short (200ms) periods of uncertainty, code guesses what will happen in that time before messages come from other players
• guarantee that players will sync about once a second

founder of erlang: “humans are long-running processes, can pass messages, others can ignore”

OTP — built on erlang by Ericsson (who invented the language)

• includes code changes as changes of state
• talks about fault tolerance
• “crash only programming”
  • don’t need shut down — just pull the plug; when start up look for any state to recover
• like XP — a set of practices that work together

Another recommendation: Enterprise Integration Patterns by Gregor Holt

Problems with message passing:

• only do it if the request really is async, otherwise wasting time
• introduces dependencies on messaging system

What’s next? Matt is currently interested in Arduino

• similar to messaging services

BarCamp London: Don't Scrape, Glean (GRDDL) - Tom Morris

APIs break the principle of DRY — equivalent to “accessible version” of web sites…

W3C have defined GRDDL: defines well-structured process of converting XHTML (or HTML4 using Tidy) into RDF * works like a stylesheet on top of your HTML

can define with GRDDL how to get at data in APIs (incl. RSS & ATOM)

aim to make data layer separate from HTML but bound to it, just like CSS

XSLT templates provided to convert HTML into RDF using classes

using xsltproc > output.rdf to transform

• have a template HTML page that includes links to xslt
  • either your own or standard ones
• add a link to that page in the profile attribute of the head tag of the content page
  • can have space separated profiles
• then go to triplr.org to convert page into RDF triples or JSON data

most languages have a sparql library to handle RDF pretty much like SQL

examples:

• Combining lots of translations for a single blog
• Custom translation for new tag

extends microformats — enables you to write your own

BarCamp London: Voluntary Economics - Reinier Zwitserloot

Slides available

According to rational economics if you are handed $10 and asked to agree a share with another person, you should offer them 1 cent. People offer much more in practice.

Some examples:

• freakonomics - bagel guy: found that if dumped bagels, cream cheese & cash box at companies, found that at some places 95% of people paid
• linux kernel: copyright of patches goes to Linus
• wikipedia have got more than $1m from small donations
• Oink: download site — couldn’t pay for music but some bands got famous based on usage
• terra bite: pay as you wish restaurants
• tipping…? though in America this comes with threats
• “The Plant” — Stephen King book: published one chapter at a time, continued writing if more than 75% of downloads paid up for $1
• article on boingboing how bartering makes banking work in Africa

counter examples:

• web comics: have donate buttons but don’t really work

price discrimination & sales doesn’t work online

• price discrimination — people pay the max that they are willing to pay
• can search for coupon codes

“fame comes before fortune — if you have fame, fortune will follow”

• that’s why micropayments don’t work as trading

Ways to get voluntary economics to work:

• put a human face on it
• peer pressure (e.g. tipping, bagels — had to be in public place)
• communities — build a big one (e.g. when Starship Enterprise was canned, community raised $3m)
• rewards based on community
• emotion — you like it, pay money/contribute time to support

Has to be aimed at people — more emotional: corporations will just say thanks for free

Is voluntary economy a luxury good?

• Does it only work when economy is good?
• Maybe not — it’s a transaction since there are more things being transferred than money/time — blog is getting attention
  • —> redefine the rationality of the economic agent
• economically more efficient

Short story from Bruce Sterling on the same area

Plug: TipIt — tip any blog