Gary Grumbley ggrumbley

The introduction to Reactive Programming you've been missing

This tutorial as a series of videos

If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.

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">

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

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

A dataset containing named CSS colors.

From MDN: CSS Colors.

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

	/* 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)); };

	<!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>

	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>()

	/* 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) {