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

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

	/// VERTICALLY ALIGN LABEL
	/// Adds a pseudo-element to help vertically align
	/// text labels in buttons/block-like links without
	/// using magic numbers
	/// More: https://ishadeed.com/article/button-label-alignment/
	@mixin vertically-align-label() {
	&::before {
	content: '';
	display: inline-block;
	vertical-align: middle;

	/*
	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';