Skip to content

Instantly share code, notes, and snippets.

View CITguy's full-sized avatar

Ryan Johnson CITguy

34 followers · 23 following
View GitHub Profile
@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 / Web Dev Links.md
Last active February 15, 2020 20:24
@CITguy
CITguy / BuJo.md
Last active January 27, 2019 06:21
@JamieMason
JamieMason / group-objects-by-property.md
Created September 14, 2018 07:38
Group Array of JavaScript Objects by Key or Property Value

Group Array of JavaScript Objects by Key or Property Value

Implementation

const groupBy = key => array =>
  array.reduce((objectsByKeyValue, obj) => {
    const value = obj[key];
    objectsByKeyValue[value] = (objectsByKeyValue[value] || []).concat(obj);
    return objectsByKeyValue;
@PaulKinlan
PaulKinlan / applyTemplate.js
Last active September 12, 2018 08:02
Simple Templating
const applyTemplate = (templateElement, data) => {
const element = templateElement.content.cloneNode(true);
const treeWalker = document.createTreeWalker(element, NodeFilter.SHOW_ELEMENT, () => NodeFilter.FILTER_ACCEPT);
while(treeWalker.nextNode()) {
const node = treeWalker.currentNode;
for(let bindAttr in node.dataset) {
let isBindableAttr = (bindAttr.indexOf('bind_') == 0) ? true : false;
if(isBindableAttr) {
let dataKeyString = node.dataset[bindAttr];
@paulirish
paulirish / what-forces-layout.md
Last active April 30, 2024 17:56
What forces layout/reflow. The comprehensive list.

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics
  • elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
@imjasonh
imjasonh / markdown.css
Last active February 12, 2024 17:18
Render Markdown as unrendered Markdown (see http://jsbin.com/huwosomawo)
* {
font-size: 12pt;
font-family: monospace;
font-weight: normal;
font-style: normal;
text-decoration: none;
color: black;
cursor: default;
}
@austinhyde
austinhyde / js-observables-binding.md
Last active August 16, 2023 18:19
Vanilla JavaScript Data Binding

Observables

You don't really need a framework or fancy cutting-edge JavaScript features to do two-way data binding. Let's start basic - first and foremost, you need a way to tell when data changes. Traditionally, this is done via an Observer pattern, but a full-blown implementation of that is a little clunky for nice, lightweight JavaScript. So, if native getters/setters are out, the only mechanism we have are accessors:

var n = 5;
function getN() { return n; }
function setN(newN) { n = newN; }

console.log(getN()); // 5

setN(10);

@jcgregorio
jcgregorio / How_to_use.html
Last active July 17, 2023 14:44
HTML Templating using the HTML <template> element and exactly 100 lines of JS. A cleaned up version of this code is now available at https://github.com/jcgregorio/stamp/.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="templating.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<template id=t>