New Site, Who Dis?

Today I’m proud to show off the latest evolution in my personal branding. This site uses the same color palette (Solarized) as the previous jQuery mobile-based site, but besides that it’s brand new. While the old site was mobile-focused, this new site takes advantage of larger screens and also reformats to display well on mobile devices. One thing that hasn't changed since 2013 is my personal brand — why mess with a good thing?

Two great tastes

Previously I struggled to represent the dual nature of my services, half design, half technology. This dichotomy led to me making two separate business cards; the better to serve both types of clientele.

Unfortunately, this extended to two separate but parallel websites, one for each audience. This fragmented digital presence proved fraught to maintain, bad for SEO, and entirely lacking in synergy.

Coincidentia oppositorum

Terence McKenna said, “It’s my assumption, whenever I am confronted with opposites to try to unify them.” I followed the wise words of the bard, and after a few sketches and rounds of prototyping I had something that seemed usable and elegant.

The two sides of my business — facets of my personality — if you will, are stacked like cards on top of each other. Transitions and animations are used sparingly, and to advance to plot, as it were. Scroll-snap helps navigate between sections, whether by swiping, using the arrow keys, clicking on the arrows beside the titles, or clicking on the navigation. Navigation in each domain happens independantly, so if the user isn’t linear and prefers to flip back and forth they can do so without losing their place.

Recent CSS advancements have made the implementation far easier than it would have been when I first envisioned it (thanks, Internet standards bodies!) That said, there’s nothing truly bleeding-edge, so it should render well across browsers and platforms (but please tell me if you find a bug).

Giving credit

I am grateful to those that make the tools and tooling that make development easier, shoutouts in the colophon section.

Maintaining a through-line with the last iteration of this site, I continue to use an old favorite, the Solarized color palette. I’ve kept the colors the same for my site, resume, and business cards: Blue means design, yellow is development, green is technology, and red is management. Recently, browsers and operating systems have begun supporting dark mode. Happily, Solarized ships with dark mode support baked in! Go ahead, choose sides:

Choosing the right type makes a design sing, so I‘m proud to continue using Hoefler&Co’s Mercury Text and Tungsten. Betting on the right horse from the start means never having to rebrand. Thanks, past me 🤝

Baseline, online

An elegant typographic weapon from a more civilized era, the baseline grid helps maintain rhythm and flow on the printed page, and is table stakes in any respectable desktop publishing tool. Not so much on the web, where measures of text and alignment are fluid. There have been attempts to make native baseline grids in CSS, but for now it’s a labor of love, and somewhat of a manual process. I’ve done what I can to ensure that most of the text on the site conforms to a 28px baseline. You can, as the old adage goes “trust, but verify” by turning on the baseline grid overlay.

A stable foundation

It’s my hope that this design and implementation will pay dividends down the line. I look forward to living in this cozy digital home for a long time.

Shorthand Stack: Font Shorthands for Consistent Metrics in CSS Font Stacks

Inconsistent font metrics are the bane of a front-end developer’s attempt to present as uniform as possible an appearance across browsers and platforms. Different fonts can have different metrics that cause unexpected differences in layout and positioning. When matched poorly in CSS font stacks, fallback fonts with metrics sufficiently different from the specified font can cause jumps and realignment as the browser loads the fallback font.

Problem, Solution.

To address all of the above deficiencies in mismatched CSS font stacks I have pinpointed a simple, concise, reliable solution*. It uses repeated declarations of the CSS2 font shorthand property, progressively overriding each other. In contrast to the CSS font stack order of most-preferred to least-preferred, this technique progresses from least-preferred font rule to most-preferred font rule.

Exempli Gratia

A classic CSS font stack is ordered in descending preference, as follows:

Let’s see the difference in metrics between these three fonts before compensation:

• serif
• Georgia
• Charis

Checking the fallback fonts in the latest project I was working on, I noticed that Times (the font my system picks for serif) is substantially smaller than either Georgia or the desired Charis. To compensate, I’ve increased the font size to 18px for serif and adjusted the line height proportionately to 1.125em. My shorthand stack technique works as follows:

Note that while Georgia and Charis have similar optical sizes, they have substantially different vertical positions. This technique corrects for both optical size and vertical position by allowing separate combinations of font size and line height per font. After compensation:

• serif
• Georgia
• Charis

Note that while this technique is less elegant than stacks based solely on font-family, it has the advantage of giving added flexibility whilst being almost as concise. Feel free to reach out on Twitter to discuss the #shorthandstack idea, and if you know of prior art, let me know!

What the FOUC?

A related issue, albeit one not covered in the scope of this technique, is the so-called FOUC (Flash Of Unstyled Content) or FOUT (Flash Of Unstyled Text).

* And yes, I know about font-size-adjust, but the browser support is abysmal. It also doesn’t allow changes to line-height or other metrics.

CSS Clock with Connected Hands

The idea came to me to implement a clock with connected hands, rather than the traditional arrangement having the hands pinned at the same point. It occurred to me that I could use CSS transforms and animation to move the hands. Below is a picture of a proof-of-concept that is animated using CSS. It produces neat shapes at certain times, notably equilateral triangles and zig-zags. It works in Firefox but renders more smoothly in Webkit-based browsers like Chrome and Safari.

The only Javascript that is used sets the initial position of the hands to the local time and updates the digits once a second, since that can’t (yet) be done in CSS. Check out the fiddle. I’m happy with the result, and even happier that front-end development with HTML/CSS/JS allows prototypes like this to be rapidly constructed and tested.

A complication of the hands being connected is that the clock tends to drift over time proportional to the movement of the hour and minute hand, since the CSS transformation doesn’t take into account the origin of the cascading frames of reference. If it were possible to set the frame of reference for rotation in CSS, this could be avoided. Perhaps in CSS version 4?

They Might Be Giants Interview

Last week I was honored to interview John Flansburgh of They Might Be Giants. I came out of retirement from being a WRFR volunteer and DJ for one night only and for a good cause. Many thanks to Joelle and Rachel for letting me be a guest host on their show "Jo & Cheech’s Radio Hour" on WRFR. Edited 20130226: The hour-long interview was split into two parts and broadcast as two separate shows:

1. Part 1, 20130219 (1:00:03, 52.2MB MP3)
2. Part 2, 20130226 (58:26, 50.4MB MP3)

Notable talking points include:

• The upcoming Nanobots EP, out March 5;
• Their worldwide 2013 tour, kicking off in Portland Maine on February 27;
• The new TMBG app for iOS (and soon, Android);
• and much, much more.

I hope you enjoy listening to the show and the interview as much as I enjoyed putting it together.