Austin Ghoul
LightNews LightNews
banner
austingil.com
Austin Ghoul
@austingil.com
210 followers 83 following 240 posts
I love writing words, riding bikes, and righting code.

Open for work: https://austingil.com/hire
Posts Replies Media Videos
austingil.com
Fuck it...
<button onclick="(() => { window.confirm('You sure...🤨') })()" >Delete</button> Promise.reject().catch(() => { window.alert('My bad...😬') })
November 23, 2025 at 2:58 AM
austingil.com
Awfully philosophical for a government form, aren't we?
A dropdown in a form asking, "Am I a Business of an Individual?:
June 3, 2025 at 3:41 PM
austingil.com
Is @svelte.dev the Python of JavaScript Frameworks?

Reference: xkcd.com/353/
Two stick men. One is on the ground, the in the air: One: You're flying! How? Other: Python! Other: I learned it last night! Everything is so simple! Hello World is just print "Hello, world!" One: I dunno...Dynamic typing? whitespace!? Other: Come join us! Programming is fun again! It's a whole new world up here! One: But how are you flying? Other: I just typed 'import antigravity' One: That's it? Other: ...I also sampled everything in the medicine cabinet for comparison. But I think this is the Python.
May 14, 2025 at 12:00 AM
austingil.com
Really happy with these SVG components.

Define SVG library once. Add to your app root. Use to add individual SVGs.

JSDocs makes proper usage and discovering available icons easy. No need to memorize anything.

https://github.com/AustinGil/opapi/blob/main/src/components/Svg.jsx
import { splitProps } from 'solid-js'; /** * @typedef {import("solid-js").JSX.SvgSVGAttributes<SVGSVGElement>} SVGAttributes */ const definitions = { 'icon-spinner': `<symbol id="icon-spinner" viewBox="0 0 24 24">...</symbol>`, 'icon-dice': `<symbol id="icon-dice" viewBox="0 0 32 32">...</symbol>`, }; /** * @param {SVGAttributes & { * alt: string, * } & ( * { href: keyof definitions, icon?: never } | * { icon: keyof definitions, href?: never } * )} p */ export default function (p) { const [local, props] = splitProps(p, ['href', 'icon', 'alt']); return ( <svg classList={{ icon: !!local.icon, [String(local.icon)]: !!local.icon, }} role="presentation" {...props} > <use href={`#${local.href || local.icon}`} /> {local.alt && <span class="visually-hidden">{local.alt}</span>} </svg> ); } export function SvgDefs() { return ( <svg aria-hidden="true" style={{ position: 'absolute', width: '0', height: '0', overflow: 'hidden', }} version="1.1" xmlns="http://www.w3.org/2000/svg" > {/* eslint-disable-next-line solid/no-innerhtml */} <defs innerHTML={Object.values(definitions).join('')} /> </svg> ); } Several examples of the <Svg> component with red squiggles under the ones that do not match TypeScript rules. There is also a popup showing the intellisense suggestions.
June 7, 2023 at 3:22 PM