Web tools and Remote work success

Remote work success.

Develop and follow a routine to eliminate decision fatigue and procrastination

The first step towards eliminating distractions at work happens before you set foot in the office. Having a regular routine and schedule can help reduce decision fatigue and procrastination.

If you always write in the mornings and always answer emails in the afternoon, there are 2 fewer decisions to make when you start your work day. Wake up, get coffee, and sit down to write. Eat lunch, come back to the office, and open your inbox.  Work remotely for a little while, you start to recognize when you’re most productive and when you’re easily distracted. If you have more energy and focus in the mornings, use that time to tackle the big, important tasks in your day. If you know you’re more likely to get a slow start, begin your day with some easier, low-energy work to build some momentum.

“Stick to a regular schedule to reduce decision fatigue and procrastination.”

Use flexible scheduling to your advantage

One of the advantages of working for some remote companies is flexible scheduling. Having the freedom to arrange your schedule around when you’re most productive, or being able to duck out and take your child to daycare or your dad to the doctor can be a true benefit.

But with freedom comes responsibility. There are likely times when you’re expected to be present and available. If you know having Slack notifications turned on is going to ruin your productivity, make sure you’re setting aside time later (or earlier) in the day to get your work done.

Related: How InVision uses Slack to power culture and communication

Another benefit of flexible scheduling is the opportunity to take breaks when your brain needs them. It’s okay to step away and walk the dog (or yourself!) for a few minutes. Remember that those breaks are meant to be short and refreshing; they are not meant for naps or video games. Just a word of advice from your friendly neighborhood remote worker.

Cancel meetings

Team communication often gets a bad rap when people talk about remote work. Some people ask, “How can you accomplish anything without meetings and drop-ins and impromptu sit-downs?”

Well, to be honest, if your company is doing it right, there should be more communication and productivity on a remote team. Err towards over-communicating. Ping your teammates and hop on a video call to hash things out. Attend those monthly video happy hours to get to know the folks on your team.

“Try to block out a day on your calendar that’s free of meetings.”

On the flip side of that, every issue or topic doesn’t require a meeting to work out. Try sharing a document in Dropbox Paper or Google Docs, or maybe (gasp!) send an email. Emails feel more substantial and official in the age of Slack and WhatsApp.

Some companies have instituted “no meeting” days so that employees can put their heads down and get work done. Even if it’s not a company-wide effort, try to block out a day on your calendar that’s free of meetings. Or better yet, schedule all of your meetings on one day per week. Sure, that day will be exhausting, but think of all you’ll get done the rest of the week!

Set up a work environment free of clutter

Is your desk covered with stacks of loose paper, piles of neon sticky notes, and a few half-filled notebooks? No wonder you can’t focus. Everything on your desk is vying for your attention, and your brain is more than happy to oblige.

Take a few moments at the beginning or end of your day to prepare your work area for, well, work. The same goes for your virtual desktop. If you can’t find the files or applications you need, it’s only a matter of time before you “accidentally” open your Twitter app and lose 30 minutes of an otherwise productive day. Keep open your project folders and the apps directly related to work. Keep everything else closed and hidden to avoid temptation.

Do Not Disturb all the things

At this point, you’ve set your schedule, canceled some unnecessary meetings, and cleared your workspace. It’s time to get to work. First things first: if you need to get real work done, close your office door. This does 2 things. First, it signals to anyone else around you that you’re working. Second, it blocks out distracting noises without completely isolating you from the world.

If you’re not in an office or if you don’t have a door, try putting a sign on your desk that indicates that you’re not to be disturbed. If someone doesn’t get the message, glare at them silently until they walk away. That should do the trick.

The next step? Get rid of all of those attention-thieving popups and alert sounds. Both Windows and MacOS have options (Quiet Hours and Do Not Disturb, respectively) to silence notifications for a set period of time. If you’re prone to jumping into your email or Slack every time that notification slides onto your screen, you’ve got to keep those notifications from appearing.

“If you need to get real work done, close your office door.”

