April 8, 2016

For Anyone Moving from Coda Clips to TextExpander

Textexpander Illustration

I recently started using TextExpander (literally a day before their SaaS announcement). On top of using it for canned email responses, triggering ASCII emoticons, and typing in my email address a thousand times a day when I sign up for newsletters, I’m moving all of my code snippets there, too.

Previously, I’ve relied on clips in Coda 2. I still think Coda is an amazing text editor, but I’ve found myself switching between it, Sublime Text 3, Atom, and even BBEdit depending on my current task and mood. While porting my clips over to TextExpander, I came across a little quirk. Let’s see if you can spot it in the GIF below:

Invisible Characters Example

I’m moving my cursor at a steady pace but, if you were watching closely, you’ll have noticed that there’s a little hiccup in the alt, src, and width attributes. That hiccup is an invisible character that went unnoticed as I created twenty or so code snippets in TextExpander.

After getting them set up, I tested each snippet in a blank document in Sublime. I was immediately frustrated when I noticed extra spaces around values when using TextExpander’s fill-ins. After deleting and rewriting the affected code snippets more times than I’d like, I stumbled across the fact that Coda seems to be injecting some invisible characters when you use their clip placeholders. When copied to another program like TextExpander, those placeholders seem to convert to invisible spaces.

While the extra spaces around values was aesthetically annoying, I noticed that it messed with rendering when I viewed my code in a browser, too. Using a snippet for a table row in an email, I tried adding padding using the appropriate fill-in. In the editor, everything appeared just fine. But, when previewing the email in a browser, padding on the table cell simply didn’t work.

After an annoying few minutes, I finally figured out that I missed deleting the invisible character in TextExpander after figuring out that Coda was adding them. While a quick edit in TextExpander was all it took to fix the issue, it was a horribly annoying issue to have in the first place.

This is a terribly specific problem—and I may very well be the only one having it—but just in case you run into something similar, check to make sure there aren’t any invisible characters in your code when saving snippets to TextExpander.