Web Directions South – What Do You Know? Night in Melbourne

Last night Thursday 23rd August 2012, I went along the What Do You Know? event held at The Appartment a great little place I used to frequent when I was working on Exhibition Street.

Earlier this year I was at the Web Directions South Code event, so anything put on the Web Directions South team is great and you should attend. In particular the up coming conference in mid October 2012, Sydney.

So back to Thursday nights event. There were 12 lightning talks, each 5 minutes long, I’ll list them off with links to what was most interesting / their entire presentation.

I wanted to talk about a few that stood out to me, mostly because it’s relevant to what is happening at Picnic Software at the moment.

The 4 presentations that stood out as very relevant to what we’re doing at Picnic Software were:

  • Mark – 5 Simple Things You’ll Forget When You Start a Startup
  • Joel – DevOps for Startups: Tales from the trenches
  • Matt – What the $%&# is UX Design?
  • Will – The User is Drunk

I started off by trying to fit it in to this post, but it ended up longer than I expected so it’s here: How much to scratch your own itch as a Startup?.

Summary of the event with links, in order of appearance:

The State of Our Web Performance Union
John Bristowe, @JohnBristowe

Content being deliver over the web is getting larger faster than bandwidth increases. Aim for performance. Have a look at a data trends httparchive.org

DevOps for Startups: Tales from the trenches
Lucas Chan, @geekylucas

Monitor and be ready for spikes. Uptime is critical. Don’t build what you can rent.

What the $%&# is UX Design?
Matt Magain, @mattymcg

Watch this on YouTube and check out uxmastery.com

A whirlwind tour of D3.js
Tony Milne, @tonymilne

It’s very powerful, check it out d3js.org/

A brief introduction to the Gamepad API
Anette Bergo, @anettebgo

html5rocks.com/en/tutorials/doodles/gamepad/

Getting Sourcey with Javascript
Michael Mifsud, @xzyfer

Source Maps are the future of debugging the web – html5rocks.com/en/tutorials/developertools/sourcemaps/

Startup Myths Debunked
Joel Friedlaender, @jfriedlaender

Named some common myths that are all likely wrong; failure is high e.g. 9 in 10 Startups fail, your idea is worthless, you need venture capital, the only costs are your time.

CSS checkboxes and the ridiculous things you can build with them
Ryan Seddon, @ryanseddon

cssn.in/ja/wdyk2012

50 handy things you’ve never heard of
Charlie Somerville, @charliesome

charlie.bz/presos/50resources/

From zero to superpimp mobile web app using Tres
Julio Cesar Ody, @julio_ody

Julio amazingly wrote some non-trivial JavaScript using Backbone.js and his library:
tres.io

The User is Drunk
Will Dayble, @willdayble

Good UI is ‘not there’, say things twice (icon and words), you can’t beat over the shoulder testing (watching your user).

5 Simple Things You’ll Forget When You Start a Startup
Mark Mansour, @markmansour

Marketing (is critical and not easy), Product (focus on benefits and customers), Promotion (talk to customers), Price (Tiers and known costs for customers), Place (don’t shout at your customers, go find them)

Advertisements

Web Directions Code Melbourne 2012 – Day 2

web-directions-code-logo

After a great 1st day at #WDC12. The small end-of-day-one-party was hosted at LaDiDa, with some booked dinners around Melbourne with some of the locals (which sadly I wasn’t able to attend). None the less we got right into it with an interesting start to day two.

Dmitry Baranovsky
JavaScript: enter the dragon
This was quite an eye opening and scarily entertaining motivational address by Dmitry. The phrase ‘You Suck’ was uttered the right number of times to motivate an audience full of developers to strive to be better at JavaScript, software development in general and even physically fitter.

The forced take away was to be aware of the intricacies of JavaScript by actually reading the language specification PDF link and (annotated here) and to build your own JavaScript six-pack:

  • Types and type coercion
  • Operators + ==
  • Objects and primatives
  • Functions and constructors
  • Closures
  • Prototype

