DEV Community: seb

Routines I Use to Stay Happy & Zen While Spending Multiple Hours Per Day in Front of a Screen

seb — Mon, 07 Feb 2022 08:25:03 +0000

As web developers we tend to spend many hours day in and day out staring at a computer screen and in mostly static positions. This may over time put a toll on our physical and mental wellbeing.

This is something I care about deeply because to me optimizing physical and mental wellbeing is an absolute priority, and over the years I've implemented different tools, routines and techniques that allow me to stay healthy and take care of my body even while I'm building my current projects in front of a computer. In case you're curious, these days my two main projects are fffuel, where I build a collection of SVG generators, design tools and HTML templates as well as muted.io, where I create interactive references for music theory.

In this article I'll share some of the things I do to stay healthy and active while doing creative work on a computer.

Note that these are just my personal choices and experiences and shouldn't be viewed as medical advice of any sort.
Please seek out the advice from a licensed health care provider for any physical or mental health concern.

Taking Mini-Breaks

I like to use this Pomodoro app on my Mac called Be Focused, but I use it to remind me to take a short break every 20 minutes instead of using it for the normal Pomodoro productivity technique. So I have it setup so that every 20 minutes there's a gentle chime reminding me to take a short break, where I move around, do things like air squats, stretch for a bit and look outside the windows at the trees and the nature I can see from my place.

I also put together a little web app called rrrelax to encourage taking long deep breaths. Using this app for a minute here and there during the day can be an other options for mini breaks that are calming.

Staying Focused

When I'm not in a mini-break, I make it a point to be laser-focused on what I'm doing. For this, I like to turn off notifications and keep my environment free of distractions. I don't think we are fundamentally made for multitasking, and I find it much more fulfilling to go deep into a task and let the rest fade away.

Going Analog

I've gotten into the habit of writing my todos and ideas on actual paper. I enjoy the tactile feel of writing on paper and it feels better to me to cross something off physically on paper than on a digital todo app. I even keep my upcoming due dates written on paper.

Lunch Breaks

I try to make it a point not to eat while I'm at the computer. I find that doing so makes me eat too fast and less mindfully, plus it encourages me to eat too much and not realize when I'm full. This one is trickier for a recovering type-A like me, but I find that not much beats taking a long lunch break outside in the sunshine. Trying it out for a few days might prove to be a real game changer by allowing to come back refreshed.

Protecting My Eyes

In my opinion, just like a smart construction worker would protect their hands from wear and tear, a smart knowledge worker would protect their eyes from strain and overuse. On top of taking mini-breaks every 20 minutes or so and looking away at a distance, I implement a few other things to project my eyes:

I use a tool like f.Lux to reduce the amount of blue light emitted by the screen. Some people use f.lux in the evenings only, but for me I'm now used to have it on all of them time, except when I need to see colors with more accuracy. When I turn it off now I'm always amazed at how harsh the 'normal' colors feel.
On top of using f.lux, I also wear blue-blocking glasses to reduce the amount of blue light that reaches my eyes from screens.
The default font size on most websites tends to be way too small in my opinion. I like to make most of the longer text I read much larger, including in my code editor. My screen is large enough, so why not make it easier on my eyes, I feel.
I like to use the Solarized color theme in my code editor, as I find it gentler on the eyes from the less extreme contrast ratio. Duck Duck Go, if that also happens to be your search engine of choice, can also easily be setup to use the same colors as the Solarized theme. This way the things you look at the most have a contrast ratio that's less intense and more gentle.
I'm not a big fan of reading long blog posts on a computer screen. These days when I can I'll either print them on paper and read them while I'm outside in nature, or I'll use a plugin such as Speechify so I listen to articles instead of reading them. While I'm listening I can even do simple movements like mini Qigong routines.

Typing

This one was a serious time and willpower commitment, but years ago I decided to learn to type using the Colemak keyboard layout, and today I'm very thankful that I went through the challenge of re-learning to type, because my keystrokes are so much more efficient.

Natural Light

During the day natural light is a must for me and I find artificial light to be harsh and depressing. I know this is not always easy to implement, but for me I took that as my most important consideration when I decided on the location of my workstation. When the evening comes, if I happen to still be at the computer, I like to use side lamps instead of overhead light, and I also use red-tinted light bulbs so that the lighting is more conducive to calm and to keeping with a healthy circadian rhythm.

Setting up my Environment

If you happen to work from home and are able to setup the environment around you during the day however you like, I find that there are a few things that are conductive to more movement:

Keeping a yoga mat nearby and unrolled. I have a yoga mat near me that's always unrolled and ready for me. I like to go into a quick downward dog or child's pose here and there
Having a pull-up bar. I have a pull-up bar that I've setup in a doorway. The pull-up bar was inexpensive and I use it for pull-ups through the day here and there, and oftentimes I'll also use it just to hang for a bit and stretch my spine. It feels really good to me and now I don't get how I went so many years without a pull-up bar like that

