design

The physical Apple Card is a case of form over function

Apple Card is not just the physical card you get in the mail when you sign up for an Apple Card. There are a lot of upsides to what Apple's doing with Apple Card and Apple Pay.

I get it. And I also believe the physical titanium Apple Card is a marvel of engineering. Kudos to the metallurgists and designers who produced it—it would easily make for a durable and beautiful display piece on the history of monetary transfer.

Apple Card - Jeff Geerling - Front hero shot

The card feels great in your hand. It has a beautiful white finish. The letter and logo detail is impeccable.

Apple Card - Apple logo detail

The way the magstripe seamlessly integrates into the titanium structure of the card is beautiful, and probably required some extremely precise machining.

Jeff Geerling.com now supports Dark Mode in macOS 10.14

Over the years my site has evolved quite a bit; I started this site (well, one form of it at least) around 2004, when table based web design was still a thing. I've evolved the design from table-based to CSS, to semantic CSS, to CSS + RDF, then to mobile-first... and now that macOS 10.14 Mojave is here, with a snazzy (and way easier on my eyes) dark mode, I have made the design work well in both normal (light) and dark mode on macOS.

It's using a new feature in the Webkit nightly builds (er, now called Safari Technology Preview), a media query named (at least, for now) prefers-color-scheme.

And here's how the site looks when you're using Safari Technology Preview 68+ in macOS Mojave with Dark Mode:

Jeff Geerling.com in dark mode on macOS Mojave

Changing the font for one character in a string on a Drupal site

File this under the "it's a very bad idea, but sometimes absolutely necessary" category: I was working on a site that wanted to use a particular font for headlines throughout the site, but the client detested one particular character (an ampersand), and requested any time that character were to occur in the page title, it would be swapped out for a different font.

If at all possible, you should avoid doing what I'm about to describe—but in the off chance you need to have an automated way to scan a string of text and change the font family for one particular character, this is what to do:

First, you need to create a special CSS class that you can apply to the individual character, so in your theme's CSS, add something like:

Yet Again: Catholics, please stop stealing artwork and graphics!

I feel like a broken record... yet again, I was perusing the Internet (this time, Twitter), and then I noticed an illustration—a very familiar one—of the Roman collar (the white collar worn by priests):

@Boutleg didn't create the graphic; it looks like uCatholic originally posted the graphic on Facebook, where it was shared and reshared thousands of times, and liked (through that network of shares) many thousands of times.

Responsive design > mobile sites

There are individuals and companies who still believe it would be in their best interest to maintain a 'desktop' version of their website, and a completely or mostly-separate 'mobile' version of their site, and this belief (especially in the corporate arena) was strengthened by a recent (2012) report by the Nielsen Norman Group, Mobile Site vs. Full Site, which recommended a separate mobile site with stripped-down features and different design. The idea of having a mobile-optimized design is good—but not with the cost of making it a stripped-down version of your 'full' site, as Nielsen seems to recommend.

Mobile PNC Website

There are many problems with having separate versions of the website, especially as we near a point where many sites are accessed more on mobile devices (tablets, smartphones), and less on traditional desktop computers:

Server Check.in - Website and Server uptime monitoring

Server Check.in is a simple and inexpensive server and website uptime monitoring service I've recently launched.

Server Check.in logo

If you have a website or online service you need to make sure is running, Server Check.in is a great way to get notified when there's a problem. Unlike most other monitoring solutions, Server Check.in offers free SMS (text) messages and email notifications, and it only costs $15/year (just $1.25/month!).

The Motivation

There are probably thousands of other uptime monitoring services on the web, and it's typically a good idea to use existing tools rather than build your own—if they're practical for your needs!

I had three main requirements for any service I wanted to use:

Computers are amazing

In a break from the typical kind of writing I do here, I'd like to mention a few thoughts I've had after reading some opinion pieces on the reparability (or lack thereof) of the new MacBook Pro with Retina display.

Early PCs and Macs

The first computer I owned was a scrap-parts 386 DOS-based PC. I found a working 386 processor from a broken computer, scrounged 1MB of RAM from a couple dead motherboards, found a small hard drive and floppy drive, and slapped it all together inside a huge metal case. It ran great, except when one of the components failed—which seemed to happen on a monthly basis.

My First 386 PC - Gutted
My first PC - and all the tools necessary for PC repair!

While using early PCs, I had to deal with IRQ addresses, serial port driver conflicts, floppy drive cables malfunctioning, hard drive errors, and power supply fuses breaking... not to mention the myriad software incompatibilities with various bits of hardware (and I couldn't just Google "<device name> + <windows 3.1>"!).

I even spent quite a bit of time hardware hacking with the first few Macs I owned (a Mac IIci, a PowerBook 180c, and then a few other Mac desktops and towers—more history here).

Throughout high school and college, I helped a few hundred people repair or upgrade their computers, first through 'Jeff's Computer Service' (as a side/hobby job), and then through Midwestern Mac, LLC (this site's company). I loved working on computers, and still do! From the earliest computers until the past five or so years, most computers required some level of technical knowledge to be used effectively, and required repairs and upgrades at least once or twice a year.

But times have changed; I've since dropped 'computer repair' from the services I provide, because the only service requests are for Windows users who have found some way to clutter up their computer with strange search toolbars and other junkware.

Pope exhorts us to reflect in silence during 2012 Communications Day

Pope Benedict XVI's message for the 46th annual World Communications Day has been published on the Vatican website. We learned earlier that his theme for this year is silence, and the message is brief and impactful.

One passage that stood out in my reading was the following (emphasis mine):

Attention should be paid to the various types of websites, applications and social networks which can help people today to find time for reflection and authentic questioning, as well as making space for silence and occasions for prayer, meditation or sharing of the word of God. In concise phrases, often no longer than a verse from the Bible, profound thoughts can be communicated, as long as those taking part in the conversation do not neglect to cultivate their own inner lives.

Making your current Drupal theme responsive, simply

For a few of my smaller sites (like my portfolio website, www.jeffgeerling.com), I've had a little todo item on my list for the past year or so to make the them 'more responsive'—mostly meaning "make it legible on an iPhone or comparable Android phone". Most tablets I've used render traditional 960px layouts appreciably well, including the iPad, Kindle Fire, Samsung Galaxy Tab, etc., so I want to just focus on making the websites usable on smartphones.

What we had, and what we're going for (which one seems more readable and user-friendly on a small screen?):

Life is a Prayer.com - Responsive Design (Before)    Life is a Prayer.com - Responsive Design (After)

I'll show you how I quickly (in less than half an hour) added a <meta> tag to the site's <head> tag to instruct mobile phones on the width of my site, and how I added a simple @media query to my theme's stylesheet to apply a few layout rules to make the design of the site better for mobile phones.

Pages

Subscribe to RSS - design