Skip to content

Instantly share code, notes, and snippets.

View SpenceDiNicolantonio's full-sized avatar

Spence DiNicolantonio SpenceDiNicolantonio

View GitHub Profile
@SpenceDiNicolantonio
SpenceDiNicolantonio / blur-on-escape.ts
Last active May 6, 2024 21:18
Blur on Escape directive #svelte #directive #typescript
export interface Options {
bubble: boolean;
}
// When applied to an input, it will blur the input when the escape key is pressed
// By default it will prevent the default action of the escape key, which is useful
// for inputs in dialogs
export default function blurOnEscape(node: HTMLElement, options: Options = { bubble: false }) {
const onKeydown = (event: KeyboardEvent) => {
if (event.key !== 'Escape') return;
@SpenceDiNicolantonio
SpenceDiNicolantonio / fouc-off.svelte
Last active May 7, 2024 13:43
FOUC Off (Svelte) #svelte #fouc
<!-- This component disables CSS transitions until onMount fires, in order to avoid FOUC -->
<script lang="ts">
import { tick } from 'svelte';
// Adds 'mounted' class to body to signal that transitions should be enabled
$effect(() => {
tick().then(() => document.firstElementChild?.setAttribute('data-mounted', 'true'));
});
</script>
@SpenceDiNicolantonio
SpenceDiNicolantonio / .editorconifig
Created May 3, 2024 23:19
.editorconfig template #format #template
root = true
[*]
end_of_line = lf
insert_final_newline = true
indent_style = tab
indent_size = 2
charset = utf-8
trim_trailing_whitespace = true
@SpenceDiNicolantonio
SpenceDiNicolantonio / log-error.ts
Created May 3, 2024 02:41
Typescript error logger #typescript
export function logError(err: unknown, context?: string) {
// Convert to Error if it's not one
let error: Error;
if (err instanceof Error) {
error = err;
} else {
// Wrap string in Error, but pop first line of stack (which will be this line)
error = new Error(String(err));
error.stack = error.stack?.split('\n').slice(1).join('\n');
}
@SpenceDiNicolantonio
SpenceDiNicolantonio / error.ts
Last active May 3, 2024 02:40
Typescript Error class #typescript
type ErrorName = 'Unknown Error' | 'Initialization Error';
export class ProjectError extends Error {
name: ErrorName;
data?: Record<string, unknown>;
constructor({ name, message, data }: { name: ErrorName; message: string; data?: Record<string, unknown> }) {
super();
this.name = name;
this.message = message;
@SpenceDiNicolantonio
SpenceDiNicolantonio / to-state.svelte.ts
Created May 3, 2024 02:19
Svelte 5 Store to State #svelte #store #typescript
// !! This is yet untested
import type { Writable } from 'svelte/store';
export const toState = <T>(store: Writable<T>, initial: T | null = null) => {
let value = $state<T | null>(initial);
const stateful = {
get: () => value,
set: (newValue: T) => {
store.set(newValue);
@SpenceDiNicolantonio
SpenceDiNicolantonio / breakpoint-indicator.svelte
Created May 2, 2024 17:36
Breakpoint indicator #svelte #tailwind #breakpoints
<script lang="ts">
import { dev } from '$app/environment';
let hide = $state(false);
</script>
{#if dev}
<aside
ondblclick={() => (hide = true)}
class:!hidden={hide}
@SpenceDiNicolantonio
SpenceDiNicolantonio / tailwind.config.cjs
Last active May 2, 2024 16:43
Tailwind paper shadow #tailwind #css #material-design
module.exports = {
theme: {
extend: {
boxShadow: {
'paper-xs': '0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)',
'paper-sm': '0 2px 4px rgba(0,0,0,0.14), 0 2px 4px rgba(0,0,0,0.24)',
paper: '0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)',
'paper-md': '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)',
'paper-lg': '0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)',
'paper-xl': '0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22)',
@SpenceDiNicolantonio
SpenceDiNicolantonio / prevent-default.ts
Last active May 6, 2024 20:46
Prevent Default directive #svelte #typescript #directive
export default function preventDefault<T extends Event>(fn: (e: T) => void | Promise<void>) {
return function (this: (e: T) => void, event: T) {
event.preventDefault();
fn.call(this, event);
};
}
@SpenceDiNicolantonio
SpenceDiNicolantonio / tailwind-transition.ts
Created April 30, 2024 22:12
Svelte/Tailwind transition directive #svelte #tailwind #animation #transition #directive
import { linear } from 'svelte/easing';
type TickFunc = (t: number) => number | void;
export interface TailwindTransitionOptions {
delay?: number;
easing?: (t: number) => number;
base?: string;
from?: string;
to?: string;