Like a manpage for the web

December 7, 2011 12:11 PM

Over the past several years, Mozilla's collection of developer documentation for its own web browsers has turned into a wiki-editable reference of web standards for developers working with all browsers, hosting a comprehensive, no-nonsense reference of HTML, HTML5, CSS, JavaScript, the DOM, and more. If you find yourself turning to this reference frequently, dochub provides instant access to Mozilla's documentation for any HTML, CSS, JavaScript, or DOM-related topic. If you're worried that a fancy new standard might not work in an older browser, canIuse will tell you exactly how many browsers will support that new standard. Still want to use that shiny new standard? Modernizr and yepnope will let you detect missing features, and load tiny bits of code to make old browsers support the latest HTML5 hotness.
[via the carefully-curated selections of JavaScript and HTML5 Weekly, run by MetaFilter's own wackybrit]
posted by schmod (23 comments total)

Thanks for compiling these resources, schmod!
posted by stagewhisper at 12:13 PM on December 7, 2011 [1 favorite]

On that account I'd like to throw HTML 5 Boilerplate into the mix.
posted by bigendian at 12:30 PM on December 7, 2011 [3 favorites]

My friend Jono Xia, who works at Mozilla, also put together an online course for programming games in HTML5. You can see his "build your own platformer" thing at RunJumpBuild.com.
posted by yeloson at 12:35 PM on December 7, 2011

The Mozilla docs are terrific; I find the best way to get quick results when I'm researching CSS or Javascript stuff is just to search [keyword MDN]. Ie: [Javascript array sort mdn] or [CSS zindex mdn]. The key thing is to avoid getting w3schools and other garbage results from ad stuffed web pages with no useful content. See also W3Schools: an intervention.

I'll highlight another useful web developer resource: bl.ocks.org, a service that takes any Github Gist and displays it as a live web page with a context that allows fancy Javascript to work. For instance, this Superformula explorer consisting of a couple of files living in this gist. It's a great way to go from a quick Javascript demo to a linkable web page.
posted by Nelson at 12:36 PM on December 7, 2011 [8 favorites]

Wow, great post. Thanks for pulling this together!
posted by sharpener at 12:39 PM on December 7, 2011

I knew about some of these resources, but this is a great all-in-one post. Favorited for referencability.
posted by mysterpigg at 12:49 PM on December 7, 2011

Ugh, W3Schools needs to die in a fire. And then be nuked from orbit. And then put into the Total Perspective Vortex. And then fired from a cannon.

Maybe a slightly different order, but you get the idea.
posted by kmz at 12:50 PM on December 7, 2011 [6 favorites]

I had no idea that the jsweekly and html5weekly editor was a MeFite. Good job wackybrit, those resources are insanely valuable to this web developer.
posted by Kwine at 1:10 PM on December 7, 2011

kmz: "Ugh, W3Schools needs to die in a fire. And then be nuked from orbit. And then put into the Total Perspective Vortex. And then fired from a cannon."

Can IE6 tag along?
posted by schmod at 1:11 PM on December 7, 2011 [3 favorites]

Nelson: "I'll highlight another useful web developer resource: bl.ocks.org, a service that takes any Github Gist and displays it as a live web page with a context that allows fancy Javascript to work. "

Ooh, that's neat.

Although it doesn't directly integrate with GitHub or Gist (that I know of), jsFiddle is another really nice in-browser sandbox for testing out code. There's also the (less fancy) CSSDesk, JSBin, and Javascript Console, all of which can be useful.
posted by schmod at 1:37 PM on December 7, 2011 [2 favorites]

See also W3Schools: an intervention.

I like this page. I have no clue what PromoteJS is supposed to accomplish, though. Can anyone explain?
posted by odinsdream at 1:41 PM on December 7, 2011

I like this page. I have no clue what PromoteJS is supposed to accomplish, though. Can anyone explain?

When you do a google search for Javascript, the MDN — the really good JS documentation — is all the way down at the bottom of the page, beneath some other OK links (the Wikipedia JS page, jQuery) but also many sketchy links (w3schools.com, javascript.com, etc.).

By putting these badges on your page, you're basically giving the MDN more incoming links, which boosts its pagerank and hopefully its standing in Google search results. This way, more people get good information about Javascript, and that makes the web better.
posted by joshuaconner at 2:34 PM on December 7, 2011 [3 favorites]

JavascriptWeekly is indeed amazing, one of the very few newsletters I subscribe to.
posted by formless at 4:43 PM on December 7, 2011 [1 favorite]

Really nice post.

On a related note, I see some folks have salvaged and are hoping to maintain/expand Dive Into HTML5.
posted by brennen at 6:15 PM on December 7, 2011 [1 favorite]

brennen: "On a related note, I see some folks have salvaged and are hoping to maintain/expand Dive Into HTML5."

Don't forget its cousin, Elegant JavaScript.

Also, I probably wasn't effusive enough with my praise of JavaScript Weekly. If you're a front-end web developer, you absolutely need to subscribe to it. The signal-to-noise ratio for web development stuff is really, really, ridiculously low; JS/HTML5 weekly do an absolutely fantastic job of consistently capturing the best of the best, and they only pester you once a week about it.

My only gripe is that the newsletter format means that you need to read it every week. I kind of wish somebody would compile an archival list of the best web development resources and articles on the 'net, and kept it up to date.

You should also read A List Apart, although it isn't actually, uh.... a list. Their content is also consistently great (albeit a bit verbose, and all original material).

I've had a big mega-javascript FPP boiling in the back of my mind for a while, and might actually get around to compiling the whole thing one of these days. dochub seemed useful enough to warrant its own FPP in the meantime, and I definitely don't use the MDN docs as much as I should, given their inexplicably low Google pagerank. (I've also always been somewhat perplexed that Mozilla's documentation is great whereas WebKit's is nonexistent. I've been really impressed by some of the stuff coming out of Mozilla lately; they very well might retake the lead in the browser wars)
posted by schmod at 7:44 PM on December 7, 2011

schmod: "Don't forget its cousin, Elegant JavaScript. "

Gah. Eloquent. Eloquent Javascript. Google's been automatically correcting me all these years, and I've never once noticed it.
posted by schmod at 7:45 PM on December 7, 2011

joshuaconner: "When you do a google search for Javascript, the MDN — the really good JS documentation — is all the way down at the bottom of the page..."

I've developed a habit of typing "MDN" after every JavaScript-related query I make. I wasn't even sure if it was a good idea to rely on one vendor's docs, but now I feel validated.
posted by klanawa at 8:07 PM on December 7, 2011

carefully-curated

i hope he's careful when he acid-preps those java scripts, you gotta test that on a throwaway specimen first
posted by This, of course, alludes to you at 2:52 AM on December 8, 2011 [1 favorite]

WOW - nice !
posted by sgt.serenity at 12:02 PM on December 8, 2011

Is there any way to get JavaScript Weekly as an RSS feed for Google Reader, instead of as email? I looked for awhile and that option was conspicuous by its absence.
posted by Nelson at 9:30 AM on December 9, 2011

Nelson: Yes. http://javascriptweekly.com/rss will do the trick. It'll look identical to the newsletter too. I don't promote it because ideally I want to build my own feed that has the same level of tracking as e-mail (what people click on is important to me to optimize the newsletter) and this one just leans on MailChimp's archives for now :-)
posted by wackybrit at 12:39 PM on December 9, 2011 [1 favorite]

Oh, neat! Dochub have also added docs for PHP and JQuery!

Huzzah for well-written documentation!
posted by schmod at 10:53 AM on December 21, 2011

This is an excellent post. Thank you.
posted by safetyfork at 7:40 PM on January 1