Skip to content

Instantly share code, notes, and snippets.

View JLarky's full-sized avatar

Yaroslav Lapin JLarky

214 followers · 7 following
View GitHub Profile
@JLarky
JLarky / DebugJSON.astro
Last active April 11, 2025 07:59
Debug JSON with json.pub for Astro
---
type Props = {
json: unknown;
};
---
<view-as-json><pre data-target="view-as-json:pre" set:text={JSON.stringify(Astro.props.json, null, 2)} /></view-as-json>
<script is:inline type="module">
// @ts-ignore
import { liftHtml } from 'https://esm.sh/@lift-html/core@0.0.4';
@JLarky
JLarky / README.md
Last active April 11, 2025 07:58
Debug JSON with json.pub for Astro
@JLarky
JLarky / 00_README.md
Last active April 5, 2025 13:02
useChildFormStatus

Why is useFormStatus always returning pending false?

So you are trying out that new fangled useFormStatus hook but it doesn't actually react to the status of your form?

Now you tried to Google it and all you get is RTFM "go read docs again". Because hook useFormStatus shows you the status of parent form, not a sibling one.

Let's explain that in English.

  • <form><Spinner></form> works
  • `` doesn't
@JLarky
JLarky / HydrationCounter.astro
Created April 5, 2025 03:34
nice and easy "did my React had hydration errors?" script https://x.com/JLarky/status/1908362375490867547
---
declare global {
interface Window {
had_hydration_error?: string;
}
}
---
<script>
const prefix = 'Uncaught Error: ';
@JLarky
JLarky / index.html
Created February 17, 2025 16:56
Test for https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/is
<!DOCTYPE html>
<html>
<head is="my-head">
<script>
customElements.define(
"my-head",
class extends HTMLHeadElement {
connectedCallback() {
this.setAttribute("live", "true");
this.appendChild(document.createElement("title")).textContent =
@JLarky
JLarky / README.md
Created August 1, 2022 17:29
Ultimate example of solidjs context hook with nice type-safe (TypeScript) wrappers and reduced boilerplate by using `ReturnType`
@JLarky
JLarky / README.md
Created August 10, 2022 06:08
Make git diff work on binary bun lock files, i.e. bun.lockb

Hi, I hope this finds you well

Here's what I promise you:

image

Here's how to get it:

Set gitattributes somewhere in your repo

@JLarky
JLarky / README.md
Last active October 29, 2024 14:16
Ultimate example of react context hook with nice type-safe (TypeScript) wrappers and reduced boilerplate by using `ReturnType`
@JLarky
JLarky / Embed.tsx
Created September 10, 2024 06:21
React version of Embed block for react-sdk (sdk v2) for Builder.io
// https://github.com/BuilderIO/builder/blob/21c96eff31434f51adc9ec3e6071256572cd261b/packages/sdks/src/blocks/embed/embed.lite.tsx
import { useEffect, useRef, useState } from 'react';
export interface EmbedProps {
content: string;
}
const SCRIPT_MIME_TYPES = ['text/javascript', 'application/javascript', 'application/ecmascript'];
function isJsScript(script: HTMLScriptElement) {
@JLarky
JLarky / snippet.js
Created September 6, 2024 18:28
How to decode Astro props for <astro-island> element
((raw)=>{let i = { 0: t => m(t), 1: t => a(t), 2: t => new RegExp(t), 3: t => new Date(t), 4: t => new Map(a(t)), 5: t => new Set(a(t)), 6: t => BigInt(t), 7: t => new URL(t), 8: t => new Uint8Array(t), 9: t => new Uint16Array(t), 10: t => new Uint32Array(t) } , o = t => { let[l,e] = t; return l in i ? i[l](e) : void 0 } , a = t => t.map(o) , m = t => typeof t != "object" || t === null ? t : Object.fromEntries(Object.entries(t).map( ([l,e]) => [l, o(e)])); return m(raw)})(JSON.parse($0.getAttribute('props')))