Code Sydney – a Javascript study group

I’ve done quite a few random side projects using Javascript, but I’ve never learned it “properly”, and I’ve always wanted to. In a nice coincidence, a fellow geek Lucy Bain started a Javascript study group a couple of months ago called Code Sydney, which uses the Odin Project‘s course material – so of course I signed up.

Course Content

I’ve really been enjoying the course so far.  It doesn’t assume previous knowledge about Javascript, so it starts with the basics – variables, functions and jQuery. It then progresses through objects & prototypes, the DOM, events, callbacks, scope, closures, and popular frameworks like jQuery, Angular and Node.

Every week  you have to do some homework reading about a specific topic, e.g. prototypes.  There will also be an accompanying coding project to build, which uses the knowledge you’ve just read about. We start the coding project as a group during the study group meeting, and complete it at home later during the week.  Nobody is teaching the material for the study group, so it’s up to each participant to do their homework.

My contributions so far are on github as source code and demos (disclaimer: there is almost zero CSS effort put into these). The more fun projects so far have been rebuilding games, including snake and tic tac toe.

Format

We meet in the Atlassian office once a week for around 2.5 hours.  There are 2 or 3 tutors each week who’ve generously volunteered their time to help out, answer questions and review code.

The format of each night is roughly:

  • Check in (5 mins). Attendance is recorded as a motivational factor.
  • Demos (15-20 mins). A few people demo their solutions to the previous week’s project, and people can discuss different approaches.
  • Questions & Suggestions (5-10 mins). People have a chance to bring up any additional questions for the tutors, or the tutors can suggest “best practice” recommendations after the demos.
  • Start practical coding problem (up to 2 hours). We start the week’s coding problem in class, and finish the rest of it at home. If you aren’t sure how to approach something, you can ask a tutor.

Things I love about the study group model

  • There’s a set time and place to focus on learning something new, so there’s a natural deadline for you to achieve something by
  • I’ve learned much more than if I tried to do the course by myself
  • I’m seeing progress and building on my knowledge each week, which is rewarding and motivating
  • I’ve met new people
  • I get the chance to ask experienced people questions if I’m unsure about something
  • I’m building up a portfolio of fun projects (minesweeper this week!)
  • It’s much cheaper, and arguably better quality than an official course run by someone getting paid to teach. We discuss a lot of our solutions and get to see the merits of different approaches.
  • Nothing stops you paying it forward – feel free to organise your own study group, using the same material. All you need is a space to meet up.

I’m so excited about the format that I’m thinking about co-starting one for algorithms & data structures, as I’ve wanted a refresher and the ability to think/learn about them in a non-pressured environment. Part of the challenge is finding existing people who are knowledgable and enthusiastic about the subject to be tutors, or whether to run it without tutors. In any case, watch this space 🙂

GovHack 2014

GovHack, held on July 11-13, was a fun experience. It’s been running for many years, but it was the first time I’d been involved, and the format is quite different compared to other hackathons.

Firstly, it’s huge: over a thousand hackers get together in 11 cities around Australia, and the timing is all coordinated so that everyone starts and finishes at the same time, and has access to the same data to play around with.

Secondly, thanks to the help of some really dedicated campaigning by individuals in government, particularly Pia Waugh, there’s a lot of public data that is released which probably wouldn’t see the light of day for years. This year included taxation data, land satellite geo data, a whole collection of images and newspaper articles by the National Archives,  and a load of census data by the Australian Bureau of Statistics, to name a few. The aim is to build something interesting, useful or fun. Details about the data are released around 6 weeks in advance, and a special session is run where the custodians explain the formats, where to find it, and how to access it.

Thirdly, there are actual cash prizes. Lots of them. It pays to be prepared by looking at the data beforehand, and working out what your hack idea might be. Also, the judging is done after the event, and results aren’t announced until weeks later. The public are also encouraged to get in on the act and vote for their favourites.

 

Contrary to my own advice, I turned up on Friday night with no specific plan, and no team members. I was initially curious about doing some kind of map visualisation of the ABS census data using Leaflet’s Choropleth Map tutorial, but none of the data I was interested in had enough granularity (it only went down to state level, whereas I was hoping for postcode or council data at least).

