Gary Grumbley ggrumbley

The experience of using Node.JS with TypeScript, ts-node, and ESM is horrible.

There are countless guides of how to integrate them, but none of them seem to work.

Here's what worked for me.

Just add the following files and run npm run dev. You'll be good to go!

`package.json`

Regex and You: Matching an HTML Tag

Regular expressions, ever versatile, will help up locate HTML tags in a string today.

Summary

Pattern matching HTML strings serves at least one crucial function in web dev: sanitizing user input. Allowing user-submitted strings opens one's application to significant vulnerability. Supposing, for example, some ne'er-do-well on the internet submitted a comment that includes <script src="[path]/stealYourData.js"></script>. Regular expressions allow us to match HTML tags in a string, because HTML tags conform to a certain pattern:

begin and end with brackets (<>)
contain a string name consisting of one or more lowercase letters, like p, a, div, strong, script

A dataset containing named CSS colors.

From MDN: CSS Colors.

58 bytes of CSS to look great nearly everywhere

When making this website, i wanted a simple, reasonable way to make it look good on most displays. Not counting any minimization techniques, the following 58 bytes worked well for me:

main {
  max-width: 38rem;
  padding: 2rem;
  margin: auto;
}

Programming Environment:

Microsoft Visual Studio Code: build in git-support, auto-complete, TypeScript paramater lookup.
Bitbucket for GIT: free private repo

node.js backend:

nconf: loadable, pluggable configuration
restify: instead of express, it's oriented for APIs
bunyan: for logging, built in support from restify
knex.js: SQL query builder/promises/pooling (but it's not an ORM)
PM2: deploy and clustering

Web fonts

Custom webfonts

https://gist.githubusercontent.com/mfd/614e2e80a22b878bde63cb471cbe677e/raw/4996edf5eb9aea434e0cbdc81923fb110a29d060/sanfrancisco-font.css

<link rel="stylesheet prefetch" href="https://gist.githubusercontent.com/mfd/614e2e80a22b878bde63cb471cbe677e/raw/eef2aabfd0d588d43285431186a0cf70305ceb80/sanfrancisco-font.css">

	/* Using a JavaScript proxy for a super low code REST client */
	// via https://dev.to/dipsaus9/javascript-lets-create-aproxy-19hg
	// also see https://towardsdatascience.com/why-to-use-javascript-proxy-5cdc69d943e3
	// also see https://github.com/fastify/manifetch
	// also see https://github.com/flash-oss/allserver
	// and https://gist.github.com/v1vendi/75d5e5dad7a2d1ef3fcb48234e4528cb

	const createApi = (url) => {
	return new Proxy({}, {
	get(target, key) {

	import * as React from 'react'
	import { createPortal } from 'react-dom'

	type FrameProps = React.IframeHTMLAttributes<HTMLIFrameElement> & {
	head?: React.ComponentType<any>
	children?: React.ReactNode
	}
	const Frame = React.memo(({head, children, ...iframeProps}: FrameProps)=> {
	const node = React.useRef<HTMLIFrameElement>()
	const [doc, setDoc] = React.useState<Document>()

	<!DOCTYPE html>
	<html>
	<head>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.0.6/rx.all.js"></script>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	</head>
	<body>
	<div id="app"></div>

	/* bling.js */
	window.$ = document.querySelector.bind(document);
	window.$$ = document.querySelectorAll.bind(document);
	Node.prototype.on = window.on = function(name, fn) { this.addEventListener(name, fn); };
	NodeList.prototype.__proto__ = Array.prototype;
	NodeList.prototype.on = function(name, fn) { this.forEach((elem) => elem.on(name, fn)); };