The Mozilla Developer Network has a New Face

[modeless]

Is it going to get faster? I find that MDN pages load much, much slower than e.g. w3schools, which probably explains some or all of their failure to grab the top spot on most Google searches.

For example, a page like this takes nearly 10 seconds to render on the server before the browser receives a single byte: https://developer.mozilla.org/en-US/docs/Web/Reference/Event...

MDN's content is already good. I'd prefer to see effort put into speeding it up rather than adding more features.

[groovecoder]

MDN dev here. Page-load time is one of our immediate next goals. Tons of traffic to our document view and lots of potential back-end processing on each doc kinda sucks. But, we're using New Relic now and hoping to tackle things iteratively as we go.

https://developer.mozilla.org/en-US/docs/Project:MDN/Plans_a...

[nfm]

Wow, you weren't kidding - 10164ms for me. From what I can tell, there's not much dynamic content in the page. Static caching would go a long way there. I'm sure they'd appreciate a pull request from someone with some Django chops! https://github.com/mozilla/kuma

[KaoruAoiShiho]

Isn't MDN mostly stactic content? I don't understand why it's so slow... Everything should be served off of static pages on a cdn.

[theandrewbailey]

The sad part is that I don't mind waiting that long. For most things, I will skip Google entirely and go directly to MDN and not waste my time sorting through the documentation light results from W3schools. Someday, I might start using Web Platform Docs too.

http://docs.webplatform.org/

[cmelbye]

It's interesting that they decided to write their own wiki. If I remember correctly, they used to use MediaWiki which has fairly straightforward built-in support for scaling used by Wikipedia and its sister sites. (Replicate your database so it sends all read queries to replicas, set up memcached to cache I18n strings and parser results, use Squid so that logged out users don't even hit the app servers, enable APC, etc.) I'd be interested in knowing why they went with the option of a rewrite.

[soapdog]

MDN focus is on having the best and most complete content. w3schools rank higher on google search but their content is not the best one, and sometimes it is too shallow.

Those working with the web should use better documentation than w3schools, thats a quick tutorial site.

Also MDN is from Mozilla so it is all open source and we can all contribute and help speed things up ;-)

[groovecoder]

We are going to work on performance issues until EOY. If anyone would like to help, we're using a new label in GitHub for it:

https://github.com/mozilla/kuma/issues?labels=performance&pa...

[jlarocco]

The new site seems speedy enough to me, but I do remember the old one being so slow it was unusable.

[lucian1900]

Oddly enough it's reasonably fast for me, always under 2sec.

[hunvreus]

