Jono Cooper

Building the Apple Maps drawer with CSS

2026-03-20T09:00:00Z

I’ve always really liked how Apple Maps works on iPhone. There’s a persistent drawer on the screen that allows you to toggle between the map, place information, or view both at the same time. It’s a really good multitasking user experience, and this same pattern is used in a few other iOS apps such as Music & Find My.

While Google Maps also ships something similar, it’s not as consistent as Apple’s implementation. In Google Maps, the drawer design changes depending on what you tap on, and the app loses its place if you move the map. It’s almost like you can feel the many different teams working on Google Maps and they’ve all implemented their UI slightly differently.

I’ve implemented something similar in the past in Waka, but it was quite complicated due to fewer CSS features available at the time. It used a lot of JavaScript to handle gestures and animations, but today we can build the same thing without almost no JS at all.

How does the Drawer UI work? #

Note: I’m using pre iOS 26 screenshots, as they demonstrate these states better.

The drawer has three primary states. The first state is when the drawer is fully collapsed. The map can be interacted with, and only the header of the drawer is visible. You can drag the drawer header to move to one of the other states.

The second state is when both the map & drawer are visible. Both the map and drawer content can be interacted with. However, scrolling the drawer content will move the entire drawer to either the fully expanded or fully collapsed state.

The final state is a fully visible drawer, with only a small portion of the map visible and not intractable. When scrolling the drawer content, the header stays sticky so the drawer can be collapsed without scrolling to the top. Scrolling past the top of the drawer content will close the drawer.

Back & forward navigation is also represented through animation. Navigating forward to a new page triggers a new drawer to transition in from the bottom of the screen covering the existing drawer. Navigating back runs the animation in reverse, while in-place navigation does not trigger an animation.

1. Using CSS scroll snap to create a drawer #

First, we’ll start with some HTML. We define an area for the map, the drawer header & content, and a few elements to wrap things all together.

To keep things simple for this example, we’ll just use a scrollable image to substitute for our map, rather than bringing in Mapbox or a similar library.

<main>
  <div class="screen-top"></div>
    <section class="main-wrapper">
      <div class="main-content">
        Your map or other content
      </div>
    </section>
    <div class="drawer">
      <header class="drawer-header">
        <div>
          <h1>East West Line</h1>
          <p>Manukau to Swanson</p>
        </div>
      </header>
      <section class="drawer-wrapper">      
        <div class="drawer-content">
          The East West line runs every 7 minutes during peak times, and at 15 minute intervals all other times.
        </div>
      </section>
    </div>
  </main>

To get this started, we set snapping to be mandatory on the html element, and define three different snap points.

On our .screen-top element. This is at the very top of the screen, so our drawer will be completely collapsed (--collapsed-height).
On the .drawer-header. This has scroll-margin-top set, so it snaps 18rem from the bottom of the screen.
On the .drawer-wrapper. This is our fully expanded view, with the drawer header at the top of the screen. We need to use scroll-margin-top again to account for the header.

html {
  scroll-snap-type: y mandatory;
}
:root {
  --screen-height: 100svh;
  --drawer-top-margin: 2rem;
  --drawer-midpoint: 18rem;
  --collapsed-height: 4rem;
}
.screen-top {
  scroll-snap-align: start;
}
.main-wrapper {
  /* we don't want the map to move when the drawer is moved up/down */
  position: sticky;
  top: 0;
  z-index: 0;
  height: var(--screen-height);
}
.drawer {
  z-index: 2;
  position: relative;
}
.drawer-header {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  scroll-margin-top: calc(var(--screen-height) - var(--drawer-midpoint));

  /* we overlay the drawer on the map, so we can use border-radius */
  margin-top: calc(var(--collapsed-height) * -1);
  height: var(--collapsed-height);
}
.drawer-wrapper {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  scroll-margin-top: var(--collapsed-height);
}

Putting it all together (and with a few extra visual styles), we end up with something that looks like this. It is starting to take shape!

Open in new tab

2. Scroll Driven Animations #

While this is looking close to the desired UI, there are a few issues. Firstly, in our fully expanded state, scrolling further should maintain a sticky header at the top of the drawer. While we can use position: sticky, we still want the map to remain a little visible at the top of the drawer. If we use a value that is greater than top: 0, the content will pop out the top of the sticky header and over our map.

To fix this, we need to introduce another scrollable container. We set a height on the drawer wrapper, and allow the content to scroll.

.drawer-wrapper {
  height: calc(100dvh - var(--collapsed-height) - var(--drawer-top-margin));
}

.drawer-content {
  overflow-y: scroll;
  height: 100%;
}

While this fixes the fully expanded state, the partially expanded state now has the content scrolling independently of the drawer. We need to disable scrolling of this container unless the drawer is fully expanded.

In the past, we may have used something like the IntersectionObserver JS API to control this, but we can now use CSS scroll driven animations to do this without any JavaScript.

html {
  scroll-timeline: --page-scroll block;
  scrollbar-width: none;
  overscroll-behavior: none;
}
@keyframes drawer-content {
  0% { overflow-y: hidden; }
  99% { overflow-y: hidden; }
  100% { overflow-y: scroll; }
}
.drawer-content {
  animation: drawer-content auto linear;
  animation-timeline: --page-scroll;
}

To polish this off, we can also use this same scroll-timeline to slightly dim the map and disable interactivity when the drawer is fully expanded.

@keyframes main-scroll-opacity {
  0% { opacity: 1; }
  90% { opacity: 1; }
  100% {
    opacity: 0.7;
    pointer-events: none;
  }
}
.main-content {
  animation: main-scroll-opacity auto linear;
  animation-timeline: --page-scroll;
}

And after inserting a scrollable image to use as a map, we’ve got a drawer that works in a similar fashion to Apple Maps. Now we just need to animate it.

Compatibility: At time of writing, CSS scroll driven animations are not supported in Firefox. On iPhone, you’ll need to be on at least iOS 26.

Open in new tab

3. CSS View Transitions #

While there’s plenty of JS animation frameworks, we can now use CSS View Transitions to handle our navigation animations. This is reasonably straightforward: we give our .drawer a view-transition-name and define a couple of animations using the view transition psuedo classes.

Because the drawer has three different heights, we also need to account for this with some variables and another scroll driven animation.

@view-transition {
  navigation: auto;
}
@keyframes drawer-height {
  0% { --current-drawer-height: var(--collapsed-height); }
  /* variable values are discrete, so we don't need to be accurate with our percentages */
  10% { --current-drawer-height: var(--drawer-midpoint); }
  100% { --current-drawer-height: calc(100dvh - var(--drawer-top-margin)); }
}
html {
  animation: drawer-height auto linear;
  animation-timeline: --page-scroll;
}
@keyframes slide-drawer-in {
  0% { transform: translateY(var(--current-drawer-height)); }
  100% { transform: translateY(0); }
}
@keyframes fade-drawer {
  0% { filter: brightness(1); }
  100% { filter: brightness(0.95); }
}
::view-transition-new(drawer) {
  animation: 350ms ease slide-drawer-in;
}
::view-transition-old(drawer) {
  animation: 300ms ease fade-drawer;
  filter: brightness(0.95);
}
.drawer {
  view-transition-name: drawer;
}

Because we’re using cross document view transitions (i.e navigating to another page), the drawer will collapse upon navigation. We’ll need to add a tiny bit of JavaScript to maintain the scroll position. If you’re using this in a single page app with document.startViewTranstion, you won’t need this code.

If the user hits the back button, the animation looks a little weird. We’ll need to reverse it on backward navigation. To do this, we also need to add a little bit of JavaScript to add a backward view transition type, and some extra CSS for the reverse animation.

window.addEventListener('pageswap', () => {
  sessionStorage.setItem('scrollTop', document.body.parentElement.scrollTop)
})

window.addEventListener('pagereveal', () => {
  // restore scroll height when navigating between pages
  const oldScrollHeight = parseInt(sessionStorage.getItem('scrollTop') || '300')
  document.body.parentElement.scrollTop = oldScrollHeight
  
  // detects if the back button is pressed
  if (!viewTransition) return // not supported
  const { navigationType, entry, from } = navigation.activation
  const isBackward = navigationType === 'traverse' && entry.index < from.index
  if (isBackward) viewTransition.types.add('backward')
})

html:active-view-transition-type(backward) {
  &::view-transition-new(drawer) {    
    animation: 300ms ease fade-drawer reverse;
    z-index: 2;
  }
  &::view-transition-old(drawer) {
    animation: 350ms ease slide-drawer-in reverse;
    transform: translateY(var(--current-drawer-height));
    filter: none;
    z-index: 3;
  }
}

And after a bit of styling, this is the final product!

NB: If you hit the close button too many times, it’ll navigate you away from this blog post. Scroll restoration of the image is also not handled in this example.

Open in new tab

Notes #

We’re a little limited with some features that CSS provides, so this not a perfect replica. I would love to adjust the scroll snap speed, but there isn’t currently a way to do that. While it does work with a mouse, it is optimized for touch screens. It may be worth adding in some JavaScript to aid mouse users, and to adjust the layout to a two column design on larger screens.

It’s also worth mentioning that using backdrop-filter: blur(x) for a transparent blur effect (before iOS moved to Liquid Glass) is currently a bit glitchy with view transitions, so this demo avoids transparency.

This is also a little glitchy in different ways on both iOS and Android when not running in an iframe (due to dynamic toolbars on mobile). The easiest way around this is probably to disable scrolling on the html element and make main a scrollable container, adjusting CSS rules accordingly. The mobile browsers will always have toolbars present, but it should avoid weird layout reflows.

Other than that, I’m happy with how this turned out and I will probably implement it in some of my projects. Feel free to use it in your own!

Autumn in the UK

2026-02-28T12:00:00Z

After visiting Greece, we also went for a roadtrip in the UK. We visited in Autumn, which was really nice with all the different colours. Definitely a bit colder than other places in Europe, but still a great time to visit.

Edinburgh #

Edinburgh is the most visited city in the UK after London, and it’s easy to see why. The city has really unique neo-classical architecture, and it’s a very nice place to walk around. Just make sure to book in advance: accommodation was more expensive than any other city we’ve been to.

Scottish Highlands #

After Edinburgh, we headed to the highlands. It’s a place that is really dense with different vistas and you don’t have to travel far to see a completely different landscape.

We made lots of stops along the way, but there were a few places that stood out:

Perth Museum: A very good small museum, with interesting displays including the Stone of Scone, and a cloak made from kākāpō feathers.
Fairy Pools: Easy walk along a series of waterfalls and pools in the mountains. You can even go for a swim if you’re brave.
Pollock Country Park: While you’ll probably see the Highland Coos on the road, this is a great place to see them up close.

We didn’t make it to the Quiraing as we ran out of time, but I’ve heard it’s worth visiting if you’re on the Isle of Skye.

Lake District & York #

Having grown up in a different lakes district, the Lake District in the UK did feel a little familiar. However, it is still very pretty, and there’s many more little towns and places to stop off in comparison to NZ. The hotel we stayed at was right on Lake Windermere, and was honestly stunning.

York was also neat to visit. It’s a very well preserved medieval city, and you can walk along the old city walls. I also really recommend visiting the National Railway Museum there. It’s newly renovated and has a huge selection of different trains and railway paraphernalia, even including a 0 Series Shinkansen.

Wales #

We also spent some time in the north west and south coasts of Wales. Lots of castles and mountains, but also lots of rain. I really liked the Conwy Castle as it felt very quintessential sitting across from a river, complete with suspension bridge. The town of Conwy nearby is also very cool, and still has medieval town walls intact.

Bristol & Bath #

Bristol seemed fine. It seems like it would be a nice enough place to live, but it’s not a super interesting travel destination. Bath is a good day trip and quite a pretty town, but probably more enjoyable if you’re interested in Roman history.

Oxford #

Oxford has got to be most the most photogenic city in the UK. The town is dominated by the university and the beautiful buildings that make up the campus. My highlight was visiting the Oxford University Museum of Natural History & Pitt Rivers Museum (just out the back). Walking inside feels like being transported back to the Victorian era, and the displays really invoke a sense of discovery.

If you have more than a few days in London, I would definitely do a day trip to Oxford as the journey is only around an hour each way.

London #

After driving around for two weeks, we dropped the car off in London. I had visited around 10 years ago, so it was a bit surprising to see how much the place hasn’t changed. While it’s a city that does a great job at combining the traditional & modern, it seemed like there were relatively few new additions, especially when compared to other cities such as New York, Singapore, or Sydney.

However, the new Elizabeth Line is great. They should really build another new one.

Driving in the UK #

Despite having invented trains and having great rail coverage, traveling by rail in the UK is ridiculously expensive. A car is much cheaper: it cost about £400 to rent a car for two weeks, including the one way fee from Edinburgh to London. We didn’t encounter any toll roads on our trip.

We only ending up taking one train in the UK: the Southern from London to Gatwick Airport. For a 30 minute trip, it was TWENTY ONE GREAT BRITISH POUNDS per person.

So yeah, I would recommend hiring a car. It’s easy enough to drive in UK, and other people are generally considerate drivers. Only real things to worry about are some of the narrow lanes, road markings that haven’t been repainted in forever, and their enormous signalised roundabouts.

etc #

Payments: I tried to pay by cash at a restaurant and got asked by the waiter if I was a drug dealer. Despite this, you will still need some cash if you want to do any laundry. Not a single laundromat took card payment.

Laundry: It was also surprisingly difficult to find places to do laundry. None of the hotels we stayed at had laundry rooms or laundry service, and laundromats (laundrettes) were few and far between. It’s honestly a bit weird. Do people not need to wash heavy blankets, or get items dry cleaned?

Food: Eating out is quite expensive and not very exciting. Part of this is because there’s 20% VAT on cooked food (e.g a toasted sandwich will always cost at least 20% more than a fresh one). It’s odd government policy that makes groceries artificially cheap and probably doesn’t help restaurants & cafes very much.

Electricity: A few weird things in the UK. Every bathroom having shaver sockets with a different socket and voltage feels like a relic. Our rental car was also a plug in hybrid, but public EV charging was more expensive than buying petrol. I thought that the street lamps with integrated EV chargers were cool though.

Language: English is spoken in most of the UK, but even as a native English speaker I struggled in York.

Where should you go? #

While we enjoyed our trip to the UK, there’s many other destinations in Europe I would prioritise first. The UK is one of the most expensive countries in Europe, especially when it comes to accommodation and eating out, but many museums and other attractions are free. I personally didn’t find the most of the cities too interesting, but the countryside is nice. The landscape can be a little similar to NZ, but the many villages and castles makes it quite unique.