After some quick introductions, our new found team of Keith Ng, David Ma and myself attempted to build something with the NSW Education and Training statistics, which we thought might be fun to show with school boundaries. Unfortunately, we still hadn’t found the boundary data by Saturday, and had also found most of the statistics already published on myschools.edu.au.

So we went back to the drawing board, and decided to try an animated visualisation of public transport movements over the course of a day in Sydney. There is a video to go with our presentation, and the mandatory project page which also contains voting, and the source.  The hack was also featured in this Tech World article about GovHack (woohoo!)

About our hack:

  • Each red dot represents a scheduled departure of a train, bus, ferry or light rail service.
  • We used Leaflet, MapBox and D3 to animate the dots on the map.
  • The dataset is large, and difficult to animate on a single map, so we cut it down to a subset.
  • Unfortunately, the timing isn’t quite right – the lifetime of each dot is longer than it should be, so as the animation goes on there are more red dots on the M2 (for example) than you’d find in real life. However, they all start at the appropriate time of day.

govhack2014

Other hacks I enjoyed from the NSW set:

  • The data-by-region comparator which utilises the National Map and allows non-technical people to drag excel spreadsheets with Geo data onto the map, and visualise it instantly.  Fantastic idea.
  • Money money money by fellow girl geek @pyko, which uses graphs to show ATO statistics on income by sex and region. There’s a very clear visualisation that female earnings peak in their early 30s, while men continue climbing until their late 40s or early 50s. (hello, missed opportunities to get women back into the workforce!)
  • Time Machine, a mobile app to show you nearby historical artifacts using data from the National Archives. Developed by a team of 4 people that included two people still in high school.
  • Show the Gap, highlighting differences between indigenous Australians and the general population in a number of benchmarks including health and employment. It’s a sobering view. Top marks for a very polished video and a cohesive message.

I also very much enjoyed working in Optiver‘s offices over the weekend. The only really disappointing thing was the number of no-shows in Sydney. There was a lot of people who had spent time organising food, encouraging mentors to attend, and donating time and effort, and it was sad to see that go to waste. Other cities didn’t look like they’d had anywhere near the same rate of dropouts, so I would support having to pay for your own tickets next year!

Fun With Public Transport Data

I am a transport nerd, and a map nerd, as evidenced by all the previous hackathons I seem to do involving maps.

Thus, when I discovered that Sydney’s public transport system data is available to download, it seemed only logical that I should involve a map somewhere.  The result is a map to show you where you can live if you want to be within “x” minutes of the city by train. I defined the city to be any of the following stations: Central, Circular Quay, Martin Place, Museum, St James, Town Hall, Wynyard.

transport-maps

There are some unexpected results, because the trains don’t stop at all stations for every journey.

For example:

  • The central corridor supported by T2 inner west line and T1 western line has the best density of minimum times across all stations.
  • Getting to the city from Sutherland or Campbelltown is faster than getting to the city from Hornsby or Pennant Hills.
  • Bondi Junction is a measly 7 minutes away!
  • The fastest train to Glenfield is 14 minutes faster than to its neighbouring station, Macquarie Fields.
  • Eastwood station is just 21 minutes to the city, faster than 3 stations on either side of it.
  • Burwood, Ashfield and Petersham – all on the same line – have almost the same minimum travel time at 10 or 11 minutes.

You can explore the map yourself at http://daphnechong.github.io/transport-maps/.  I’d like to do a lot more on it, such as adding the bus and ferry timetables and identifying the individual lines, but it’s a work in progress. If you have any ideas, I’d love to hear them!

Creating a Music Matrix with the Web Audio API

Last week I stumbled on this Tone Matrix, which uses the Web Audio API to generate and play sounds. I got really interested in the mechanics of sound generation and wondered how they did it, but unfortunately, there’s no source… so I decided to learn more about the Web Audio API, and recreate the matrix as an exercise. The source is available on github.

I’ll be running a tutorial for Women Who Code Sydney in July on how this works, and plan to cover some different filters and effects you can run sound through to get more interesting results (the matrix in its current state is pretty basic). There is more mathematics than I had bargained for, but producing a basic sound doesn’t really require a lot of code.

