Changes

Jump to: navigation, search

Webmaker/Code

36 bytes removed, 18:04, 11 October 2013
no edit summary
<center>http://farm4.staticflickr.com/3791/9689638299_10d2cd241d.jpg</center>
==Introduction==
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!
<center>http://farm7.staticflickr.com/6031/6332218821_9a8c984055.jpg</center>
==Getting Involved==
There are many ways you can get involved in building the Webmaker project. Here are a few ideas:
<center>http://farm8.staticflickr.com/7431/10121615535_b7717819b3.jpg</center>
==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:
<center>http://farm3.staticflickr.com/2886/10121810133_1c67fa1ca2.jpg</center>
==Developing Webmaker==
Webmaker is a big project, and it can take some time to get set up and contributing. The following is a guide to our workflow, technologies, repositories, etc. Please read this documentation to help you get started, and ask follow-up questions on [irc://irc.mozilla.org/webmaker irc] or the [https://mail.mozilla.org/listinfo/webmaker-dev webmaker-dev list].
===1. Set up a Webmaker Development Environment===
Before you can test or make improvements to Webmaker, you need to get it running locally. This 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.
====Dependencies====
Webmaker relies on a number of technologies and tools, which must first be installed. The following list needs to be installed and working before you can run or test Webmaker locally:
* [http://www.elasticsearch.org Elastic Search]
====Setup Option 1: Webmaker Suite====
By far the easiest way to get all of Webmaker set up and installed locally, on any platform, is to use [https://github.com/mozilla/webmaker-suite Webmaker Suite]. This is a set of automation scripts written in node.js by one of our lead developers, and is meant to provide turn-key installation by automatically downloading all the code, and setting default environment variables.
Complete instructions are available in the [https://github.com/mozilla/webmaker-suite#webmaker-suite-bootstrapinstallation-script README for Webmaker Suite] on github.
====Setup Option 2: Local Native Installation====
Installing and running Webmaker on your local OS requires you to firstsetup
====Setup Option 3: Using Vagrant (i.e., Ubuntu-based VM)====
TODO
====Setup Option 4: Heroku====
TODO
===2. Find or File a Webmaker Bug===
All the work we do is tracked in Bugzilla, and knowing how to find exiting bugs and how to file new bugs is important.
====Why Bugzilla?====
This question comes up sometimes, and it's worth understanding our reasons for choosing Bugzilla over Github Issues or some other tool--we have gone through a long process of discussing and exploring other options, and Bugzilla is what works best for our use case.
When it comes to issue trackers, there is no silver bullet, and it's impossible to please everyone. By using both Github and Bugzilla, the former for pull requests and code review, and the latter for global projecct issue tracking, we think we've struck the right balance.
====Using Bugzilla====
If you haven't used Bugzilla before, you need to create an account. A good first guide to Bugzilla for Webmaker users is available here: http://blog.webmaker.org/bugzilla. You should also watch [blog.johnath.com/2010/02/04/bugzilla-for-humans/ Bugzilla for Humans], and read [http://blog.margaretleibovic.com/post/36893756730/bugzilla-101 this post]. There are many good resources on learning Bugzilla.
* good-first-bug, student-project, mentored-bug?
===3. Understand Webmaker Code===
The Webmaker code is spread across a large number of repositories, modules, libraries, apps, and web sites. Trying to locate the code for a particular part of Webmaker can be a challenge. The following is a high level introduction to the code.
====Technical Overview of Webmaker====
Users typically begin at https://webmaker.org, and so our discussion will start there too. The webmaker.org site has four main features, including:
Each of the Webmaker tools is a complex thing in its own right. Popcorn Maker publishes embeddable web pages, which are meant to be included via iframes. Thimble allows arbitrary HTML, CSS, and JavaScript to be combined into a single page. X-Ray Goggles allows the live DOM of a web page to be altered and then re-serialized to HTML so it can be published. All of the tools use the Login server for user authentication, S3 for publishing (each app does this step on its own, and in slightly different ways), and the Make API for indexing and metadata storage. Where possible common libraries and modules have been written and are shared across the tools, apps, and servers.
====A Tour of Webmaker Code====
For the most part, Webmaker code lives in one of many repositories hosted under the [https://github.com/mozilla Mozilla Github Organization]. We also contribute to a number of upstream projects, not all of which are listed below (e.g., node.js modules or libraries we use, but don't maintain directly). There are a few exceptions, but we try to graduate repositories we rely on to the Mozilla Organization instead of hosting them under individual github accounts. For more information about any of these repositories, you are encouraged to consult each their READMEs.
* list of all our git repos, owners/peers
====Webmaker Style Guide====
Anyone working on Webmaker's front-end, or otherwise altering aspects of user-facing UI/UX should be aware of the [https://wiki.mozilla.org/Webmaker/styleguide Webmaker Style Guide]. The Style Guide provides important information about Webmaker's design philosophy and branding, typography, logos, colours, thumbnails, etc.
===4. Learn the Webmaker Development Workflow===
Every project has its own way of working, and we're no exception. This guide will help you navigate our development workflow so you can be successful as a new contributor.
Confirm
656
edits

Navigation menu