Skip to content

Instantly share code, notes, and snippets.

View kristoferjoseph's full-sized avatar
🐘
💨

kj kristoferjoseph

🐘
💨
763 followers · 28 following
View GitHub Profile
@kristoferjoseph
kristoferjoseph / text-input.mjs
Created August 12, 2022 20:50
text input prototype
export default function InputText({ html, state, utils={} }) {
const { attrs={} } = state
const {
description='',
label='',
name='',
pattern='',
placeholder='',
value='',
min='',
@kristoferjoseph
kristoferjoseph / custom-element.mjs
Last active August 6, 2022 19:10
CustomElement Base
export default class CustomElement extends HTMLElement {
constructor() {
super()
const templateName = `${this.tagName.toLowerCase()}-template`
const template = document.getElementById(templateName)
if (template) {
this.template = template
}
else {
this.template = document.createElement('template')
@kristoferjoseph
kristoferjoseph / element-base.mjs
Created July 27, 2022 20:08
export default class ElementBase extends HTMLElement {
constructor() {
super()
const name = this.tagName.toLowerCase()
const template = document.getElementById(`${name}-template`)
if (template) {
this.replaceChildren(template.content.cloneNode(true))
}
}
}
@kristoferjoseph
kristoferjoseph / watch.ts
Last active May 4, 2022 19:33
deno file watcher test runner
import { exec } from "https://deno.land/x/exec/mod.ts";
const watcher = Deno.watchFs("./");
for await (const event of watcher) {
// if you're curious
// let kind = event.kind
// console.log('EVENT KIND: ', kind)
await exec('clear')
await exec('deno test --allow-read')
}
@kristoferjoseph
kristoferjoseph / multiple-single-file-web-components.html
Last active November 12, 2021 23:03
Multiple single file Web Components
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<template id="a">
<style>
slot {
@kristoferjoseph
kristoferjoseph / fixed-header.html
Created May 18, 2017 18:57
Example of a fixed header html page using flexbox
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fixed header</title>
<style>
.container {
display: flex;
flex-direction: column;
position: absolute;
@kristoferjoseph
kristoferjoseph / main-page.js
Last active August 31, 2021 20:06
Enhance page api dream boat
// Function name would be the page name
export async function Main(html, data) {
return html`<my-custom-element todos="${data.todos}"></my-custom-element>`
}
@kristoferjoseph
kristoferjoseph / my-paragraph-nested-test.html
Created July 24, 2021 16:08
<html>
<head></head>
<body>
<template id=my-paragraph-template>
<p>
<slot name="my-text">
My default text
</slot>
</p>
</template>
@kristoferjoseph
kristoferjoseph / wc-slots.html
Last active July 23, 2021 20:14
Test for slot overrides.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<template id=begin-page-template>
<h1>Begin Page</h1>
<begin-content>
@kristoferjoseph
kristoferjoseph / Server.py
Last active June 25, 2021 09:54 — forked from HaiyangXu/Server.py
A simper python http server can handle mime type properly
# -*- coding: utf-8 -*-
#test on python 3.4 ,python of lower version has different module organization.
import http.server
from http.server import HTTPServer, BaseHTTPRequestHandler
import socketserver
PORT = 8080
Handler = http.server.SimpleHTTPRequestHandler