MDN Development &
Web Documentation

Jay Patel
jay@mozilla.com
@jaybhai


Jean-Yves Perrier
@teoli2003
Agenda
         What will we cover?

•   Branding
•   Evolution of MDN
•   Kuma Project
•   Developer Engagement Platform
•   Development
•   Documentation
The many names for
  developer.mozilla.org



DevMo    #devmo IRC channel
         (historical short name for domain)

         MDN Documentation Center
MDC      (docs section of MDN)


MDN      Mozilla Developer Network
         (website, community, campaigns, etc.)
Evolution of
  MDN
Goals for the
               Kuma Project

•   Build platform for developer engagement
•   Leverage Django code from SUMO (Kitsune)
•   Improve documentation and editorial
    processes
•   Fix the l10n experience for localizers
•   Add social features and collaboration tools
•   Grow new areas for demos, events, learning,
    and community
Platform for
Developer Engagement
Agile process for
                Kuma Development
2 week “sprints”
      •   MDN dev team includes 3 dev + 1 qa + 1 doc + 1 pm
      •   Weekly bug triage and planning meeting
      •   20-25 “points” per sprint
      •   10 days dev + 5 days QA

Bugs / Backlog in Bugzilla
      •   Product: Mozilla Developer Network
      •   Component: Website

Feedback / Feature Requests with UserVoice
      •   http://mdn.uservoice.com/forums/51389-mdn-website-feedback-
          http-developer-mozilla-org

Learn more about our process
      • http://groovecoder.com/2011/07/18/bugzilla-agile/
      • http://groovecoder.com/2011/11/09/mdn-agile-status/
Tracking Kuma development with
       BugzillaJS
Progress update and next steps for
               Kuma Roadmap

2010
 •   Django front-end + infrastructure

2011
 •   Q1: Demo Studio + Start Wiki
 •   Q2: MDN Learning + Dev Derby
 •   Q3: Where is Mozilla? + MDN Profiles
 •   Q4: Finish Wiki + Apps + Discussions

2012
 •   Q1: Docs Migration + Start l10n + Kuma Beta
 •   Q2: Finish l10n + Kuma Launch
 •   Q3: Continue to evolve based on feedback
Learn more, stay connected, and
             Join Us!
            General Info:
     https://wiki.mozilla.org/MDN

        Kuma Project Info:
  https://wiki.mozilla.org/MDN/Kuma

         Kuma Milestones:
https://wiki.mozilla.org/MDN/Milestones

             Mailing list:
https://lists.mozilla.org/listinfo/dev-mdn

                  IRC:
        #mdn on irc.mozilla.org
It’s time for me to stop talking…
                 Thanks!


       Jay Patel
Product Manager, MDN

     jay@mozilla.com
           @jaybhai
          jay on IRC




         Jean-Yves is up next…
HTML, CSS, JS, HTTP,
                                         SSL...




Learning the web is as complex
as learning a human language...
The web is evolving faster and faster...




               <input type= "email">                      linear-gradient()
  <article>                               tab-size :


<bdi>

                                       hsla()

                             <audio>

                                                       backface-visibility :
        <!DOCTYPE html>
                      <video>          transform :
                                                                 @font-face
The web is heterogenous,

moving at different paces,

and new actors are coming.
And what do we have ?
              Lot of outdated or
             poor documentation.


             There is good info,
              but buried and
                 scattered.


              The non-specialist
             doesn't recognize it,
                  if it find it.

             And the spec is precise
               but different from
                   the reality...
For the Open Web
We need a documentation :   We need to know :
 • Up-to-date                • Spec status
 • Browser agnostic          • Current implementation
 • Complete                  • Answer to practical
 • Practical                   cases

  • with examples
  • with good practices
  • with bad practices
    debunked
But...

  there are more than