Jed Schmidt
NPM: Node’s personal manservant
For those familiar with the .NET world, Jed is a Hanselman grade presenter, with great delivery of a comedy element to deliver a presentation as funny as it is educational. Jed introduced many concepts around package management for node (NPM) he built a small demonstration framework to walk us through various concepts, the readme file contains a complete list of everything he covered.

dinkumizer

Jared Wyles
Removing the gag from your browser
Jared delivered a very usefully technical presentation around effectively using the Chrome Developer Tools to trouble shoot, analyse and track site performance. The most important take away was being aware of all the network timing elements for your site when it’s served to a user for the first time, and ensuring items are cached correctly for subsequent visits. He covered using the memory and CPU snapshot and measurement tools to trace any memory leaks and code inefficiencies in particular around interrogating/traversing the dom.

Anette Bergo
Truthiness, falsiness, and other JavaScript gotchas
Anette took the audience through some of the stranger parts of the JavaScript language where it’s likely anyone who hasn’t experienced any of those particular bug prone approaches may run in to trouble. Some key ones to be wary of that you may expect to not really cause problems were:

  • ParseInt()
  • Operators and coercion

Damon Oehlman
The main event: beyond event listeners.
Damon gave us an introduction to eve – an eventing library, just check it out.

Mark Dalgleish
Getting closure
Mark covered “Immediately Invoked Function Expressions” and some of the benefits like protecting against unwanted global variables, and ensuring scope, along with explaining the closure concept. His detailed slides are up on his blog.

Ryan Seddon
Debugging secrets for lazy developers
Ryan‘s theme was automation, get as much of your repeatable tasks scripted. He walked through using headless browsers via Travis-CI, but reminded us that will only get you so far you need to test in real browsers too. An exciting little project of his is a port of the Yahoo Yeti tool, to work without the YUI test runner, his is called Bunyip and should be available soon.

Tony Milne
Party like it’s 1999, write JavaScript like it’s 2012!
Tony covered an issue with dependencies in JavaScript when your chain of references gets larger, and how ideally the responsibility to link required JavaScript files should exist in a better place than just the html files. He mentioned Require.js is great for in browser use, but the really great ones exist for server side JS.

Tony Milne 2012 style JS

Tim Oxley
Clientside templates for reactive UI
Tim was a another entertaining presenter with some choice phrases to compare and contrast developers he admires and frameworks that support development of thick-clients. Tim had a sweet spot for 3 templating frameworks Dot, Jade and Handlebars.js (where Handlebars > Hogan > Mustache )

Rob Hawkes
HTML5 technologies and game development

Rob stole the show in terms of general inspiration and being uplifting with his love of games and how it helps build better online experiences in particular in browser technologies. The vision he presented was a world where the browser platform, in particular on mobiles extended the gaming experience from the desktop world instead of only partially emulating it. Rob mentioned a few interesting APIs/concepts/products worth checking out like; WebWorkers and PointerLockAPI and TinkerCAD. Rob works for Mozilla the not-for-profit software foundation that gets so much amazing stuff done with only 600 employees only half of which are developers, so if you want to see what’s coming up check out Firefox Aurora, or what’s being worked on right now Firefox Nightly and if you want to get in touch with anyone at Mozilla find them on IRC.

The conference wrapped up at The Carlton down Bourke Street in an awesome after party where beer fueled discussions could run rampart.

Web Directions Code Melbourne 2012 – Day 1

I spent today (23rd May 2012) at Web Directions Code first time attendee of the Web Directions conferences, and this is the first Web Directions Code (at least in Australia or Melbourne).

web-directions-code-logo

It was a great day, a combination of great speakers, face chocolates (see below) and a single track taking out the stress of selecting which presentation to go and see. It’s a 2 day event so I’m quite excited to be going back tomorrow. (Here’s my Day 2 wrap up).

Face Chocolates & Eat Play Code

Faruk Ates
The Web’s 3rd Decade

Key take-away is this slide, with the important message being better tools are clearly what’s missing right now that’s making web development not productive as it should be, we should be further along in terms of getting more of the basics done. This comes about from achieving the other 2 items – more involvement along with making it clearer how to use and integrate existing frameworks and or tool sets.

