The 20-20-20 Rule

Protecting Your Eyesight

I recently read a news item on how the recent lockdowns could be affecting people's eyesight.

A study showed that a large proportion of people believed their eyesight had been deteriorating through their time solely working from home. This appears to be down to prolonged periods of time in front of the computer, and presumably fewer distractions and reasons to get up and look away from your screen compared to working in an office.

Fight for Sight, a research charity, recommends screen users should look at something 20 feet away, for 20 seconds, every 20 minutes.

Sight loss can be avoidable, and strategies like this can help.

Keeping Track

Another fact about lockdown is you don't have a whole lot of options for things to do. So my time has been spent mostly working on random software projects (and drinking Left Handed Giant).

With this in mind, I built a quick web app to remind you to follow the 20-20-20 rule. The timer beeps to alert you every 20 minutes and counts down the 20 seconds you need to be looking away. It's built in React & Typescript and uses the HTML canvas tag for some basic animation of a timer ring.

A small app, but a few nuances to bear in mind to have React playing nicely with the canvas tag. To get a smooth animation you need to make calls to requestAnimationFrame. This prompts up to 60 refreshes per second and gets a smooth motion.

The side affect of this is obtaining access to state isn't quite as straightforward as when dealing with normal JavaScript timers and intervals. In this case accessing a paused prop, to establish whether to continue to animate. Once into a loop of requesting animation frames, you'll never get the update to that prop before another animation frame has already been requested, and repeat.

However, much like with timeouts and intervals, keeping a reference to the animation request ensures you can cancel it cancelAnimationFrame(animationRequest).

I have to be honest; the timer is pretty annoying. 20 minutes comes around very quickly and then 20 seconds somehow seems an age. Still, I'm giving it a go while I work through the day. I guess it might actually make a difference to my eyesight in the long term?

You can find the timer at: byr.io/202020.

The source code is on github.