A tiny (265 byte) utility to create state machine components using two pure functions.
The API is a single function that accepts 2 pure functions as arguments:
# ----------------------------------------------------------------------------- | |
# AI-powered Git Commit Function | |
# Copy paste this gist into your ~/.bashrc or ~/.zshrc to gain the `gcm` command. It: | |
# 1) gets the current staged changed diff | |
# 2) sends them to an LLM to write the git commit message | |
# 3) allows you to easily accept, edit, regenerate, cancel | |
# based on https://gist.github.com/karpathy/1dd0294ef9567971c1e4348a90d69285 | |
gcm() { | |
# Function to generate commit message |
# ----------------------------------------------------------------------------- | |
# AI-powered Git Commit Function | |
# Copy paste this gist into your ~/.bashrc or ~/.zshrc to gain the `gcm` command. It: | |
# 1) gets the current staged changed diff | |
# 2) sends them to an LLM to write the git commit message | |
# 3) allows you to easily accept, edit, regenerate, cancel | |
# based on https://gist.github.com/karpathy/1dd0294ef9567971c1e4348a90d69285 | |
gcm() { | |
# Function to generate commit message |
# ----------------------------------------------------------------------------- | |
# AI-powered Git Commit Function | |
# Copy paste this gist into your ~/.bashrc or ~/.zshrc to gain the `gcm` command. It: | |
# 1) gets the current staged changed diff | |
# 2) sends them to an LLM to write the git commit message | |
# 3) allows you to easily accept, edit, regenerate, cancel | |
# But - just read and edit the code however you like | |
# the `llm` CLI util is awesome, can get it here: https://llm.datasette.io/en/stable/ | |
gcm() { |
export function IsolateCSS(props: { children: React.ReactNode }) { | |
const onceRef = useRef(false); | |
const [shadowRoot, setShadowRoot] = useState<ShadowRoot>(); | |
const ref = useCallback((ref: HTMLDivElement | null) => { | |
if (ref && onceRef.current === false) { | |
onceRef.current = true; | |
setShadowRoot(ref.attachShadow({ mode: 'open' })); | |
} | |
}, []); |
onFileChange(ev: any) { | |
var data_uri = new String; | |
// asuming that only 1 file is uploaded | |
const file = ev.target.files[0]; | |
// Check file size | |
if (file.size > <SILE_LIMIT>) { | |
// do your feedback | |
return; | |
} |
const inBrowser = typeof window !== 'undefined' | |
// get user agent | |
const UA = inBrowser && window.navigator.userAgent.toLowerCase() | |
// detect browser | |
const isIE = UA && /msie|trident/.test(UA) | |
const isIE9 = UA && UA.indexOf('msie 9.0') > 0 | |
const isEdge = UA && UA.indexOf('edge/') > 0 | |
const isChrome = UA && /chrome\/\d+/.test(UA) && !isEdge |
A tiny (265 byte) utility to create state machine components using two pure functions.
The API is a single function that accepts 2 pure functions as arguments:
I made a little styling lib called glam
(some features are in development)
let's start off with the simplest use case. we'll make an 'index.html' page,
and assume we've setup our js bundler to output bundle.js
@tracked
is a decorator for Preact that makes working with state values no different than properties on your component instance.
It's one 300 byte function that creates a getter/setter alias into state/setState() for a given key, with an optional initial value. The "magic" here is simply that it works as a property decorator rather than a function, so it appears to integrate directly into the language.
tracked
has no dependencies and works with any component implementation that uses this.state
and this.setState()
.
/* Create a Stylish style with this and apply to github.com | |
https://news.ycombinator.com/item?id=12110682 */ | |
body, .intgrs-page .main-content, .blog-content, .migration-wrapper, .migrate-owners-wrapper, .setup-wrapper, .showcase-page-title, .tooltipped::after { font-family: Helvetica, arial, nimbussansl, liberationsans, freesans, clean, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important; } | |
.markdown-body { font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important; } | |
body { font-size: 13px !important; line-height: 1.4 !important; } | |
.blob-code { line-height: 1.4 !important; } |