Channels ▼

Web Development

Mozilla Redesigns Developer Network

Mozilla has announced a redesign of the Mozilla Developer Network (MDN) based around the organization's pledge to provide openness and innovation on the Web.

The redesign is built with advanced search, easier navigation, and content now organized by zones such as: Firefox OS, Firefox Marketplace, Firefox, Add-ons, Persona, etc.

The MDN itself has recently gone through a platform change moving from a hosted third-party solution to Mozilla's own custom Django application code-named Kuma.

Intended to act as an open, community-driven wiki, MDN seeks to give web developers, designers, and application developers (and extension and theme writers) access to the best documentation, tutorials, and developer tools available.

"Anyone can add and edit content to make it even better," says Mozilla.

The organization has moved to Elasticsearch for search — and this helps continue making indexing and filtering improvements. It also enables the addition of new search features at will.

According to Mozilla, "MDN's new Content Zones provide a complete collection of documentation about a given topic, encompassing the very basics of a topic to API details and advanced techniques."

There are now "See Also" links (which may appear in any wiki page) linking to documents, which may be relevant based on the document a developer is currently viewing.

"Both the zone subnavigation and 'See Also' link sidebar widgets are built from basic link lists in the wiki document, so adding links and shuffling navigation is easy for anyone looking to contribute to MDN. These link lists can also be built using MDN's macro language, Kumascript, and our writing team has done a great job automating 'See Also' links so that contributors can save on the manual labor of hunting down other relevant documents," said the development team in a "Hacks" post.

Related Reading

More Insights

Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.