I feel like London is one of those cities that you have to visit at least once. There is so much to see and it’s culturally very important, but I also don’t think it is particularly representative of the rest of the UK. If you do have a couple of days, I would recommend driving around the Scottish Highlands. It has probably the highest density of beautiful landscapes in the country, and is quite varied with the many lochs, isles, and mountain ranges.

Things to take travelling

2026-01-23T12:00:00Z

We’ve been doing a bit of extended travel over the last few months. This is some of the gear and things that I’ve found to be really good for travel.

Apps #

Ubigi #

eSIMs are great because you can buy them before you reach your destination and already have mobile data when you arrive. It’s also kinda necessary these days, with so many restaurants using QR ordering, or activities where they want you to buy tickets through your phone.

Ubigi isn’t necessarily the cheapest, but I’ve found it to be most reliable. Both in terms of coverage, but also not giving you an IP where every site is making you do CAPTCHAs every 5 minutes.

Tailscale #

There’s very few reasons for most people to buy a public VPN, but having a VPN setup through Tailscale is really useful. I’ve found myself to be on lots of networks where certain sites are blocked, and it can be for any reason: the site owner could be blocking the country you’re in, or the government is censoring the internet (e.g Qatar Airways Starlink).

To avoid this, you can setup a Tailscale exit node setup on your normal home internet connection. This tunnels all your traffic through a computer on your home internet connection, which allows you to bypass these restrictions. While there’s numerous other ways to do this, Tailscale is free, runs on everything, and only takes five minutes to setup.

Merlin Bird ID #

This app is very cool, and basically a Pokédex for birds. It show you what birds are in your current area with photos, songs, and other information. It can also identify the bird through photo or sound, and it actually works surprisingly well. To top it off, it’s free and works completely offline.

merlin.allaboutbirds.org

Wise #

Wise (or Revolut etc) is one of the services that I’m surprised not everyone knows about. In New Zealand, nearly every credit card has foreign transaction fees, so you will save a lot of money by using Wise (which has better rates too).

While you can manually exchange currencies, I just load the money in NZD and let it automatically convert when you spend it. Once signing up, it’s also worth ordering a physical card so you can withdraw cash from ATMs. The card is free if you use an invite link.

Hanly & DuChinese #

Instead of doomscrolling, learning a language can be a great way to pass the time. I really like Hanly for learning Chinese characters & words, as it teaches them by component (rather than just learning the most frequently used characters) and has good explanations/mnemonics to help you learn them. It’s also free - no account, subscription, or internet connection required.

I’ve also found DuChinese to be really helpful. Reading is a form of spaced repetition, and being able to listen while following along with the characters is very helpful. There is a free tier, but getting access to all the content is behind a fairly expensive subscription.

Hardware #

Sony a6700 + Sigma 18-50mm f/2.8 #

I’m really happy with this camera + lens combo for travelling. The autofocus in particular is amazing. It’s really fast, and I’ve missed far fewer shots on this trip because of this camera. Coming from a Sony a5100, the difference is night and day. The Sigma 18-50mm has also been great: the focal length is versatile, it’s reasonably compact, and not too expensive either.

Carrying a camera on trips is great as it forces you to be a little more intentional with your shots, and you’re more likely to do something with the photos afterwards. You’ll find your phone battery also lasts a very long time when you have a dedicated camera. I also really like this combo because it’s not so expensive to feel you have to have to baby the equipment. I’ve been using it just fine in the rain and just chuck it in a normal bag.

I would recommend a Peak Design strap. One of the thinner ones is fine. It puts the weight of the camera on your shoulders rather than your neck, and it’s a bit more subtle than normal straps.

ROG Ally X + Bazzite #

The Steam Deck isn’t available in New Zealand, so installing Bazzite to run SteamOS on another gaming handheld is the next best thing (or arguably better). You don’t have to use Bazzite, but it has better hardware support and includes a bunch of extras out of the box compared to a regular SteamOS install.

I’m still dual booting Windows, but I’ve actually never used it. Gaming on Linux is just really good now, and there’s almost nothing that doesn’t work.

Retroid Pocket 5 #

It’s a bit weird to be carrying two gaming handhelds, but the Retroid Pocket 5 is small enough to fit in a jacket pocket. This one runs Android, and it’s really good for emulation of pretty much every system up to the PlayStation 2. I’ve been playing a lot of GameBoy Advance (there is a whole world of Pokemon ROM hacks). The screen is also OLED and high resolution enough to use shaders that replicate the look of the original hardware.

There are more powerful handhelds out there, and they seem to be getting better every year. The Retroid Pocket 6 (coming soon), and Ayn Odin 3 look to be similar, but with more powerful processors that can play PS3, and even PC games.

Forerunner 965 #

This was another upgrade for me from an older Garmin, and I’m really happy with the upgrade. Every generation of Garmin seems to add a few features, so you get quite a lot of “new” things when you skip a few generations. It has a nice OLED screen, and I get about 3 weeks of battery is even better than my older Forerunner 745 with a MIP screen. The Black Grid watchface is really nice on this screen, and has the perfect level of information density for me.

The Forerunner 965 is not the newest (the 970 is out), but when choosing a Garmin, you will save a lot of money by not buying the latest model. I purchased the 965 for approximately half of what a new 970 retails for.

Other Gear #

Phrasebooks #

Using your phone to translate is great for signs and menus, but phrasebooks are honestly underrated. They tell you what is normal thing to say, and cover a lot of the common scenarios that you’ll run into. It’s also way quicker to flick through a book than it is to type out a potentially weird sentence on your phone.

We got by just fine with English in Europe, but having a phrasebook for Latin America has been essential. The Lonely Planet ones are great: they’re physically compact, succinct, and inexpensive.

First Aid Kit #

You can’t rely on hotels to have fully equipped first aid kits. It’s always worth carrying some gauze, bandages, antiseptic, plasters, scissors, painkillers, and antihistamines with you. When not travelling, I also highly recommend having a first aid kit in your car.

USB-C Headtorch #

These can be surprisingly handy. I got a lightweight one (42g) from Decathlon, which is nice and bright (150 lumens), barely takes up any space in the bag, and supports USB-C to C charging.

Lululemon ABC Pants #

A bit expensive, but they’re actually so good. They’re high quality, dry quickly, and look good. They’re also perfectly comfortable to cycle in.

Bellroy Venture Sling #

This bag has been great for travelling. It’s compact (9L), but has enough space to fit a camera and water bottle. There’s plenty of pockets for organisation, and I like that the zips open from the ends. It feels a bit more secure, but you can also keep the bag slightly open to have a water bottle poke out the top.

A roadtrip around Greece

2025-11-13T12:00:00Z

In late September, we spent two weeks driving around Greece. It was an awesome experience and one of our favourite countries we’ve visited.

Athens #

Before we picked up the rental car, we spent three nights in Athens. It has a bit of a reputation for being a bit of a dirty & ugly city, but we really enjoyed it. The food was amazing, there’s lots of interesting neighbourhoods to explore, and it is more alive at night than anywhere else in Europe.

I also think it has a lot of accidentally good urbanism. Most buildings are around six floors, but on quite narrow streets which really helps with the shade. It’s actually a little bit like Japan: not going to win any architecture awards, but it’s a nice place to walk around.

Both the Acropolis and Acropolis Museum are must visits when going to Athens. The ruins are well preserved and restored, and the views from the top over the city are amazing. Just don’t forget to bring a bottle of water up with you.

The Acropolis Museum is one of the best museums I’ve been to. The galleries are really interesting and well explained, and the entire building sits over an archeological site that you can walk around on catwalks. It’s a shame that many of the artifacts from the Acropolis are in the British Museum in London, because controversy aside, the displays in Athens are much better.

Food #

LUKUMAΔΕΣ: The best place we found for Loukoumades. They have a number of different branches in Athens.
Kapsa Souvlaki: We thought the Gyros here were particularly good. They don’t have fries in them, which honestly makes them better.
Guarantee: The sandwiches here are really nice. There’s a huge number of toppings to choose from, but they have a whole lot of suggested sandwiches too.

Corinth #

Our first stop outside of Athens was Corinth. There’s a narrow and deep canal that separates the Peloponnese from the mainland here. I managed to spot it while driving but I didn’t stop to take a photo. Oops. It’s probably worth a visit.

We went to the ancient city of Corinth, which we were very much visiting because a decent amount of Assassin’s Creed Odyssey takes places here. I enjoyed the ruins, and the museum was good too. I would say it’s more of an optional visit, but there’s a couple of places that overlook the ruins where you can go for lunch.

Our next stop on the way to Nafplio was Mycenae. This site was really cool as it sits on top of a hill with spectacular views out to the coast. The excavation here is really good, and you can get a good feel of what the city was like. Like the Corinth site, there is also a museum included in the ticket which showcases some of the artifacts and explains the history in a bit more detail. We would really recommend a visit here.

Napfilo #

We stayed two nights in Napfilo, which is about two hours drive from Athens. The old town here is very pretty, and it doesn’t feel too touristy. Most of the shops are open until quite late (around 10pm), so you can definitely walk around after you’ve done things for the day.

There’s two fortresses you can walk up here, one significantly higher than the other. We walked up the smaller one closer to the old town (Acronauplía), which doesn’t have any entrance fees but still offers good views. There’s also a path around the coast at the bottom of the fortress which has some nice views of the coast.

We also visited the Ancient Theatre at the Asklepieion of Epidaurus, which is about a 30 minute drive from Napfilo. This has a remarkably well preserved Greek theatre, and definitely worth a visit if you’re in the area.

Food #

Pidalio Tavern: The food here was really unique and tasted great. They had some cultural heritage dishes which were their own spin on classic greek dishes. Similar to what you would find at a more upscale restaurant, but not expensive at all: around €10-15 per dish.

Kalamata #

We drove over the hills on the way out from Napfilo rather than taking the motorway. The drive had some incredible views, but unfortunately very few places to stop and take photos.

Kalamata was nice enough, but we really enjoyed driving down along the coast to Kardamyli and Stoupa. There’s good views along the way, and both these villages are cute places to stop. We had dinner in Stoupa, which was very memorable with a beautiful beach and the sun setting into the ocean.

There’s a number of other places that I’ve heard are worth visiting near Kalamata, but we wanted to take a little bit of a break from driving. I would love to come back to visit the area again. One of the places that comes to mind is the fortified town of Monemvasia, but it is quite out of the way (around 3 hours from Kalamata).

Patras & Olympia #

Our next long drive was to Patras, although it will definitely get better soon with a new highway that is nearly completed. On the way, we stopped in Olympia, the site of the ancient Olympic Games. You do get a good feel of what the games were like thousands of years ago from walking around the ruins, and there’s also a couple of couple of museums included in the ticket. However, it’s not super different from other historical sites so I wouldn’t say Olympia is an essential visit.

We also wouldn’t consider Patras to be an essential visit, but we just generally prefer to stay overnight in larger cities instead of smaller towns. We didn’t get up to too much here, but the walk up the hill to Patras Castle had some good views.

Delphi #

Our next stop was Delphi, which was an easy drive due to a massive bridge that crosses the Gulf of Corinth. On the way we had a nice lunch in Itea by the water (Alexandra Fresh Fish) before driving up the hill to Delphi.

The Temple of Apollo is definitely cool, especially if you’ve played AC Odyssey. The ruins are in good condition, the included museum is great, and the views over the valley are incredible. On this trip, we visited the museums after visiting the archaeological site as it really helps fill in the blanks to what you just saw.

The Delphi town centre seems to mostly be hotels and staying the night here was ridiculously cheap. We stayed in a massive room here for only €20 for the night.

Chalcis & Artemida #

After Delphi, it was a relatively short drive to Chalcis. This is technically on the Greek island of Euboea, but it’s connected to the mainland by a very short bridge (it’s maybe 30 metres long). We were getting to the end of our time in Greece at this point, so we just spent two nights relaxing here.

We then finished off our time in Greece in Artemida. It’s very close to the Athens airport, but also has a large beach. Unfortunately, the weather wasn’t great while we were there so we didn’t get a chance to swim.

We would recommend driving around the Peninsula to the south as it has many nice beaches and places to stop. The Temple of Poseidon is also in this area. We didn’t go in as the €20 entrance fee for historical sites starts to add up, so we just took photos from a distance.

Food to try #

You will definitely eat a lot of gyros in Greece, which are honestly great wherever you go. There are also a few other specific dishes that stood out.

Kolokithokeftedes: I fell in love with these courgette fritters and started ordering them as a side everywhere. They’re mixed with feta and lots of herbs to make them really tasty, and usually served with tzatziki.
Loukoumades: These are fried dough balls that are very QQ, actually quite similar to the fried taro balls you get at night markets in Taiwan.
Dakos: This is a salad with essentially very hard croutons soaked in oil, topped with lots of tomatoes, feta, olives, and herbs.

Driving in Greece #

Driving can be a bit hectic, but it isn’t too bad outside of the cities. I would recommend picking up a car after visiting Athens and driving straight out of there as it’s definitely the most difficult place I’ve ever driven. The other cities weren’t so bad, but the streets can be a little tight (we had a Yaris, which was great).

I managed the entire roadtrip without any accidents, but there’s a few things that make driving particularly difficult:

Traffic lights are only on one side of the intersection, so it can be hard to see when it’s your turn.
Greek drivers drive very fast. They’re usually 20-30km/h over the speed limit.
The lane markings are almost impossible to see. I don’t think they’ve ever been repainted.
The road surface is pretty poor. There’s plenty of potholes, and bumps where the potholes have been filled.

In contrast, the motorways are really good (and the speed limit is 130km/h!) but are tolled. It’s a good idea to set Google Maps to avoid tolls to check how much time the motorway saves you. In total, we spent €36 on tolls for 11 days of driving.

etc #

Public Transport: Greece isn’t covered in rail like much of Europe is, which is part of the reason we rented the car. You will also probably struggle to get to many of the historical sites without booking a tour. Within Athens, the metro is good for tourists: you can take it from the airport easily and just use contactless without having to buy tickets at a machine.
Payments: Contactless payments are accepted everywhere. I don’t think we used any cash at all.
Languages: Most people in Greece speak very good English. The only real struggle I had was trying to get a haircut. It’s also fun to learn the Greek alphabet, as it’s pretty easy and shares many similar sounds.
Food: We appreciated that the culture is more to share food in Greece, but it wouldn’t be limiting if you visited by yourself.
Air Conditioning: Is everywhere. It was hot throughout September, except for the last few days.
Laundromats: Plenty of coin laundries within walking distance.

