Here’s a video from Counter Culture detailing my favorite way to make iced coffee. This iced coffee, unlike others I’ve tried, doesn’t need milk or sugar to be enjoyable¹. Also, the method itself is not complicated nor does it require exotic equipment²:

You can also read a text version of the process here.

Yesterday, Adobe announced that their Creative Suite of software was no more, and it will be replaced by Creative Cloud. Creative Cloud is basically the same set of applications, but instead of buying them once, you pay $50 a month for access.

Depending on how often you upgrade and which version you buy, this new subscription pricing could be a very good deal. However, that’s not the case for me.

I was buying the Design Standard edition¹ every other year. The Design Standard upgrade costs approximately $700. So, if I used it for 24 months it would come to about $30 per month. Under this new scheme of $50 a month², I’d be paying about $480 more over a two year period.

For now, I’m going to stick with my perfectly good copies of CS6 while weaning myself off using Adobe products. I’m trying to use Acorn for photo editing and bitmap graphics, and Sketch for UI design and vector graphics.

The biggest hurdle to switching is having to work with other designers who will almost certainly be using Adobe software. Photoshop and Illustrator files are the Word and Excel files of the design world and they aren’t supported well outside of Adobe’s own software. It’s hard to imagine a future where that’s not the case, but maybe Creative Cloud will push significant numbers of people to explore alternatives.

The introduction of retina displays has added a wrinkle to the process of designing and developing websites. Unless we want our images to look blurry on the latest devices, we have to produce and deliver high resolution images¹.

Using SASS² you can combine media queries and good old fashioned CSS image replacement to send high resolution images to retina devices and standard resolution images everywhere else³.

Let’s assume we’re starting with two images: logo.png (200px × 100px), and a retina counterpart logo@2x.png (400px × 200px). We want these images to show up when we use this link tag:

<a href="/" id="logo">My Logo</a>

In our SCSS file, we need to define this handy mixin I adapted from Jeff Croft’s code:

@mixin background-image-retina($file, $type, $width, $height) {
  background-image: url($file + '.' + $type);
  @media only screen and (-webkit-min-device-pixel-ratio: 2),
    only screen and (-moz-min-device-pixel-ratio: 2),
    only screen and (-o-min-device-pixel-ratio: 2/1),
    only screen and (min-device-pixel-ratio: 2),
    only screen and (min-resolution: 192dpi),
    only screen and (min-resolution: 2dppx){
    & {
      background-image: url($file + '@2x.' + $type);
      -webkit-background-size: $width $height;
      -moz-background-size: $width $height;
      -o-background-size: $width $height;
      background-size: $width $height;
    }
  }
}

Note that the mixin assumes your retina files are always named with the @2x between the filename and the extension (like our example logo.png and logo@2x.png).

Then, we can use image replacement on the link tag along with the included mixin:

#logo {
  width: 200px;
  height: 100px;
  @include background-image-retina(logo, png, 200px, 100px);
  /* Image replacement code */
  display: block; 
  text-indent: -9999px; 
  white-space: nowrap; 
  overflow: hidden;
}

That’s it, just make sure you’re referencing the standard height and width (in this case, 200px × 100px) in your SCSS.

In case you’re curious, this is the raw CSS your SASS compiler will spit out:

#logo {
  width: 200px;
  height: 100px;
  background-image: url(logo.png);
  display: block;
  text-indent: -9999px;
  white-space: nowrap;
  overflow: hidden; 
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
  #logo {
    background-image: url(logo@2x.png);
    -webkit-background-size: 200px 100px;
    -moz-background-size: 200px 100px;
    -o-background-size: 200px 100px;
    background-size: 200px 100px; 
  } 
}

When I created an iPad theme for Fever, I meant it as stop-gap solution until someone released a proper iPad app. Yesterday my theme, thankfully, became obsolete when two such apps hit the App Store: Ashes and Sunstroke.

I’ve purchased both apps, and my quick impression is that Ashes is slicker in terms of presentation while Sunstroke is more configurable¹.

Here’s a screenshot of an article in Ashes:

And the same article in Sunstroke:

Ultimately, you can’t go wrong with either app if you’re in the market for an iPad and iPhone² Fever client.

Along with the redesign of my website, I had some new business cards¹ printed by Moo.com². They arrived yesterday and here’s what they look like:

All of the cards have the same front (the white card in the picture), but with Moo.com you can have multiple designs for the back. This is great for photographers and the like³ who can put examples of their work on each card. I didn’t think it was a good idea to use screenshots of websites in such a small space, so I went with alternate designs including some with solid orange and solid white.

Even though I ordered the cheapest cards Moo.com offers, the paper feels nice and substantial, and the colors looks great. There’s not even any banding in the solid color areas which can be a problem with cheaper printing.

