roger yee ryee-dev

Cheat sheet: JavaScript Array methods

Deriving a new Array from an existing Array:

['■','●','▲'].slice(1, 3)          ⟼ ['●','▲']
['■','●','■'].filter(x => x==='■') ⟼ ['■','■']
    ['▲','●'].map(x => x+x)        ⟼ ['▲▲','●●']
    ['▲','●'].flatMap(x => [x,x])  ⟼ ['▲','▲','●','●']

How Nix works

Nix is a purely functional package manager

/nix folder in my dotfiles repo

this is how I utilize nix to have better management of initial setup in terms of both logically and performantely better

How I package Docker image using Nix

My first attempt to package with Nix for a Docker image with Dockerfile

From Homebrew to Home Manager

CSS-in-JS

This repo uses a CSS-in-JS library called Emotion for its styling.

Why Emotion?

Emotion is a performant and flexible CSS-in-JS library. Building on many other CSS-in-JS libraries, it allows us to style apps quickly with string or object styles. It has predictable composition to avoid specificity issues in CSS. With source maps and labels, Emotion has a great developer experience and performance with heavy caching in production.

Also, Material UI v5 will most likely use Emotion instead of JSS:
material-ui - [RFC] v5 styling solution

Keybindings

j, s scroll down scrollDown
k, w scroll up scrollUp
h scroll left scrollLeft
l scroll right scrollRight
d scroll half-page down scrollPageDown

  scroll full-page down	scrollFullPageDown

u, e scroll half-page up scrollPageUp
scroll full-page up scrollFullPageUp

Mac web developer apps

This gist's comment stream is a collection of webdev apps for OS X. Feel free to add links to apps you like, just make sure you add some context to what it does — either from the creator's website or your own thoughts.

— Erik

	###
	### [2023-06-19] UPDATE: Just tried to use my instructions again on a fresh install and it failed in a number of places.
	###. Not sure if I'll update this gist (though I realise it seems to still have some traffic), but here's a list of
	###. things to watch out for:
	### - Check out the `nix-darwin` instructions, as they have changed.
	### - There's a home manager gotcha https://github.com/nix-community/home-manager/issues/4026
	###

	# I found some good resources but they seem to do a bit too much (maybe from a time when there were more bugs).
	# So here's a minimal Gist which worked for me as an install on a new M1 Pro.

	function CopyButton({ value }) {
	let [copied, setCopied] = React.useState();
	let hydrated = usePageIsHydrated();
	React.useEffect(() => {
	let id = setTimeout(() => setCopied(false), 2000);
	return () => clearTimeout(id);
	}, [copied]);

	return (
	<button

	import React from "react";
	import {
	useRouter,
	Link
	} from "@reach/router/unstable-hooks";

	function Accounts() {
	let route = useRouter({
	".": () => <div>boring Accounts</div>,
	dope: () => <div>Dope Accounts</div>

	@font-face {
	font-family: GT Walsheim Pro;
	src: local("GT Walsheim Pro Regular"),local("GTWalsheimProRegular"),url(GTWalsheimProRegular.woff2) format("woff2"),url(GTWalsheimProRegular.woff) format("woff"),url(GTWalsheimProRegular.ttf) format("truetype");
	font-weight: 400;
	font-style: normal
	}

	@font-face {
	font-family: GT Walsheim Pro;
	src: local("GT Walsheim Pro Bold"),local("GTWalsheimProBold"),url(GTWalsheimProBold.woff2) format("woff2"),url(GTWalsheimProBold.woff) format("woff"),url(GTWalsheimProBold.ttf) format("truetype");

	function sortSelectOptions(selectElement) {
	var options = $(selectElement + " option");

	options.sort(function(a,b) {
	if (a.text.toUpperCase() > b.text.toUpperCase()) return 1;
	else if (a.text.toUpperCase() < b.text.toUpperCase()) return -1;
	else return 0;
	});

	$(selectElement).empty().append( options );