Dave Johnson
Device APIs: closing the gap between native and web

Dave spoke about technical challenges in building PhoneGap. The most challenging being those around; security, sand-boxing, privacy permissions, and performance. Basically its hard work, many devices many lacking features, in particular around new HTML based video and audio.

Damon Oehlman
HTML5 Messaging

Damon covered off a lot of technical details around messaging in HTML 5, listing two main types: ‘Post Messaging’ and ‘Channel Messaging’ stating that post messaging is simpler to get going with. He went further to discuss web-sockets and some example frameworks like Socket.IO and Sock.js. He demonstrated posting messages via his presentation and created a web socket connection to twitter to receive messages as soon as they arrived at twitter. Then briefly touching on Web Intents.

Andrew Fisher
Getting all touch feeling with the mobile web

Walked us through the basics of touch, with some nice demonstrations and a walk-through of how common touch mechanics we’re all familiar with work.

Silvia Pfeiffer
Implementing video conferencing in HTML5

Had a very impressive setup of some node.js server logic coordinating 2 browsers connecting to each other to perform a video conferencing call on stage between her and the audience.

Anson Parker
The HTML5 History API: PushState or bust

Gave us a neat little round up of the History API and how it works, Anson took the opportunity to remind us that companies like twitter with their hash-bang urls are breaking the expected behaviour of the web. He gave an example of how much data is delivered regardless if you’re requesting to view a single 140k tweet versus their tweet stream (typically paged at 10-20 tweets). He wrapped up with a cool demonstration of a site he’s in the process of building, that looks very promising kahzu.com

excessive twitter download

Tammy Butow
Fantastic forms for mobile web

Tammy walked us through the basics of building suitable input forms for mobile devices, taking advantages of types such as ‘tel’ to bring up only the numeric keypad for input, all the tips are up on slide share.

Max Wheeler
Drag and drop and give me twenty
Walked the audience through drag and drop concepts.

John Allsop
Getting off(line)

John overwhelmed with a flood of information about the complexities and pitfalls of working with appcache. He walked us through sessionStorage and localStorage and the tradeoffs of what you can store, how much space is available, and security concerns (in particular when browsers crash). He covered a great deal so here’s a link to an older version of his presentation from a previous web direction conference (I’ll update with a new one when I find it).

Developing with AppCache

Divya Manain
Designing in the browser

Divya made a very clear and strong case for having a process that involves designers writing code, and building prototypes sooner rather than later (or not at all). Advocating moving from very initial rough paper sketches straight to prototyping using a fair few useful tools (note this is still rough notes, I’ll follow each up and link directly).

Tools / resources for prototyping

designing in the browser

To top off a great day we got a gift each from Blackberry a PlayBook.

blackberry playbook

One last thing the graphic of the day to get the most reaction (excluding courage wolf ones).

eating clag

A trivial message loop using RabbitMQ in C#.NET

During the May 2011 meeting of the Melbourne ALT.NET group, 3 presenters each with their chosen functional language tackled a basic problem of transmitting a message along a chain, with the objective of all nodes contributing to a final output. Here’s some of their code in the the languages of; Erlang, Scala and F#.

As an introductory post to RabbitMQ for my blog I thought I would cover how you go about setting up a simple RabbitMQ server-client in an asynchronous fashion. In this post I’m only going to cover the abstract concept and introduce some terms, I’ll go into more specific detail in another post as to the technical details of using RabbitMQ. I presented this concept as a very quick 10 minute lightning talk at DDD Melbourne 2011.

So stay tuned for more RabbitMQ based posts (links will appear here when they’re complete).

The objective:

  1. Start with a message that contains a letter ‘A’
  2. Send this message off to a node (N)
  3. Have that node increment the letter, e.g. first node makes it ‘B’
  4. Then that node sends it off, and so on looping for M number of messages.

A Node:

Node Structure

