Skip to content

Instantly share code, notes, and snippets.

View cjimmy's full-sized avatar

Jimmy Chion cjimmy

62 followers · 6 following
View GitHub Profile
@cjimmy
cjimmy / Convert to webp.workflow
Created October 6, 2022 21:36
convert image to webp with right-click
# 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
cjimmy / Image.jsx
Last active May 14, 2020 19:03
A versatile React component for images that is compliant with AMP, webp, responsive screens, and lazy loading.
/** 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
cjimmy / amp-animation-in-react.md
Last active August 8, 2022 01:51
amp-animation in React or jsx

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
cjimmy / lighthouse-ci-docker.md
Last active April 13, 2020 03:00
How to set up Lighthouse CI with a Docker Dashboard

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
cjimmy / convertToWebp.sh
Last active June 28, 2024 23:45
Bash script to convert to images to webp, intended for Automator, right-click Service
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
cjimmy / lavaman2015-pass.py
Last active July 13, 2017 11:12
Python code that sorts through the Lavaman Triathlon 2015 results, cleans up data, and creates a csv file to be parsed by D3 and shown in data visualizations of the race seen in http://jimmychion.com/lavaman2015.html
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
cjimmy / lavaman-2015-race-visualization.js
Last active July 14, 2017 12:31
D3.js code to create the data visualizations seen on http://jimmychion.com/lavaman2015.html
//-- 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,