Snippets

Lazy Loading with CSS

Use the content-visibility property in CSS indicates to the browser whether or not an element’s contents should be rendered at initial load time, acting as a lazy load.

Animated Links

Quick little Astro component that uses Tailwind to animate links on hover.

Optimize SQLite

SQLite is a handy database and can be a lot more powerful that it seems but it also can use some optimization to help it get there.

Remix

Subscribe to a newsletter

Download a Directus Example

This is a simple bash script that when passed an example, will download just that example from the Directus examples repo, handy to get started quickly with an example and build something.

jsonHash

The jsonHash function lets you define those functions directly in the json, reducing the need to create extra functions and variables.

Range

Sometimes, you want to render a sequence of numbers.

useOnClickOutside

This hook allows you to detect clicks outside of a specified element.

Hasura

Simple fetch call for Hasura

Slack

Send a slack webhook

useAxios

Axios calls can get repetitive so a hook to handle it can be handy.

Loading Progress

Stringify query parameters

Delve

Safely get a dot-notated path within a nested object, with ability to return a default if the full key path does not exist or the value is undefined

useLocalStorage

Buttondown

Get all subscribers.

Gumroad

Tiny ID

useStickyState

useHasMounted

Debounce

API CRUD Route

Buttondown

Subscribe to a newsletter.

useInterval

Generate Slugs with Flows

Use Directus Flows to generate slugs

Print Object