Fast Frontend Feedback

fe-summit 🏔 2019



Cameron Yick (Team Mango / Dataviz)

The Problem

How long does it take to see whether your code changes work?

a) Less than 1 sec

b) 1 - 10 sec

c) 10+ sec

If your word editor had this lag, would that change what/how you write?

 - Bret Victor (@worrydream)

Interface designer / electrical engineer


The Dream: Livecode

From Bret Victor's "Inventing on Principle"


  • Hot Module Reloading (Hotdog)
  • Styleguideist
  • Commit Hooks
    • Eslint, tslint
  • Typing (Proptypes / Typescript)
  • REPLs


shoutout to the people who set up + maintain this tooling!


  • Link to existing resources


Add superpowers to Devtools

  • Everything you already like in Chrome Devtools
    • Breakpoints
    • Data-value-on-hover
    • Step in/over/out
    • Conditional breakpoints
  • VSCode Benefits
    • Familiar Environment (Shortcuts, search)
    • Avoid turning your head / switching windows
    • Logpoints

Debugger Demo

Make testing fun again!



1. Run unit tests without you thinking about it

2. Inline overlay shows which tests failed

3. Incorrect output is displayed inline






Testing Demo

I'm in! Where should I start?

1. CTRL + SHIFT + P > Install Extensions

2. Search {Chrome Debugger|Jest}, install first result

3. Add some config (Frontend Development > VSCode wiki)

Future: Seeking Contributions 

  • Run minimal set of Jest tests rather than everything
  • Runnable documentation (more styleguideist / storybook)
  • Share more #FFF tools in the channel

Pursue faster feedback via tools



(Fast Frontend Feedback)


Cameron Yick / Dataviz

GH / Twitter: @hydrosquall

Frontend Summit

By Cameron Yick

Frontend Summit

A lightning talk about why and how to use 2 recommended VSCode extensions for frontend javascript development

  • 797