You’ll need to have a fairly recent version of your browser to play with the demo.

Screen Shot 2014-06-18 at 8.14.51 pm

Things I learned:

  • You can use existing sound sources (existing files, microphone) but also generate a sound wave with an Oscillator.
  • It’s a pipeline. Only one thing should output to your speakers.
  • Each audio buffer note can only be played once. You need to recreate each new note to play.
  • Sometimes there are loud ‘click’ noises as you abruptly change the notes through the speakers. You need to cater for this with some filters, or gain (aka volume control).
  • The API has been in development/experimental phase for quite a while and there’s not a lot of comprehensive documentation available. Most of the learning came from code samples.

Some interesting reading:

Heroku vs Amazon from Australia

I thought this was interesting to share.  I live in Sydney, Australia, and I was looking for relatively easy hosting setup for an Australian audience. I had two options: go with a platform-as-a-service provider like Heroku, or spend more time setting up my own infrastructure with AWS which has a datacentre in Sydney. Azure isn’t available here yet, but it’s coming real soon now(tm).

Both Heroku and AWS offer free tiers, so I didn’t need to shell out any money. I’ve used AWS before, so I figured I’d give Heroku a try.

Heroku

I won’t cover the pros/cons of Heroku as lots of people have already done it, but deploying my first app was really smooth and easy. At the time of writing you can only host in the US (EU is in beta), so I went with the default US option.

When you deploy, your app runs on a unit called a dyno, which is heroku’s equivalent of a server, and your hosting dyno will sleep after an hour of inactivity if you’re on a free tier.   I noticed a lag on page load occasionally when the dyno was waking up, so I threw it in web page test to measure*.

It takes 9 seconds for the user to see anything meaningful on the screen. Ouch.

heroku-summary

heroku-graph

 Amazon Web Services

I decided to try Amazon using their platform-as-a-service, Elastic Beanstalk. You do share underlying architecture when you’re on the free tier, but there’s no concept of your machine ‘sleeping’ like the dyno does.

Once I got the deployment working, it was noticeably faster than Heroku for a cold start.  Time to start rendering is much faster at just under 2 seconds (and reducing that time is my problem now, not the hosting). Here are the comparison graphs.
amazon-summary

amazon-graph

There is a downside, though – hosting with Amazon takes a lot more persistence because their documentation kinda sucks. It’s huge and contradicts itself in different articles, so you aren’t quite of the right thing to do. I followed these instructions to deploy a node.js app and ran into three different issues, one of which was because I’m trying to deploy region which isn’t the default US-East. If I wasn’t already familiar with AWS, I might have given up.

* Technically, I didn’t test from Australia – I used the Wellington, NZ agent in case the Sydney agents were hosted in an Amazon data centre.

Winners of She Hacks 2014!

I was really excited to attend the inaugral SheHacks 2014 hackathon in Sydney, organised by the lovely women from Girl Geeks Sydney – Georgi Knox, Denise Fernandez, Kris Howard, Sera Prince McGill and Peggy Kuo. It was held at Google’s offices in Pyrmont and was a fantastic event! (SheHacks was running in parallel in Melbourne too, so you can check out a rundown of the Melbourne event by Tammy Butow.)

Everyone hard at work

It was the first hackathon for quite a lot of people, and it was great to see people getting involved in an event they might not otherwise attend.  Tickets for the event were sorted into several types:

  • Developers (the majority of the tickets)
  • UX/Designer
  • Non-technical

People were encouraged to form teams of about 5 people – 3 developers, 1 ux person, and one non technical – with the goal that your devs can build, the UX person makes it look amazing, and your non-technical person can coordinate and concentrate on your presentation (following excellent advice laid out by Kris just a month ago on presenting your hackathon project.)

Team Disasterama (minus me)

I was also amazed at the generous catering – pizza, caffeine, snacks, lots of cookies made by team mate Denise, and a decidedly un-male breakfast spread of yoghurt, muesli and fresh-cut fruit!

snacks aplenty

