My Little Black Book

Bigger day day 1 for sure, and I was a bit more responsible with my coffee intake. Open mind and a full agenda my expectations from the best web conference in the world were exceeded again. I should maybe add I have not attended all the web conferences but am happy to stick my head out on this one.

** Jared Spool – The Anatomy of a Design Decision

Jared walked us through a few types of design decisions, I suppose it was targetted at UX design but extedned other types of designers as well.

• Unintentional Design – design that just happens
• Self Design – build it for your own needs, some other people might have the same needs
• Genius Design – designing for others based on experience and research
• Activity Focused Design – design based on the activities users want to takeExperience-Focused Design – designing for the overall experience

A process is a series of steps to get things done, on the one side of the scale is Informed Desicion vs Rule Based Desicion and finding the balance is somewhere inbetween.
Rule Based decisions – prevents thinking but fails on any exception cases
Informed decisions – requires thinking and works with normal and exception cases

I liked the continum described in a single line:
Tricks <– Techniques <– Process –> Methodology –> Dogma

Tricks beging techniques that shouldnt work but gets the job done, hacks or “tactical desicions” maybe?
By using a pattern library you allow designers to use existing paterns but if the need to veer from the standard they have to create a new pattern and add to the library. In most cases path of least resistance is followed. This way you get consistency and flexibility.

Jared closed by encouraging us to utilize informed decisions and avoid rule-based decisions. Techniques and tricks are more effective than methodologies and dogma.

In-depth Article – http://www.vanseodesign.com/web-design/decision-making-styles/
And some design eye candy http://yvettesbridalformal.com/

*** Scott Hanselman – It’s not what you read, it’s what you ignore

Its not easy living in the information age, as there is a sea of information available it is critical you can cut through the noise and focus on what is important. As “what is important” changes frequently you need to be able to scale yourself.

• Measure before you cut, if you can see where you spend all your time
• Use the Pomodoro Technique it identify what type of distractions you are most susceptible too
• Dont keep your mail client open all day, schedule time, preferably not in the morning
• Simple mail rules that are important no more than 4 or 5
• Keep emails to a minimum of 3 or 5 sentences, use wikis to comunicate bigger messages
• Monday Vision — Friday Reflect
• Do the right thing by using the 4D’s technique. Do, Defer, Delegate, Drop
• Conserve your keystrokes – you only have a finite number in your lifetime!
• Dont underestimate the Psychic Weight of the ‘to dos’ in your life (inbox 1000+)

Handy Tools

• Workflowy – neat looking lists webapp. Personally I prefer Evernote.
• RescueTime – measure time spent of various apps and webpages. This i have to do!!
• three.sentanc.es – personal policy for keeping emails concise
• If This Then Than – interweb automation tool to script frequent actions
• Instapaper – Dont open a tab for every thing save it and read later on your device of choice.
• Getting Results – Methodology for doing 3 things per day / week / year and tracking progress

NB This is not a guilt trip but a exercise of awareness. Dont build “Guilt Systems” and dont be afraid to “Drop Packets”

** Raffi Krikorian – Pressure, defense, and responses

Raffi taught us how i learned to sleep a bit at night, by ensuring the fail whale does not show up, and if it does how to have efective plans in place to respond in a timely manner.He is leads the Twitter Platform team who is responsible for the core applications and API.

Measure

• If you cant measure it you cant manage it
• Clear success criteria
• Every one in the orinisation should understand success criteria
• Reports should be widely published internally (ops, devs and marketing)

Plan

• Acurate numbers make capasity planning posible
• Create response plans and document them in a playbook
• Learn from unplanned incidents and known events like New Years and Superbowl

Respond

• Execute plan from playbook to resolve issues quick
• If you know your traffic spikes you know when you need service restored
• Ensure root cause is understood ask “why?” 5 times
• Fix all 5 issues from the “why?”s
• Learn from issue and update playbook

Fun Twitter facts

• must follows : @raffi and @twittereng
• 17Mb/second connection required to access the realtime Twitter firehose
• On avarage they are doing 3000 tweets per sec
• At the end of the Superbowl they were processing 12000 tweets per second
• Normally they have 2 spikes a day americas wakeup/bed time and asian wakeup/bedtime
• New year profile of their traffic changes to peak every hour on the hour

Presentation slides on YouTube

Other Presentations

Rob Malda – Slashdot, the rise and fall –  He talked about working with what you got and discussed the slashdot effect.

Adam Lisagor – Lonely Pan Flute – Internet Video producer, hints for success. Choose you clients, good products make it easy to be successful, Manage expectations, Quick feedback loop and always be nice.