Where should you go? #

We honestly enjoyed everywhere we went but if you have to prioritise places on the mainland, we would recommend Athens, Napfilo, the peninsula south of Athens, and Delphi. If you are after a Greek Island, I visited Rhodes a few years back which I thought had a bit of everything. It’s also a good place to rent a car for a day to have a look around.

There’s so many places we didn’t get to, so we would love to come back to Greece in the future.

Commuter Waka

2025-09-21T11:45:00Z

Several years ago, I built a data visualisation for NZ census commuter data. It ended up winning the competition, and recently I was asked to update it for the 2023 Census.

In the background, Commuter Waka has actually been quite successful. I’ve received feedback from people working at local councils & transport consultancies, and have had a few requests for features over the years. I was able to incorporate some of these into the new visualization for the 2023 data, so it has become quite a substantial upgrade all around.

New features include search, filtering by mode, comparison between different years, light/dark mode, more map display options, and new charts. I was able to work with Stats NZ this time around, so a few tweaks have been made to ensure that the visualisation accurately represents the data.

Notably, you can no longer select multiple areas at the same time. Due to how data is anonymized, adding values from different areas together can lead to misleading & inaccurate results. A mode which aggregates to the SA3 level has been added, which offers most of aggregation benefits while staying accurate.

Over the years, I’ve also received several requests for custom maps (please reach out if you want one!), so I’ve been able to improve the code over time. I would no longer describe the code as a mess, and is now using Svelte to power things. I really like the way you can use D3 where you use Svelte to manage the DOM, but D3 for the calculations for the visualisation. Other than that, the way things work overall in the original post remains the same.

Commuter Waka is still open source on GitHub. Feel free to send me feedback or raise a pull request!

commuter.waka.app

Expo 2025

2025-09-16T12:00:00Z

We went to Expo 2025 in Osaka back in July. It was a pretty cool experience, and something I would definitely recommend going to see (although there’s not much time left for the Osaka edition).

I was honestly surprised with the scale of the event. I had seen a few photos, but it really was a massive site with a lot of pavilions. Not every country builds a dedicated pavilion: there were common pavilion areas with conference style booths, but also plenty of countries not represented at all (looking at you NZ).

We managed to see about twenty pavilions over the two days we visited Expo. I think everyone has different favourites, but I particularly enjoyed Germany & Malaysia as I felt they best followed the theme of “Designing Future Society for Our Lives”.

Germany had a very interactive pavilion where you held a little character up to parts of the exhibition and it would explain more about their technologies, plans, and vision. Lots of cool ideas, and it really felt like a future looking society.

I also thought the Malaysia pavilion was good as it celebrated diversity between the different regions and also showed their plans for the future. I liked that they had fake foods (similar to what you see in a Japanese restaurant), but showcasing the dishes from the different parts of the country.

Lots of the other pavilions were good, but were less inspiring and more just vibes. France and Brazil in particular felt more like art projects than exhibitions, while India and Turkmenistan had a wild energy that is hard to put into words.

It was just fun to walk around the event as there was still plenty to see and do without going into to the pavilions. Being Japan, there were quite a few cool souvenirs to buy. I was quite happy to get an Ico-Chan gatcha!

We went in the middle of July, so it there was a fair amount of waiting in sweltering 35 degrees heat. For no apparent reason, the lines for the pavilions were much longer the second day, so we only got into five pavilions compared with 15 on the first day. We avoided the pavilions with a queue of more than 20-30 minutes, but that was nothing compared to the queue for Italy which was 3 hours long.

Despite the heat and the annoying lottery system for some pavilions, we had a great time overall. It was a quick stopover for us, so we didn’t do too much else in Osaka this time but we did visit the new Grand Green Osaka that recently opened in late 2024. It’s a huge new green space in the middle of the city, and it’s integrated very well into the surrounding shopping area and transport hub. It’s a really nice piece of urban design and definitely worth checking out if you’re in Osaka.

South Korea

2025-07-17T12:00:00Z

We recently visited South Korea for the first time, and had a really good time. A lot of people have been asking us for some photos & recommendations, so here we go.

Seoul #

We were surprised by Seoul. It was a lot more relaxed than we were expecting, so we spent most of our time walking around neighbourhoods and trying different food. They’ve really nailed the cafe aesthetic in Korea, but the food sometimes looks better than it tastes! Unlike NZ, cafes typically open late: around 10am, but stay open until 9pm.

Neighbourhoods #

Jongno: This is the historic centre of Seoul and where we spent the majority of our time. We really liked Ikseon-dong in particular with all the hanok houses - many of them now restaurants and cafes. Gyeongbokgung Palace is definitely worth visiting and is free entry if you dress up in hanbok. Cheonggyecheon stream is an incredible piece of urbanism (it’s the one that they tore down a highway for), and the walk up Naksan along the old fortress walls has nice city views.
Hongdae: There’s lots to visit here, but the real highlight is Gyeongui Line Forest Park. This is a linear park built on an old railway alignment, but is now an amazing green space with restaurants, art, and music that stretches for kilometres.
Mullae-dong: This area is a vibe. It’s still light industrial, but has a lot of art and restaurants mixed in between. It’s quite an experience to walk down the alleys, and see steelworkers coexisting with trendy bars.

Restaurants/Cafes #

Cheongsudang Bakery: This is the most aesthetic cafe we’ve ever been to. The food and drinks were pretty good too.
MilToast Ikseon: This had really beautiful & tasty steamed bread and french toast. It was a bit of a long wait, so we also recommend the french toast at Standard Bread which has several locations in Seoul and one in Busan.
BBQ YUL: We went for Korean barbecue several times, but this one was definitely our favourite. They were very thoughtful with how the meat should be paired with the different condiments & side dishes, and the service was amazing.

Sokcho + Seoraksan National Park #

We stayed in Sokcho to visit Seoraksan National Park, but also found the city to be really nice too. There’s a lake in the centre which you can walk around, and there’s also a good tourist fish market to visit.

Getting to Seoraksan on the local bus is frequent & direct, and is well worth the visit. There are a variety of different hikes for different skill levels (cable car is also an option). We walked up to Biseondae Rock, which was a surprisingly easy walk and mostly paved the whole way.

At the end of the path, we walked up to Geumganggul cave which was the most deceiving 600m walk of my life. The steps are very steep (~200m elevation gain), but the views are absolutely worth it.

Also, because it’s Korea, we had perfect 5G service the entire hike. There’s also plenty of cafes at the entrance of the park to treat yourself after.

Jeju Island #

We found Jeju to be very average. The nature is fine, but not particularly impressive when compared to NZ.

It actually feels quite a lot like suburban USA—the buildings just keep sparsely sprawling over quite a large island that you will need to drive around. Jeju really seems aimed towards people living in Seoul that want to escape the city for a bit, but it’s not somewhere we would recommend going.

Things to do #

If you do decide to go to Jeju, there are a few things we recommend.

Seongsan Ilchulbong: We enjoyed the short walk up this mountain and watched the sunset there. The landscape around is quite unique with the surrounding mountains, islands and penisula.
Osulloc Tea Museum: This is not a museum, but it is essentially the flagship of the Osulloc tea cafes found around Korea. You can take photos in the tea fields, and taste the tea in the cellar where they mature some of their teas in different wooden barrels. It’s similar energy to Zealong Tea Estate in Waikato.

Gyeongju #

Gyeongju is the historical capital of the Silla Kingdom, and definitely worth a visit. The ancient burial mounds are found across the city, and a few have also been excavated. There are also replicas of Silla architecture around the city.

Near the tombs is Hwangnidan-gil, which is nice with all the cafes and shops in restored hanok houses. The Woljeonggyo Bridge nearby is also really pretty, especially at night.

We also visited Bulguksa, but wouldn’t consider it essential as it’s a little bit out of the way - there’s plenty of other good temples in Korea.

We stayed a couple of nights in Gyeongju, but you could definitely do it as a day trip from Busan if you’re staying near the high speed rail station.

Busan #

The last stop on our trip was Busan, which is a city that really feels like two cities. It’s both a busy port city, and a place that people go for vacation. It’s definitely worth a visit, and good to do both the city and vacation parts. We probably did a few more touristy things here than the other places we visited.

Neighbourhoods #

Gamcheon Culture Village: This is a hillside village with lots of art (and souvenir shops), but many people also live there. There’s lots of nice views as the brightly painted buildings contrast with the mountains and sea. You can pick up a stamp book at the top, and then do a walking tour of the area collecting all the stamps as you go.
Jung-gu: There are a lot of markets in this area that cover blocks and blocks. The Jagalchi Fish Market is neat because you choose your fish and then take it upstairs to find a restaurant that will cook it for you. It’s also worth visiting the Lotte Department Store, as there’s a free observation deck on the top floor that has great views of Busan.
Haeundae: This is the main holiday area with a nice beach and lots of hotels. Unfortunately, a lot of the food is basically a tourist trap, but there is a good cafe street (Haeridan-gil) a little north of the metro station. There’s also a short scenic train and capsule ride (bookings required) that goes around the coast.

Things to do #

Spa Land: These are hot pools similar to a Japanese Onsen, but with a range of extras. Once you’ve bathed (with optional scrub down), you can rejoin your partner and go to one of many different saunas, enjoy a foot bath outside, have a massage (from a chair or person), have a meal, or just lie on the ground. Highly recommend, especially for the price: around $25 NZD for 4 hours.
Busan Air Cruise: Definitely a touristy gondola ride, but it does have good views of the city and beach. There’s also a good seafood place at the bottom of the hill at the terminus. It can be little confronting: the vendors will shout at you a bit and the seafood may still be moving.

Food to try #

We found that the Korean food you get in Auckland is pretty authentic, but there were a few dishes that stood out.

Tteokbokki: The tteokbokki in Korea is much larger and more QQ than you find in Auckland.
Bossam: While you can get this in Auckland, in Korea it’s common to also have perilla leaf as a wrapping as well as normal lettuce. There is also Jokbal, which is similar but uses pork hock instead of pork belly.
Gopchang: This is beef/pork intestine either grilled on a BBQ, or found in a hot pot. We also had it with a Nakji stir-fry. It’s surprisingly good but more expensive than normal cuts of meat.
Hanjeongsik: This is a meal where you get a large number of small different dishes. It’s definitely an experience, and good way to try a lot of different things.

It’s also worth noting that a lot of food in Korea is designed for sharing, so it could be a bit limiting if you are traveling solo.

Also, the only good zero sugar drinks are makgeolli & soju.

Transport #

Korea is more walkable than many other places in Asia and there are some really great streets. It’s generally enjoyable to take public transport and walk, but there are also plenty of places that really need a road diet. It can sometimes take a very long time to cross the road!

Both the Seoul & Busan metros cover the city pretty well, but the frequency can be lacking on some lines. Generally, the numbered metro lines are better. Most bus routes were frequent too, even in the small cities - we only had to take a taxi once.

We didn’t have any issues getting tickets for long distance buses & trains and just bought them 20 minutes before departure. It wasn’t peak season (middle of summer), so it may be worth booking online if things are busier. Korea has high speed rail between the main centres, which we found to be both frequent and reasonably priced.

We hired a car to travel around Jeju. There were a lot of speed cameras everywhere with a constantly changing speed limit, so it does take more mental energy to drive. Other drivers were also not very good, probably because they’re from places like Seoul (or other Asian cities with good public transport) so they don’t drive often

I saw a few smashed up rental cars on Jeju, as well as questionable behavior like driving with wing mirrors folded in. Parking wasn’t an issue, but I wouldn’t generally recommend driving in Korea unless you need to (i.e on Jeju).

Payments #

You can almost get away without cash, but you will need a physical card. Most places are chip + signature, and contactless is uncommon. There are lots of signs for Samsung Pay, but it’s actually for the cursed MST technology where your phone emulates a magnetic strip.

Cash is useful for markets (although some vendors take card too), but you will need cash to top up your T-Money transit card. They have lots of different designs and you can shop around convenience stores to find one you like. The card works across buses and trains throughout the entire country, and you can top it up at stations or convenience stores, but it needs to be in cash.

Etiquette #

Korea is extremely safe when it comes to theft. At most cafes you find a seat first before ordering, and people leave their phone/wallet/bags on the table to reserve them - even if the table is outside on the street. When you’re done with your food, you also need to return the tray back to the counter.

A lot of signage is in English (especially for transport), and most restaurants will have a kiosk or a multilingual menu. It’s a good idea to learn a few basic words, but people don’t mind if you show them a translation on your phone.

Other than that, don’t sit in the priority seats on the metro, 1+1 means buy one get one free, doors open outward, and fire extinguishers are on the ground.

Desktop Linux in 2025

2025-02-09T12:00:00Z

I’ve been running Linux on my main computer again for 6 months now, after not having used it on the desktop for 10 years. I’ve mostly been very happy, and I don’t miss Windows 11 at all.

When trying to solve issues on Linux, you tend to find a lot of random information on personal websites and forum posts, so here’s my contribution to that. I’m currently running Fedora 41 (GNOME), but many of these tips & issues will apply to all distros.

Hardware Issues & Fixes #

I’m running this on my desktop, but the laptop issues of the past (e.g no WiFi) don’t seem to be issues anymore.

USB devices not being detected #

Initially, only my mouse and keyboard was being detected. I fixed this by turning on IOMMU in the UEFI BIOS. Kind of weird, but everything was detected afterwards.

Nvidia Drivers #

Unfortunately, this is still painful today. I actually had a good experience on Fedora 40 where everything worked out of the box, but my computer would no longer suspend after upgrading to Fedora 41—it either wouldn’t go to sleep at all, freeze trying to go to sleep, or freeze trying to wake up.

After lots of trial and error, the configuration I’ve found with working supend on Fedora 41 is using the 570.86.16 Nvidia Drivers from the negativo17 repo, combined with Linux Kernel 6.13.1.

I still can’t seem to get hardware accelerated AV1 decoding to work properly, but other codecs seem to work fine. I wouldn’t recommend buying an Nvidia card for Linux, but the RTX 4060 is the only decent spec card that fits in my case.

Also, good to remember the akmods --rebuild command for when the kernel updates but the Nvidia driver didn’t get rebuilt with it.

Flickering on monitor #

This is actually a problem with my monitor’s FreeSync implementation, and was a problem on Windows too. Turning off VRR in the GNOME display settings didn’t work, so disabling it in the monitor OSD did the trick.

Tips #

Enable AirPlay #

