Skip to content

Instantly share code, notes, and snippets.

View deebloo's full-sized avatar
👋
Hello!

Danny Blue deebloo

👋
Hello!
View GitHub Profile
@deebloo
deebloo / web-component.js
Last active January 4, 2021 12:34
A pattern for creating vanilla web components. no library. just a pattern I am rolling around.
(function () {
expose('createMyComponent', register, factory);
/**
* Exposes your new component to the window or to a module
*
* @param {string} name - the factory name to expose
* @param {function} definition - the definition of your web component. registers to the document
* @param {function} factory - method for programmatically creating web component
*/
@deebloo
deebloo / web-component-class-example.js
Last active December 28, 2017 05:29
Its extremely easy to create vanilla custom elements with classes and template strings.
'use strict';
class NameCard extends HTMLElement {
set name(val) {
this._name = val;
this.render();
}
get name() {
return this._name;
@deebloo
deebloo / app.component.spec.ts
Last active February 10, 2018 18:36
Angular2 Webpack basic setup with UNIT TESTS!
// src/app.components.ts
import {AppComponent} from './app.component';
import {Injector} from '@angular/core';
import {expect, it, describe, beforeEach, beforeEachProviders, inject} from '@angular/core/testing';
describe('Component: AppComponent should be created', function () {
let fooComponent: FooComponent;
beforeEachProviders(() => [
@deebloo
deebloo / moment.pipe.ts
Created May 13, 2016 17:55
Easily create a better Angular2 data pipe with Momentjs
import {Pipe, PipeTransform} from '@angular/core';
import * as moment from 'moment';
@Pipe({
name: 'moment'
})
export class MomentPipe implements PipeTransform {
transform(date, format) {
return moment(date).format(format);
}
@deebloo
deebloo / angular-cli-build.js
Created May 29, 2016 21:35
angular-cli-build if you want more control over your files
/* global require, module */
var Angular2App = require('angular-cli/lib/broccoli/angular2-app');
const vendorNpmFiles = [
'systemjs/dist/system-polyfills.js',
'systemjs/dist/system.src.js',
'zone.js/dist/**/*.+(js|js.map)',
'es6-shim/es6-shim.js',
'reflect-metadata/**/*.+(js|js.map)',
@deebloo
deebloo / worker.js
Created May 29, 2016 21:53
utility function for working with inline web workers
function $worker() {
var workers = [];
// PUBLIC_API
return {
create: create,
runAll: runAll,
terminateAll: terminateAll,
list: list
}
@deebloo
deebloo / inline-worker-example.js
Last active January 19, 2018 13:15
Small function for inline workers
function createWorker(fn) {
var blob = new Blob(['self.onmessage = ', fn.toString()], { type: 'text/javascript' });
var url = URL.createObjectURL(blob);
return new Worker(url);
}
// New workers is created for a link to an external js file
var myWorker = new Worker('web-worker.js');
// function to fire when a message is sent from the worker.
myWorker.onmessage = function (e) {
console.log(e.data); // HELLO WORLD
}
// send a message to the worker
myWorker.postMessage('hello world');
var myWorker = createWorker(function (e) {
self.postMessage(e.data.toUpperCase());
});
myWorker.onMessage = function (e) {
console.log(e.data); // HELLO FROM AN INLINE WORKER!
}
myWorker.postMessage('hello from an inline worker!')
var myWorker = $worker().create(function () {
self.postMessage('Hello World');
});
myWorker.run().then(function (e) {
console.log(e.data); // 'Hello World'
});