nichoth nichoth

web components

CSS

Use the ::part selector

sl-dialog::part(close-button) {
  display: none;
}

JSON + Set & Map

Serialize + deserialize sets and maps. See this blog post.

function replacer(key, value) {
  if (value instanceof Map) {
    return { __type: 'Map', value: Object.fromEntries(value) }
  }
 if (value instanceof Set) {

CSS grid

See Look Ma, No Media Queries! Responsive Layouts Using CSS Grid

.post-list {
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}

bash

tar + gzip

tar -czvf my-new-file-name.tar.gz my-existing-folder

So you want to write a sync system for a web app with offline and realtime support? Good luck. You might find the following resources useful.

Overview articles

Database in a browser, a spec (Stepan Parunashvili)

What problem are we trying to solve with a sync system?
The web of tomorrow (Nikita Prokopov)

Weird Idea

UPDATE working on this here!

so… I've had this weird idea recently...

In git (and in other secure + distributed systems) you have a tree of hashes where each object is identified by it's hash and objects contain pointers to other objects. They just have the hash of other objects stored inside them.

markdown tips

## Table of Contents

<details><summary>Click to expand</summary>

- [Background](#background)
- [Example](#example)
- [Browser Support](#browser-support)

	// see https://stackoverflow.com/questions/3221561/eliminate-flash-of-unstyled-content
	//
	// The problem with using a css style to initially hide some page
	// elements, and then using javascript to change the style back to
	// visible after page load, is that people who don't have javascript
	// enabled will never get to see those elements.
	//
	// so, use javascript to both initially hide as well as redisplay
	// those elements after page load
	//

	#!/usr/bin/node // shebang

	//
	// mkdir -p
	//
	const fs = require('node:fs/promises')

	// Creates /tmp/a/apple, regardless of whether `/tmp` and /tmp/a exist.
	await fs.mkdir('/tmp/a/apple', { recursive: true }, (err) => {
	if (err) throw err;

	/**
	* Sleeps for `ms` milliseconds.
	* @param {number} ms
	* @return {Promise}
	*/
	async function sleep (ms:number) {
	await new Promise((resolve) => {
	if (!ms) {
	process.nextTick(resolve)
	} else {