MDN Content Kits are subject-based collections of technical resources to help you host a local developer meetup or give a technical presentation at an event, conference, or workshop.
Each MDN Content Kit offers relevant, up-to-date technical information for presenters and teachers on a particular topic related to web development or web app development, such as Web APIs, useful libraries, or developer tools. Content Kits may also be focused on Mozilla products, tools, or technologies such as Firefox Developer Tools or Mozilla Research projects. Resources may include slides, demos, code samples, screencasts, video, exercises, etc.
By providing MDN Content Kits, MDN aims to grow developer engagement with Mozilla in regional communities, and increase standards-based web development globally.
Kits can be built by anyone, and we encourage people to suggest and build kits! Individuals may also contribute to existing content kits by submitting a pull request on Github. Get started with the MDN Content Kit Template on Github or read about the project on the MDN wiki.
Note: There is also a Content Kit Guide available, to give you more guidance in creating content kits.
- Valence. Valence is the public-facing name for the Firefox Developer Tools Adapters, which extend the Firefox WebIDE to allow for remotely debugging pages in Chrome or Safari from within the Firefox Developer Tools. Valence is still in development and is experimental. Valence is distributed as an add-on, which is automatically downloaded and installed by Firefox Developer Edition, though the raw .xpi file is available on archive.mozilla.org and its source code is on GitHub. The Valance Content Kit is for an experienced web developer to give a presentation to a group of experienced web developers.
- node-firefox. Node-firefox is a series of node.js modules for interacting with Firefox runtimes via the Developer Tools remote debugging protocol. The node-firefox Content Kit is for an experienced web developer to give a presentation to a group of experienced web developers.
- Working with HTML5 Video: Adding captions and subtitles. This kit contains everything you might need to present a one hour presentation on HTML5 video captions and subtitles. This includes using the
<track>element, WebVTT syntax, CSS extensions, and the difference between captions and subtitles.
- Matrix Math for the Web. This content kit is brief overview of manipulating 3d objects with matrices (a concept from linear algebra.) Matrix math is used heavily in WebGL, but web developers are more familiar with DOM manipulations. This intro divorces the explanation of matrices from the WebGL APIs by using the CSS3 matrix3d transform. It demonstrates translation, scale, and rotation transformations, as well as exploring how to compose a single matrix transform from multiple transforms through matrix multiplication.
- WebGL Model View Projection. This content kit explores how to take data within a WebGL project, and project it into the proper spaces to display it on the screen. It assumes a knowledge of basic matrix math using translation, scale, and rotation matrices. It explains the three core matrices that are typically used to represent a 3d object: the model, view and projection matrices.
- WebGL Lighting Models. Getting a model projected onto the screen using WebGL is only the first step for working in 3d. The next is applying a shading or lighting model to it. This content kit walks through the steps on how to build the classic Lambertian lighting model and the Blinn Phong lighting model.
Hints on using Content Kits before, during, and after a meetup. Note that these points are representative of a general Content Kit — not all points will necessarily apply to all kits.
- Review the content kit and all supporting materials, including relevant MDN articles.
- Download the demo project and play with it until you feel comfortable demoing it.
- Download the video, so you can play it locally if all else fails.
- Present the topic, including a live demo (or recorded, if necessary.)
- Lead the group in a discussion of the topic, or an activity with the demo project.
- Submit issues for any problems you encountered with the kit.
- Submit pull requests for any changes you made to the kit.
If you propose a new Content Kit topic, please let us know how you will use the new MDN Content Kit and whether you will provide us feedback. We are looking for proposals for topics that will be used by groups that can provide us with feedback so that we can continue to improve and grow the collection of MDN Content Kits.