It's been almost a year since I launched Code for Australia to garner interest in the project. I've since stopped working on it, but there is a team of people who will be taking charge of the project from now on. Their current website is here: http://codeforaus.org/, but they'll be moving to http://codeforaustralia.org/ once that domain frees up.

When I first began, I was looking to implement Code for Australia in the same vein as Code for America. Code for America started out with projects called fellowships. These were essentially paid internships that got teams of developers usually around 3, to work for participating city governments and complete a software project that could enrich the civic services for people. You can see some of the results of these projects here: http://commons.codeforamerica.org/

The difference between getting Code for America to do these projects and getting contractors to do projects was that Code for America, was that Code for America was focused on open innovation. They utilised open source technologies, and its developers were volunteers, not employees. Furthermore the projects they focused on were civic problems. Problems that affect people living in the city, not necessarily some sort of administrative or business function of the city government. This is a very abridged description of the amazing work that Code for America has done (they do a lot more now), so you read up more about them here: http://codeforamerica.org/

So I started talking to people in Canberra. Went to the various meetups and acquired meetings with various influential people involved in the government tech space. I actually managed to talk Sota Yamashita who wanted to start Code for Japan, and it has started! Now I didn't manage to do a very deep search in Canberra, but I managed get enough information to decide that Code for Australia wouldn't work the same way it could work in Code for America or Code for Europe. The main problem was the concept of government tendering. So the way Australian government agencies get services, is that they release a contract out so that multiple vendors can fairly bid on the project. The vendor with the lowest price balanced with good quality or long term stability would get the contract. One of the people I met told me that it wouldn't be fair for the government to give special preference to an organisation such as Code for Australia. How could they justify that preference, especially when there are small vendors actually competing for jobs? After all, to them Code for Australia would just be another vendor. Another big difference is the the lack of philanthropy (and general startup investment) in Australia, which hinders the progress of non-profit startups compared to the US. I also got the feeling that state and city governments in the US were more independent, allowing them to make their own funding decisions, but I may be just speculating here from an outside observer.

For Code for Australia to start, it wouldn't work from top down, that is fellowships with city governments to mass support like brigades. Instead it needs to go the other way, from grass roots brigades, and work its way up to fellowships which means it would be recognised by the Australia government as an alternative vendor that focuses on a civic goods/services niche.

But I also realised that I didn't want to wrangle with government officials having chats all the time, and I didn't really want to start the grassroots campaign. I wanted to get stuff done. I wanted to build innovative software, and I wanted to help others learn to build innovative software (and in the future hardware) via Polycademy. So I left Code for Australia as just a website stating its intentions.

But a few weeks ago, I learned about CodeforAus, because Pia Waugh blogged about it in the Govhack blog. And the one of the founders of CodeforAus sent a tweet to the Code for Australia twitter profile, asking if we could talk. So we talked and I told him about my experience, and that I'm happy for them to take up the project and the domain name and other profiles, and I would be also happy to join the team to help them promote Code for Australia in Canberra and Sydney.

The current team of Code for Aus is: Alvaro Maz, Dan Groch, Jacob Lindsay, Chris D'Aloisio, and finally me whos not partaking in the internal operations, but helping them wherever I can.

Hopefully projects will be setup all over Australia. There's a lot of civic problems we can address!

Code for Australia's website is finished! Right now it's only front-end with no back-end code. Well there wasn't any need for backend code, although I was playing around with Laravel...

Code for Australia's two main programs are the Cross Disciplinary Innovation Track and Professional Developer Track. The fellows that are part of Code for America and Code for Europe fall into the Professional Developer Track. The reason that Code for Australia includes a different kind of program is because of the synergy between an educational institution (such as Polycademy) and the outcomes that Code for X programs try to achieve. This synergy is essentially the ability to acquire cross disciplinary innovation. Throughout my life, I've always noticed that blue skies innovation comes from a mixing of different ideas and fields, whereas process innovation (like marginal efficiency gains) comes from specialisation in one field. This is echoed by the "Medici Effect" book, you can find it here. Therefore in order to tap into blue skies innovation, Code for Australia's Cross Disciplinary Innovation Track will bring in people who want to technologically innovate the public service(s), with backgrounds outside of software development, and get them to understand web application development through Polycademy. We then go to Government institutions and say that we could provide them with Professional Developer volunteers or Cross Disciplinary Innovators (which could come from their organisation as a training package or externally).

Both of these tracks will achieve Code for Australia's goal of open source governance, but they will do it differently and perhaps with interesting differing results. While Professional Developers may be able to produce applications quickly, these are only marginal improvements to open source governance. In order to truly integrate digital democracy, we need people outside of software development to understand the ramifications of the digital revolution.

Now, onto some code. You may notice that there are some changes compared to the Photoshop mockup. The final website layout will not always look like the Photoshop mockup. This is true primarily because Photoshop mockups are static layouts and there isn't any interactivity that can be coded in. Therefore when it comes to producing via html/css/js, things will look a little different. The Photoshop mockup is just there as a guideline and also to help with image graphic slicing.

