Skip to content

Instantly share code, notes, and snippets.

View cathyxz's full-sized avatar

Cathy Zhu cathyxz

View GitHub Profile
cathyxz / keepalive.go
Created October 9, 2023 07:22
A hacky go script used to verify the keepalive idle timeout for websites. Used for verifying that nginx keepalive_timeout configuration is working as intended.
package main
import (
<!doctype html>
<html ⚡>
<meta charset="utf-8">
<title>amp-sidebar - Example 1</title>
<script async src=""></script>
<script async custom-element="amp-list" src=""></script>
<script async custom-template="amp-mustache" src=""></script>
<script custom-element="amp-sidebar" src="" async></script>
<link rel="canonical" href="">
"title":"Commerce Root",
"title":"Home & Garden",
cathyxz /
Last active July 31, 2019 20:25
Dynamic Resizing

Dynamic Resizing in Rendered Components

cathyzhu@ | go/amp-list-resizing Draft: April 30, 2019


Rendered data in or can sometimes be dynamically sized depending on the XHR, or change size based on user interaction. We need to allow the list to dynamically resize for legitimate use cases without causing or enabling content-shifting. To do this, we introduce layout="CONTAINER" in and with certain caveats. Background We currently allow rendering remote data via the <amp-list> component whose behavior of <amp-list> regarding sizing is as follows:

We require amp-list to specify a height, fallback, and optionally a placeholder, and do not allow it to resize if the bottom of the list is in the viewport (we show an overflow button, which resizes the `` on user click) to prevent content-shifting.

cathyxz /
Created April 29, 2019 20:52
Srcset and Sizes

Srcset and Sizes

Did some experimentation to figure out how different browsers behave with regards to the srcset and sizes attribute in various browsers. Documented below.

srcset + sizes behavior

Vanilla No AMP No CSS Example:

<img srcset=" 200w, 300w,
cathyxz / gist:54faee538a7a9ee9375cfb07f92d7c9b
Created April 24, 2019 17:34
Single item list example
<amp-list class="i-amphtml-element i-amphtml-layout-fill i-amphtml-layout-size-defined i-amphtml-layout fill-list fill-list-show" [class]="searchState.inputValue == '' ? 'fill-list' : 'fill-list fill-list-show'" credentials="include" [src]="searchState.inputValue ? autosuggest.autoSuggestSearch + encodeURIComponent(searchState.inputValue) : autosuggest.emptyAndInitialTemplateJson" layout="fill" single-item="data" items="data" id="auto-prom-suggest" noloading="" i-amphtml-layout="fill" aria-live="polite" src="">
<template type="amp-mustache">
<div class="s-seller">
<a href="{{action}}&amp;spm=a2g0n.home-amp" class="auto">
<div class="prom flex align-center">
<amp-img src="{{icon}}" class="prom-image" alt="image" width="60" height="30" layout="fixed"></amp-img>
cathyxz /
Last active December 19, 2018 22:05
Git / Github Swiss Army Knife

I need to

pull someone else's repo

git remote add coworker git://path/to/coworkers/repo.git
git fetch coworker
git checkout --track coworker/foo
git checkout foo
git pull
cathyxz /
Created October 1, 2018 20:27
Lessons Learned on Testing Events

CreateCustomEvent events don't bubble by default. So if you listen to something on the window, and create a custom event to test it, you need to make sure that the event bubbles.

cathyxz /
Last active September 18, 2018 23:15
Github Search Things

Search Expression for all PRs created since date reviewed by me but not authored by me.

is:pr created:>=2018-03-01 reviewed-by:cathyxz -author:cathyxz