Skip to content

Instantly share code, notes, and snippets.

View zachleat's full-sized avatar

Zach Leatherman zachleat

2.1k followers · 67 following
View GitHub Profile
@zachleat
zachleat / gist:c135c079f802934006978e2257086cc3
Last active August 28, 2017 17:47
Typinator Automations for CSS em and rem values
Ems
---
Abbreviation: ;ems
Formula: {{size=?Size}}{{parentsize=?Parent Size<16>}}{{#size/parentsize}}em; /* {{#size}}px /{{#parentsize}} */
Sample output: 0.75em; /* 12px /16 */
Rems
----
Abbreviation: ;rems
Formula: {{size=?Size}}{{parentsize=?Parent Size<16>}}{{#size/parentsize}}rem; /* {{#size}}px /{{#parentsize}} */
@zachleat
zachleat / any-link.css
Created August 1, 2017 14:58
Trying to use CSS `:any-link`
@zachleat
zachleat / keybase.md
Created January 19, 2017 23:53

Keybase proof

I hereby claim:

  • I am zachleat on github.
  • I am zachleat (https://keybase.io/zachleat) on keybase.
  • I have a public key ASALM-rWVUGBxkz91b64U9hfSLAk1RunNYaItxbBr6nc7Ao

To claim this, I am signing this object:

@zachleat
zachleat / gist:96516e8a3bbff53355ba65f0b7732aed
Last active February 17, 2020 05:59
Installing phantomjs 2.5.0 Beta
# First download phantomjs-2.5.0-beta-macos.zip from https://bitbucket.org/ariya/phantomjs/downloads
# I put mine into ~/Code/phantomjs-2.5.0-beta-macos
~/Code/phantomjs-2.5.0-beta-macos/bin ᐅ ./phantomjs
dyld: Library not loaded: /usr/local/opt/webp/lib/libwebp.6.dylib
Referenced from: /Users/zachleat/Code/phantomjs-2.5.0-beta-macos/bin/./phantomjs
Reason: image not found
[1] 33803 abort ./phantomjs
~/Code/phantomjs-2.5.0-beta-macos/bin ᐅ brew install webp
@zachleat
zachleat / critical-foft-preload.html
Last active July 26, 2017 18:12
Compare Critical FOFT against Critical FOFT with preload
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Critical FOFT with preload</title>
<link rel="preload" href="/web/css/fonts/lato/lato-zachleat-optimized.woff2" as="font" type="font/woff2" crossorigin>
<style>
@font-face {
font-family: LatoSubset;
@zachleat
zachleat / critical-foft-data-uri.html
Last active October 21, 2021 07:25
Compare Critical FOFT with Data URI against Critical FOFT
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Critical FOFT with Data URI</title>
<style>
@font-face {
font-family: LatoSubset;
src: url("data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAABVwAA0AAAAAG+QAARqgAAAAAAAAAAAAAAAAAAAAAAAAAABHREVGAAABMAAAABYAAAAWABEANkdQT1MAAAFIAAACkQAAA9wvekOPT1MvMgAAA9wAAABcAAAAYNjUqmVjbWFwAAAEOAAAADgAAABEAIcBBGdhc3AAAARwAAAACAAAAAgAAAAQZ2x5ZgAABHgAAA8EAAAUUN1x8mZoZWFkAAATfAAAADYAAAA2DA2UbWhoZWEAABO0AAAAHgAAACQPOga/aG10eAAAE9QAAADIAAAA2PXwFPVsb2NhAAAUnAAAAG4AAABuhQSA721heHAAABUMAAAAGgAAACAAOgBgbmFtZQAAFSgAAAA0AAAANAI2Codwb3N0AAAVXAAAABMAAAAg/3QAegABAAAADAAAAAAAAAACAAEAAQA1AAEAAHicTZO/SxthGMe/d4k2NFbSFE2Maaq2tJ4/qtE4dwnBoUgoHUq5pWBBaCv0h4OCS2MLGUuXIhlKhwxFMnVwcAvB4SiSQSRkOEK9xan/wdvPRYQSnrzv3fu8n8/7vO97siRd1z0tyS6WHj/V8OsXHzY1rCjvZYzCcevVy3ebioW9fkRl99sYUepn5vTZWtOhdW7v6MJas+aIDeujdW5d2GV7x/4VSUaKkSf8ipFN4rK/EdnjaQ9KDuKArimuId1QQjeV1C2NaFQppTWmjMaV1W1N6K7ua1qOZjSreeW1
@zachleat
zachleat / critical-foft.html
Last active May 2, 2017 15:16
Compare FOFT approach with Critical FOFT
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Critical FOFT</title>
<style>
@font-face {
font-family: LatoSubset;
src: url('/web/css/fonts/lato/lato-zachleat-optimized.woff2') format('woff2'),
@zachleat
zachleat / foft.html
Last active September 7, 2017 04:12
FOUT with a Class compared to FOFT
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FOFT, or FOUT with Two Stage Render</title>
<style>
@font-face {
font-family: Lato;
src: url('/web/css/fonts/lato/lato-regular-webfont.woff2') format('woff2'),
@zachleat
zachleat / gist:ba027e44807a9aef1e856d4f9f57e02b
Last active May 23, 2016 16:51
@zachleat Tweet alt text
1. Click apple.news link on Twitter iOS app
2. Opens Twitter webview
3. → t.co
4. → apple.news
5. → mobile.nytimes.com
6. Opens Apple News app, switches from Twitter
7. → shows Apple News welcome screen
8. → NYT article with Apple News banner
alt text for Tweet: https://twitter.com/zachleat/status/734764603645825025
@zachleat
zachleat / rwdurl
Last active February 5, 2019 02:20
A command line utility to open a url with a bunch of different screen widths (and organize the windows).
# My Chrome developer profile is in the `Profile 1` directory, make sure to update with yours.
# Best on an ultra wide monitor.
function rwdurl() {
open -n -g -a "Google Chrome" --args --new-window --profile-directory=Profile\ 1 --app="data:text/html,<html><body><script>window.moveTo(0,0);window.resizeTo(320,1395);window.location='$1';</script></body></html>"
open -n -g -a "Google Chrome" --args --new-window --profile-directory=Profile\ 1 --app="data:text/html,<html><body><script>window.moveTo(330,0);window.resizeTo(480,1395);window.location='$1';</script></body></html>"
open -n -g -a "Google Chrome" --args --new-window --profile-directory=Profile\ 1 --app="data:text/html,<html><body><script>window.moveTo(815,0);window.resizeTo(640,1395);window.location='$1';</script></body></html>"
open -n -g -a "Google Chrome" --args --new-window --profile-directory=Profile\ 1 --app="data:text/html,<html><body><script>window.moveTo(1460,0);window.resizeTo(800,1395);window.location='$1';</script></body></html>"
open -n