The two biggest distractions I’ve found when working from home are:

1. Housework. There’s always laundry to fold, dishes to wash, tables to tidy. It’s a great way to procrastinate without feeling like you’re procrastinating.
2. The Internet. Yes, it’s distracting anywhere. But without anyone walking by or looking over your shoulder, it’s that much worse.

Here are some ways to combat distractions. Many of these have worked for me, and some come recommended from others:

• Put your phone out of site. Out of sight, out of mind.
• Use an Internet blocker. Focus is a good one. You can set a certain amount of time, and it’ll block distracting websites and apps.
• Schedule a time for housework. Give yourself a set amount of time and you’ll be shocked how quickly you can clean.
• Get a change of scenery. If one environment isn’t working for you, decamp to a coffee shop or similar.
• Get up and move around to reset. Move around a little, make some tea or coffee, and stretch your legs before coming back to work. Sometimes that’s the reset that helps.
• Turn on one song, album, or playlist on repeat. It works! Pro tip: try it with thank u, next by Ariana Grande.

Having been a Christian for years, I own several Bibles. I appreciate that this is a luxury uncommon in the history of the faith; for a long time, it was rare to own a single Bible, and for longer than that it was rare to access to Scripture aside from hearing it read aloud. And there are still places on earth where owning a Bible can get you thrown in jail or worse.

Wake up. Shower. Eat breakfast.

Go upstairs: home office. Turn on computer. Wait for computer to boot up.

Go downstairs to kitchen. Start electric tea kettle. Fill up bottle of water.

Tea kettle taking too long. Check phone. Browse Twitter.

Tea kettle done! Pour water into mug, add teabag, add honey. Take tea and water upstairs.

Computer on. Open up email. Delete unimportant messages. Triage the rest.

Check in on communities — Dribbble, AIGA Upstate Slack, HV Tech Slack, friend Slack. Check Twitter.

Light candle — candle helps with focus. Turn on lava lamp acquired during wife’s cousins’ white elephant gift exchange. Candle and lamp essential pre-work rituals.

Open Basecamp. Wait for Basecamp to load.

Hands are dry — too much winter. Go downstairs, apply hand lotion. Go upstairs to office.

Click over to Basecamp notifications. Too impatient — hand lotion now on trackpad. Wipe off trackpad.

Check Basecamp notifications, figure out what happened at work since last check-in. Lots happened; work is one time zone behind, has whole extra hour in afternoon.

Open up Things. Look at personal items. Be realistic; move unpleasant tasks to tomorrow. Check work items. Move today’s tasks to Today view.

Start on first task.

False start — check Twitter. Check news sites. Check Hacker News.

Take two. Start on first task. Nope — Basecamp notification. Check Basecamp, say good morning to coworkers, return to task.

Encounter slight resistance in task. Pick up phone and check Twitter. Check news. Nothing changed in last ten minutes. Desk is messy; tidy up desk.

Remember to turn on Focus. Block distracting websites. Put phone on shelf out of sight. Ready to start for real.

Just kidding. Dog barks. Take out dog to go potty. Try not to be frustrated.

Come back inside. Walk upstairs, get situated. Try to remember first task.

Wait — computer desktop disorganized. Reorganize computer desktop. Keep going — reorganize Dropbox. Now all files have tags.

Drank too much tea. Go downstairs, go to bathroom.

Hands dry again after walking dog and washing hands. Re-moisturize.

Walk upstairs. Press button to put standing desk in standing position.

Never mind — too sluggish to stand. Lower standing desk back to sitting position, re-situate chair.

Remember first task. Don’t want to feel unaccomplished at end of day. Don’t want to let down self, company, coworkers. Time to get busy.

Take inventory. Candle lit, websites blocked, phone hidden, dog tended, email closed, hands moisturized.

Start work for real.

Right after launching the latest update to this website, I caught a mysterious visual glitch — link underlines, which are supposed to be pink in most places, were showing up black in Mobile Safari.

To achieve the accent color link underlines throughout the site, I set text-decoration: none and fake the underlines with an inset box-shadow:

box-shadow: inset 0 -2px 0 rgba(var(--brand-color), 0.5)

This works fine on Chrome, Safari, and Firefox, but on Mobile Safari it shows as straight black.

Why CSS variables?

Some background: I recently added the ability to change the accent color on specific pages of the site. On different case studies, for example, the accent color changes to match the brand of the project being discussed.

I do this by setting a variable in the front-matter of each piece of content, with the default set to the site’s brand color in config.yml. I turn this into a CSS variable in the <head> of each page.

Since I need to change the transparency of that color, I don’t store it as a hex value; I store it as RGB values, so I can use it as the first argument of rgba(), like so:

rgba(var(--brand-color), 0.5)

Finding the Solution

Some quick sleuthing shows that I’m not the first person to run into this issue — there’s a question on Stack Overflow describing the exact same thing.

The accepted answer suggests that we can fix this by making a CSS variable out of the full string of box-shadow arguments, like so:

:root {
    --color: 130, 16, 253;
    --shadowColor: 0px 10px 50px 0px rgba(var(--color), 0.08);
}

I needed transparent accent colors in more places than just box-shadows, though, so I followed the suggestion in one of the unaccepted answers instead, and made separate variables for each of the opacities I use throughout the site:

<head>
  
  ...

  <style>
    :root {
      --brand-color: rgba(194,55,97, 1);
      --brand-color-point97: rgba(194,55,97, .97);
      --brand-color-point9: rgba(194,55,97, .9);
      --brand-color-point5: rgba(194,55,97, .5);
    }
  </style>
</head>

Sure enough, this works! Now the box-shadows render properly on Mobile Safari as well as elsewhere.

It’s not as elegant as my first implementation, but hey, that’s front-end development. If it works, it works.

A podcast episode got me thinking about Productized Services — basically, taking a consulting service, standardizing the way you provide it, and selling it as a product.

Services are more flexible, but less scalable. If you’re a web designer who builds WordPress sites for clients, there are only so many projects you can take in a year, but those projects can be as custom as your clients need. You can charge more, because it’s your time and your expertise that are being sold, and those aren’t fungible.

Products are more scalable but less flexible. Instead of building custom WordPress sites, maybe you offer website setup and maintenance, with a starting fee to establish a website and perform minor tweaks on a WordPress theme, and a monthly maintenance cost. You charge less because there isn’t as much room for customization — you’re charging for the website itself, not your time and expertise creating it. However, you can sell more, because your process is systemized and can be performed more quickly, and you can train others to follow your procedures and help you.

As a service, the onus for setting the scope falls on the demand side. (“What do my clients/customers need?”)

As a product, the onus for setting the scope falls on the supply side. (“What do I offer my clients/customers?”)

It isn’t usually this cut-and-dried, and I sure hope you aren’t building WordPress sites for clients in 2019 unless your services are reallllly niche or special (we have SquareSpace now). But I think this is a good example for how productized services differ from regular services.

I had several conversations at CatskillsConf about the present and future of the Hudson Valley tech scene, and several of the ideas I heard dovetailed nicely with my own thinking about this subject.

I’m cataloguing these here for posterity and comment. Some of these are my own ideas, some of them come from conversations with others, but all of them owe a debt to the spirit of cautious optimism that’s been in the air lately.

Read these, think about them, make suggestions. Better yet, pick an idea you particularly like and take action.