[ Attributes ]

of great developer tools

Strategies

vs

Tactics


We'll be talkin mostly strategy

Research

#1 Priority

Consider Personas

Each developer will be in a different phase with their project and this phase will effect what they want/need access to.

Gotta talk to folks

Not only can they clear any suspicions, doubts or guesswork, they often have some of the best ideas.

Gather Data

Friction logs, bugs, needs, impossibles, dreams and hopes.

Capture that gold.

You are a friction destroyer

Map and filter the data into prioritized user stories, and make their dreams come true.

[insert Napoleon Dynamite gif]

You are a blackbox illuminator

Reveal that which they could previous not see. Remove the curiosity and wonder, replace it with confidence and direction.

I like that good DX can be born out of clarity in the uncomfortable bits.

Where are the rough edges? Tell me, and you earn my trust. Hide it, and you lose it.

DX Ingredients

9 Feature Categories
  1. Primitives (low level)
  2. Abstractions (high level)
  3. Accessibility (enablement)
  4. Extensibility (composition)
  5. Emulations (empathy)
  6. Quick Scopes (time saver)
  7. Crawls (command that CPU)
  8. Fast paths (debug highways)
  9. Visualizations (reduce load)

Primitives

Goal: safe low level access

Teams with opinions or tight requirements need ways to build up their own solutions.

Examples: keys, util functions,
design system leaf components, Tweet from @DavidKPiano

Abstractions

Goal: safe high level access

Make getting started easy by making decisions for folks and providing presets.

Examples: create-react-app, greensock.js,
transition.style, etc

Accessibility

Goal: access for everyone

Push out no one, create an inviting space for everyone, of all abilities, of all phases and capabilities.

Examples: noobs, pros, keyboard navigators,
screen readers, mouse users, content / tool legibility,
embedded tips, screen size, etc

Extensibility

Goal: composition access

Let them teach the dog a new trick if they want, middle ground between high level abstractions and low level primitives.

Examples: extensions, life cycle hooks,
configuration, pattern application, forking

Emulations

Goal: easy empathy access

Not only do we need to recreate state to replay bugs, we need to recreate environments to replay the experience.

Examples: env vars, persona access,
network conditions, user settings, E2E test configs, etc

Quick Scopes

Goal: save them time

Surface common or difficult to filter / discover information. Computers are perfect for discovery and presentation of information.

Examples: hover on a variable during a frozen breakpoint,
watch expressions, hover over elements in the Elements panel

Crawls

Goal: command that CPU

Do the hard work for them. Crawl data structures and map/filter the good parts.

Examples: DevTools Elements panel, JSON pretty printers,
recursion visualizations, Network panel, etc

Fast paths

Goal: debug highways

Reduce feedback loops. Find common workflows and optimize them, remove barriers, create shortcuts.

Examples: remote device inspect, keyboard shortcuts,
new tools built around a workflow, etc

Visualizations

Goal: reduce cognitive load

A developers brain can only hold so much virtual machinery; draw it for them, help them align by visualizing what otherwise can't be seen.

Examples: network waterfall, infra charts, state machines,
data visualizations, breakpoint state of the machine, etc

Summary

  • Make the computer do the hard work
  • Provide access to unreachables
  • Shorten feedback loops
  • Signal boost, reduce noise

Welcome All

For best success, enable every developer, regardless of their product phase, level of experience or preferred method of computer interfacing

Thanks Y'all

you're ready to go