MDN is easy!
A guide to contributing to the Mozilla Developer Network!

Chris Mills, Senior Tech Writer, MDN
Monday, 14 October 13
By the end, you will have
1. An MDN account
2. An edit to an MDN page in your name.
MDN icebreaker!

Monday, 14 October 13
Why would anyone
contribute to MDN?
Monday, 14 October 13
For everyone!
• Yourself
• Your project
• Mozillians
• The whole world

Monday, 14 October 13
You can
• Shine
• Get sex, drugs and rock ‘n’ roll
• Get stickers, t-shirts and recognition
• Help the community get the docs they need

Monday, 14 October 13
Your project can
• Get internal and external visibility
• Get promotion (in combination with Hacks blog,
evangelist talks, etc.)
• Get more users and contributors

Monday, 14 October 13
Mozillians, the whole world
• Gets awesome docs to help them do their work
• Is able to contribute back
• Will get to know you and love you

Monday, 14 October 13
It’s a great platform
• Kuma — based on Django and Node.js
• It’s a Wiki, on steroids
• Our development team are *actually*
ninjas.

Monday, 14 October 13
How to contribute?
What do you want to get out of this session?

Monday, 14 October 13
You just have to log in...
• This is mainly just to cut down on some spam
• And to share recognition, and blame!
• We use Persona

Monday, 14 October 13
Once logged in

• You can edit pages
• Create new pages

