Tips and Tools We Love

In the spirit of Valentine’s Day, let’s kick off this post with a CSS love poem:

See the Pen CSS Love Poem by Stacy (@stacy) on CodePen.

Obviously, there are some pieces missing from the above sample, like where is the you mixin defined? And why aren’t you even using the variable you declared? This code would not pass our OddBird code review, but today’s post is about the tips and tools that have our approval and praise. I asked each OddBird to share one work-related item they wouldn’t want to be without and why.

David Glick loves the JSON Viewer extension for debugging JSON-based APIs. Instead of seeing an unreadable blob of JSON it automatically formats any response with a content-type of text/json, making it easy to read, searchable, and collapsible. Below is a screenshot comparing the default json view to the enhanced view after enabling this extension.

No matter what text editor you use, it’s super helpful to quickly see where you’ve made changes in a file. Jonny Gerig Meyer claims he couldn’t live without Git Gutter, by JD Isaacks. This plugin shows icons in the “gutter” area (next to the line numbers) to indicate whether a line has been added, modified, or removed. It also includes shortcuts to quickly jump to the next change in the file, show the details of a modification, or revert a change. Jonny uses the plugin with Sublime Text, but there are versions for most text editors.

Kit La Touche uses a wonderful vim plugin from Tim Pope called Surround.vim. He uses it to make things-in-parens or things-in-quotes into text objects, so he can select “everything inside these curly braces” with a single vim motion.

You can also get versions of this plugin for Sublime Text called Sublime-surround and Vim Surround for Atom.

Alfred can be one of those apps that you use all the time without realizing how vital it is until you use someone else’s computer. Two of Miriam Suzanne’s most used Alfred features are the launcher and searchable clipboard.

The launcher allows you to find and open files or applications on your computer with just a few keyboard commands and inputs. The Alfred clipboard history feature gives you access to text, images, and file links you’ve copied but may have not pasted yet.

You can also create custom workflows or add from the available ones created by the Alfred community. Workflows save you time by replacing repetative tasks with simple keyboard shortcuts. These can be easily created in a drag and drop interface making it a great tool for non-developers as well.

Sondra Eby can’t say enough about Adobe XD, a new prototyping app that’s still in beta. The tutorial is quick, fun, and easy to follow! Create clickable mockups of user flows to share with team members and clients. The latest updates makes it possible for everyone – even people without Adobe accounts – to comment on individual prototypes. The Repeat Grid feature speeds up the design process considerably, cutting out all that time she use to spend copying, pasting, and spacing repeating elements.

Most text editors have language-specific autocompletion and plugins that allow you to create snippets, but I use TextExpander made by Smile for a few reasons. Not only does it allow me to sync my snippets across my Apple devices, I can also choose which applications to use or exclude from expanding snippets, and create complex snippets that allow repositioning of the cursor and a variety of other options for their “Fill-ins” function. TextExpander deserves a full post of its own explaining all of the benefits, but I’ll share two of my favorites.

When I want to use a double right arrow symbol, I can use my snippet >> and TextExpander automatically changes it to ». If I want the html entity I can use html>> and it changes it to ». This way, I don’t have to remember each of the codes and can use a more english-friendly version.

Another snippet I use often allows me to visually see the breakpoints of a web project I am working on. When I type ;showbp the following TextExpander snippet is triggered:

$breakpoints: (
  '%filltext:name=Breakpoint 1 Name:default=small%': %filltext:name=Breakpoint 1 Value :default=24rem%,
  '%filltext:name=Breakpoint 2 Name:default=medium%': %filltext:name=Breakpoint 2 Value :default=44rem%,
  '%filltext:name=Breakpoint 3 Name:default=large%': %filltext:name=Breakpoint 3 Value :default=60rem%,
);


// Display Breakpoint During Development on Front end
@each $breakpoint, $screen-size in $breakpoints {

  @media screen and (min-width: '#{$screen-size}') {
    body:before {
      content: '@include above(#{$breakpoint}) // min-width: #{$screen-size}';
    }
  }
}

body:before {
  background-color: hsla(0, 80%, 20%, .75);
  color: #fff;
  display: block;
  font-size: 1rem;
  margin: 0;
  padding: 0.5rem;
  position: fixed;
  text-align: center;
  top: 0;
  width: auto;
}

I used six single-line fill-in fields for the breakpoint names and values. Breakpoints can be added or removed later if necessary.

This snippet is very useful when you need a fast way to easily see which breakpoint you are in when your design needs to change. You can see it in action in this Pen.

There are so many more tools we use that completely deserve to make this list. What are the tips or tools you wouldn’t want to be without? Let’s continue this conversation on Twitter.