Zach’s ugly mug (his face)

Zach Leatherman

Notes

These are my notes. They are short. They are terse. In total I’ve written 4 notes. Subscribe to the Notes RSS feed. 🏷 command line 🏷 fonts 🏷 git 🏷 javascript 🏷 productivity 🏷 twitter 🏷 utilities

Navigate directly to a GitHub Issue

Read More

At Filament Group when we do new feature or bug fix branch, our workflow is to create a new branch and name it using the GitHub issue number. A bug fix for Issue #3214 would be live in a branch named 3214 (e.g. git branch -B 3214).

Sometimes I’ll want a shortcut to navigate directly to this issue on the GitHub web site. I added this function to my .zshrc (.bash_profile if you bash) to do just that. Now I can type ghissue in my project’s terminal window and the issue will open in my web browser.

  1. Find the current branch name (holds the issue number)
  2. Finds the origin github repository (should work with git: or https urls). If you use another remote name, you’ll want to change this.
  3. Pieces those two together to make the GitHub issue url.
function ghissue() {
if [ -z "$1" ]
then branch=$(git rev-parse --abbrev-ref HEAD)
else
branch="$1"
fi

repo=$(git remote get-url origin | sed 's/git@//' | sed 's/github.com:/github.com\//' | sed 's/\.git//')
url="https://${repo}/issues/${branch}"
open $url
}

Usage

ghissue

Go directly to a specific issue (not the current branch name):

ghissue 3214

Very special thanks to John Bender who supplied the repo line.

Related via Jeff Lembeck: Hub from GitHub, a command-line tool that makes git easier to use with GitHub.

My Favorite Typinator Macros

Read More

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;emazachleatherman@gmail.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.

Download a Twitter User’s Profile Image

Read More

The 11ty.io web site uses avatar images for its Testimonial and Sites Using Eleventy features. I wrote a script to automatically download those avatar images based on usernames stored in data files in the 11ty.io repository.

In that same vein, I created a simpler utility borne from that script. It will:

  1. Fetch the avatar image for any twitter username
  2. Add the correct file extension (png or jpg)
  3. Optimize the image using jpegtran or pngcrush (some of them were not optimized 🤷‍♂️)

Here’s an example:

$ ./fetch-twitter-image.sh zachleat
Created zachleat.jpg

(Don’t type the $ there)

And here’s the script. Save the following content as fetch-twitter-image.sh:

wget --quiet -O $1.jpg https://twitter.com/$1/profile_image?size=bigger

file="$1.jpg"
type=$(file-type $file)

if [[ $type == *"image/jpeg"* ]]
then
jpegtran "$file" > "$file_"
mv "$file_" "$file"
echo "Created $1.jpg"
elif [[ $type == *"image/png"* ]]
then
pngcrush -brute "$file"
rm $1.jpg
mv pngout.png $1.png
echo "Created $1.png"
fi

Don’t forget to add execute permissions to this file:

chmod +x fetch-twitter-image.sh

Install the Dependencies

  • wget: You probably already have this
  • file-type-cli npm install -g file-type-cli
  • jpegtran npm install -g jpegtran-bin
  • pngcrush npm install -g pngcrush-bin

(This script should be its own module on npm, huh?)

Bonus tip: Iterate over a Data File

Given this arbitrary data.json JSON file:

[{
"twitterUsername": "zachleat"
},{
"twitterUsername": "filamentgroup"
}]

Iterate over data.json using jq and fetch all the images.

for handle in $(cat data.json | jq -r '.[] | .twitterUsername'); do
./fetch-twitter-image.sh $handle
done

Get all Font Sizes in use on a Web Page

Read More

While doing some testing on font hinting, I wanted an easy way to make a test page that had examples of every single font-size in use on a page. Pasting the following snippet into your DevTools console retrieves an Array of sorted font-size values in use on a page.

(function() {
let fontSizes = new Set();

document.querySelectorAll("*").forEach(function( node ) {
fontSizes.add( window.getComputedStyle( node ).getPropertyValue("font-size") );
});

return Array.from( fontSizes ).sort(function(a, b) {
return parseFloat(a) - parseFloat(b);
});
})();

For example, this page returned:

["10.5px", "11px", "12px", "13px", "15px", "15.7368px", "16px", "16.9474px", "18.6875px", "19.2px", "21.7895px", "22.4px", "23px", "100.35px"]

⚠️ Careful if you use vw units, these are computed values only.

I’ve also filed this as a possible enhancement for GlyphHanger.