Skip to content

Instantly share code, notes, and snippets.

Jeremy Elbourn jelbourn

  • Google
  • California
Block or report user

Report or block jelbourn

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
@jelbourn
jelbourn / index.html
Created Jul 9, 2019
Alpha blending calculator
View index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<p>
@jelbourn
jelbourn / release-names.txt
Last active Jun 18, 2018
Angular Material release names so far
View release-names.txt
6.3.0 tourmaline-transom
6.2.1 crystal-caribou
6.2.0 bamboo-shampoo
6.1.0 plaster-parliament
6.0.2 chocolate-reality
6.0.1 glass-spaceship
6.0.0 vibranium-vivarium
5.2.5 cardboard-kangaroo
5.2.4 ash-submarine
5.2.3 diamond-silhouette
@jelbourn
jelbourn / taxonomy.js
Created Apr 15, 2018
Example tree data
View taxonomy.js
[
{
name: 'Animalia',
subclassification: [
{
name: 'Chordata',
subclassification: [
{name: 'Craniata', subclassification: []},
{name: 'Tunicata', subclassification: []},
{name: 'Cephalochordata', subclassification: []},
@jelbourn
jelbourn / rx-chain.ts
Created Jun 21, 2017
Chaining rxjs operators without modifying the prototype with type enforcement
View rx-chain.ts
export declare class MapBrand { private _x; }
export declare class FilterBrand { private _x; }
export declare class ReduceBrand { private _x; }
export type mapOperator<T, R> = typeof map & MapBrand;
export type filterOperator<T> = typeof filter & FilterBrand;
export type reduceOperator<T> = typeof reduce & ReduceBrand;
const myMap = map as typeof map & MapBrand;
@jelbourn
jelbourn / dynamic-component.ts
Created Oct 12, 2016
Dynamic component loading cookbook
View dynamic-component.ts
import {
NgModule,
Component,
Directive,
ViewContainerRef,
ViewChild,
ComponentFactoryResolver,
} from '@angular/core';
@jelbourn
jelbourn / scrape.js
Created Sep 23, 2015
Scrape Material Design colors from public site
View scrape.js
var us = document.createElement('script');
us.src = 'https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js';
document.body.appendChild(us);
setTimeout(() => {
window.palettes = {};
_.each(document.querySelectorAll('.color-group:not(:last-child)'), (group) => {
var nameElement = group.querySelector('.name');
if (!nameElement) return;
@jelbourn
jelbourn / component.scss
Last active Aug 29, 2015
Flexible shadow component styling
View component.scss
// The "modifier", such as '.md-primary' or '.md-fab' is applied to the
// *host* element, but the style actually needs to be applied to an element
// within the shadow root. We can use a mixin to cover both native shadow DOM
// and emulated / polyfilled shadow DOM at the same time.
// Base mixin for general use.
@mixin host-context($element, $modifier, $target) {
:host(#{$modifier}) #{$target},
#{$element}#{$modifier} #{$target} {
@content
@jelbourn
jelbourn / palette.scss
Created Mar 3, 2015
Material Design Color Palette Variables
View palette.scss
$md-red: (
50: #ffebee,
100: #ffcdd2,
200: #ef9a9a,
300: #e57373,
400: #ef5350,
500: #f44336,
600: #e53935,
700: #d32f2f,
800: #c62828,
@jelbourn
jelbourn / alpha-blend.scss
Last active Sep 12, 2018
SCSS alpha blend
View alpha-blend.scss
// Overlays one color on top of another and returns the resulting color.
// This is used to determine contrast ratio for two colors with partial opacity.
// See http://en.wikipedia.org/wiki/Alpha_compositing#Alpha_blending
@function alpha-blend($overlay, $base) {
$overlayAlpha: alpha($overlay);
$baseAlpha: alpha($base);
// If the overlaid color is completely opaque, then the result is just going to be that color.
@if $overlayAlpha >= 1 {
@return $overlay;
@jelbourn
jelbourn / angular-polymorphism.js
Last active Apr 9, 2016 — forked from anonymous/jsbin.EhAnIMaJ.html
Simple angular directive for polymorphism. Running example: http://jsbin.com/EhAnIMaJ/2/edit
View angular-polymorphism.js
var module = angular.module('test', []);
// Simple directive lets you use polymorphism.
module.directive('filter', function() {
return {
scope: {filter: '=filter'},
template: '<div ng-include="filter.url"></div>'
};
});
You can’t perform that action at this time.