Future of Web Applications – Day 1
Get excited and build things!
by Christian Heilmann – Mozilla
Over the last few years the internet has taken over. It is not a geek thing or something for university researchers. It is in our homes, on our mobile phones, on our tablets and even in our game consoles and TV sets. With that much exposure comes a lot of advertising and everybody wants a slice of its fame. The trick to make the best out of it is to jump right into it and not fall for the siren song of advertisers telling you that their product is what makes it work for you. All the web technologies that deliver the magic are open and have been proven for years. It is up to you to grab them, shake the box and find out how they work. In this session Chris Heilmann of Mozilla shows how being open and being interested helped his career and how you can find talent, build cool products and make a living through being excited and interested in the tech behind the media.
Breaking the lock:
- Web Intents
- Boot to Gecko
- Open Web Apps
- Web api
- Browser ID
- Fullscreen / notification / context menus
Web apis: dialer, sms, telephony and msg api; address book: contaccts api; clock, calculator; camera api; gallery: filesystem api; settings: device status api, settings api; games: accelerometer mouse lock api;
Mozilla has an open framework of apps, so it will show an apps bar on firefox, opens in fullscreen, utilises touches, etc (if on tablets). All that is needed is a metatag on the page saying that it has a different view (in this case an app) and firefox (and/or other browsers) will know there is an app available. Links become integrated: if you have a NY times app and twitter app installed, if a NYtimes link is clicked on Twitter, it wouldn’t open the browser window, it will open the NYtimes app since it is already installed (streamlined look).
MUST check: https://apps.mozillalabs.com
We’re in a crisis, game: http://playspent.org/ some article about it: http://staffingtalk.com/spent-online-game-challenges-last-1000/
BEAUTIFULLY done Slides at: http://icant.co.uk/talks/fowa2011/
Article: Animating with javascript: from setInterval to requestAnimationFrame
Sprite Sheet animation with CSS3 using the steps() feature.
What’s Next for JavaScript and the Web Platform
by Alex Russell – Google
Lots of new features are landing in the web — WebGL, WebAudio, Databases, etc. — but lowly old JavaScript, HTML, CSS, and DOM are all set to change dramatically in the near future too. Data binding, a true component model, and a better language for using them from are all in the cards, and they’ll change everything about the way you build apps. This talk examines what to expect, when, and why from
the perspective of the Web Platform team inside the Chrome project.
Frameworks and compilers are Plan B
Say what you must vs say what you mean
Alex explaining a bit about CSS Variables and CSS Mixings, CSS nesting/hierarchy (very good so you don’t have to repeat and write the class name over and over again… just use indentation). Mentioned about Shadow DOM and use of template tag.
The Future of Commerce and the Opportunity for Developers
by Neal Sample – X.commerce
The commerce landscape is undergoing massive change driven by consumers adopting disruptive social, mobile, digital and local technologies and services. Learn why we are building the X.commerce platform and how developers and merchants can leverage it to profitably meet this increasing demand and grow their business. Get details of how the platform is built, the opportunities it presents and how to engage, innovate and profit with us.
Why use a platform for commerce?
For the Merchant is easy to adopt new capabilities and at low switching costs. For the developer there are no barriers to entry, easy on-boarding of customers.
What makes a good commerce platform?
Firstly, should be robust, secure and scalable; then should have ability to change, be autonomous and modular; finally should be rich platform with consistent interfaces and developer-friendly! And now a new requirement: to be cloud ready.
Neal introduces x.commerce ‘Fabric’
It is a type of ‘broker’ that manages the data exchange and interactions betweaen all capabilities in x.commerce
Benefits: connect once to access all capabilities; innovate and customise in almost any language; seamless operation, not costly point-to-point integration.
It embraces opensource.
Merchant Awesomeness
Reach more customers
Ease of use for time-to-market
Future proof – built on open technologies
Insights through data and analysis
Trusted applications and developers
Developer Awesomeness
Reach more merchants
Ease of development with standards and hosting
Better monetisation through technology and services distribution
Relevant data for targeting and personalisation
@nsample
ns@x.com
https://www.x.com/
Spine, a Lightweight Framework for building JavaScript Web Apps
by Alex MacCaw
This powerful framework is only 2K but it gives you MVC structure for your JS app. Learn how to use it for your projects.
Spine, MVC Javascript framework http://spinejs.com/
He mentioned that would like to be sending email but not having the UI blocked (I don’t know if Spine does asynchronous that he just mentioned, but I found the concept interesting…)
Spine docs apparently is REALLY good: http://spinejs.com/docs/index
Spine gives us:
- classes and modules (good if you are just writing pure javascript since it doesn’t have classes and modules
- routing
- ajax
- dependency manager (Hem)
Example for fowa (but check spinejs examples too) http://spine-fowa.herokuapp.com/#/pages
Also mobile release: http://spinejs.com/mobile
@maccman
http://alexmaccaw.co.uk/
Found these after presentation, might be of help:
http://addyosmani.com/blog/building-apps-spinejs/
Responsive Web Apps
by Nick Pettit
Learn how to make your app look great on any mobile devices, while also delivering a more focused user experience.
Main elements: fluid grids, fluid images, media queries
- Fluid grid formula: target/content = result
- Fluid images: img{max-width:100%;}
- Media queries: @media screen and (min-width: 320px) { //css here } – adjust layout based on the width of the browser
Where Nick check design patterns/inspiration: Yahoo! Design Pattern Library http://developer.yahoo.com/ypatterns
Think about mobile first, adjust the scale, adjust the layout, make it vertical, use a visual, make it ‘responsive-ish’ (adaptive design instead of responsive, usually work on existing complicated websites) and his favourite: “just get rid of it”.
Check Responsive Data Tables
Slides for this presentation here: http://t.co/FBR62lHC
@nickrp
This App is 1% Finished: How to Rethink and Rewrite
by Bob Baldwin – Facebook
No matter how great your app is, you need to always be looking to make it better. Stop being complacent, put all ideas back on the table, and start building the next version. If you can start by believing you’re only 1% finished building your app, you’ll be more open to making bold changes that’ll push your app forward. I will share advice for orienting team discussion and how to recognize true product progress, drawing from my experience rewriting Facebook Groups, Questions, and Events.
If your app is 1% complete now, what would be the 100%? Be humble about your past/recent achievements.
Think about your challenges
Dislike your own app (find problems!)
Build extreme prototypes – then you’ll find the extremities; find the edges of what works (example of facepiles – right bar with friends chat and updates, etc.)
Facebook team debate about the names of things, for example, should Groups be named groups or something else? Discussion about button positions, colouring, states, text, etc.
Focus on impactful features (example of ‘join a group’, ‘invite a friend’ which generated over-large groups. Ended up only with ‘ask to join the group’, ‘add friend’ – pay attention to the words).
Focus on Key interactions. Choose meaningful defaults.
Building HTML5 Games
by Giorgio Sardo – Microsoft
Tired of playing Angry Birds, Farmville, or Pacman? Come learn how you can build the next cool game in HTML5. Expect code, best practices, experience from the field and lot of fun!
Games on html5 is not only about canvas… there is css, svg and other techniques…
These demos were just a-m-a-z-i-n-g:
- http://agent8ball.com
- http://www.worldsbiggestpacman.com/play/#0,0 (unbelievable the number of maze screens)
- http://www.ietestdrive.com
- http://jsdo.it/event/svggirl (amazing! change on the fly colours on animation and play it again!)
- http://www.pirateslovedaisies.com
- http://disneydigitalbooks.go.com/tron (one of my favourites, remember to grab and scroll side-to-side don’t click enter and wait or you’ll wait forever!)
Multi-touch experience
Today: mousedown, mouseup, mousemove
Webkit model: tourchstart, TouchMove, TouchEnd, TouchEnter, TouchLeave
Microsoft: multitouch doesn’t matter how many fingers
How to play from an airplane?
App Cache
IndexDB
10 Tips for Web App Success and Profitability
by Dave McClure – 500 Startups
Launching a web app is fraught with danger, so learn 10 tips that will help you avoid the Dead Pool.
How to pitch to a VC
Concentrate on pitching your problem (not your solution)
Read Geoffrey Miller books:
- The Mating Mind: How Sexual Choice Shaped the Evolution of Human Nature
- and Spent: Sex, Evolution, and Consumer Behavior
The Elevator Pitch: only 30 seconds!, Use short, simple memorable words (what, how, why). Example: 3 key workds or phrases. No expert jargons, just KISS (Google it if you don’t know it).
The Problem: what is the problem? make it obvious! Who has it? Make emotional contact. Explain how painful the problem is… Painkiller not vitamin. Check blog post “Your solution is not my problem“.
Your Solution: great products and companies do 1 or more of these things: sex, money, power – and how your solution makes your customer happy and how is unique, if it is not unique change the way you pitch to get that uniqueness (example: it is different from company X which allows “left handed mothers to swim with their kids” – is not unique but found a niche)
The money shot: demo, screen shots, video; PRACTICE!, if demo fails have a backup (screenshots, local video, interpretive dance). Expect to be interrupted (if they interrupt: they care! it is good, answer the question first, only then go back to your presentation)
Market Size: bigger is better. Top down = someone else reported it (Forrester, Gartner, your uncle); Bottom up = you do it… calculate users/usage/revenue in money.
Business Model: describe top 1-2 sources of revenue, prioritize by size or potential (too many sources: you don’t know much); common revenue models: direct – ecommerce, subscription, digital goods; indirect – advertising.
Proprietary Technology/Expertise: VCs ‘really’ like unfair advantages (lead, experience?)
Competition: Are you Better or Different? – list ALL your competitors!!!
Marketing Plan: how to get customers and distribution? there are lots of channels and decisions, choose a few: PR, contests, direct marketing, radio/tv/print, telemarketing, emil, seo/sem, blogs/bloggers, viral/referral, affilite/cpa, widgets/apps.
3 things that matter / to measure:
- volume
- cost
- conversion
Team: people that get VCs hot: geeks (with deep tech experience), entrepreneurs (who sold companies), sales/marketing (who bring customers money).
Money: How much money (3 budgets: sm, md, lg). What will you do with the capital? (new hires to buid product; mkt & sales to get customers more money; ops & infrastructure to scale up)
Presentation at: http://www.slideshare.net/dmc500hats/10-tips-on-how-to-pitch-a-vc-fowa-london
Check last slide of presentation for Additional Resources!!!
Tips posted by @barrysmyth on Twitter:
Tip 1 – Pitch the problem not the solution
Tip 2 – Read Geoffrey Miller (The Mating Mind and Spent — sexual selection and consumerism)
Tip 3 – The Elevator Pitch: Keep it Simple. Think 2 or 3 key phrases. No jargon. Have fun when you pitch … its infectous
Tip 4 – The Problem: Make it Obvious. Connect and create a shared context with your listener. Check out 500hats.typepad.com/500blogs/2009/
Tip 4a – The Problem: how painful is the problem = market size
Tip 5 – The Solution: how does solution tap into powerful emotional needs that every human being has? How does it make people happy?
Tip 6 – Give Great Demo and have a backup as a fallback (video, screenshots).
Tip 7 – When you get interrupted, LISTEN you have their ATTENTION! Use it. Don’t just revert to the presentation.
Tip 8 – Market Size: Bigger is Better (generally). Top-down (via Forrester, Gartner etc) vs bottom-up (usersxusagexrevenue)
Tip 9 – The Business Model: Keep it simple and focus on top 1-3 sources of revenue. Too many options means you don’t know.
Tip 10 – Proprietary Technology: VCs like unfair advantages. What’s yours? (IP, market lead, team etc)
Tip 10a – Check out: startonomics.com/blog/the-inter
Tip 11 – Competition: List competitors & show how your are better and/or different. Think carefully about comparison axes to win.
Tip 12 – Marketing Plan: How will you get customers & distribution. Focus on few channels. Pay attention to volume, cost & conversion.
Tip 13 – The Team: Geeks, entrepreneurs, sa;es/marketing people get VCs hot. Think Hustlers, Hackers, Designers.
Tip 14 – Money & Milestones: Focus on just enough capital to get you to a value-creating milestone. Build in a 20-50% cushion.
Tip 14a – Money & Milestones – focus on how you will use the investment (build product, get customers, scale-up)
Future of Web Applications – Day 2
How to pitch your app and get big coverage
by MG Siegler – TechCrunch
The number one question I get asked is for advice as to how to pitch a tech blogger about a app/startup/idea. The answer is fairly complicated since every blogger is different. So instead I’ll proceed with a 40 minute lecture on the matter. And yes, I’ll cover the embargo nonsense. In detail. With curse words.
First real rule: Build a great product.
Second rule: Know what you are pitching.
If you have to ‘go back to you on that question’ etc. it is not a good sign. If someone is pitching for you/your company they should do research, they should KNOW everything (or almost everything) about what they are pitching for.
The world has changed, remember who is your public. The blogs ‘rule the world’.
Press releases are for losers.
If you have a better connection or relationship with TechCrunch and other companies you would communicate first in different ways. Press releases are welcome for the more general publicists, if a press release was sent to him as the first point of communication would highly be ignored.
You should work with journalists, not shout at them.
If you must shout, then blog!
If you have something to say it, say it! Don’t push someone to write bad things about your competitor. If there is something that you don’t agree write yourself. (example: Steve Jobs getting frustrated with Flash).
The adage: no such thing as bad press.
It is true in majority of cases, especially for tech startups. It is a way to get your name ‘out there’ above the crowd.
Find your guy
Know who it is at that specific publication that will suit your interests and have specialty into what you need. Don’t direct emails to the general company, find a name….
Techcrunck doesn’t like to work with embargoes… there is always something happening and excuses were heard many times… “I hit the wrong button”, “Our timestamps are screwed up”. If you must deal with embargoes, stick with writers you absolutely trust. Otherwise, you burn a bridge. If you use more than one writer use different angles to your advantage.
If you launch your product with too many at once could be an overkill.
Again back to the golden rule: build a GREAT app.
One story is the kindling.
Your app is the fire.
kin·dling (kndlng)
n. Easily ignited material, such as dry sticks of wood, used to start a fire.
If you cannot do it personally, write an email adding some personality. Pictures and videos are your friend for this type of situation. Verboseness is your enemy. Be passionate!
If you get no response, try again, and again, and again. Don’t be discouraged, the company could be in a pile of emails, or the time is bad… doesn’t mean that the company is not interested.
Pitching in different ways… instagram, twitter DMs, IM, Facebook messengeTr, Quora, twitter itself.
Friend of a friend, the social filter could help to reach the person you need.
Keep the pitch short, sweet and to the point.
The magic word: “world exclusive!” exclusivity and full access to the story will have a bigger chance for the company to work with you.
The f*** off word: embargo
Best time to pitch: right before you launch your product. A few days before launch.
Launch!
by Ryan Carson
The worldwide launch of YOUR new app covered by TechCrunch. If you want to launch your app, please email Louise
Great idea of having startups presenting their apps, giving the pitch and also getting feedback straight away from MG.
cityking.com – list of best of London, based on social sharing scores.
Jottify.com – social network for creative writters, difficulty on how to become a writter, (started as enovella), they transform to the right formats, 70% of value passed to author, 30% held for maintenance of website, etc.
Key words on the site “write, discover, sell”
Site design is quite nice and I really liked the idea!!!
LayerVault.com – simple version control for designers.
Scrollable timeline so you could see the evolution of the design, you could download the PSD in any version. Really great app, just waiting to come out for Windows (yes, I use Windows, not Mac, for my designing… booo)
The Things of the Future: Putting People First
by Cennydd Bowles
Technology has, of course, changed the world – but its main power has been social, not commercial. Despite the best efforts of the industrial age, the general public now holds the cards. They can have any colour they like, including black. They can bring down newspapers, industries, and governments. They’re not going to take your shit any more.
So farewell and good riddance to “pile em high and sell em cheap”, saturation advertising, and consumption culture. It’s time to put people – and humanity – at the heart of business.
If you talked to people the way advertisers talk to people, they’d punch you in the face
The product of the future should be … more human.
Great example: Innocent fruit juice package example, message on the bottom of carton: “stop looking at my bottom”.
http://wackaging.tumblr.com
bad examples of packaging trying too hard.
Toasting bread, cool button that says “a bit more” so it is just a bit more of heat but not the whole cycle so you don’t have to wait and check if the toast is burning or not… maybe is not all that necessary but it gives a nice touch and it could address a problem for a large population that was heard.
The product of the future should… tackle wicked problems.
Weightbot – track your weight app
Things of the future should… cross channels.
Each channel needs to be fit for purpose, NOT a replication or duplication of experiences #crosschannel #servicedesign #fowa #ux @cennydd
… disrupt, not only differentiate
Example: loans online taking out the middle-man (banks)
… create genuine value
total value = business value x customer value
Try to explore the customer value, designers are good in bringing customer value.
…favour intangibles
Design-led business works!
Book: Undercover User Experience Design
You’re in the Cloud, Now What? – Getting the Most Out of Your Cloud Platform
by Steve Marx – Microsoft
“The cloud” promises scalability, reliability, and easy management, but actually getting those benefits goes beyond simply deciding to use the cloud. Learn what you should consider when choosing a cloud platform and designing your application. We’ll talk about how to build web applications that can start small and grow seamlessly, stay up no matter what, and serve a global audience.
Will talk about challenges and what should be considered.
Web app expectations – requirements: updated frequently, high performance, up all the time. (not only that but keep that while doing changes/updates)
More VMs != Availability
More VMs != Scalable (make sure they have same capabilities, shared state)
stateless compute + durable storage = scalable, available app
node.js app on Azure for #FOWA demo by @smarx – American/British English ‘translator’ – http://www.twoenglishes.com/
iOS Accessibility – Why blind users love Apple
by Robin Christopherson – AbilityNet
Robin will demonstrate the amazing potential that iOS devices (and even more so their apps) have to change the lives of users with disabilities. Find out why a camera is so vital for blind users, and how apps that cost a few pence are replacing specialist bits of kit costing thousands of pounds.
How to find, hire and keep good technical talent
by Chris Lea – Media Temple
One of the most challenging aspects of operating a startup is assembling a team that’s truly able to build great products. Technical talent is scarce, demand is enormous, and the stakes are incredibly high. In this quick talk, I’ll discuss some tactics that will help you find, hire, and keep the kinds of people that will allow you to execute your company’s vision.
Building and maintaining the right team is essential. If you have agreat team, building a great product is almost an afterthought.
Find them!
People are not searching for jobs, jobs are searching for them… Infiltrate the communities, talk to them, find the technologies you need. Universities can be great targets.
Infiltrate relevant technical communities. Use IRC channels & talk to people. Scour & contribute to mailing lists. Attend meetups.
Have a tech blog. It is also a recruiting tool. Make sure you have a good referral program for existing employees.
Hire them!
Can they do the job? do they fit in? Culture is critically important. Would you hang out away from the office? ask existing employees the same question, if the answer isn’t yes, it’s NO.
Traits to look for: do their hobbies outside work involve ‘learning how stuff works?’, do they have any good war stories (big mistakes are good if they could turn around as positive), have they contribured to any open source projects? passionate enough to argue about? (about their tools, which text editor, workflow, etc.)
Keep them
Sunrise period (90 days?) to evaluate the person. What do you value about the job? (not only money), lifestyle freedom is a powerful motivator. This works if there are good communication patterns.
Allow workers to have a say on what they are building. Don’t let anyone be in the hero role, ever. Make sure they go on holidays, preferable away from the computer.
If your employees don’t use what they build, find out why and fix that!
Another post about this presentation at: http://thenextweb.com/insider/2011/10/05/how-to-find-hire-and-keep-top-technical-talent/
Better JS with CoffeeScript – 37 Signals
by Sam Stephenson – 37signals
Learn how to write cleaner and faster JavaScript with CoffeeScript. We’ll also cover where this is leading in the future.
CoffeScript is Beautiful & I never want to write plain javascript again
Hello World using Google Web Toolkit looks ugly! too many lines of code. Pyjamas (Google Web toolkit in Python) also ugly code… Then there is Objective-J better but bad documentation.
CoffeeScript is just javascript, but the good parts. It is shorter, more streamlined, no more var. runs anywhere, JSLint compliant.
10 Things I Love About CoffeeScript
- Function Syntax
- Significant Whitespace
- Bare Objects
- Comprehensions (borrowed from Python)
- Classes & Inheritance
- Bound Functions (built into the language)
- Conditionals
- Destructuring Assignment
- String Syntax
Slides for this session: http://t.co/yLPzadu0
To Catch a Virus
by Barbara Macdonald – Willet Inc
Finished building your awesome new app and ready to take your market by storm? Get ready for the real hard part: getting users. It’s a challenge that engineering can’t solve but with the right planning, user growth can be incorporated directly into your core product. How? Viral loops.
Couldn’t participate of this session (was cuncurrent with CoffeeScript) but apparently was really good and the slides are here http://www.slideshare.net/becmacdo/actual-fowa
The Future of CSS
by Hampton Catlin – Moovweb
CSS has changed very little in the last decade. Its feature set has remained roughly the same since the day it was introduced. In this talk, I’ll introduce you to Sass, a major upgrade to CSS that you can start using today in your projects to make your CSS styling far more awesome.
SASS is not dynamic, it compiles to css; not server-side, developer-side (generate the css on your machine then go to server).
3 steps: first Walk – then Jog – then Run.
Using it: sudo gem install sass sass –watch thefolder. Check SCOUT. Other implementations: Ruby, python, .net, php, django, etc.
It is great for describing colours, if we know a colour, for example #369, if we want a lighter blue than that we can specify with percentage…. color: (mycolour, 50%)
Check example on Sass site about mixin
sassymothereffingtextshadow.com
sass-lang.com
http://compass-style.org
Book: Pragmatic Guide to Sass – discount code: “FoWA2011” gives 25% off
Slides of this presentation: http://www.slideshare.net/hcatlin/future-of-web-apps-sass
@hcatlin
Mobile Web Apps: Where Are We Headed?
by Ernesto Jimenez – Vodafone
In this session we’ll take a look at what’s the future of Mobile Web Apps. We’ll do an overview on the status of Mobile Web Applications, what are the main players and projects to keep an eye on and where we are going.
jQuery mobile, PhoneGap, working on better standards: geolocation, device orientation, media captures, contacts, calendar api, focus on delivering a good user experience, do not focus on one browser only, be responsive (not only in your designs, but also getting back to users’ feedback).
Node.js, Socket.IO and Express
by Jim Hoskins
Learn how to use this amazing trio to build powerful JavaScript apps
Socket IO http://socket.io
Node.js What the node.js has that other webserver doesn’t have?
Typical web server: receive request > secret sauce > send response. Could split in multiple requests to make it faster.
Sockets ‘stick around’
Evented I/O (solution that node is based upon).
An analogy: L1 cache would be like taking a paper from your desk (3 sec), L2 cache would be like putting a book on a shelf (14 sec), RAM would be equivalent to have a 4-min walk on the corridor to get a Twix bar.
Fast: L1 cache, L2 cache, RAM (synchronous)
Slow: HD, Network, Services/DB (callbacks)
Evented Web Server
Receive request > secret sauce (but release control to call back later) > receive request > secret sauce (again release control) > do some code > send response (to that first request) and so on…
Example: http://wordsquared.com
Node.js projects: nodeknockout.com
Go Build Something!
@jimrhoskins
jimhoskins.com
jim@jimhoskins.com
Write better markup through writing better CSS
by Chris Coyier – Wufoo
Use the semantic tags, don’t add more classes on the html code, use it on css!
Slides: bit.ly/fowa-better-css
And a post from Chris: http://css-tricks.com/14492-writing-better-html-css-slides-from-fowa-london
Slides’ links: http://lanyrd.com/2011/fowa-london/slides
Related FOWA posts:
http://jimmytidey.posterous.com/future-of-web-apps-two-themes
http://www.liamjaydesigns.com/2011/10/fowa-london-2011
Off-topic (well, not sooo much): Developers, programmers and tech companies on Twitter – http://dvlprs.com and the search on #fowa: http://dvlprs.com/search/%23fowa
