Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

It takes a village: workflows to enable code/no-code collaboration - No Code Conf 2019

18 views

Published on

Harald Kirschner, Firefox Developer Experience, Mozilla

Published in: Technology
  • Be the first to comment

  • Be the first to like this

It takes a village: workflows to enable code/no-code collaboration - No Code Conf 2019

  1. 1. Workflows to enable Code / No-Code Collaboration Harald Kirschner @digitarald @FirefoxDevTools @Mozilla
  2. 2. 12,334contributors
 747,524contributions to Firefox
 65,371code specific contributions
 1,870,928contributions across other the Mozilla contribution areas Firefox's contributor community, 20172019 Mozilla & the Rebel Alliance, An interactive network representation of Mozilla's contributor communities
  3. 3. The 50 best workplaces for innovators Fighting for Online Freedom Fast Company 08062019 “If Mozilla is going to preserve the internet for everyone, the team working on that directive needs to reflect as many perspectives as possible, cultivating a diverse, open culture of collaboration.”
  4. 4. Record & Report 1 Triage & Diagnose 2 Enable Everybody. You, Engineers, Designers, Product, QA, Automation, Customer Success, Evangelists, Community, Contractors, DevOps,
  5. 5. Visual Layout Debugging
  6. 6. Modern CSS Layouts CSS Flexbox CSS Grid
  7. 7. Variable Fonts editor
  8. 8. CSS changes are tracked
  9. 9. Export changes in many formats
  10. 10. CSS Flexbox Highlighter
  11. 11. Customize highlighter color
  12. 12. Browse Flex Children
  13. 13. Break down of Flexbox Sizing Decisions
  14. 14. CSS Grid Highlighter
  15. 15. Visualize Grid relationships
  16. 16. CSS Subgrid coming in Firefox 71 🎉
  17. 17. Collaborative Performance with Firefox Profiler
  18. 18. Origins of the Firefox Profiler
  19. 19. Firefox Profiler in Firefox’s toolbar
  20. 20. Trigger all the slow things …
  21. 21. Capture opens the recording in a new tab
  22. 22. Your familiar performance analysis, just web-based!
  23. 23. Slice the recording to the critical moment
  24. 24. And Publish to get a link for sharing
  25. 25. Share that link to collaborate …
  26. 26. Start an iterative analysis cycle
  27. 27. Share out insights or follow up by generating links
  28. 28. Side-by-side Comparison of Recordings
  29. 29. Collaborative Debugging with Firefox Replay (aka Time Travel Debugging)
  30. 30. While in your app, start a recording session
  31. 31. Page load and all interactions will be recorded
  32. 32. Save your recording session …
  33. 33. … and share it out to your team
  34. 34. Load the session to replay and analyze
  35. 35. Lets add some logs, starting with user input
  36. 36. Logs are used as cue points to jump back in time
  37. 37. Scrub over the Timeline for before/after previews
  38. 38. Logpoints let us inject on-demand logging
  39. 39. Replay analyzes each log for instant previews
  40. 40. Navigate back to when each log was hit
  41. 41. Iterate on your logs to observe state over time
  42. 42. Console-Log-Debugging FTW
  43. 43. Scrub through execution past and future
  44. 44. Layout Tools Firefox Replay Experiment in Firefox Nightly
 (macOS only) 👍 Ready in Firefox DevTools Firefox Profiler profiler.firefox.com firefox-replay.com Firefox extension in Firefox
 Feature in Firefox Nightly developer.mozilla.o Harald Kirschner harald@mozilla.com @digitarald @FirefoxDevTools Thank you! Get started: Visualize, Author & Collaborate Record, Share & Analyze Collaborative Time-Travel- EarlyAdopters Wanted

×