Jon Daiello Product Designer 🦄

Journal

The Joys of DRY Everywhere

No one likes a sweaty shirt, but that’s not what we’re talking about here. DRY is an acronym for “Don’t Repeat Yourself”. When I repeat this to myself, I often add an “S” to the end, thus having DRYS.

“Don’t Repeat Yourself, Stupid!”

It might be a little harsh, but I only add the “S” when dealing with myself. I think of it as an internal reminder to myself. The “S” can also stand for, “serious”, because it’s a serious offense when you are working tirelessly to design and build something. Then, you find out that you need to make a change. Do you die a little on the inside because you know that change needs to be made in 10 places? Or, do you say, “Thanks!” to the past version of yourself for making it easy to go back into one spot, and change it everywhere. This is the Joy of DRY.

DRY Your Code

Keeping your code DRY is pretty much a no brainer, so I won’t beat the glue out of a dead horse. However, if you’re new to the idea (or looking for a refresher) here’s a quick test:

  • Do you have to use this code more than once?
  • Are you doing something very similar somewhere else?
  • Do you think it might be useful for someone else to reuse?
  • Would someone else benefit if the code was in a single place for easy maintenance?

If you answered “yes” to any of these questions, you have a great case to DRY out your code.

In JavaScript or PHP, you can build yourself a handy little function to reuse. Then, you have the option to iterate on it later, and make something that you can reuse everywhere. Furthermore, that little function you wrote might inspire you in another area of the program to DRY it out even more.

If you’re working in CSS, consider using an OOCSS style (Object-Oriented CSS). This is a fairly recent change in my workflow. It took some getting used to, but after a few months of OOCSS, it has revolutionized the speed and reliability of my CSS coding practices. Building interfaces takes less time and the HTML is easier to understand why an element behaves the way it does in a browser window.

DRY Your Design

Most people know me as a front-end engineer (or front-end developer). But, I’m also a designer. In fact, if I wasn’t designing I might go a little crazy. Every line of code I write is part of the design process for me, but often design starts in a program like Photoshop. If you are a designer, you can help yourself tremendously by using Adobe’s built in tools.

Library: In the Adobe Creative Cloud suite of products, they introduce the Library feature. It allows you to save colors, vector objects, images, etc. to a library and then quickly recall them. This is invaluable with color palettes. It’s almost like a mini style guide for your document.

Layer Styles: If you have a particular style that you are applying to a shape (like a background gradient, stroke, or drop-shadow), you a copy the style from one shape, CTRL+click a whole slew of other shape, and paste that layer style immediately. Layer styles are incredible for duplicating settings from one shape to another.

Smart Objects: Do you have an icon, or particular element that you need to reuse more than once? DRY your elements by converting them to a smart object.

A good example of this could be an icon label on a map. Let’s say you have 50 icons on a map. Now that icon has to change. If that icon is a smart object, you can change it once in seconds by editing one smart object. All instances of that smart object will be updated and you’re done. If not, I’ll see you in 15 minutes when you strategically update each individual one.

Character & Paragraph Styles: If you come from a print background, you’re probably familiar with InDesign’s character and paragraph style panes. Well, Photoshop has them too. You can create a type style, save it, and then apply it to any other type. It’s great for quickly replicating headlines, button text, and other typographical elements throughout a design.

Layer Comps: This one is relatively new for me. Ever needed to create multiple mock-ups for different states of a design? In ages past, we needed different documents for this. Not anymore. Introducing Layer Comps. You can ‘save’ positions, styles, etc of elements to a Layer Comp, change them to something different and save that ‘Layer Comp’. When you switch back and forth between the Layer Comps, it will update those elements and morph your design document between the two. Check out this article and this video from InVision.

DRYing Off

The concept of not repeating yourself isn’t new. The human race has been doing it forever. It might feel like ‘more work’ in the beginning, but you’ll quickly find that 5 extra minutes saves you far more time, grief and frustration down the road. Your future self will thank you.