ggrumbley

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

ggrumbley

Philidelphia Zoo Donate Page

Monkey => https://staging-assets.classy-test.org/4342661/ea395d94-e86c-11ed-a7b0-0a58a9feac02.png

Philly Zoo Logo => https://staging-assets.classy-test.org/4342661/a5bc1ad4-e86d-11ed-9dff-0a58a9feac02.png

{
  "theme": {
    "mobile": {

ggrumbley

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

ggrumbley

#!/usr/bin/env bash

# Exist if any command returns with non-zero exit status fail.
set -e

# Get current dir (so run this script from anywhere)
export DOTFILES_DIR
DOTFILES_DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"

echo "Update dotfiles..."

ggrumbley

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

ggrumbley

Classy Scratch Notes

Log MobX Store in Brick

console.log(block, '🧱') // eslint-disable-line no-console
console.log(campaignTemplate, '💅') // eslint-disable-line no-console

console.log(JSON.parse(JSON.stringify(block)), '🧱') // eslint-disable-line no-console
console.log(JSON.parse(JSON.stringify(campaignTemplate)), '💅') // eslint-disable-line no-console

ggrumbley

// Define a method that rounds pi to a specified decimal place
// Return Pi and how many iterations of the following formula that it took to accomplish
// pi = 4 * (1 – 1/3 + 1/5 – 1/7 + ...)

const calcPi = (scale = 2) => {
  const piTarget = Number(Math.PI).toFixed(scale);

  let piAnswer;
  let accum;

ggrumbley

ggrumbley

-- Two dashes start a one-line comment.

--[[
     Adding two ['s and ]'s makes it a
     multi-line comment.
--]]

----------------------------------------------------
-- 1. Variables and flow control.
----------------------------------------------------

ggrumbley

# Options
set __fish_git_prompt_show_informative_status
set __fish_git_prompt_showcolorhints
set __fish_git_prompt_showupstream 'informative'

# Colors
set green (set_color green)
set magenta (set_color magenta)
set normal (set_color normal)
set red (set_color red)