Of Lizards and Lag...
October 13, 2023
What I'm Listening To
'And I get somewhere but don't like it…'
Story From The Week
Before our weekly stand up meeting on Monday this week, I made a plan for my day, drank copious amounts of coffee, gawked at the lizard in our backyard (which we named Chris) for way too long, and started a free online course called Elements of AI.
I had my one-on-one after our weekly meeting, and I discussed refactoring a feature I implemented a few weeks ago with my manager. I’ve been working on a reporting module in which we surface metrics about the usage of our products, and I previously added an “Export to CSV” button to the dashboard. When a user clicks this button, the JSON that was retrieved from the server response at initial page load is converted to CSV format, and a CSV file with all records is downloaded.
This works perfectly for our test data set, but my boss was curious if the browser would be able to handle large sets of data like 10k+ records. He suggested I mock this type of response from the server to see if our UI would be affected.
And sure enough, after a set of 15k records was sent from our Node.js server over the network, the page became laggy and unresponsive. We’re talking on-the-verge-of-crashing slow.
Whoops.
So in the coming days, I’m going to refactor this feature by parsing the data on the backend and sending it to the client through it’s own endpoint.
What Did I Learn?
In order to test that record set of 15k as I mentioned, I used a new (to me) Javascript method, Array.from(), in order to simulate a large response from the server.
In the backend service, we return an object to the client on our /report route. That object contains a property for the total records to be displayed in the CSV file, and on that property, we return an array of objects.
Currently in our test environment, the number of objects in that array is ONE. So I used Array.from() to create a new array with 15k duplicates of that one object. The method has a few optional parameters where you can specify the length of the new array and a callback function. Here’s the syntax: Array.from({ length: x}, () => callbackFunc)
In order to duplicate the single object and return a new array, I just specified the length and returned the object in the callback function, which effectively duplicates it!
const veryLargeArray = Array.from({ length: 15000 }, () => objectToDuplicate)
What Made Me Confused...
At my company, we use Linear, Slack, Figma, Github, GoogleDrive, and Notion to document project requirements, processes, workflows, and general project banter.
This week, when my project manager requested that I consolidate a project's requirements into a single place, it felt like I was caught in a whirlwind of decision paralysis. “Where do I put the things??”
In my quest for answers, I asked an old co-worker who is a UX Designer what his company does. Do they have guidelines in place of what to communicate where? His answer: “It’s a hot mess.”
Cool cool.
Turns out, living in this world brimming with tools and technologies is a daunting challenge to navigate.