Skip to content

Instantly share code, notes, and snippets.

Edward Irby EdwardIrby

Block or report user

Report or block EdwardIrby

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@EdwardIrby
EdwardIrby / LICENSE
Last active Apr 22, 2019
yarn-completion
View LICENSE
MIT License
Copyright (c) 2016 Luke Childs, 2017 Ulysse Buonomo, 2019 Edward Irby
Copyright for portions of yarn-completion are held by Edward irby (2019) as
part of project zsh-better-npm-completion. All other copyright for project
yarn-completion held by Luke Childs (2016) and Ulysse Buonomo (2017).
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
@EdwardIrby
EdwardIrby / framgenScript.js
Created Apr 10, 2019
alternative to createTemplate
View framgenScript.js
/**
* @param {(ShadowRoot|HTMLElement)} shadowRoot
* @param {...string} strings
*/
export const createFragment = (root, ...strings) => {
removeChildren(root);
const range = document.createRange();
range.setStart(root, 0);
return range.createContextualFragment(
[...strings]
@EdwardIrby
EdwardIrby / withBundle.js
Created Mar 19, 2019
@dxworks/rite puppeteer helper
View withBundle.js
/* eslint-disable no-shadow */
import multiEntry from 'rollup-plugin-multi-entry';
import path from 'path';
import resolve from 'rollup-plugin-node-resolve';
const rollup = require('rollup');
export const withBundle = async (...entries) => {
const inputOptions = {
input: entries.length > 1
@EdwardIrby
EdwardIrby / tokens.js
Created Mar 8, 2019
Tokens.js a small utility function to make writing custom props a bit easier in js.
View tokens.js
/**
* @param {...{}} objs - object containing camelCased style properties or css custom properties
* @returns {<{'--prop': 'value'}>} containing prefixed css custom properties to be inlined.
* @example Simple
* <Textblock style={tokens({
* lineHeight: 1.2,
* fontSize: rem(47.78),
* })} />
* @example Conditional Example
* <Textblock style={tokens(
@EdwardIrby
EdwardIrby / Textblock.css
Last active Mar 6, 2019
Textblock Component Example
View Textblock.css
.Textblock {
display: var(--display);
}
@EdwardIrby
EdwardIrby / App.jsx
Created Mar 5, 2018
Pulling the ShadowDom Component all together
View App.jsx
class App extends React.Component {
constructor(props){
super(props);
this.state = {
value: props.value,
}
this.handleChange = this.handleChange.bind(this);
}
handleChange(e) {
const { value } = e.target;
View LightDomUsage.jsx
export const LightDomUsage = (props) => {
return (
<ShadowDom lightDom={
() => (
<Fragment>
<span>I'm some light dom </span>
<span slot='span' className='text'>I'm some slottedlight dom </span>
</Fragment>
)
}>
@EdwardIrby
EdwardIrby / UsingShadowDom.jsx
Last active Mar 5, 2018
Any child wrapped by ShadowDom
View UsingShadowDom.jsx
export const BasicUsage = (props) => {
const { text } = props;
return (
<ShadowDom className={ className}>
<span>{ children }</span>
</ShadowDom>
)
}
@EdwardIrby
EdwardIrby / ShadowDom.js
Created Mar 5, 2018
A little Web Component in my React
View ShadowDom.js
import React, { Component, Fragment, Children } from 'react';
import { render, unmountComponentAtNode } from 'react-dom';
import PropTypes from 'prop-types';
export class ShadowDom extends Component {
constructor(props){
super(props)
this.getTargetRef = this.getTargetRef.bind(this);
}
componentDidMount() {
@EdwardIrby
EdwardIrby / javascript.yaml
Created Nov 13, 2017
Syntax highlighting es6 micro text editor
View javascript.yaml
filetype: javascript
detect:
filename: "(\\.js$|\\.es[5678]?$)"
header: "^#!.*/(env +)?node( |$)"
rules:
- constant.number: "\\b[-+]?([1-9][0-9]*|0[0-7]*|0x[0-9a-fA-F]+)([uU][lL]?|[lL][uU]?)?\\b"
- constant.number: "\\b[-+]?([0-9]+\\.[0-9]*|[0-9]*\\.[0-9]+)([EePp][+-]?[0-9]+)?[fFlL]?"
- constant.number: "\\b[-+]?([0-9]+[EePp][+-]?[0-9]+)[fFlL]?"
You can’t perform that action at this time.