daformat

/**
 * ---------------------------------
 * Instantdb new db entry monitoring
 * ---------------------------------
 * Chime every time a row is added to the table body, navigate to next page
 * when available. Designed for instantdb explorer tables, with the $users
 * table specifically in mind but works for any other table
 *
 * - go to the explorer page you want to watch
 * - go to the last page available

daformat

const str = "<svg onload=alert(1)>";
const host = typeof document !== 'undefined' ? document.createElement("p") : undefined;
let converted
if (host) {
    host.textContent = str;
    converted = host.innerHTML;
} else {
    converted = str.replaceAll('<', '&lt;').replaceAll('>', '&gt;')
}
console.log(converted)

daformat

// convert camelCase to kebab-case
const kebabize = (str) =>
  str.replace(
    /[A-Z]+(?![a-z])|[A-Z]/g,
    (match, offset) => (offset ? '-' : '') + match.toLowerCase()
  );

daformat

(() => {
  // get the original svg and clone it in a hidden container
  const originalSvg = $0;
  const container = document.createElement('div');
  container.style = 'position: absolute; height: 1px; width: 1px; opacity: 0; overflow: hidden'
  originalSvg.insertAdjacentElement('afterend', container)
  const svg = $0.cloneNode(true);
  container.appendChild(svg);

  // cleanup funciton

daformat

export type BaseCountry = {
  // the ISO 3166-1 code for the country
  code: string
  // the name of the country (in english)
  name: string
  // the raw emoji for the country's flag (can be multiple codepoints)
  emoji: string
  // the international dialing code for the country (without the `+` prefix or escape codes)
  dial_country_code: string
  // the regions codes, if any

daformat

/**
 * Helper to get the flag emoji for a given country code
 * @param {string} countryCode
 * @returns {string}
 */
const getFlagEmoji = (countryCode) => {
  const codePoints = countryCode
    .toUpperCase()
    .split('')
    .map(char =>  0x1f1a5 + char.charCodeAt(0));

daformat

// -----------------------------------------------------
// This is the foundation for a typed translation helper
// with autocomplete, intellisense, and type-checking
// -----------------------------------------------------

// TS playground link:
// https://www.typescriptlang.org/play?#code/PTAEFpK6dv4fAUCUAVAFgSwM6l6AC4YCmoAZgPYCuAdgCYCGhWltFlATqI0QJ4AHEvSKdGtHABtmrdqUlDOKMAHcsxHtUKUAxpQC2AySUIkANPlqnJk3CQnmeDfkPA7SOgNZZaAc2UQiEHBIbBIAQBCjDjCoGxE2HgA2vQmjFjGIuI4KiScALoAFBiEhAI4AFwgOISMXpQAbnnkkpQqAHR6+sCMwACsABwAzAAMAwBMAOwAnMAAjEODQ3OTAJQB8RhtRJQuZO4kXqLi0iybJAp5OOGoUMcSp7J7eOIirb5YOoHgAaF-YSgAFSApCgQGgKIxe5SGTxQiCRy5ADknDIKi43j8oDUGhqnB8vjwXDiACMAFaHQh4HEYUB4gnXMHAJDwoSgADKhHxfgA8pxOdzfDzyZTQABeOlcgmgAA+oAA3qAkgAPCqSwX5NUCgl87W8kU6QigAC+N2BoPBAEFaHxQA1GLYRAJmLSqNxeB8muxKAajTzQAJOJRFCwSDgLD4dJJqPRpbQw6YnUGQ1gwxbmayyMKKYaAAougA8PIAfOLQP6SMrTAw8AAlQ5cegF+l+Cx6oX8qX6nOEYug0AAfgV-dAo6VAGlLKBPCQ+JRyOX8uABxUR2PR3KAAYAEnlk4AZOqCcbN2v11vdwBhNg6ZhoSj54gFg9H1vl32PjBFpLj-LF4snmuxpJDOc4Ljy+T9mqABE0FmiCYIQtQGROi6r6+HE

daformat

{
  // Create a html input slider to set the current html document root font-size
  // @returns the ref to the inserted DOM element
  const createRootFontSizeSlider = (min = 8, max = 18) => {
    const i = document.createElement("input")
    i.type = "range"
    i.min = `${min}`
    i.max = `${max}`
    i.step = "0.01"
    i.style = "position: fixed; bottom: 24px; right: 24px; z-index: 2147483647"

daformat

(function () {
  /*
    This code is mostly a quick and somewhat dirty demo to explore the concept of selecting DOM nodes visually
    It's far from being bulletproof and the code could definitely be cleaner.

    Copy paste it into your browser javascript console then click back inside the document or hide
    the devtools so you can use the keyboard shorctus to update selection, otherwise the keystrokes
    will be captured by the console.

    The support for text selection is still quite basic but it's included for demonstration purposes.

daformat

/*
  Thanks to Justin Fuller for his pen (https://codepen.io/Iamjfu/pen/oBYgWV)
*/ 

(() => {
  const controls =
    `<style>
      #doc-design-mode-editor-controls {
        user-select: none;
        position: fixed;