Peaceful Environment

On top of having an environment around me that's conductive to movement and exposure to natural light, I also make a point to make it a peaceful and calming place. For this, I do a few things:

Diffusing some essential oils around my workstation. I like citrus oil blends, as I feel that it makes the place feel lighter and brighter
Keeping organic elements around like plants and crystals
Playing music that's appropriate for my current mood. That can often be very calm, soothing instrumental music, but sometimes it's also very energetic music. At times I'll find a track that really does it for me, so I'll put it on repeat for as long as I'm feeling it. The rhythmic and repetitive aspect help me stay in the flow of things.

Standing Desk

A standing desk is a must for me now, and I barely sit in front of a computer these days. My current standing desk is the Readydesk, which has been really perfect for me. Standing on hard floor statically doesn't work well for me either, so I found this 'anti-fatigue' mat called the Topo mat which mimics terrain and has different shapes where I can move my feet and be on a more natural surface that has some give. I alternate between standing on that mat and standing on a balance board from Fluid Stance, and at times I also stand on these wooden pieces called SoleSteps, which help with my posture and arches.

I keep a stool around for the minimal amount of sitting that I do. The stool is simpler and takes less room than a chair, it encourages me to keep a straight back when I'm sitting on it and it also encourages me not to sit on it too long since it's not as comfortable as a padded chair.

I find that alternating between these different options is really optimal for me, as it keep me active in different ways and eliminates the problem with being static.

Taking More Time to Myself

I decided to check out of the hustle and bustle, and now when it's pretty and warm out my first priority is to go spend time in nature, with one of my favorite activities being hiking in the mountains. I can easily bring a book or a journal with me while out in nature, so that I can still learn, think and take notes.

It can seem counter productive, but I've found over time that, at least for me, doing 8-hour workdays or so is actually slowing me down because it has too much of a negative impact of my energy levels, mood, creativity and general outlook. I found that often the best ideas will come to me as I'm out in nature. So for me personally, 4-5 hours of focused productivity is plenty, and much more than that ends up being a net negative for the most part.

In terms of having a more big picture view of the value of work and time spent being productive, I really enjoyed two books in particular: The 4-Hour Workweek by Tim Ferriss and Deep Work by Cal Newport.

Note however that having a totally different big picture view on the value of productive hours took years to fully sink in and implement in a way that works well for me. It wasn't done overnight, and I made choices over time that made it easier, like living outside of a major urban area and close to nature and cutting down on expenses that would make my lifestyle more expansive to maintain.

Technology Fasts

One thing that I've really enjoyed is doing is a weekly technology fast, where I'll avoid screens for an entire day once in a while. It can be challenging at first, and might not be feasible for every stage of one's career, but when possible I find that to be very beneficial and resourceful.

Self Care

Outside of spending as much time in nature as I can, when possible I also like to do some other forms of self care, including things like meditation, taking baths, ecstatic dancing or going for long walks. Once in a while I also like to offer myself a special session. Some ideas:

Getting a massage
Spa day
Going to a yoga class
Reiki session
Sensory deprivation tanks
Acupuncture

I really resonated with a quote I saw from an Instagram post that went a bit like this: "Self-care is Productive". It might not seem so in the short-term, but in the long term I find this to be absolutely true.

Sleep

Sleep is a major priority for me and and skipping on sleep is not an option at all for me at this point. I have found that being productive is often more about energy management than time management, meaning that having more energy beats having more time, and nothing correlates as much with having energy than getting plenty of optimal sleep for me.

Parting Words

In my view, humans shouldn't be serving computers, so I've designed an environment over the years that's more and more human-friendly and use technology in a way that serves me instead of the other way around.

I'm hoping that some of the things I've implemented in my own life will inspire some positive changes in yours as well. ✨

Playing Sound on the Web Using Tone.js and Alpine.js

seb — Tue, 02 Nov 2021 00:12:29 +0000

I've been having a ton of fun creating interactive musical tools and references over at muted.io. Things like an interactive circle of 5ths, a reference to all major and minor scales and a tool to play chords in keys.

Under the hood, these tools are powered by the Tone.js library, which is a set of utilities build on top of the Web Audio API, which makes it easier to deal with audio in the browser from a musician's perspective. For the aformentioned tools, the user interactions are handled using Alpine.js. I've found that the combination of Tone.js + Alpine.js really works like a charm.

This short post gives you a little primer on how you'd go about setting things up to play audio files in the browser in such a fashion.

