139 JSJ The Mozilla Developer Network with Les Orchard and David Walsh

00:00
Download MP3

Check out JS Remote Conf!

02:29 - David Walsh Introduction

02:44 - Les Orchard Introduction

03:01 - The MDN: Mozilla Developer Network

05:46 - Documentation & Maintenance

10:24 - Experimentation

12:10 - History

13:17 - Documentation (Cont’d)

16:16 - The MDN as a Resource & Standards

18:52 - The Editing Process

20:06 - The Future of MDN

  • Making Writing Tools Easier to Use
  • Improve Demo Studio

21:39 - The Design and Layout

22:54 - Editing Wars and Trolling

24:21 - Code Samples

27:00 - Tutorials

28:38 - Community Contributions

31:49 - The MDN Demo Studio

33:18 - Advantages & Value of the MDN

37:47 - Licensing

Transcript

JAMISON:  Yeah, it’s like we all share a foxhole.[This episode is sponsored by Frontend Masters. They have a terrific lineup of live courses you can attend either online or in person. They also have a terrific backlog of courses you can watch including JavaScript the Good Parts, Build Web Applications with Node.js, AngularJS In-Depth, and Advanced JavaScript. You can go check them out at FrontEndMasters.com.]**[This episode is sponsored by Hired.com. Every week on Hired, they run an auction where over a thousand tech companies in San Francisco, New York, and L.A. bid on JavaScript developers, providing them with salary and equity upfront. The average JavaScript developer gets an average of 5 to 15 introductory offers and an average salary offer of $130,000 a year. Users can either accept an offer and go right into interviewing with the company or deny them without any continuing obligations. It’s totally free for users. And when you’re hired, they also give you a $2,000 bonus as a thank you for using them. But if you use the JavaScript Jabber link, you’ll get a $4,000 bonus instead. Finally, if you’re not looking for a job and know someone who is, you can refer them to Hired and get a $1,337 bonus if they accept a job. Go sign up at Hired.com/JavaScriptJabber.]**[This episode is sponsored by Rackspace. Are you looking for a place to host your latest creation? Want terrific support, high performance all backed by the largest open source cloud? What if you could try it for free? Try out Rackspace at JavaScriptJabber.com/Rackspace and get a $300 credit over six months. That’s $50 per month at JavaScriptJabber.com/Rackspace.]**[This episode is sponsored by Wijmo 5, a brand new generation of JavaScript controls. A pretty amazing line of HTML5 and JavaScript products for enterprise application development in that Wijmo 5 leverages ECMAScript 5 and each control ships with AngularJS directives. Check out the faster, lighter, and more mobile Wijmo 5.] **CHUCK:  Hey everybody and welcome to episode 139 of the JavaScript Jabber Show. This week on our panel, we have Dave Smith. AJ O’Neal. AJ:  Yo, yo, yo, coming at you live from Provo. CHUCK:  Joe Eames. JOE:  Hey, everybody. CHUCK:  Jamison Dance. JAMISON:  Hi friends. CHUCK:  I’m Charles Max Wood with a quick reminder to go check out JS Remote Conf at JSRemoteConf.com. We also have two special guests this week. We have Les Orchard. LES:  Hey, how’s it going? CHUCK:  And David Walsh. DAVID:  Hello CHUCK:  Do you guys want to introduce ourselves really quickly? LES:  Sure. DAVID:  Sure, I’ll go first. My name is David Walsh. I’m a senior web developer at Mozilla. I write my blog at DavidWalsh.name. I’ve been involved with the MooTools project in the past. And I think that’s a good summary. LES:  Hi, I’m Les Orchard. I’ve been at Mozilla for close to seven years now. I’ve worked on the Mozilla Developer Network for about three years. And I’m just now switching over to the apps engineering team which does a lot of stuff with web apps and PhoneGap and things like that. CHUCK:  Very nice. I think we’re all pretty excited to have you guys come on today and talk about the MDN, which is the Mozilla Developer Network. I don’t know what all you guys use it for, but generally if I’m confused or need some help figuring out what something does in JavaScript, CSS, particularly CSS3 and some of the HTML, HTML5 stuff, the MDN is my go-to for that, especially after AJ pointed out when I was new to JavaScript, every time I copied something off of W3Schools that I was doing it wrong. AJ:  Hee-hee-hee-hee-hee-hee. JOE:  [Chuckles] JAMISON:  Angel loses its wings or something? DAVE:  I was wondering how long it would be before W3Schools came up. Apparently 30 seconds. [Laughter] CHUCK:  Well, so the thing that it usually was, was that they would put a string in where you could put a function in and almost every time, the function was the right call. In fact, pretty much every time, the function was the right call. And so, then he started pointing me to MDN and my life got better. So, do you want to give a quick introduction to MDN? Because it looks like there’s a little more to it than just documentation for web stuff. LES:  Actually, MDN has a really long history. I don’t know if you guys are Babylon 5 fans, but this is almost like the fifth generation of the site, I think. Maybe it’s actually the seventh. But it goes all the way back to Netscape DevEdge. And it’s been a continuous line of migrations since then. It used to be I think MediaWiki Wiki and then it moved over to MindTouch and then we rewrote the thing from scratch. But every time we’ve carried over all the web documentation we can get. And then we’ve added some things. Like now, we’ve got, a couple of years ago we added Demo Studio which is a place for web devs to show of demonstrations of various web technologies and things. And we had a contest running for a few years to give away fabulous prizes to whoever could do the most interesting things. But yeah, I think the most popular thing though is the web documentation. And we were trying to get some linkages from there to the Demo Studio as the core of sample code and showing things off. But we’re still working on that. JAMISON:  So, I’ve used MDN for years and years and I’ve never actually gone to the main homepage. I’ve only gotten there via Google. [Chuckles] So, this is already a revelation to me. I just went to the MDN homepage and there are all kinds of stuff. CHUCK:  There’s deliberate content there and stuff. DAVID:  Yeah, about a year ago we completely redesigned the site. And we did notice that most people had never seen the homepage and even some of the other sections, they’ve been getting there via Google. So actually, in the last year we’ve enhanced the search quite a bit and we’re trying to use different ways to bring people into MDN so that it’s not a Google to MDN to go back or close your browser sort of interaction. JAMISON:  So, I do have a couple of questions about the documentation side of it. Is the goal explicitly for MDN to be the source of good documentation on web APIs? Or did that just happen by happenstance? LES:  I think it started growing that way and we’ve experimented with actually expanding that, throwing documentation for a lot of other projects on there. But the gravity of the site has always centered around really high-quality web documentation. And that seems to be the most successful thing. So, I think it’s maybe half planned and half that’s what everyone comes there for, so that’s what it’s focused on. JAMISON:  And how is it maintained? I feel like I’ve seen some wiki stuff on there but it was hidden and I wasn’t sure if I could edit it or not. Is it only Mozilla employees that contribute to it? Can you talk about that process? LES:  So, that’s actually really an unfortunate perception, because it is a wiki. And anyone who signs up can edit pages. And it’s a little bit of a strange wiki in that you don’t use the kind of wiki text that you’re accustomed to on other sites. We’ve got a CKEditor-based HTML editor. And all the pages are in HTML format with some custom scripting from a service we call KumaScript. But it’s open for editing from everyone. And in fact, we encourage it. We encourage contributions to it like any open source project. DAVID:  We do. And we also have documentation-centric events. And once of the big things to come out of those events is a lot of translation, which is really important. We support close to 20 languages on MDN now. So, that sort of translation is really important to us and to allowing web technologies to be understood by more people around the world. JAMISON:  Does it go through an approval queue at all? Or is it just straight wiki everyone edits it/everyone has editing rights type of thing? DAVID:  99.9% of all documents can be edited by anyone. We do have a staff of writers who monitor changes. But for the most part, we’ve been able to fend off spam pretty well. And people are excited to contribute. JAMISON:  The last question about that is, is there a getting started guide or anything to onboard people? Or is it just read and if you notice a hole, jump in and figure out how to fix it. DAVID:  That’s a great question. On the homepage we do have links for people who want to start contributing as well as IRC rooms that people can log into to figure out how they can help. And actually, one of the nice things over the past couple of years that I’ve been working on MDN is that we’ve actually been getting a lot more code contributors who want to help add features, fix bugs within the MDN site codebase. So, that’s another great way that people can and have contributed over the past few years. JAMISON:  This is so rad. I thought we were just going to come and gush about how cool MDN is. But I’ve wanted so many times to suggest edits or rope in a smarter person than I am to clear something up for me. And it’s there. That’s cool. DAVE:  Yeah, this is awesome. In the time you guys were just talking about it, I went over and I noticed for the first time, the edit button on the top right of one of the pages I was looking at. [Chuckles] DAVE:  I signed in, I created an account, signed in, and I’m editing one of the pages. This is so cool. Huge kudos to you guys. LES:  We’ve been working for years to make that obvious. DAVID:  Yeah, I’m going to have to, maybe I’ll put an alert on the site so people know that it’s there. [Laughter] DAVE:  And what’s even cooler is, like you mentioned a minute ago, it’s not wiki syntax. It’s actually a really nice WYSIWYG editor. This is just great, guys. CHUCK:  You said it was CKEditor, right? DAVID:  Yup. CHUCK:  Have you customized it at all? I know that you can add menus and stuff to it. DAVID:  That’s a very timely question. LES:  [Inaudible] customize it. DAVID:  So, we’ve been working with CKEditor’s lead developer to help us upgrade our CKEditor. And so, hopefully by the end of this week, we’re going to launch a brand new, much, much faster CKEditor to make editing easier. In the past we’ve created our own plugins and we’re going to continue to do that. But yeah, CKEditor we sort of bent to our will. And credit to the CKEditor team because they’ve been very helpful. And their API is actually really easy to use so it doesn’t take us too long to create plugins that make MDN much easier for our contributors. CHUCK:  Yeah, I’m a fan of CKEditor and I use it on my projects for exactly that reason. I can tweak it around and make it do what I want it to do. And just out of the box it’s already pretty easy to use. JAMISON:  So, another question related to the documentation stuff is how do you deal with some of the more experimental APIs that are still being worked on and browsers are just trying out implementations of them? DAVID:  Our writers at MDN, or I’m sorry, at Mozilla are incredible. The amount of work that they’ve done with the KumaScript templating language that Les created, they’ve been able to mark everything as experimental. Everything is actually noted very, very well. And because of the templating language, the writers are easily able to update numerous pages at once, once the new feature becomes stable or updated or with each Firefox update. So, credit to our writers. They do an incredible job in keeping things updated. JOE:  That’s awesome. JAMISON:  And you mentioned Firefox. Is it specific to Firefox? Do you note things about other browser implementations? LES:  It’s all pretty cross-browser. In fact, that’s something we get asked a lot too is, is this just the Firefox standard wiki. And we really want this to be a pan-reference. So, we’ve got compatibility tables across different browsers and all that kind of good stuff. JOE:  Yeah, I’ve found it to be very clearly marked as far as what’s experimental or not. I was messing around with ES 6. It was very clear as to, “Hey, these are all ES 6 features, not actually official features yet in browsers,” and which ones were actually implemented in browsers, which ones aren’t. I thought it was extremely clear and well-documented. DAVE:  Yeah. And on the other hand of that, features that are deprecated are similarly marked and super convenient. JOE:  Oh yeah. DAVE:  When I look at the source for one of these pages, you’ve got this special thing called the deprecated header. It looks like you can just throw that at the top of the page and poof, there it goes. CHUCK:  So, I’m curious. How did MDN get started? Did somebody just decide, “Oh we should write about how everything cool on the web works.” Or was this a skunkworks project that grew into something? LES:  Like I mentioned earlier, the history of this thing go all the way back to Netscape with DevEdge. And that was one of the earliest attempts to document, at least the Netscape web. And that was just I think all static HTML pages back in the 90s. But eventually, some folks I think in basically skunkworks project fired up a MediaWiki instance and started porting that stuff over once the Mozilla Foundation was around. And then from there, it went into a MediaWiki or a MindTouch instance, which offered a lot of more interesting content management tools. And that’s when I think we had our first professional writers hired to actually do this thing as a department that actually seriously works on it. So, it’s waxed and waned between official and skunkwork-y kind of things. But I think it’s a pretty serious mainline project now. JAMISON:  So, I was just thinking about the difference between MDN and some of the other documentation platforms in other languages. And it seems like JavaScript is in a really unique place because so much of the documentation that you need is based on your platform. It’s not like, with Ruby there’s the Ruby Docs that document all the standard library really well. That’s the place you go for everything. But with JavaScript, the language itself has the documenta-… well I guess there isn’t really an official source of JavaScript documentation. There’s the spec, so that’s different. But then there’s also all the platform-specific or the browser APIs or the DOM stuff, or I don’t know. It’s a different situation from other languages because your documentation needs to cover so much beyond, “Here’s how you make an array in the language.” DAVID:  That’s actually a really big compliment when we hear stuff like that, because the amount of effort that we’ve put into making content discoverable and well-organized and such, especially even with just the last redesign, much less everything that happened before. Again, huge compliment to us and our writers that people think of MDN as the first source to go to. JAMISON:  Yeah, I guess I was saying it’s the first source to go to but it also has a wider scope than traditional language documentation sources in other languages, which is cool because you do a lot more. LES:  It’s a weird situation, right? Because we’re documenting the web but we’re also a company that is trying to influence and make the web. But on our documentation site, we’re trying to stay pretty objective and just say, “This is what we do and this is what Chrome does,” and not necessarily point developers towards one thing or another. DAVE:  And when you say, “This is what we do,” you’re specifically talking about Firefox? LES:  Yeah, specifically Mozilla and Firefox’s opinions on what JavaScript should look like on the web. DAVE:  For what it’s worth, I have never gotten the impression that MDN has any kind of bias toward Firefox. It’s always seemed to be really just web. JOE:  Yeah, same. JAMISON:  I think the only impression I get is when it talks about deprecated Firefox APIs. But they’re never things that I care about at all. It just mentions, “This used to apply in some old Gecko engine,” or something. But that’s not like, “Oh right, use our five-year-old Gecko engine for all your stuff,” type thing. It’s like a warning for how it used to work, it seems like. DAVE:  Yeah, you guys need more banners that are like, “Click here to download the best browser ever, now!” [Laughter] LES:  Well, so that’s the funny thing, is that’s the worst influence we ever get from the rest of the company is, “We need more banners to download Firefox.” And we’re like… [Laughter] LES:  “Well, we’re trying not to sway people too much. But yeah, we do think Firefox is the best. But maybe we’ll drive people away if we put giant banners everywhere.” DAVE:  Yeah, you will. AJ:  Yeah, it’s super annoying when I visit Google in Firefox and it’s like, “Have you thought about downloading Chrome?” It’s like, I’m using a legitimate browser. Let me be. CHUCK:  Well, I have to say that, especially with MDN, what you’re talking about is stuff that we all as web developers need to understand. And so, by making a resource where you can see, “This works this way in Opera. This works this way in Firefox. This works this way in Chrome,” we have to deal with these things whether or not we prefer Firefox as our browser. And so, ultimately, that’s one of the things that makes it such a handy resource, is that I can look at it and I can know, “Okay. I can do this kind of thing, but it’s going to be wonky on the Android phone or on the iPhone, or whatever. And so, it’s a resource that I can rely on. In other words, what you’ve built, you’ve built something that makes a lot of sense to the audience that is using it. If you just had information there on Firefox and no one else, then I have to go and look and see somebody else’s compatibility table. Where here, I know that there’s a company behind it, they’re interested in pushing the web forward, they’re doing a lot of forward-thinking things with the web, and I can count on the information there. DAVID:  Yeah. The big keyword with Mozilla is open standard, well keywords, open standards and ensuring that people don’t go the route that Microsoft went so many years ago, which was the reason why Firefox was built. So, as lot as we keep pushing standards, MDN is going to keep being the best place to go for standard information. JAMISON:  Speaking about standards, do you follow any of the, I guess I already asked this. It seems like there’s two kinds of documentations about ES 6 things. There’s the here’s what browsers have implemented stuff. And then you can go to the mailing list or some of the TC39 wikis or things like that to see what the actual spec is. Is there any stuff like that in MDN where you talk about the spec before it’s actually in browsers? Or are you focused more on things that are shipped, even if they are experimental early days? DAVID:  That’s a really great question. And it comes down to both the writing process as well as marking things as experimental if they’re there. It’s not going to be a day-by-day thing where we’re updating or adding things that get talked about in the mailing list. But as things get developed more and more, you start to see them on MDN. And it’s important to point out that contributors can add information as they see fit. So, it’s not just a, what is Mozilla putting on MDN. It’s what are developers everywhere interested in putting on MDN. JAMISON:  Sure. CHUCK:  So, I want to ask this question. And we asked it before but I’m assuming that there’s more of a process behind it than just somebody contributes something or edits a page. What happens, let’s say I go in and I edit a page and I put some information in there that I believe is correct. Does it immediately go live? Or does somebody get a notification, “Hey, this needs to be checked out or verified one way or the other.” LES:  So, it does immediately go live. And that’s been a little contentious from time to time. But all the writers, in fact we’ve got some fanatical writers, that watch the recent changes list all the time. So, your change will go immediately live and then one of those writers will usually swoop in and fix it or review it or do something like that. JOE:  And are these community writers or Mozilla writers? LES:  I think it’s almost 50/50. We’ve got some really amazingly devoted community members and some paid staff. And when I first started MDN I got really confused as to when we were at a meetup who was actually on staff and who was contributing. DAVE:  Where can I go to see the list of recent changes to MDN? DAVID:  We do have a dashboard at the moment. And I’m going to have to look up the address, because it’s been a while since I have gone there as a developer. JAMISON:  I feel like there’s a cliché arc where you talk about stuff, you ask about where did it come from, how does it work now, and I have to ask where is it going in the future? Do you have plans for the future of MDN, things that you want to change or improve or add or something? Beyond just keep up with the current mission of documenting stuff really well. Unless your plan for the future is do a really bad job all of a sudden. [Chuckles] Probably not. DAVID:  Yeah, we’re just going to give up. JAMISON:  Yeah. DAVID:  No, one of the big barriers of entry to documentation, writing documents, is having tools that are easy to use. So, we’re going to continue to strive to make MDN writing tools easier to use. I feel like on the frontend wiki part of MDN, we’ve done a pretty good job with presentation and such. But there are a whole bunch of tools that we haven’t mentioned yet. And one of the big ones actually is an API so that you can pull documentation into your own sites, if you have a blog or something to that effect, as well as pulling in documents via CORS. So, those are two features that are out there that people may not know about. We’d like to improve the Demo Studio. Again, search is a big, big component of what we continue to work on with MDN. But more importantly, we’d love to hear what other people would like improved on MDN so we can make their experience as a writer or a reader better for them. JAMISON:  It needs to pop more. CHUCK:  [Chuckles] JOE:  So, I’m curious about the design and layout of MDN just because I actually think it’s a really nice-looking site. DAVID:  Well, the famous Mozilla designer Sean Martell, he designed the most recent redesign. And I don’t have a lot to say about it. Again, we just try to keep it very simple, very clean. The last thing that you want is stuff moving and animating all over the place when you’re just trying to read how an API works. We did work a lot on organization. And the writers did a great job of using KumaScript to create the left-handed sidebars and in-site navigation to make it easy to find one feature and a sister or a brother of another feature. So again, we try to keep it very simple, very clean. And we continue to work on the tiny nitpicks to make everything look just a little bit cleaner and work a little bit faster. LES:  Yeah, and the writers are really, really closely involved with that design, too. There are many contentious discussions about font sizes and… [Chuckles] LES:  Line lengths and spacing. So, that’s all heavily influenced by the writing staff. JOE:  So, I’m curious if there’s been any interesting things that have happened as far as people getting in a big disagreement over how something should be written or how something works and maybe… JAMISON:  You want to know the editing wars. JOE:  Yeah, exactly. JAMISON:  If they happen [chuckles]. DAVID:  Les and I for the most part have been able to keep out of those wars. We’re just like, after those wars are fought, tell us what you need us to code up for you. [Chuckles] DAVE:  Very nice. DAVID:  So, those happen outside of us for the most part. JOE:  Have there been any infamous ones that have gone on? JAMISON:  Semicolons. [Laughter] JAMISON:  Someone pulls all the semicolons out of all the examples [inaudible]. DAVID:  No, no, none of that. JAMISON:  That’s good. JOE:  Ever get attacked by people that go in and purposely try to overwhelm you by screwing things up? DAVID:  We do have the funny nature of people creating pages on MDN to put their resume on. [Laughter] DAVID:  And the writers are going to kill me for having mentioned that, because I’m sure people will start doing it again. [Laughter] DAVID:  But that’s one of the more funny uses of MDN that we’ve seen. DAVE:  If you’d like to know more about the setTimeout function, hire me. [Laughter] AJ:  Hey, that’s how I get all my work. JAMISON:  Or if people put their dump library to flip text DAVE:  Yeah [Laughs] JAMISON:  Upside-down on MDN or something like that. DAVE:  Have you had that happen before? DAVID:  We haven’t. JAMISON:  [inaudible] vanity open source project. DAVID:  [Chuckles] Not that I’m aware of. But now that you mention that, I’m going to plug the fact that people can create code samples on MDN as well. JAMISON:  Yeah, I was going to ask about that. DAVID:  Yeah, we all love code samples. So, any samples that people want to add to MDN, we’d love to have them. AJ:  So, what about the Konami Code? Where on MDN does the Konami Code do something cool? DAVE:  Ooh, Easter eggs. DAVID:  Contributors are welcome. I’ll let you decide where you want that to go. [Laughter] DAVE:  Tell us more about the code samples like, how does this work? I was reading something after I registered about signing up and it said contribute code and show how it gives output or something. Do you have a system that automatically executes JavaScript or something? LES:  Yeah, there’s a cool system. Well, I think it’s cool because I did some of the first commits to write it. But it takes an MDN page and you can put, I think it’s actually code or pretext. And you put a CSS class on them as html, JS, or CSS. And we have a little micro-service within the wiki that will parse a page, yank out those blocks, and then build a working webpage from those blocks and then serve it up from a separate domain and then we display it in an iframe. So, you can actually create the view. It’s almost like view source in [inaudible]. You create the source on this page and somewhere down on the page in an iframe it will actually hybrid that into a webpage. DAVE:  And do you have a collection of these that are searchable? LES:  I want to say that the writers have been tagging those. It’s like, with code sample or something. I don’t know that it’s searchable in particular. But we’ve got a lot of pages that are using it. DAVE:  So, it’s not just a collection of code samples. It’s meant to supplement existing documentation? LES:  Yeah, it’s almost supposed to be literate programming in that you write the docs around the sample and then you can pull the samples out of the page into a working example. So, I think we’ve been trying to use that on as many pages as possible to show an example of working code right there on the docs. DAVE:  I’ve seen a few examples of that with CSS. But I haven’t seen any with JavaScript. Is it more common with CSS? LES:  I think CSS is where the feature first started getting used. And I think it’s kind of, it’s up to the writers to have time to create those examples. So, I think CSS had some of the heaviest samples to start with. DAVID:  They did. And the writers have been expanding that into SVG more. So, it is starting to spread around the site. But as you guys know, sometimes it takes longer to write a solid demo than it does to write a few paragraphs to describe something. JAMISON:  So, another interesting thing about MDN is I feel like the docs don’t always focus solely on, “Here is the form element. Here are the different attributes it has.” There are some more tutorial-type features on there where, I think about the one on canvas because I always google canvas and it’s gets me MDN then I read it again [chuckles], where it shows, it’s more like a blog post style instead of the strict spec documentation thing. Do you have a particular emphasis on creating those? Or is it just whatever people feel like writing, those kinds of tutorials or anything like that? DAVID:  I think that the writing team has tried to experiment with different types of writing styles. But contributors could also jump on and create those sorts of tutorials to maybe appeal to a broader base, or people looking for a full scale tutorial instead of just an API reference. JAMISON:  Yeah, I guess that’s what I was thinking of. If you are super familiar already with most of the things but you just want to remember a parameter name or something, then the API style documentation is great. But if you just want to say, “How do I SVG? [Chuckles] I know what that is called, but I don’t know anything else about that,” then you need the blogpost style article where it walks you through the background and example and stuff. So, you’re saying it’s just up to the writers? LES:  I think sometimes some of the writers will start with a tutorial article. They’ve taken on the task to document a whole API. They might start with a tutorial just to teach themselves how it works. And I‘ve also seen a few times contributors will come in and just copy pasta one of their own blogposts onto the wiki. JAMISON:  Sure. LES:  And that’s welcome too, as long as it’s good content. DAVE:  So, going back to community contributions. I noticed if you google MDN revision dashboard you can see all the things that have changed recently. That gets you to the link that you posted earlier, David. And that’ll be in the show notes as well, I think. But I think one thing that’s cool is that there are literally dozens if not hundreds of contributions in the last 24 hours. This is very active. And I was surprised to see one of the more recent ones is actually a tutorial for how to use Ember and the Ember CLI. Is that common to have web frameworks have documentation on MDN? LES:  It is. Though Ember in particular, this is going to the new team I’ve started working with where we’ve got an apps engineering team who are trying to look into various frameworks and whatnot to give Mozilla-flavored recommendations on how to use these things with Firefox OS or just with the web in general. And so, I think some of us are starting to write some articles on there to put MDN behind some of these things that everybody’s using on the web. JAMISON:  That’s really cool. I didn’t know about that. This is again under the section that I never get to through Google. So, it was the same as non-existent for me [chuckles]. DAVE:  [Yeah, me too.] JAMISON:  This is cool. DAVE:  So, when I signed up I noticed you send an email and it said, “Here are some things you can do to contribute to MDN. This will take 5 to 15 minutes. This will take 30 minutes if you want to do that.” Where do you think that our listeners could go if they felt compelled, felt like they wanted to give back to MDN. What would be some of the top things that you need help with right now? DAVID:  I would say one thing that’s really invaluable is translation, because as soon as you translate a document you open up that world of code and explanation to a whole lot of people that speak that same language. But we do at the bottom of the homepage have a ‘help improve MDN’ section. And we’ve got a really nice list of links of places where people can go to chip in to different things. So, you can be an editor, a technical reviewer, which is really nice, translating, just promoting MDN is actually a really big help. And lastly as a developer I would love more help on the actual MDN codebase on the backend. So, not only can you improve documentation, if you’re somebody that’s not into writing documentation and you want to write code, we could still use your help. JOE:  That’s awesome. DAVE:  Is the code hosted on GitHub or somewhere we can go browse it? DAVID:  Yeah, absolutely. Kuma itself is hosted on GitHub under the Mozilla repo, and that’s K-U-M-A, as well as the templating language that Les created, KumaScript is also within the Mozilla account. DAVE:  Oh hey, it’s Django. Super cool. LES:  Yeah, quite a lot of our web dev server-side stuff is Django at Mozilla. But yeah, I think the localization thing is really important to think about because MDN supports something like, I think we’re up to 40 languages. And the contribution to all those languages is uneven. But that I think is a unique thing versus a lot of sites, is that we actually have quite a lot of stuff in French and German and Japanese, and that stuff is all really cool when you see these really super enthusiastic people jumping in and translating all that stuff. DAVE:  Another link I just discovered clicking around is the MDN Demo Studio. Can you talk about that? DAVID:  Sure. Like Les had mentioned, the Demo Studio is a place where you can upload your really awesome demos and brag about it quite a bit, to be honest. One of the more awesome demos that we’ve hosted on the Demo Studio in the past was something called BananaBread. And it was basically, I believe the Unreal Engine ported to JavaScript. So, you could play this first-person shooter right from within MDN. And it was really incredible and really awesome to see. But we also have basic samples. So, the Demo Studio is a nice place to go for inspiration and fun for 15 minutes. LES:  Yeah, and I think we originally started that as our, not really competitor but another alternative to Chrome Experiments, if you guys remember that site. And we wanted to make the Demo Studio as open for uploads and examples as the wiki itself is. And for a while, we even had a competition going called the Dev Derby where every quarter we would solicit demos on a particular technology like WebGL or CSS3 animations, things like that, because we really wanted to flesh the thing out with working examples to link to from the wiki. I think we’ve backed away from promoting it a bit. But it’s a neat site feature that I think we’ve been putting some more thought into. CHUCK:  So, one other thing that I’m wondering a bit is, is there something that Mozilla expects to get out of having the MDN? I can see certain advantages to owning the place to go to get information about web APIs or developer tools. But is there something in particular that Mozilla sees as an advantage for them to run this? Because I’m not paying for it and a bunch of other folks aren’t paying for it, but we’re getting value out of it. DAVID:  Well, if you think about it, that’s a lot of what Mozilla does, right? So, Mozilla doesn’t charge for Firefox or Thunderbird. You can download the code to almost anything for free from Mozilla. I would say, I guess one advantage would be that it provides us a place that we can add our Firefox OS documentation. But I don’t know that MDN is something that has a fiscal value to Mozilla at the moment. LES:  Yeah, part of the Mozilla mission is if you think about Firefox, the whole reason Firefox started was to provide some opposition to Microsoft Internet Explorer. And so, MDN is a place to provide, it aligns with our mission to provide unbiased web documentation. So, we’re not privileging any particular proprietary API over another. And if you want to be cynical about it, it gets our brand out there. It’s nice to be noticed all the time. But the honest truth is it’s out there because we want to make sure there’s at least one source of unbiased info about the web. CHUCK:  I’ll buy that. JOE:  So, speaking of one source of unbiased and high quality info, what have you guys been, as far as your struggles with page rankings in Google and other search engines, what have you done about that? DAVID:  So, when I got to Mozilla roughly three years ago, I noticed that MDN wasn’t really doing anything for SEO which I found shocking. [Chuckles] It had great quality content, right? So, it was always something that was on the first page. But I added features to ensure that we were doing at least the bare minimum. And then we worked up from there. But I have to really credit the writers, because they’ve done a very good job of keeping search engines and the keyword stuff in mind with the writing. And we’ve seen quite a bit of improvement, whereas we were halfway down the page we shot up to first or second. And I can’t speak to what exactly they did to improve that. But it did become an effort a few years ago. And it’s really paying off right now. JOE:  I will say that one of the most frustrating I find is when you’re number two. LES:  Yeah, I hate being number two. CHUCK:  [Laughs] DAVID:  Yeah, we’re working on that, trust me. JOE:  Because it’s not so bad that you’re number two. It’s who’s number one that really bothers you. CHUCK:  Yeah. JAMISON:  It’s that they-who-shall-not-be-named are number one. JOE:  Yeah. So, I actually, you know I do a lot of teaching. I frequently talk about the MDN. And every time I talk about where to go to find information, I always say when you hit Google the first thing you type in is MDN and then you type in your search phrase. DAVE:  Nice. CHUCK:  [Chuckles] That’s a good idea. JOE:  Yup. And it brings up only the site you want to see. AJ:  It really is. DAVE:  I’ve started doing that, too. DAVID:  Well, one thing to remember is that if you go to MDN, within your search bar in Firefox MDN pops up as an in site search. You can add the MDN search engine to your browser itself. So, that’s one way you could get to us. So, you know, otherwise I’m not going to take the bait on who you’re talking about as number one. [Laughter] CHUCK:  It really is frustrating, though. I’ve had it bite me so many times. Anyway. [Chuckles] CHUCK:  You know, I’ll go look it up and I’ll do what it says and I’ll get it wrong. And then I’ll come back and do what it says on MDN and it’s like, “Oh. Well, duh. Why did I go to the other site?” JAMISON:  Now you know. CHUCK:  Yeah. LES:  Oh yeah. Since we’re mentioning other sites, I also want to mention that there’s another one called WebPlatform.org. And I know I mentioned earlier MDN’s goals to be at least one unbiased source out there. Well, WebPlatform.org is another one. We share a lot of content with them. And I mentioned that to say we’re not trying to have a strangle hold on this stuff. We actually let them copy a lot of pages and they’ve got a lot of original stuff. So, our whole mission is we would like to be number one in search results but our main goal is we want to make sure everyone’s got documentation on this web platform. JAMISON:  Is there a Creative Commons License on content on MDN? What’s the license on it? LES:  I forget what the exact license is. I want to say it’s a derivative of our Mozilla public license. I’d have to look that up to be sure. JAMISON:  But from the sound of it, it sounds like it’s okay to copy if you’re using it for non-profit purposes? Or is it copy it and do whatever you want with it? DAVID:  If we can find somebody that’s good at understanding licenses, I would love to know. [Laughter] DAVID:  What I can tell you is that we do have a full API which people can pull content from MDN. And we’ve also enabled CORS for the same purpose. So, we’ve got to a great length to make sure that people can pull the content from us. JOE:  Right. LES:  Yeah. I think we’d rather have people transclude the content than fork it off and use it elsewhere. I don’t think it’s licensing that we’re against it. But I think it’s like, we would like to bring in contributors so it’s great to use our content. And we’d also like it if you swing by and help us out. JAMISON:  Sure. AJ:  That’s a really good idea, the CORS thing and the idea of transcluding the content. So, somebody could create a site that has your relevant content, maybe has some additional content that doesn’t quite fit right with the format. But you know, when your site is updated and that content gets corrected, that their site also gets corrected. I like that. LES:  Yeah, and we’ve had folks build tools that do that. I think there’s a couple of OS X, Mac OS X desktop tools that download everything offline and do a local search. And that stuff’s pretty cool. DAVE:  Oh yeah. LES:  But they have to scrape and re-update every time. DAVE:  Yeah, that makes a lot of sense. JAMISON:  I just like to thank the Angular project for making people understand what the word transclude means. [Laughter] JOE:  It’s one contribution to society. JAMISON:  Yup. First everyone made fun of them for it. But did you see that conversation we just had? JOE:  Yup. JAMISON:  Brought to you by the word transclude. DAVE:  Yes. JOE:  It’s probably going to be word of the day on Sesame Street soon. JAMISON:  [Chuckles] Probably. CHUCK:  There you go. [Chuckles] LES:  Yeah, [inaudible] it’s even an old term going all the way back to the 70s with Ted Nelson and whatnot. JAMISON:  Yeah. I think it’s old. But I had never heard of it until Angular and the first time I heard of it, it was like, “What is that made up nonsense, transclude?” JOE:  Yeah. JAMISON:  Then I googled it and felt dumb. JOE:  Well, and I’ve heard the word thunk recently which is also an old word but is making a resurgence. LES:  Everything’s all intertwingly. JAMISON:  [Chuckles] Yup. CHUCK:  [Laughs] LES:  This is what happens when you get wiki nerds talking. JAMISON:  [Chuckles] CHUCK:  Alright. Well, anything else that we should talk about with MDN before we get to the picks? DAVID:  Please contribute. [Chuckles] Like I said, we have a bunch of ways that you can contribute to MDN and those are cited on the MDN homepage. And we’d love to have you and help you get started. JOE:  So, I would like to mention my favorite feature or one of my favorite features about MDN, is when you’re looking at ES 6 features there’s actually a sample of a polyfill for it, which I think is completely awesome. If the feature can be polyfilled then the code is right there on MDN. “Here’s the polyfill for it,” in case you don’t want to use a big polyfill library. You just want to polyfill that one feature and want to use that in your ES 5 code. Love that feature. DAVID:  Shout-out to our writers or whoever contributed that. CHUCK:  Yeah, I’ve done that actually where I just defined a function, just copied and pasted it right off of there because that was the only one I needed. Alright. Well, let’s go ahead and do some picks. AJ, do you want to start us off with picks? AJ:  No, I don’t. CHUCK:  Alright. [Laughs] JAMISON:  I can volunteer. CHUCK:  Okay, go ahead. JAMISON:  Okay. I only have one pick. It’s an article called ‘You Are Learning Haskell Right Now’ by Michael Bernstein. I don’t know. He’s this distributed systems person. I really like it because it communicates the reality of how long it takes someone who is very smart and very accomplished to actually learn things. I feel like sometimes, this starts back in school where you brag about how little time it took you to do your homework or how little you studied for the test and still got a great grade or something like that. People enjoy pretending like it took them less effort than it really did to acquire some skill or accomplish something. And he lays out how long he’s been studying Haskell, which has this reputation for being difficult to show that even though he’s supposedly this smart really talented programmer he still struggled for a really long time with it. And it’s a pretty short read, but I just really liked it. It gets into Impostor Syndrome and things beyond Haskell specifically. But it made me feel better about myself, which is a good thing to get from a blogpost. That’s it, my only pick. CHUCK:  Alright. Joe, what are your picks? JOE:  Alright. So, my first pick is going to be Code.org. I think I talked about this last week. But they’re just a really awesome site especially for if you’re interesting in helping your kids learn to program. They do a lot of interesting stuff. They have a lot of interesting pre-built stuff for games your kids can play and learn to program. And they’re just a great non-profit organization, one of the better ones out there. So, I’m going to pick them. And I also want to pick the MDN because I love the MDN. DAVE:  Aww, you stole my pick. [Laughter] JAMISON:  Now I have to interject, is it the MDN or is it MDN, because we have an iPhone/the iPhone situation here. Is it the iPhone or is it iPhone? Is it MDN or the MDN? LES:  I think the team is split on that. I’ve always just called it MDN. But then I think I’ve heard half the rest of the team call it the MDN. DAVID:  Well Les, it’s just you and I and I also call it MDN. So, we’re just going to say it’s MDN. JAMISON:  Yeah, decree it. CHUCK:  Hey, if it’s on JavaScript Jabber it’s official. JAMISON:  Okay. I’m going to change it to The Notorious MDN then, if it’s official. JOE:  The Notorious MDN. [Chuckles][laughter] JOE:  The Unsinkable MDN? JAMISON:  [Chuckles] Her Majesty’s MDN. JOE:  Right. [Laughter] CHUCK:  Awesome. LES:  Very nice. JOE:  For my final pick I’m going to pick a board game called Splendor. It’s a little bit like a deck building game but it’s not at all like a deck building game. So, that’s probably the best way to describe it. It’s a really fun game. It’s a small group game, two to four players. I had a really fun time, played it for the first time this last weekend. Truly enjoyed it. So Splendor, great gift idea for Christmas if you were short on them. And that’s my picks. CHUCK:  Awesome. AJ, what are your picks? AJ:  Okay. So, I didn’t think much about picks this week, obviously because I was not ready the first time you picked on me. However, in case you didn’t hear you’re hearing this a week late so it doesn’t matter. You’re just out of the loop and there’s nothing you can do about it. But Nintendo amiibo are the new Beanie Babies. And… [Chuckles] AJ:  It turns out that Best Buy has a product search API that is two clicks to get access to. You got to have and API key of course. So, I’m going to build a little thing to see as soon as it’s available for order online and have it send me an email so I can get the one I want. So, I pick Best Buy’s API. [Laughter] CHUCK:  He picks Best Buy Beanie Babies. JAMISON:  And there’s no way that in six months you won’t have a shelf filled with tiny figurines and regret. LES:  Yeah, one for loop with a bad range on it, you get 500 Beanie Babies. [Laughter] AJ:  No, no, no, no. It’s not going to purchase them. LES:  Oh, okay. AJ:  It’s going to notify me that it went from out of stock to available so that I can nab it. DAVE:  AJ, take it to the next level. Just buy it. AJ:  Okay, maybe I should. Maybe I should. Well, maybe in that case… JAMISON:  I have 700 Waluigis and sadness. [Laughter] AJ:  In that I case what I need to do is I need to cross-reference against Amazon’s API and Target and Walmart and GameStop and Toys R Us’s API so that I can see what’s the most rare and buy all of them until it goes out of stock. DAVE:  Won’t you modify the rareness by buying it even more? AJ:  That’s fine because then I would be the sole owner of all of the available ones which would make me profitable. DAVE:  I love this [about you]. I love it. CHUCK:  Guys, stop trying to break AJ. DAVE:  I love this about you, AJ. CHUCK:  [Chuckles] DAVE:   So cool. AJ:  [inaudible] CHUCK:  Alright, Dave. What are your picks? DAVE:  Okay, so first one is a book written by Ben Horowitz of the famous venture capital firm Andreessen Horowitz. The book is titled ‘The Hard Thing About Hard Things’ and it’s an interesting take on technology startups. And specifically it’s written toward people who want to become or are already a founder or CEO of a technology startup. And I read it because I wanted to think about things from a different perspective and it was very interesting. It definitely gave me a new perspective and gave me insight into a lot of things that founders and CEOs that I’ve worked with have done or are doing. And I recommend it. It was pretty interesting. It reads like a handbook. So, it says things like, “If you ever need to fire an executive, here’s a four-step process.” You know, things I’ve never thought about. But it was interesting. It’s ‘The Hard Thing About Hard Things’. The second pick this week is from, it’s an article by Kris Kowal who… you may remember Kris Kowal from, he’s the author of the JavaScript Q library. He wrote a rather lengthy article called ‘The General Theory of Reactivity’. And if you want to just go and geek out about promises, tasks, generators, asynchronous values, and spend a good long time sinking into it, I recommend this article. It’s actually a readme file on a GitHub project called kriskowal/gtor, general theory of reactivity. And I actually have not yet finished it. It’s pretty intense. So, I’m going to keep reading it. But I think that it’s got a lot gems in it to really help you distill concepts down to their essence and talk about what they are. Anyway, so those are my two picks for this week. CHUCK:  I like gems, but I’m a Ruby developer. Anyway… JOE:  Har-har. CHUCK:  Yeah, bad joke. Anyway, so I’ve got one pick. And that is I had to get a new router. The old router was just not cutting it. The calls were cutting in and out. And anyway, so the router is a NETGEAR Nighthawk AC1900. And it’s actually huge. It’s got 3 antennas on it. It does the AC which is the new best and greatest I guess wireless technology. It also does N and whatever the other ones are. So, it works really well. It also has a QOS on there and on Adventures in Angular we had Scott Hanselman on. And while we were talking and getting stuff set up he mentioned that having QOS on your router is awesome because then it can prioritize Skype calls over things like Netflix or file downloads or anything. AJ:  Wait, shouldn’t Netflix be prioritized? CHUCK:  It does have a QOS for the other way, for Netflix. AJ:  Okay, good. DAVE:  Chuck, is it able to prioritize the Best Buy API? [Chuckles] CHUCK:  I believe that you can add in your own rules. DAVE:  Oh, thank goodness. CHUCK:  So, you can put in there the keyword for BestBuy.com or whatever. And then if that’s in the header somewhere then I think it’ll prioritize it through. But it has automatic rules for upload, for Skype, and for download, for all the other stuff like Netflix. I think it was in the list for download, but I didn’t turn on QOS for download because I want to prioritize your voices coming to me as opposed to Netflix. But anyway, I’m really liking it. And so far, it’s been nice to have a new router. Everything seems to be going more smoothly that way. I also have an anti-pick. And that is the feature that allows you to receive phone calls from your iPhone on your Mac. It’s super handy except for when you’re recording a podcast. And none of you heard it but my phone rang. [Chuckles] CHUCK:  For about two seconds in the middle of this episode. And I’ve looked everywhere for, I turned on do not disturb, I’ve done all this other stuff, and the features either aren’t powerful enough or they just don’t work. And so, I’m frustrated about it. I turned it off. Hopefully, they’ll put in some more rules so that I can just turn it on and off as I want instead of having to open up preferences on FaceTime and telling FaceTime to shut up. But anyway, so that’s an anti-pick. David, what are your picks? DAVID:  I have one pick this week and it is from Lara Hogan. She wrote a book for O’Reilly called ‘Designing for Performance’. And last year while I was doing, after I did a keynote at a conference she spoke right after me. And she made me look like a coloring book salesman. [Chuckles] DAVID:  She was so good. She’s from Etsy and she heads up their engineering department. And her focus is primarily on performance, which is something that a lot of people are happy to just get something working. But she really goes in and makes stuff performant. She provided loads of statistics on how cutting down on a request or making something faster saw an increase in purchases through Etsy. And she recently posted an excerpt of her book on my blog at DavidWalsh.name. So, I really recommend people check out the excerpt and then get the book because she’s brilliant. And I think people will get a lot out of it. DAVE:  Super cool. CHUCK:  Yes, definitely. We might have to get her on this show. Alright, Les what are your picks? LES:  Alright, so I got three picks but I’ll be quick. My first pick is actually Pocket Casts for web and Android. I’ve been listening to podcasts for years and years since I had to write my own scripts to download the mp3s. And my second pick is my favorite podcast besides this one which is The Retroist. And The Retroist is amazing if you’re a child of the 80s. He’s up to 179 episodes now that go into obsessive detail about everything from The Karate Kid to, oh Frisbees and all that. And then my third pick is the ‘This is EVE’ trailer for Eve Online. I don’t know if you guys are into spaceship porn or sci-fi but I’m kind of addicted to that game. But the interesting thing, the reason I’m addicted to it is not to fly spaceships but because of all the web APIs they have. So, I’ve actually written quite a lot of my own private Node.js code and accessing web APIs to handle logistics and do market stuff. And it’s all really interesting to a certain brain-damaged kind of nerd. CHUCK:  Oh, dear. I think you just spent a whole bunch of my time and money. LES:  And that trailer on YouTube for Eve is just amazing. JAMISON:  I’ve never played Eve but I’m glad it exists because it makes some cool stories. LES:  Yeah, that’s usually what happens. CHUCK:  Alright, well thanks for coming guys. I really appreciate you taking the time out and I just want to tell you and all the writers for MDN just how much we appreciate all of the work that’s gone into it and the help that it gives us when we need it. DAVE: Hear, hear. CHUCK:  And with that, we’ll wrap up and we’ll catch everybody next week.[Have you noticed that a lot of developers always land the job they interview for? Are you worried that someone else just landed your dream job? John Sonmez can show you how to do this with the course ‘How to Market Yourself as a Software Developer’. Go to DevCareerBoost.com and sign up using the code JJABBER to get $100 off.]**[This episode is sponsored by MadGlory. You’ve been building software for a long time and sometimes it’s get a little overwhelming. Work piles up, hiring sucks, and it’s hard to get projects out the door. Check out MadGlory. They’re a small shop with experience shipping big products. They’re smart, dedicated, will augment your team and work as hard as you do. Find them online at MadGlory.com or on Twitter at MadGlory.]**[Hosting and bandwidth provided by the Blue Box Group. Check them out at Bluebox.net.] **[Bandwidth for this segment is provided by CacheFly, the world’s fastest CDN. Deliver your content fast with CacheFly. Visit CacheFly.com to learn more.]**[Do you wish you could be part of the discussion on JavaScript Jabber? Do you have a burning question for one of our guests? Now you can join the action at our membership forum. You can sign up at JavaScriptJabber.com/jabber and there you can join discussions with the regular panelists and our guests.]

Sign up for the Newsletter

Join our newsletter and get updates in your inbox. We won’t spam you and we respect your privacy.