Skip to content

Instantly share code, notes, and snippets.

@mfellner
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: {
@bvaughn
bvaughn / example.jsx
Last active Nov 29, 2021
Advanced example for manually managing subscriptions in an async-safe way using hooks
View example.jsx
import React, { useMemo } from "react";
import useSubscription from "./useSubscription";
// In this example, "source" is an event dispatcher (e.g. an HTMLInputElement)
// but it could be anything that emits an event and has a readable current value.
function Example({ source }) {
// In order to avoid removing and re-adding subscriptions each time this hook is called,
// the parameters passed to this hook should be memoized.
const subscription = useMemo(
() => ({
View auth-with-reach-router.jsx
let UserContext = React.createContext();
class App extends React.Component {
state = {
user: null,
setUser: user => {
this.setState({ user });
}
};
View Infrastructure.js
let cache = new Map();
let pending = new Map();
function fetchTextSync(url) {
if (cache.has(url)) {
return cache.get(url);
}
if (pending.has(url)) {
throw pending.get(url);
}
View react-gripes.md

3 Gripes With React

I started using React 3.5 years ago, and I still love it. It was such a well-designed solution that not much has changed since then, only superficial stuff like naming. What I learned then is still wholly applicable today because it's such a good idea (although now you can choose from many other libraries). On top of that, we now benefit from an entirely new architecture (fiber) without changing much.

@gvsrepins
gvsrepins / terminator-config
Created Aug 19, 2017
Terminator config to act like Guake terminal
View terminator-config
[global_config]
always_on_top = True
borderless = True
enabled_plugins = LaunchpadCodeURLHandler, APTURLHandler, LaunchpadBugURLHandler
sticky = True
tab_position = bottom
[keybindings]
hide_window = F12
[layouts]
[[default]]
View index.jsx
import React from 'react'
import { render } from 'react-dom'
import { Match, Link, BrowserRouter as Router } from 'react-router'
import matchSorter from 'match-sorter'
import './styles.css'
const API = 'http://localhost:3000'
const token = localStorage.booksToken || Math.random().toString()
localStorage.booksToken = token
View quiz_answers.md

Thanks everyone for participating in the quiz!
Many of you have posted correct answers.

What we know:

A top-level App component returns <Button /> from its render() method.

Question:

What is the relationship between <Button /> and this in that Button’s render()?

@alekseykulikov
alekseykulikov / index.md
Last active Aug 8, 2020
Principles we use to write CSS for modern browsers
View index.md

Recently CSS has got a lot of negativity. But I would like to defend it and show, that with good naming convention CSS works pretty well.

My 3 developers team has just developed React.js application with 7668 lines of CSS (and just 2 !important). During one year of development we had 0 issues with CSS. No refactoring typos, no style leaks, no performance problems, possibly, it is the most stable part of our application.

Here are main principles we use to write CSS for modern (IE11+) browsers:

@iammerrick
iammerrick / LazilyLoad.js
Last active Aug 7, 2019
Lazily Load Code Declaratively in React + Webpack
View LazilyLoad.js
import React from 'react';
const toPromise = (load) => (new Promise((resolve) => (
load(resolve)
)));
class LazilyLoad extends React.Component {
constructor() {
super(...arguments);