Zach’s ugly mug (his face) Zach Leatherman

My Favorite Typinator Macros

February 07, 2020 On Twitter (archived)

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:

Name Abbreviation Expansion
Numero ;no
Ratios ;ratio ∶∶∶∶
Ellipsis ;sis
Zero Width Space ;zerow
Feet ;feet
Inches ;inch
My email address ;ema zach@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.


< Newer
Eleventy’s New Performance Leaderboard
Older >
Eleventy Crash Course with Nick and Zach—NebraskaJS Omaha

Zach Leatherman IndieWeb Avatar for https://zachleat.com/is a builder for the web at IndieWeb Avatar for https://cloudcannon.com/CloudCannon. He is the creator and maintainer of IndieWeb Avatar for https://www.11ty.devEleventy (11ty), an award-winning open source site generator. At one point he became entirely too fixated on web fonts. He has given 78 talks in nine different countries at events like Beyond Tellerrand, Smashing Conference, Jamstack Conf, CSSConf, and The White House. Formerly part of Netlify, Filament Group, NEJS CONF, and NebraskaJS. Learn more about Zach »

1 Like

Sean Roberts
1 Comment
  1. Sean Roberts

    @DevelopSean

    hahah that's amazing!

Shamelessly plug your related post

These are webmentions via the IndieWeb and webmention.io.

Sharing on social media?

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)