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:

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 builder for the web with Netlify. He created the Eleventy static site generator and is still fixated on web fonts. 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 »

Eleventy’s New Performance Leaderboard
Eleventy Crash Course with Nick and Zach—NebraskaJS Omaha
    Social Card Image Preview

    This is what will show up when you share this post on Social Media:

    How did you do this? I automated my Open Graph images. (Peer behind the curtain at the test page)