Robert Penner robertpenner

Principal UX Engineer @microsoft | Easing functions creator | Formerly @adobe, @disney, @workco, @vice

robertpenner / gist:967c784a4062414032a364aeef38ac70

Created July 7, 2025 03:58 — forked from stereokai/gist:36dc0095b9d24ce93b045e2ddc60d7a0

CSS rounded corners with gradient border

	.rounded-corners-gradient-borders {
	width: 300px;
	height: 80px;
	border: double 4px transparent;
	border-radius: 80px;
	background-image: linear-gradient(white, white), radial-gradient(circle at top left, #f00,#3020ff);
	background-origin: border-box;
	background-clip: padding-box, border-box;
	}

robertpenner / .block

Created June 6, 2021 18:42 — forked from d3noob/.block

Basic Directional Force Layout Diagram

license: mit

robertpenner / XStateViz.tsx

Created May 31, 2021 01:57 — forked from drbr/XStateViz.tsx

XState Visualizer (XState Inspector) as a React component with a standalone state machine

	import { useEffect, useState } from 'react';
	import { StateMachine } from 'xstate';
	import { useMachine } from '@xstate/react';
	import { inspect } from '@xstate/inspect';

	let iFrameElement: HTMLIFrameElement \| null = null;

	function createIFrame() {
	if (!iFrameElement) {
	const iframe = document.createElement('iframe');

robertpenner / *valoo.md

Created July 7, 2018 02:55 — forked from developit/*valoo.md

🐻 Valoo: just the bare necessities of state management. 150b / 120b. https://npm.im/valoo

🐻 valoo

just the bare necessities of state management.

Hotlink it from https://unpkg.com/valoo.

robertpenner / functional-utils.js

Created March 15, 2017 02:01 — forked from bendc/functional-utils.js

A set of pure ES2015 functions aimed to make functional JavaScript more idiomatic.

	// array utils
	// =================================================================================================

	const combine = (...arrays) => [].concat(...arrays);

	const compact = arr => arr.filter(Boolean);

	const contains = (() => Array.prototype.includes
	? (arr, value) => arr.includes(value)
	: (arr, value) => arr.some(el => el === value)

robertpenner / nonsense.ts

Created February 6, 2017 09:14 — forked from basarat/nonsense.ts

	[] + []; // JavaScript will give you "" (which makes little sense), TypeScript will error

	//
	// other things that are nonsensical in JavaScript
	// - don't give a runtime error (making debugging hard)
	// - but TypeScript will give a compile time error (making debugging unnecessary)
	//
	{} + []; // JS : 0, TS Error
	[] + {}; // JS : "[object Object]", TS Error
	{} + {}; // JS : NaN, TS Error

robertpenner / config.js

Created April 12, 2016 16:23 — forked from johnlindquist/config.js

	SystemJS.config({
	transpiler: "typescript",
	typescriptOptions: {
	"experimentalDecorators": true,
	"emitDecoratorMetadata": true
	},
	map: {
	"rxjs": "https://npmcdn.com/rxjs",
	"angular2": "https://npmcdn.com/angular2",
	"@ngrx": "https://npmcdn.com/@ngrx",

robertpenner / index.html

Created April 4, 2016 18:24 — forked from johnlindquist/index.html

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>RxJSCraft</title>
	<script src="https://npmcdn.com/[email protected]/dist/system.js"></script>
	<script src="https://npmcdn.com/[email protected]/lib/typescript.js"></script>


	</head>

robertpenner / index.html

Created March 30, 2016 16:29 — forked from johnlindquist/index.html

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>RxJSCraft</title>
	<script src="https://npmcdn.com/[email protected]/dist/system.js"></script>
	<script src="https://npmcdn.com/[email protected]/lib/typescript.js"></script>
	<script src="https://npmcdn.com/[email protected]/bundles/Rx.js"></script>

	<style>

robertpenner / config.js

Created March 17, 2016 04:32 — forked from johnlindquist/config.js

angular 2 with sagas and reducers

	System.config({
	//use typescript for compilation
	transpiler: 'typescript',
	//typescript compiler options
	typescriptOptions: {
	emitDecoratorMetadata: true
	},
	//map tells the System loader where to look for things
	map: {
	app: "./src",