I have a bunch of Sonos speakers around the house, and it’s nice to use AirPlay from your computer sometimes. This is easy to set up, just create a file ~/config/pipewire/pipewire.conf.d/raop-discover.conf with the following contents:

context.modules = [
  {
    name = libpipewire-module-raop-discover
    args = { }
  }
]

Use RDP from a Mac #

Using the built in GNOME RDP server works fine from a Windows client, but I received Error code: 0x207 from the Mac RDP client.

To fix this, export the server configuration and then pop it open a text editor. Find the line use redirection server name:i:0 and change it to use redirection server name:i:1. Open the RDP file/import it, and it should fix the error.

Adjust monitor brightness #

On Windows I was using Monitorian for this, but I found this GNOME extension which works even better. The display configuration switcher extension is also super useful if you have multiple monitors.

Reboot into UEFI #

I also recommend a GNOME extension for this.

Play Windows games through Steam #

By default Steam will only show you games that have been verified to work on Linux. However, most games will just work - open the Steam Settings → Compatibility, and Enable Steam Play for all other titles. I just use Proton Experimental, and have yet to find a Windows game that doesn’t work (although I don’t play any games with anticheat).

For playing games through the Epic Game Store and EA, I’ve had good success with Lutris.

Other good software #

Ventoy - This is useful for the install. Write this to a USB drive, and then you can just drag and drop operating system .iso files into the filesystem, rather than overriding the contents of the drive every time.
Piper - This is a great tool for configuring a Logitech gaming mouse.
Mission Center - A Windows 10/11 style task manager—a big improvement over the default GNOME system monitor.
Pinta - A basic drawing app, very similar to Paint.NET.
Tailscale - Join all your devices into a secure VPN. The Linux version is command line based, but there’s a great GNOME extension for it.
Sublime Text & Sublime Merge - It’s been my favourite text editor for 10+ years and their git client is great too.

Gradiator

2024-09-17T12:00:00Z

In 2011, we released Gradiator—a Mac & Linux app to create CSS3 gradients. This was one of the first apps I worked on, along with George Czabania.

Yesterday, I spent a couple of hours restoring it, so you can try it out in your web browser:

Gradiator

What was Gradiator? #

When CSS3 first came out, it introduced CSS gradients. Skeuomorphism was quite popular in design at the time so the use of CSS gradients became popular very quickly.

However, creating these gradients was a little bit annoying. Vendor prefixes were still a thing, and different browsers had new and legacy syntax.

Gradiator solved these problems by generating all the vendor specific code, and providing a nice interface to create & save gradients.

Why couldn’t it run in a web browser in 2011? #

There were a couple of web based gradient generators at the time but we decided to ship “native” apps for Mac & Linux. This was for two reasons:

You couldn’t get access to the system color picker—we really wanted the app to be able to pick a color from the screen.
Copying to the clipboard was not possible without Adobe Flash.

To get around these limitations we wrapped up the HTML using the native webviews for each platform, and had a bit of Python/Objective-C to pass messages between JS and the native APIs. It was super nasty: it would set document.title to send a message to the other context. There was probably a better way of doing it, but we didn’t really know what we were doing at the time.

This predated Electron by a couple of years, and it’s why we never released a version for Windows—EdgeHTML was still 4 years away.

A code review on your 13 year old code #

When we originally wrote it, I was about half the age I am now. I honestly think it holds up pretty well and it’s more just a product of it’s time—a 2500 line JS file with plenty of jQuery.

I’ve lost the original source code, which I believe used CoffeeScript and Sass. This was created before using a compiler and build system for JavaScript became popular, so the transform to JavaScript and CSS was actually very basic.

Making the tweaks to make it run today wasn’t difficult. To view the GPL source, you can use view source in your browser.

Changes to get it working #

I pulled the source out of the last Linux package and made a couple of changes to get it running:

A system color picker is implemented with input[type=color] (good browser support circa 2019)
Copying to the clipboard is implemented using navigator.clipboard (good browser support circa 2020)

Apart from fixing up a couple odd layout issues, it basically just works. I also upgraded jQuery 1.7 to 3.7 just by swapping a <script> tag.

There’s definitely something to be said for this older style of web development.

jono.nz/projects/gradiator

CSS features I’ve been using recently

2024-09-01T10:30:00Z

While recently redesigning this site and working on new Turbomaps features, I took the opportunity to use a few CSS techniques new to me. Here’s a list of CSS features I recommend taking a look at.

Wide gamut color #

Plenty of devices these days have wide gamut displays that can display more than just sRGB, and make colors really “pop”. There’s a bunch of different methods for authoring these in CSS, but I recommend using oklch().

In fact, you can just use oklch() by default. Unlike hsl() the lightness is uniform, so you can predictably create color palettes based off a single color. If your chosen color is in the P3 gamut, you may want to specify a fallback color in sRGB.

The OKLCH color picker is very nice for playing around with this.

oklch.com

System font stacks #

While I love web fonts, especially variable ones, you don’t always need to use them. I just used system fonts for this site and tweaked the families and weights a little to ensure everything is legible across platforms.

I’ve learned to accept the quality of text rendering across platforms differs anyway, so using a completely different font isn’t such a bad thing.^[1]

github.com/system-fonts/modern-font-stacks

HTML web components #

HTML custom elements have been around for a while now, and they seem like they’re a really good choice for building out a component library. The idea is that you can wrap existing native elements with your custom HTML elements, style with CSS, and progressively enhance with JavaScript.

<my-button bg="green">
  <button>Click me</button>
</my-button>

Writing components in this way plays nicely with server side rendering, and provides an easy way to scope styles. Many of the attributes you would usually pass into a React component can just be native HTML attributes, and styled with CSS. No Shadow DOM required!

my-button[bg="green"] > button {
  background: green;
}

I found Jeremy Keith’s article to be particularly compelling. I’ve had success with HTML web components in my projects so far, and would highly recommend considering them for any design system or component library.

Styling with accessibility attributes #

When implementing custom UI, you should be using ARIA roles and attributes. However, you might be tempted to add additional classes to handle the styling. But you could just not—keep things simple and target the ARIA attribute.

<your-element aria-disabled="true" class="disabled" />

<style>
/* Instead of introducing an extra class for styling: */
your-element.disabled {
  color: gray;
}

/* You can just target the ARIA attribute: */
your-element[aria-disabled="true"] {
  color: gray;
}
</style>

I find writing CSS in this way helps me keep accessibility top of mind.

:is #

This can make your code much less verbose and more readable. I’ve noticed it’s particularly helpful when you’ve got lots of different attributes.

/* Instead of adding separate selectors: */
your-element[bg="red"], your-element[bg="green"], your-element[bg="blue"] {
  color: white;
}

/* You can simplify it to the following: */
your-element:is([bg="red"], [bg="green"], [bg="blue"]) {
  color: white;
}

developer.mozilla.org/en-US/docs/Web/CSS/:is

AVIF #

This one isn’t a CSS feature, but AVIF is too good not to mention. The file sizes are tiny, browser support is great, and almost every modern piece of hardware has built in AV1 decode.

For images on the web, I recommend:

Don’t bother with WebP.
Start with a minimum of 2x scale—you don’t need a 1x image.
Use the <picture> element for a JPG/PNG fallback if you have to.

I was using webp for a while on this blog, but I’ve now switched all the recent content to AVIF. I used the 11ty image plugin, but if you’re not processing images at build time you can use npx avif to easily convert a whole directory.

AVIF requires a decent amount of compute to encode, so I would not recommend conversion at runtime (i.e using some SaaS service).

developer.mozilla.org/en-US/docs/Web/HTML/Element/picture

text-decoration-* #

I always just assumed text-decoration could only be underline, dotted, dashed, or none. Turns out you can set the thickness, distance, color, and more.

Upon learning this, I went with some fancy dotted links on this site. They even animate on hover.

developer.mozilla.org/en-US/docs/Web/CSS/text-decoration

text-wrap: pretty #

This one is subtle, but a nice improvement for blog posts and documentation. You probably don’t want to apply this everywhere as it does negatively impact performance.

developer.mozilla.org/en-US/docs/Web/CSS/text-wrap

scrollbar-color #

I don’t find myself often needing to customize the scrollbar, but it can be good for scrollable containers within the main page (e.g the Turbomaps sidebar).

You can use scrollbar-color to customize the track and thumb, and scrollbar-width if you’re careful.

developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color

Animated Masks #

I recently came across a loading spinner implemented as an animated SVG. While great in theory, it turns out that SVG animations don’t start until the onload event. This can make it problematic if you’re using the loading spinner in a Single Page App.

Ideally, you should be server side rendering, but if it has to be a SPA you can use a CSS animation instead. Many loading spinners are easy to do with CSS animations—often just a transform: rotate(360deg), but I was given a spinner than was clipping the path of a outlined square.

You may be tempted to use clip path animations, but I learned it’s still not supported in Safari. Instead, you may be able to use CSS masks and animate the position(s) to achieve the same effect.