I'd recommend you open up your console when visiting the site:

               _.-~-.
             7''  Q..\
          _7         (_
        _7  _/    _q.  /
      _7 . ___  /VVvv-'_                                            .
     7/ / /~- \_\\      '-._     .-'                      /       //
    ./ ( /-~-/||'=.__  '::. '-~'' {             ___   /  //     ./{
   V   V-~-~| ||   __''_   ':::.   ''~-~.___.-'' _/  // / {_   /  {  /
    VV/-~-~-|/ \ .'__'. '.    '::                     _ _ _        ''.
    / /~~~~||VVV/ /  \ )  \        _ __ ___   ___ ___(_) | | __ _   .::'
   / (~-~-~\\.-' /    \'   \::::. | '_ ` _ \ / _ \_  / | | |/ _` | :::'
  /..\    /..\__/      '     '::: | | | | | | (_) / /| | | | (_| | ::'
  vVVv    vVVv                 ': |_| |_| |_|\___/___|_|_|_|\__,_| ''

  Hi there, nice to meet you!

  Interested in having a direct impact on hundreds of millions of users? Join
  Mozilla, and become part of a global community that’s helping to build a
  brighter future for the Web.

  Visit https://careers.mozilla.org to learn about our current job openings.
  Visit https://www.mozilla.org/contribute for more ways to get involved and
  help support Mozilla.

[bad_user]

The new design is sexy-ish, but I think readability suffers because:

1. the contrast is too low, for example that blue colour of links on white background is too light, hurts my eyes

2. the font-size is too small, especially in combination with the poor contrast. 14px is too small on today's desktops, should be 16px ... better yet, it should be left at 100% as that scales better. On the other hand I like the usage of Open Sans, it's a readable font and ensures availability on all OSes

3. some pages are too slow to load. MDN is a great reference and decreasing latency should be a priority.

[rolfen]

I don't know what's sexy(-ish) about the blue corporate look. I guess that's why developers are not graphic designers.

[yeukhon]

It's harder to read. I want to see how many HN readers think the color scheme and the font makes reader uncomfortable? https://bugzilla.mozilla.org/show_bug.cgi?id=948108

[bcoates]

I think the new color scheme is nice, but the contrast is way too low for the tiny, low-weight font they're using. A bold or larger text or increasing the contrast a little would make it work. To meet http://accessibility.psu.edu/contrasthtml they'll probably have to do all three.

[jakub_g]

I have to admit I liked the previous color scheme much more too. White / light blue background + gray text (~#4D). Why is it so popular to make low-contrast sites these days? It's inexplicable to me, other than just the designers' craving for change (yes it probably has all the contrast coefficients within the norms, but it doesn't mean this couldn't be made better).

[tux]

Yeah its harder to read ^_^ and I think worse looking the old version.

[pwnna]

For those interested, the source of MDN is here: https://github.com/mozilla/kuma

[Daiz]

I never really thought about it before, but this new layout immediately made me realize that there's just a single letter difference between MDN and MSDN... the layout is rather similar to what the latter was using a while back. Not that it's a bad thing or anything, just thought it was amusing. MDN is a fantastic resource, so it's great to see some love and care being poured into it.

[X4]

wow, seems like it's true that there are always two people with the same idea, somewhere on earth. Or, how they would say it in Germany: "Two idiots, same idea."

To me, the MDN to MSDN portal similarity is also a striking symbol of the Mozilla & Microsoft partnership. The design, even looks like it's a little Windows 8 inspired, from my angle.

(There's no assessment involved)

[rolfen]

The new MDN theme is horrible. It looks very Microsoft-ish (and a little google-ish)

They changed everything, even the friggin logo is blue now. What was wrong with the old look?

How can I get it back?

I've posted about it here: http://lebgeeks.com/forums/viewtopic.php?id=14889

[etler]

I'm not a huge fan of the new design. Nothing is really strongly defined so my eyes have no idea where to look. Everything just blurs into each other.

[currysausage]

Put "Shared knowledge for the open web" on just one line. It will look less clumsy, plus there will be more content "above the fold." (More content above the fold would be great on other pages, too.)

Generally speaking, dealing with developer docs, "less is more" is almost always true. I love elaborate design, but here, visual clarity and speed are key. Finding things quickly is more important than beautiful fonts and graphics. Therefore, take an "un-design" approach. This iteration of MDN certainly is a step into the right direction.

I love Open Sans, but, at least on Windows, Arial is more legible (and doesn't have to be downloaded first.)

Menu fade effects are cool as long as I perceive them subliminally; 400ms (?) feels extremely sluggish.

As others have noted, page load times still need to improve considerably. In order to find my way around tech docs, I have to browse a lot; therefore, pages can't load fast enough. Grab a copy of "High Performance Web Sites" and heed the rules outlined there. 9 CSS files are not okay! >10 JS files are not okay! (Why would you even need that much code for simple docs pages?)

[lillycat]

Regarding the amount of files (CSS +JS) loaded. We will minimize this when we will remove the old theme, which is still there, behind the scenes.

[secoif]

Wow, it's very bright. Would be great if there was a toggle for a dark theme instead.

[cenhyperion]

https://developer.mozilla.org/en-US/docs/Project:Feedback

[eugeneiiim]

Pretty useful, but http://sourcegraph.com provides examples & automatic docs for a much larger set of libraries and languages.

[groovecoder]

Ooo, interesting. Now that we're on ES and have a real search index, we should try including code snippets as context when performing a search.

[frik]

interesting!

though it doesn't include JavaScript (browser related API, only node.js) as does MDN; and no PHP or MySQL

[rhizome]

Does not degrade.

[Ygg2]

Here is my analysis of the page.

My look at loading times found these biggest offenders:

     GET /             developer.mozilla.org  2153ms (767ms connecting, 499ms wait) 23.42KB
     GET include.js    login.persona.org      2151ms (1921ms connecting, 230ms wait) 16.87KB

Also there is a bunch of png like "persona-person-white.png" and a bunch of pictures like "*_screenshot_1_thumb" that take about ~1000ms each, but are taken in parallel.

[Cogito]

For some reason, it looks like JavaScript doesn't make it onto the Web Platform landing page[0] (or maybe I just can't find it?)

It's in the drop down list when I hover the main menu, but I can't seem to navigate to it otherwise.

[0] https://developer.mozilla.org/en-US/docs/Web

[groovecoder]

Fixed. BTW, MDN is a wiki so if you see stuff like that again I think you can fix it yourself. :)

[Cogito]

And I see someone fixed it, just as I was in the middle of adding it :D

[Jgrubb]

I didn't build this, but a cool tool that the author hipped me to on Reddit - http://mdn.io/

It's basically a LMGTFY search on whatever you put after the slash, for example - http://mdn.io/css%20transitions.

[mistercow]

I hate to post the typical "why are they focusing on adding new features before making it actually work" kind of comment, but this is that comment. I like MDN, but it drives me nuts how often I click an internal link on it and either get any number of server errors or a 404 page.

[groovecoder]

If you're signed in, you should have an option to make the page. MDN is a wiki. :)

[groovecoder]

Oh, but if you're getting ISE's that's a bug. You can file those here:

http://bugzilla.mozilla.org/form.mdn

[lillycat]

Could you open a bug the next time it happens (with a link to the page)? It would help in diagnosing the problem (client-side, server-side, doc missing, ...)

[b0z0]

Hmm. Great, looks exactly like something Microsoft might have made a few years ago.

[X4]

MDN and MSDN. Ok, this is maybe just coincidence, but their portal pages do look similar.

https://developer.mozilla.org/en-US/ vs http://msdn.microsoft.com/en-us/default.aspx

[staticelf]

I don't see the similarity..? Besides the obvious small stuff, but then almost web page are similar..

[frik]

Low contrast, lot of white space... reminds me of the PHP.net redesign :/

Old design was better!

[joeheyming]

What I want to know is: when will w3c update their site?!