Develop, Debug, Learn? A time to re-think our tooling.

A presentation at DotJS in December 2019 in Paris, France by Chris Heilmann

JavaScript, DHTML, Unobtrusive JavaScript, Flash/Air/Flex, DOM Scripting, AJAX, Comet…

Caught in the rush…
https://pxhere.com/en/photo/489670

This is not about us. This is about our tech legacy.

Filling the needs - musts
Availability Accessibility Security Mutability

Adding quality - should
Enhanced performance Extended availability Customisabilty

Creating delight - want
Making full use of the platform in a safe manner Predict usage and prevent simple mistakes

Demand overload!
Performance Security Accessibility Interoperability App-readiness Maintenance Automation Frameworks Libraries CLI/Tool customisation https://pxhere.com/en/photo/1554913

Missed opportunities
https://pxhere.com/en/photo/630291

We have amazing tech, and yet nobody is happy.

What went wrong?
https://pxhere.com/en/photo/977180

Context switching is mentally exhausting – really!

Rethinking tooling… Prevent us from doing things wrong instead of patching up what we created.

A more natural approach…
Develop Learn Debug

Holistic developer tools: Lightweight, preconfigured and open to feedback and contribution.

Two sides to our stack
Editor Browser (Developer Tools) Docs(MDN / CanIUse…)

In-context documentation and linting – learn while you code.

Editing in elements
aka.ms/elements4code

Wild idea: Open source code is a resource

But I know that an open mind, open ears and open source can fix this.

This is a good time to be open to make it easy to become a developer.

This is your world to build.
Editor Browser Docs

Merci beaucoup! Chris Heilmann
aka.ms/workwithchris @codepo8 @edgedevtools @msedgedev

Chris Heilmann
@codepo8

1 / 45

We are obsessed with coding and creating automated workflows and optimisations. And yet our final products aren’t making it easy for people to use them. Somewhere, we lost empathy for our end users and other developers. Maybe it is time to change that. Here are some ideas.

Buzz and feedback

Here’s what was said about this presentation on social media.

En attendant le début du jour 3 de #dotJS, retour en images sur les temps forts de la journée d'hier 🤗 @dotJS @ChristophePorteneuve @posva @youyuxi @devdevcharlie @IgorMinar @mourner @codepo8 pic.twitter.com/aefpKxtAxD
— gandi.net (@gandi_net) December 6, 2019
@codepo8 I came into development completely sideways! 😂 Thank you for making me feel welcome to the community with your excellent talk yesterday at @dotJS 👏 #dotjs
— Miriam Lydon (@LydonMiriam) December 6, 2019
Thank you for the talk , that was one of the best! It remind me this : After kiss : Keep It Simple Stupid, now it's time for kick me : Keep It Complicated, Keep Me Employed :)
— Thain (@ThainBBdL) December 6, 2019
And now... Famous @codepo8 talks about his many years as a web developper pic.twitter.com/hhn9DXL3rp
— Adrien LASSΞLLΞ (@AdrienLASSELLE) December 5, 2019
Now it’s time to question how we build things on the web with @codepo8 #dotJS pic.twitter.com/OXZVKrrPZk
— Christmas Carol 🎄✨ at #dotJS 🇫🇷 (@CarolSaysThings) December 5, 2019
Please welcome on stage Chris Heilmann @codepo8, author of several JavaScript books, program manager for Open Web and Browsers at @msdev. pic.twitter.com/2vDfTiwuc2
— dotJS (@dotJS) December 5, 2019
@codepo8 is quite right...@dotJS pic.twitter.com/SmetZLpxGN
— Lilian Saget-Lethias 👌 - @dotJs (@lsagetlethias) December 5, 2019
"We care more about our end users than we do about our developers, there are more talks on performance than talks on how to get into tech or how to contribute to open source" - @codepo8 #dotjs pic.twitter.com/9G3SLaQyNl
— Asim Hussain (@jawache) December 5, 2019
‘We work on faith, expecting the frameworks and tools we work with to take care of important things like security, performance and accessibility, so that we don't have to’ – @codepo8 #dotJS pic.twitter.com/7pMlaKQIic
— Hidde (@hdv) December 5, 2019
A powerful message on what matters most from @codepo8 #dotjs #dotjs19 pic.twitter.com/6glz2letin
— Ewa Gasperowicz (@devnook) December 5, 2019
I’m officially changing my LinkedIn job title to this, courtesy of @codepo8 #dotjs pic.twitter.com/aSO27yhNmN
— Stiliyana Yordanova (@stiliyana_) December 5, 2019
After hearing @codepo8 , OMG, FML I am a fullstackoverflow developer @dotJS #dotjs pic.twitter.com/1WKIEIBowP
— Marco (@thecodetrotter) December 5, 2019
@codepo8 thank you for this very interesting talk, I learned that an extension exists in VSCode to test styling 👌 this will save my life 😁
— Satch (@Sacha84) December 5, 2019
"People are worried about automation, they’re worried about their jobs so it’s time to make it easy for everyone to become a developer." @codepo8