the Open Web at Mozilla
Gecko
<XUL>
For Mozilla Stuff
We need a documentation :   We need to know :
 • Up-to-date               • What's going on...
 • Browser agnostic          • How it works...
 • Complete
 • Practical
  • with examples
  • with good practices
  • with bad practices
    debunked
Typical Doc Structure
                                                          Reference Pages
                               Index
Portal Page (Landing Page)




                                       Concept Pages ("Using
                                             XYZ…")                         Tutorials




                                             Articles                       Demos
CSS landing page
CSS index
MDN is an integrated Mozilla product
How to help ?
Fix a typo
                          Add an example

               Correct an error          Use it

                                        Tell about it
Add a link from a blog
                                  Fix compatibility info
               Add an internal link

                                Write a missing article
 Complete an article
Create an account
And that's it.
Welcome new MDN editor !
A simple editing session
To be a better editor...
Write sentences, not lists (SEO).




Be precise : a CSS at-rule is not a CSS property
To be a better editor...

Link, link, link ! Internally or externally.


Navigability is the key to find quickly the right
  information.
Christmas Tree effect
To be a better editor...
• Cite sources (the '#' shortcut)
  # will becomes [1], [2], ...


• Respect copyrights.
Do not be afraid, but...
• Do not move pages around without knowing what
 you are doing.



• Put a comment when editing!
Future challenges
• Increase quality of content and form.
• Keep up-to-date with new spec (CSS4,
 DOM4).
• Keep up with the 6-weeks release
 schedule.

• Live examples.
• Screencasts.
Getting help
• Mozilla IRC : #devmo channel
• Newsgroup : mozilla.dev.mdc

Bi-monthly community meeting on IRC,
(announced on mozilla.dev.mdc)


• Twitter @teoli2003
Doc Sprints
3-4 times a year, a few Mozillians meet during a
  week-end.




Next early 2012, info will be posted on
http://hacks.mozilla.org and on mozilla.dev.mdc
In conclusion,

• Mozilla choosed the Open Web as one of the
 worthy battles to fight, the MDN is one of the
 weapon for this one.
• Almost anybody can help.
Q&A
MDN Production:
    http://developer.mozilla.org/

         Kuma Staging Server:
https://kuma-stage.mozilla.org/en-US/

MDN Development & Web Documentation

  • 2.
    MDN Development & WebDocumentation Jay Patel jay@mozilla.com @jaybhai Jean-Yves Perrier @teoli2003
  • 3.
    Agenda What will we cover? • Branding • Evolution of MDN • Kuma Project • Developer Engagement Platform • Development • Documentation
  • 4.
    The many namesfor developer.mozilla.org DevMo #devmo IRC channel (historical short name for domain) MDN Documentation Center MDC (docs section of MDN) MDN Mozilla Developer Network (website, community, campaigns, etc.)
  • 5.
  • 6.
    Goals for the Kuma Project • Build platform for developer engagement • Leverage Django code from SUMO (Kitsune) • Improve documentation and editorial processes • Fix the l10n experience for localizers • Add social features and collaboration tools • Grow new areas for demos, events, learning, and community
  • 7.
  • 8.
    Agile process for Kuma Development 2 week “sprints” • MDN dev team includes 3 dev + 1 qa + 1 doc + 1 pm • Weekly bug triage and planning meeting • 20-25 “points” per sprint • 10 days dev + 5 days QA Bugs / Backlog in Bugzilla • Product: Mozilla Developer Network • Component: Website Feedback / Feature Requests with UserVoice • http://mdn.uservoice.com/forums/51389-mdn-website-feedback- http-developer-mozilla-org Learn more about our process • http://groovecoder.com/2011/07/18/bugzilla-agile/ • http://groovecoder.com/2011/11/09/mdn-agile-status/
  • 9.
  • 10.
    Progress update andnext steps for Kuma Roadmap 2010 • Django front-end + infrastructure 2011 • Q1: Demo Studio + Start Wiki • Q2: MDN Learning + Dev Derby • Q3: Where is Mozilla? + MDN Profiles • Q4: Finish Wiki + Apps + Discussions 2012 • Q1: Docs Migration + Start l10n + Kuma Beta • Q2: Finish l10n + Kuma Launch • Q3: Continue to evolve based on feedback
  • 11.
    Learn more, stayconnected, and Join Us! General Info: https://wiki.mozilla.org/MDN Kuma Project Info: https://wiki.mozilla.org/MDN/Kuma Kuma Milestones: https://wiki.mozilla.org/MDN/Milestones Mailing list: https://lists.mozilla.org/listinfo/dev-mdn IRC: #mdn on irc.mozilla.org
  • 12.
    It’s time forme to stop talking… Thanks! Jay Patel Product Manager, MDN jay@mozilla.com @jaybhai jay on IRC Jean-Yves is up next…
  • 13.
    HTML, CSS, JS,HTTP, SSL... Learning the web is as complex as learning a human language...
  • 14.
    The web isevolving faster and faster... <input type= "email"> linear-gradient() <article> tab-size : <bdi> hsla() <audio> backface-visibility : <!DOCTYPE html> <video> transform : @font-face
  • 15.
    The web isheterogenous, moving at different paces, and new actors are coming.
  • 16.
    And what dowe have ? Lot of outdated or poor documentation. There is good info, but buried and scattered. The non-specialist doesn't recognize it, if it find it. And the spec is precise but different from the reality...
  • 17.
    For the OpenWeb We need a documentation : We need to know : • Up-to-date • Spec status • Browser agnostic • Current implementation • Complete • Answer to practical • Practical cases • with examples • with good practices • with bad practices debunked
  • 18.
    But... thereare more than the Open Web at Mozilla
  • 19.
  • 20.
    For Mozilla Stuff Weneed a documentation : We need to know : • Up-to-date • What's going on... • Browser agnostic • How it works... • Complete • Practical • with examples • with good practices • with bad practices debunked
  • 21.
    Typical Doc Structure Reference Pages Index Portal Page (Landing Page) Concept Pages ("Using XYZ…") Tutorials Articles Demos
  • 22.
  • 23.
  • 27.
    MDN is anintegrated Mozilla product
  • 28.
  • 29.
    Fix a typo Add an example Correct an error Use it Tell about it Add a link from a blog Fix compatibility info Add an internal link Write a missing article Complete an article
  • 30.
  • 32.
    And that's it. Welcomenew MDN editor !
  • 33.
  • 37.
    To be abetter editor... Write sentences, not lists (SEO). Be precise : a CSS at-rule is not a CSS property
  • 38.
    To be abetter editor... Link, link, link ! Internally or externally. Navigability is the key to find quickly the right information.
  • 39.
  • 40.
    To be abetter editor... • Cite sources (the '#' shortcut) # will becomes [1], [2], ... • Respect copyrights.
  • 41.
    Do not beafraid, but... • Do not move pages around without knowing what you are doing. • Put a comment when editing!
  • 42.
    Future challenges • Increasequality of content and form. • Keep up-to-date with new spec (CSS4, DOM4). • Keep up with the 6-weeks release schedule. • Live examples. • Screencasts.
  • 43.
    Getting help • MozillaIRC : #devmo channel • Newsgroup : mozilla.dev.mdc Bi-monthly community meeting on IRC, (announced on mozilla.dev.mdc) • Twitter @teoli2003
  • 44.
    Doc Sprints 3-4 timesa year, a few Mozillians meet during a week-end. Next early 2012, info will be posted on http://hacks.mozilla.org and on mozilla.dev.mdc
  • 45.
    In conclusion, • Mozillachoosed the Open Web as one of the worthy battles to fight, the MDN is one of the weapon for this one. • Almost anybody can help.
  • 46.
  • 47.
    MDN Production: http://developer.mozilla.org/ Kuma Staging Server: https://kuma-stage.mozilla.org/en-US/