ColtHands

Vue.directive('click-outside-component', {
    bind(el, binding, vnode) {
        el.clickOutsideEvent = function(event) {
            if (!(vnode.context.$el == event.target || vnode.context.$el.contains(event.target))) {
                vnode.context[binding.expression](event)
            }
        }
        document.body.addEventListener('click', el.clickOutsideEvent)
    },
    unbind(el) {

ColtHands

Vue.directive('click-outside-element', {
    bind(el, bind, vn) {
        el.cO = event => {
            if (!(el == event.target || el.contains(event.target))) {
                if(vn.context[bind.expression]) {
                    vn.context[bind.expression](event)
                }
            }
        }
        document.body.addEventListener('click', el.cO)

ColtHands

componentDidMount() {
  document.addEventListener('click', this.clickOutside.bind(this), true);
}

componentWillUnmount() {
  document.removeEventListener('click', this.clickOutside.bind(this), true);
}

clickOutside(event) {
  const domNode = ReactDOM.findDOMNode(this);

ColtHands

[
    526017964561,
    525608647855,
    526013197030,
    526017918501,
    526013196478,
    526200201544,
    526200024126,
    526014627350,
    526006502928,

ColtHands

jQuery to Vanilla.js

Selecting elements

$("selector")

• document.querySelector('#id')
• document.querySelectorAll('.class > ul li')
• document.getElementById('id')
• document.getElementsByClassName('class')

ColtHands

Git Snippets

How to remove file that was added to .gitignore after it was commited.

git rm {file_name} --cached

How to add changes to previous not pushed commit.

git commit --amend --no-edit

ColtHands

JS RegExp Snippets

Match a string between two characters

(?<=\+)(.*)(?=\@) will match world in [email protected]

1. start at + with (?<=\+)
2. select all characters with (.*)
3. end at @ with (?-\@)

Match the string exactly

ColtHands

// Credit Ryan Carniato https://frontendmasters.com/courses/reactivity-solidjs/

let context = [];

export function untrack(fn) {
    const prevContext = context;
    context = [];
    const res = fn();
    context = prevContext;
    return res;

ColtHands

List of useful macros

log!

This macro just logs values (think console.log in js).

Example usage: log!(1,2,3,"hello world", [1,2,3])

min!

ColtHands

get_git_branch() {
    git rev-parse --abbrev-ref HEAD 2>/dev/null
}

get_git_repo() {
    basename "$(git rev-parse --show-toplevel 2>/dev/null)" 2>/dev/null
}

has_unstaged_changes() {
    if [[ -n $(git status --porcelain 2>/dev/null) ]]; then