DEV Community: François-Emmanuel CORTES

Playing with QUID string keys

François-Emmanuel CORTES — Wed, 04 Jun 2025 23:08:23 +0000

[TODO: Duck Blocks Manager article (urbex-dbm)]
Browse the code repo for project urbex-quids

These are not perfect, of course, but they are easulyscalable to many RGBA color space points !

Playing with QUID string keys

I call those QUID string keys for "Quasi-Unique IDentifiers" : these randomized string keymaps are not ~100% guaranteed (cryptographocally speaking) to be unique during runtime, but the program can use them easily and safely to identify a bunch of data items, acommodating with possible collisions between consecutive computed values of the keys.

Context

Let's have a very big collections of blocks stored data inside a JS/TS Map:

type Block = { /* user data */ }

const blocks: Map <string, Block> = new Map ()

blocks.set ('abcd', { x: 1 })
blocks.set ('ef12', { y: 2 })
blocks.set ('3456', { z: 3 })        
blocks.set ('7890', { w: 4 })        

// oops we erased some useful data !
blocks.set ('abcd', { bad: '#ERROR!' })

We want enough keys to avoid collision and data loss; both we also want to keep human-readability for keys.

UUIDs ? No, just QUIDs !

Of course you probably think to a node library UUID-like to produce keys in the form: XXXX-XXXX-4YXX-XXXX-XXXXXXXXXXX ?If so you can watch

