Xiao-Hu Tai xiaohutai

hi, i'm daniel. i'm a 15-year-old with some programming experience and i do a little bug hunting in my free time. here's the insane story of how I found a single bug that affected over half of all Fortune 500 companies:

say hello to zendesk

If you've spent some time online, you’ve probably come across Zendesk.

Zendesk is a customer service tool used by some of the world’s top companies. It’s easy to set up: you link it to your company’s support email (like [email protected]), and Zendesk starts managing incoming emails and creating tickets. You can handle these tickets yourself or have a support team do it for you. Zendesk is a billion-dollar company, trusted by big names like Cloudflare.

Personally, I’ve always found it surprising that these massive companies, worth billions, rely on third-party tools like Zendesk instead of building their own in-house ticketing systems.

your weakest link

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

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
1. pathname - The "file/directory" portion of the URL, like invoices/123
2. search - The stuff after ? in a URL like /assignments?showGrades=1.
3. query - A parsed version of search, usually an object but not a standard browser feature.
4. 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.
5. 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.

	<!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';