Xiao-Hu Tai xiaohutai

## single-file-web-component.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Single File Web Component</title>
</head>
<body>
  <template id=single-file>
    <style>
      h1 {

## plink-plonk.js
/*
Copy this into the console of any web page that is interactive and doesn't
do hard reloads. You will hear your DOM changes as different pitches of
audio.

I have found this interesting for debugging, but also fun to hear web pages
render like UIs do in movies.
*/

const audioCtx = new (window.AudioContext || window.webkitAudioContext)()

## *finally-polyfill.md

      
              4 files
            
          
              2 forks
            
          
              3 comments
            
          
              29 stars
            
          
                developit
                / *finally-polyfill.md
            
            
              Last active
              January 16, 2023 17:25
            
          
    finally-polyfill

A tiny ~150-byte polyfill for Promise.prototype.finally.
Useful for browsers that support Promise but not the .finally() method.
Usage

npm install finally-polyfill

  
## visually-hidden.css
/**
* VISUALLY HIDDEN
* Hides element visually and removes it from the flow,
* but importantly, allows assitive technology to access it
*/
.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: auto;
  margin: 0;

## example.js
export default {
  const parents = getNamedParents(this.$router.options.routes, this.$route.matched)
  if (parents.length) {
    return {
      name: parents[parents.length - 1].name,
    }
  }
  return { name: 'home' }
}

## _magic.css
*, *:before, *:after { box-sizing: border-box; }

## css.js
// https://github.com/calebdwilliams/construct-style-sheets
import "construct-style-sheets-polyfill";

export default strings => {
  if (document.readyState === "loading") {
    window.addEventListener("DOMContentLoaded", () => adopt(strings));
  } else {
    adopt(strings);
  }
};

## css-layout-hack.js
// create a bookmark and use this code as the URL, you can now toggle the css on/off
// thanks+credit: https://dev.to/gajus/my-favorite-css-hack-32g3
javascript: (function() {
	var styleEl = document.getElementById('css-layout-hack');
	if (styleEl) {
		styleEl.remove();
		return;
	}
	styleEl = document.createElement('style');
	styleEl.id = 'css-layout-hack';

## everything-i-know-about-routing.md

      
              1 file
            
          
              34 forks
            
          
              9 comments
            
          
              326 stars
            
          
                ryanflorence
                / everything-i-know-about-routing.md
            
            
              Last active
              May 29, 2024 20:14
            
          
    Everything I Know About UI Routing

Definitions


Location - The location of the application. Usually just a URL, but the location can contain multiple pieces of information that can be used by an app

pathname - The "file/directory" portion of the URL, like invoices/123
search - The stuff after ? in a URL like /assignments?showGrades=1.
query - A parsed version of search, usually an object but not a standard browser feature.
hash - The # portion of the URL. This is not available to servers in request.url so its client only. By default it means which part of the page the user should be scrolled to, but developers use it for various things.
state - Object associated with a location. Think of it like a hidden URL query. It's state you want to keep with a specific location, but you don't want it to be visible in the URL.


## 404.html
<!DOCTYPE html><html lang=en>
<title>Page Not Found</title>
<meta charset=utf-8>
<meta name=viewport content="width=device-width,initial-scale=1">

<h1>Page Not Found</h1>
<p>Sorry, but the page you were trying to view does not exist.</p>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Single File Web Component</title>
	</head>
	<body>
	<template id=single-file>
	<style>
	h1 {
	/*
	Copy this into the console of any web page that is interactive and doesn't
	do hard reloads. You will hear your DOM changes as different pitches of
	audio.

	I have found this interesting for debugging, but also fun to hear web pages
	render like UIs do in movies.
	*/

	const audioCtx = new (window.AudioContext \|\| window.webkitAudioContext)()
	/**
	* VISUALLY HIDDEN
	* Hides element visually and removes it from the flow,
	* but importantly, allows assitive technology to access it
	*/
	.visually-hidden {
	border: 0;
	clip: rect(0 0 0 0);
	height: auto;
	margin: 0;
	export default {
	const parents = getNamedParents(this.$router.options.routes, this.$route.matched)
	if (parents.length) {
	return {
	name: parents[parents.length - 1].name,
	}
	}
	return { name: 'home' }
	}
	// https://github.com/calebdwilliams/construct-style-sheets
	import "construct-style-sheets-polyfill";

	export default strings => {
	if (document.readyState === "loading") {
	window.addEventListener("DOMContentLoaded", () => adopt(strings));
	} else {
	adopt(strings);
	}
	};
	// create a bookmark and use this code as the URL, you can now toggle the css on/off
	// thanks+credit: https://dev.to/gajus/my-favorite-css-hack-32g3
	javascript: (function() {
	var styleEl = document.getElementById('css-layout-hack');
	if (styleEl) {
	styleEl.remove();
	return;
	}
	styleEl = document.createElement('style');
	styleEl.id = 'css-layout-hack';
	<!DOCTYPE html><html lang=en>
	<title>Page Not Found</title>
	<meta charset=utf-8>
	<meta name=viewport content="width=device-width,initial-scale=1">

	<h1>Page Not Found</h1>
	<p>Sorry, but the page you were trying to view does not exist.</p>