Speaking of Slack, while it’s great for remote work communications and asynchronous messaging, it’s horrible for deep focus work. If you’re dedicated to getting some real work done, mark yourself as away in Slack, snooze your notifications, and set a Deep Focus or Slow to Respond status message that clearly communicates that you should be left alone.
Download a distraction blocker

Some people have excellent self-control. Twitter, Facebook, and Reddit can all sit in open tabs all day and never get a glance. For the rest of us, there are distraction blockers.

These tools are out there made to help you stay focused and keep efficiency at a maximum. There are extensions for browsers (StayFocusd and LeechBlock), tools for your entire computer (Self-Control), and even solutions that combine website blocking with time tracking and productivity tools (FocusMe). Don’t let technology get in the way of your productivity. Make it help you focus instead.

Use music or white noise to block out sounds and increase concentration

Great news! You’re in your office (or coffee shop of choice), you’ve closed Facebook, you’ve set your Slack status to “ WORKING”, and you’ve scheduled 2 hours to Get. Things. Done. The next step is to block out all of those noises that might draw you away from the task at hand.

When it comes to distractions, headphones are like magic. You can use services like Focus@Willor Brain.fm to tune into focus sounds and music that are scientifically proven to help you be more productive. You can use apps like Noizio to listen to background noise like a rainstorm or blowing leaves. You can even wear headphones (gasp!) without music or noise. “Headphones on” is a universal do not disturb sign.

Use a to-do list or app

Part of eliminating distractions is remaining focused on the task at hand. One of the best ways to do that is to eliminate multitasking. Once you’re distracted away from your primary task, “it typically takes 23 minutes and 15 seconds to return to [your] work.” That’s not productive.

Try using a to-do list. There are plenty of digital solutions, from something as simple as Apple’s Reminders to something that’s more process-focused like OmniFocus. Or you could go the analog route. Write your 2-3 most important tasks on a sticky note, stick it to the top of your screen, and work on ONLY those tasks.

“Once you’re distracted, it typically takes 23 minutes and 15 seconds to get back to work.”

Use a self-reward system

Let’s be honest: you can’t work for 6 straight hours and still expect to crank out your best quality work. Your brain needs breaks. If you can control when you take those breaks, they don’t count as distractions, right?

One way to structure your time is to use the Pomodoro Technique. “The technique uses a timer to break down work into intervals, traditionally 25 minutes in length, separated by short breaks.” Using this technique structures your time and gives you an opportunity to catch up on Twitter or, better yet, stare out the window twice an hour.

You can also follow the 3-minute rule. Every hour, give yourself 3 minutes to take care of what’s gnawing at you: Start a load of laundry. Check Twitter. Lay on the floor with your dog. Whatever gives your brain a break.

Snacks and drinks

It’s hard to concentrate when you’ve got a rumbling belly. According to the book Willpower: Rediscovering the Greatest Human Strength, “…hypoglycemics were more likely than the average person to have trouble concentrating and controlling their negative emotions when provoked.” Fight those hangry urges and have a snack. Keep easy treats like hard candy and nuts in your desk drawer or travel bag.

And don’t forget to hydrate. According to “The Hydration Equation: Update on Water Balance and Cognitive Performance”, a study published by the US National Library of Medicine, “…recent literature suggests that even mild dehydration—a body water loss of 1–2%—can impair cognitive performance.” So keep a water bottle within reach. And hey, bonus! Keep drinking water and your body will tell you when it’s time to take a break.

“Fight off hanger and have a snack.”

Make the most of it

The tools and processes you need to succeed in remote work are out there. With a bit of planning and forethought, you can create the best work of your life from the comfort of your own home. Good luck!

We’re biased, but one of our favorite remote team collaboration tools is InVision Freehand. Take it for a spin and let us know what you think!

Tips from FreeCodeCamp

