cjimmy

# why we had to add it to our .bash_profile
source ~/.bashrc

for FILE in "$@"
do
 echo "converting file: $FILE"
 EXT=${FILE##*.}
 QUALITY=85 # quality of output image (You can change this: 1-100)
 cwebp -q $QUALITY "$FILE" -o "${FILE/%.$EXT/.webp}"
done

cjimmy

/** Using with next.js, which automatically picks up <amp-img> tag and imports appropriate script
 * Also gives a convenient hook useAmp() which allows to detect if amp is in use.
 * Follows best pratices from web.dev and https://github.com/aFarkas/lazysizes
 * Wishlist:
 * [x] all browser support
 * [x] AMP and non-AMP
 * [x] webp-first, jpg, png, svg support
 * [x] optional lazy-loading (per web.dev's suggestion: https://web.dev/use-lazysizes-to-lazyload-images/)
 * [x] doesn't cause FOUC/layout thrashing
\ * [ish] gracefully handle no javascript <noscript>

cjimmy

Problem

AMP Animation requires a JSON which requires us to specially format it for React.

If you follow this AMP Scroll To Top Example, and paste this section into the render method

// !! This won't work if you paste it into React
<amp-animation id="showAnim" layout="nodisplay">
  <script type="application/json">
    {
 "duration": "200ms",

cjimmy

How to set up Lighthouse CI with Github Actions + GKE Dashboard to record data

Basic set up reference: Lighthouse CI repo

Setting up Lighthouse CI with Github Actions

1. Need to authorize the Github LHCI App for that specific repo: https://github.com/apps/lighthouse-ci
2. Take that token and put it in Repo > Settings > Secrets as LHCI_GITHUB_APP_TOKEN
3. To create a Github Workflow, you need to create a folder under your repo /.github/workflows/ And add a file named lighthouse.yml (could be named anything.yml).

Here's an example file, with the secret from Github. Feel free to modify how it gets called (whether on push, pull_request, etc). See Github Workflow Syntax for reference

cjimmy

source ~/.bash_profile

# assumes you have cwebp installed
# https://developers.google.com/speed/webp/download
# Typing `cwebp` into terminal should result in anything but Command not found.
# Gist by Jimmy Chion

# shell script intended to be used in Mac Automator,
# so you can right-click on a file and convert the file(s) to webp

cjimmy

from datetime import timedelta	
from enum import IntEnum
import csv

# enumerate the columns for readability
class Col(IntEnum):
	place = 0
	divTot = 1
	bib = 2
	cat = 3

cjimmy

//-- author: IDEO | Jimmy Chion | 2013
//-- license: Creative Commons SA-3.0

(function(){

//------------------------------------
//----- setting up the graph, axis
//------------------------------------  
var margin = {top: 20, right: 5, bottom: 100, left: 60}, 
    width = 0.58*($(document).width()) - margin.left - margin.right,