The result? 50 women in 11 teams competed for some great prizes donated by Google, Atlassian, Microsoft and Razorfish. There were some fantastic team hacks presented, and I personally enjoyed:

  • Mini Jobs – finding odd jobs for younger people to do to boost their confidence/skills and earn some pocket money
  • Share the Paw Paw – crowdsourcing locations around your neighbourhood where fruit and vegetables are freely available, or if you have a surplus to give away
  • Coffee Run – formalising coffee rounds in the office, including keeping tabs of who owes who

HOWEVER… our team of Denise Fernandez, Luciana Carrolo, Kim Chatterjee, Anna Zaitsev and myself won first prize with our “Mission Possible” app!! The site is designed to connect volunteers with coordinators to assist with disaster relief. The amazing prezi designed by Anna and Kim describes the idea in detail.

The source code is available on GitHub. The app was designed to be realtime so that volunteers can see up-to-the-minute information about where their help is needed, and in our demo we used two screens to great effect (realtime updates are always a crowd pleaser!). It was written using node, socket.io, handlebars, google maps, twitter bootstrap and a lovely set of custom icons designed by Kim.

A screenshot from our app shows a shaded area where the “disaster” has occurred (an oil spill), and a point which is the muster point for volunteers to go to to help (save the penguins!). Everything updated in real time from a master coordinator, who would add extra muster points and specify numbers of volunteers that should be at each point.

Mission Possible

Our prize was a Nexus 7 tablet and a 3D printed trophy, which was a pink computer.

Hello, computer!

I was pretty happy with the outcome of that! It’s the third hackathon in a year that I’ve participated in and won prizes for.  I really love the energy and creativity that comes out of such an intense situation, and it’s a lot of fun to see what everyone else does in such a short time as well.

Thanks very much to Girl Geek Sydney for a great event!

Save the penguins!

Three days of Haskell

I spent three days up in Brisbane between March 17-19 on a course called “Introduction to Functional Programming using Haskell“.  It was intense!

The course was run by Tony Morris & Mark Hibberd from NICTA, and Katie Miller from Red Hat. It was originally billed as Lambda Ladies, but it turns out there weren’t quite enough ladies to fill the course, so anyone else interested was invited along too.

The course is a bunch of practical exercises. They excluded the standard Haskell library from the project, and we spent time reimplementing first principles, starting with functions involving Lists.  It’s a very hands-on way of learning how Haskell works. The first day covers pattern matching, folding and functional composition, the next couple deals with abstracts on binding & functors, getting towards monads. You spend some time implementing a couple of concrete problems – a string parser, and a problem involving file IO – to see Haskell in practice.

If you’re familiar with functional programming, you’d understand that’s a LOT of material to cover in three days. I would say that the average learning curve went a bit like this:

Screen Shot 2014-03-20 at 4.39.53 PM

However, having a solid understanding of programming concepts (e.g. lambdas) meant that the more complex concepts were a lot easier to pick up (to a degree).  When I was learning functional programming at university, it took me days to reimplement map properly in Haskell!  Earlier this week, it took five minutes.

Getting to your solution for each problem felt a lot like algebraic substitution and refactoring. First, you make it work, and then you refactor constantly to get the most elegant (read: shortest) solution by taking advantage of functional composition.

I was surprised at how much it ended up looking like a normal chained method once you introduce the point notation, aka functional composition, which is something C# looks to have borrowed heavily from when introducing LINQ.

To take the example from the link above,

ghci> map (\xs -> negate (sum (tail xs))) [[1..5],[3..6],[1..7]]  
[-14,-15,-27]

turns into…

ghci> map (negate . sum . tail) [[1..5],[3..6],[1..7]]  
[-14,-15,-27]

I was also surprised just how much of a rush it was to a) have a solution that type checked properly, and b) actually worked.  Haskell felt like an all-or-nothing proposition, where it either compiled and worked, or was otherwise hopelessly broken and gave you a type checked error that was difficult to decipher.  Otherwise, most other programming languages have a more granular feedback loop and are much easier to debug – you can put logging statements in, for example.

The best takeaway of all were these amazing lambda earrings!

Lambda Earrings

Learn You a Haskell is an excellent (and cute, and free) resource for learning Haskell.