Skip to content

Instantly share code, notes, and snippets.

View CITguy's full-sized avatar

Ryan Johnson CITguy

View GitHub Profile

MS Browser Prefix Support

Prefixed Properties

Property IE Edge
-ms-overflow-style - No

Pseudo Elements

@CITguy
CITguy / custom-elements.md
Created August 23, 2021 21:56
Summary of Polyfills included in @webcomponents/webcomponentsjs

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)
@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,
@CITguy
CITguy / Animated.md
Last active April 8, 2020 19:29
What To Watch
  • 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)
@CITguy
CITguy / README.md
Last active October 19, 2022 07:00
Automatic Git Hook Configuration for Node-based projects

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

@CITguy
CITguy / supporting-ie.md
Last active February 21, 2020 02:14
Supporting Internet Explorer

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.
@CITguy
CITguy / HTML.md
Last active May 1, 2020 19:04
Web Components Framework Compatibility

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.