Michael B Johnson – Making Movies is Harder than it Looks: Building Tools for Telling Stories – He is responsible for making tool for the the production teams. Showed us some behind the scene footage at Pixar. Culture of constructive critique.

Jenn Lim and Tony Hsieh – Delivering Happiness – Made a business out of selling happiness http://www.deliveringhappiness.com/, culture of happiness in a company can lead to great success see zappos.com. Bit to feelgood for my liking but had some good research to back up their statement.

In Closing

Derek Handley – Doing Good and Well – Closed the conference with a inspirational talk, (with only 2 slides) and encouraged us to put our skills to good use. How much impact you have is relative to the scale with which you choose to see the world. Make sure you’re living on purpose as much as you can.

Comunal notes of the day was kindly facilitated by @mirimarmike and can be perused here http://webstock2012.miramarmike.co.nz/

Thanks to all involved for putting together awesome and inspirational 2 days of internet immersion.

Big day, lots of old Wellington friends, bluebird weather. Waaaaahhyy to much coffee, but at least it was worth the tapping feet and cold sweat.

Reviewing the list before there was a few people that caught my interest but man there are always a couple that truly stand out.

** Kathy Sierra – MBU: Building the Minimum Badass User

Its about what users do after they use you product or service (tell their friends its awesome hopefully)

Enable your users to :

• Be better at something they care about
• See in higher resolution (information overlay)

Launch when you can support minimum badass user, no more no less.

Jeremy Keith – Of Time and the Network

Discussed networks of our time from shipping trades to fiber, fascinating take on importance of time through history as well.

• Stock market algorithms that trade on dedicated fiber networks for micro second latency.
• Internet is not as permanent as we think, look at startups in last 5 years that are still around, and we trusted them will all our data.
• Joseph Whitworth (http://en.wikipedia.org/wiki/Joseph_Whitworth) gave us standards – screw threads! British standard Whitworth

He closed with a scary point. Lots of copies keeps information safe. All our DNA is stored on one planet. We have no backup. Consider the dinosaurs. Publish on the web. Look after your URLS.

Estelle Weyl – Mobile: Don’t Break the Web

Author of Don’t break the web for mobile, explained web restrictions on mobile

• Avoid Reflow
• Reduce DOM size
• Defer and Reduce JS
• Reduce HTTP Requests
• m.bing.com is a single HTTP request to load initial page then side loads other assets
• be careful of memory consumption – images > 1024px may be tiled as they cant fit in devices memory

Some Tools of the trade

• WPO:Blaze.io/mobile
• Remote Web Inspector:Weinre
• Firebug Lite: stevesouders.com/mobileperf bookmarklet

*** Ethan Marcotte – The Responsive Web Designer

Pick of the day for sure, apparently responsive design is old news … but i like it and am so jumping on the bandwagon.

Its pretty much build well marked up standard HTML that will display in appropriate proportions no matter which device you look at the web page on. There are pretty much 3 techniques that enable this.

• Fluid Layouts
• Media Queries
• Device Classes

For this to work, design team needs to be working VERY closely with developers and prototype in HTML as early as possible. Both teams should scrutinize Layout and Interface and create a close feedback loop. Other question to constantly ask is how the interface would work with Touch / Keys / Mouse.

The in depth article that started it all http://www.alistapart.com/articles/responsive-web-design/

Some awesome sample sites http://designmodo.com/responsive-design-examples/

Honorable mentions

I’m keen to read MoxyLand by Lauren Beukes, very cool talk about how to cut through desensitization by addressing big issues in fiction.

Nick Mihailovski from Google Analytics Showed a whole bunch of report types, look at 404s Duh!, Check out 3rd party app 4Q Suite for a neat little js plugin to as site users 4 questions for a snap poll.

Matt Haughy, said “Lifestyle Businesses” can bring happiness to you don’t need to build the next Facebook.

Matthew Inman from oatmeal.com fame had everyone walking out of day one with a smile on their faces. http://theoatmeal.com/comics/literally

For a full list of presenters have a look here http://lanyrd.com/2012/webstock/

Oooh only a few sleeps to go till my fav time of the year. Time to get my mind bent, expanded and blown.

I was going to “quickly” pick 2 or 3 of my favorite talks from the past couple of years, but now i sit with a list of at least 10 presentations that has had lasting impression on me. So for the full list of past presentations feel free to have a dig around through the Webstock Archives

So in attempt to keep the attention of the twitter an youtube generations i have a short description, but the videos are the full 30 min presentations sorry :)

