Reconsideringopen web tooling

Slide 1

Reconsidering open web tooling Chris Heilmann @codepo8 – HalfStack London 2019

Slide 2

Chris Heilmann @codepo8 Walking in my shoes…

Slide 3

Construction time again Zoher Ghadyali @ZGhadyali Erica Draud @hiamerica Rachel Weil @partytimeHXLNT Brendyn Alexander @webrendyn

Slide 4

More than a party Enable web developers to be more productive as they create and maintain their web sites and apps

Slide 5

Everything counts Performance Interoperability Enable web developers to be more productive as they create and maintain their web sites and apps Security App-readiness Accessibility Maintenance/Automation

Slide 6

Policy of Truth Performance Security Accessibility Interoperability App-readiness Maintenance/Automation

Slide 7

Suffer well… Time? Lust?

Slide 8

Shake the disease…

Slide 9

A pain that I’m used to… Performance Security Accessibility Interoperability App-readiness Maintenance/Automation

Slide 10

Get the balance right DEVELOP DEBUG Learn + Improve Web and other communication channels

Slide 11

Pleasure little treasure

Slide 12

webhint.io

Slide 13

webhint.io

Slide 14

Webhint in browsers https://aks.ms/webhint4firefox https://aks.ms/webhint4chrome https://aks.ms/webhint4edge

Slide 15

Webhint in visual studio code https://aks.ms/webhint4code

Slide 16

webhint.io

Slide 17

People === People

Slide 18

Speak and Spell Speak and spell

Slide 19

told you so

Slide 20

Now, this is fun! a t n e t n o c l a t n e m i r e p x E ! ! ! d hea

Slide 21

The sweetest condition https://aks.ms/elements4code

Slide 22

Debugging inhttps://aks.ms/elements4code elements

Slide 23

Editing in elements

Slide 24

World full of nothing

Slide 25

Slide 26

Only when I lose myself

Slide 27

● root ○ ○ ○ div #1, 5 div #2, 2 div #3, 4 ■ div #4, 6 ■ div #5, 1 ■ div #6, 3

Slide 28

Slide 29

Slide 30

Black Celebration Ex pe rim en ta lp re vie w !!!

Slide 31

New life Developing From your IDE to your bundler, type system, transpilers, and linters there are many complexities when prepping code to run in the browser Browser DevTools & extensions, best practice analyzers, Fiddler, and more come together to help us find & fix issues Debugging Delivering We turn to automation & testing, CI/CD systems, cloud hosting, and analytics engines to ship & ensure quality across all browsers & platforms

Slide 32

If you want Develop Debug Code Code

webhint
Elements aka.ms/webhint4code Code + Debugger aka.ms/debugger4code aka.ms/elements4code
DevTools aka.ms/edgeinsider webhint + DevTools aka.ms/webhint4chrome Deliver webhint + DevTools aka.ms/webhint4edge webhint + DevTools aka.ms/webhint4firefox WebDriver aka.ms/msedgedriver webhint +

Coming soon! webhint Livesite Scanner aka.ms/webhint4node webhint.io