Zach’s ugly mug (his face)

Zach Leatherman

My Favorite Typinator Macros

February 07, 2020 Inspired by a tweet.

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:

NameAbbreviationExpansion
Numero;no
Ratios;ratio∶∶∶∶
Ellipsis;sis
Zero Width Space;zerow
Feet;feet
Inches;inch
My email address;emazach@zachleat.com
Shrug face;?¯\_(ツ)_/¯
Troll;trollಠ_ಠ

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">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
{^}
</body>
</html>

{^} controls where your cursor goes.

console.log

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 builder for the web with Netlify. He’s currently fixated on web fonts and static site generators. His public speaking résumé includes talks in eight different countries at events like Beyond Tellerrand, Smashing Conference, CSSConf, and The White House. He is an emeritus of Filament Group, NEJS CONF, and still helps out with NebraskaJS. Read more about Zach »

Previous
Eleventy’s New Performance Leaderboard
Next
Eleventy Crash Course with Nick and Zach—NebraskaJS Omaha
Webmentions