Jordan Koschei Digital product designer

Page 4

Remote Work Rituals

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.

Finding an iOS Mobile Safari CSS Bug: rgba() with CSS variables in box-shadow

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.

iOS Mobile Safari Box-Shadow RGBA CSS Variable Bug
On the left, links in the content are underlined black. On the right, they're underlined properly with transparent pink. Nav links in the header are unaffected because those underlines are pseudo-elements with transparent backgrounds, and don't use box-shadows at all.

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:


    :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);

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.

Productized Services

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.

What I Hope for the Future of the Hudson Valley Tech Scene

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.

Read More →

Long Dock Park, Beacon NY

We took the dog to Long Dock Park in Beacon yesterday. The weather was perfect (a far cry from today’s freezing deluge), so here are a handful of photos to commemorate the sunshine.

Path at Long Dock Park in Beacon, NY
Long Dock Park, or Riven?
My wife and dog at Long Dock Park in Beacon, NY
We got the dog to look at the camera!
A view of the Hudson River towards Newburgh from Long Dock Park in Beacon, NY
The sun setting over Newburgh, looking towards New Windsor.

Apps, Stop Infantilizing Your Users

I’m getting tired of that cutesy, flat-shaded, CalArts-style aesthetic that so many apps seem to have adopted.

Headspace Website
This is the homepage for Headspace, a meditation app designed for adult humans.
Duolingo App Store Page
Duolingo is a great app. This character looks like it came from a startup promo video with ukelele music in the background.

These feel just a few steps removed from Clippy to me. Am I just getting cranky in my old age, or are there a lot of apps that infantilize their users, as if we wouldn’t be interested in a product if it didn’t look like it was designed for toddlers?