Callum Locke callumlocke

General notes

The iframe sandbox attribute has been fully supported by all major browsers since 2014 (caniuse)

How to run user-submitted code

Best practice for running user-submitted code in iframes (a la CodeSandbox, ObservableHQ, etc.) is:

Use the sandbox attribute
Use the allow-* values to whitelist things that are needed & safe.
Run the iframed content in a unique subdomain per user account (or narrower). ObservableHQ does this.

Assuming you've got a Next.js app that's already using TypeScript to render pages/components or handle API routes, but you also want to be able to run ad hoc build tasks written in TypeScript (perhaps pulling in type files used by the app)...

Add these deps: npm install -D @babel/core @babel/node
Make sure your Next app has an explicit .babelrc file:

// Default Next.js .babelrc (it's OK if you also have extra stuff in it)
{
  "presets": ["next/babel"],
 "plugins": []

import chunk from 'lodash-es/array/chunk';
import zipObject from 'lodash-es/array/zipObject';

console.log(zipObject(chunk(['a', 'b', 'c', 'd'], 2)));

$ rollup -f=iife demo.js > output.js

import {chunk, zipObject} from 'lodash-es/array';

console.log(zipObject(chunk(['a', 'b', 'c', 'd'], 2)));

$ rollup -f=iife demo.js > output.js

	/* Shadow 0dp */
	box-shadow: none;

	/* Shadow 1dp */
	box-shadow: 0 1px 1px 0 rgba(0,0,0,0.14), 0 2px 1px -1px rgba(0,0,0,0.12), 0 1px 3px 0 rgba(0,0,0,0.20);

	/* Shadow 2dp */
	box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.20);

	/* Shadow 3dp */


	// Available variables:
	// - Machine
	// - interpret
	// - assign
	// - send
	// - sendParent
	// - spawn
	// - raise
	// - actions


	// Available variables:
	// - Machine
	// - interpret
	// - assign
	// - send
	// - sendParent
	// - spawn
	// - raise
	// - actions

	####
	# ZSH function to auto-switch to correct Node version
	# https://gist.github.com/callumlocke/30990e247e52ab6ac1aa98e5f0e5bbf5
	#
	# - Searches up your directory tree for the closest .nvmrc, just like `nvm use` does.
	#
	# - If you are already on the right Node version, IT DOES NOTHING, AND PRINTS NOTHING.
	#
	# - Works correctly if your .nvmrc file contains something relaxed/generic,
	# like "4" or "v12.0" or "stable".

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Hello World!</title>
	</head>
	<body>
	<h1>Hello World!</h1>
	<!-- All of the Node.js APIs are available in this renderer process. -->
	We are using Node.js <script>document.write(process.versions.node)</script>,

	const postcodeRegex = /^[a-z]{1,2}\d[a-z\d]?\s*\d[a-z]{2}$/i;
	const incodeRegex = /\d[a-z]{2}$/i;

	const isValidPostcode = (p) => postcodeRegex.test(p.replace(/\s/g, ''));

	const normalisePostcode = (p) => {
	if (!isValidPostcode(p)) throw new Error('Invalid postcode');

	const spaceless = p.replace(/\s/g, '');