DEV Community: Rémy F.

JSON Schema to
in 18 Lines of vanilla JS

Rémy F. — Sun, 23 Mar 2025 00:29:34 +0000

Using https://dev.to/yne/a-one-liner-for-createelement-with-attributes-and-children-55nh
The following snippet convert any JSON Schema to DOM elements.

const el = (tag, props = {}, ch = [], attrs = {}) => ch.reduce((e, c) => (e.appendChild(c), e), Object.entries(attrs).reduce((e, [k, v]) => (e.setAttribute(k, v), e), Object.assign(document.createElement(tag), Object.fromEntries(Object.entries(props).filter(([key, value]) => value !== undefined)))));

function schema2dom(item, name = "", parent = {}) {
    let ul, total; // this total <input> track if we stay in minItems/maxItems
    if (item.type == "array") return [ul = el("ul", {}, [el("li", {}, [el("button", {
        type: "button", innerText: "Add", onclick: () => ul.insertAdjacentElement("beforeend", el("li", { ariaRowIndex: total.ariaRowIndex = ++total.value }, [
            el("button", { type: "button", innerText: "Remove", onclick() { total.ariaRowIndex = --total.value; this.parentElement.remove() } }),
            ...schema2dom(item.items, name, parent.required?.includes(name))
        ]))
    }), total = el("input", { type: "number", ariaRowIndex: 0, value: 0, min: item.minItems, max: item.maxItems, oninput() { this.value = this.ariaRowIndex } })])])];
    if (item.type == "object") return [el("dl", {  }, Object.entries(item.properties).map(([name, v]) => [
        el("dt", { innerText: v.title || name, title: v.description || '' }),
        el("dd", {}, schema2dom(v, name, item)),// "additionalProperties", propertyNames+pattern, minProperties maxProperties
    ]).flat())];
    const common = { name, title:item.description||parent.description, required: parent.required?.includes(name), minLength: item.minLength, maxLength: item.maxLength, pattern: item.pattern, min: item.minimum, max: item.maximum };
    if (item.enum) return [el("select", common, item.enum.map((v,i) => el("option", { innerText: v === Object(v) ? JSON.stringify(v) : v, value: JSON.stringify(v), title:(item.markdownEnumDescriptions||item.enumDescriptions||[])[i]})))];
    const datalist = [el("datalist", { id: `list_${Math.random()}` }, item.examples?.map(ex => el("option", { innerText: ex, title: JSON.stringify(ex) })))];
    if (item.type == "boolean") return [el("input", { type: "checkbox", checked: item.default, ...common }), ...datalist];
    if (item.type == "integer") return [el("input", { type: "number", value: item.default, step: item.multipleOf || 1, ...common }), ...datalist];
    if (item.type == "number") return [el("input", { type: "number", value: item.default, step: item.multipleOf, ...common }), ...datalist];
    if (item.type == "string") return [el("input", { type: "text", value: item.default, ...common }, [], { list: datalist?.[0].id }), ...datalist];
    return []; // item.type == "null"
}

For example:

schema2dom({type:"object",properties:{n:{type:"number"},s:{type:"string"}}})

Will return 2 fields: a <input type=number> plus a <input type=text>

Limitation