I recently switched to reading RSS feeds through Fever after Google announced they were shutting down Google Reader. It works great, except there isn’t a good way to use it on an iPad. The web interface isn’t well suited to an iPad¹, and iOS Fever apps like Reeder and Sunstroke don’t have iPad versions yet.

What I did is create a copy of Fever’s iPhone theme that is already optimized for touch screens, and modified it work on an iPad. So far, it does three things:

• Fills the width of an iPad screen in portrait or landscape².
• Increases the size of the article text.
• Disables interface animations³.

You can read more and download the theme on GitHub.

When building this site, I came across an interesting issue in IE8. My PNG logo wouldn’t load. Strangely, the PNG file loaded fine in IE7 and IE9. The internet is filled with complaints about IE8¹ and PNGs, but none of the fixes I tried helped.

My solution – for now – is to hide the logo image for old IE versions, and present the logo as plain text using the CSS content property:

<a href="/" class="logo" data-content="Chris Johnson">
  <img src="/img/logo@2x.png" width="330" alt="Chris Johnson">
</a>

/* Use your favorite method to restrict these styles to IE8 */
.logo img { display: none; } 
.logo:before { content:attr(data-content); }

If you’ve ever come across this IE8 problem before and know how to make the PNG load, please let me know.

This weekend I setup chris.lt as a personal link shortening service using Shaun Inman’s Lessn. Lessn has a web interface and a bookmarklet, but I like using TextExpander to shorten URLs from the clipboard¹. So I just copy the URL, type the shortcut (I set mine up as “/lessn”) and TextExpander replaces it with the shortened URL.

This is the AppleScript for the snippet:

set api_key to "xxxxxxxxx"
set domain to "yourdomain.net"
 
set the longURL to (the clipboard as string)
 
if ((characters 1 through 4 of longURL as string) is not "http") then 
  return "Not a valid URL" 
else 
  set shellScript to ("curl --url \"http://" & domain & "/-/?api=" & api_key & "&url=" & longURL & "\"")
  set shortURL to (do shell script shellScript)
  return shortURL
end if 

If you have any bug fixes or changes, fork this gist.

With the current version of Safari on iOS, you can’t set your default search engine to something other than Google, Yahoo, or Bing. So if you want to use Duck Duck Go¹ without resorting to jailbreaking, you have to get a bit clever. What I did was switch my default search engine to Yahoo² and set my router to divert traffic intended for Yahoo to Duck Duck Go.

Don’t try this if you’re not comfortable changing your router settings. Even if you are, be safe and backup your working router configuration.

This is how you can do it on a DD-WRT router:

1. Go to the Services page in the router admin:
   

2. Enter this redirect in the Additional DNSMasq Options field:

   address=/search.yahoo.com/184.72.115.86
   

   

3. Apply the new settings.

4. On your iOS device³, set your default search engine to Yahoo. Go into the Settings app, and scroll down to Safari. The setting will be in there:
   

5. Bingo, you’re done:
   

Unfortunately, this will only work when you are connected to your network. Anywhere else and you’re going to get the normal Yahoo search results. Hopefully, Apple will either add Duck Duck Go to Safari, or give us the flexibility to use whatever search engine we’d like without resorting to hacks.

After a considerable amount of work, I’ve updated this site’s design and added standalone pages for my portfolio, projects, and bio¹.

This is what the site looked like before:

And what it looks like now:

Like the old site, this redesign is fully responsive so it works well on tablets and phones:

It even looks pretty good in Lynx²:

Dropbox out, Rsync in

When I originally launched this site last year, I published it from a Dropbox folder synced between my computers and my web server. While that process worked – and gave me the opportunity to publish posts from my phone or tablet – the server-side Dropbox installation was unpredictable. The syncing service would crash and need to be relaunched regularly. I also ran into problems where the server’s files would overwrite my new local versions. It wasn’t a disaster thanks to Dropbox’s file history feature, but it was annoying enough to convince me to switch to Rsync.

Rsync is one of those good old Unix utilities that is esoteric to use, but bulletproof. Now my site files are generated on my laptop with Jekyll and “rsynced” to my server. It’s quick because Rsync only transfers the parts of the files that have changed. The entire process (including building the site) takes less than a minute.

Goodbye Feedburner

Since Google announced they are shutting down Google Reader, it seemed like a good idea move away from Google’s other major RSS service: Feedburner. Feedburner cleans up your feeds and provides you with readership stats, but your feeds have to be hosted on their servers for it to work. My solution was to move to a plugin for Mint called Bird Feeder and clean up my feed with a couple customized Jekyll filters. You can subscribe to my feed here.

More information than you require

For more about the tools I used when designing and developing this site, check out the colophon section of the About page.