Ops, I did it again!

PSA on QSA: Working closely and remotely

Dave Dash -

Sometimes Software Engineers and Designers need to find that perfect number - maybe it's the perfect size for a button, the perfect margin for an element, the length of transition.

Some items are easy to discover, even if you don't control the codebase, you can change a CSS value pretty easily with a browser's dev tools.

Sometimes the change is a little more complex.  We had a complex formula that had a magic constant that changed how some of our animation worked.  I started a video call with my coworker, a designer.  We had some good initial ideas, but I really wanted him to play with this with real content.

So I pulled out the old standby, Query String Parameters (QSA).  You know, the ?param=1 at the end of a URL.  

This is super easy to do in most languages, we use Typescript with NextJS.  In any component you can access parts of the URL with useRouter:

import { useRouter } from 'next/router';

const MyComponent = () => {
  const router = useRouter();

  // parse the ?magicConstant=value from the query string.
  const magicConstant = parseInt(router.query?.magicConstant, 10) || 1;
  const scaleFactor = calculateScale(magicConstant);

  // ...
}

I use Vercel's preview apps so it was easy to deploy a review app, and it was easy for my coworker to adjust the magicConstant until he found the perfect parameter.

In our specific case this changed as our viewport size, so he gave me three different constants depending on what his window size was.

Once we settled on some values, I was able to push again a more final pull request with these constants hard-coded.  

The magic isn't so much the code, every web language since CGI-bin has provided some access to the query strings.  The magic is the process.  We use Pull Requests and we build review apps (this is easy with tools like Vercel, Heroku or Netlify) and then we enable our peers to work independently with a real functioning web app.  This creates a tight feedback loop and we were able to close this issue in an hour.  Rather than a series of back and forth exchanges or a multi hours.