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

rename

Change the file extension for all .js files in dir

for file in ./dir/*.js; do mv ${file} ${file/.js/.ts}; done

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)

	async function forceSync(account: Account) {
	const { syncManager } = account._raw.core.node;

	const peer = Object.values(syncManager.peers)[0];
	if (!peer) {
	throw new Error("no peer");
	}

	const values = Object.values(account._raw.core.node.coValues).flatMap((x) => {
	if ("coValue" in x.state) {

	/**
	* Returns PBKDF2 derived key from supplied password.
	*
	* Stored key can subsequently be used to verify that a password matches the original password used
	* to derive the key, using pbkdf2Verify().
	*
	* @param {String} password - Password to be hashed using key derivation function.
	* @param {Number} [iterations=1e6] - Number of iterations of HMAC function to apply.
	* @returns {String} Derived key as base64 string.
	*

	//
	// I always like an opportunity to use `Set` in JS.
	// There should be `difference` and `intersection` operators
	// in new environments, but my Node didn't have them,
	// so we're doing it slightly more laboriously.
	// (`node -v` = 20.16.0)
	//

	const recipe = ['eggs', 'flour', 'sugar', 'butter']
	const pantry = ['sugar', 'butter', 'milk']

	// 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;