Obviously, there are some pieces missing from the above sample, like
where is the youmixin 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.
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.
For many years, it has been ‘best practice’ to use relative units (especially em and rem) for sizing text. That’s great! But after playing around with my user preferences, I think we can improve on the common approaches.
It is frustrating to track down why an anchor isn’t being found. I’ve found a simple way that should work in most cases. If that doesn’t work, step through the checklist, and then dive in to get a better understanding of how Anchor Positioning works.