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">
<head>
<title>My Element</title>
</head>
<body>
<script type="module">
import { html, render } from 'https://unpkg.com/lit-html?module';
View custom-element-arguments-0.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Element</title>
</head>
<body>
<script type="module">
import { html, render } from 'https://unpkg.com/lit-html?module';
@deebloo
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
deebloo / 0.md
Last active Apr 3, 2020
message-parts
View 0.md

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
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';
@Directive({
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 => {
super.next(setter(state));
});
}
View zone-google-maps-0.ts
import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<div class="map-container" #mapContainer><div>
`,
styles: [`
.map-container {
height: 300px;
@deebloo
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
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';
@Component({
selector: 'sweet-modal',
styleUrls: ['sweet-modal.component.css']
templateUrl: 'sweet-modal.component.html'
})
export class LsModalComponent {
@Input() width: string = '400px';
@deebloo
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 = mixins.map(mixin => mixin.prototype)
const targetFunc = target => {
Object.assign(target.prototype, ...protos)
}
targetFunc.create = (base: any) =>{
You can’t perform that action at this time.