Useful Sites for Web Developers: Pt. 2
MDN (Mozilla Developer Network) Web Docs 🔗
URL: https://developer.mozilla.org/en-US/
MDN (formerly Mozilla Developer Network) Web Docs is the authoriative source for all things World Wide Web. This comprehensive website, launched in 2005, maintains detailed, technical reference documents and tutorials on a wide variety of topics, including HTML5, CSS3, Django (a Python web development framework), JavaScript, MathML, Node.js (a popular JavaScript runtime environment), as well as Web APIs, Extensions, and Technologies. MDN Web Docs’ knowledge repositories represent the collaborative contributions of web development and telecommunications experts from industry giants Mozilla, Google, Microsoft, and Samsung, as well as thousands of amateur and professional independent developers who are part of the MDN community worldwide.1 In addition to providing articles on web technology topics, the site also features a soup to nuts, self-paced course on web development in its “MDN Learning Area” (under “Guides”). In short, MDN Web Docs delivers on its mission statement: “to provide a blueprint for a better internet and empower a new generation of developers and content creators to build it.”2
One of the features that I find extremely useful about MDN Web Docs is its table of contents-style navigation. I can visit the site with a general topic in mind, e.g., CSS pseudo-classes, and then drill down to more specific topics as I traverse the TOC tree from root to leaves. Before I browse more specific topics, MDN Web Docs warns me if the selected topic is “Experimental” by placing a beaker icon to the left of the topic name. The left-side navigation tree breaks down topics at the macroscopic level; once I reach the article I desire, a second navigation bar appears stickied to the upper-right side of the browser window that links to subtopics within that article. I appreciate having these dual navigation bars accessible at every turn because I tend to venture down hyperlinked rabbit holes while browsing this veritable hypertext Library of Alexandria—relying solely on the Back button to return from Wonderland would prove incredibly tiresome. If what I find in the article seems incomplete or in need of correction, I can locate links to the official MDN Web Docs GitHub repository at the bottom of the article and submit issues or suggested revisions on that companion site. In summation, MDN Web Docs accentuates its usefulness as a web development resource by incorporating ease of navigation and methods of user contribution into the ever-growing bodies of knowledge hosted on a generally streamlined, minimalistic site.
Let’s see how MDN Web Docs fares after taking some objective measurements.
WebSpeed Insights Analysis:
Test Conditions:
OS: Android 12
Cellular Network: Boost Mobile 5G
As you can see from the gauges above, MDN Web Docs scores well in terms of “Accessiblily” and “Best Practices” on both desktop and mobile platforms. However, the test results reveal a stark difference between desktop and mobile platforms in terms of “Performance.” The mobile platform test, in particular, reveals a number of surprising issues found on a site devoted to the best and latest information about web technologies. For instance, MDN Web Docs loses points on rubrics such as “First Contentful Paint” (2.6 s), “Time to interactive” (5.6 s), “Elimination of render-blocking resources” (with a potential savings of 1,640 ms), and “First Contentful Paint (3G)” (5730 ms). While these lower marks do not suggest that the site is a miserable failure on mobile devices, they do raise questions concerning the site’s intended audience, especially given that fixes to some of these issues, e.g., removal/replacement of a render-blocking CSS file, strike me as fairly simple to execute.
lambdatest.com Results (a sample)
Google Chrome
-768x1024.png "developer.mozilla.org/en-US/ on the Apple iPad 6th Generation")
Mozilla Firefox
-firefox-768x1024.png "developer.mozilla.org/en-Us/ on the Apple iPad 6th Generation")
With the exception of minor variations in how different browsers display certain colors used on developer.mozilla.org, lambdatest.com reports no significant differences in functionality across various browsers.
The Bottom Line:
To be perfectly honest, I could probably spend all day browsing MDN Web Docs: the temptation to dive into this deep pool of WWW wisdom is seldom easy to resist. If there are web developers in the field who do not rely on MDN Web Docs as heavily as I do for day-to-day reference and long-term study, I would highly recommend that they at least acquaint themselves with this rich online resource. The web is a living, breathing creature always growing and moving in new directions. In my humble opinion, MDN Web Docs is one of the best web destinations allowing visitors to keep tabs on the web’s changes and movements. It should not only be the first stop on a fledgling web developer’s journey toward mastery but also a regular haunt for the more adept developer.