Skip to content

Instantly share code, notes, and snippets.

Avatar

Georges Haidar disintegrator

View GitHub Profile
@disintegrator
disintegrator / pino.d.ts
Created Sep 24, 2020
An example TypeScript declaration file that demonstrates how to augment the type definitions of a third party library.
View pino.d.ts
import "pino";
declare module "pino" {
interface LoggerOptions {
// @types/pino does not currently expose this option
nestedKey?: string;
}
}
@disintegrator
disintegrator / README.md
Last active Sep 15, 2020
Visual regression testing with Storybook
View README.md

This gist is used to demonstrate how to set up a relatively stable visual regression test suite using Storybooks @storybook/addon-storyshots-puppeteer. This test suite should run consistently during local development and in a CI environment. In this gist, we use CircleCI as an example.

We need to ensure that visual tests run in a linux environment both locally and in CI. This is so the font rendering differences between different operating systems does not interfere with our testing.

@disintegrator
disintegrator / GatsbyContentfulWithReadingTime.graphql
Last active Sep 24, 2020
Add a reading time estimate to all your Contentful rich text nodes in GatsbyJS
View GatsbyContentfulWithReadingTime.graphql
{
contentfulBlogPost {
body {
fields {
readingTime {
text
minutes
time
words
}
@disintegrator
disintegrator / TypeHolesInTS.md
Last active Sep 24, 2020
Type holes in TypeScript
View TypeHolesInTS.md

Type holes in TypeScript

In TypeScript there are a few ways you can sidestep type inference and the compiler to introduce type holes in your code. Type holes are parts of the code where we’ve lied or hid information from the compiler and can be a source of bugs that are not present in properly typed code. The common ones I see are listed below in order of really bad to bad.

Type casts

const something = getValue() as any;
const cat = dog as Cat;
@disintegrator
disintegrator / https-during-dev.macos.sh
Last active Sep 24, 2020
Use Caddy, mkcert and dnsmasq to expose your development server over HTTPS
View https-during-dev.macos.sh
brew install caddy mkcert nss dnsmasq
mkcert -install
mkcert '*.app.test' '*.cdn.test'
# rename the certs and move them under /usr/local/etc/caddy/certs
cat <<EOF > /usr/local/etc/caddy/Caddyfile
*.app.test:443, *.cdn.test:443 {
@disintegrator
disintegrator / propTypes.ts
Created Sep 5, 2018
Get the prop types of a react component class, functional component or string corresponding to HTML tag name
View propTypes.ts
import * as React from "react";
/**
* Given a JSX.IntrinsicElement[...], get its attributes
*/
type Attributes<E> = E extends React.DetailedHTMLProps<infer Attr, any>
? Attr
: never;
/**
@disintegrator
disintegrator / PropType.tsx
Created May 1, 2018
PropType conditional type inference in TypeScript
View PropType.tsx
import { ComponentType } from "react";
/**
* For any type T that is a React.ComponentType give me the type of its Props
*
*/
export type PropType<T> = T extends ComponentType<infer P> ? P : never;
// USAGE:
import { Component, Fragment } from "react";
@disintegrator
disintegrator / Value.ts
Last active Apr 26, 2018
Value component
View Value.ts
import * as React from "react";
interface Props<T> {
initial?: T;
children: (r: { value?: T; onChange: (value: T) => void }) => React.ReactNode;
}
interface State<T> {
value?: T;
}
@disintegrator
disintegrator / wdio.conf.js
Created Jun 9, 2017
Run Chrome Headless with WebdriverIO and selenium-standalone
View wdio.conf.js
exports.config = {
capabilities: [
{
browserName: 'chrome',
chromeOptions: {
args: ['headless', 'disable-gpu'],
},
},
],
services: ['selenium-standalone'],
@disintegrator
disintegrator / redux.ts
Created May 11, 2017
Redux TS boilerplate
View redux.ts
export type ActionType = string;
export interface Action<T extends ActionType> {
type: T;
}
export interface BasicAction<T extends ActionType, P> extends Action<T> {
payload: P;
}
You can’t perform that action at this time.