DEV Community: myleftshoe

Diaper (bottom sheet)

myleftshoe — Wed, 16 Apr 2025 10:45:29 +0000

Diaper - an new bottom sheet component for Svelte5 specifically for mobile.

Just released the first public version 1.0.0.

See it in action https://diaperbs.vercel.app

(Short and sweet post I know, but I've been working on it all day to get it published)

Prevent back navigation after login.

myleftshoe — Mon, 03 Mar 2025 11:23:37 +0000

sveltekit hooks can be used to protect all routes in your app by redirecting to a login page as in this simple example:

hooks.server.ts

import { redirect, type Handle } from '@sveltejs/kit'
import { AUTH_COOKIE } from '$env/static/private'

export const handle: Handle = async ({ event, resolve }) => {
    if (event.url.pathname.startsWith('/login')) {
        return await resolve(event)
    }

    if (event.cookies.get('AUTH_COOKIE') !== AUTH_COOKIE) {
        redirect(303, '/login')
    }
    return await resolve(event)
}

This works well, but but the redirect makes the login page part of the browser's history, meaning the user can navigate back to it. Maybe you don't want that - it's a pretty ugly experience especially swiping back to it on mobile.

I spent way too long trying to solve this with ChatGPT sending me on a wild goose chase. In the end the solution was simple: use svelte's goto with replaceState after successful login:

login.svelte

<script lang="ts">
    import { enhance } from '$app/forms'
    import { goto } from '$app/navigation'
    import type { PageProps } from './$types'

    let { form }: PageProps = $props()

    $effect(() => {
        if (form?.success) {
            goto('/', { replaceState: true })
        }
    })
</script>

<main class="h-full">
    <div class="flex h-full flex-col items-center justify-center gap-4">
        <form class="grid place-content-center gap-4" method="POST" action="?/login" use:enhance>
            <input class="input" name="username" type="text" placeholder="Username" autofocus required />
            <input class="input" name="password" type="password" placeholder="Password" required />
            <button class="btn preset-filled-primary-500">Log in</button>
        </form>
        <p class="text-error-500 {form?.error ? 'opacity-100' : 'opacity-0'}">{form?.error ?? '*'}</p>
    </div>
</main>

The login form is backed by a form action in +page.server.ts. The important thing here is to not redirect after login, that is done using the goto in login.svelte

export const actions = {
    login: async ({ cookies, request }) => {
        const data = await request.formData()

        const username = data.get('username') as string
        const password = data.get('password') as string

        const hashedPassword = md5Hash(password)

        const token = await login(username, hashedPassword)

        if (!token) {
            return { error: 'Invalid username or password' }
        }

        cookies.set('AUTH_COOKIE', AUTH_COOKIE, {
            path: '/',
            httpOnly: true,
            secure: true,
            sameSite: 'strict',
            maxAge: 60 * 60 * 24 * 365 * 10, // 10 years
        })

        return { success: true }
        // redirect(303, '/')
    },
} satisfies Actions

Once you go goto, you can't go back!

Experimenting with ViewTransitions on iOS 18 and svelte5

myleftshoe — Tue, 10 Sep 2024 07:30:43 +0000

iOS 18 is due for release this month and with it comes support for the new ViewTransitions API in Safari. Here's a web app built with Svelte5 that looks and behaves remarkably similar to the big apple.

It's early days, a POC. I've only tried it on Chrome with devtools open and the device set to iphone 6, and an actual iphone 11 with iOS 18 beta 5 installed. If you try it out, let me know what you think.

Modern JS

myleftshoe — Thu, 21 Jul 2022 03:05:54 +0000

Private class properties, getters, iterators in one simple example

Ever needed to loop over a set of values continuously, i.e. return to the first value when the end is reached? You could use an array, increment the index and set it to 0 when the end is reached, or you could take the opportunity to learn some modern js features:

class Looper {
    #i // iterator
    #b // iterable e.g. array, Map, Set
    #v // value 
    constructor(iterable) {
        this.#b = iterable
        this.reset()
    }
    get value() {
        return this.#v.value
    }
    get next() {
        this.#v = this.#i.next()
        if (this.#v.done) {
            this.reset()
        }
        return this.value
    }
    reset() {
        this.#i = this.#b[Symbol.iterator]()
        this.#v = this.#i.next() 
        return this
    }
}

Example usage:

const loop = new Looper([1,2,3])
loop.value //1
loop.next //2
loop.next //3
loop.next //1
loop.next //2
loop.reset()
loop.value //1
loop.next //2
loop.reset().value //1
loop.next //2
loop.next //3

Svelte dialogs - the easy way

myleftshoe — Wed, 06 Jul 2022 12:11:27 +0000

The simplest way to create a reusable dialog component using native HTML5 dialogs in svelte!

1) Create Dialog.svelte component:

<script>
    export let dialog
</script>
<dialog bind:this={dialog} on:close>
    <slot/>
</dialog>

Here we export the ref to the native dialog which allows access to its methods by binding to dialog in the parent (below)

on:close simply forwards the native dialog's close event to the parent.

2) Use it in other component:

<script>
    import Dialog from './Dialog.svelte'
    let dialog
</script>

<button on:click={() => dialog.showModal()}>Open It!</button>

<Dialog bind:dialog on:close={() => console.log('closed')}>
    This is amazingly simple! (press esc to close)
</Dialog>

See it working in the REPL!

;)

Your own github shield server in 50 loc!

myleftshoe — Fri, 20 May 2022 13:17:07 +0000

Yes, 50 lines of code and you have your own custom shield/badge generator for your github READMEs!

And by server, I mean "serverless" - using vercel.

Prerequsites:

If you don't already have one, create a free account at vercel. Then install the Vercel CLI and log in.

npm install -g vercel
vercel login

Create a new npm project:

mkdir mybadgeserver
cd mybadgeserver
npm init

Create the API endpoint:

The square brackets are required!

mkdir -p api/[label]/[value]
cd api/[label]/[value] 
touch index.js

Paste the following code into index.js

module.exports = (req, res) => {
    const { label, value, ...options } = req.query
    const svg = makeShield(label, value, options) 
    res.setHeader('content-type', 'image/svg+xml')
    res.send(svg)
}

const defaultOptions = {
    labelColor: 'orange',
    valueColor: '#777',
    fontSize: '.8rem',
}

function makeShield(label, value, options = {}) {
    label = label ?? 'label'
    value = value ?? 'value'
    options = {...defaultOptions, ...options }
    console.log({options})
    return `<svg fill="none" viewBox="0 0 300 50" width="300" height="50" xmlns="http://www.w3.org/2000/svg">
        <style>
            shield {
                position: relative;
                margin: 5px;
                display:flex;
                color: white;
                font-size: ${options.fontSize};
                font-family: 'DejaVu Sans Mono', Verdana, DejaVu Sans, sans-serif;
            }
            label {
                background-color: ${options.labelColor};
                padding: 5px 10px;
                font-weight: 900;
                border-radius: 5px 0 0 5px;
            }
            value {
                position: relative;
                background-color: ${options.valueColor};
                padding: 5px 10px;
                border-radius: 0 5px 5px 0;
                left: 2px;
            }
        </style>
        <foreignObject width="100%" height="100%">
            <shield xmlns="http://www.w3.org/1999/xhtml">
                <label>${label}</label>
                <value>${value}</value>
            </shield>
        </foreignObject>
    </svg>`
}

And that's it! Fire-up the local dev server:

vercel dev

Test the endpoint in your browser localhost:3000/api/label/value

Change label and value in the url to whatever you like!
Change colors by appending ?labelColor=red&valueColor=green to the url.

When you want to deploy to vercel just type:

vercel

This will give you a different preview url each time you run it.

To deploy to production and get a nice "static" url type:

vercel --prod

Bonus points:

You can eliminate the need for api in the url by creating a vercel.json in the project root (not in the api folder) with the following contents:

{
    "rewrites": [
        {
            "source": "/:label/:value",
            "destination": "/api/:label/:value"
        }
    ]
}

DISCLAIMER: THIS IS GUIDE RATHER THAN A PRODUCTION READY SOLUTION - IT NEEDS TWEAKING - THE GENERATED SVGS ARE SURROUNDED BY TOO MUCH WHITE SPACE AND TEXT MAY CLIP IF TOO LONG.

[POST DELETED BY AUTHOR]

myleftshoe — Thu, 19 May 2022 07:33:52 +0000

Simple qr/barcode scanning with svelte and Html5Qrcode

myleftshoe — Thu, 05 May 2022 10:36:21 +0000

Ever wanted to scan qr and barcodes using your mobile but didn't want to write a full blown native app just to get camera access?

Use your mobile browser! Html5 now supports it.

Open the demo in your mobile browser - chrome, safari, firefox all worked for me!

Honestly, I couldn't believe how easy it was! Check out the code:

<script>
    import { Html5Qrcode } from 'html5-qrcode'
    import { onMount } from 'svelte'

    let scanning = false

    let html5Qrcode

    onMount(init)

    function init() {
        html5Qrcode = new Html5Qrcode('reader')
    }

    function start() {
        html5Qrcode.start(
            { facingMode: 'environment' },
            {
                fps: 10,
                qrbox: { width: 250, height: 250 },
            },
            onScanSuccess,
            onScanFailure
        )
        scanning = true
    }

    async function stop() {
        await html5Qrcode.stop()
        scanning = false
    }

    function onScanSuccess(decodedText, decodedResult) {
        alert(`Code matched = ${decodedText}`)
        console.log(decodedResult)
    }

    function onScanFailure(error) {
        console.warn(`Code scan error = ${error}`)
    }