The Algorithm:
My RabbitMQ and C# based solution (simplest version), this list will contain some RabbitMQ specific concepts that I’ll describe later in the post. This is the algorithm to create, wire up and kick off processing.

  1. Create the N clients SimpleRpcClient.
  2. Keep a reference to the 1st client, this is what we use to begin messaging.
  3. Create N Subscription elements.
  4. Create N SimpleRpcServer elements these are the actual nodes.
  5. Supply the second client onwards and subscibtion to the node
  6. Create a new Threading.Tasks.Task() for each node.
  7. To complete the loop, wire up the first client, to the last node.

Node Communication (click for larger view):
Each node, houses a client to continue on sending the message.

Node Communication

The Code:

IConnection connection;
IModel model;

char[] letters; //A-Z, repeating
for (x = 0; x < totalToCreate; x++)
{
    var nextLetter = letters[x];
    //this builds up a string in the format of comm.0.a, comm.0.b, etc
    var exchange = String.Format("comm.{0}.{1}", x, nextLetter); 
    model.ExchangeDeclare(exchange, ExchangeType.Direct);
    var queueName = model.EnsureQueue(exchange);
    subscriptions.Add(new Subscription(model, queueName));

    clients.Add(new SimpleRpcClient(model, queueName));
}

for (x = 0; x < totalToCreate; x++)
{
    //note the use of [x+1] on the clients, 
    server = new SimpleRpcServer(subscriptions[x], clients[x-1]);

    new Task(server.MainLoop).Start(); //MainLoop is a RabbitMQ concept
}

//Inside RpcServer
public override void HandleSimpleCast(bool isRedelivered, IBasicProperties requestProperties, byte[] body)
{
    var messageToSend = body.Deserialize().IncrementLetter();

    rpcClient.Cast(new BasicProperties(), messageToSend);
}

The code above had been simplified a bit more just to demonstrate the concept, please review the project code for further intricacies in it how it needs to operate.

Working demo code on BitBucket – https://bitbucket.org/NickJosevski/rabbitloop

*Note: you’ll have to excuse some of the roughness of the code as it stands at 29th of May, I haven’t had a chance to refactor it to be more elegant.

There is a long list of RabbitMQ concepts that are beyond the scope of this blog post, a new one will follow soon with my explanations of how they work:

  • IConnection
  • IModel
  • QueueHelper.EnsureQueue()
  • HandleSimpleCast
  • rpcClient.Cast()
  • Subscription
  • ExchangeDeclare()

Also check back I may have completed a Prezi on the subject.

REMIX Melbourne 2010 Day 2

Kicking off Day 2. See the Day 1 post here.

Session 1
Web development with Visual Studio 2010 & ASP.NET 4
Alex Mackey

alex multi targetting

My day 2 began with Alex running through a cavalcade of improvements in Visual Studio 2010 and ASP.NET 4. These have been covered in great detail all over the place, but it is still nice to have them presented and demonstrated live allowing for feedback and questions.

Alex focussed on JavaScript and deployment general tips, along with touching on other areas.

I won’t cover off all the tips and tricks that Alex covered here, I’ll just link off to a good resource which is Scott Gu’s series on this.

Session 2
Riding the Geolocation Wave
Tatham Oddie

Tatham Geolocation

This was a great session, I hadn’t thought about the possibilities of geolocation to improve application experience. Tatham introduced the concepts and then demonstrated a simple pizza delivery application that tapped into the users current location (with their consent) to pre-seed a location aware list of options. The good news is that Windows 7 has geolocation support built in. We’ve already been using services on devices such as iPhone that use the assisted-gps (A-GPS) to tag things such as tweets with your location, drop a marker on Google maps with your current location and offer directions.

For resources and more information see Tatham’s blog post here.

Session 3
The future of exposing, visualising and interacting with data on the web.
Graham Elliot

Graham throwing punches

In this session OData was introduced in more detail to the REMIX audience. I’m covering off the basics of OData in a series myself so go check that out here.

The most audience pleasing concept demonstrated was the use of the awesome Microsoft Labs – Pivot available at GetPivot.com. It is a visual data interaction tool. To save me from failing to do it justice in a few lines of text, check out this 5 minute TED 2010 video presented by Gary Flake on Pivot.

Lunch & Live Frankly Speaking
Taping of Frankly Speaking
Michael Kordahi, Andrew Coates and guests.

