drwpow

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";

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);