Delivery Delight – Doug Bowman delivered a whole bunch of feel-good moments. We, as technology builders, must remember that users are human and engage on a human level and appeal to their emotions and passions, and not create barriers with our crazy web designs.

Web Performance Optimisation – Steve Souders has served time at institutions like Google, Yahoo and Creator of YSlow and my inspiration for chasing the performance dragon.

Elements of a Networked Urbanism – Adam Greenwood, was not quite sure what to make of his weird leather pants and designer-type glasses. Sooo not what i expected, but truly a moving look at what technology has already done to society and what is to come when our streetlights have got a ip address, or the manhole cover, or the toaster. He has a solid poke at the field of interactive, networked information-gathering, -processing, -storage and -display resources.

Your Business Plan Is Science Fiction – Annalee Newitz explanation was simple
Sci-Fi –> Laboratory –> Business
Aslo a striking point was how Sci-Fi prepared us to be ok with carrying a Android in our pockets.

Better, Stronger, Faster Failures – Nat Torkington taught us the secret weapon that is the strategic failure. The faster you fail (and learn from it) the faster you will win.

And a honarary mention to the other big hitters
Tom Coates – Time Out, the BBC and Yahoo!
Daniel Burka – digg, flickr, twitter and last.fm

And the big masters of modern javascript
John Resig – jquery
Thomas Fuchs – script.aculo.us

2012 Webstock Debrief coming soon…

Your usage data for Telecom NZ at your fingertips.

Requirements:

• iPhone or iPad with iOS3 or greater
• Telecom broadband plan or XT mobile data plan

Application Description:

• Xtra Broadband Usage
• Mobile Prepaid Data Usage

Tips:

• If you are having trouble logging into the application please ensure that you are able to log in to the http://telecom.co.nz/usagemeter (login in the middle of the page).
• When using the Xtra Broadband Usage meter ensure you use your Xtra username and password. Be sure to exclude the @xtra.co.nz part.
• When using the Mobile Data Usage for the first time, you may need to set up your password. To change the one-time password provided go to https://pwm.telecom.co.nz/pwm/private/changepassword which will allow you to set a new password that will be valid for 1 year.
• When using the Mobile Data Usage your account will be locked after 5 unsuccessful tries, wait 60 mins for account to unlock automatically.

Support :

Please read through the tips above and the comment below, if you still have an issue please contact me at wg.apps@gmail.com

Screenshots:

Download:

Enjoy! Oh if you are that way inclined, do shout me a coffee

Today i have finally brushed off the cobwebs of a OSX Dashboard Widget I built a while back just for myself, but after talking to a few people it turns out there are a couple of mac fanboys that were after it, so here.

I present to you my Xtra Broadband Usage Meter widget. It only works on OSX, although i have seen a thing called Kludgets that are suppose to make them work on windows as well, but i have not been able to test that.

Xtra Broadband Usage Meter widget takes your Xtra username and credentials and displays your usage information in a minimalistic candy bar / progress meter.  It also indicates the amount of time remaining until your usage allowance gets reset.

Couple of thank you’s to:
Framework by Troy Dack: tdack.com
Graphics designed by Matthew Robertson see the original
API by yours truly
Data by Telecom New Zealand

Please leave a comment or shout me a coffee if you enjoyed using this widget.

Download : Telecom NZ BB Usage Meter OSX v1.2

Change Log :

• v1.1 – 04 / 07 / 2010 – First Release
• v1.2 – 21 / 07 / 2010 – Update to work with Kludgets

Tips:

• This service is not available for people on the Big Time plans, you will see the 0 MBs Left message.
• If your credentials are incorrect you will see the screen below, please make sure you can log in to the telecom usage meter in the middle of the page.
  

Disclaimer: User data does not get stored by the Xtra Broadband Usage Meter and is only used for the purpose it is intended for retrieving your usage information. This application is not affiliated with or endorsed Telecom NZ. Use this application at your own will, i will not be held responsible for any errors or omissions.

Presenters :

• Amy Hoy @amyhoy
• Thomas Fuchs @thomasfuchs

Sites:

• http://mir.aculo.us
• http://slash7.com/about/

photo credit: Chris Shiflett

A quote from Thomas Fuchs’ site… “You’re using my work every day, even if you’re not aware of it”. Thomas is the author of http://script.aculo.us and working group member of prototype.  Funnily enough williegoosen.com uses mootools, which uses prototype.  Amy has also made some rather cool tweet walls http://twistori.com/ and more recently http://letsfreckle.com/ a time sheeting app.

So I knew there were some tricks, having spent some time with ySlow in the weeks before, but was enlightened by the simple techniques that make a lot of difference.  Amy and Thomas did a great job of tag teaming through a rather dry subject and made it rather interesting, with one of the team walking through the slides and the other answering questions on a chat room style back-channel.

The talk started off with one of the rules being “only fix it if you need to” which i suppose makes a lot of sense. Tweaking performance can be a real fickle business, but if the users aren’t happy you have to fix it quick!

Test, don’t guess. benchmark. Make sure you can quantify the issue before you attempt any fixes so you can measure your improvement.

In some cases it will just be impossible to please your users but there are ways to keep people engaged and let them feel you are not ignoring them, while doing the heavy lifting in the background.

Main areas of focus
Loading -  connecting/spinning wheel, back-end speed, dns, latency * easiest win*.
Rendering - white screen of death, you can see items still loading in the status bar.
Execution - site stops responding after is completely rendered.

But to be honest there were just so many “oooh I should be doing that”, “woops shouldn’t be doing that” moments I will try and capture a bunch of them. Non-techy people can stop reading here.

Do’s

• Simple html = simple dom = faster rendering.
• Use yslow and dommonster to identify issues.
• JS scripts at the bottom of your pages.
• Keep external assets to a minimum.
• Set content expiry time frames correctly in the headers.
• Yuicompressor + gzip to reduce .js .css .html size x5 smaller http://refresh-sf.com/yui/.
• Merge .js files into a single .min.js file see http://getsprockets.org/ and http://dailyjs.com/2010/01/27/pro-practices-1/.
• Reduce image size with http://smush.it 30% size reduction no loss.
• Far future cache-headers (resolve updates issues by replacing with new file names).
• Multiple asset hosts – assets on separate hosts than HTML allows for concurrent downloading.
• Focus on whats important to users, webapps(gmail) focus on executing where as static pages (google search) focus on loading/rendering real fast.
• Only HTML and maybe analytics JS should be load in subsequent loads rest should be cached.

Dont’s

• JS in the middle of a page will block the execution of the whole page until its finished running, and can leave the user looking at an unrendered page.
• 404 requests really hurt.
• Avoid slow external assets \ 3rd party libs.
• Watch out for weight of frameworks, try microframeworks instead see underscore.js and emile.js.
• Frameworks and widgets are frowned upon but if you have to script.aculo.us and jquery were mentioned

Interesting

• Cool animation on how browser renders components does multiple sweeps over content to do the layout see http://en.boose.gr/gecko-reflow/.
• Other open tabs can affect your sites performance or crash the whole browser.
• -webkit-transforms are fast and very cool 2/3d stuff at 30-60fps for used on iphone and some android phones similar in jquery animation would be 5-10 fps.
• If it takes long in real life to do something you could get away with a bit of lag, moving between forms and search should be instant.
• Too many page assets becomes a performance hit conciser 3-5 streams for asset downloads being the default in a browser and will require cueing if more assest are required.
• Dynatrace http://ajax.dynatrace.com/ IE tool for testing page loading.

“Silence of more than four seconds become embarrassing because that implies a breaking of the thread of communication.” RB Miller(1968)

And if the conversations is still not happening after all the tuning, then its time to fake it!

• Perception is critical.
• Tell people how long it will take – visual indication of progress can increase patience up to 5x.
• User should feel like they are heard and their input is being considered.
• Instant reaction even if action takes longer for action to complete.
• Never leave the user bored.

Presenter: John Resig
Twitter: @jeresig
Site: ejohn.org
Lead Developer and creator of jQuery, and a JavaScript Evangelist at Mozilla

photo credit: drewm

Second day of workshops at Webstock 2010 was first time i had a look at jQuery, i have had a play with script.aculo.us and mootools in the past, so jumped at the thought of a workshop with a creator of such a frame work, as they make JavaScript sooo much more bearable, especially for someone with a Java background.

My respect only grew for John as he did a 3 hr live demo of jQuery  and jQuery UI, with only one minor hiccup which he fixed within minutes….. a true JavaScript ninja.

In essence jQuery it looked as simple as this:

• Find object
• Do something with the set

Couple of bits that got me interested:

• Lots of people agree jQuery is awesome, its used by Microsoft, Google, Mozilla, IBM, Amazon, HP, Intel, Ruby on Rails, WordPress, Django
• Selectors uses CSS like syntax
• Good looking, easy to read documentation that has recently been reviewed
• Fails gracefully, if you layer jQuery over and already functioning website
• Big community and plugins(use with care)

My rough notes on the presentation on the points that stood out to me, for the full presentation see the link at the bottom of the page.

Finding things

• CSS Selectors with some special selectors like :first :hidden etc
• jQuery Methods
• Both are methods used for traversing the DOM
• Can be chained together 
  

  $("div").hide().css("color","blue");