(see tutos #random #generator #etc...)

But do you really need for your todolists, a lightweb game a such level of uniqness and unpredictility in yout keys ?

If not, just try the QUID approach !

Let's figure out N-digits hexadecimal strings, such as "900dcafe": "bada55e5" or "c0cac01a".

LENGTH  available values

2       256

4       65536 (= 256 * 256)

8       ~ 4.2 * Math.pow (10, 9)

16      ... isn't it enough ??

Computing

Since access to Map is algorithmically time-constant O(1) complexity, let's compute new keys against user map keys.

// "phantom" property...

export type QUID = string & { __quid: void }

export  const nextQUID = (exists: (qtest: QUID) => boolean): QUID => {

    let counter: number = 0

    let qtest: QUID

do {
    const str = [0, 1, 2, 3].map ((_) =&gt; {
        return Math.floor (256 * Math.random ())
            .toString (16)
            .padStart (2, '0')

    }).reduce ((acc, str) =&gt; acc += str, '')

    qtest = fromString (str)    

    if (counter &gt; 1000) {
        throw new Error ('#QUID_LOOP!')
    }

    counter++
} while (exists (qtest))

return qtest



}

Storage impacts

Performance considerations

Since Map.has is O(1) time complexity and 8-kzngth hexa-string could address 4.2 * Math.pow (10, 9), collision risks are limited, same for loops in nextQUID function.

So can be efficient.

Happy coding !

[At Run Time] Adaptative Log Function

François-Emmanuel CORTES — Sun, 03 Nov 2024 22:41:33 +0000

When debugging some buge coding project, you want sometimes to drop a console.log() calls to track some varaible and errors, to figure out what is happening during program execution, especially nearby potential tricky sections of it; something like:

function danger (a: number, b: number) {
    console.log ('### (title "h3") the dangerous function is here...')

    try {
        return a / b
    } catch (err) {
        console.log ('posssible divisoion by zero !')
        console.log ({a, b })

        throw new Error ('#DIVIDE_BY_ZERO')
    }
}

This approach gives you the ability to see the error at its location.

But the more code grows and the more logging calls occurrences grows together... and when comes And that produces time-consuming task to remove these calls (manually or not): lot of work in perpsective, and risks to waste time introducing some garbage (characters typos) and need to fix it again.

Logger class (first idea)

The idea for now is to add a Logger/Debugger class to filter console.log calls and shutdown its messages when the production phase comes.

function danger (a: number, b: number) {
    const debug = Debug.getInstance ()

    debug.level (3).title ('the dangerous function is here...')

    try {
        return a / b
    } catch (err) {
        debug.level (2).title ('posssible divisoion by zero !')
        debug.level (3).dump ({a, b })

        throw new Error ('#DIVIDE_BY_ZERO')
    }
}

Note: the singelton instance exposes a level method that returns a fluent interface, backed by some closure and bounding pattern, and wrap console.log calls:

// Debug class
protected verbosity = 0

protected log (effective: number, something) {
    if (this.verbosity < effective ) {
        // here we effectively log in the browser
        console.log (something)
    }
}

protected title (level: number, text: string) {
   const message = '#'.repat (level) + ' ' + text
   this.log (level, message)
}

protected dump (level: number,something) {
   this.log (level, something)
}

public level (wandered: number) {
    return {
        title: this.title.bind (this, this.verbosiry),
        dump: this.dump.bind (this, this.verbosiry),            
    }
}

No it's OK logginh process is filterd properly. Adapt it now ?

Adaptative ? OK for now !

Declare a setter for thos.verbosity value:

// default behaviour:  shutdown all logs (silent)
public adapt (wantered: number = 0) {
    this.verbosity = wandered
}

USE CASE: dangerous functions

Phase of self-tests of program: log enough stuff;
Phase Production: log normally and minimally (0: silently, when possible);
Increase drastrically verbosity just before throwing errors:
if error is catched properly at a higher level in call stack , adapt level to 0, to turn it off again !

    function danger (a: number, b: number) {
        const debug = Debug.getInstance ()

        debug.level (3).title ('the dangerous function is here...')

        try {
            return a / b
        } catch (err) {
            // now we have all errors log:
            debug.adapt (10)
            debug.level (2).title ('posssible divisoion by zero !')
            debug.level (3).dump ({a, b })

            throw new Error ('#DIVIDE_BY_ZERO')
        }
    }    

    function process (iterations: number) {
        const debug = Debug.getInstance ()

        for (let a = 0; a < iterations; a++) {
            for (let b = 0; b < iterations; b++) {}        
                // print all results
                // debug.level (0).dump (danger (a,b ))

                // or log anyway, print, do whatever with results...
                console.log (danger (an b))
            }
    }

    // *** caller code (main routine) ***
    const debug = Debug.getInstance ()       

    // self tests
    debug.adapt (1)
    process (1)    

    // produiuction phase: NO MPGS
    debug.adapt (0)
    process (1000 * 1000)

Doing like this, we adapt the logging mechanism to see clearly what is happening diring tests phase and after dangerous runtime error occurrence, the rest of (normal) run time we don't pollute the briwser's console anymore, neither altering performances anymore.

Happy coding !

SvelteKit responsive helper

François-Emmanuel CORTES — Mon, 15 Jul 2024 08:59:11 +0000

Tired of writing complicated media queries ? SvelteKit windiow directives can help you simplifying them programtically. With the help of this layout component ViewoirtSettingsCatcher component and its associated store ViewportSettingsStore, they are presented in this topic.

Grabbing viewport dimensions

Very simple use of svlete:window directive's bindings:

<!-- ViewportSettingsCatchr.svelte -->
<script lang="ts">
    let innerWidth: number = 1600
    let innerHeight: number = 1200
</script>

<svelte:window bind:innerWidth vind:nnerHeight />

Registering inside store

$: ViewportSettingsStore.register ({ innerWidth, innerHeight })

the associated computation store

import { writable} from 'svelte/store'
const { subscribe, update  } = writable ({
    innerWidth: 1600, 
    innerHeight: 1200,
    ratio: 16/12, 
    orientation: 'landscape',   
    wide: false
})

function register ({ innerWidth, innerHeight }) {
    const ratio = innerWidth / innerHeight
    const orientation = ratio >= 1 ? 'landscape' : 'portrait'
    const wide = (ratio > 2) || (ratio < 0.5)

    update ((state) => {
        return {
            innerWidth, 
            innerHeight,
            orientation,
            ratio,
            wide
        }
    })
}

export const ViewportSettingsStore = {
    subscribe, register 
}

simple usage

Just import ViewportSettingsStore in your componentr

<div class:wide={ $ViewportSettingsStore.orientation = === 'landscape' } />

Et voilà... That's done.

Chess colored tactical helper

François-Emmanuel CORTES — Fri, 28 Jun 2024 19:43:40 +0000

Hi there,

I'am re-building my project ColorChess.

It's about chess playing with some colored helpers to enhance tactical equilibriums between players sides on the board.

I initiated this project with JavaScript in early year 2010. I opted the magical combo SvelteKit + TypeScript for the new version in 2024.

You can see the 2010 prototype repo on my Github:

http://github.com/hefeust --> just by following "Colorchess"link.

My goal is to build a new site during this summer and if possible, implementing an original playing bot.

Regards, hefeust

SVG SvelteKit game engine project

François-Emmanuel CORTES — Mon, 25 Sep 2023 22:04:46 +0000

SVG-based isometric game engine for SvelteKit

The ECS (Entity-Component-System) part

It is designed to be intuitive to use out-of-the-box: comprehensive API with simple verbs.

Code examples: instantiate

const ecs = engine.ECS ('world-name', { /* options */ })

Component schemas

Just a plain object with a name and a test properties. Rzqr us a validation callback. Some validators like 3D poosition and velocity are predefined. T o add a new custom validation schema, just provide it to the schema function :

ecs.schema ((c) => {

    name: 'game-healh-component', 

    test: (c) => {

        // a component filtering callback,

        if (Number (c.healt) !== c.healt) return false

    uf (c.health &lt; 0) return false
    if (c.health &gt; 1000) return false

    return true
} 



})

Entites

using an init callback

ecs.entity ('layer-name-is-player', (e) => {

    // pre-defined or custom components

    e.component ('position', { x: 50, y: 50; z: 10 })

    e.component ('game-healtt-component',  health: 100 {})

})

Systems

Using the query utilituy funtion inside entity updater:

e.system ('bonus-elixir-bottle', (query) => {

    query ()

})

The main updater:

To be triggered inside SvelteKit event loop, acting as a game loop:

$: ecs.update ()

The rendering part (SVG)

Integrated with SvelteKit stores.

Problems to solve before the lib is ready

Correct integration inside SvelteKit app structure
Optimizing stores dependcy graph
Sprite Topological sorting
In-place level editing

Demo and sources

(2025-06-05: site no longer avaailabl, sorry, but still coding this project)

A tiny bash file viewer with line numbering

François-Emmanuel CORTES — Sun, 16 Apr 2023 21:06:57 +0000

SSometimes when you build and run a Javascript file in Node, some TypeErrors can pass through ESBuild checks and they're difficult to understand directly... l

To visualize a screen portion of code you can try writing this:

#!/bin/bash
max=$(( $1+10 ))
length=20
cat -n $2 | head --lines=${max} | tail --lines=${length}

save it to "see-lines.sh" and setup it in your project structure and invoke it with the error stack trace line number:

./see-lines 421 dist/index-bundled.js

Et voilà !

Easy Log Facilities for JavaScript

François-Emmanuel CORTES — Sat, 08 Oct 2022 18:39:41 +0000

Here are some log debugging facilities exposed for JS.

1. console.log (arg1, arg2, ..., argn)

console.log can take more than one argument. If it is the case, it would make logs as much as separate arguments count.

2. console.log ({ ...props })

You can either pass an object or a property bag object and it will be logged as well. Remember that if an object does not have an explicit toString() method it will output something like "[object Object]" when concatenated in a message string, and could be useless.

// example
const a = 1
const b = 2
const c = 3

// shorthand object notation
const item = { a, b, c }

// instead of:
console.log ('The item is ' + item)

// prefer: 
console.log ('the item is:', item)

// or: 
console.log ({ item })

debug flag for factory functions

You can pass to a factory function a debug flag, and log if it is true, just with logical AND!

let debug = true

const factoryFun = ({ x, y, debug }) => {
    const point = { x, y }

    point.distance = (other) => {
        const dx = Math.abs (this.x - other.x)
        const dy = Math.abs (this.y - other.y)

        debug && console.log ('computing distance between another point')

        return Math.sqrt (dx*dx + dy*dy)
    }

    debug && console.log ('factory')

    return point
}

const point = factoryFun ({ x:4, y:2, debug })

4. Adjustable verbosity level filtering

let level = 0 // no log !


const bigImplFun = ({ level }) => {
    const filter = (x) => x > 0 && x >= level

    filter (1) && console.log ('log level 1')
    filter (2) && console.log ('log level 2')
    filter (3) && console.log ('log level 3')
}

bigImplFun ({ level: 3 })

5. Indentable logging messages

Wrap it up ! If you're tired writing ampersands "&&" sequences, isolate inside a function body

const debugx = ( level, message ) => {
    const test = x > 0 && x >= level
    const indent = '\t'.repeat (level - 1)

    test && console.log (indent + message)
}

const BigImplModule = ({ level }) => {
    const nested = () => {
        debug (2, 'log level2')
    }

    const f1 = () => {
        debug (1, 'log level1')
    }
    const f2 = () => {
        debug (1, 'log level1')
        nested ()
    }

    const mod = { f1, f2 }
   return mod
}

let level = 0 // no debug !!!
let instance = bigImplModule ({ level })

instance.f1 ()
instance.f2 ()

Et voilà ! Happy coding.

smplie finite state machine for EcmaScript

François-Emmanuel CORTES — Thu, 15 Sep 2022 14:07:08 +0000

Mach: flexible FSM in ECMAScript

Hi there,

I just developped a simple Finite State Machine in JS. My initial goal was to integrate it within a SvelteKit component to provide UI state management.

Design and usage

this is a single ECMAScript file; simply import it in yout code, and call the FSM () constructor with its parameters:

    import { FSM } from './FSM.js'

    const fsm = FSM ({
        debug: true,
        jumps: ({ state }) => console.log ({ state }),
        success: ({ state }) => console.log ('success'),
        failure: ({ state }) => console.log ('failure')
    })

Then you can simply define states and transition arrows:

    fsm.state ({ name: 'INIT', init: true })
    fsm.state ({ name: 'TERM', term: true })
    fsm.state ({ name: 'OFF' })
    fsm.state ({ name: 'ON' })

    fsm.arrow ({ from: 'INIT', accept: 'activate', to: 'OFF'})
    fsm.arrow ({ from: 'OFF', accept: 'switch', to: 'ON'})
    fsm.arrow ({ from: 'ON', accept: 'switch', to: 'OFF'})
    fsm.arrow ({ from: 'ON', accept: "kick", to: 'TERM'})

Of course with this way of doing things, you can freely hydrate states and transition arrows from an external data store such a database; or modularize you FSM design according to logial tests !

After all, pack the machine to run it, and read some entries:

    fsm.pack ({ state: 'INIT '})

    fsm.accept ({ word: 'activate'})
    fsm.accept ({ word: 'on'})
    fsm.accept ({ word: 'kick'})

    // console.log ('success')

Implementation details

all entries (STATES and reanition arrows) are stored in the same array structure, as duck blocks. The items list is doubled by a lookup map which holds pairs (name) => [array-of-indexes] for all name inside the machine (UPPERCASED for STATES and lowercased for arrows). This shorts the time used to locate states/words blocks .

Further steps

adding support for asynchronous transduction operations.

    /// Here's the complete code for the Mach FSM ...


export const FSM = ({ jumping, success, failure, debug } = {}) => {

    // holds STATE and ARROW items
    const entries = [{ uid: 0, def: 'ROOT' }]

    // aliases lookups table
    const lookups = new Map ()

    const runtime = {
        GUID: 0,
        state: null,  
        trace: [],
        data: null
    }

    // state definition
    const state = ({ name, init, term, payload }) => {
        const def = 'STATE'
        const alias = ('' + name).toUpperCase ()
        const uid = ++runtime.GUID
        const uids = lookups.get(alias) || []
        const len = uids.length

        const item = {
            uid, def, alias, init, term, payload
        }

        if (len === 0) {
            entries.push (item)       
            lookups.set (alias, [uid])
        } else {
            throw new Error ('duplicate entry ' + uis + ' ' + alias)
        }

        if (debug) {
            if (len === 0) {
                console.log ('creating new state', { alias, uid })
            } else {
                console.log ('replacing item', { alias, uid })
            }
        }
    }

    // arrow definition
    const arrow = ({ from, accept, to, ops }) => {
        const def = 'ARROW'
        const alias = ('' + accept).toLowerCase ()
        const uid = ++runtime.GUID
        const uids = lookups.get(alias) || []
        const len = uids.length

        const item = {
            uid, def, alias, from, accept, to, ops 
        }

        entries.push (item)
        uids.push (uid)
        lookups.set (alias, uids)

//        console.log ('craating arrow', { item })
   }

    // ready to run !!!
    const pack = ({ state, data }) => {
        const alias = ('' + state).toUpperCase ()

        runtime.state = alias
        runtime.data = data

        if (debug) {
            console.log('Finite State Machine packing', alias) 
        }
    }

    // read entry word
    const read = ({ word, data }) => {
        const alias = ('' + word).toLowerCase ()
        const uids = lookups.get (alias) || []
        let accepted = false 

        console.log ('read', { [alias]: uids.join(', ') })

        uids.map ((uid) => entries [uid])
            .map ((item) => {
                console.log ('MAP', { item })
                return item
            })
            .filter ((item) => accepted === false)
            .filter ((item) => item.def === 'ARROW')
            .filter ((item) => item.from === runtime.state)
            .filter ((item) => item.accept === alias)
            .map ((item) => {
                const suids = lookups.get (item.to) || []
                const final = entries [suids[0]]                

                runtime.state = item.to
                runtime.trace.push (alias)
                accepted = true

                jumping && jumping.call && jumping.call (null, {
                    trace: runtime.trace,
                    result: runtime.data,
                    state: runtime.state,
                    word: alias                   
                })

                item.ops && item.ios.call && item.ops.call (null, { 
                    data, 
                    trace: runtime.trace,
                    result: runtime.data,
                    state: runtime.state,
                    word: alias                   
                })

                if (final.term) {
                    success && success.call (null, { 
                        data, 
                        trace: runtime.trace,
                        result: runtime.data,
                        state: runtime.state,
                        word: alias                   
                    })
                }

                return true
            })

        if (accepted === false) {
            failure && failure.call (null, { 
                data,                      
                trace: runtime.trace,
                result: runtime.data,
                state: runtime.state,
                word: alias                   
             })
        }
    }

    // return debug table as string
    const table = () => {
        const texts = []

        texts.push ('~~~ Finistamach: lightweight Finite State Machine ~~~')
        texts.push ('')
        texts.push ('uid\tdef\talias\t\tmore info...')
        texts.push ('--------'.repeat(5))

        entries.map ((item) => {

            if (item.def === 'STATE') {
                texts.push ([
                    item.uid, 'STATE', item.alias + '\t', 
                    (item.init ? '*init*' : '') +  (item.term ? "*term*" : "")
                ].join('\t'))
            }

            if (item.def === 'ARROW') {
                texts.push ([
                    item.uid, 'ARROW', item.alias + '\t', 
                    item.from + ' --{' + item.accept +  '}-> ' +  item.to
                ].join('\t'))            }
        })

        return texts.join('\n')
    }


    return {
        state, arrow,  pack, read, table
    }
}