Home | Leo's FE Code Snippet

dynamic route guard 🛡

left: 0; right: 0 is different from width: 100%;

left right vs width 100%

What does box-sizing: border-box do?

I set 100px, always 100px 🔲 📐

why your height: 100% does not work?

In order for the child element to have a height of 100%, the parent element MUST have a height specified.

fallback img src that failed to load

CSSJavaScript

img src fallback ⛔️

dynamic import Svelte component / Sveltekit with TypeScript

dynamic imports 🚀

Idempotence HTTP methods

Backend

idempotence REST API HTTP Methods

iterable Object vs Array-like Object in JavaScript

iterable has Symbol.iterator fn ; array-like has index and length 🤯

import package version into page using Sveltekit

JavaScriptSvelte

how to show 📦 version number

svelte transition on page loaded (sveltekit)

AnimationSvelte

run animation only on first page visit?

avoid font FOUT

💬 “flash of unstyled text”

group layout Sveltekit (latest)

named/scoped layout 🧐

how to add Page Transition in Sveltekit

AnimationSvelte

⚡️page transition

limit lines and end paragraph with … using CSS

It is called ellipsis…

how to convert a String to a Number in JavaScript

string => number ❇️

custom select placeholder

⏬ custom select placeholder

on:input vs on:change in Svelte

⌨ what is the difference?

render component on client side

lazy load svelte component

pass reactive props from child to parent

🎉 pass reactive binding

importing SVG with SvelteKit

📦 svg tips

pass stuff to layout SvelteKit #deprecated

pass stuff from child to layout 📦

destructure reactive variable in $:

✨ wrap destructuring in parenthesis

{#each} {:else} fallback

✨ {:else} in each loop

concat Classes Svelte

When you want do concatenate style classes, tailwind classes or etc. Do it this way, it is more performant

transition t,u Svelte

✨ t: 0 to 1 , u = 1 – t

setContext vs Store

✨ per-instance vs global

clientHeight vs offsetHeight

✨ offsetHeight includes y border..

Bind CSS variable Svelte

CSS variable binding comes in handy..

Lazy load image with Svelte

✨ Lazy load for better performance.

Light/Dark mode follow system color scheme

✨ Not prefers-color-scheme

export default vs. export const

export const is a named export that exports a const declaration or declarations.

How to use CSS variable

Usually CSS variable is declared globally in root scope, sometimes in body.

Glassy header with sticky hide and show on scroll

CSSSvelte

Implement header animation on scrolling with svelte.

Modern responsive CSS width

Code reduction in CSS media queries.

Responsive image by maintaining aspect ratio