Blog

Alex Payne—Mind the tools

• How does language shape what we do?
• Web developers are polyglot programmers: a soup of HTML, CSS, JS + then all the backend variants. How often do we think about the efficiency of this?
• WWW era 1991–92
• CGI era 1993–97: C, Perl (established the value/pair communication method!)
• Applet era 1995–97: Java (eventually unbundled by Microsoft, overtaken by Flash)
• Flash era 1998–present? (now mostly used for delivering video and games)
• JS era 1998–present
• PHP era 1998–2005
• LAMP era 2001–07
• Frameworks era 2005–present: Ruby on Rails, Django
• Post-framework era
  • Message queues connecting heterogeneous components
  • Service-oriented architecture (scalability)
  • LAMP assumed
  • Cloud (really!)
• Native era
  • Google native client
  • Videos out of Flash (HTML 5)
  • Mobile apps
• Functional era, defined by:
  • dynamism: rapid builds + releases, close user -> developer interaction
  • tension: web v.s. rest of technology industry
  • heterogeneity: variety! swap tools
  • evolution: rapid, both technical and cultural

Lessons

• dynamic typed, interpreted languages are dominant
• languages exclusive for the web face tough competition
• nothing lasts forever!

The future

• Frameworks everywhere: JS, CSS, Typography (?) e.g. TypeKit, SiFR
• APIs everywhere
• JS everywhere (even in backend)
• Code generation
• Refining standards

Kevin Yank—CSS frameworks

