Skip to content

Instantly share code, notes, and snippets.

Danny Blue deebloo

View GitHub Profile
View custom-element-arguments-1.html
<!DOCTYPE html>
<html lang="en">
<title>My Element</title>
<script type="module">
import { html, render } from '';
View custom-element-arguments-0.html
<!DOCTYPE html>
<html lang="en">
<title>My Element</title>
<script type="module">
import { html, render } from '';
deebloo / state-container.ts
Last active Jan 28, 2019
Wrapping a state manager to allow for async actions
View state-container.ts
export type StateChange<A> = A | Observable<A> | Promise<A>;
const stateChangeToObservable = <A>(result: StateChange<A>): Observable<A> => {
if (isObservable(result)) {
return result;
} else if (result instanceof Promise) {
return from(result);
return of(result);
deebloo /
Last active Apr 3, 2020

Text Chats as Data

Most of the time when we are thinking about sending a chat message as text we just think of sending a string. This work fine in most cases but causes issues when we think about formatting or when needing to define special actions like links. This is a proposal for a potential way of treating messages differently.

Let’s say that you wanted to send this block of text as a message.

“Hello World, this is the BEST! Follow me here.”

How would you interpret the bold text? We could break up the string into distinct tokens that represent a small part of the message.

deebloo / if-animation.directive.ts
Last active Dec 21, 2018
custom directive that creates and destroys elements with an enter and exit animation
View if-animation.directive.ts
import { Directive, TemplateRef, ViewContainerRef, Input, Renderer2 } from '@angular/core';
import { timer } from 'rxjs';
selector: '[ifAnimation]'
export class IfAnimationDirective {
@Input() lsIfAnimationDelay: number;
@Input() set lsIfAnimation(display: boolean) {
View state-def.ts
import { BehaviorSubject, of } from 'rxjs';
import { distinctUntilChanged, concatMap, map, take } from 'rxjs/operators';
export class StateDef<T> extends BehaviorSubject<T> {
setState(setter: (state: T) => T) {
this.pipe(take(1)).subscribe(state => {;
View zone-google-maps-0.ts
import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
selector: 'my-app',
template: `
<div class="map-container" #mapContainer><div>
styles: [`
.map-container {
height: 300px;
deebloo / ts-custom-elements.ts
Last active Nov 4, 2016
Typescript declarations and decorators for custom elements
View ts-custom-elements.ts
export interface CustomElementConfig {
tagName: string;
options?: {
extends: string;
* @CustomElement({
* tagName: 'my-element'
deebloo / 0-sweet-modals.component.ts
Last active Oct 8, 2016
Simple Modals with Angular2
View 0-sweet-modals.component.ts
import { Component, Input } from '@angular/core';
selector: 'sweet-modal',
styleUrls: ['sweet-modal.component.css']
templateUrl: 'sweet-modal.component.html'
export class LsModalComponent {
@Input() width: string = '400px';
deebloo / compose.ts
Last active Sep 16, 2016
Compose function/decorator
View compose.ts
// Our compose function that can be used as a decorator
// Decorators are just functions
const Compose = (mixins: any[]) => {
const protos = => mixin.prototype)
const targetFunc = target => {
Object.assign(target.prototype, ...protos)
targetFunc.create = (base: any) =>{
You can’t perform that action at this time.