CITguy

var gulp = require('gulp');
var myTransform = require('./myTransform');

gulp.task('foobar', function (){
    return gulp.src("foobar.js")
        .pipe(myTransform())
        .pipe(gulp.dest('.'));
});

CITguy

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

MS Browser Prefix Support

Prefixed Properties

Property	IE	Edge
-ms-overflow-style	-	No

Pseudo Elements

CITguy

custom-elements

Polyfill for Custom Elements

See Patch/Native

CITguy

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)

CITguy

A quick reference list of ::-ms-* prefixed pseudo elements.

pseudo element	file	text	checkbox	radio	select	range	password	progress
::-ms-browse	☑
::-ms-check			☑	☑
::-ms-clear		☑
::-ms-expand					☑
::-ms-fill								☑
::-ms-fill-lower						☑

CITguy

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

CITguy

@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

CITguy

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

*,
*::before,

CITguy

• 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)