Skip to content

Instantly share code, notes, and snippets.

View foo.js
function reverseFormatNumber(val,locale){
var parts = new Intl.NumberFormat(locale).formatToParts(1111.1);
var group = parts.find(part => part.type === 'group').value;
var decimal = parts.find(part => part.type === 'decimal').value;
var reversedVal = val.replace(new RegExp('\\' + group, 'g'), '');
reversedVal = reversedVal.replace(new RegExp('\\' + decimal, 'g'), '.');
return Number.isNaN(reversedVal)?0:+reversedVal;
OliverJAsh / foo.ts
Last active Mar 31, 2021
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 /
Last active Mar 6, 2021
JavaScript function declarations vs. expressions
OliverJAsh /
Created Dec 8, 2017
Avoiding CSS overrides in responsive components

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 / script.js
Created Feb 15, 2021
webpack: list reasons why a given module was included (dependents)
View script.js
// @ts-check
const treeify = require('treeify');
* @param {import('webpack').Stats.ToJsonOutput} stats
* @param {string | number} id
const getModuleById = (stats, id) => stats.modules.find((module) => === id);
OliverJAsh /
Last active Feb 9, 2021
Flexbox gutters

Flexbox gutters


  • 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.


OliverJAsh / foo.tsx
Last active Jan 30, 2021
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 / foo.ts
Created Dec 3, 2020
ts-morph: Convert named imports to namespace import
View foo.ts
const { Project } = require('ts-morph');
const project = new Project({
tsConfigFilePath: '',
const PATH_TO_MATCH = '/Users/oliverash/Development/unsplash-web/shared/helpers/booleans.ts';
OliverJAsh / foo.ts
Created Dec 10, 2017
Luxon TypeScript typings
View foo.ts
declare module 'luxon' {
namespace luxon {
type DateTimeFormat = any;
type ZoneOptions = {
keepCalendarTime?: boolean;
type ToFormatOptions = {
round: boolean;
OliverJAsh / form.ts
Created Aug 22, 2018
Simple react-redux using React's new Context API
View form.ts
const store = configureAndCreateReduxStore();
const { ReduxProvider, ReduxConsumer } = createReactRedux(store);
export const FormConnected: React.SFC<OwnProps> = ownProps => (
({ state, dispatch }) => ({
...mapStateToProps(state, ownProps),