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. A back hoe on the bank of the Suez, trying to free the Ever Given cargo ship
    Article post type

    Learn Grid Now, Container Queries Can Wait

    Take your time with new CSS, but don’t sleep on the essentials

    Several people have asked recently why container queries aren’t being used more broadly in production. But I think we underestimate the level of legacy browser support that most companies require to re-write a code-base.

    see all Article posts
  2. A clear kitchen blender filled with chopped fruit and greens
    Article post type

    Can you un-mix a mixin?

    Rethinking the CSS mixin proposal after CSS Day

    The CSS Working Group has agreed to move forward with CSS-native mixins. But some recent mixin-like CSS tricks have an advantage that the official proposal doesn’t account for: they make it easy to remove a mixin after it’s already been mixed in.

    see all Article posts
  3. Article post type

    Generating Frontend API Clients from OpenAPI

    API changes can be a headache in the frontend, but some initial setup can help you develop and adapt to API changes as they come. In this article, we look at one method of using OpenAPI to generate a typesafe and up-to-date frontend API client.

    see all Article posts