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;
}
console.log(reverseFormatNumber('1,234.56','en'));
@OliverJAsh
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
OliverJAsh / foo.md
Last active Mar 6, 2021
JavaScript function declarations vs. expressions
View foo.md
@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 / 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) => module.id === id);
@OliverJAsh
OliverJAsh / README.md
Last active Feb 9, 2021
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.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
OliverJAsh / foo.ts
Created Dec 3, 2020
ts-morph: Convert named imports to namespace import
View foo.ts
// https://gist.github.com/OliverJAsh/5de515ad1f81b88409c13cd548c20893
// https://twitter.com/OliverJAsh/status/1334537098469265413
const { Project } = require('ts-morph');
const project = new Project({
tsConfigFilePath: 'tsconfig.app.no-references.json',
});
const PATH_TO_MATCH = '/Users/oliverash/Development/unsplash-web/shared/helpers/booleans.ts';
@OliverJAsh
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
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 => (
<ReduxConsumer>
{pipe(
({ state, dispatch }) => ({
...ownProps,
...mapStateToProps(state, ownProps),