Skip to content

Instantly share code, notes, and snippets.

Avatar
💅
writing JavaScript

Max Stoiber mxstbr

💅
writing JavaScript
View GitHub Profile
@mxstbr
mxstbr / comparison.md
Created Mar 17, 2021
Bundle size comparison between GraphQL clients
View comparison.md
  • Standard create-react-app
  • Sets up the GraphQL provider and client, nothing else
// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
// Switch between them with comments
// import GraphQLProvider from "./Apollo"
@mxstbr
mxstbr / en.js
Created Sep 12, 2020
We need your help to translate the https://feedback.fish widget into more languages! If you know a language, please help by posting a translation for these strings in a comment below.
View en.js
const en = {
titles: {
default: `What's on your mind?`,
idea: `Share an idea`,
issue: `Report an issue`,
other: `Tell us anything!`,
},
categories: {
idea: `Idea`,
issue: `Issue`,
@mxstbr
mxstbr / PaginationTypes.graphql
Created Feb 20, 2018
Code snippets for "Securing Your GraphQL API from Malicious Queries" blog post
View PaginationTypes.graphql
type Participant {
# The complexity of getting one thread in a thread connection is 3, and multiply that by the amount of threads fetched
threadConnection(first: PaginationAmount, after: String): ThreadConnection @cost(complexity: 3, multiplier: "first")
}
type Thread {
participants(first: PaginationAmount,...): [Participant] @cost(complexity: 2, multiplier: "first")
}
View profiling-a-webpage-with-chrome.md

First, start Chrome and open the page you want to profile:

./chrome --js-flags=”--prof” --no-sandbox http://localhost:8080/index.html

Note: This page should do things on-load, simply close Chrome once it's done

Then preprocess the biggest .log file you get: (since the biggest one should be from the main renderer):

@mxstbr
mxstbr / send-email.js
Created Nov 13, 2017
A send email util for Postmark
View send-email.js
import postmark from 'postmark';
const debug = require('debug')('send-email');
const stringify = require('json-stringify-pretty-compact');
let client;
if (process.env.POSTMARK_SERVER_KEY) {
client = new postmark.Client(process.env.POSTMARK_SERVER_KEY);
} else {
console.log(
'\nℹ️ POSTMARK_SERVER_KEY not provided, debug mode enabled. Will log emails instead of actually sending them.'
View log-resolvers.js
import createLogger from 'graphql-log';
let list = [];
const logExecutions = createLogger({
logger: (name) => {
list.push(name);
fs.writeFileSync('resolvers.js', JSON.stringify(list, null, 2));
},
});
@mxstbr
mxstbr / asyncify.js
Last active Mar 13, 2018 — forked from ForbesLindesay/iter.js
A reusable utility to turn a callback-based listener into an async iterable
View asyncify.js
// @flow
// Turn a callback-based listener into many async iterators without buffering
import { $$asyncIterator } from 'iterall';
type Listener = ((arg: any) => void) => Promise<any>;
const defaultOnError = (err: Error) => {
throw new Error(err);
};
View keybase.md

Keybase proof

I hereby claim:

  • I am mxstbr on github.
  • I am mxstbr (https://keybase.io/mxstbr) on keybase.
  • I have a public key whose fingerprint is 78D3 829B 9CE0 7924 2C15 4E38 673F 4304 C9E3 A511

To claim this, I am signing this object:

@mxstbr
mxstbr / Field.js
Last active Dec 29, 2020 — forked from hungrysquirrel/Field.js
Style Storybook with Styled Components
View Field.js
import React, { PropTypes } from 'react';
import styled from 'styled-components'
const Wrapper = styled.div`
// styles here that used to be for .test
`
const Label = styled.label`
// label styles here
`
@mxstbr
mxstbr / Component.js
Last active Jun 18, 2019
styled-components tachyons
View Component.js
// There's two ways to use Tachyons together with styled-components
// Both are valid, which one you use depends if you want to always apply a tachyons class when a certain component
// is rendered or if you want to apply it for specific instances.
// 1. Use .attrs to define classNames that should always be applied to a styled component
// Whenever you use <Component /> now it'll have both the styled-components as well as the Tachyons class
// See the docs for more info: https://www.styled-components.com/docs/basics#attaching-additional-props
const Component = styled.div.attrs({
className: 'bw0-l',
})`