Zach’s ugly mug (his face)

Zach Leatherman

My Favorite Typinator Macros

This is a note written on 01 Feb 2019. It is short. It is terse. In total I’ve written 4 notes. This note was inspired by a tweet. Subscribe to the Notes RSS feed.

I used to use TextExpander for text expansion/macros and use Typinator now. I don’t remember why I switched (I think it was vaguely associated with performance) but I’m happy with Typinator now. I use this utility a lot, probably more than a hundred times per day.

Here is an example of what it looks like:

And here is a small sampling of my favorite macros:

Zero Width Space;zerow
My email address;
Shrug face;?¯\_(ツ)_/¯

It really gets fancy when Typinator can do user prompts (with default values) and math based on those values. For example, I use a macro that will automatically calculate an em value based on a supplied parent size (and output a comment documenting the math).

em Units

Abbreviation: ;ems expands to:

{{size=?Size}}{{parentsize=?Parent Size<16>}}{{#size/parentsize}}em; /* {{#size}}px /{{#parentsize}} */

Sample Output:

2em; /* 32px /16 */

em Media Query

Abbrevation: ;emq expands to:

@media (min-width: {{size=?Size}}{{#size/16}}em) {. /* {{#size}}px */

Sample Output:

@media (min-width: 48em) { /* 768px */


html page

Abbrevation: ;html expands to:

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

{^} controls where your cursor goes.


Abbreviation: ;log expands to:

console.log( {^} );

I totally use proper debugging tools and unit tests and barely use this one I swear.

Zach’s ugly mug (his face)

Zach is a Web Developer with the award winning Filament Group. He’s currently fixated on web fonts and static site generators. His public speaking résumé includes talks in seven different countries at events like Smashing Conference, CSSConf, and The White House. He also helps herd NEJS CONF and the NebraskaJS meetup. Read more about Zach »