Design+Code.

As a software developer who is interested in design, I’ve always wanted to learn design skills but kept putting it off. Things were also different a few years ago. The main options for design software were expensive and bloated (cough* Adobe) and I wasn’t excited to buy or use any of them.

I wanted a design tool that was simple, powerful, and ran great on a Mac. I tried Pixelmator but didn’t actually make anything with it. One day I read that one of my favorite designers, Mark Jardine from TapBots, was using a Mac application called Sketch. I was interested but stopped myself from getting it since I already had Pixelmator and it was just collecting dust.

When I heard about the Design+Code book, it seemed like it was made for me. The timing with the Sketch 3 release made it more exciting since I could learn about design while also learning how to use one of the latest and greatest design tools.

Working through the book was an ideal learning experience. Watching Meng use Sketch to design an app felt like the best way to learn since everything was being shown in a real context (designing and making an iOS app from the ground up).

I had already been developing iOS apps for years so I focused on the first two chapters, which are about design principles, techniques, and Sketch. It’s smart that the book touches on all of the major areas of design in short sections. You get a quick understanding of the important stuff that is just enough so that you can actually go make something. I found myself returning to the book as a reference and diving deeper into the links and resources when I would get stuck in my work, like when I got frustrated while picking colors for a screen I was designing.

I had been kicking myself for years about making a new iOS app and now I had some basic design skills down. It was exciting to use the new skills and being a weather nerd I decided to make a weather app (Comfort for iOS).

I started with rough sketches on paper then created designs in Sketch. In the past I would have started coding much sooner but I knew that one of the most motivating things as a developer is to have a design for a screen before you start working on it. I know that sounds silly but most developers will get the joke. Having a design lets you focus on execution instead of thinking about what exactly you are trying to make. Also, code usually takes longer to write and is harder to change so being able to try things in Sketch makes the process smoother. I refer to knowing how to use Sketch as a new superpower since it gives me a way to figure out things more quickly than in code. In some cases it probably takes longer but in those cases it usually means I’m working out little details that will lead to a higher quality product.

As a developer, my first instict is to code something then look at it. After a few months of designing with Sketch, I still find myself thinking that I can just start coding a screen and then remember that I should probably design it in Sketch first. It’s a subtle difference but when I work with the design in Sketch I can iterate on it quickly in a different mode of thought than in Xcode.

The State of the Art: Creating Static Web Pages

I was thinking about how I would create a webpage. For example, If I were to create a personal blog where I control the code (ie. just html, not something like SquareSpace) what would I use? A few years ago my solution would have been to use Ruby on Rails and deploy the site to a VPS or Heroku. However, this never seemed worth the effort for the amount of possible maintainence and monitoring. It’s just too complicated for a simple personal site.

Anyway, it turns out that some of my favorite sites are statically generated. For example, NSHipster. The idea of a statically generated site makes a lot of sense especially for a site controlled by one person. Why bother with a database when you can serve up the pages directly.

I asked myself what the best tools are today for creating and hosting a simple webpage. I happened to stumble upon on a pretty good solution.

These are the tools:

  • Hover: to register a domain and configure DNS

  • GitHub Pages: Basically, you upload your site to GitHub, do some configuration, and then your site is hosted by GitHub. Updates are automatic when you commit and push.

  • Pure: a set of CSS modules that make it easier to make a responsive web site (in other words, a two or three column site will automatically turn into a one column site on a small screen like an iPhone)

  • AWS S3/CloudFront: Optional (in case you need to host large files).

A snag I ran into was setting up the custom domain for GitHub pages. The documentation from GitHub was helpful but I found it didn’t explain everything I needed to do. After some searching I found this helpful StackOverflow answer that laid out all the steps.

I’ve read that GitHub pages can be slow to load under certain situations. I haven’t experienced this and the workflow is so convenient that I’m okay with it. In the future I may look into setting up something like Mattt has done on NSHipster which uses Amazon S3 to serve the site instead of GitHub pages.

Sleep Mode

I’ve had a Frigidaire air conditioner for a few years but I didn’t know much about it until recently.

The filter reset light had been on for months and I figured it meant I needed to buy a new air filter. I looked around on Amazon for a replacement but I couldn’t find one. Eventually I opened up the front of the A/C and found that I could remove the filter and clean it myself very easily. No need to buy anything. Just clean off the dust when the light comes on.

Next, remote sensing mode. This mode uses the temperature on the remote instead of the one on the unit. There can be a large difference between the two temperatures (sometimes even 10 degrees Fahrenheit) especially if there isn’t a fan circulating the air. The way this mode works is by turning it on or off using the buttons on the remote.

