Skip to main
Mac OS Dock with some of our favoite app icons

Tips and Tools We Love

We wanted to show some love to a few great tools we use to get us through our work days. Do you have any to add to our list?

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.

clean and messy json screenshots

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.

screenshot of the Git Gutter plugin in use

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.

screenshot of the Alfred application launcher in use

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.

linked prototype in Adobe XD

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.

Fill-in text dialog box

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.

Recent Articles

  1. Fragment from a 13th century alchemical manuscript with a red and green oroboros serpent biting it's own tail, and seeming to give us side-eye
    Article post type

    HTML Web Components are Just JavaScript?

    I’m still getting used to this

    There’s been a recent flurry of articles about web components, with advice on how to shape them as extensions of HTML. I decided to dig in, and see how these ‘HTML web components’ could become a part of my own workflow. Despite a few rough edges, I’m excited to see…

    see all Article posts
  2. Article post type

    How to Design More Intuitive Websites & Apps

    Do you want to make your website or web app more intuitive for the people who visit? If so, I’d like to introduce you to the world of Object-Oriented UX. As a UX designer at OddBird, using OOUX strategies to identify and avoid unintuitive objects has been key to…

    see all Article posts
  3. Pen and notebook with a sketch of a website interface
    Article post type

    When to Choose a Progressive Web App

    Part 3 – Responsive Web App vs Native Mobile App vs Progressive Web App

    If you’re weighing the performance optimization and device integration opportunities of a native mobile app against the broad reach and lower cost of a responsive web app – and can’t decide which is a higher priority for your digital product – don’t despair. A progressive web app may be just…

    see all Article posts