Zach’s ugly mug (his face)

Zach Leatherman

‘JavaScript’ Notes

See all tags 🏷 command line 🏷 fonts 🏷 git 🏷 javascript ⬅ 🏷 productivity 🏷 twitter 🏷 utilities

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.

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