Sleep mode. I never even considered using this until I realized I had no idea what it was. It reminded of sleep mode on TVs where you set an amount of time (30, 60, 90 mins…) and then the TV turns off when the time is up. This isn’t the same. When you activate sleep mode on the Frigidaire, it will maintain the set temperature for 30 minutes. Then it will increase the temperature by 2°F and maintain that temperature for 30 minutes. Then it will increase the temperature again by 2°F and maintain that temperature for 7 hours. After the 7 hours are up it will go back to the original temperature. Inflexible but pretty handy.

I was motivated to write this partly because I can never remember what sleep mode does. Also, it reminded me that many of the things we are using today have not yet been updated to take advantage of modern software and hardware. For instance, a mobile app for your air conditioner would give you much more control and flexibility than the built-in programs. Such an app would probably not improve your life as much as an app that let you send yo to people but it would be pretty neat if your A/C automatically set the temperature down a few degrees when you entered the room and raised it when you left. The other reminder is that there are lots of opportunities and things to improve in everyday life.

The Shit To Get

I’ve been wanting to write up a list of products that I’ve personally used and would recommend. I like the way Jake wrote his list so I did mine in the same style.

Home

For filtering the air (and white noise), Vornado Air Purifier

For filtering the air on a budget (and white noise), Holmes Air Purifier

For reducing humidity, Gurin dehumidifier

For an air conditioner, Frigidaire A/C

For playing music, Big Jambox (in white)

Office

For a 23 inch monitor: Dell Ultrasharp

For a mouse, Apple Magic Mouse

For a mousepad, 3M Mouse Pad

For pens, Zebra Sarasa 0.5mm (black)

For a laptop stand, Rain Design mTower

For a surge protector, Belkin SurgeMaster

Kitchen

For a coffee grinder, Baratza Encore

For making coffee, Aeropress

For plain yogurt, Narragansett Creamery

For sweetening plain yogurt, Really Raw Honey

For oatmeal, Bob’s Red Mill Organic Oats

For sweetening oatmeal, Coombs Organic Maple Syrup

For granola, Early Bird Jubilee

For grating parmesan cheese, Microplane Grater

For learning about food and nutrition, Nourishing Traditions

For cleaning, Sal Suds

“Simply standing up, a minimum of 30 times a day, is a powerful antidote to long periods of sitting and is, surprisingly enough, more effective than walking.”

Mercola.com

Enabling Retina Images on Tumblr

For a while I’ve wanted retina images on my tumblr. I checked to see if Tumblr had added this as a feature but I couldn’t find any info about it so I set off to try it myself.

A bit of googling turned up a simple explanation of displaying retina images. The basic idea is to use a retina source image paired with an image size in CSS.

Next, I checked Marco’s tumblr since I figured he’d have retina images. By viewing the page source, I learned that the source image urls ended in 1280, which reminded me of the PhotoURL-HighRes option on the Tumblr photo post theme settings page. I also noticed that the images on his site were around 700 pixels wide, which gave me the idea to use the high resolution image source option along with the CSS image width setting.

With that idea in mind, these are the two changes I made to my theme:

  1. img src="{PhotoURL-500}" —> img src="{PhotoURL-HighRes}"

  2. img { border:none; } —> img { border:none; width:500px}

Changing the photo URL to the high resolution version means that the source image for photos will now be up to 1280 pixels wide (as long as the photo I’ve uploaded is at least that wide) instead of 500 pixels. This provides an image large enough for retina up to 640 points.

The last piece of the puzzle was adding a CSS image width setting of 500 pixels to make the photos stay inside the roughly 500 pixel width content area here on the site. Otherwise, the images would render to their full, non-retina size and overlap with the side bar.

I’m really happy with how this turned out. In the future, I could even increase the image size to 640 points and still have full retina images (or go even bigger and still have near retina quality). For now, I’ll be aiming to upload 1000 pixel wide images, which is optimal for the 500 point display width.

One of the downsides of this approach is that all devices, including ones without retina screens, will now need to download a retina image. This should work fine on this site considering the small number of images and constrained size but could significantly impact load time on a site with more (and larger) images.

For a while I’ve been wondering about ways to explain why investing in design and the small details is worth it. This video clip does that. It’s KPCB General Partner (and Chief Product Officer) Bing Gordon explaining how producing products that are even incrementally better can increase bottom line performance dramatically.

“One of the things I’ve always found is that you’ve got to start with the customer experience and work backwards to the technology. You can’t start with the technology and try to figure out where you’re going to try to sell it. And I’ve made this mistake probably more than anybody else in this room. And I got the scar tissue to prove it.”

Steve Jobs

Page 1 of 3



Home | Archive