Chrome console. Below are some tools that allow me to spend less time there (from FreeCodeCamp)

  • WhatFont — The name says it all. This is an easy way of finding out the fonts that your favorite website is using, so that you can borrow them for your own projects.
  • Pesticide — Useful for seeing the outlines of your <div>s and modifying CSS. This was a lifesaver when I was trying to learn my way around the box-model.
  • Colorzilla — Useful for copying exact colors off of a website. This copies a color straight to your clipboard so you don’t spend forever trying to get the right RGBA combination.
  • CSS Peeper — Useful for looking at colors and assets used on a website. A good exercise, especially when starting out, is cloning out websites that you think look cool. This gives you a peek under the hood at their color scheme and allows you to see what other assets exist on their page.
  • Wappalyzer — Useful for seeing the technologies being used on a website. Ever wonder what kind of framework a website is using or what service it is hosted on? Look no further.
  • React Dev Tools — Useful for debugging your React applications. It bears mentioning that this is only useful if you are programming a React application.
  • Redux Dev Tools — Useful for debugging applications using Redux. It bears mentioning that this is only useful if you are implementing Redux in your application.
  • JSON Formatter — Useful for making JSON look cleaner in the browser. Have you ever stared an ugly JSON blob in the face, trying to figure out how deeply nested the information you want is? Well this makes it so that it only takes 2 hours instead of 3.
  • Vimeo Repeat and Speed — Useful for speeding up Vimeo videos. If you watch video tutorials like most web developers, you know how handy it is to consume them at 1.25 times the regular playback speed. There are also versions for YouTube.

VS Code Extensions

Photo Courtesy of Pexels

Visual Studio Code is my editor of choice.

People love their text editors, and I am no exception. However, I’m willing to bet most of these extensions work for whatever editor you are using as well. Check out my favorite extensions:

  • Auto Rename Tag — Auto rename paired HTML tags. You created a <p>tag. Now you want to change it, as well as its enclosing </p> tag to something else. Simply change one and the other will follow. Theoretically improves your productivity by a factor of 2.
  • HTML CSS Support — CSS support for HTML documents. This is useful for getting some neat syntax highlighting and code suggestions so that CSS only makes you want to quit coding a couple of times a day.
  • HTML Snippets — Useful code snippets. Another nice time saver. Pair this with Emmet and you barely ever have to type real HTML again.
  • Babel ES6/ES7 — Adds JavaScript Babel syntax coloring. If you are using Babel, this will make it much easier to differentiate what is going on in your code. This is neat if you like to play with modern features of JavaScript.
  • Bracket Pair Colorizer — Adds colors to brackets for easier block visualization. This is handy for those all-too-common bugs where you didn’t close your brackets or parentheses accurately.
  • ESLint — Integrates ESLint into Visual Studio Code. This is handy for getting hints about bugs as you are writing your code and, depending on your configuration, it can help enforce good coding style.
  • Guides — Adds extra guide lines to code. This is another visual cue to make sure that you are closing your brackets correctly. If you can’t tell, I’m a very visual person.
  • JavaScript Console Utils — Makes for easier console logging. If you are like most developers, you will find yourself logging to the console in your debugging flow (I know that we are supposed to use the debugger). This utility makes it easy to create useful console.log() statements.
  • Code Spell Checker — Spelling checker that accounts for camelCase. Another common source of bugs is fat-thumbing a variable or function name. This spell checker will look for uncommon words and is good about accounting for the way we write things in JavaScript.
  • Git Lens — Makes it easier to see when, and by whom, changes were made. This is nice for blaming the appropriate person when code gets broken, since it is absolutely never your fault.
  • Path Intellisense — File path autocompletion. This is super handy for importing things from other files. It makes navigating your file tree a breeze.
  • Prettier — Automatic code formatter. Forget about the days where you had to manually indent your code and make things human-legible. Prettier will do this for you much faster, and better, than you ever could on your own. I can’t recommend this one enough.
  • VSCode-Icons — Adds icons to the file tree. If looking at your file structure hurts your eyes, this might help. There is a helpful icon for just about any kind of file you are making which will make it easier to distinguish what you are looking at.

In Conclusion

You likely have your own set of tools that are indispensable to your development cycle. Hopefully some of the tools I mentioned above can make your workflow more efficient.

Do not fall into the trap, however, of installing every tool you run across before learning to use the ones you already have, as this can be a huge time-sink.

I encourage you to leave your favorite tools in the comments below here, so that we can all learn together.