Cameron Yick
data vis engineer @datadoghq. currently into visual exaptation | creative (en)coding | metalearning | swimming. he/him
#FFF⚡️
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
Dynamicland
The Dream: Livecode
From Bret Victor's "Inventing on Principle"
Yesterday
- Hot Module Reloading (Hotdog)
- Styleguideist
- Commit Hooks
- Eslint, tslint
- Typing (Proptypes / Typescript)
- REPLs
shoutout to the people who set up + maintain this tooling!
TODO
- Link to existing resources
Today
- Visual Studio Code Extensions
- Inline Debugger
- VSCode-Jest Test Runner
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
#FFF⚡️
(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
