The #techfiction story about how a backend developer feels as he starts working on his first frontend task.
It’s late. The cold breeze stings my face as I wander the dark alleys of the City. Now and then dim neon lights cut through my shadows. I’ve been wandering around aimlessly for what feels like hours. Now I find myself standing in front of Avery’s again. I enter, in a force of habit.
There are a bunch of familiar faces. Christmas is around the corner, and everybody’s celebrating, but I’m not in the mood for “jingle bells” today. I grab an empty chair at the bar and order a shot of Glenlivet.
'What’s with the grim face, Tony?'
It didn’t last long. Peter approaches holding a bottle of beer in his right hand. I can’t lie to him. He’ll see right through me.
'She’s gone, Peter. I’ll never see her again.'
'Oh, come on! There’s plenty of fish in the sea. Here, I’ve got something that might cheer you up.'
He puts down his beer and reaches into his leather jacket, pulls out a crumpled piece of paper and hands it to me. Just a short note written on it, smeared bold letters read “GZA-220”.
'I was going to give this to Sanchez, but looks like you need it more.'
Sanchez. He’s been stealing assignments from me for months laughing it up while I’ll cry myself blind, bored to death, working day in and day out on those seemingly insignificant backend nuisances. I might relish this, just to get back at him.
'Come on! Look it up.'
It turns out to be a task ID on JIRA, the project management system we use internally. I put my machine on the desk, start up the browser and navigate straight to the task page.
'It‘s a frontend task,' I mumble out of pure surprise.
'You might need some change,' he says.
He’s right. I need something to regain focus. A new kind of challenge.
'Ok. Assign that to me. I’ll do it.'
The task is as follows. A website is composed of horizontally stacked regions each having a background colour setting defined by the editor. When hovering over the areas with a blue background setting a radial smudge should follow the mouse cursor in the background.
I don’t waste any time and quickly employ my usual routine: look it up on Google. Surely someone’s already done something similar, and I don’t want to waste my precious time. I’ve got to get back to feeling sorry for myself.
Here it is, right off the bat, almost the exact same thing. But after a quick investigation, I find it uses CSS, and a transform style attribute changes as I move the mouse around. While this looks good, I’ll try another approach, draw directly on canvas and check how this performs. So for every blue region, I just add another "canvas" and resize it so that it covers the whole background area. A global variable will keep track of the smudge’s position and other movement data.
I’ll set up my mouse move listener and a draw loop and quickly find out that scrolling the document leaves my smudge hanging motionless. I need to treat the scroll same as a vertical mouse move.
It’s getting serious now. I light up a cigarette.
I used to be a non-smoker. Then I met my buddy George back in April. We had a couple of drinks, and he offered me one of his Luckies. Now I’m sucking them down like there’s no tomorrow. Two packs a day.
I've been sitting here for two hours already. Time passes by so quickly when the mind is busy. I’ve got something going on, but I see problems already. We might have multiple disconnected regions on the same page, and the effect has to flow through them seamlessly. I have to track the global coordinates and just draw the damn thing with a local offset. If the regions are far apart, the smudge might not be visible in all of them at once. No sense in redrawing the canvas if the thing is entirely out of its bounds. We can calculate if the smudge is inside of each rectangular region and omit to redraw it when they don’t overlap. I find some useful math shenanigans on StackExchange and plug it in.
My complete draw loop looks like this:
A figure reflects in my excessively glossy Dell XPS screen.
'What going on here? Is it still 2015? Ever heard of requestAnimationFrame()?'
Douglas. His real name is Bob-Douglas, but I just call him Dick. Funny guy. Rumors go he can recite the complete team channel conversation from Slack by heart.
'What are you talking about? No, I’ve never heard of it… I’ve never heard of anything. I don’t even know what I’m doing here.'
Let’s see what Dick is trying to tell me. According to the documentation, by calling window.requestAnimationFrame() you’re telling the browser that you wish to animate something and that the specified callback should be invoked before the repaint. This is better for performance reasons as requestAnimationFrame() calls are paused when running in background tabs.
This approach needs a little adjustment. If I keep calling requestAnimationFrame() the browser will try to keep up with my screen’s refresh rate and the animation is too quick. I’ll slow it down to 60Hz by checking the timestamp parameter that gets passed into my callback. Much better.
My job here is done. I close the lid, take another shot of whisky and head out on the street. I’ve got to find her. I’ve got to see her again. Don’t try to stop me and don’t you come looking for me. It’s a big city, and I’ll be hiding in the shadows. The best chance you’ve got is hearing the receding echoes of my footsteps as I fade into the darkness.