All posts in design

More on the saga of “but first, coffee”

I’m late in sharing this, but last December Sprudge published an excellent article looking at the history of “but first, coffee” (and my part of it). Highlights for me were an entry from etymologist Barry Popik showing the phrase appearing in a 1994 translation of Fyodor Dostoevsky’s The Brothers Karamazov. My own copy translates the phrase on as  “coffee first of all.”

Read What’s In A Meme? The Uncanny Journey Of “But First, Coffee” »

Corrupt / Glitchy Cursor in InDesign (CC 2017) in macOS High Sierra

UPDATE: 10/9/17 – I wasn’t able to apply the supplemental update since I’m on the beta (thx Apple), but a new 10.13.1 beta was released today, and the issue appears to be fixed. Thank god. I do still see graphic glitches with some shapes, but applying a transparency effect to any object fixes it.

UPDATE: 10/5/17 – Apple released an update which fixes the bug.

UPDATE: 10/1/17: The 10.13.1 Beta does not fix this issue. Here’s Adobe’s official page saying it’s a known issue and High Sierra is not supported.

Apple released macOS 10.13 High Sierra to the public today, and a nasty bug affecting InDesign from early betas is still an issue.

The issue causes the cursor to change into a box of glitchy lines. Other graphical tearing can sometimes be observed. In previous InDesign issues, disabling GPU acceleration (InDesign CC > Preferences > GPU Performance…) could fix the issue, but that is not the case here. The glitch seems to appear after InDesign loses focus (i.e. a different app is used and then the window switches back to InDesign). Restarting InDesign or the computer will fix it, but it the issue will quickly return.

Adobe is aware of the issue, but their current recommendation is not to upgrade. A suggestion echoed by other power users:

The issue has been reported to Apple and is being discussed in other Mac forums. It’s unclear whether it’s Adobe or Apple that will need to issue a fix. Fingers crossed it happens soon, as trying to guess where in the distorted area is the real point of the cursor is a major productivity killer.

Fixing PHP code coloring in Dreamweaver CC (2017)

When Adobe updated Dreamweaver CC from 2015 to 2017 they completely rewrote the code coloring engine, bringing it into alignment with Brackets. This had the unfortunate side effect of obliterating all the previously available themes and granular color editing that had been available. Worst of all, the default Light and Dark themes have PHP code coloring that’s indistinguishable from regular text.

They have since released an update that allows the creation of user-editable .less files for custom code coloring. Adobe’s help documentation goes through the process for customizing the code, but it lacks the user-friendliness of the old interface.

Before the update, I was a fan of the RecogNeyes theme:

If you look in the Configuration > Themes folder in Dreamweaver CC 2017, you’ll see all the old themes are still there, they just aren’t doing anything anymore.

I attempted to manually recreate this theme pulling color values from RecognEyes.xml into a new custom main.less file. Though, after using the new Dark theme for so long, it seems too desaturated with the new dark UI.

Which has lead me to tweak it to this:

If you’re interested, you can go to Dreamweaver > Preferences, choose “Interface” and click the + to create a new custom theme based on Dark. Click the Pencil icon to edit the theme and paste this at the bottom of the file.

/* RecogNeyes Saturated */
@background: #182225;

/* Color Theme Selectors & Color Values */

