Bring on the design tools

Slide 1

Bring on the design tools! Chris Mills, Mozilla

Slide 2

Slide 3

Who am I? ‣ Content lead/team manager for ‣ ‣ ‣ ‣ MDN Web Docs at Mozilla Open web evangelist/hippy Lover of HTML/CSS/JS Accessibility whinge bag Heavy metal drummer Mozilla

Slide 4

Historic debugging

Slide 5

Not quite that far back… !

Slide 6

Debugging was hard ‣ In the early days of the web Mozilla

Slide 7

Slide 8

The “5000 alerts” method Mozilla

Slide 9

Older tools like Venkman Mozilla

Slide 10

But then… Mozilla

Slide 11

Firebug was awesome ‣ Beyond JS debugging, to DOM/ CSS inspection, network monitoring, etc. ‣ Community power ‣ A lot of users right up to the end Mozilla

Slide 12

(Native) Browser DevTools ‣ Have become really slick ‣ Full-featured ‣ Powerful Mozilla

Slide 13

What about design tools?

Slide 14

Design on the web… ‣ …has become exciting again! Mozilla

Slide 15

Slide 16

Slide 17

Slide 18

Design on the web… ‣ ….has become exciting again! Mozilla

Slide 19

Slide 20

Slide 21

Slide 22

Slide 23

Awesome features need awesome tools ‣ DevTools traditionally have focused on development/coding ‣ Designers need freedom to tinker and express ‣ Tools that seem comfortable and familiar Mozilla

Slide 24

Slide 25

Our “golden triangle” Mozilla

Slide 26

BRING ON the design tools!!!

Slide 27

Nomenclature ‣ Highlighters ‣ Inspectors ‣ Editors Mozilla

Slide 28

Grid inspector ‣ Recently added RTL support ‣ Subgrid support in the near future Mozilla

Slide 29

Animation inspector ‣ Related: timing function editor Mozilla

Slide 30

Font editor ‣ Variable font support new in Fx63 dev edition Mozilla

Slide 31

Shape path editor Mozilla

Slide 32

Filter editor Mozilla

Slide 33

3-pane mode Mozilla

Slide 34

Accessibility inspector Mozilla

Slide 35

Flexbox inspector ‣ Coming around Firefox 64 ‣ Flexbox highlighter already available Mozilla

Slide 36

Honorable mentions ‣ ‣ ‣ ‣ Color picker Drop shadow editors in Chrome Gradient editor in Safari Firefox transform highlighter Mozilla

Slide 37

Mobile debugging ‣ Better remote debugging, e.g. integrated into editors like VSCode ‣ All-new responsive design mode ‣ Emulation for throttling and DPR Mozilla

Slide 38

Coping with loss (╯°□°)╯︵ ┻━┻

Slide 39

Tinkering is good ‣ DevTools are great for fine-tuning ‣ You can then save your styles, etc. out. ‣ But what about losing them, if the browser crashes, or whatever? Mozilla

Slide 40

We have tools to help ‣ Chrome has local overrides ‣ Firefox has track changes coming soon Mozilla

Slide 41

Finished! cmills@mozilla.com @chrisdavidmills Chris Mills, Mozilla

Slide 42

Big thanks to… ‣ Jen Simmons for all the awesome demos ‣ Martin Balfanz and Razvan Caliman for reviews and inspiration Mozilla