• Chained Traversal ( pretty cool )

  $("button")
    .parent().css("border", "3px solid red")
    .siblings().css("border", "3px solid green");

Doing Things

• Manipulation
• Event handling(normally user actions)
• Live Events for current and future elements(ajax)
• Effects .animate ( pretty nice )
• Helpers to load xml,  json or html with ajax

Plugins

• Strong Community
• Recomended ones were
  • jQuery UI
  • Validation
  • Ajax Form
  • jqGrid
  • jQuery Tools
• Themeroller – mechanism to style jQuery UI

Tips

• Write in HTML first then layer jQuery over the top
• Apply your jQuery to a fully functional site, this way if JavaScript fails your site is still fully functional
• “return false” Disables the default old behavior
• With server-side code, add conditional to check it the “ajax” header is present, if so strip off header and footer code and only display id=content, to reduce server traffic
• Look at using jquery off CDN minimised and gziped optimized – on Google’s CDN, if its good enough

As a round up I would definitely consider using jQuery on my next project, as with all frameworks im sure there will be some limitations as this kind of ease of use doesn’t come without trade-offs.

The full presentation can be found here http://ejohn.org/apps/workshop/intro/

Presenter : Chris Shiflett
Twitter: @shiflett
Site: shiflet.org / analog.coop

photo credit: Chris Shiflett

Security is always a hot topic, and in today’s world it’s always good to have a fresh look at web security on the first day of the Webstock 2010 workshops. Chris Shiflett is currently part of a web development co-op Analog and has a keen interest in PHP and web security.  He is also a webstock veteran and author of Essential PHP Security.

At risk of missing any of the important points, please check out the full presentation at the end of my notes.

Fundamentals

• Defense in depth, use all safeguards available, use owasp.org.
• Least privilege, lock the system down as much as possible.
• Least complicated, complexity allows mistakes to happen.

Golden Rule, ok more like a golden acronym – FI EO

• Filter input – ensure any inputs are what you expect and no more.
• Escape output – ensure data going out is not misinterpreted.

List of common exploits

• Cross-Site Scripting – an XSS flaw occurs whenever an application takes user supplied data and sends it to a web browser without first validating or encoding that content. XSS allows attackers to execute script in the victim’s browser which can hijack user sessions, deface web sites and possibly introduce worms.
• Cross-Site Request Forgeries – a CSRF attack forces a logged-on victim’s browser to send a pre-authenticated request to a vulnerable web application, which then forces the victim’s browser to perform a hostile action to the benefit of the attacker. CSRF can be as powerful as the web application that it attacks.
• SQL Injection – injection occurs when user-supplied data is sent to an interpreter as part of a command or query. The attacker’s hostile data tricks the interpreter into executing unintended commands or changing data.
• Session Fixation – attempt to exploit the vulnerability of a system which allows one person to fixate (set) another person’s session identifier.
• Session Hijacking – session tokens are often not properly protected. Attackers compromise passwords, keys, or authentication tokens to assume other users’ identities.
• Email Injection – similar to SQL injection.
• Remote Code Injection – similar to SQL injection.

In a lot of  these attacks it is rather trivial to get the basics right by following the golden acronym FIEO, but all posible defences should be used for defence in depth.  The full presentaion goes into the ways to “Stop It”. Also do your own research to pick up on latest trends.  A rather concise resource was mentioned by @nzrob see www.owasp.org Top 10 vulnerabilities which gives large amount option to protect your application.

The full presentation can be found here,  http://shiflett.org/evolution-of-web-security.pdf.

Tips

• Specify character encoding and make sure it is consistant from front to back end.
• Get users to reconfirm password for important actions like changing password.
• Good understanding of http and session management helps with prevention.
• Keep source code short and concise.  Complexity breeds flaws.
• Human peception can also lead to perceved security breaches – see SmugMug example.
• Host static files on separate subdomain to limit session token exposure.

Final thoughs were around trending of user behaviour to identifying abnormalities and maybe using something like https://panopticlick.eff.org/ for uniquely identifying users from bots.

Chris did an excellent job in presenting the information in an easily ledgible format and good concrete examples. I am gutted I prioritised another talk over his “Security-Centered Design” talk at the Webstock conference but I’ll be sure to catch up on it when the video is available and post the link here if I remember.

Be Safe :)

So Webstock is fun alright, but what do i do for the other 51 weeks of the year.

I need a notebook thats always around and sometimes need to share some silly or serious thoughts.

So henceforth i dub the “My Little Black Book”

photo credit: diekatrin