jmatsushita

###
### [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.

rauschma

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])  ⟼ ['▲','▲','●','●']

ryuheechul

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

alexilyaev

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

ryanflorence

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

ryanflorence

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>

rachidbch

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

mfd

@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");

cschlyter

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

erikreagan

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