This is how we hack

4 min read
by Andrew Underwood
October 16, 2020

The team has been doing amazing work the last few months, specifically in making our API more performant and increasing the “time to wow” for our customers. Some highlights include — shipping our new documentation, making our Stripe integration SCA ready, releasing a Gatsby source plugin and onboarding new customers.

You can read our release notes for a full run down of what we’ve been shipping.

We started hackdays a few months ago and always look forward to it. It’s a time to collaborate, build and learn, without the pressure of regular cycle work. So with it being Hacktoberfest this month, we wanted to share some of the projects the team have recently hacked on.

Commerce.js team

Data insights with Segment

Building software without good data is like assembling IKEA furniture in the dark. To better our data capabilities and insights, Kyle spent a full day hacking with Segment. Segment’s customer data platform can be used in a number of different ways and will help us understand how our customers interact with our products. As our data sets increase, business intelligence tools like Segment become essential for unearthing new products and streamlining customer experiences.

Segment Commerce.js

Experimental parallax storefront with Tilt.js

Devan recently wrote about the checkout experience and what we are doing to make the internet to look less templatized and boring. Walking (coding) the walk, Devan built a playful resource and example checkout using Vue-Tilt, a simple and easy to use parallax hover effect library which is based on the older jQuery library Tilt.js. Parallax effects are typically used on interactive card layouts and displays. Devan took it a step further and built a storefront and checkout with parallax and confetti everywhere. You can fork this example on GitHub and see the live demo here.

Commerce.js silly checkout

Slack invite overhaul

Our community Slack channel is growing, with over 300 developers now in the community. Guy and Blaze spent half a hackday giving the Slack invite a fresh coat of paint. With Blaze on design and Guy on development, they whipped together this nice modal, powered by a Netlify serverless function.

Commerce.js slack

Local environments and stress testing

Ever pushed something to develop when it should have gone to master? 🤦‍♂️ Ricardo spent some time improving his local environment to ensure there’s never any confusion.

After a week where we implemented auto-scaling in our production K8S infrastructure, Ricardo also set out to improve our current performance monitoring and load testing. Using K6, an open source library, Ricardo began testing the limits of our application with real customer scenarios like listing products and capturing orders.

K6_Commerce.js

Does anything rhyme with Wappalyzer?

We’re soon to be a listed technology on the Wappalyzer look-up platform. Wappalyzer is a chrome extension and tech comparison platform that tells you what technology is being used on any website. Jaeriah whipped together a PR for this and a mock-up of what this will look like for Commerce.js powered sites. Very nice!

wapphack

Typescript for the Commerce.js SDK

With the eternal pursuit of making our SDK more consumable for the developer, Robbie tested adding TypeScript definitions to our SDK. TypeScript (TS) is an open source language which extends JavaScript by adding types, essentially validating the JavaScript you are writing, ahead of time. After a day of learning and tinkering, Robbie concluded that TS makes integrating the SDK more verbose, but also much faster at integrating as the developer becomes less reliant on our documentation. Who doesn’t love self-documenting code? Watch this space.

Commerce.js_typescript

Logo scroll

Our lead designer Blaze is a wizard when it comes to interaction design and animation. Using Blender, Blaze created this beautiful scroll animation of our logo. You can check it out on CodeSandbox and the rest of his work on Dribbble.

Commerce.js_logo

Adding search to our docs

We’re really proud of our freshly minted SDK docs, but in the rush of getting it shipped, we overlooked adding in search capabilities. Jaeriah made it her hackday project to learn more about Algolia and integrate search into our docs. This is one hackday project that we will be folding into our cycle work in the coming weeks.

Commerce.js docs search

In the spirit of hacktoberfest

Building off the momentum from the open source contributions we’ve received this hacktober, hackday this month did not disappoint!

If you enjoy hearing our work and culture, be sure to subscribe to our newsletter below to get posts like this right in your email.

Commerce.js team

You might also like