Our first hackday

4 min read
by Andrew Underwood
July 16, 2020

Last week, we kicked off our first internal hackday! Hackdays are a day for the whole team to work on projects or ideas that aren't in our planned cycles of work.

From now on we will be running an internal hackday once a month.

What is hackday?

Hackdays are one day, sprint-like events where everyone in the company collaborates on projects, either in self-organised teams or individually.

Hackday starts with a kick off call the day before to go over what we are thinking of hacking on. We then hack for a day, collaborating where possible to get things built quickly. The day then ends with the team demoing what they hacked on, discussing the nuances of the project and any learnings made.

Why hack for a day?

It’s important we practice what we preach as a company. Hackdays help to foster the spirit of flexibility, creativity and collaboration, something we care deeply about both for the team but also for developers and businesses using our platform and APIs.

When the team says “it’d be good to do that at some point” a lot, it means there is a secondary backlog of ideas people want to do but, no time in cycle work to do so. Carving out a day for people to tinker, and build things that make them happy, is always a great place to start.

For the team, it’s a day to learn something new, work with someone different, fix something that has been bugging us, and take a bit of a breather from cycle work. Hackday is a self organised day and so requires everyone to set an achievable goal at the beginning of the day with the aim of demoing what was hacked together by end of the day.

Commerce.js team

What was hacked on?

As a distributed team, split across 5 locations and 4 time zones, we still managed to make this a fun, collaborative day of hacking and learning together.

Translating the Chec Dashboard

Hola, Bonjour, Guten Tag, Olá— Every second of every day, a commerce transaction happens somewhere around the world. Robbie took a stab at internationalisation (i18n) on the dashboard so we can programmatically support multiple languages, starting with Portuguese (Engineer Ricardo is from Brazil 🇸🇧 ). Robbie successfully replaced all English in the dashboard with Portuguese. This was an exciting initiative to kickstart, watch this space.

Chec dashboard in Portuguese

Updating Sentry in the dashboard

We use Sentry for application monitoring on the Chec Dashboard. Sentry allows us to track errors and debug issues for merchants. Guy hacked together an error ID so when an issue does occur (rare but inevitable) merchants can send us the error to help with debugging. 🐜

Sentry dashboard chec

Tinkering with DiVinci Resolve

Our lead designer Blaze loves learning new tools and ways of making things look beautiful. Blaze spent hackday dipping his toes into the vast and powerful ocean that is DiVinci Resolve. Check out this fun, simple animation Blaze put together while touring his way around Resolve. 🎨

Commerce.js annimation cjs

Optimising the demo store assets

Image optimisations are never as straight forward as they sound, but image load time is an important area to keep on top of in eCommerce. For our new demo store (built in Next.js), Jaeriah managed to compress all product assets to get the load time down from 900ms to 200ms! Fantastic 💅🏼

Commerce.js Demo store thumbnail

Jaeriah also went on to create an introductory commerce workshop for Frontend Foxes, a women in tech organisation Jaeriah has recently joined and has made contributions towards.

Shoppable campaign boilerplate

Brands use Commerce.js in a variety of ways to best suit their needs. Some use the platform to power their entire commerce infrastructure, others use a bundle of our APIs to deliver specific functionality. 🛍️

Kyle whipped up a fully functioning commerce boilerplate built in HTML and Vue to help developers conceptualise how fast you can create custom purchasing displays and flows. Just add in your API keys and you're good to go! Get the boilerplate. See a live demo of a styled boilerplate.

Boilerplate demo for Commerce.js

GitHub Actions vs CircleCI

Automation is the name of the game in our team. Any opportunity to make enhancements to our workflows are jumped on. Ricardo had the pleasure of testing how GitHub Actions stacked up against CircleCI when it comes to our CI/CD (continuous integration/deployment) workflow. Some interesting insights gained and actions to investigate in the coming weeks. 🔃

That’ll do it!

Our first hackday went off with a real bang! Some awesome projects were hacked on and lots of learnings and discussions were had during the demo session.

Commerce.js team members

You might also like