This content originally appeared on Zach Leatherman and was authored by Zach Leatherman
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:
How I use Typinator (a snippet manager) to automate `em` calculations in CSS (with pixel size comments):
— Zach Leatherman (@zachleat) August 28, 2017
alt: https://t.co/5vEVFKylSt pic.twitter.com/gM0b9r8hq5
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.
This content originally appeared on Zach Leatherman and was authored by Zach Leatherman
Zach Leatherman | Sciencx (2020-02-07T06:00:00+00:00) My Favorite Typinator Macros. Retrieved from https://www.scien.cx/2020/02/07/my-favorite-typinator-macros/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.