Graham Murdoch sandgraham

Git Cheat Sheet

Commands

Getting Started

git init

or

HTML Tags You Can Use on GitHub

Wherever HTML is rendered on GitHub (gists, README files in repos, comments on issues and pull requests, ...) you can use any of the HTML elements that GitHub Flavored Markdown (GFM) provides syntactic sugar for. You can either use the syntactic sugar that GFM (or other GitHub-supported markup language you're using) provides or, since Markdown can contain raw HTML, you can enter the HTML tags manually.

But GitHub also allows you to use a few HTML elements beyond what Markdown provides by entering the tags manually, and some of them are styled with CSS. Most raw HTML tags get stripped before rendering the HTML. Those tags that can be generated by GFM syntactic sugar, plus a few more, are whitelisted. These aren't documented anywhere that I can find. Here's what I've discovered so far:

`<details>` and `<summary>`

A `<detai

env vars:

SLACK_WEBHOOK_URL
CRAIGSLIST_SEARCH_URL=https://sfbay.craigslist.org/search/sfc/apa?query=glen+park&hasPic=1&postedToday=1&availabilityMode=0&sale_date=all+dates
SLACK_ICON_URL

Using React 17 and the new JSX transform with Create React App 4.0 Alpha

Create React App 4.0 is currently in alpha and supports using React 17 and the new JSX transform. To use it, follow these instructions.

Create a new app

Create a new app with npx create-react-app@next --scripts-version=@next --template=cra-template@next my-js-app

Update to React 17

Next.js client-only SPA example

Made this example to show how to use Next.js router for a 100% SPA (no JS server) app.

You use Next.js router like normally, but don't define getStaticProps and such. Instead you do client-only fetching with swr, react-query, or similar methods.

You can generate HTML fallback for the page if there's something meaningful to show before you "know" the params. (Remember, HTML is static, so it can't respond to dynamic query. But it can be different per route.)

Don't like Next? Here's how to do the same in Gatsby.

	function setFocusIfFocusable(node) {
	if (node.nodeType !== Node.ELEMENT_NODE) {
	// Text and comment nodes aren't focusable.
	return false;
	}

	if (node.disabled === true) {
	// Disabled elements can't be focused.
	return false;
	}

	const minute = 60;
	const hour = minute * 60;
	const day = hour * 24;
	const week = day * 7;
	const month = day * 30;
	const year = day * 365;

	/**
	* Convert a date to a relative time string, such as
	* "a minute ago", "in 2 hours", "yesterday", "3 months ago", etc.