Ryan Johnson CITguy

MS Browser Prefix Support

Prefixed Properties

Property	IE	Edge
`-ms-overflow-style`	-	No

Pseudo Elements

custom-elements

Polyfill for Custom Elements

See Patch/Native

Uses

A curated list of stuff I use.

Setups

Work Setup

Category	Device
Keyboard	Coolermaster Novatouch TKL (SGK-5000-GKCT2-US)
Mouse/Trackpad	Apple Magic Trackpad (A1535)

A Certain Magical Index
A Certain Scientific Accelerator
A Certain Scientific Railgun
BAKI
The Big O
Black Clover
Bleach
Blood Blockade Battlefront
Boruto: Next Generations
Castlevania (Netflix Original)

Automatic Git Hook Installation for Node workflow

NOTE: This setup assumes that your project is for a shared NPM package and your workflow has a start script defined in package.json.

1. Git Hooks Directory

Recommendation: git-hooks/

Since git ignores the .git/ directory, you'll need to create a separate directory to house your version-controlled hooks. I'd recommend git-hooks/ to make its purpose obvious. Whatever name you give your hooks directory, you'll

Supporting IE

Below are details worth noting when considering to support or continue supporting Internet Explorer.

Facts

IE is no longer actively receiving new feature updates [needs reference]
IE11 is the only version still supported by Microsoft [needs reference]
IE11 is only receiving patches for critical security issues [needs reference]
IE11 has broken implemntations of valid, semantic HTML5 elements
- for unknown elements, browsers will style them as inline elements. This is problematic when you want to use valid semantic HTML5 elements to provide a11y support and the browser doesn't know about them.
As a workaround, you have to add additional markup (role="main", etc.) and CSS (main { display: block; }) in order to drag IE forward to modern times.

Web Dev Links

Miscellaneous links to stuff I find interesting or useful.

NPM Packages

style-dictionary - quickly generate design tokens for multiple platforms
docsify - simple documentation from markdown files

Vanilla HTML

(a.k.a. No framework)

Recommendations

Creating Custom Elements

Be aware of built-in methods and properties of HTMLElement and its prototype chain.
- Node ← Element ← HTMLElement

	@mixin visuallyHidden {
	// remove external box decoration
	border: 0;
	outline: none;
	box-shadow: none;
	// shrink as small as possible without removing
	// content from the accessibility tree
	width: 1px;
	height: 1px;
	// eliminate any space being taken up by the element

	/*
	Reset the box-sizing
	https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
	*/
	html {
	box-sizing: border-box;
	}

	*,
	*::before,