Skip to content

Instantly share code, notes, and snippets.

@OliverJAsh
OliverJAsh / env.ts
Created Aug 2, 2019
TypeScript narrowed union is lost inside function scopes
View env.ts
export type Foo = {
foo: string;
};
export type Bar = {
bar: string;
};
export type Value = Foo | Bar;
export declare const value: Value;
View foo.sh
#!/bin/bash
# https://junegunn.kr/2016/07/fzf-git/
# https://hackernoon.com/be-125-more-efficient-with-git-60556a1ce971
# https://github.com/fcsonline/dotfiles/blob/master/git/gitconfig
# https://github.com/junegunn/fzf/wiki/Examples#git
# TODO: incorporate fix into this?
# TODO: select commits for editing, generate rebase from that
View _git-merge-pr
#compdef git-merge-pr
_git-merge-pr () {
# Multiple lines = -l
# compadd -l -d "('foo:a b c' 'bar:d e f')" foo bar
# lines=('foo:a b c' 'bar:d e f')
# compadd -l -d lines foo bar
# lines=('foo:a b c' 'bar:d e f')
@OliverJAsh
OliverJAsh / foo.ts
Created Aug 1, 2019
TypeScript + React: convert render prop component to HOC
View foo.ts
import { ComponentType, ReactElement } from 'react';
import React = require('react');
type RenderPropComponent = ComponentType<{ children: () => ReactElement }>;
const RenderProp: RenderPropComponent = ({ children }) => (
<div>{children()}</div>
);
const renderPropToHoc = (RenderPropComponent: RenderPropComponent) => <P,>(
View foo.elm
type alias File = { name : String }
type Action = AgreeToTerms | AddFiles { files : List File }
type State = Onboarding | Form { files : List File }
action = AgreeToTerms
state = Form { files = [] }
result = case ( action, state ) of
( AgreeToTerms, Onboarding ) ->
@OliverJAsh
OliverJAsh / foo.md
Last active Jul 17, 2020
My frustrations writing demos/tests for redux-react connected components
View foo.md

My frustrations writing demos/tests for redux-react connected components

I'm writing demos for my React components, to showcase them in a specific states (e.g. Storybook).

However, the components I'm trying to write demos for are React Redux connected components, and this is making the demos much more difficult to achieve. To illustrate why, I'll start with an example.

Note: the problems I describe here also apply to writing tests (which demos are just one form of).

Example

@OliverJAsh
OliverJAsh / foo.ts
Last active Apr 19, 2019
TypeScript `getProperty` for safe index lookups in records
View foo.ts
{
// TS doesn't return the correct type for index lookups. It returns `T` when it might actually be `T
// | undefined`. These helpers give us the correct type.
// https://github.com/Microsoft/TypeScript/issues/13778
type IndexLookup<Key extends string, V, K extends Key> = string extends Key
? Record<Key, V>[K] | undefined
: Record<Key, V>[K];
// $ExpectType string | undefined
@OliverJAsh
OliverJAsh / foo.ts
Last active Oct 16, 2020
TypeScript type hierarchy for `object`, primitives, `{}`, and `unknown`
View foo.ts
/*
--------- primitive ----------
object non-nullable primitive nullable
------------- {} --------------
---------------- unknown -----------------
https://www.oreilly.com/library/view/programming-typescript/9781492037644/ch04.html
https://gist.github.com/OliverJAsh/381cd397008309c4a95d8f9bd31adcd7
*/
@OliverJAsh
OliverJAsh / foo.md
Last active May 10, 2019
TypeScript object types
View foo.md
@OliverJAsh
OliverJAsh / README.md
Last active Oct 27, 2020
Flexbox gutters
View README.md

Flexbox gutters

Problem

  • We use flexbox for our layout.
  • We want to add horizontal and vertical gutters inbetween these items.
  • Items wrap according to contents (flex-wrap: wrap), therefore we can't decide when/where to apply gutters using breakpoints.

Solution

You can’t perform that action at this time.