@keyframes loader {
  0% {
    mask-position: 50px 50px, -50px -50px;
  }
  100% {
    mask-position: 25px -25px, -25px 25px;
  }
}
your-loader {
  /* the linear-gradient() just generates some square "images" */
  mask: linear-gradient(#000, #000), linear-gradient(#000, #000);
  animation: 1s loader infinite ease;
  width: 50px;
  height: 50px;
}

developer.mozilla.org/en-US/docs/Web/CSS/mask

<dialog> #

I’ve found that the HTML <dialog> element is not only good for modals, but dropdown & right-click menus too. They’re now used extensively throughout Turbomaps.

However, they’re a bit tricky to animate. The trick is to use an animation in, but a transition out combined with allow-discrete. You can also use @starting-style instead of an animation, but the browser support still needs to improve.

@keyframes show {
  0% { opacity: 0 }
  100% { opacity: 1 }
}
dialog {
  opacity: 0;
  transition:
    100ms ease-out opacity,
    overlay 100ms ease-out allow-discrete,
    display 100ms ease-out allow-discrete;
}
dialog[open] {
  opacity: 1;
  animation: 100ms ease-out show 1; /* animate in, but use transition out */
}

Depending on your needs, the popover attribute may be better than a <dialog>, but the same animation techniques still apply.

developer.mozilla.org/en-US/docs/Web/CSS/transition-behavior

I will fight you if you think macOS has better text rendering than Windows. ↩︎

Auckland’s Rapid KFC Network

2022-07-15T18:00:00Z

I spent 30 minutes making a dumb map the other day, but figured it’s worth a post here as it went somewhat viral.

I was mostly just messing around with Photoshop on the iPad editing Auckland Transport’s excellent rapid transit map. Photoshop on iPad on the other hand, is not so excellent. Hopefully it continues to improve.

There’s a couple of spots that were on the cusp of making the cut - Manukau & Akoranga. It’s really not the distance that’s the issue for these ones, but the oversized roads that you need to cross. Otahuhu almost made it, but the station is just a bit too far from the town centre. Hopefully one day, the town centre will sprawl all the way to the station.

There is a general lack of shops integrated into stations in Auckland. With the exception of Britomart, the most you’ll get is a coffee stand in the concourse. It’s not for a lack of space either, just ambition. Would love to see our stations become more like Hong Kong, or even Sydney.

How many of the KFCs have I actually visited on this map? Only Britomart, Newmarket, Panmure, Sylvia Park, and Auckland Airport. As much as I love KFC, I won’t be taking up the challenge to hit all of these in a single day.

Same Scale

2021-09-04T18:00:00Z

Every city is different, and those differences are reflected in our maps. I find it really interesting that our the differences in landscape and urban form manifest themselves in these maps, and it’s cool to be able to directly compare two cities side by side.

However, I’ve never been particularly happy with the tools that exist to do this. So I made one.

scale.waka.app

Why it’s better? #

I think this is a huge improvement over other tools, as it uses vector maps. This means you can zoom to any fraction (no jump in zoom levels), rotate the maps, and even tilt in 3D. I’ve also thrown in an option to switch to a satellite view, so you can see some of the differences in land use.

You can also search for a location, to save you having to scroll around, and it works nicely on mobile too! I’ve also thrown in a few sample cities that I think are similar.

Sydney & Auckland: Both coastal cities in Oceania, founded in a similar time period
New York & Hong Kong: Both tiny, super dense island cities!
Canberra & Washington, D.C.: Both planned federal capitals, created for similar reasons

Was it hard to make? #

Not really! I did most of it in a morning. It was basically a matter of creating two Mapbox maps, and syncing the events between them.

The hardest part was syncing the zooms. Because of Web Mercator projection, the same zoom level at different latitudes doesn’t necessarily mean things will be the same scale. I spent (admittedly too much) time on coming up with an equation to translate the zoom levels between the two maps. If you’re curious, here’s the equation:

zoom2 = log₂( |cos(lat2)| / |cos(lat1)| / 2^zoom1 )

Other than that, it was pretty straightforward! The code is open source—you can go take a look over at https://github.com/consindo/samescale.

Is it finished? #

Yes. It’s nice to actually be able to call a piece of software finished.

scale.waka.app

Waka Commuter

2020-08-23T11:45:00Z

I recently built a data visualization for a NZ Census data competition, and ended up winning! I figured I would go through some of the thinking behind it, as well as how I built it.

Congrats @consindo! Using Census data, Jono has developed a very cool way of showing where people all over NZ (usually) travel to and from for work and study. https://t.co/oAamoSmVjB https://t.co/ieIv9LbW4h
— James Shaw (@jamespeshaw) August 14, 2020

The idea #

My overall goal with the app was to make the commuter view data as accessible as possible, so I started by creating a visualization familiar to many people: an election map. Elections can be quite binary, so I found that this visual representation translates well to arrivals & departures for a geographical area. While colours are pretty, I also wanted make this tool useful to real people, so I added some additional insights to complement the main map.

Upon selecting a region, you’re presented with a text summary and a more abstract bubble view of arrivals & departures. This visualization still aims to be roughly spacial, but ignores land area and uses commuter volumes instead. A chart showing the overall travel modes is also included as this can provide additional context to people’s travel patterns. Due to data suppression, I was not able to use the commuter view dataset, and used the aggregated census data instead.

I included options to filter by arrivals/departures & work/education. Patterns can be quite different, so it’s fun to toggle the options and see the visualizations update in real-time! As the SA2 boundaries are small, you can also Ctrl+Click to multi-select and view insights for larger areas (e.g an entire city centre).

Lastly, I ensured the app worked on mobile devices to make it accessible to the largest number of people. A few features are omitted, but is still useful and should encourage people to try the app on a PC for more detailed insights.

How I built it #

Quickly. It’s not my best work, but I’ve open sourced it on GitHub anyway. I had a couple of goals though, and they informed the tech I used.

Serverless #

Databases are great, but they can be expensive to run. It’s also just something to maintain, and I really want this app to work forever and not worry about it.

As the dataset doesn’t change (except when there’s a new Census!), I wrote some scripts to process all the data and output a JSON file for each area unit. You end up with a lot of files (2,474), but it becomes a psuedo-API.

I ended up using Netlify to deploy it, mostly because I can’t use GitHub pages with more than one custom domain (already using it for this site). I’m impressed though—you just point it to your GitHub repo, it builds everything really quickly, and then kinda just works—SSL etc is all sorted. I’ll definitely be using it more in the future.

Maps #

Waka currently uses Leaflet, but I decided to use mapbox-gl-js for this project. I’m happy I did though, as vector maps provide a much better user experience—it not only loads faster, but you can zoom to any level, animate smoothly, rotate etc. I would love to find some time to move Waka over to vector maps in the future.

It has a pretty nice styling system, that’s almost like writing a stylesheet for geojson. You define what you want it to look like when the data meets certain conditions, and it more or less just works.

The only other thing to note is that I optimized the SA2 boundries, as they are all loaded when the user loads the app. I ran the dataset through mapshaper.org, and it simplified the geometry somewhat. I also ripped out the unnecessary metadata, cut the filesize from 21MB to 945KB gzipped as a result.

Visualizations #

I spent a few hours experimenting with other libraries, but at the end of the day, the only viable option was D3.js. I really struggled through this, spending a lot more time on building the simple bubble & bar chart than I should have. As a result, the charts are much less interactive than I would like—you can hover & click on them, but not much more.

I wrapped all my mess up in some Web Components (via lit-element), which really simplified things. I bound plenty of event handlers on the map as well as other buttons in the UI, and then just had to update attributes on the components to get everything to update nicely. In a way, it kind of works like a jQuery app from 10 years ago.

That’s kinda it! Not much to it—more time was spent on the thinking & design than the coding itself. That’s the way it should be though—start with your customer outcomes, and the tech just becomes a means to create a solution.

Feedback #

Have you used Waka Commuter? Give it a try, and I would love to hear what you think—reach out to me on Twitter @consindo for any feedback. As it’s open source, also feel free to play around with the code, or even raise a pull request.

commuter.waka.app

The best NZ debit & credit cards of 2020

2020-06-21T10:30:00Z

There’s a large number of debit & credit card options in NZ, so it can be a little daunting when picking one out. That said, there isn’t nearly as much competition as the USA or Australia, so it’s actually possible to decide the definitive best cards.

A huge amount of research went into the post—we hope it saves you some time and money.

If you have any questions at all, tweet myself @consindo or @multithreddy, who was a huge help writing this guide.

Before we start #

While you can save some money with credit cards, there are definitely better ways to save money. These include (but are not limited to) the following:

Buying fewer things
Finding a cheaper price (visiting a different store, or find a better utility provider)
Not paying credit card surcharges (many utility providers will offer a 2-3% discount for direct debit payments)

This guide assumes you pay off your full balance each month. Make sure you do this, otherwise you’ll incur interest.

It’s also worth nothing that the “break even” calculations assume that you value 1 Airpoints Dollar = 1 NZD. If someone offered to trade you $100 cash for 100 Airpoints, you probably wouldn’t do it.

The best debit card #

Westpac Airpoints Debit Mastercard

While you’ll never need to carry cash in Aotearoa, you will need a debit card. Many merchants will not accept credit cards, due to the high interchange fees (around 1.6% for credit). Due to COVID-19, there’s recently been an increase in acceptance as banks have waived contactless debit fees, but it’s unlikely to last—you’ll still need a debit card for now.

The Westpac Airpoints Debit Mastercard is the only debit card in NZ with rewards. While the fees are low, the rewards are also low, so you will still need to spend a reasonable amount to break even. I wouldn’t open a Westpac account to get this card—you would probably be better off finding a fees free debit card, such as the BNZ Flexi Debit Visa.

That said, if you’re a student, this card is free. You probably can’t get a credit card either, so just get this.

Westpac Airpoints Debit Mastercard #

westpac.co.nz/bank-accounts/debit-cards/airpoints

Rewards: 1 Airpoints Dollar for every $250 spent.
Card Fee: $15 p.a. (break even after $3,750 spend)
Additional Features: Apple Pay
Also consider: BNZ Flexi Debit Visa

The best FX/travel card #

TransferWise Debit Mastercard

The TransferWise Debit Mastercard is great everywhere except New Zealand. It doesn’t have the EFTPOS application on the SIM, so it’s subject to the higher Debit Mastercard fees (~1.2%), and won’t be accepted anywhere where credit isn’t.

Despite this, it’s great outside of the country and for online shopping & subscriptions in foreign currencies. TransferWise has the best foreign exchange rates, no card fees, and also makes it really easy to receive foreign currency. I used this card exclusively in the USA & Australia last year, and also continue to use it to pay for all of my USD online subscriptions.

You will save money if you get this card.

Another option is the Air NZ OneSmart. It rewards you with 1 Airpoints dollar for every $100 spent overseas, and $200 spent locally. However, the foreign currency rates are not as good as TransferWise, and it suffers from the same Debit Mastercard acceptance problems.

TransferWise Debit Mastercard #

transferwise.com

Rewards: None
Card Fee: $0 p.a.
Additional Features: Free ATM withdrawals up to NZ$350/month, Google Pay.
Also consider: Air NZ OneSmart

The best free credit card #

ASB Visa Light & SBS Visa Credit Card

For the best free card, we have two winners, depending on what you’re looking for.

The ASB Visa Light is handy for larger purchases. It doesn’t charge any interest for 6 months on purchases over $1000, so it can definitely cushion the blow for items such as appliances, jewelry, or electronics. It’s also just Visa, so has wide acceptance—much more convenient than signing up to store finance, or even pay later companies such as Afterpay.

The other free card to consider is the SBS Visa Credit Card. It has no card fees, but offers $1 cashback for every $150 spent (paid quarterly). It’s better than a lot of credit cards that charge fees, including ASB who charge $40/year for the same reward rate.

I would get the ASB Visa Light for the occasional large purchase, and also pick up the SBS Visa if you aren’t going to get a more premium cashback or airpoints card.

ASB Visa Light #

asb.co.nz/credit-cards/visa-light

Rewards: None
Card Fee: $0 p.a.
Additional Features: 0% p.a. on $1000+ purchases for 6 months (this is technically a floating rate, but hasn’t changed in the last three years), 0% p.a. Balance Transfer for 6 months, Apple Pay & Google Pay.

SBS Visa Credit Card #

sbsbank.co.nz/credit-card

Rewards: $1 cashback for every $150 spent (paid quarterly)
Card Fee: $0 p.a.
Additional Features: None

The best credit card for groceries #

American Express Platinum Edge

American Express isn’t widely accepted in NZ (and their contactless standard, ExpressPay even less so). However, the cards are accepted at most large retailers including all major supermarkets and gas stations—luckily, they have a card just for this.

The American Express Platinum Edge earns you membership rewards, which you can exchange for airpoints, cashback, and many other things. The reward rate for groceries is particularly good—you receive the equivalent of 1 airpoints dollar for every $50 you spend at supermarkets. Airpoints isn’t the only loyalty program though: you can exchange membership rewards for other airlines at a rate of 1.5 miles/points for every dollar you spend on groceries. Exchanging points for cashback greatly depends on how much you are exchanging at one time. You can also maximize your rewards by purchasing gift cards at supermarkets, and then using them at other stores—good for more expensive items.

While the card fee of $149 p.a. is relatively high, you receive a complimentary direct domestic return flight (with bags!) each year. It basically pays for itself, so you may as well get it and take the high reward rate for certain purchases as a bonus.

There’s also the occasional Amex offer, domestic travel insurance (rare in NZ), and as it’s a global card, you’ll be able to get Bank Feeds in software such as YNAB.

American Express also offer a free airpoints card that rewards you with 1 airpoints dollar for every $100 spent on any purchase. Even though it’s better than the Platinum Edge for everything that isn’t groceries or fuel, you should just use a regular credit card for those purchases.

American Express Platinum Edge #

americanexpress.com/nz/credit-cards/platinum-edge-credit-card

Rewards: 1 airpoints dollar for every $50 spent on groceries, $75 spent on petrol, and $150 on other purchases.
Card Fee: $149 p.a. (break even after $7,450 spend on groceries)
Additional Features: Free domestic return flight each year, complimentary domestic & international travel insurance (35 days), Amex offers.
Also consider: American Express Airpoints

The best credit card for cashback #

BNZ Advantage Visa Platinum

If you’re after cashback, the BNZ Advantage Platinum is for you. It has a reasonable cashback rate (paid monthly), and doesn’t require you to spend a minimum amount each year. It also has a number of extra goodies, including price protection—a benefit that is very rare in NZ.

Choose whether you want this airpoints or cashback, and then use this card for most of your spending (except foreign currency & groceries).

The other cashback card to consider is the SBS Visa Credit Card—detailed above in the best free credit card section.

BNZ Advantage Visa Platinum #

bnz.co.nz/personal-banking/credit-cards/bnz-advantage

Rewards: $1 cashback for every $90 spent (paid monthly)
Card Fee: $90 p.a. (break even after $8,100 spend)
Additional Features: International travel insurance (90 days), purchase protection, price protection, Apple Pay & Google Pay.
Also consider: SBS Visa Credit Card

The best credit card for airpoints #

Westpac Airpoints Platinum Mastercard

All of the Airpoints Platinum cards in New Zealand aren’t particularly different—they all have similar reward rates, travel insurance, fees etc.

While the Westpac Airpoints Platinum Mastercard earns status points at a slightly reduced rate to the Kiwibank Airpoints Platinum (they offer 1 Status Point for $200 spend), the Westpac card includes 12 months extended warranty and 90 day purchase protection. I think most people will find the extra insurance more compelling.

Choose whether you want this airpoints or cashback, and then use this card for most of your spending (except foreign currency & groceries).

Westpac Airpoints Platinum Mastercard #

westpac.co.nz/credit-cards/airpoints/airpoints-platinum-mastercard

Rewards: 1 airpoints dollar for every $75 spent. 1 Status Point for every $225 spent.
Card Fee: $150 p.a. (break even after $11,250 spend)
Additional Features: Complimentary international travel insurance, 12 months extended warranty, 90 days purchase protection, Apple Pay.
Also consider: Kiwibank Airpoints Platinum Visa

Notable mentions #

Flight Centre Mastercard #

flightcentremastercard.co.nz

The Flight Centre Mastercard is the only credit card in NZ without international transaction fees. It’s kinda weird really, given that it’s a store card. You also get $1 in Flight Centre credit for every $100 you spend and they also support Apple Pay & Google Pay (I’m looking at you, Kiwibank!)

Westpac World Airpoints #

westpac.co.nz/credit-cards/airpoints/airpoints-world-mastercard

The Westpac World Airpoints is the only premium credit card in NZ. It has a great airpoints earn rate, as well as other benefits including concierge and lounge access. With a card fee of $390 per year, it probably works out if you spend a lot of money (the card fee is halved), or travel frequently internationally.

The Westpac hotpoints World card also exists with largely the same benefits, and it’s technically the highest (non Amex) cashback card in NZ (~1.4%).

American Express Platinum #

americanexpress.com/nz/credit-cards/platinum-card

The American Express Platinum is a charge card with a fee of $1,250 a year. It’s a game of balancing the benefits with the annual card fee. If you travel internationally frequently, it may work out for you, but you probably won’t be traveling internationally much for a while.

Kiwibank Platinum Visa #

kiwibank.co.nz/personal-banking/credit-cards/low-interest-cards/platinum-visa

The Kiwibank Platinum Visa offers no rewards or cashback. It costs $80 per year.

I have no idea why you would get this.

Phew. We got there. I hope you found this helpful! A huge amount of research went into this post—thanks to @multithreddy again for helping me out.

If you have any questions or comments at all (about any NZ card honestly), tweet us @consindo & @multithreddy.

I bought some things

2020-06-15T08:00:00Z

Everyone kept saying KiwiBuild was a failure, so I decided to try it myself. I also bought a bunch of other things—here’s my attempt at reviewing them.

KiwiBuild (the scheme) #

It was fine, I guess? Apart from signing a covenant saying I can’t sell or rent the place for a year, there wasn’t much to it. I don’t think there was a discount either—half the units in the building were on the open market, and the prices look mostly the same. That said, without KiwiBuild, the apartment block may not have been built.

I was also able to withdraw my KiwiSaver, and get a First Home Grant. Without these schemes, I wouldn’t have been able to get a deposit together.

A year elapsed between purchasing the unit off the plans and moving in. The build was mostly on-time, but ended up being delayed a few months due to New Zealand’s lockdown to prevent the spread of COVID-19.

KiwiBuild (the house itself) #

I’m really happy with the place! It’s just really nice living in a new apartment and having modern amenities such as air conditioning, insulation, and double glazing (man, I wish this was more common in NZ). The neighborhood is also pretty good—while it’s not in the CBD, it’s only a five minute walk to the train+bus interchange and other shops. As a result, the apartment doesn’t come with car parking (although it does come with bike parking & lockers), which ends up reducing the total cost of the place.

The apartment itself is pretty spacious for a one bedroom (54m²) and is reasonably well designed. There’s large windows which get lots of light and it has a sun room, which is way more practical than a balcony. If I had to nitpick, the kitchen has some weird design (the microwave space isn’t big enough for a microwave) and the shower pressure could be better (this is actually to save water—Auckland is in a drought).

Overall, it’s really good. I would highly recommend a KiwiBuild home.

Banks #

Avoid, if possible. I wasn’t expecting much, but there was a whole lot of drama getting a mortgage, delaying settlement by two days. Lots of stupid stuff, like not accepting digital signatures, requiring a higher deposit than agreed upon, and needing to run into a physical branch multiple times. At least I ended getting a mortgage, and a pretty good interest rate.

I ended up going with Westpac, but I think they’re all pretty bad.

Fisher & Paykel Appliances #

The apartment came with the usual (oven, rangehood, stove, dishdrawer), and I got a matching fridge & washing machine. They seem to do what they’re supposed to, look nice, and weren’t expensive. Unfortunately, the apartment didn’t allow any customization, but I’ll probably upgrade to a Fisher & Paykel induction stove in the future.

IKEA FRIHETEN #

We don’t have IKEA in NZ yet, but this sofa was too good to pass up. It unfolds into a sofa bed, but in a unique way—the seat slides out, and the back folds down. As a result, it’s much more comfortable than most sofa beds. There’s also plenty of storage in the base.

The only downside is that it weighs 115kg! I purchased it from Urban Sales, and it arrived in about six weeks (even with the lockdown).

Napp Mattress #

Napp is a mattresses-in-a-box, and it’s definitely one of the nicer mattresses I’ve slept on. It’s on the firmer side, but I’ve been sleeping well over the past few days. They’re made in New Zealand but the foam is from Australia, so shipping delays meant I was sleeping on an air bed for a few weeks.

It also didn’t come in a box—it just came rolled up in the back seat of some dude’s Ford Falcon.

Target Furniture #

I bought a table & chairs from Target, and I’ll definitely be going back to get more furniture. They have nice things, are reasonably cheap, and their showroom contains most of what they sell online. I went to their store in Botany and was able to pick up the table the same day, but had to wait a week for the chairs to arrive from Wellington.

IKEA Nisse #

As my chairs took a week to arrive, I bought some folding chairs from Urban Sales. They look nice enough, and are surprisingly comfortable—I was pretty happy working from home on them.

NVIDIA Shield TV #

It’s expensive, but worth it. The hardware is very nice—the device itself just hides away (like a Chromecast), and the remote has just the right amount of buttons. Except maybe, the giant Netflix button. It also has an IR blaster, so I don’t have to use the gross remote supplied with my TV.

Android TV is pretty simple, but it has apps for all the streaming services I use (except Apple TV+). The AI Upscaling in the Shield works surprisingly well, especially with NZ’s 720p IPTV streams. I also have an NVIDIA graphics card, and GameStream seems to work well (both through the official app, and Moonlight).

That said, it’s almost the same price as an Xbox. If you don’t already have a gaming PC, I would probably just get an Xbox.

2degrees Broadband #

The speeds ain’t bad, but I’m still looking forward to Hyperfibre.

Hope you enjoyed this little review of things! I’m still in the process of getting new things, so I might review those in a future post.

Map Creator

2020-05-03T10:00:00Z

I’ve always liked transit maps. They not only help us get from A to B, but can also tell a story about a city. Well designed transit maps not only serve a utility, but are also public art.

There’s lots of different types of transit maps, but the most common is the London Underground schematic style. I’ve wanted to design one of these for myself, but I’ve never had the patience to make one using Illustrator or Figma. I don’t think these tools are particularly suited towards transit maps. We should be able to define a map the same way the routes are defined—it should be as simple as specifying the nodes and connections.

We’re currently in lockdown here in New Zealand, so it does feel a bit silly to work on Waka at the moment. Instead, I spent the last couple of weeks building a tool to help make drawing transit maps easier. The first step was the most basic scenario—a single line, with a bend in it.

Simple enough. Just draw a line, and use a bit of trigonometry to figure out the coordinates for the angles. Cool. Now, what happens when we add a second line?

It turns out, the lines overlap. This is because the lines have a width, so you need to account for that when you bend lines. I’ve made the diagram above a little bit transparent, so it’s easier to see this issue. Again, with a little bit of trigonometry, I was able to fix this all up.

The lines of transit maps often swap over when the angles of the line change, so this was the next thing I accounted for. It’s a little bit difficult, as you also have to account for the change in length of line. Nevertheless, after a bit of hair pulling, I got the result I was after:

Things get more and more complicated the moment you introduce 3, 4, 5+ lines. Modifying an equation to fix one case, will often break another. To keep track of all these different scenarios, I used Storybook and wrapped everything up as a web component.

As the application essentially runs a Breadth-first search and outputs a SVG, I decided against using a framework like React, Vue, or Angular for now. Web components were the perfect lightweight solution I needed.

By regression testing any small tweak to my code, I was able to come up with a general solution for any angle, any number of lines, and any change in stacking. As a bonus, I was able to delete lots of code once I arrived at my pair of equations!

Currently, it won’t stop you from making a bad looking map, but at least the angles will be correct! The other nice thing about getting all the math right is that you can easily change the look by modifying a few parameters.

I’m not totally sure where I’m going to take it next, but there’s a lot of room for improvement. I might try replicating a couple of real-life maps, and seeing how far I get. At the very least, I’m going to have to add labels for stations!

Waka Local Guidebooks

2020-02-02T12:00:00Z

There’s a lot more to a transport network than maps and timetables. Each city has its own quirks, and you’ll often only discover these by experiencing them for yourself. Even the smallest things such as paying a fare can be confusing if you’ve never done it before.

That’s why we’re introducing local guidebooks in Waka. These are local guides to help you understand your city’s transport and get around more effectively. They’re designed to be super handy if you’ve never used the network before, but you might still learn a thing or two if you’re a long-time user! They’re also a quick & easy reference to things like zones & fares. Additionally, these guides are open source and editable by anyone!

Te Whanganui-a-Tara, Wellington is our first city with a guidebook. We’ve currently just got the basics in there - some fare information, and how to get to the airport. We would love to get your feedback to see what you think and decide whether we should roll out these guides to more cities!

https://waka.app/guide/nz-wlg

For code changes, please see the GitHub releases:

Every Lot Bot

2020-01-23T10:00:00Z

Update: These accounts are no longer online as Twitter no longer allows automated bots. Additionally, the Tokyo account is no longer available.

Over the long weekend, @nzsd & I set up a bunch of bots that tweet a street view photo of every lot for a bunch of cities. They tweet every 20-30 minutes, and you can follow them here:

Auckalnd: @everylotakl
Christchurch: @everylotchc
Tokyo: @everylottokyo
Wellington: @everylotwlg

They’ve already tweeted some fun stuff:

1A Waitomo Avenue, Mount Eden pic.twitter.com/SN2Of4yKna
— every lot auckland (@everylotakl) January 21, 2020

2B Mount Street, Te Aro pic.twitter.com/4Yc1jiLRy6
— every lot wellington (@everylotwlg) January 20, 2020

中央区八重洲一丁目 6-14 pic.twitter.com/8kEoJ85b6Z
— every lot tokyo / 東京のすべての土地 (@everylottokyo) January 19, 2020

However, the main thing I’ve noticed so far is just how ugly the average New Zealand house is. We’re now living in an age where we’re going to demolish a lot of them, but honestly, it’s for the best.

162 Grahams Road, Burnside pic.twitter.com/pvC5xAKRpT
— every lot christchurch (@everylotchc) January 23, 2020

The bots use the same open source code as some of the other every lot bots around the world. However, ours runs as CronJob on Kubernetes (it’s using the same cluster that Waka uses!). I can’t speak too much creating the GIS database, but you can deploy your own bot with the Terraform here: https://github.com/consindo/everylotbot-k8s.

Leave Feedback in Waka

2020-01-08T12:00:00Z

You can now send us feedback inside Waka! You can get there from the home page, or by heading to waka.app/feedback. You’ll also be able offered to provide feedback if Waka crashes in any way. We really value your feedback, so we would love to hear what you think.

There’s also been a few changes behind the scenes. We’ve made a few minor layout improvements to support devices that are larger than phones, but smaller than tablets - the Galaxy Fold is one example. We’ve also moved our infrastructure off Amazon ECS, and onto Kubernetes on Digital Ocean. It makes our lives easier, but hopefully you don’t notice a difference!

For code changes, please see the GitHub releases:

Kubernetes Forum Sydney

2019-12-16T20:07:00Z

I recently had the privilege to speak about Xero’s Kubernetes platform at Kubernetes Forum Sydney 2019. I focused on how we adopted the mindset of a platform as a product, in order to empower our development teams.

I think it went really well, and received a lot of great feedback afterwards! A recording is now available online for those who missed it.

https://www.youtube.com/watch?v=k3CLW8siogE

The talk has also been adapted into a post, for the Humans of Xero Blog. https://medium.com/humans-of-xero/enabling-world-class-engineering-with-kubernetes-5ff514924ec8

Waka Christchurch

2019-09-17T09:00:00Z

We’ve brought Waka to Ōtautahi, Christchurch! You can now track your bus in realtime, and check if your service will be delayed. To get started, you can simply tap the “locate me” button on Waka’s map (if you’re in Christchurch!), or choose Switch City.

We hope Waka makes your Christchurch commute easier!

For code changes, please see the GitHub releases:

New Route Maps in Waka

2019-09-04T12:00:00Z

We’ve added a great new route map to Waka today. After choosing a line from the routes page, or a service from a station, you’ll now have an overview of all the next departures.

You’re able to see long it takes to get to each station, and transfers you can make at each station. To view services in other directions, or with different stopping patterns, you can tap the route icon in the top corner.

We hope you love using the new route map!

We also did a lot of housekeeping to prepare for adding more new cities. Please see the following GitHub releases for code changes:

Dev Log: April - July 2019

2019-07-15T13:10:00Z

Yikes. Haven’t done one of these in a while. It’s mostly because I’m really busy at work - turns out, everyone wants to use Kubernetes. I also bought a house, which turns out to be quite a stressful process.

Waka #

We’ve been reducing technical debt in Waka. The server has been entirely rewritten in TypeScript, we’re adding tests, and making it really easy to add more cities. The app itself is also getting a little bit of love, and we’re looking at improving the route page and adding service alerts in the near future. Just for fun, we also rewrote waka-proxy in golang.

The architecture itself hasn’t changed a lot since the last post, but we have added a new component. It’s called waka-realtime, and it’s responsible for pulling realtime information from agencies and putting them in a Redis cache. waka-worker now pulls from the Redis cache, as opposed to doing the pulls itself, and storing it in RAM.

This new component allows us to make more of Waka “serverless”, and run on AWS Lambda. Even though we run our ECS cluster on spot instances, it’s still expensive to maintain a seperate test environment.

There’s a lot more coming to Waka really soon, we’re looking forward to announcing the availbility of our next two cities - Sydney & Christchurch.

Nitro #

Unfortunately, Nitro hasn’t seen a lot of work on the last couple of months. I’ve mainly been fixing up UI bugs - the server is rock solid. Upon reflection, building a really fancy user interface isn’t a good way to get a product out quickly. While it’s a clean, simple experience, the animations and transitions have proved to be difficult to stabilize. I don’t want to abandon things, and will look to getting a public beta out soon.

In terms of infrastructure changes, I’ve moved the account manager (activates accounts and invitations) from ECS to Lambda.

That’s really it for the last couple of months. Fingers crossed that I’ll have more to post about soon!

A Cloud Native Waka

2019-04-19T12:15:00Z

Recently, Waka has a had a bit of a rewrite to make it much easier to get started locally, and is now able to be run in a high-availability, cloud native configuration.

Old Waka #

Old Waka was a little bit of a monolith. Everything was bundled together into the dymajo/waka repository. The barrier to entry was high - you had to get everything going if you wanted to develop it.

Everything also used a crazy, multi-process architecture. It provided a way to split cities processes from each other. This was helpful when the software was less stable - an import of a new Auckland timetable could crash Wellington. I would not recommend this. It’s way more sensible to use a proper application orchestration technology, such as Amazon ECS or Kubernetes.

New Waka #

New Waka addresses all these issues. The application has been split into a number of components, but still delivers an excellent development experience. It also doesn’t require any set-up to get going.

waka - the front end
waka-importer - task that downloads GTFS feeds, and imports them into SQL Server
waka-orchestrator - service that manages manages timetable updates
waka-proxy - service that discovers running workers, and redirects map requests
waka-worker - service that provides gtfs and realtime information for each city
waka-healthcheck - a lambda to check if waka is up
waka-maps - scripts that generate map tiles, and upload them to S3

How was it done? #

Developer Experience #

The developer experience has been vastly improved because no config is required to get started. This was done by making a number of assumptions:

Use local disk instead of DynamoDB for configuration locally.
Assume SQL Server is running in Docker, but is configurable.
Missing API Keys will disable external requests.
waka-importer does not need to be called directly.
Auto-discovery of regions.
Disabled import of line shapes into S3.

With the split into multiple components, it was important to keep the development experience as good as a monolith - developing in Docker containers is not fun. Originally, I thought this was going to be difficult to do - we need multiple waka-workers for each city. I didn’t want to go back to the multi-process mess. Then it hit me. Every component should be a class that can be instantiated.

This is awesome. When it’s running locally, the class exposes some routes that are added to waka-orchestrator’s router. When it’s running in a Docker container, it sets up its own web server, and grabs config from environmental variables.

Cloud Native #

With each component being a Docker container, we now run Waka on Amazon ECS. We chose ECS over Kubernetes, because ECS is easier and cheaper to get set-up with. I also spend a lot of time working with Kubernetes at work, so I’m fully aware that it’s a much better system!

waka-orchestrator speaks to the Amazon ECS API to adjust the active version, as well as launching Fargate waka-importer tasks. For bonus points, our SQL server instance also runs on ECS with an EBS mount (there’s only timetables in there), and our cluster runs on 75% spot instances! Our stage environment runs on 100% spot instances, and auto-scales so is only available when we’re awake.

As waka has been designed in a way where no components actually talk to each other (apart from waka-proxy, which is doing auto-discovery), we effectively have a zero-trust network. All the components sit behind an Amazon Application Load Balancer (ALB), with routes to the ECS target groups. We also have the Waka admin console on the ALB, but using Auth0 to authenticate these requests on the Load Balancer.

Help us build Waka! #

With these changes, Waka is ready for the future. We’ve got new cities in the pipeline and other exciting ideas!

If you want to help us build Waka, you can now get going in a matter of minutes. Check out the front-end or server to get started.

Dev Log: Febuary & March 2019

2019-03-10T18:45:00Z

Oops. I’ve been a bit busy and forgot to do the dev log. As well as going on holiday, I’ve now “ungraduated” and now I’m an engineer on the Kubernetes team at Xero. It’s fun though, and I also made a logo for the team:

Waka #

Waka is now in the Google Play Store! It’s a trusted web activity, so it’s really just a PWA running in Chrome. The only difference between the Play Store and waka.app is an adaptive icon, but I might add more system integration in the future.

I’ve also been working on rewriting the server. Currently it’s a bit of a weird monolith that uses subprocesses, but I’m moving it to use containers. The idea is that when you run it in the cloud, it’s all load balanced and nice, but still just works when developing it on a single computer.

I’m going to be going into more depth in my next post, so stay tuned!

Nitro #

After receiving the first round of feedback, I realized that priorities and Magic Sort were missing from Nitro 3. I’ve now added both these features to Nitro 3, and they work great!

I find Magic Sort is really good when you have a large list with deadlines, dates, and priorities, and just need to know what to do first. Magic Sort was already built into the Today list, but you can now activate it on any list.

The second round of beta invites has also been sent, and I’ll be looking to send a third round in a couple of weeks!

Dev Log: January 2019

2019-01-17T12:00:00Z

Happy New Year!

Nitro 3 ⚡ #

I’ve sent the first couple of invites to the Nitro 3 private beta. It looks like everything went smoothly - the emails went out, and people were able to sign in and start using Nitro.

A couple of things happened to get Nitro to production: I fixed all the critical bugs, added JS Module support, but also had to build a new component to onboard new users. It ended up being pretty simple - if you have a valid invite code, you can login, and it’ll set some metadata on your user in Auth0. If you try to login to Nitro without having activated your account (and thus having no metadata), it’ll tell you that you don’t have access to the application.

I also added a rudimentary stats page for Admin users, as I decided not to add Google Analytics. At the moment, it’s just a count of the lists, tasks, users, and archived tasks in Nitro, but is still useful. I implemented this properly too - it doesn’t just connect straight to the database, but calls the Nitro API authenticating as a machine.

It’s common in a lot of environments to not have any authentication and simply trust other traffic because it’s coming from the same network. The problem with this approach is that it’s not only hard to audit what is requesting what, but ties you a little bit more into your cloud provider (peering VPCs can be a pain). If you use machine to machine authentication, you don’t need to build a BFF (your private and public APIs are the same) but you can also make requests over a zero trust network. For example, I could run Nitro API as a container on AWS and Account Manager as a serverless function on Azure with no special networking. Auth0 made this really easy to do - you can grant an application access to an API by just flicking a switch and choosing some scopes.

I’ve been using Nitro for months in a test environment - it’s always a good idea to dogfood your own app! However, I didn’t have any production infrastructure deployed. I’ve been using Terraform to provision infrastructure, so deploying to production was as easy as renaming some configuration. I would highly recommend everyone to check out Terraform - you write your infrastructure as code, and it’ll be built out like magic, even over multiple cloud server providers.

Nitro itself is running on AWS, on an ECS Cluster (EC2 launch type) behind a load balancer. The Nitro client is deployed into a S3 bucket, sitting behind Cloudflare. Currently, all the Docker containers are running on a single instance, but I’ll add some auto scaling when I onboard a few more people. Additionally, the database is fully managed by AWS (Postgres RDS), and again, I’m using Auth0 to provide login. This is all aided by Nitro being fully functional while offline, so if there is an outage, it’s unlikely you’ll even notice it 😁.

In terms of what’s next, I’m actually not sure! I’ll definitely be checking out the feedback from the first beta users, as well as onboarding more people. Based off the feedback, I’ll be able to prioritize the most important issues, and go from there!

Waka #

Because I actually managed to run out of things to do on Nitro, I put a little bit of work into Waka. After choosing a line on the lines screen, it’ll show the live vehicle locations if there’s any! It’ll also show the services you can transfer to at each stop. I then removed the existing route map that is visible when you press route map on the stations page - it now sends you to the unified lines page.

This change is live for both Auckland and Wellington, and works for buses and trains!

I’m definitely going to make it better though - here’s a couple of plans for that page:

Show transfers at transport hubs (e.g Otahuhu, Albany, Kilbirnie)
Show how long it takes between stations
A better way to select the route variant (e.g The NX1 can run to either Albany or the Hibiscus Coast, the 1 can run to one of three possible destinations)

And if you’ve jumped in from the station page, or have selected a station:

Show the live service info
Show the time that a service yields at each station

Once that work is all done, it should lead into a few other changes. Notably, showing the inactive stops on the station page, and making transport hubs more prominent on the map. There’s also other work where we’re disassembling the Waka monolith (okay, it’s not really a monolith, but we want to split out the data import from the runtime).

That’s all for January. I’m off to take a well needed holiday! ✈

Dev Log: December 2018

2018-12-27T09:00:00Z

Here’s the last update for 2018!

Waka #

I didn’t work on Waka this month as I wanted to focus on Nitro. However, I did finish the analysis on Auckland routes - check out the post if you haven’t already. /2018/12/15/aucklandservicelength/

Nitro 3 #

The big thing this month is keyboard shortcuts. I took some inspiration from Slack and Instant Search on Windows, and put that experience into Nitro. You can now hit Ctrl+K, type, and jump straight into any list or task. You can also quickly navigate through your tasks, reorder them, and either triage them for today, or mark them as complete. Nitro isn’t 100% keyboard accessible yet, but I would really like to get there in the future. There’s also a nice modal which has quick reference to all the shortcuts.

I also cleaned up all the rough edges of the Auth0 implementation. You’ll now be redirected to the login page if your authentication does expire, and usually it just passes you all the way through and back to Nitro. I’ve also made sure the other Nitro Sync bits such as the WebSockets and BroadcastChannel play nicely with Auth0. It’s a pretty seamless experience, and I would highly recommend using Auth0 for your own project.

I’ve also fixed a lot of bugs, and added a number of quality of life improvements. The big one is that assets are now stored properly on a CDN. Combined with Service Workers, this means that Nitro loads really fast, and works when you are 100% offline. I wasn’t intending to, but ending up vastly improving the speed of the task overlay, so it’s now really smooth on my little Surface Go.

Over the next month I want to fix the final remaining issues:

Fix the the remaining bugs on mobile
Improve the sync on slow connections
Find and fix any last bugs!

Expect to see the initial beta invites to be sent out in January 2019!

Which transit services in Auckland travel the furthest?

2018-12-15T12:00:00Z

I got this question a couple of weeks ago, and I realized I was in a pretty good position to answer it. Waka already has all the required data in it, so it was a matter of writing a couple of SQL queries.

These results were obtained for the week of November 5th - 11th, 2018. All routes are bus routes if not specified otherwise.

What are the longest routes in Auckland? #

The first question is simple - what are the longest routes in Auckland (school buses excluded).

Code	Route Description	Length (km)
125X	Helensville To City Centre Via Westgate Express	58.96
396	Pukekohe Interchange To Waiuku Loop Via Patumahoe	49.49
SKY	Airport To Albany - Commercial Bus	47.68
399	Pukekohe To Port Waikato Via Tuakau	44.21
171X	City Centre To New Lynn Via Laingholm	39.23
125	Helensville To Westgate	38.48
997	Warkworth To Omaha Via Matakana And Port Wells	37.60
395	Waiuku To Papakura Interchange	35.70
N11	City To Papakura Via Great South Rd - Night Bus	34.47
120	Akoranga to Henderson	32.82

Full Results · SQL Queries

These results are not particularly interesting. The majority of the above services are semi rural, and don’t have great frequency.

What are the shortest routes in Auckland? #

Ignoring the weird routes that aren’t really routes (i.e short running services) and school buses, here are the shortest routes in Auckland.

Code	Route Description	Length (km)
SBAY	Auckland To Stanley Bay - Ferry	2.17
BAYS	Bayswater To Auckland - Ferry	2.35
DEV	Auckland To Devonport - Ferry	3.11
890	Albany Station To Corinthian Dr Loop	3.51
987	Arkles Bay Loop	3.80
BIRK	Auckland To Birkenhead Via Northcote Point - Ferry	4.08
161	New Lynn to Brains Park	4.17
807	Devonport Wharf To Cheltenham Loop	4.21
842	Smales Farm Station To Crown Hill Via East Coast Rd	4.44
889	Constellation Station To Albany Station Via Hugh Green Dr	5.18

It’s interesting to see that there are no services under 2km, and most of these short services are ferries or local loops.

Which routes in Auckland have most services per week. #

This includes both short/long running services - there’s no good way split them out.

Route	Services per Week
NX1	2687
NX2	1788
InnerLink	1490
70	1427
SkyBus - Commercial Bus	1387
18	1379
OuterLink	1304
82	1164
CityLink	1164
25B	1147

Full Results · SQL Queries

The NX1 has the most services by far, but there’s also a lot of services that start halfway through the route. The InnerLink & OuterLink is also fairly high (and the real frequency is high), but because they’re weird loops the route can be split into a bunch of segments (the smallest being 900m).

The SkyBus is deceiving, because there’s essentially 3 routes under the same code - Albany to Airport, City to Airport via Mt Eden Road, and City to Airport via Dominion Road.

Which transit services in Auckland travel the furthest each week? #

Now we’ll combine the number of services with how far they go, grouping by the route code.

Route	Distance Traveled per Week (km)
NX1	57,378
SkyBus - Commerical Bus	55,605
OuterLink	32,326
NX2	32,118
70	30,257
380	30,233
Southern Line - Train	28,070
Western Line - Train	25,143
Eastern Line - Train	21,872
83	21,153

Full Results · SQL Queries

The NX1 comes out on top - the frequency is good, and as it travels a long distance on the busway and motorway. In many ways the SkyBus is similar - it travels quite far on the busway and motorway with good frequency, but it is a little deceiving as mentioned earlier.

It’s not surprising to see some of our long frequent routes in here too - OUT, NX2, 70, and 83. Our trains also make an appearance - while the frequency is not as good as some of our bus network, the trains tend to travel longer distances.

The most interesting apperance in here is the 380. It is not classified as a frequent service, but it has 15-20 minute service all day. As it is an airport bus, it starts extremely early (4:40am) and ends very late (12:40am) every day. It’s also a bit of a silly route - it really should be split into two halves - Airport to Manukau, and Airport to Onehunga/Mangere.

Dev Log: November 2018

2018-11-25T09:00:00Z

This is the second installment of the dev log. Let’s see if we can keep this streak going!

Waka #

I’ve made some improvements to health checks - they now check if the realtime data is working in Auckland. It’s still at https://assets-us-west-2.waka.app/status/index.html, but will eventually be rolled into the app.

SMS notifications now trigger when the health checks fail (super simple with Amazon SNS), so I’ll know a lot sooner if Waka is down.

I’m also trying to answer the question “What routes in Auckland travel the most km per week?”. I should have the answer to that tomorrow, and I’ll do a little bit of a writeup.

Other than that, there’s been nothing done in actual Waka. Matt hasn’t done anything on waka-importer either.

Nitro 3 #

I’ve spent most of my time coding Nitro this month.

The overlay position is now fixed - no matter where it’s opened from. However, it’s a bit laggy in some browsers (Edge), and can be laggy on Retina screens. I’ll fix it eventually, but not for the initial release. There’s also a new sync indicator - when a task is syncing, an icon shows up.

The biggest change is from my own custom username/password auth to Auth0. It provides a decent user experience, and I don’t have to worry about other things such as sign up, 2FA, and OAuth. Unfortunately it seems to log you out a lot, but it’s not a huge deal as it’s only a single click to log back in.

I also fixed a couple of other bugs and papercuts:

Added the sign out button back
Added proper error messages on the login page
Upgraded all dependencies
Fixed the list ordering without all list
Fixed a race condition when notes were being saved

Next month, I want to continue to focus on fixing bugs and improve the performance on slower machines and phones. I also want the sync to be a bit better - stopping your browser from closing if sync is in progress, and triggering a sync if you haven’t been using Nitro for some time. Oh, and I still need to add the settings menu.

That’s it for November! If you have any questions, flick them through to me on Twitter, and I’ll try answer them in the next post.

Dev Log: October 2018

2018-10-22T09:00:00Z

I haven’t been posting on this blog for a while, but I have been doing things. I’m going to aim to do one of these dev logs every month or so. The idea is that I’ll be more accountable and maybe even release something.

Anyway, here’s what I’ve been doing over the last little bit.

Waka #

We ended up running out of Azure Credits, and decided to move Waka to AWS. It’s generally a lot cheaper, and as I use AWS at Xero, I’m pretty familiar with how to Terraform the bits and pieces together. We had to switch from Azure Blob Storage to S3, and move from a maps server to static map tiles in a S3 Bucket. Other than that, it went fine.

Matt is supposed to be working on waka-importer. The idea is that you input a GTFS file, and it’ll dump everything to a SQL Database Dump & Upload Shapes to S3. Hopefully, this should make Waka a bit more modular. It’s mostly just extracting the existing functionality into a standalone app, so it should be done pretty soon.

Waka now has a status page. It’s pretty rough right now, but it’ll be integrated into service alerts when we add them in. This will probably happen pretty soon because I now live in Wellington, and it seems that every time I go try and catch a train, it’s been replaced by a bus.

In terms of a roadmap, the next things coming will be a new unified lines view, service alerts, and hopefully a switch to Docker containers.

Nitro 3 #

I’m still working on Nitro! I get a lot of emails asking when Nitro 3 is coming, and the only thing I can say is “soon”.

Nitro has taken a long time to build for a number of reasons. Firstly, it’s trying to ship an interface that feels native on both mobile & desktop. The end result is great - a single screen, like most native apps. However, it’s much more difficult than building something in Bootstrap, with no animations, and calling it a day.

The second reason for the slow development is the syncing. Nitro works perfectly offline, and it will merge changes when you go back online. I decided to write my own sync code with a standard postgres database, but definitely ran into more issues than I had envisioned.

Lastly, I don’t have enough time. I’m not a uni student anymore, and have less time to work on things. This will hopefully change when Nitro is released and is earning a little bit of money, but for now, I have to balance it around other things.

Anyway, here’s what Nitro looks like right now:

And here it is on the desktop:

As you can see, it’s taken a little bit of inspiration from Waka - that user interface works really well on mobile. It’s also very easy to adapt it to the desktop.

At the moment, I’m working on the expanded task. While the inside is done, there’s quite a few weird bugs when you try open a task from a fresh reload, search, or click too fast. For performance reasons, it’s rendered as an overlay, rather than inline with an expanding height, but it does make things a bit weird.

Other than that, the next task is to finish off sync (add an indicator + fix edge cases), and add a little more polish (papercuts + settings + sign up). I haven’t been adding features for some time now because I want to get a release out the door. If you haven’t already, you can sign up for the beta at nitrotasks.com.

That’s it for this month! If you have any questions, flick them through to me on Twitter, and I’ll try answer them in the next post.

Turbolinks

2018-04-02T10:28:17Z

Single Page Routing is cool, because it allows your pages to load without incurring the cost a full load. It can be difficult to set up, but I would recommend checking out Turbolinks. You can Single Page Routing running on your existing site in like, twenty minutes. It’s great.

It’s a tiny little script that you just have to insert into your <head>, and it swaps out the body whenever you follow a link. It prevents your CSS and JS from being redownloaded, so you don’t get an unsightly white flash when your page loads.

This site is already pretty fast, as it uses Hexo to render the site out statically, but I still added Turbolinks, and now it’s even faster.

The process was also pretty simple for this site:

Add script tag
Move other script tags to the head, with a defer attribute.
Realize that my script only queries the elements once, so I needed to add a data-turbolinks-permanent to my navigation element.

And I think that’s it. It’s really great for sites that don’t use a lot of JavaScript.

https://github.com/turbolinks/turbolinks

How does Waka work? - Part 2

2018-02-25T19:56:43Z

Finally, part two of this guide! In part two, we’ll go over how the frontend works. I managed to keep part one reasonably well updated, but contact me if you have any issues.

Setting Up #

If you’ve already set up the server, it’ll all good to go! If not, you’ll need node.js & npm installed - https://nodejs.org. Then, three easy steps:

First, get the code with git clone https://github.com/consindo/waka.git
Install dependencies with npm install
Build the client with npm run build

Development #

If you’re only working on the frontend code, and don’t want to go to the hassle of setting up your own server, you can simply use npm run watch:live. If you have the server set up, you can use npm run watch instead.

Waka uses Webpack, so you get all the fancy live reloading - just head to http://locahost:8009. In terms of code style, eslint & prettier are all set up - just run it through them before you send a pull request.

React #

Waka is written in React, with React Router for the single page routing. If adding a new page or view, it’s super important to make sure it can be accessed with a URL - this is how the back button works on Android.

For maps, Waka uses the DYMAJO OpenStreetMap Server, because it’s too expensive to use Mapbox or something similar. We’re currently using Leaflet with react-leaflet, but this will be replaced with mapbox-gl-js in the near future.

Lots of stuff in Waka is custom because most React components are designed for the desktop. 90% of Traffic to Waka is from mobile, so make sure always build mobile first. Often, I like to plug in my phone and debug directly on that.

SCSS #

It’s all custom. It’s also a little bit of a mess, because the app has undergone a number of significant redesigns in its 1.5 year history. A new redesign is coming soon, so I’ll do my best to clean it up a little more.

Speed #

Waka uses Service Workers to run offline, and it falls back nicely. It’s not very useful offline, but at least it will load when you’re running out of the house and there’s very bad Wi-Fi. Bundle size is also reasonably well optimized, so use dynamic imports if necessary.

There’s also the percieved speed - the app uses a large amount of animation in an effort to make things feel faster. If you think something needs an animation, please add it!

Now what? #

Please download the code and mess around! It’s much easier to get started with the client than the server, so if there’s something you’re dying to fix or add, it would be greatly appreciated.

Any questions, suggestions, or issues - contact me!

https://github.com/consindo/waka

How does Waka work? - Part 1

2017-10-08T19:56:43Z

Matt keeps asking me how Waka works, so I’ve decided to write a guide. In Part 1, we go over how the server does things. I’ll try make an effort to keep this guide updated - contact me if it’s not.

The Server Stack #

Before you even try to start Waka, you’ll need:

Windows or Linux (I develop on Windows, production on Linux)
Node.js https://nodejs.org
Microsoft SQL Server http://downloadsqlserverexpress.com
Azure Storage Emulator https://azure.microsoft.com/en-us/downloads/
Git https://git-scm.com/

Handy Tools #

SQL Server Management Studio (install when installing SQL Server) - Windows only though.
Azure Storage Explorer (don’t use it a lot but it can be handy) https://azure.microsoft.com/en-us/features/storage-explorer/

Third Party API’s #

Auckland Transport (if you want Auckland to work) https://dev-portal.at.govt.nz/
Sendgrid (to get the send a link emails working) https://sendgrid.com/
Azure Application Insights (only for production) https://azure.microsoft.com/en-us/services/application-insights/

Configuration #

First, get the code with git clone https://github.com/consindo/waka.git
Install dependencies with npm install
Build the client with npm run build

/config.js #

This is app wide config. Defaults should be fine, but change the public & private ports if required. Make sure you don’t expose the private port to the web! You can also disable auto updates / worker management of cities by adjusting the autoupdate entry.

/server-master/db/config-master.js, config-slave.js #

These are where the app looks for database connection strings. Make your SQL Server install allows SQL Server Authentication, and TCP/IP Network Protocol is enabled. The user set in config-master.js must be allowed to Create Databases, and the user set in config-slave.js must be allowed to access and modify the created database. You will need an already created database in config-master.js, but this is not needed for the slave.

By default, workers in the workers table use the dbconfig of slave, but you can set this to whatever if you want to use config-whatever.js (if you need to distribute over multiple instances of SQL Server).

Environmental Variables #

AZURE_STORAGE_ACCOUNT - the Azure Storage Account. For the emulator, use: devstoreaccount1
AZURE_STORAGE_ACCESS_KEY - the Azure Storage Account Key. For the emulator, use: Eby8vdM02xNOcqFlqUwJPLlmEtlCDXJ1OUzFT50uSRZ6IFsuFq2UVErCz4I6tq/K1SZFPTOtr/KBHBeksoGMGw==
atApiKey - the Auckland Transport API Key (optional if you don’t want Auckland)
SENDGRID_API_KEY for emails (optional)
AZURE_INSIGHTS for insights (optional)
AGENDA21_API_KEY currently a private key, returns parking information for Auckland Carparks (optional)

Starting #

Yay! You’ve configured Waka. Run node index.js to start, and it’ll create the database and start on the port you specified.

If you don’t want it to start downloading data from Auckland automatically, make sure you disable the auto updates in /config.js.

Architecture #

Waka has a master process that manages a collection of worker processes, each encapsulating a particular region & version and providing the API. Each worker process uses its own database which keeps things smaller, faster, and is easier to delete when the data has expired. There’s mapping functionality which sends all requests to a particular region to a particular version. If you’re using the auto importers you shouldn’t have to worry about the mappings, but it is possible to override.

Worker spawning is done through node’s child_process.fork, and all communication thereafter is done through a standard REST API - using both the public and private methods on both the master and the worker. Requests are proxied through to the mapped worker from the master. Check out all the router files for further details.

Static rendering and hosting of assets is done through yet another process. For static rendering, it uses the standard public REST API, and transforms the JSON to HTML. Files in /dist are all hosted under / when a route cannot be found. If a file is not found in /dist, the static server returns a default or 404 page, and lets the client side JavaScript take over the rest.

Server-Master Private API #

If you’re not using an auto importer or just need to emergency fix things, you can do so with the private API. It’s not secured, so you have to make sure the port isn’t exposed.

For most of these requests, just pop a JSON object with the prefix (region) and version in the request body.

Update: You can now just head to http://localhost:8001 and there’s a nice UI for running these request.

GET /worker - Returns all the available workers.
POST /worker/add - Send a prefix, version to create a new worker.
POST /worker/load - Load workers from the database again (generally shouldn’t use this)
POST /worker/start - Send a prefix, version to start a particular worker.
POST /worker/startall - Starts all workers that have startpolicy ‘auto’
POST /worker/stop - Stops a worker process.
POST /worker/delete - Stops a worker, and then deletes it from the database.
GET /mapping - Shows which prefixes are mapped to which workers.
POST /mapping/load - Loads mappings from the database again (generally shouldn’t use this)
POST /mapping/set - Send a prefix and a version to set the worker where requests are forwarded.
POST /mapping/delete - Unmaps a prefix - requests to a region will 404 after being deleted.
POST /import-start/:mode - Trigger a manual import of GTFS data. Use db for the database import, shapes for the Azure Shapes Parse & Upload, or all for both.
POST /import-complete - Used internally from the worker - tells master that an import has completed so it can update the database and run any callbacks.

Server-Worker & Server-Static Public API #

This is the public API. You can generate them with npm run document or just head to https://waka.app/docs/index.html.

SQL Migrations #

Because we create the database from scratch every time a new worker is created, we don’t have to worry about migrations! Simply delete the worker and try again if you’re having any issues. The SQL files which create the tables and stored procedures are located in /server-worker/db/procs

I’m not sure how to do the migrations for the master database yet, but the scripts that create it on first run are in /server-master/db/procs

Tests #

No unit tests yet 😢. There’s a couple of tests in the Auckland auto importer that does a quick check before changing the live mapping, but that’s it. There’s definitely room for improvement here.

Other Things #

Here’s some things you might want to do when modifying or using Waka as a dev.

Adding a New City #

Add an importer with countrycode-airportcode as the prefix in /server-worker/importers
Use the private API to add, start, run the importer, and set the mapping to your version.
Fix anything that’s broken when you try use that city.
- Lines requires special config.
- Realtime also requires special config.
- Stations, Stop Times, and Timetable should be pretty smooth sailing.
Add an auto importer to keep versions & mappings up to date.
Send a pull request!

Now what? #

Hopefully you download the code and have a play - fix a few issues, or even just file some 😃 https://github.com/consindo/waka/issues

In Part 2, we’ll go over the client-side development.

Mobile Safari Hacks

2016-12-30T08:30:00Z

While developing Waka, I’ve discovered that Mobile Safari is the new IE6. Most of this arises because Apple has layered on a number of fancy features that work great for most sites, but create problems when you trying making a web app. Here’s a couple of issues and fixes for these things:

Desktop Safari is completely different to Mobile Safari #

Problem: Desktop Safari looks great, but the app doesn’t work on iOS. Solution: Unfortunately, you always have to be testing on real devices. This goes for Android too, because these devices are a lot slower than your dev machine.

It’s also a good idea to enable CPU Throttling in Chrome in order to get an idea of how your app will perform.

Viewport Height is too high #

Problem: 100vh includes the height of the browser controls, which are overlaid so there’s the fancy blur effect.

Fix: If you can’t use height 100%, I would recommend using a CSS variable, and line of code like this:

document.body.style.setProperty('--real-height', document.documentElement.clientHeight + 'px')

Make sure to bind this to your window.onresize event!

No Kinetic Scrolling in Child Elements #

Problem: Having overflow:scroll in a container doesn’t have any inertia. Solution: On your element, set -webkit-overflow-scrolling: touch;

-webkit-overflow-scrolling bubbles to page #

Problem: When you’re at the top of the element, the entire page scrolls, not the element. Solution: You’ll need two elements, something like this:

<div class="scrollable">
  <div class="container">
    Content
  </div>
</div>

On the inner element, you’ll need to set min-height: 101%. Then, onTouchStart, you’ll need some JavaScript that moves the scroll position down a single pixel at the top of the page, or up a pixel at the bottom.

let top = e.scrollTop
let totalScroll = e.scrollHeight
let currentScroll = top + e.offsetHeight
 
if (top === 0) {
  e.scrollTop = 1
} else if (currentScroll === totalScroll) {
  e.scrollTop = top - 1
}

Flexbox is funky in row direction #

Problem: Flexbox generally doesn’t work in the row direction on iOS. Solution: If setting the container height with the CSS variable you made doesn’t work, use calc() with that variable. It’s really not ideal, but this is what I’ve found works best.

Force Touch #

Problem: If you force touch on an link that you styled like a button because you have fancy single page routing, it’ll pop up a preview. Solution: If iOS, don’t use the anchor tag (or at least a href). Bind an event to the button, and push the new URL to the History.

No caching when pinned to home screen #

Problem: There’s no HTTP caching when the app is pinned to home screen. Makes for long initial load times. Solution: You’re gonna have to use AppCache for this one.

That’s all I can think of for now. If you have a Mobile Safari hack, message me, and I’ll add it to this post!

XPS 13 vs Surface

2016-08-31T22:00:00Z

I recently bought a Dell XPS 13, to replace my Surface Pro 3. These devices roughly cost the same, but I managed to snag a last generation XPS with the improved screen for the same price as a current generation with the regular HD display. I miss out on USB-C and improved graphics, but that’s not a huge deal.

While both of these devices are a generation behind, they’re very similar to the current model, so this comparison is still valid.

What the XPS does better #

Screen This is the best part of the XPS 13. The 3200x1800 resolution is great, and apps like Photoshop look great at 200% scaling. There’s more pixels on this thing than the 15" MacBook Pro! Oh, and the tiny bezels are beautiful.
Battery Even with the crazy screen, the XPS lasts 9 hours. The Surface with a fresh battery only lasts 5 hours. The power management also seems a lot better - the Surface always used to randomly turn on in my bag.
Connectivity The XPS has an extra USB port, lock slot and a full sized SD card reader. The newer model even has Thunderbolt over USB-C! Oh, and if you thought Broadcom Wi-Fi was bad, the Atheros chip in the Surface will drive your head through a wall.

What the Surface does better #

Stylus The Surface has pen support, which works really well. It’s great if you want to annotate things, or draw. However, I find paper better because you can spread it around on a table and refer back a bit easier. Oh, and since printing is an enormous hassle, I just handwrite my assignments anyway. ¯\_(ツ)_/¯
Keyboard The Type Cover 4 is less mushy, even though it has less travel.
Audio The Surface has front facing speakers and never any software issues. On the XPS, very occasionally headphones aren’t detected or the sound quality deteriorates (a reboot fixes this).

Things other people have issues with #

Webcam The XPS 13 has stupid webcam placement, but I use my phone for video calling.
Form Factor The Surface is also a tablet.
Windows Hello Only the Surface Pro 4 has this, but it’s really cool.
Windows 10 Pro The Surface comes with it, but I had a spare license for my XPS.

What both could do better #

Trackpad The trackpad on the Type Cover 4 is too small. The XPS 13 doesn’t support four finger gestures. I just wish I could switch desktops with 3 fingers. There’s also a lot of apps in Windows that don’t handle precision scrolling well *cough* Electron *cough*.
Windows 10 Sometimes Windows Explorer messes up and I can’t use instant search. It’s very annoying, and I need to restart the process.

The Verdict #

I like the XPS more, if only because of the nicer screen and significantly better battery. If a tablet and stylus is important to you, get a Surface.

This is my awesome website

2016-07-17T16:54:21Z

Hi, I’m Jono. I’ve had a couple of blogs over the years, but they tend to disappear as I abandon side projects and domain names. I finally have a domain name that I like, so I’ve decided to build a proper website. I haven’t completely finished yet, but the aim is to have all my work, projects, and writing in one place.

Who am I? Well, that page isn’t done yet, but I’m a student currently living in Auckland, New Zealand. At the moment, I study Computer Science & Applied Mathematics at the University of Auckland. On the side, I build websites for other people, make apps and travel the world.

I’m currently building a beautiful FTP + SFTP app for Windows 10. It’s not released yet, but you can check it out and sign up to the beta at dymajo.com.

That’s really it for now. Feel free to copy and share anything written on the blog, with attribution. The website design and source code is also freely available on GitHub. Do whatever you like with it, but linking back is highly appreciated.