OMG I can’t handle how true this is. Stop the gatekeeping, open and simplify all the things. @dotJS #dotjs
— Sarah Dayan @dotJS (@frontstuff_io) December 5, 2019
Really interesting talk by @codepo8 abut developers environment! A lot of cool examples... I have a lot of same fillings when I started using @wallabyjs and Quokka.js. #dotjs pic.twitter.com/UK5AaRcHo2
— Dmitry Makhnev (@DmitryMakhnev) December 5, 2019
@codepo8 #dotjs @dotJS pic.twitter.com/c07q2257id
— Eunjae Lee @ dotJS (@eunjae_lee) December 5, 2019
Chris Heillmann (@codepo8) with a very passionate talk about development practices and what matters most at @dotJS 2019, #dotjs pic.twitter.com/2fCNzOfbr7
— Matthew Cawley (@mjcwly) December 5, 2019
Awesome presentation from @codepo8 today. #dotjs
— Tudor Barbu (@motanelu) December 5, 2019
I was lucky to be in a conf where Chris gave the keynote, such an inspiration!
— Adi Polak (@AdiPolak) December 5, 2019
Al margen de la infinidad de herramientas existentes en torno a #JavaScript Christian Heilmann @codepo8 nos recuerda que debemos focalizar en lo verdaderamente importante: el editor, el navegador y la documentación. 👏🏻👏🏻#dotjs pic.twitter.com/Hayc8YyoDl
— Worköholics (@workoholics_) December 5, 2019
@codepo8 Thanks for the great presentation at the DotJS today. I was wondering, how did you get an embedded browser within VSCode? Did you use vscode-browser-preview or it was something else?
— Thibault Vieux (@melkir_thib) December 5, 2019
Le tooling pour les devs front c’est bien mais encore faut-il savoir les utiliser correctement... et oui encore 80% des devs utilisent les console.log 😭 #dotjs pic.twitter.com/HvF2QHlpyO
— Ineat Lab (@IneatLab) December 5, 2019
Live from the #dotjs ! pic.twitter.com/Wrhvr30laa
— Nicolas Pennec (@NicoPennec) December 5, 2019
Chris Heilmann's talk here at DotJS Paris is right on point 💯#dotjs #techconference #paris pic.twitter.com/XRHbRu0zng
— Satya Sampathirao (@lprajus2007) December 5, 2019

Develop, Debug, Learn? A time to re-think our tooling.

Develop, Debug, Learn? A time to re-think our tooling.

I remember when this was all fields…

And then we added labels…

JavaScript, DHTML, Unobtrusive JavaScript, Flash/Air/Flex, DOM Scripting, AJAX, Comet…

A logical order…

Then we added abstractions…

And build processes…

Alas… Learn Depend Develop Debug

Caught in the rush…

people.focus()

This is not about us. This is about our tech legacy.

Filling the needs - musts

Adding quality - should

Creating delight - want

developers === people

Demand overload!

We work on faith…

Missed opportunities

A tale of fixing a typo…

We have amazing tech, and yet nobody is happy.

The full stackoverflow developer.

What went wrong?

Context switching is mentally exhausting – really!

Rethinking tooling… Prevent us from doing things wrong instead of patching up what we created.

A more natural approach…

Holistic developer tools: Lightweight, preconfigured and open to feedback and contribution.

Two sides to our stack

This is powerful and flexible.

Problem: You can’t know everything

In-context documentation and linting – learn while you code.

Problem: Context switching is tiring

Editing in elements

Wild idea: Open source code is a resource

But I know that an open mind, open ears and open source can fix this.

Automation is happening everywhere.

This is a good time to be open to make it easy to become a developer.

This is your world to build.

Merci beaucoup! Chris Heilmann

Link for this presentation:

HTML code for embedding:

Share on social media: