Skip to content

Instantly share code, notes, and snippets.

View ExplicitViewStates.tsx
import React from "react";
type NoData = {
_type: "NO_DATA";
type Data<T> = {
_type: "DATA";
data: T;
busypeoples / RemoteData.tsx
Created Mar 6, 2020
RemoteData implementation using React, hooks and TypeScript
View RemoteData.tsx
import React, { useState } from "react";
type NotAsked = {
_type: "NOT_ASKED";
type Loading = {
_type: "LOADING";
busypeoples / Helpers.ts
Last active Oct 9, 2020
Helper Functions in TS
View Helpers.ts
* TS Helper Functions
type ConvertTo<Type, From, To> = {
[Key in keyof Type]: Required<Type>[Key] extends From ? To : Type[Key];
type FilterByType<T, U> = {
[Key in keyof Required<T>]: Required<T>[Key] extends U ? Key : never;
}[keyof T];
busypeoples / validation.ts
Created Feb 10, 2020
Validation in TS (version 2)
View validation.ts
type ValidationResult<T, U> = Partial<{ [Key in keyof T]: U }>;
type Validation<T, U> = (fields: T) => ValidationResult<T, U>;
const validate = <T, U = boolean | string>(
validations: Validation<T, U>[],
fields: T
): ValidationResult<T, U> =>
.map(validation => validation(fields))
.reduce((acc, a) => Object.assign(acc, a), {});
View validation.ts
type ValidationResult<T, U> = Partial<{ [Key in keyof T]: U }>;
type Validation<T, U> = (input: T) => ValidationResult<T, U>;
const mergeAll = <T, U>(
results: ValidationResult<T, U>[]
): ValidationResult<T, U> =>
results.reduce((acc, a) => Object.assign(acc, a), {});
const validate = <T, U = boolean | string>(
validations: Validation<T, U>[]
busypeoples / SmallFormValidation.js
Last active Apr 30, 2019
Small Validation Library
View SmallFormValidation.js
const { converge, mergeAll } = require("ramda");
// Small validation function...
const validate = (validations) => {
return converge((...results) => mergeAll(results), validations);
// Validators
const isGt4 = x => x > 4;
const isGT8 = x => x > 8;
busypeoples / InferProps.tsx
Created Mar 9, 2019
Infer Props using PropTypes.InferProps
View InferProps.tsx
import React from "react";
import { render } from "react-dom";
import PropTypes from "prop-types";
// Using PropTypes.InferProps
type InferPropTypes<
DefaultProps = {},
Props = PropTypes.InferProps<PropTypes>
busypeoples / TypeScriptFundamentals.ts
Last active Jun 16, 2020
TypeScript Fundamentals For JavaScript Developers
View TypeScriptFundamentals.ts
// TypeScript Fundamentals For JavaScript Developers
Tutorial for JavaScript Developers wanting to get started with TypeScript.
Thorough walkthrough of all the basic features.
We will go through the basic features to gain a better understanding of the fundamentals.
You can uncomment the features one by one and work through this tutorial.
If you have any questions or feedback please connect via Twitter:
A. Sharif :
busypeoples / Match.js
Created Jan 9, 2019
Pattern Matching Functionality
View Match.js
// Modelled after Ramda's Cond function
const match = <T, U>(
conditions: [(i: T) => boolean, (i: T) => U][],
data: T
): U | undefined => {
return conditions.reduce((result: U | undefined, [predicate, transformer]) => {
if (result) {
return result;
busypeoples /
Last active Mar 5, 2019
Declarative Style Definitions Pt.1

Declarative Style Definitions Pt.1

** Note: This is a first try at understanding the topic better. Not an expert in styling or design. The following write-up is a collection of ideas from people that have been thinking about the topic for a very long time: Brent Jackson, Adam Morse, Michael Chan, Jon Gold, Sunil Pai and many more. **

When building UIs, we mostly have a good grip of the very initial requirements. We choose tools and concepts around these requirements and implement a UI resembling the initial definition. But overtime these requirements start to evolve. More features or changes to the initial definition require changing parts of the application, sometimes even more than just small refactorings and rewrites. Most of the UI work tends to be a repetition of existing solutions but with explicit requirements that don't align with alre

You can’t perform that action at this time.