diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index a46d0c35b5..d3f82bb5a0 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -69,8 +69,7 @@ The best talks can be as simple as walking through how the debugger works and adding a small feature. For the audience in the room, this will likely be the first time they've seen the internals of a developer tool. -Here are two example talks [Debugging the Debugger][jlongster-talk] and [Inspector Inception][jlast-talk]. -Ofcourse, feel free to ask questions in [slack][slack] or share talk slides or videos in channel. +Ofcourse, feel free to ask questions in [slack][slack] or share talk slides or videos in channel our our `#talks` channel. ### Write a Blog Post :pencil2: @@ -235,6 +234,12 @@ From that original demo the devtools.html project has progressed quite a bit. T The debugger.html project is targeted to land in Firefox for Firefox 52. However if you're looking to work directly on the DevTools project which ships developer tools for Firefox and Firefox Developer Edition right now you can find more information on the Mozilla wiki [DevTools / Get Involved](https://wiki.mozilla.org/DevTools/GetInvolved). +### Talks, Videos, Blog posts + ++ [Talks](./docs/talks.md) ++ [Videos](./docs/videos.md) + + ## About Us debugger.html is an Open Source [Mozilla][mozilla] [Firefox][mozilla-firefox] Developer Tools project. diff --git a/assets/dictionary.txt b/assets/dictionary.txt index f34ac53c4e..12cf54862d 100644 --- a/assets/dictionary.txt +++ b/assets/dictionary.txt @@ -63,3 +63,7 @@ waitForPaused togglePaneCollapse CRM addon +UIs +Asynchronicity +args +APIs diff --git a/docs/talks.md b/docs/talks.md new file mode 100644 index 0000000000..0c15816ae4 --- /dev/null +++ b/docs/talks.md @@ -0,0 +1,34 @@ +## Talks + +### [Tomorrow's Debugger][amit-v] + +These days, Mozilla is rewriting Firefox’s devtools using a new and shiny technology stack. Anyone can join easily – the code is on Github, and it’s just a matter of 2 commands in your terminal to get a local debugger running! + +The debugger is universal – it can debug any browser, node and mobile. The feature list is innovative and aimed to be the best debugging experience for React, Angular, Ember, RxJS and more types of apps. In addition, making contribution to the debugger together with top notch developers from all around the world is an amazing experience! + +By the end of this talk you will have the tools to get into hacking on Firefox’s debugger. I will introduce architecture and process of development, and make you feel comfortable to approach a world class open source project, and become a contributor to tomorrow’s JavaScript debugger. + + +[amit-v]: https://www.youtube.com/watch?v=Rop3EgPvBMw&feature=youtu.be + + + +### [Do this, not that! Side-effect Management in UIs][yulia-side] + +Functional programming has become popular for building robust, complex UIs. Using React and Redux, for example, alleviates many of the issues commonly found in UI programming. In particular, making changes in state clear and predictable rather than the mess found in earlier solutions. However, there are some problems which continue to be painful. Asynchronicity is one such example, since changes to state which are asynchronous are difficult to predict and reason about. In the Firefox debugger, we have explored two options within the react ecosystem for dealing with this: thunk args and sagas. They take two different approaches to the problem of communicating with an async resource and updating the state. Using a recent refactoring of debugger breakpoints as a case study, we will explore the strengths and weaknesses of each. In the process, we will clarify the rationale behind the patterns and show how we came to our chosen solution. While the talk will be focused on the issue from a front-end/UI perspective, it might prove an interesting inspiration for similar problems in other places! + +[yulia-side]: https://www.youtube.com/watch?v=gE96v-O5cjo + + + +### [Debugging Your Debugger][jlongster-talk] + +[jlast-talk]:https://www.youtube.com/watch?v=O_xViL2TGrU + +### [Enter Inspector Inception: Let's See How Browser Developer Tools Work!][jlast-talk] + + As developers, we use browser developer tools every day, but how often do we stop and think about how they work? + +The secret is that browser developer tools are built with HTML, CSS, and JS and that any web developer can contribute to them. In this talk, we'll enter inspector inception and see how developer tools work from the inside out. In the process, we'll get a better understanding of how the tools we use every day work. + +[jlongster-talk]:https://www.youtube.com/watch?v=gvVpSezT5_M diff --git a/docs/videos.md b/docs/videos.md index 1a56da557b..452da98d8b 100644 --- a/docs/videos.md +++ b/docs/videos.md @@ -35,3 +35,26 @@ This [video](https://youtu.be/NoMryxkNPk0) adds additional functionality to even [dev-server]:https://github.com/devtools-html/devtools-core/blob/master/packages/devtools-launchpad/README.md#dev-server [first-activity]:./debugging-the-debugger.md [event-listeners]:http://github.com/devtools-html/debugger.html/issues/1232 + +### Testing the Debugger + +The Debugger is a complex React + Redux app used by millions of crazy people called developers all over the world. + +This [video][testing] covers fixing a small bug and adding a new integration test. It reviews some of the techniques we use to make sure the debugger works the way we expect it to. + +Topics include: + +* writing an integration test that acts like a user and interacts w/ the dom +* writing assertions and actions that take advantage of redux's Action and State APIs + +[testing]: https://www.youtube.com/watch?v=5K9Sx5529JE&t=547s + + + +### How the Firefox Debugger uses Babel to Know What's Up? + +In this [video][babel], we'll look at how the Firefox Debugger uses Babel to parse the code that's run in the browser and know what's going on. + +[babel]: https://www.youtube.com/watch?v=9z3jf69MVsU&t=17s + +