Skip to content

Instantly share code, notes, and snippets.

View cathyxz's full-sized avatar

Cathy Zhu cathyxz

97 followers · 141 following
View GitHub Profile
@cathyxz
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 (
"bufio"
"errors"
"fmt"
"io"
"net"
"syscall"
"time"
@cathyxz
cathyxz / amp-nested-menu.html
Created February 26, 2020 02:07
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<title>amp-sidebar - Example 1</title>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
<script custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js" async></script>
<link rel="canonical" href="https://preview.amp.dev/documentation/components/amp-sidebar.example.1.html">
@cathyxz
cathyxz / gist:08991eab58c2a392b170512e1b7b9d4d
Created August 20, 2019 21:12
Sample Mega Menu JSON
{
"categories":{
"id":"rootCategory",
"title":"Commerce Root",
"href":"",
"items":[
{
"id":"500006",
"title":"Home & Garden",
"href":"/home-garden/c500006",
@cathyxz
cathyxz / dynamic-resizing.md
Last active July 31, 2019 20:25
Dynamic Resizing

Dynamic Resizing in Rendered Components

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

Overview

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
cathyxz / srcset-and-sizes.md
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: https://codepen.io/cathyxz/pen/vbLrrE

<img srcset="https://placekitten.com/200/200 200w,
 https://placekitten.com/300/300 300w,
@cathyxz
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="https://m.aliexpress.com/api/search/auto-suggests/dress">
<template type="amp-mustache">
<div class="s-seller">
{{#autoSuggestPromList}}
<a href="{{action}}&amp;spm=a2g0n.home-amp" class="auto">
<div class="prom flex align-center">
{{#icon}}
<amp-img src="{{icon}}" class="prom-image" alt="image" width="60" height="30" layout="fixed"></amp-img>
@cathyxz
cathyxz / gist:ea90a1d6683b34a4ca230d51b26177b0
Created March 2, 2019 00:34
AMP Debugging Tips
AMP.setLogLevel(4)
@cathyxz
cathyxz / git-stuff.md
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
cathyxz / event-testing.md
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
cathyxz / search.md
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