examples can't be array or object they will be toString() and put as value of
Object are non-extensible (see additionalProperties and associated propertyNames,pattern,minProperties,maxProperties.

Serialization

Simple Schema generated

can be serialized using DataForm():

const obj = Object.fromEntries((new FormData(myForm)).entries())

However, nested list/objects require a specific serialization:

function serialise(el) {
    if (el.tagName == 'DL') return Object.fromEntries([...el.children].reduce((acc, _, i, ch) => i % 2 ? acc : [...acc, [ch[i].innerText, serialise(ch[i + 1].children[0])]], []))
    if (el.tagName == 'UL') return [...el.children].slice(1).map(li => serialise(li.children[1]))
    if (el.tagName == 'SELECT') return JSON.parse(el.value);
    if (el.type == 'checkbox') return el.checked;
    if (el.type == 'number') return el.valueAsNumber;
    if (el.type == 'text') return el.value;
    return null;
}

Style

No style are required, but a grid display could help.

dl,ul>li {
    display: grid;
    grid-template-columns: 1fr 5fr;
}
dd { display: contents; }
dl, ul {
    padding: 0;
    margin: 0;
}

QuickJS: Handle Typescript Sourcemap

Rémy F. — Sat, 10 Aug 2024 10:35:15 +0000

I'm currently using Bellard's QuickJS engine on a new TypeScript project.

Since QuickJS only support JS, we need to transpile our TS first (qjs --std typescript.js path/to/your/project)

We can debug quickjs execution but stacktraces are relativ to JS so we need to parse our sourcemap files to get the TS line back. Those sourcemap use VLQ encoding, so let's make a VLQ parser:

const VLQ_BASE = 5;
const VLQ_CONT = 1 << VLQ_BASE;  // 100000
const VLQ_MASK = VLQ_CONT - 1;   // 011111
const b64 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
function vlq(segment) {
    const fields = [];
    for (let segIdx = 0; segIdx < segment.length;) {
        let result = 0;
        for (let shift = 0; ; shift += VLQ_BASE) {
            const digit = b64.indexOf(segment.charAt(segIdx++));
            result += ((digit & VLQ_MASK) << shift);
            if (!(digit & VLQ_CONT)) break;
        };
        fields.push(result & 1 ? -(result >> 1) : result >> 1)
    }
    return fields; // col,srcIdx,lineSrc,colSrc,nameIdx
};

this allows us to lookup the original TS line of a given JsLine using a myMap file

// JsLine = 42
// myMap = await fetch("my.map").then(r=>r.json())
const fields = myMap.mappings.split(';').map(g=>g.split(',').map(vlq));
let sum = 0;
const tsLine = fields.map(f => sum += f[0][2])[JsLine];

enjoy !

Async Promise-based FileReader one-liner

Rémy F. — Sun, 05 Feb 2023 17:38:16 +0000

The Line

const cat = (f) =>
  new Promise(resolve => Object.assign(new FileReader(), {onload(){resolve(this.result)}}).readAsText(f));

Usage

<input type="file" onchange="cat(files[0]).then(console.log)">

How I sandboxed 10 students in my bathroom using Docker

Rémy F. — Wed, 27 Oct 2021 20:30:29 +0000

I recently had to give an introduction course to UNIX shell and we all know that the best way to learn is to practice.
Obviously, we all work from home so no university infrastructure available, and every student were on Windows10 without WSL installed.
Hopefully I had an unused SBC that a plugged into my bathroom hair dryer socket, wifi-configured, port-forwarded, and made my students connect to it using putty (you can see the beast on this article banner).

How to sandbox your student

Build the sandbox

We will use an ubuntu image packed with some extra binaries.

FROM ubuntu:latest
RUN apt update && apt install -y curl tree jq
WORKDIR /root
ENTRYPOINT ["/bin/bash"]

Build this Dockerfile into an univ/sandbox image:

docker build -t univ/sandbox .

Start the sandbox

As soon as the students arrive we shall start a temporary sandbox for them. To do so, we create this /usr/bin/sandbox wrapper:

#!/usr/bin/sh
[ $# -eq 0 ] && mode=it || mode=i; # no argument = open a TTY
/usr/bin/docker run -$mode -v /home/$USER:/root --rm univ/sandbox:latest "$@"

This will also mount the incoming /home/$USER directory into the container /root/ directory. This way, they personal files are safe and I can grade every homework they have.

Create students accounts (spoiler: it's boring)

I had to spawn a bunch of adduser --shell /usr/bin/sandbox commands in my tmux, and student connected to my account to put their password.
Because once created they won't be able to change it, as passwd would have changed they volatile sandbox password, not they real account one.

Conclusion

Pros:

both ssh bob@sbc, ssh bob@sbc env and scp file bob@sbc: works
root: every student can either apt install openarena or rm -rf /*
reproducibility: just reconnect to get a fresh container back
persistence: personal files are kept across sessions

Cons:

barebone: the ubuntu image may not come with the usual distro binaries like ping, ssh ... so be prepared to rebuild your sandbox image.
/root/: every sandboxed student will find they /home/ in /root/ which might be misleading for newcomers
security: Docker is not isolation-proof, so if any student use a 0 day to escape the sandbox, they will own my SBC (in which case I'll gladly offer them as a reward)
ssh-copy-id won't work for because of permission mismatch between the root writing, and the user reading.

[NO JS] Checkable table row with highlighting

Rémy F. — Thu, 21 Jan 2021 11:10:41 +0000

Tips: This approach works for both checkbox and radio table !

Let's start with the classic :

One selectable line table (radio based):

<table>
    <thead>
        <th></th>
        <th>mono-selection</th>
    </thead>
    <tbody>
        <tr>
            <td><input type=radio name=radio value=radio1 required></td>
            <td>radio1</td>
        </tr>
        <tr>
            <td><input type=radio name=radio value=radio2 required></td>
            <td>radio2</td>
        </tr>
        <tr>
            <td><input type=radio name=radio value=radio3 required></td>
            <td>radio3</td>
        </tr>
    </tbody>
</table>

Using the following CSS rules we can highlight the selected row when it input is checked:

tr {
    /* https://github.com/w3c/csswg-drafts/issues/1899 */
    transform: scale(1);
    position: relative;
}

/* The highlight magic is here (webkit only) */
:checked::before {
    content: ' ';
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: yellow;
    opacity: .5;
    z-index: -1;
}

/* Moz hack to enable :before on radio
[type=radio]{appearance: none;}
[type=radio]:not(:checked)::before{content: '⚪';}
[type=radio]:checked::before{content: '🔘';padding: 3px 5px;}
*/

Trick: If the <table> belongs to a <form>, you can automatically hide/show it actions buttons when a line is selected (but be sure to mark it radio required !).

<style>
:invalid .if-valid{
    display: none;
}
</style>
<form>
    <table>...</table>
    <footer class=if-valid>
        <button>You got me !</button>
    </footer>
</form>

The highlighting CSS rules also work with checkboxes. But since checkbox are optionals you can forget about the funny hide-show trick.

Multi selection table (checkbox based):

<table>
    <thead>
        <th><input type=checkbox
                onclick="[...closest('table').querySelectorAll('tbody [type=checkbox]')].forEach(box=>box.checked=checked)">
        </th>
        <th>title</th>
    </thead>
    <tbody>
        <tr>
            <td><input type=checkbox name=chk value=chk1></td>
            <td>chk1</td>
        </tr>
        <tr>
            <td><input type=checkbox name=chk value=chk2></td>
            <td>chk2</td>
        </tr>
        <tr>
            <td><input type=checkbox name=chk value=chk3></td>
            <td>chk3</td>
        </tr>
    </tbody>
</table>

Full Demo:

Tips: it includes a form submit alert, so you can see selected values that would have been submitted to the form action endpoint

Postgress SELECT/INSERT in Python without any external libs

Rémy F. — Sun, 13 Sep 2020 14:01:40 +0000

It is possible to query Postgress (9.3+) from python without any external libs (psycopg2):

import subprocess
import json

query = "SELECT json_agg(table) FROM table"
args = ["psql", "db_name" ,"db_user" ,"-AStc", query]
out = subprocess.check_output(args, universal_newlines=True)
results = json.loads(out)
print(results)

It is also possible to INSERT with

data = {
  "question": "when does the ride end ?",
  "answer": "never",
  "category": 1
}

cols = ','.join(''.join(filter(str.isalpha, k)) for k in data.keys())
query = "INSERT INTO tb_faq(%s) SELECT %s FROM json_populate_record(NULL::tb_faq, '%s');"
args = ["psql", "db_name" ,"db_user" ,"-AStc", query%(cols,cols,json.dumps(data))]
subprocess.check_output(args, universal_newlines=True)

A createElement one-liner (with attributes and children)

Rémy F. — Sun, 31 May 2020 23:57:35 +0000

The one-liner

el = (tag, props={}, ch=[]) => ch.reduce((e,c) => (e.appendChild(c),e),Object.assign(document.createElement(tag),props))

Usage

el('ul',{classList:['list']},[
  el('li',{innerText:'first'}),
  el('li',{innerText:'second'}),
])

Bonus: `attributes` support

for when properties does not exist 'data-example'

el = (tag, props = {}, ch = [], attrs = {}) => ch.reduce((e, c) => (e.appendChild(c), e), Object.entries(attrs).reduce((e, [k, v]) => (e.setAttribute(k, v), e), Object.assign(document.createElement(tag), props)));

Usage (with attributes)

el('ul',{classList:['list']},[
  el('li',{innerText:'first'}),
  el('li',{innerText:'second'}),
], {'data-example':42}) // ul extra attributes

Bonus: Typing

This JSTyped version allow better warning/autocomplete and accept helpers params that createElement does not (on_, classList_, dataset ...)

/**
 * @template {keyof HTMLElementTagNameMap} T
 * @param {T} tagName
 * @param {Partial<HTMLElementTagNameMap[T]> & {
 *   on_?:{ [K in keyof HTMLElementEventMap]?: (this: HTMLElementTagNameMap[T], ev: HTMLElementEventMap[K]) => any },
 *   classList_?:string[],
 *   dataset_?:Record<string,string|undefined>,
 *   style_?:Partial<CSSStyleDeclaration>,
 *   attributes_?:Record<string,string>
 * }} props
 * @param {(Node|string)[]} children
 * @returns {HTMLElementTagNameMap[T]}
 */
export function el(tagName, { on_ = {}, classList_ = [], dataset_, style_ = {}, attributes_, ...props } = {}, children = []) {
    const e = Object.assign(document.createElement(tagName), props);
    e.append(...children);
    for (const [o, ev] of Object.entries(on_)) e.addEventListener(o, /** @type {EventListener} */(ev)); // TODO: event are not correct
    for (const d in dataset_) e.dataset[d] = dataset_[d];
    for (const c of classList_) e.classList.add(c);
    for (const a in attributes_) e.setAttribute(a, attributes_[a]);
    for (const s in style_) if (style_[s]) e.style[s] = style_[s];
    return e;
}

Usage (typing)

el("input", { style_: { border: 'none' }, on_: { input() { alert(this.value) } } })

Painless PWA

Rémy F. — Sun, 17 May 2020 05:41:36 +0000

Disclaimer: PWA is still evolving, this article may soon become obsolete

An install-ready PWA is made of :

an HTML page, with some specific <meta> and <link> tags
a Service Worker script (sw.js), that will cache your assets for offline use.
some icons for desktop and splash screen
a manifest.json, that will describe your PWA to the installer.

Minimal manifest.json example

{
  "name": "Name",
  "short_name": "Short",
  "theme_color": "#1d3557",
  "background_color": "#ededed",
  "display": "standalone",
  "start_url": "./",
  "icons": [
    {
      "src": "192x192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "512x512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ]
}

The main downside of the manifest.json is that it simply repeat what you've already set in your index.html (icons, name, theme_color ...).

A simpler solution is to automatically generate it from those tags while registering your serviceWorker :

index.html

<!doctype html>
<html lang=en>
<meta charset="UTF-8">
<title>title</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="theme-color" content="#317EFB"/>
<meta name="short-name" content="short"/>
<meta name="background-color" content="#FFFFFF"/>
<meta name="display" content="standalone"/>
<meta name="description" content="description"/>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<link rel="apple-touch-icon" href="192x192.png">
<link rel="splash-icon" href="512x512.png">
<link rel="worker" href="sw.js">
<script type=module defer>
const qsa=s=>[...document.querySelectorAll(s)];
const i=(s,x)=>({src:qsa(`[rel=${s}-icon]`)[0].href,type:"image/png",sizes:`${x}x${x}`});
//TODO: submit this code to iojscc
navigator.serviceWorker&&navigator.serviceWorker.register(qsa('[rel=worker]')[0].href)
.then(sw=>document.head.appendChild(Object.assign(document.createElement("link"),
{rel:"manifest",href:'data:,'+JSON.stringify(qsa('meta[name]').reduce((a,m)=>
(a[m.name.replace(/-/g,'_')]=encodeURIComponent(m.content),a),{start_url:sw.scope,
name:qsa('title')[0].innerText,icons:[i('apple-touch',192),i('splash',512)]}))})));
</script>

<h1>I'm PWA</h1>

sw.js

const cacheList = ["./"]; // add more if needed
const cacheName = "app-42";
self.addEventListener('install', e => e.waitUntil(caches.open(cacheName).then(cache => cache.addAll(cacheList).then(() => self.skipWaiting()))));
self.addEventListener('activate', e => e.waitUntil(self.clients.claim()));
self.addEventListener('fetch', e => e.respondWith(caches.open(cacheName).then(cache => cache.match(e.request, {ignoreSearch: true})).then(response => (e.request.cache !== 'only-if-cached' || e.request.mode === 'same-origin') ? (response || fetch(e.request)) : response)));

You shall get a perfect audit score (if your server support HTTP/2)

inputs type=switch

Rémy F. — Fri, 15 May 2020 19:14:48 +0000

If you are looking for a Javascript+Jquery+JqueryUI+Grunt way to create a switch: https://naeka.github.io/jquery-switchbutton/

If you're not : you're in the right place.

What's the trick doc ?

We're simply going to disable the <input> appearance, then use a radial-background to display a white toggle on green-or-grey background.

Can I haz animation ?

I don't know, can you animate a radial background ?

(no)

📈 Fetch and use French COVID-19 dataset

Rémy F. — Thu, 16 Apr 2020 16:29:08 +0000

The French government has published an opensource GIS website to keep an eye on the current epidemic growth.

They also publish the raw dataset but it's a mess to deal with, so let's just scrap the hell of the homepage.

BASE=https://dashboard.covid19.data.gouv.fr
FILE=$(curl -s $BASE | grep -Po '/_next/static/[^/]+?/pages/index.js' | head -n1)
JSON=$(curl -s $BASE/$FILE | grep -Po "JSON.parse\('\[.*?\]" | cut -c13- | sed 's/\\.//g')

You can now plot your 1-month worth of data using your favorite language or spreadsheet.

Paris data as CSV using jq:

echo "$JSON" | jq -r '.[] | select(.nom=="Paris") | [.date,.deces,.reanimation,.hospitalises,.gueris] |@csv'

Or if your a pipe junky, this bad boy will show you a New/Total logarithmic representation as shown in this video :

echo "$JSON" | node -e "
JSON.parse(require('fs').readFileSync('/dev/stdin').toString())
.filter(d=>d.nom=='France')
.map((d,i,a)=>({...d,sum:a.slice(0,i).reduce((a,c)=>a+(c.hospitalises||0),0)}))
.map((d,i,a)=>[d.sum,d.hospitalises-(a[i-1]||{}).hospitalises||0])
.forEach(l=>console.log(l.join(' ')))
" | graph -T png -lx -ly -X 'Total cases' -Y 'New cases variation' | display

Here is the ouput for the whole country

Here is the ouput for the Paris region

Floating Label over input

Rémy F. — Mon, 13 Apr 2020 19:54:37 +0000

Thanks to the material guidelines, we all want a floating label on top of our <input>.
A solution is to use, next to the input, a text element that will be the pulled-up label.

<label>
  <input>
  <span>Label</span>
</label>

This <span> shall be raised when the <input> is :focus or when it holds a value, sadly there is no pseudo-class for that.
Possible hacks involves :

adding a [required] so the input is :invalid state when empty => bad : it prevent any form submit
adding a [placeholder] so the input has a :placeholder-shown state => require an empty placeholder

the default state must be usable.

In case of bad CSS support, we don't want our input to be covered by the span, so we revert the logic in order to pull-down the span in the following case :

The span shall cover the input if the input has an blank placeholder and is neither focus nor filled.

Which give us the following rules:

label>input[placeholder=" "]:not(:focus):placeholder-shown + span {
  transform: translateY(1em) scale(1.25);
}

You will now have a working state (label already pushed up) if :

the :placeholder-shown is unsupported.
the placeholder is not a space
the value is already set by attribute

DEV Community: Rémy F.

JSON Schema to in 18 Lines of vanilla JS

Limitation

Serialization

Style

QuickJS: Handle Typescript Sourcemap

Async Promise-based FileReader one-liner

The Line

Usage

How I sandboxed 10 students in my bathroom using Docker

How to sandbox your student

Build the sandbox

Start the sandbox

Create students accounts (spoiler: it's boring)

Conclusion

Pros:

Cons:

[NO JS] Checkable table row with highlighting

One selectable line table (radio based):

Multi selection table (checkbox based):

Full Demo:

Postgress SELECT/INSERT in Python without any external libs

A createElement one-liner (with attributes and children)

The one-liner

Usage

Bonus: attributes support

Usage (with attributes)

Bonus: Typing

Usage (typing)

Painless PWA

Minimal manifest.json example

index.html

sw.js

inputs type=switch

What's the trick doc ?

Can I haz animation ?

📈 Fetch and use French COVID-19 dataset

Floating Label over input

JSON Schema to
in 18 Lines of vanilla JS

Bonus: `attributes` support