</script>

<style>
    main {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 20px;
    }
    reader {
        width: 100%;
        min-height: 500px;
        background-color: black;
    }
</style>

<main>
    <reader id="reader"/>
    {#if scanning}
        <button on:click={stop}>stop</button>
    {:else}
        <button on:click={start}>start</button>
    {/if}
</main>

Special thanks to the author of the wonderful Html5Qrcode lib.

Honorable mention to quagga. No longer actively maintained, but there is an active fork quagga2.

asaf! thanks for reading🥰

[update]: the demo is not a pwa, but the scanner lib and camera access will work if you decide to make a pwa for your own project.

A curry one-liner

myleftshoe — Mon, 08 Mar 2021 07:46:16 +0000

What did the Indian restaurant manager say when a crowd gathered at the door? One at a time please.

Sorry.

The real question is what came first, the joke or the code? Let's just say they were mutually inspirational. Any excuse for a post and a bit of working stuff out.

const curry = (fn, ...args) => (args.length < fn.length) ? (...more) => curry(fn, ...args, ...more) : fn(...args)

function add(a, b, c, d, e, f)  {
    return a + b + c + d + e + f
}

console.log(add(1, 2, 3, 4, 10, 20)) // 40

const korma = curry(add)

console.log(korma(1)(2)(3)(4)(10)(20)) // 40

const vindaloo = curry(add, 10, 20)

console.log(vindaloo(1)(2)(3)(4)) // 40
console.log(vindaloo(1, 2)(3)(4)) // 40

const mixedVegetable = curry(add, 1)(2, 3, 4)

console.log(mixedVegetable(10, 20)) // 40

There's probably some edge (or even inner-suburban) cases that are missing, it's all I need at the moment though.

Evolutionary dead-ends (finding childless descendants aka leaf nodes)

myleftshoe — Wed, 03 Feb 2021 00:02:40 +0000

There goes the bloodline ☹️

In the following examples get_n_children() returns the number of children the actor has and get_children() returns the children as an array.

Method 1: Standard recursion

function get_childless_descendants(actor) {
    const leafs = []
    recurse(actor)
    return leafs
    function recurse(actor) {
        if (actor.get_n_children()) {
            actor.get_children().forEach(recurse)
            return
        }
        leafs.push(actor)
    }
}

Method 2: Functional using a recursive reducer

function get_childless_descendants_using_reduce(actor) {
    const leafs = (acc, cur) => cur.get_n_children() 
        ? cur.get_children().reduce(leafs, acc) 
        : [...acc, cur]
    return leafs([], actor)
}

Method 3: Functional using a recursive flatMap

function get_childless_descendants_using_flatMap(actor) {
    const leafs = (actor) => actor.get_n_children() 
        ? actor.get_children().flatMap(leafs) 
        : [ actor ]
    return leafs(actor)
}

TODO: What happens when the tree is large? Recursion is expensive - an iterator/generator version could be used to find the leaf nodes one at a time, on demand.

Do you have another method?

A functional application of Array.every() and Array.some()

myleftshoe — Mon, 25 Jan 2021 09:07:57 +0000

TL;DR

const and = (...fns) => (x) => fns.every(f => f(x))
const or = (...fns) => (x) => fns.some(f => f(x))

(work it out yourself if you can't be bothered reading 🙃)

You know the functional functions compose and pipe?

const pipe = (...fns) => (x) => fns.reduce((v, f) => f(v), x);
const compose = (...fns) => (x) => fns.reduceRight((v, f) => f(v), x);

Well, I was writing some code to detect if a window was tiled to the left of the screen, i.e. aligned to the left of the screen and full height.

I already had the functions isLeftAligned and isFullHeight and so wrote a new function isTiledLeft:

function isTiledLeft(window) {
    return isLeftAligned(window) && isFullHeight(window)
}

But I didn't like the repetition of window, heck what if there are more conditions to pass for the window to be considered tiled left?

In a spark of misguided insight I thought "Ah!, I can use compose"

const isTiledLeft = compose(isLeftAligned, isFullHeight)

and call it like this:

if (isTiledLeft(window)) {
    // Do something
}

Job done! Neat! Clean! Functional! Legend!

NOT! The more astute of you (and probably the downright stoners) would immediately know that this is not an application of compose!

The problem is that compose takes the output of each function and passes it to the next. isLeftAligned outputs true/false and compose then calls isFullHeight(true/false)!!! Doh! You're a legend in the same sense that Homer is a legend.

But it was so neat! I wanted to use compose 😞.

And straight after 💥 (I'm bipolar) - the signature of compose composed another idea in my head - i can use Array.every()

const and = (...fns) => (x) => fns.every(f => f(x))

const isTiledLeft = and(isLeftAligned, isFullHeight)

NICE!

And while I'm here I might as well do:

var isTiledRight = and(isRightAligned, isFullHeight)

and:

const or = (...fns) => (x) => fns.some(f => f(x))

And I did use compose after all, just not in code!

Javascript dates in milliseconds

myleftshoe — Thu, 19 Nov 2020 02:15:30 +0000

I find the js Date object somewhat cumbersome, it's often easier just to work with milliseconds and convert to the required format when presenting to the user. Here's a small lib that does just that! It's simple, flexible, and functional.

https://github.com/myleftshoe/msdate

Examples

Simple


import { now, today, days, weeks, years, toDate } from '@mls44/msdate'

now
 1592692591560

today
 1592661600000

fromDate(new Date())
 1592692591566

toDate(today)
 2020-06-20T14:00:00.000Z

toDate(today + 1 * days)
 2020-06-21T14:00:00.000Z

toDate(now + 1 * days)
 2020-06-21T22:36:31.560Z

toDate(today + 4 * weeks)
 2020-07-18T14:00:00.000Z

toDate(today + 10 * years)
 2030-06-21T02:00:00.000Z

Ranges


import { arrayOf, days, today, toDate } from '@mls44/msdate'

arrayOf(days, 7).from(today)
 [
  1592575200000,
  1592661600000,
  1592748000000,
  1592834400000,
  1592920800000,
  1593007200000,
  1593093600000
]

arrayOf(days, 7, toDate).from(today)
 [
  2020-06-19T14:00:00.000Z,
  2020-06-20T14:00:00.000Z,
  2020-06-21T14:00:00.000Z,
  2020-06-22T14:00:00.000Z,
  2020-06-23T14:00:00.000Z,
  2020-06-24T14:00:00.000Z,
  2020-06-25T14:00:00.000Z
]

arrayOf(days, 7, { weekday: 'long' }).from(today)
 [
  'Saturday',
  'Sunday',
  'Monday',
  'Tuesday',
  'Wednesday',
  'Thursday',
  'Friday'
]

// Or use between:

arrayOf(days, { weekday: 'long' }).between(today, today + days * 7)
 [
  'Saturday',
  'Sunday',
  'Monday',
  'Tuesday',
  'Wednesday',
  'Thursday',
  'Friday'
]

In the above examples, you need to import days. Alternatively you can call arrayOf like this:

arrayOf('days', 7)
arrayOf({ days: 7})

Formatting

msdate uses Intl.DateTimeFormat. Provide an options object as per the spec to format.

arrayOf also accepts the same object (or even a function like toDate) as an optional second argument (see above examples).


import { now, today, toDate, format } from '@mls44/msdate'

format(now,  toDate)
 2020-06-20T23:20:27.448Z

format(now, { weekday: 'long' })
 Sunday

Functional

toDate, fromDate, and format can be used functionally, e.g. [...].map(toDate).


import { now, today, arrayOf, days, toDate, fromDate, format } from '@mls44/msdate'

arrayOf(days, 7).from(today).map(toDate)
 [
  2020-06-20T14:00:00.000Z,
  2020-06-21T14:00:00.000Z,
  2020-06-22T14:00:00.000Z,
  2020-06-23T14:00:00.000Z,
  2020-06-24T14:00:00.000Z,
  2020-06-25T14:00:00.000Z,
  2020-06-26T14:00:00.000Z
]

arrayOf(days, 7).from(today).map(format({ weekday: 'long' }))
 [
  'Sunday',
  'Monday',
  'Tuesday',
  'Wednesday',
  'Thursday',
  'Friday',
  'Saturday'
]

[
    new Date('2020-06-19T14:00:00.000Z'),
    new Date('2020-06-20T14:00:00.000Z'),
    new Date('2020-06-21T14:00:00.000Z'),
    new Date('2020-06-22T14:00:00.000Z'),
    new Date('2020-06-23T14:00:00.000Z'),
    new Date('2020-06-24T14:00:00.000Z'),
    new Date('2020-06-25T14:00:00.000Z')
].map(fromDate)
 [
  1592575200000,
  1592661600000,
  1592748000000,
  1592834400000,
  1592920800000,
  1593007200000,
  1593093600000
]

It's a small lib that meets a specific requirement rather than a swiss army knife.

That's it, thanks for reading!