I unfortunately did not get a chance to record my progress, I'm currently working on a slow laptop. However there were a couple things that I discovered while creating this layout. Perhaps they will help others who are trying to figure out the same problem.

CSS Negative Margin Overlap Trick

On the photoshop file you may have seen numbers trying to overlap the backgrounds of their own container and the parent container. I knew this was possible in CSS with negative margins, so I scoured the internet for a solution. I couldn't find one, so I did a small test using jsfiddle.

I wanted to have the numbers to be contained within the sections that they were denoting. In order to have extend and overlap onto the parent container, there needed to be a negative margin-top for the 1. The trick was to have the section container to also have a negative margin-top and a positive padding-top to push up the background colour underneath the 1. No need for z-index!

In order to implement it in Twitter Bootstrap with the sections being in rows was a bit more difficult. This was because the Bootstrap's rows were interfering with the negative margins, and we needed them to behave like stacked rows. In order to solve this issue, an even simpler and more cross-browser css solution was needed.

And there it is, all you need is to make the number float:left or right. By making the number float, the browser ignores its size when setting out the flow of the content, and simply assumes it doesn't exist when putting up the section's background. You still a need a negative margin for the number, but the section no longer requires negative margin because the floated element is not counted. I used an inline element as the numbers, but this should work for other applications when you need tag or label for any sectional content. You could even design dates for blog articles to work like this.

Twitter Bootstrap's Row Based Vertical Centering

Twitter's bootstrap is an amazing HTML/CSS/JS framework. It really speeds up the development of the website frontend. However its framework can have confusing results because of all the magic under the hood. So on Photoshop, I wanted to vertically center (and horizontally center) this multilined content in the second section box.

What I was trying to do was vertically center some content inside Bootstrap's row. There are many ways of doing this in CSS and every one of them feels like a hack. Anyhow, I used the table method because it was the most obvious and simple. Here's some pseudo code.

.parent_container {
display:table;
}
.vertically_centered_content {
display:table-cell;
vertical-align:middle;
}

This ends up not working if you use Twitter Bootstrap's row functionality. Basically if you look at the site, the multilined text is in a row with the image of a ballot box to the right. I was using the row functionality in order to make them behave as a row in a big browser and in a small browser they would stack up vertically.

Unfortunately the table method of vertical alignment doesn't work with the rows. Which is sad because sometimes when people want elements aligned up in a row, they also want them to be aligned up vertically.

In order to solve this issue, I had to abandon the row functionality completely. Incidentally the same method that allows vertical align, when combined a few percentages will create a row like functionality anyway.

So there you have an alternative to Twitter Bootstrap's row functionality that allows vertical centering. It even works cross-browser.* You can't see it in the jsfiddle example, but if there is a real image with proper widths and heights and display:block, it will even stack vertically when the screen gets too small.

*(I don't support < IE8.)

Bootstrap Span Centering

If you are using Bootstrap's span to create a responsive width, and you want to center it. Just add this to the container:

.container_with_bootstrap_span_centered{
float: none;
margin: 50px auto;
display: table;
}

Ok I'm done. Next project, more Polyhack events in Canberra and perhaps a Codecademy for PHP.

I've been busy creating the Code for Australia website. I decided to record my 3 hour long Photoshop mockup session, and then create a time lapse video reducing it down to 6:29 minutes. The video is not a tutorial, but you can see some of the processes I go through in order to quickly iterate through the design. You can see it on Youtube below.

My workflow generally starts from wireframing and sketching using pen & paper, this may take a few hours or a few weeks depending on how complex the site/app is. In this case, I'm going for a simple single page web site, as it's purpose currently is to generate interest, and operate like an online brochure or business card when I'm presenting to external stakeholders. I then move to Adobe Photoshop in order create a higher fidelity mockup, the purpose of this stage is to flesh out the drawings into something that is more orderly/colourful. The mockup can also be presented to any potential clients. While it is easier to iterate on paper, it's easier to conceptualise the final design in Photoshop. The final stage in front end development is the prototyping stage in HTML/CSS/JS, which I'll get to in a couple of days.

Here are some of the resources that I used:

• 960 Grid for alignment
• Subtle Patterns for textures and backgrounds
• Kuler for colour selection
• Noun Project for icons

There won't be much back end code as there's no dynamic processes happening yet. When Code for Australia actually launches with various applications, then the site will turn more complex.

Here are some photos of the quickly drawn wireframes. My style of wireframing isn't common, it's more like scribbling. I guess every designer has their own style.

It is difficult to estimate the total amount of time taken to get to here, because I took many breaks in between the wireframing stage. If I had worked on it non-stop, I guess it probably would have taken 5 hours. Stay tuned for the next blog post showing the prototyping stage.

Current stage of the website:

Oh and I believe I should be writing up a newsletter for all those who signed up to the newsletter.