Frankly Speaking

The REMIX audience during lunch got to be the live studio audience for a taping of Frankly Speaking. I’ll post a link to the episode here when it’s up.

Note the donkey is a reference to “taking the donkey work out of installation” – promoting the Web Platform Installer for Windows. It’s very handy check it out.

Labs
I didn’t end up going to any of the session in the slots 4 & 5. I joined a few colleagues in the labs.

remix labs

The first lab I attended was the XNA development introduction for Windows Phone 7. The lab was run by Luke Drumm (@lzcd) and Glenn Wilson (@myker). Glenn runs a blog focussed on this kind of development – virtualrealm.com.au

The second lab I attended was run by Steven Nagy, and was intended to get us configuring Azure AppFabric but some major hiccups like not having the lab PCs setup with internet access and some other mis-configured components prevented us from following along. None-the-less the lab ended up just being a discussion extension from Day 1s presentation on Azure. Several people had a lot of questions about actual deployment, from SLAs to locations to security.

Session 6
Pimp My App
Shane Morris

shanemo design tips

With the event coming to a close, it was nice to sit back and listen to the talented Shane Morris of Automatic Studio (former MS UX Guy) giving some basic design tips for developers to follow to ensure apps don’t suffer due to lack of professional designer input. There were 2 cool links to colour scheme assisting sites; kuler and Colour Lovers

There was a fair bit of discussion, analysis and reasoning provided by Shane, so I’ll just list out the conclusion slides.

Layout Steps:

  1. Map out the workflow.
  2. List your contents.
  3. Layout elements.
  4. Check grouping.

Presentation Steps:

  1. Remove unnecessary items.
  2. Minimise variation.
  3. Line stuff up.
  4. Space and size components evenly.
  5. Indicate grouping.
  6. Adjust visual weight.

Final Summary
All-in-all REMIX was a great 2 day event, and for the early bird price of < $200 was a bargain, when you factored in all you can drink coffee, buffet lunches and after party. Having already published my brief summary, all I can say here is that if you have the opportunity to attend REMIX, take it.

REMIX Melbourne 2010 Day 1

Keynote
Michael Kordahi, Foxtel (Patrick Delany), Shane Morris & Others

remix keynote

The keynote began with a presentation from Foxtel about improving the “dumb box” that’s plugged into your TV. Foxtel through a partnership with XBOX Live (and Microsoft) is attempting improve the user experience in the home when it comes to pay-television. They are following the “three screen and the cloud” strategy that Microsoft is currently engaged in.

This lead into a demo of using the Microsoft Surface to interact with various Foxtel services. The objective being that the Microsoft Surface can be one of the three screens. A more social experience to support discussion and digital interaction between people (once the Surface less financially inhibitive). The demo consisted of an application that allowed for interaction between a Windows Phone 7 device, the Surface and a slate like device, where-as the device would detect proximity/engagement in another digital activity (in this case watching Foxtel). Then subsequent devices (the slate) would offer to assist in the interaction, by offering supporting information, show/character information, maps of locations and other rich interactions.

The second half of the keynote was a few short introductory sessions on;

  • IE9 – Features/demos and road-map.
  • Expression Blend – Some new features in 4.
  • User eXperience – Sneak peak at Shane’s session.
  • Microsoft Live Labs Pivot – Introducing OData.
  • Windows Phone 7 – The developer experience.

Summary line: The objective is to create an ongoing journey on the web (and not be focussed simply on destinations).

Session 1
“The Microsoft & jQuery story & the new templating plugin”
James Senior

James Senior First Date

James started talking about the focus shift of Microsoft towards open source projects and how they are contributing to jQuery (this was announced at Mix in March 2010). This came about from the ASP.NET Ajax library that MS was working was a prime candidate for integration with jQuery (through contribution). James had a great story about John Resig “assisting him” with some code, John achieved this by first doing a select all followed by hitting the delete key then refactoring from memory, James was amazed.

From this there were some tips for “good relationships” in terms of contributing to software:

  1. Clear contribution model.
  2. Open, transparent, collaboration.
  3. Community spirit.
  4. Specification and proposal.
  5. Prototypes.