• CSS reset: Yahoo YUI (aim is a common look) or Eric Meyer’s, bit of a controversy—creates extra work v.s. forces developer to use quality HTML code
• Typographic grids: column grids and baseline grids (Try Baseline framework to control leading for prototypes, then develop your own:
  • query the HTML these frameworks make you write
  • non-semantic classes: big beef—use own class names (with Blueprint via settings.yml)
  • encourage presentational thinking?
• Reasons to choose a framework: good documentation, nice code, any HTML source order, semantic classes
• CSS pre-fab: ready-made styles for documents made of prescribed components e.g WordPress themes, SlickMap CSS (for styling site maps)
• CSS abstraction: like JS frameworks (JQuery), server-side frameworks e.g. Compass Sass, Scaffold (for PHP)

Simon Pascal—Beautiful web type

• Reset CSS
• Try and get x-heights the same if pairing serif + sans-serif faces
• Slideshare presentation

Matt Balara—Flogging design

• Why is no one talking about design principles for ecommerce sites?
• Know your shoppers: cater for personas.
• browser: “I’m just looking.” 1st impression counts. Move towards multiple pathways instead of strict categories (so they’ve got more chances to find what they want)
• questor: looking for something specific. If you have a product with lots of features, provide lots of info; one with less features, use big pictures (diamond rings!)
• socialite: ask their social network about buying decision. Provide short URLs, send to friend, share this page etc.
• blow-in: direct to product page (perhaps from banner ad) Do as much as you can to show the product off. Take a leaf from Apple’s “product theatre”.
• Product pages design: focus, 5px Gaussian blur on the page, then test “Where would you click to…?”
• Buying process: destroy all stops from getting the money i.e. why ask for card type when this can be inferred from the number? Why use a dropdown for country, why not a search with auto-complete? Why ask for a telephone number?  (Will you actually ever use it?) Put the cbeckbox for accept terms & conditions right next to the progress button (rather than loose somewhere on the page)
• Improve thank you for your order pages—huge opportunity here to upsell.

Derek Powazek—The wisdom of community

• People are crazy
• The web is missing social cues
• The new experience where we are “alone, together”
• Kinds of crazy (crazy is a small % of the total number of your users)

1. Confused. Q: Which search term is higher on Google? “sex” or “google”? A: “google”! Counter these people by providing good examples (show them first, then allow posting); give help in context; use the context as a filter to screen out; design for community: web as first note in “call and response”
2. Too passionate. Reference the bystander effect where people don’t act if they’re in groups, with the alone, together the opposite occurs i.e. “isn’t anyone listening?!” (this is a symptom of succeess). The the angst a place to go. Timeouts, not deletions of accounts. Require accounts, no anonymity. Have community managers.
3. Hecklers. Historical good roots: well-informed people talking back to power, but can be bad on the web. e.g. Chevvy Tahoe mash up ad debacle. Starve them of attention. Timeouts, not deletions. Private messaging. Empower community members to report. e.g. “block” user function: but be careful about creating factions, which then people self-identify and behave as a collective.
4. Trolls. Don’t care at all. Active destroyers, not someone who disagrees with you. e.g. 4Chan. These people assume the gullibility of users and prey on them. Delete accounts, make them invisible (only they can see their posts), slow down the server, call the authorities.

Anil Dash—Next Year’s Web

Framework for deciding what will be the web in 2010: how people make it happen, how it evolves

• Do we take for granted the ability to create the web? Kids implicitly understand the web’s inate content creation.
• Building communities around niche interests—this would not be possible in other mediums e.g. LOLcats site.

This year’s web review

• Google: innovation comes from outside, the fate of large companies. (e.g. Google Wave, an Australian invention) i.e. not the web is not Silicon Valley centric, the cult status is not necessary.
• Microsoft: making a come-back? More humble, more user-centric. Ray Ozzie’s influence: decentralised collaborative tools.
• Yahoo: insecure? People leaving, not trustworthy. APIs unsustainable.
• amazon.com Kindle: all aspects of the product make money, the hardware and the software. i.e. not phone plans where the contact pays for the hardware. Cloud computing services, radical shift -> cheaper, financial incentive to use particular systems -> next commoditised machines to run the platform?
• Twitter. Power? A category (like blogging), not a single product. Entanglements: $150m VC funding, suggested users list, trending of building stuff onto the system, i.e. past of least resistance for short messages, but what consequences are there for developing on this?
• Facebook. It’s ivy-league university formation flavours the entire experience? Not customisable, locked down. What culture and community values are represented?
• AOL lessons: provided 1/3 of all internet access in US in their heyday—they “controlled the internet” including custom apps developed in “rainmain”, a proprietary API. Current exemplars include the iTunes App Store? Facebook applications? Open email won in the end (SMTP, POP3, HTML) and increased value in the network.

Ways to think about the web

• “Made of web” companies. What’s the largest social network? The web.
• Web is not immune from trends that have affected the transformation of traditional media. i.e. market share / eyeballs on TV channels -> no one winner, the networks will organise themselves into a long tail. “Mainstream” is at the top of the social media long tail -> are these equivalent to the old media networks? How do we benefit from walled gardens?
• A focussed community works better, organisations need to embrace obligations to web community. The power shifts to creators. e.g. YouTube mass media crap.
• Culture drives adoption. e.g. Opera on Twitter, part of the language.
• Niches are still there, site evolution of Gondwana land -> countries.

2010 web hints

• The “push button” web, real-time updates e.g. RSSCloud, PubSubHubBub
• Features bubbled up from community e.g. OpenID. GetUp an example?

Scott Gledhill—Entering the mobile space

• Personas in mobile?
• Gen Y + Z will have lots of buying power in next 5 years? Really high mobile usage, almost 100%, increasing mobile web access too.
• Used during in-between time.
• Where are you?
• Mobile 2.o hype -> parallel to 1999 web? overhyped?
• Eye candy is a critical business requirement
• Mobile = device fragmentation
• Learning Javascript: recursion, HTML
• Learning CSS
• Mobile web (open) v.s. custom apps.

Dmitry Baranovskiy—JavaScript libraries

• Altassain building their own JS library.
• Categories: low-level libraries, high-level libraries, toolboxes and widgets.
• The API is more important than the functionality. e.g. Twitter. English majors will do well.
• Library is the answer -> what are the questions: make something useful.
• Who is the target? Java, Ruby, PHP, JS.
• The best APIs have a simple use which implements (abstracts) complex functionality.
• Don’t try and move outside the “feel” of JS: it’s your friend.
• Performance: target IE6 and everywhere else will run fast.
• Replace for loops with while loops.
• Cache results of function calculations e.g. parsing colour values.
• Book: JavaScript Performance Rocks! by Fuch T & Hoy A.
• Animation: lots of functions looping, watch performance of those functions, memory leaks, don’t trust timeout values.
• Bullet proof: plays nice with other scripts and libraries
  • watch use of global space: treat it like a public toilet!
  • native prototypes: be careful with these.
  • avoid object.prototype and this. accessors.
  • beware of iframes: different array objects to windows
  • undefined is not a constant, it’s a variable and can be assigned a value!
• Packaging
  • size of JS code matters! (different to other languages)
  • minify / pack / obfuscate: best to YUI compress, then GZIP (alternatives JSmin, Dojo shrink safe, Packer (just minify: smaller, but slower)
  • YUI compressor trick: make functions into local variables especially if they are used lots in the code, but be careful that it does not take longer to execute.
• Error handling: most times it’s best not to write an error handling function, this allows the developer to see which line of code has the error.
• JSLint. Use it.
• DOM is a big bottleneck.

Nick Cowie—Progressive enhancement with CSS

• State Library of WA
• User trust (huge impact of eye-candy) e.g. CannyBill
• Surfin Safari
• CSS3.info

Adobe panel

• NY Times Obama inauguration speech interactive analysis
• Google “headless” Flash player for indexing Flash content