.cm-atom, .cm-string, .cm-string-2, .cm-hr {color: #DC78DC;}
.cm-number, .cm-attribute, .cm-plus, .cm-qualifier {color: #fd9794;}

/* PHP Specific Code Colouring */
.PHP {
  .cm-meta { color: #79ABFF; font-weight: bold; }
  .cm-keyword { color: #00E000; } 
  .cm-operator { color: #EFC090; } 
  .cm-variable { color: #FF8080; }
  .cm-variable-2 { color: #2696b2; }

Save the file and you’re done! Updated PHP code coloring that’s slightly more WordPress friendly. You may need to go back into preferences to select the theme you created and click “Apply.”

Celebrate National Coloring Book Day belatedly with this podcast coloring book!

Did you know yesterday was National Coloring Book Day? Neither did I until 7pm last night! It was good motivation to finish a beta version of this podcast coloring book I’ve been idly working on for awhile.

Featuring some your favorites and mine:

Download a black & white PDF for printing and coloring fast, before this whole adult coloring trend finally collapses in on itself.

How to make any photo work as a 360 photosphere on Facebook

Facebook recently rolled out the ability for anyone to upload a 360 panorama or photosphere that can be clicked through on desktop, viewed with certain VR headsets, or viewed by moving your device around  on mobile. Flickr introduced a similar feature last December when it launched Flickr VR. I’ve been using that to upload 360 panoramic screenshots from ActiveWorlds, so was looking forward to doing the same on Facebook.


Unfortunately I quickly discovered Facebook wasn’t automatically recognizing the screenshots from AW. Some googling revealed that Facebook requires images to have this meta tag to work:


I can view that this is missing from the raw metadata in Photoshop, but Photoshop doesn’t let you directly edit the raw meta data. There are some software tools to do this, but I found a simpler method. By extracting the raw metadata from properly formatted panoramas, I was able to create an XMP template I can now import in Photoshop to make Facebook read any photo as a 360 photosphere.

How to add missing equirectangular photosphere metadata in Photoshop (CC 2015/2017/2018)

  1. Download the XMP template with required projection meta tag and unzip it.
  2. Open the photo you wish to make into a panorama in Photoshop. 6000 x 3000 pixel images work well (this is what AW produces)
  3. Go to File > File Info and select the Raw Data tabmeta-rawdata
  4. Click “Template” and choose “Import…”
  5. Navigate to where you saved the XMP file in step 1 and click “Open.” In the dialog that opens, choose “Keep original metadata, but append matching properties from template”
  6. The new metadata with the equirectangular tag should now be added.
  7. Click OK. You can now save the photo and upload it to Facebook. If everything worked, your post dialog will say “Say something about this 360 photo…” and a globe icon will appear on the thumbnail.
    Screen Shot 2016-06-19 at 5.56.42 PM
  8. Congrats! You’ve now manually created a 360 photo.

As a sidenote, if you’re interested in capturing 360 photos in the real world, new versions of the Android camera app have the feature built in. If you’re on iOS, you can download Google’s Street View app, which has a 360 capture mode. Street View has supported uploading photospheres for a few years now.

If you’re looking for a simple app for uploading and viewing photospheres using a headset like Google Cardboard, I recommend

Update: 08/14/16

If you’re having trouble getting iOS panoramas to upload as photospheres to Facebook, I’ve found Facebook often requires the panorama to be the full width, meaning you can’t stop early. If you have a differently sized image, you can try working from an image template instead.

  1. Download this image.
  2. Copy the image you’re trying to get to work as a panorama into a new layer in this document.
  3. Save the image as a jpg.

Update: 09/21/16

I’ve uploaded a basic template for full 360 photospheres. Add your images on top, keep the document the same size, and save as JPG, making sure to retain metadata.

Facebook’s published some extensive documentation for editing 360 photos and injecting metadata, but I think my solutions’s simpler. Using Facebook’s own templates can be much simpler than the method described above.

Sidenote: if you’re working with 360 video and trying to upload to YouTube, read this help page on uploading 360-degree videos.

Why I make something awful, every day

I just published my first entry on Medium, detailing some of my thoughts behind the last five years of making something awful.

Why I make something awful, every day

Back Vast: The Crystal Caverns on Kickstarter

My brother-in-law Patrick Leder just launched (and already successfully funded) a new tabletop boardgame Kickstarter. Designed by him and David Somerville with art by Kyle Ferrin, Vast: The Crystal Caverns is the ultimate asymmetric cave-crawling adventure where you become the brave Knight, Goblin horde, massive Dragon, or malevolent Cave. I’ve been helping with design and layout and also put together the Kickstarter video, featuring Kyle’s amazing art.

Check it out! And back, if you’re so inclined.

Exploring off canvas nav menus with Bootstrap

I’ve been stuck in the weeds figuring out navigation patterns for a major project at work, so I thought I’d quickly share some examples I’ve been referencing. The site Adventures in Responsive Navigation has been a godsend, along with the navigation patterns in Brad Frost’s This Is Responsive.

Off Canvas Menu Resources

Off Canvas Examples

Mega Menu Resources

Additional Resources

Some link highlights from this year’s SXSW

I saw lots of great (and some not so great) panels once again this year in Austin at SXSW. These are their stories.

Interactive Long Scroll Features

Pitchfork mentioned that working on these interactive features has improved the design of their festival sites and made other projects work better

Prototyping Tools
Photoshop Extract

Hot New Apps

Style Guides / Style Frameworks

Some Session Highlights

Weird Internet Art
(It’s recommended you play this with the volume muted while listening to this instead.)

SXSW Keynotes
This year’s aren’t up yet, but they will be eventually and you can watch last year’s here:

Bruce Sterling’s 2013 closing keynote remains a landmark for me:

Recommended permissions setting for WordPress in MAMP PRO

After unsuccessful googling for how to resolve the issue of WordPress asking for FTP credentials on local installations, I finally arrived at a set of working permissions for MAMP Pro in OSX.

WordPress recommends CHMOD / file permissions of 755 for directories and 644 for files, but what I didn’t know of the top of my head was how that correlates to MAMP’s settings. I figured that out, but WordPress still wasn’t updating correctly. Then, I found this WordPress support thread where people said electronicink’s solution worked for them. Following Yosetmite, OSX/macOS File Sharing Permissions no longer give an FTP sharing option. Back to the drawing board! The missing key was who the Owner and Group should be. www! Duh. I’d likely changed it to myself and admin in my failed attempts at manually granting access through Finder’s Get Info feature.

Anyway, here’s the combination that finally worked for me. This dialog is accessed in the Hosts tab of MAMP PRO by clicking the people icon next to the folder icon where you choose “Document root.”

Screenshot from MAMP Pro 4.4 on macOS 10.13.4, but permissions and user groups are the same across MAMP and OS versions.