The rest of the session was focussed on using Visual Studio 2010 to assist with JavaScript. James outlined how VS2010 compiles the JavaScript dynamically on the fly to offer intellisense. This was done through (the very popular for demos approach) of implement a Twitter search application. In relation to this James suggested we check out; Hootsuite – a based twitter client. Also to stay away from global trending topics on twitter 😉

The use of the twitter search demo application was focussed in particular to demonstrate the initial contribution Microsoft is undertaking for jQuery – Templating. Which is a feature to assist with displaying/rendering data from a source, via a new render() method.

James had a plug for Microsoft Web Camps, and from what he had to say about it, if there’s one near you attend if you can, it’s free. After the US summer there’s plans for more around the world…

Session 2
DotNetNuke: From opensource to VC funded corporation
Philip Beadle

phil and the pie

This was a very different session that the usual one (and in a good way). Phil gave some insights into the history and how it relates to his adventure with DotNetNuke. It started as early as 2001,2002 as an open source CMS. A few years ago had grown a company paying 7 employees offering support and other services in relation to DNN. It has in the present day reached around 40 paid employees after a few rounds of venture capital funding and is a fully fledged company. Phil had some advice for “getting paid in open source”, this was a general topic and in response to a direction question. Phil’s discussion was along the lines of; ensure the “pie” is large enough so that your piece is as good as having a whole pie… The rationale behind this was, if it’s a large pie with lots of contributors the burden on the individual is less when compared to being responsible alone for an entire pie.

Phil shed some insights from his extensive experience; these are the key takeaways for a successful open source product:

  • Need a good dedicated thick skinned leader.
  • Protection of code and community is essential.
  • Communication is key.
  • Recognition for those that help and further engage/promote (give kudos).
  • Documentation is necessary.
  • Always offer an upgrade path for users of your product.

Session 3
Architecting for the Cloud
Steven Nagy

snagy

Steve after introducing Windows Azure, focussed on some real world case studies of companies making use of the cloud, in particular the Azure platform to grow and improve their business.

Case studies:

  • Company: Connect2Filed. Service: job/customer/billing management internal Software as a Service.
  • Company: CaterExpress. Service: foodstorm. Software as a Service customer and food management application.
  • Company: Buzz number (BizSpark start-up). Product: blogosaur.us – sophisticated blogging search engine / aggregator

Scaling considerations, typically 4 types

  • On/off (typical business hours, localised to only a few timezones).
  • Grow fast (startup).
  • Unpredictable (slashdotted).
  • Predictable (peak times of year).

Takeaways about Azure as a hosting platform

  • Potentially cheaper.
  • Easier (helpful for a start-up).
  • Less risk (redundancy taken care of for you – 3 factor redundancy).
  • Scalable.

Session 4
ASP.NET MVC 2
Malcolm Sheridan

malcolm head down

Malcolm ran through an MVC 2 demo application, focussing on:

  • Strongly typed helpers.
  • Templated helpers.
  • Metadata classes (and validation).
  • Areas (areas in different projects is available in the ASP.NET MVC futures).
  • Security (via auto html encoding – “&lt%:” and MvcHtmlString as the return type for helpers).
  • Improved RESTful approach (via HttpMethodOverride eg [HttpDelete]).
  • DefaultValueAttribute.
  • Shortened HTTP verbs.
  • ChildActionOnly actions.

I’ve scattered some links throughout the list above, check out those references.

Also checkout this white paper on what’s new in ASP.NET MVC 2.

REMIX 2010 – Melbourne – Share the Web Love

This week on Tuesday & Wednesday (1st & 2nd) of June. I’ll be attending REMIX 10. #auremix on Twitter. It’s being hosted at Crown.

remix 2010 melbourne

I haven’t finalised my session choices yet. I’ll update this post with what I attended. Along with some quick summaries of “Key Takeaways” as a Day 1 summary and a Day 2 summary.

I’ve setup a new Flickr account to upload photos I take. I’ll try and take a reasonable amount of shots. If by any chance you like any of the shots feel free to use them. Find it here: flickr.com/photos/confnick/.