drwpow

// 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

drwpow

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:

drwpow

// ----------
// (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

drwpow

[
  {
    "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": {

drwpow

/**
 * 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) => {

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?

drwpow

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],

drwpow

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',

drwpow

const canvasSketch = require('canvas-sketch');
const colors = require('nice-color-palettes');
const random = require('canvas-sketch-util/random');
const { lerp } = require('canvas-sketch-util/math');

const settings = {
  dimensions: [2048, 2048],
};

const palette = random.pick(colors);

drwpow

It should be noted that each creator was not the sole contributor. But either presented the idea, or became the outspoken advocate for it.

Name	Creator(s)	Year	Notes
React	Jordan Walke (Facebook)	2013	Open-sourced in 2013 after years of internal use
React: CSS in JS	Christopher “vjeaux” Chedeau	2014	The slide that started a war
CSS Modules	Sokra?	2015	Premiered as a [webpack demo][css-webpack]
PostCSS CSS Modules	Alexander Madyankin	2015
Aphrodite	Emily Eisenberg	2015