Skip to content

Instantly share code, notes, and snippets.

View cathyxz's full-sized avatar

Cathy Zhu cathyxz

View GitHub Profile

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

@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 / 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"
<!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 / amp-interactivity-links.md
Last active August 22, 2019 19:33
Code sample master sheet for AMP interactivity talk @ Chicago
{
"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 / 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>
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