Skip to content

Instantly share code, notes, and snippets.

View ianmstew's full-sized avatar

Ian Stewart ianmstew

25 followers · 0 following
View GitHub Profile
@ianmstew
ianmstew / example.ts
Created April 14, 2020 17:39
record type with exceptional properties
// Type and Factory
type RecordX = ReturnType<typeof RecordX>;
function RecordX(
id: string,
props?: Record<string, string[]>
) {
return Object.assign({ id }, props);
}
@ianmstew
ianmstew / Avatar.tsx
Last active November 25, 2019 03:44
asyncComputed example
// Parallel implementation to Avatar example from
// https://github.com/conorhastings/use-reducer-with-side-effects/blob/19d097e95302068d8368b0a10b379b0a6bab9f93/README.md
import { useObserver, useLocalStore } from 'mobx-react';
// WIP library inspired by `import { promisedComputed } from 'async-computed-mobx'`
import asyncComputed from 'utils/mobx/asyncComputed';
const DEFAULT_AVATAR = '/assets/img/default-avatar.png';
function Avatar(props: { userName: string }) {
@ianmstew
ianmstew / hot-tip.md
Created November 8, 2019 22:07
imperative vs declarative object initialization 
const toggleButtonProps = {
  key: index,
  selected
};
if (props.disabled) toggleButtonProps.disabled = props.disabled;

Hot tip!! Try to challenge yourself to not imperatively update an object or array when you can use ES6 syntax to declare your logic at initialization/object creation time. The progression of developer into declarative/functional programming looks like this:

@ianmstew
ianmstew / typescript-classes-safe.md
Last active November 3, 2019 18:30

http://www.typescriptlang.org/play/#code/MYGwhgzhAEAqCmEAu0DeAoaXoDMD2e0AvNEgBYCWEAdBQHYVIDc0A9K3AJ4AO8AysABOFbkgC0Y+owpgQFAF7wAJtADujMtGB46yQQFdgSPIOhhBAc0zYARueKlKNKUgBMLdtAAK+wfGgAUmAAbmACwqISwGB0AOQoLjJyimoaWjp6hsam5lbY0C6uAFxmdJxM1ljaukgGRiYAFNzCoUj+LiUxnAA0BQxunWUAlGiV+Y5UtP2uDoUV+QC+6AtAA

TypeScript makes JavaScript classes actually useful ^^

By fixing a fatal ES6 class flaw

The conspicuous absence of a way to reference constructor arguments within inline class property initializers

Which IMO after a year of struggles completely hobbles ES6 classes

@ianmstew
ianmstew / native-timezone.js
Created October 24, 2019 13:57
(() => {
function getLocale() {
// IE 11 does not support navigator.languages
return navigator.languages ? navigator.languages[0] : navigator.language;
}
function isTimezoneSupported(timezone) {
try {
new Date().toLocaleDateString(getLocale(), { timeZone: timezone });
} catch (err) {
if (err instanceof RangeError) {
@ianmstew
ianmstew / hoc-renderprop-hook.js
Last active May 21, 2021 13:30
HOC vs Render Prop vs Custom Hook
/* Loader that renders empty unless `props.active` is true */
function Loader(props) {
const { active } = props;
return active && <div>Loading...</div>;
}
/* Loader class component that renders empty until a timeout */
class LoaderWithDelay extends React.Component {
@ianmstew
ianmstew / plain-object-maps-typescript.md
Last active September 7, 2023 18:58
Plain objects as maps in TypeScript

So another 🤯 about TypeScript. We use plain objects as arbitrary maps all the time, but TypeScript deems that usage (correctly) too flexible.

const map = {};
map.foo = 'foo'; // Error: Property 'foo' does not exist on type '{}'.

Okay, then we need to type our object as a map:

@ianmstew
ianmstew / higher-order-generator.js
Last active November 30, 2022 14:56
(() => {
function MappedYieldGenerator(generator, mapYield) {
return function*() {
const gen = generator();
let genResult;
let resolvedValue;
do {
genResult = gen.next(resolvedValue);
resolvedValue = yield mapYield(genResult.value);
} while (!genResult.done);
@ianmstew
ianmstew / into-to-coding_2018-11-29.md
Last active November 30, 2018 15:20
@ianmstew
ianmstew / intro-to-coding.md
Last active October 17, 2018 20:56