First things first, you'll want to have both Tone.js and Alpine.js loaded onto your page. If you have a look at the Tone.js documentation it'll tell you installation instruction via npm, but personally I've been enjoying working with just a call to the minified script file itself. To do that via a CDN, you can add this in your page's head section:

<script defer src="https://cdnjs.cloudflare.com/ajax/libs/tone/14.8.32/Tone.min.js"></script>

And then similarly for installing Alpine.js:

<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>

Note that on a site like muted.io I've decided to load Tone.js only when the user has scrolled passed the relevant portion of the page. I'm using Alpine's Intersect plugin to accomplish that. This is of course optional and I may talk about the details of that in a future post.

With the setup out of the way, you should now see a message in your browser console that says something like _ Tone.js v14.8.32 _ , meaning that Tone.js has been properly loaded and is ready to go.

Tone.js Sampler

A sampler is an instrument that makes it easy to playback different audio files. Tone.js offers its own sampler instrument:

const sampler = new Tone.Sampler({
  urls: {
    C3: 'C3.mp3',
    'D#3': 'Ds3.mp3',
    'F#3': 'Fs3.mp3',
    A3: 'A3.mp3',
    C4: 'C4.mp3',
    'D#4': 'Ds4.mp3',
    'F#4': 'Fs4.mp3',
    A4: 'A4.mp3',
  },
  release: 0.5,
  baseUrl: '/sounds/piano/',
}).toDestination();

In the above code block I'm instantiating a sampler and passing in a path to audio files for different musical notes on the piano. In this case I'm using piano samples from the Salamander Grand Piano V3 project, but you could use any of your own samples. In this case, the sounds are in my project's directory under /sounds/piano/. You'll notice also that not all notes are included, that's because Tone.js is smart enough to repitch the samples and make up for any missing pitches in that way. This is really useful in saving on loading time for samples.

This setup works great in a musical contact for playing sounds that actually correspond to musical pitches, but you could of course use a sampler to trigger totally unrelated sounds. You could for example decide that C4 triggers the sound of a toucan while A4 is for an abrasive dog bark. 🐕

Playing the Sounds

Now that we have our sampler instrument setup, we're ready to start listening to user interactions and trigger the sounds. Let's first define a simple function that triggers the passed-in note:

function play(note = "C4") {
  sampler.triggerAttackRelease(note, "8n");
}

With this, calling play() will trigger the audio file associated with the note provided (or default to C4) in your sampler for a duration of an 8th note. The default BPM value in Tone.js is 120, which will be what controls how long a 8th note is. You can tweak the BPM value like this:

Tone.Transport.bpm.value = 96; // 96 BPM instead of 120

Now that we have our play function in place, we can use Alpine to setup a listnener on something like a button:

<button @click="play('A3')">Play A3</button>

And done! You should now hear the sample that your sampler has for A3. Note here that the button click is important because modern browsers require a user interaction like a button click to start playing sounds on a page.

Separating the attack from the release

Earlier we made use of the triggerAttackRelease on our sampler, which takes care of triggering the sample and also of releasing that trigger after the duration provided (a 8th note in our example). What if instead we wanted to play a sound for as long as the user is currently pushing a button? This is often useful for long samples that are to be played only while a note is activated (e.g.: a button is pressed). We can easily decouple the operation by using the triggerAttack and triggerRelease methods instead:

function startPlay(note) {
  sampler.triggerAttack(note);
}
function stopPlay(note) {
  sampler.triggerRelease(note);
}

Note that you could also pass in an array with multiple notes at once to any of those methods (triggerAttackRelease, triggerAttack, triggerRelease), allowing you to trigger things like chords, if you're triggering sounds in a musical context.

And now, we can once again make use of Alpine's event handling capabilities to :

<button
  @mousedown.stop="startPlay('A4');"
  @mouseup.stop="stopPlay('A4');"
  @touchstart.stop.prevent="startPlay('A4');"
  @touchend.stop.prevent="stopPlay('A4');"
>
  Play long sample
</button>

Here I'm using the mousedown and mouseup events to decouple the button press and button unpress. You'll also notice that I'm using touchstart and touchend, which fixes the issue that touch screen devices don't have a mousedown or mouseup event. To stop the event's propagation, I'm using the stop modifier on all events, and to prevent the default behavior I'm also using the prevent modifier on the touch events. This fixes an issue where the event would otherwise be triggered twice on devices with a mouse.

That's it! Hopefully this short introduction was enough to show you how easy it can be to trigger sounds in the browser and start having fun with that in your own projects! ✨ 🔊

For the sake of brevity, I kept the part involving Alpine.js very short and sweet in this post. In a real-world scenario, you'll likely want to make use of x-data to do things like keep track of the notes/sounds being played:

<div x-data="{ currentNote: 'A4' }">
  <button @click="play(currentNote);">Play note</button>
  ...
</div>