Monday, 14 October 13
You should also
• Report bugs at bugzilla.mozilla.org (project: Mozilla

Developer Network :: General)
• Get help on lists.mozilla.org/listinfo/dev-mdc
• Get help on IRC (wiki.mozilla.org/IRC, room #devmo)

Monday, 14 October 13
Editing

Monday, 14 October 13
Don’t be afraid
• Hit that edit button
• And kick some ass
• At the very worst, we can revert changes
• But we’d rather you edit stuff than send us bugs!

Monday, 14 October 13
Edit toolbar

developer.mozilla.org/en-US/docs/Project:MDN/
Contributing/Editor_guide
Monday, 14 October 13
Edit bar

Monday, 14 October 13
Footer controls

Monday, 14 October 13
Macros
• Written in KumaScript, which is pretty much just JS
• https://developer.mozilla.org/en-US/docs/
Project:MDN/Contributing/Custom_macros
• For example, {{HTMLElement("div")}} is found at
developer.mozilla.org/en-US/docs/
Template:HTMLElement

Monday, 14 October 13
How to contribute

Monday, 14 October 13
Big or small
• It’s all really useful!
• Some MDN contributors literally just make a handful
of small fixes each day, or week
• But it improves the site quality enormously

Monday, 14 October 13
Small contributions
• Typos
• Correction of technical errors
• Title fixes
• Adding tags
• Code consistency fixes
• Code snippets
Monday, 14 October 13
Small contributions
• Improving descriptions and examples
• Proof reading, tech review
• Macro fixes
• Other minutiae
• Feedback!

Monday, 14 October 13
Large contributions
• Writing new articles
• Tech editing/copy editing
• Translations
• Writing demos
• Kuma development
• Writing tools
Monday, 14 October 13
Create a new article

Monday, 14 October 13
Write it...
• Then request an edit

• You can also ask on the mailing list or in IRC

Monday, 14 October 13
Shout about it!
• Spread the word on Twitter, Google+, etc.
• Get developers interested in using the feature/tool/
whatever it is, and contributing to the docs

Monday, 14 October 13
Tech/copy editing
• Can be a big task, depending on the quality or length
of writing
• Make most fixes yourself
• For uncertainties, contact the main contributor
• Ask on IRC/mail
• File a bug

Monday, 14 October 13
Translations

• Really useful contribution
• Keep MDN internationalized!

Monday, 14 October 13
Find a page to translate

Monday, 14 October 13
Choose a language

Monday, 14 October 13
Enter your translation

Monday, 14 October 13
Collaborate!
• Start a localization group
• Or join an existing one
• developer.mozilla.org/en-US/docs/Project:MDN/
Localizing/Localization_projects

Monday, 14 October 13
Write demos
• Some people don’t like writing prose
• But excel at writing code
• Good demos are a major plus

Monday, 14 October 13
How to add demos
• Put them on Github
• Directly, or via JSBin, Codepen.io, etc.
• Link to them!

Monday, 14 October 13
Live samples
• Smaller samples can be put directly on the Wiki page
• Then assembled into a running demo
• developer.mozilla.org/en-US/docs/Project:MDN/
Contributing/Editor_guide/
#Using_the_live_sample_system

Monday, 14 October 13
Write tools
• Why not write a demo that does something useful?
• For example, the box-shadow generator
• developer.mozilla.org/en-US/docs/Web/CSS/Tools/
Box-shadow_generator

Monday, 14 October 13
Write macros
• A macro is basically just a special kind of page
• developer.mozilla.org/en-US/docs/

Template:HTMLElement
• In this page you enter KumaScript, which is basically
JS with some extra APIs

Monday, 14 October 13
Write macros
• This JS is executed server-side
• So you can’t do client-side type stuff with it
• But you can automate a lot of work!
• https://developer.mozilla.org/en-US/docs/

Project:MDN/Contributing/Custom_macros

Monday, 14 October 13
Kuma development
• If you are a ninja (or at least a samurai, or pirate)
• You might want to help develop the system
• It’s on github
• github.com/mozilla/kuma
• developer.mozilla.org/en-US/docs/Project:MDN/
Kuma/Contributing

Monday, 14 October 13
It’s a big community
out there
Monday, 14 October 13
CommUNITY
• Don’t feel you have to do it alone
• Find others who share your immediate interests
• And collaborate
• Ask for help on IRC, mail

Monday, 14 October 13
Repurposing content

Monday, 14 October 13
Reuse!
• Why not repurpose that blog post?
• Article?
• Code example?
• Quick-fire tip?
• Or Hacks post?

Monday, 14 October 13
Thanks for listening!
cmills@mozilla.com || @chrisdavidmills

Chris Mills, Senior Tech Writer, MDN
Monday, 14 October 13
Notes for session presenters
When running a workshop on MDN editing:

• Start with a presentation, including what you need to
know to become an MDN contributor (slides 9-35?)
• Make sure everyone can sign in, and find a page for
them to edit.

Monday, 14 October 13
Notes for session presenters
When running a workshop on MDN editing:

• Bookmark several pages containing simple-to-fix

problems.
• Let people choose one of these to fix (unless they
want to find something of their own).

Monday, 14 October 13

MDN is easy!

  • 1.
    MDN is easy! Aguide to contributing to the Mozilla Developer Network! Chris Mills, Senior Tech Writer, MDN Monday, 14 October 13
  • 2.
    By the end,you will have 1. An MDN account 2. An edit to an MDN page in your name. MDN icebreaker! Monday, 14 October 13
  • 3.
    Why would anyone contributeto MDN? Monday, 14 October 13
  • 4.
    For everyone! • Yourself •Your project • Mozillians • The whole world Monday, 14 October 13
  • 5.
    You can • Shine •Get sex, drugs and rock ‘n’ roll • Get stickers, t-shirts and recognition • Help the community get the docs they need Monday, 14 October 13
  • 6.
    Your project can •Get internal and external visibility • Get promotion (in combination with Hacks blog, evangelist talks, etc.) • Get more users and contributors Monday, 14 October 13
  • 7.
    Mozillians, the wholeworld • Gets awesome docs to help them do their work • Is able to contribute back • Will get to know you and love you Monday, 14 October 13
  • 8.
    It’s a greatplatform • Kuma — based on Django and Node.js • It’s a Wiki, on steroids • Our development team are *actually* ninjas. Monday, 14 October 13
  • 9.
    How to contribute? Whatdo you want to get out of this session? Monday, 14 October 13
  • 10.
    You just haveto log in... • This is mainly just to cut down on some spam • And to share recognition, and blame! • We use Persona Monday, 14 October 13
  • 11.
    Once logged in •You can edit pages • Create new pages Monday, 14 October 13
  • 12.
    You should also •Report bugs at bugzilla.mozilla.org (project: Mozilla Developer Network :: General) • Get help on lists.mozilla.org/listinfo/dev-mdc • Get help on IRC (wiki.mozilla.org/IRC, room #devmo) Monday, 14 October 13
  • 13.
  • 14.
    Don’t be afraid •Hit that edit button • And kick some ass • At the very worst, we can revert changes • But we’d rather you edit stuff than send us bugs! Monday, 14 October 13
  • 15.
  • 16.
  • 17.
  • 18.
    Macros • Written inKumaScript, which is pretty much just JS • https://developer.mozilla.org/en-US/docs/ Project:MDN/Contributing/Custom_macros • For example, {{HTMLElement("div")}} is found at developer.mozilla.org/en-US/docs/ Template:HTMLElement Monday, 14 October 13
  • 19.
  • 20.
    Big or small •It’s all really useful! • Some MDN contributors literally just make a handful of small fixes each day, or week • But it improves the site quality enormously Monday, 14 October 13
  • 21.
    Small contributions • Typos •Correction of technical errors • Title fixes • Adding tags • Code consistency fixes • Code snippets Monday, 14 October 13
  • 22.
    Small contributions • Improvingdescriptions and examples • Proof reading, tech review • Macro fixes • Other minutiae • Feedback! Monday, 14 October 13
  • 23.
    Large contributions • Writingnew articles • Tech editing/copy editing • Translations • Writing demos • Kuma development • Writing tools Monday, 14 October 13
  • 24.
    Create a newarticle Monday, 14 October 13
  • 25.
    Write it... • Thenrequest an edit • You can also ask on the mailing list or in IRC Monday, 14 October 13
  • 26.
    Shout about it! •Spread the word on Twitter, Google+, etc. • Get developers interested in using the feature/tool/ whatever it is, and contributing to the docs Monday, 14 October 13
  • 27.
    Tech/copy editing • Canbe a big task, depending on the quality or length of writing • Make most fixes yourself • For uncertainties, contact the main contributor • Ask on IRC/mail • File a bug Monday, 14 October 13
  • 28.
    Translations • Really usefulcontribution • Keep MDN internationalized! Monday, 14 October 13
  • 29.
    Find a pageto translate Monday, 14 October 13
  • 30.
  • 31.
  • 32.
    Collaborate! • Start alocalization group • Or join an existing one • developer.mozilla.org/en-US/docs/Project:MDN/ Localizing/Localization_projects Monday, 14 October 13
  • 33.
    Write demos • Somepeople don’t like writing prose • But excel at writing code • Good demos are a major plus Monday, 14 October 13
  • 34.
    How to adddemos • Put them on Github • Directly, or via JSBin, Codepen.io, etc. • Link to them! Monday, 14 October 13
  • 35.
    Live samples • Smallersamples can be put directly on the Wiki page • Then assembled into a running demo • developer.mozilla.org/en-US/docs/Project:MDN/ Contributing/Editor_guide/ #Using_the_live_sample_system Monday, 14 October 13
  • 36.
    Write tools • Whynot write a demo that does something useful? • For example, the box-shadow generator • developer.mozilla.org/en-US/docs/Web/CSS/Tools/ Box-shadow_generator Monday, 14 October 13
  • 37.
    Write macros • Amacro is basically just a special kind of page • developer.mozilla.org/en-US/docs/ Template:HTMLElement • In this page you enter KumaScript, which is basically JS with some extra APIs Monday, 14 October 13
  • 38.
    Write macros • ThisJS is executed server-side • So you can’t do client-side type stuff with it • But you can automate a lot of work! • https://developer.mozilla.org/en-US/docs/ Project:MDN/Contributing/Custom_macros Monday, 14 October 13
  • 39.
    Kuma development • Ifyou are a ninja (or at least a samurai, or pirate) • You might want to help develop the system • It’s on github • github.com/mozilla/kuma • developer.mozilla.org/en-US/docs/Project:MDN/ Kuma/Contributing Monday, 14 October 13
  • 40.
    It’s a bigcommunity out there Monday, 14 October 13
  • 41.
    CommUNITY • Don’t feelyou have to do it alone • Find others who share your immediate interests • And collaborate • Ask for help on IRC, mail Monday, 14 October 13
  • 42.
  • 43.
    Reuse! • Why notrepurpose that blog post? • Article? • Code example? • Quick-fire tip? • Or Hacks post? Monday, 14 October 13
  • 44.
    Thanks for listening! cmills@mozilla.com|| @chrisdavidmills Chris Mills, Senior Tech Writer, MDN Monday, 14 October 13
  • 45.
    Notes for sessionpresenters When running a workshop on MDN editing: • Start with a presentation, including what you need to know to become an MDN contributor (slides 9-35?) • Make sure everyone can sign in, and find a page for them to edit. Monday, 14 October 13
  • 46.
    Notes for sessionpresenters When running a workshop on MDN editing: • Bookmark several pages containing simple-to-fix problems. • Let people choose one of these to fix (unless they want to find something of their own). Monday, 14 October 13