Skip to content

Instantly share code, notes, and snippets.


Jane Manchun Wong wongmjane

View GitHub Profile
View Open letter to the Gatsby

To the Gatsby Community,

We want to start by specifically thanking Nat Alison. We support her and commend her bravery in speaking out. It is not easy to stand alone. What she experienced at Gatsby was unacceptable and speaks to wider issues. We thank her for putting pressure on the company to fix them. We vow to double down on those efforts.

While we have worked hard to give feedback and help create a healthy work environment over the past few years, change has been far too slow and the consequences have been real. The previous weeks have intensified the need for rapid change by increasing employee communication and allowing us to collectively connect some dots. We are just as outraged. As a result, we have posed a series of hard questions to management as well as a list of concrete actions they need to take.

Kyle Mathews' public apologies to both Nat Alison and Kim Crayton are small actions swiftly taken that signal the possibility for change but don't speak to the systemic issues that must be addressed.

justincy /
Last active Oct 19, 2020
Configure Storybook to work with Next.js, TypeScript, and CSS Modules

In addition to the Storybook for React setup, you'll also need to install these packages:

npm i -D @babel/core babel-loader css-loader style-loader
IanColdwater / twittermute.txt
Last active Oct 17, 2020
Here are some terms to mute on Twitter to clean your timeline up a bit.
View twittermute.txt
Mute these words in your settings here:
jkrems /
Last active Aug 31, 2020
JavaScript: Classic Scripts vs. Modules vs. CommonJS

JavaScript File Format Differences

There's the pervarsive notion that all JS is created equal and that there's only minor and easily detectable differences between the various file formats used to author JavaScript. This is correct, from a certain point of view.

A certain point of view?

For many people writing JavaScript that gets passed into build tools,

shrugs /
Created Oct 21, 2019
apollo + next

these are the relevant files from my next + apollo + prisma setup. the prisma bit isn't relevant and can just be removed from the context. likewise my resolvers + typedefs setup is hyper specific and there are infinitely many way to do this (lol javascript)

the only relevant bit that might be missing is the handler path that has to match your next.js route

acutmore /
Last active Sep 4, 2020
Emulating a 4-Bit Virtual Machine in (TypeScript\JavaScript) (just Types no Script)

A compile-time 4-Bit Virtual Machine implemented in TypeScript's type system. Capable of running a sample 'FizzBuzz' program.

Syntax emits zero JavaScript.

type RESULT = VM<
    ["push", N_1],         // 1
    ["push", False],       // 2
    ["peek", _],           // 3
mfellner / graphql.ts
Created Jul 8, 2019
Using Apollo Server in Next.js 9 with API route in pages/api/graphql.ts
View graphql.ts
import { ApolloServer, gql } from 'apollo-server-micro';
const typeDefs = gql`
type Query {
sayHello: String
const resolvers = {
Query: {
nfarina / AutoThemeSwitcher.js
Created May 14, 2019
Auto Dark Theme for Storybook
View AutoThemeSwitcher.js
import addons from '@storybook/addons';
import { FORCE_RE_RENDER } from '@storybook/core-events';
import { themes } from '@storybook/theming';
// Automatically switch light/dark theme based on system pref.
addons.register("auto-theme-switcher", api => {
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
let lastTheme;
gaearon /
Last active Oct 13, 2020
useLayoutEffect and server rendering

If you use server rendering, keep in mind that neither useLayoutEffect nor useEffect can run until the JavaScript is downloaded.

You might see a warning if you try to useLayoutEffect on the server. Here's two common ways to fix it.

Option 1: Convert to useEffect

If this effect isn't important for first render (i.e. if the UI still looks valid before it runs), then useEffect instead.

function MyComponent() {
bkeating / graphiql-dark-mode.css
Last active Oct 16, 2020
GraphiQL One Dark Alt (Dark Mode) theme by Ben Keating
View graphiql-dark-mode.css
/* GraphiQL One Dark Alt (Dark Mode) theme by Ben Keating[1]
* Colors taken from Atom's One Dark theme[2]. Add this file to the end of
* your <head> block[3] to override built-in default styling.
* [1].
* [2].
* [3]. e.g. `.../site-packages/graphene_django/templates/graphene/graphiql.html`
You can’t perform that action at this time.