Skip to content

Instantly share code, notes, and snippets.

View deebloo's full-sized avatar
👋
Hello!

Danny Blue deebloo

👋
Hello!
168 followers · 60 following
View GitHub Profile
@deebloo
deebloo / joist-handlers-2.ts
Last active August 26, 2020 15:27
import { component, State, handle, JoistElement, get } from '@joist/component';
import { template, html } from '@joist/component/lit-html';
@component({
tagName: 'my-counter',
state: 0,
render: template(({ state, run }) => {
return html`
<button @click=${run('dec_btn_clicked', -1)}>-</button>
<span>${state}</span>
@deebloo
deebloo / joist-handlers-1.ts
Last active August 26, 2020 14:47
import { component, State, handle, JoistElement, get } from '@joist/component';
import { template, html } from '@joist/component/lit-html';
@component({
tagName: 'my-counter',
state: 0,
render: template(({ state, run }) => {
return html`
<button @click=${run('decrement')}>-</button>
<span>${state}</span>
@deebloo
deebloo / my.element.ts
Last active August 25, 2020 20:52
import { component, JoistElement } from '@joist/component';
import { template, html } from '@joist/component/lit-html';
@component({
tagName: 'my-element',
state: {
title: 'Hello World'
},
render: template(({ state }) => {
return html`<h1>${state.title}</h1>`
@deebloo
deebloo / component-state-async.ts
Last active August 23, 2020 23:24
import { component, State, JoistElement, get } from '@joist/component';
import { template, html } from '@joist/component/lit-html';
@component<number>({
tagName: 'my-counter',
state: 'Hello',
render: template(({ state }) => html`${state}`)
})
class MyCounterElement extends JoistElement {
@get(State)
@deebloo
deebloo / property-validators.ts
Created August 23, 2020 17:37
import { component, property, JoistElement } from '@joist/component';
function isString(val: unknown) {
if (typeof val === 'string') {
return null;
}
return { message: 'error' };
}
@deebloo
deebloo / element-styles.ts
Last active August 23, 2020 17:31
import { component, JoistElement } from '@joist/component';
import { template, html } from '@joist/component/lit-html';
@component({
tagName: 'app-root',
shadowDom: 'open',
state: {
title: 'Hello World'
},
styles: [`
@deebloo
deebloo / joist-state-example.ts
Last active August 6, 2020 16:17
import { component, State, JoistElement, get } from '@joist/component';
import { template, html } from '@joist/component/lit-html'
@component<number>({
tagName: 'my-counter',
state: 0,
render: template(({ state }) => html`${state}`)
})
class MyCounterElement extends JoistElement {
@get(State)
@deebloo
deebloo / joist-di-example.ts
Created August 6, 2020 14:56
import { component, JoistElement, get } from '@joist/component';
import { service, inject } from '@joist/di'
@service()
class FooService {
sayHello() {
return 'Hello World';
}
}
@deebloo
deebloo / 0.md
Last active April 3, 2020 13:41
message-parts

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 / custom-element-arguments-1.html
Last active March 17, 2020 20:22
<!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';