Skip to content

Instantly share code, notes, and snippets.

@OliverJAsh
OliverJAsh / README.md
Last active Sep 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

@OliverJAsh
OliverJAsh / foo.ts
Last active Sep 21, 2020
Records and dictionaries in TypeScript
View foo.ts
/*
In JavaScript, objects can be used to serve various purposes.
To maximise our usage of the type system, we should assign different types to our objects depending
on the desired purpose.
In this blog post I will clarify two common purposes for objects known as records and dictionaries
(aka maps), and how they can both be used with regards to the type system.
@OliverJAsh
OliverJAsh / foo.js
Last active Sep 21, 2020
Async iterators with map, skipWhile, and takeUntil
View foo.js
class FunctifiedAsync {
constructor(iterable) {
this.iterable = iterable;
}
async *[Symbol.asyncIterator]() {
for await (const value of this.iterable) {
yield value;
}
}
@OliverJAsh
OliverJAsh / foo.tsx
Last active Sep 8, 2020
TypeScript React HOC using `forwardRef`
View foo.tsx
import * as React from 'react';
import { Component, ComponentClass, createRef, forwardRef, Ref } from 'react';
const myHoc = <ComposedComponentProps extends {}>(
ComposedComponent: ComponentClass<ComposedComponentProps>,
) => {
type ComposedComponentInstance = InstanceType<typeof ComposedComponent>;
type WrapperComponentProps = ComposedComponentProps & {
wrapperComponentProp: number;
@OliverJAsh
OliverJAsh / foo.ts
Last active Aug 29, 2020
TypeScript: infer function parameter as a tuple, not an array
View foo.ts
{
declare const fn: <T>(fn: (t: T) => void, t: T) => void;
fn(
(t) => {
// $ExpectType [number, string]
// ❌
// Actual: (string | number)[)
t;
},
@OliverJAsh
OliverJAsh / foo.md
Last active Aug 29, 2020
`Option` vs non-`Option`
View foo.md

Option vs non-Option

Option<T> non-Option (T | undefined)
accessing property userOption.map(user => user.age) userNullish?.age
calling a method userOption.map(user => user.fn()) userNullish?.fn()
providing fallback ageOption.getOrElse(0) ageNullish ?? 0
filter ageOption.filter(checkIsOddNumber) `ageNull
@OliverJAsh
OliverJAsh / foo.md
Created Dec 8, 2017
Avoiding CSS overrides in responsive components
View foo.md

Avoiding CSS overrides in responsive components

I would like to demonstrate some of the benefits of scoped styles over mobile-first CSS with overrides for wider breakpoints. I'll start by explaining the two approaches, before listing the benefits.

Mobile-first with overrides for wider breakpoints

h2 {
  color: black;
  font-size: 2em;
@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
Created Jan 3, 2019
TypeScript object filter
View foo.ts
const tuple = <T extends Array<unknown>>(...args: T): T => args;
// `Object.keys` does not return the keys as string literals, only strings. Use this helper as a
// workaround. https://github.com/Microsoft/TypeScript/pull/12253#issuecomment-263132208
const keys = <O extends object>(obj: O) => Object.keys(obj) as Array<keyof O>;
// `Object.entries` is ES2017, so we must define our own version.
const entries = <K extends string, V>(obj: Record<K, V>) =>
keys(obj).map(key => tuple(key, obj[key]));
const fromEntries = <K extends string, V>(arr: Array<[K, V]>) =>
You can’t perform that action at this time.