Malte Wessel malte-wessel

Breaking the web at 60fps · Software Engineer at @spotify

malte-wessel / renderProps.tsx

Created April 27, 2020 06:41


	const Component = ({ markers }) => (
	<Map>
	<Clusterer renderCluster={(cluster) => <Cluster cluster={cluster} />}>
	{markers.map((marker, idx) => (
	<OverlayView key={idx}>
	{(isVisible) => (
	<Marker marker={marker} isVisible={isVisible} />
	)}
	</OverlayView>

malte-wessel / bassdrum-react.tsx

Created January 5, 2020 21:40

	import {
	useRef,
	useEffect,
	FC,
	ReactElement,
	useState,
	MutableRefObject,
	} from 'react';
	import { BehaviorSubject, Observable, Subject, Subscription } from 'rxjs';
	import { distinctUntilChanged } from 'rxjs/operators';

malte-wessel / gist:d325f55d96bb396c4dc9048207e7b2e5

Last active November 14, 2019 23:33

Basedrum.js

	import { h, Ref } from 'preact';
	import { map, pluck, tap } from 'rxjs/operators';
	import {
	ComponentFunction,
	ComponentTemplate,
	createComponent
	} from './component';
	import { combine } from './util/combine';
	import { createHandler } from './util/createHandler';
	import { createRef } from './util/createRef';

malte-wessel / useIsOffline.js

Last active February 3, 2019 16:35

	import { useState, useEffect } from 'melody-hooks';

	const getIsOffline =
	typeof navigator.onLine === 'boolean'
	? () => !navigator.onLine
	: () => false;

	export const useIsOffline = () => {
	const [isOffline, setIsOffline] = useState(getIsOffline());
	useEffect(() => {

malte-wessel / useIsVisible.js

Last active February 2, 2019 20:04

	import { useState, useEffect } from 'melody-hooks';

	const canUseIntersectionObserver = window.IntersectionObserver !== undefined;

	const useIsVisibleFallback = () => true;

	export const createUseIsVisible = options => {
	if (!canUseIntersectionObserver) {
	return useIsVisibleFallback;
	}

malte-wessel / useResource.js

Last active February 2, 2019 09:28

	const initialState = {
	resourceByHash: {},
	isLoadingByHash: {},
	errorByHash: {},
	};

	const reducer = (state = initialState, action) => {
	switch (action.type) {
	case 'START': {
	const { hash } = action.payload;

malte-wessel / useEpic.js

Last active December 8, 2018 23:46

	const EPIC_END = Symbol('EPIC_END');

	const createEpicStore = (reducer, initialState, epic) => {
	let epicMiddleware = createEpicMiddleware();
	let store = createStore(
	reducer,
	initialState,
	applyMiddleware(epicMiddleware)
	);

malte-wessel / poll.js

Last active December 14, 2018 09:47

Polling with Observables / RxJs

	import { Observable } from 'rxjs/Observable';
	import { fromPromise } from 'rxjs/observable/fromPromise';
	import 'rxjs/add/operator/delay';
	import 'rxjs/add/operator/map';
	import 'rxjs/add/operator/expand';
	import 'rxjs/add/operator/takeWhile';
	import 'rxjs/add/operator/catch';

	const defaultIsComplete = () => false;
	const defaultKeepIntervalLow = () => false;

malte-wessel / markers.js

Last active August 13, 2017 08:40

	// https://github.com/salsita/geo-tree
	// Red-black tree for geo coordinates, scalar indices with z-curve
	import GeoTree from 'geo-tree';

	const gt = new GeoTree();

	// Items sorted by relevance, data holds itemId
	const items = [
	{lat: 48.85886, lng: 2.34706, data: 3849712},
	{lat: 52.50754, lng: 13.42614, data: 234910},

malte-wessel / index.js

Created June 6, 2017 20:05

requirebin sketch

	const Inferno = require('inferno');
	const InfernoServer = require('inferno-server');
	const createElement = require('inferno-create-element');

	const tree = createElement('div', { className: 'basic' },
	createElement('span', { className: 'foo' }, 'Hello World')
	);

	const root = document.getElementById('root');