Skip to content

Instantly share code, notes, and snippets.

View developit's full-sized avatar
🦊
write, the codes

Jason Miller developit

🦊
write, the codes
12.4k followers · 359 following
View GitHub Profile
@developit
developit / instant-documentation-publish.sh
Last active March 25, 2024 15:49
Publish your docs instantly using gist & documentation-viewer
# SETUP: install documentation.js:
npm i -g documentation browser-pipe
# SETUP: install gist cli (github.com/defunkt/gist)
brew install gist
# generate docs, upload to gist.github.com, then pipe the Gist URL to Documentation Viewer in your browser:
documentation src | gist -p -f docs.json | awk '{print "https://documentation-viewer.firebaseapp.com/#"$1}' | browser-pipe
@developit
developit / *Preact Without Build Tools.md
Last active January 28, 2024 20:22

Preact, Without Build Tools

This is a demonstration of using Preact without any build tooling. The library is linked from the esm.sh CDN, however a standalone JS file exporting HTM + Preact + Hooks can also be downloaded here.

@developit
developit / *Preact Root Fragment - replaceNode for Preact 11+.md
Last active January 28, 2024 07:04

preact-root-fragment: partial root rendering for Preact

This is a standalone Preact 10+ implementation of the deprecated replaceNode parameter from Preact 10.

It provides a way to render or hydrate a Preact tree using a subset of the children within the parent element passed to render():

<body>
  <div id="root">  ⬅ we pass this to render() as the parent DOM element...
@developit
developit / .eslintrc.js
Last active January 19, 2024 21:54
Preact CLI 3 + TypeScript starter
module.exports = {
env: {
browser: true
},
extends: [
'plugin:react/recommended',
'plugin:@typescript-eslint/recommended',
'prettier/@typescript-eslint',
'plugin:prettier/recommended'
],
@developit
developit / workerize-pool.js
Last active January 5, 2024 15:49
Simple pooling for workerize / workerize-loader.
/**
* Copyright 2018 Google Inc. All Rights Reserved.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
@developit
developit / persisted-signal.ts
Created August 18, 2023 22:41
Demo: https://jsfiddle.net/developit/vL2n7564/
import { signal, effect } from "@preact/signals-core";
interface CustomStorage {
getItem(key: string): void;
setItem(key: string, value: string | null): void;
}
/**
* A version of signal() that persists and recalls its value in localStorage.
*
@developit
developit / htm-ssr.js
Created September 5, 2019 00:30
const express = require('express');
const { html, Component } = require('htm/preact');
const renderToString = require('preact-render-to-string');
class App extends Component {
render(props) {
return html`
<div class="app">
<h1>This is an app</h1>
<p>Current server time: ${new Date + ''}</p>
@developit
developit / htm-ssr-direct.js
Created September 5, 2019 00:33
const express = require('express');
const htm = require('htm');
const vhtml = require('vhtml');
// create an html`` tag function for vhtml:
const html = htm.bind(vhtml);
const App = (props) => html`
<div class="app">
<h1>This is an app</h1>
@developit
developit / clone-with-shadow-roots.js
Created September 29, 2020 18:59
/**
* cloneNode(true), but also clones shadow roots.
* @param {Element}
* @param {ShadowRoot[]} [shadowRoots] Any closed shadow roots passed here will be included.
*/
function cloneWithShadowRoots(node, shadowRoots) {
function walk(node, clone) {
let shadow = node.shadowRoot || shadowRoots.find(r => r.host === node);
if (shadow) {
clone.attachShadow({ mode: shadow.mode }).append(...[].map.call(shadow.childNodes, c => c.cloneNode(true)));
@developit
developit / *Modern Script Loading.md
Last active November 30, 2023 07:30

Modern Script Loading

Loading modern code for modern browsers while still supporting older browsers should be possible via module/nomodule:

<script type="module" src="/modern.js"></script>
<script nomodule src="/legacy.js"></script>

... however this results in over-fetching of scripts in Edge and Safari.