
The Mozilla Developer Network has a New Face - rnyman
https://hacks.mozilla.org/2013/12/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...](https://developer.mozilla.org/en-
US/docs/Web/Reference/Events)

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...](https://developer.mozilla.org/en-
US/docs/Project:MDN/Plans_and_status/Server_charts)

~~~
camus2
please make it readable asap, cause it is not.

\- darken the text, low contrast destroys eyesight.

\- make the text bigger for god sake

\- use a serif font for the main text,really,you can keep the headlines sans.

\- your website has a big whitespace/negative space balance problem.

I mean,i dont understand designers today. Do they care about readability? or
that a site look fancy on their shiny new mac ?

As for performance problems i would suggest moving to a static site generator,
a doc is the perfect use case.

~~~
fhd2
A static site generator for a wiki?

~~~
mintplant
That sounds like a good idea, actually. Why not? Generate and store each page
each time it's edited, then serve from the static copies. There will be a lot
more reads than there are writes anyway.

~~~
fhd2
That's a static page cache, not really the same thing. And I'm pretty sure
they're doing this already, or are about to.

------
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.

~~~
kamjam
I hate this bandwagon of everyone jumping onto the MS Metro UI look for
everything. The old site wasn't perfect, but please come up with something
original.

~~~
rolfen
Exactly

------
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](https://bugzilla.mozilla.org/show_bug.cgi?id=948108)

~~~
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).

~~~
rhizome
An oldie but a goodie:
[http://contrastrebellion.com/](http://contrastrebellion.com/)

HN makes the cut.

------
pwnna
For those interested, the source of MDN is here:
[https://github.com/mozilla/kuma](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](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](https://developer.mozilla.org/en-
US/docs/Project:Feedback)

------
eugeneiiim
Pretty useful, but [http://sourcegraph.com](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.

------
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](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
Yeah, I was just adding it, but you got in just before me (I had to persona-
ify (personafy?) my account first)

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

It's basically a LMGTFY search on whatever you put after the slash, for
example - [http://mdn.io/css%20transitions](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. :)

------
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/](https://developer.mozilla.org/en-US/)
vs [http://msdn.microsoft.com/en-
us/default.aspx](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?!

------
ibotty
can someone point me to their elasticsearch setup? i'd like to see which
queries they use and how they index their content.

~~~
lmorchard
Probably the most relevant code can be found here:

[https://github.com/mozilla/kuma/tree/master/apps/search](https://github.com/mozilla/kuma/tree/master/apps/search)

------
renownedmedia
Persona login doesn't work for me.

~~~
callahad
Hi, Persona dev here, could you email me (HN username @ mozilla.com) and tell
me more about how it's not working?

Or file a bug:
[https://github.com/mozilla/persona/issues/new](https://github.com/mozilla/persona/issues/new)

