Drew Powers drwpow

Design-driven development

Good interfaces live or die by design’s role in the planning stages. Just as good architecture starts out with a plan, so do interfaces. UI is at the confluence of technology, psychology, and a pressing need to get something done. How effective that interface is at helping the user perform a task can be directly traced to the user stories (or [jobs to be done][jobs]).

Take, for example, the [Miro board for pitches][miro1]. Imagine having that call without any visuals; without any way of communicating the thing that’s going to be built. Now imagine asking our developers to go build a visual interface without the designs for it. Doesn’t make any sense, does it? The design is laden with detail and is a communication tool. Developers understand how to build interfaces, and fill in the gaps as they work.

So what does that look like at Manifold?

Keybase proof

I hereby claim:

I am drwpow on github.
I am drewpow (https://keybase.io/drewpow) on keybase.
I have a public key ASBW0lbcY_0TrofqUsUVn-R5zWiy9-OSYD9iZNZkqrf8ywo

To claim this, I am signing this object:


	module.exports = {
	moduleNameMapper: {
	'^components(.*)$': '<rootDir>/src/components/$1',
	'^data(.*)$': '<rootDir>/src/data/$1',
	'^hooks(.*)$': '<rootDir>/src/hooks/$1',
	'^lib(.*)$': '<rootDir>/src/lib/$1',
	'^pages(.*)$': '<rootDir>/src/pages/$1',
	'^types(.*)$': '<rootDir>/src/types/$1',
	'^utils(.*)$': '<rootDir>/src/utils/$1',

	import { newSpecPage } from '@stencil/core/testing';
	import { ManifoldResourceStatus } from './manifold-resource-status';
	import { ManifoldResourceStatusView } from '../manifold-resource-status-view/manifold-resource-status-view';

	describe('<manifold-resource-status>', () => {
	describe('v0 props', () => {
	it('[loading]: renders spinner icon', async () => {
	const page = await newSpecPage({
	html: '<manifold-resource-status></manifold-resource-status>',
	components: [ManifoldResourceStatus, ManifoldResourceStatusView],

	/**
	* Limit depth of any object by key name (ex: limitDepth(myObj, {foo: 3, bar: 5}) limits “foo” to 3 nested occurrences and “bar” to 5 nested occurrences)
	* @param {any} obj
	* @param {{[index:string]:number}} depth
	*/
	function limitDepth(obj, depth) {
	const count = {};

	return JSON.parse(
	JSON.stringify(obj, (name, value) => {

	[
	{
	"name": "Components",
	"lastModified": "2020-03-17T14:55:49.565484Z",
	"thumbnailUrl": "https://s3-alpha-sig.figma.com/thumbnails/f3b66051-6f8b-440b-8bbf-ca7bc60040f2?Expires=1586736000&Signature=Kqjl78gtjwCHV0N7OrX44J64zKRqw1mqu2r9qvWs8hXxyZ1oJlIamu0vfECrnWTTJ~IRAlx6P4US6dtvupWzbJsuaFaIV4kgkaJhhGAkh6jQNjhOCL8y0BXGfkEgBTR6pAzufunVTVsjBoWW36oiv053V2cv4XIw4AoTZeDa~q~usVj0rhv2Op3GSl5NpFfnaqDG88UReSPvpkNXgC2wPhyRp1GR9ItgHwNzgwz6XB32OzigKdggN9O4RVpPzf-5A~mOHMUcshYFJj20yVkgYva1KUCHt52ohKDvwNEkzWkcmniF3anxCzsawsHdojp71EjWOyGz3WJp8LiVzJuCoA__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA",
	"version": "273710128",
	"role": "viewer",
	"nodes": {
	"69:4": {
	"document": {

	// ----------
	// (G)rid
	// ----------

	$columns: 12; // change this to have something other than a 12-column grid

	.grid {
	box-sizing: border-box;
	display: grid;
	grid-gap: 1.5rem; // default gutter size

	// Example of using require.context() plugin
	// note: this will run on every `.js` file

	module.exports = () => ({
	name: 'my awesome plugin',
	async transform({
	extension, // the file extension
	contents // JS code
	}) {
	if (extension !== '.js') return; // if not JS, ignore

	const crypto = require("crypto");
	const fs = require("fs");
	const path = require("path");
	const { Storage } = require("@google-cloud/storage");
	const mkdirp = require("mkdirp");

	// settings
	const FILES_TO_GENERATE = 1000;
	const KEY_FILE = "/my/google/service/key.json";

	[
	"abdominal",
	"abrupt",
	"absolute",
	"academic",
	"acceptable",
	"acclaimed",
	"accomodating",
	"accountable",
	"accurate",