Jordan Koschei jordan koschei

Page 4

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:

<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.

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?