Skip to content

Instantly share code, notes, and snippets.

Cathy Zhu cathyxz

Block or report user

Report or block cathyxz

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
View amp-nested-menu.html
<!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="">
View gist:08991eab58c2a392b170512e1b7b9d4d
"title":"Commerce Root",
"title":"Home & Garden",
cathyxz /
Last active Jul 31, 2019
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 <amp-list> on user click) to prevent content-shifting.


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,
View gist:54faee538a7a9ee9375cfb07f92d7c9b
<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 Dec 19, 2018
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 Oct 1, 2018
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 Sep 18, 2018
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 

iOS restrictions re: bringing up the keyboard on programmatic focus

I can't find exact specifications on this, but it seems that iOS restricts bringing up the keyboard via programmatically focusing on <input>. It only brings up the keyboard in response to explicit user interaction.

  1. iOS focus on input field only brings up keyboard when called inside a click handler.
  2. It doesn’t work if the focus is async.

This presents a curious problem when you want to autofocus an input inside a modal or lightbox, since what you generally do is click on a button to bring up the lightbox, and then focus on the input after the lightbox has been opened. Without anything fancy, it actually works ok. The problem shows up when you try to add something fancy like a setTimeout or a promise.then(). I don't know why people would want to use a setTimeout here, but waiting for a promise is actually a pretty common use case. E.g. we try to batch dom manipulations like getting a lightbox to show up inside `requestAnimati

You can’t perform that action at this time.