hoodwink73 / useBeat.js

Created July 25, 2019 12:53

Suppose you have different parts of the app which needs to change(re-render) after a certain time, say like timers — this is how you would achieve it with React hooks

	import React, { useState, useEffect, useContext, createContext } from "react";
	import moment from "moment";

	const BeatContext = createContext();

	export function BeatProvider({ beatEveryInMs, children }) {
	const [lastUpdated, update] = useState(moment());
	const secondsInNow = moment().seconds();

	// this tries to ensure we trigger the update when the minute changes

hoodwink73 / custom-select.css

Created July 15, 2019 10:43

Simulate the arrow indicating a dropdown menu when you reset the appearance of a select element

	.reset-select {
	border: 0;
	padding: 0;
	margin: 0;
	outline: 0;
	height: 100%;
	background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+)
	no-repeat 98% 50%, #F5F7FA;
	-moz-appearance: none;
	-webkit-appearance: none;

hoodwink73 / usage.js

Created July 11, 2019 07:00

React Suspense with Apollo Cache (as presented in the talk, State of React by Jared Palmer @reacteurope 2019)

	const UserDetailRepos = ({login}) => {
	const {data} = useQuery(USER_REPOS, {
	variables: {login}
	})

	const {
	user: {
	reposositories: { nodes }
	}
	} = data

hoodwink73 / 1. error_behavior_in asynquence.js

Last active April 15, 2019 06:14

Error handling with Asynquence is a bit different. By default a error in the sequence suspends the entire sequence.

	ASQ()
	.promise(delayWithReject(200))
	.or(() => console.log('caught'))
	.val(() => console.log('The sequence deactivates. So this never gets logged.'))

	ASQ()
	// a `try` always ends up in a sequence progress
	// in case the task fails the next step will receive a special messsage
	// -> {error: "Reason for failure" }
	.try((done) => done.fail('Doomed!!'))

hoodwink73 / unique_array.js

Created April 5, 2019 07:01

Call it trickery or geekery, I am going to create a unique array using `filter` (thanks @getify)

	const the_redundants = [1, 2, 2, 3, 4, 6, 6, 7, 7, 7, 8]

	// this is posiible because indexOf always
	// returns the left most index
	const the_pures = the_redundants
	.filter((n, index, arr) =>
	arr.indexOf(n) === index
	)

hoodwink73 / unique_array.js

Created April 5, 2019 07:01

Call it trickery or geekery, I am going to create a unique array using `filter` (thanks @getify)

	const the_redundants = [1, 2, 2, 3, 4, 6, 6, 7, 7, 7, 8]

	// this is posiible because indexOf always
	// returns the left most index
	const the_pures = the_redundants
	.filter((n, index, arr) =>
	arr.indexOf(n) === index
	)

hoodwink73 / get_all_paginated_response.js

Created March 26, 2019 12:56

Handling paginated API using Asyquence

	const ASQ = require("asynquence")

	const asyncTaskFactory = () => {
	let invokationCount = 0

	const asyncTask = () => {
	return ASQ().then(done => {
	setTimeout(() => {
	invokationCount = invokationCount + 1
	done({

hoodwink73 / .storybook-config.js

Created August 28, 2018 10:09

Switch between emotion themes in Storybook

	import React, {Fragment} from 'react'
	import {ThemeProvider} from 'emotion-theming'

	import {configure, addDecorator} from '@storybook/react'

	import DarkTheme from '../src/styles/themes/Dark'
	import LightTheme from '../src/styles/themes/Light'

	import {withKnobs} from '@storybook/addon-knobs'
	import {select} from '@storybook/addon-knobs'

hoodwink73 / README.md

Last active July 5, 2018 04:48

Basic functional programming concepts taken from the course Functional Light v2 by Kyle Simpson on Frontend Masters

Instructions

Define a compose(..) that takes any number of functions (as individual arguments) and composes them right-to-left.
Define a pipe(..) that takes any number of functions (as individual arguments) and composes them left-to-right.

hoodwink73 / retry-upon-failure.js

Last active March 23, 2018 16:02

Abstraction to retry async tasks upon failure using Promises

	function mockAsyncTask () {
	console.log('Simulating Failure');
	return Promise.reject(new Error('failure'));
	}

	const delay = ms => new Promise(resolve => setTimeout(resolve, ms))

	const retry = (asyncTask, strategy) => {
	return strategy.reduce(function (promiseChain, interval, index) {
	return promiseChain

Arijit Bhattacharya hoodwink73

Instructions