Webmaker/Code

NOTE: this page is under active development, and will be changing rapidly over the coming days. Apologies for any chaos you discover at the moment.

Introduction

Warning: This section is woefully out of date and will be updated to reflect reality soon. For now, to learn more about the future of Webmaker, see the blog post What's Next For Webmaker Tools.

Webmaker is about empowering everyone to become makers of the web instead of just users. It's a mix of web tools, teaching material, and a social platform for teaching, learning, and sharing what you make. And, it's a lot of fun to use. It's even more fun to develop!

Webmaker is built using modern web technologies including Node.js, HTML5, CSS, and JavaScript (lots of JavaScript!)--many of the same technologies Webmaker teaches. If you know these technologies, or are interested in learning them more deeply, you might be interested in helping us develop Webmaker.

Getting Involved

There are many ways you can get involved in building the Webmaker project. Here are a few ideas:

• If you know JavaScript, you could help fix bugs or add features to our servers (e.g., the MakeAPI), JS libraries and modules (e.g., popcorn.js or our localization tools), or web tools.
• If you know HTML/CSS, you could work on our web sites and web tools, for example webmaker.org, Popcorn Maker, Thimble, etc.
• If you know MySQL/MongoDB/ElasticSearch and are interested in databases and data, you could help us work on the MakeAPI or Login server.
• If you're interested in Bug Triage, you could help us keep the Webmaker Product on bugzilla neat and tidy. Head over to the triage article to find out how we try to keep that list small already.
• If you know how to speak more than one language, you could work on localization and help us maintain our localization code.
• If you know how to work on Firefox/FirefoxOS or another Mozilla product/project, you could help us find ways to integrate Webmaker, for example building browser addons.
• If you know about automation/scripting/packaging/deployment, you could work with developer operations group to help deploy and manage Webmaker.
• If you're good at finding issues, confirming bugs, or otherwise breaking things, you could help us test Webmaker code on our staging and production servers.
• If you know how to do UI/UX work, you could join our design and front-end group to design and implement new user-facing aspects of our sites and tools.

These are just a few ideas to get you thinking--there's many ways that someone who wants to work on Webmaker can get involved. If you're passionate and interested in getting started, let us know and we'll try to find something that fits your interests and skills.

Communication

In order to get started on Webmaker code, you need to get involved with our community. Here are some ways to introduce yourself and get help:

• IRC: The #webmaker channel on moznet is our primary dev channel. If you're new to irc, please see the docs on learning how to use it. NOTE: our development team is spread across the world, with primary activity happening in Toronto, Vancouver, London, Berlin, New York, and San Francisco. If you're in a timezone that doesn't overlap with these, the mailing lists might be a better way to reach out.
• Mailing Lists: There are two primary lists: webmaker@lists.mozilla.org for general Webmaker communication; and webmaker-dev@mozilla.org for developer communication.
• Bug Tracker: We use Mozilla's Bugzilla to track our work, see the Webmaker Product in Bugzilla.
• Blog: Updates about the development of the Webmaker Product go on our Webmaker blog.

Developing Webmaker

Webmaker is a big project, and it can take some time to get set up and contributing. Please read this documentation to help you get started, and ask follow-up questions on irc or the webmaker-dev list.

Getting a working Webmaker development environment

Webmaker is composed of a number of apps that work together. You'll need to get it running locally, which involves setting up your OS to host the Webmaker servers and apps, and installing various development tools you'll need. We strongly recommend a Unix-like OS, such as Linux or OS X, but it is also possible to use Windows.

Information you'll need to get set up can be found in our Development Environment Guide.

Opening a Bugzilla account, and understanding our bug-tracking system

All the Webmaker work that has been done, and needs to be done, is tracked in an instance of Bugzilla located at http://bugzilla.mozilla.org. This includes patches, feature updates, error & security fixes and documentation updates. Ideally, it should include anything that can be thought of as a Webmaker-related task.

Understanding how to find bugs to work on, how to file bugs, and how to use Bugzilla to record your progress is vital (and required) for contributing. For all the information you need to smoothly transition into this mindset, make sure to read through our Bug Guide.

Understand Webmaker Code

Webmaker, appearing to be a single, complex web application, is actually made of a number of smaller apps that work together to perform those complex functions. To really dig into the work that we're doing together, you'll need a grasp of how our technology works at a high-level.

Nervous? Don't be! Get a simple explanation of how Webmaker works in our Technology Guide.

The production infrastructure for Webmaker apps in the ecosystem gives you an a visualization of the apps involved in the Webmaker suite.

Learn the Webmaker Development Workflow

Webmaker Development follows a set of procedures that are designed to make this kind of asynchronous, often long-distance, collaboration easier while maintaining quality in our work.

The entire process is well documented in our Workflow Guide

Testing and Google Analytics

• Google Analytics Event Tracking guide
• A/B Testing with Optimizely