Gary Grumbley ggrumbley

## introrx.md

      
              7 files
            
          
              2514 forks
            
          
              472 comments
            
          
              21946 stars
            
          
                staltz
                / introrx.md
            
            
              Last active
              July 22, 2024 09:31
            
              
                The introduction to Reactive Programming you've been missing
              
          
    The introduction to Reactive Programming you've been missing

(by @andrestaltz)

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.


## bling.js
/* bling.js */

window.$ = document.querySelectorAll.bind(document);

Node.prototype.on = window.on = function (name, fn) {
  this.addEventListener(name, fn);
};

NodeList.prototype.__proto__ = Array.prototype;

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

## _sanfrancisco-font.md

      
              2 files
            
          
              5 forks
            
          
              0 comments
            
          
              20 stars
            
          
                mfd
                / _sanfrancisco-font.md
            
            
              Last active
              May 4, 2024 22:33
            
              
                San Francisco Web Font
              
          
    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">


## README.md

      
              2 files
            
          
              0 forks
            
          
              0 comments
            
          
              15 stars
            
          
                avimar
                / README.md
            
            
              Last active
              July 1, 2017 14:13
            
              
                Node.js/Javascript Stack
              
          
    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


## 55-bytes-of-css.md

      
              1 file
            
          
              114 forks
            
          
              32 comments
            
          
              2135 stars
            
          
                JoeyBurzynski
                / 55-bytes-of-css.md
            
            
              Last active
              July 20, 2024 05:29
            
              
                58 bytes of css to look great nearly everywhere
              
          
    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;
}

  
## frame.tsx
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>()

## README.md

      
              2 files
            
          
              9 forks
            
          
              0 comments
            
          
              4 stars
            
          
                curran
                / README.md
            
            
              Last active
              April 19, 2024 03:27
            
              
                CSS Named Colors
              
          
    A dataset containing named CSS colors.
From MDN: CSS Colors.

  
## regex_html_tag.md

      
              1 file
            
          
              2 forks
            
          
              3 comments
            
          
              11 stars
            
          
                gavin-asay
                / regex_html_tag.md
            
            
              Last active
              July 4, 2024 11:22
            
              
                Regex and You: Matching an HTML Tag
              
          
    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


## javascript-proxy-as-rest-client.js
/* 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) {
	/* bling.js */

	window.$ = document.querySelectorAll.bind(document);

	Node.prototype.on = window.on = function (name, fn) {
	this.addEventListener(name, fn);
	};

	NodeList.prototype.__proto__ = Array.prototype;
	<!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) {