mozilla.social is part of the decentralized social network powered by Mastodon.

Administered by:

Server stats:

313
active users

Learn more

September's Contribution Spotlight is on Hochan! ๐ŸŒŸ

He has been involved since 2021, as part of the yari-content-ko team with seven members, and has converted content from HTML to Markdown, removing Kumascript macros, & much more! ๐Ÿ‘

Read his journey ๐Ÿ‘‡
developer.mozilla.org/en-US/co

The MDN Web Docs logo, featuring a blue accent color, displayed on a solid black background.
MDN Web DocsMDN Web DocsThe MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.
MDN Web Docs<p>Using custom accordions? There&#39;s an easier way! ๐Ÿช— </p><p>The &lt;details&gt; element now has a name attribute with support across all major browsers.<br />โœจ No more custom handling for UI accordions<br />โœจ Less code to maintain<br />โœจ Native browser support</p><p>Try now ๐Ÿ‘‡ <br /><a href="https://developer.mozilla.org/en-US/blog/html-details-exclusive-accordions/" target="_blank" rel="nofollow noopener noreferrer" translate="no"><span class="invisible">https://</span><span class="ellipsis">developer.mozilla.org/en-US/bl</span><span class="invisible">og/html-details-exclusive-accordions/</span></a></p>
MDN Web Docs<p>Level up! โฌ†๏ธ</p><p>We are bringing a Back-To-School offer from our partner, Scrimba! MDN users can now get a 30% discount on Scrimba&#39;s Frontend Developer Career Path until Oct 12! ๐Ÿ“š</p><p>Start learning now ๐Ÿ‘‡<br /><a href="https://scrimba.com/learn/frontend?via=mdn" target="_blank" rel="nofollow noopener noreferrer" translate="no"><span class="invisible">https://</span><span class="ellipsis">scrimba.com/learn/frontend?via</span><span class="invisible">=mdn</span></a></p>
MDN Web Docs<p>He studies Data Science and Linguistics, and is also being a member of the Docusaurus and the <span class="h-card" translate="no"><a href="https://fosstodon.org/@tseslint" class="u-url mention">@<span>tseslint</span></a></span> teams. ๐Ÿ‘ </p><p>We thank Joshua for the time he spends making MDN better by keeping everything up-to-date. โค๏ธ </p><p>Read more about Joshua ๐Ÿ‘‡ <br /><a href="https://developer.mozilla.org/en-US/community/spotlight/joshua-chen" target="_blank" rel="nofollow noopener noreferrer" translate="no"><span class="invisible">https://</span><span class="ellipsis">developer.mozilla.org/en-US/co</span><span class="invisible">mmunity/spotlight/joshua-chen</span></a></p>
MDN Web Docs<p>Our contributors help us become better everyday, and the Spotlight for August is on, Joshua Chen! ๐Ÿ”† </p><p>Joshua has been around as an expert for a long time now, and contributes beyond what his role demands, and often triages issues, reviews PRs, and fixes content bugs.</p>
MDN Web Docs<p>Intl.Segmenter is now supported in all major browsers!</p><p>Build locale-aware UI and applications. Splits text into meaningful units based on the locale, this ensures that your app can handle non-Latin text, like Japanese or Hindi, with precision.</p><p>Try now ๐Ÿ‘‡ <br /><a href="https://developer.mozilla.org/en-US/blog/javascript-intl-segmenter-i18n/" target="_blank" rel="nofollow noopener noreferrer" translate="no"><span class="invisible">https://</span><span class="ellipsis">developer.mozilla.org/en-US/bl</span><span class="invisible">og/javascript-intl-segmenter-i18n/</span></a></p>
MDN Web Docs<p>Monday mornings be like... โ˜•</p>
MDN Web Docs<p>โณTimeโ€™s running out! The State of CSS 2024 survey closes tomorrow, September 7! If you havenโ€™t already, nowโ€™s your chance to share your insights and help shape the CSS. Letโ€™s build the future together ๐Ÿ’ป๐Ÿš€</p><p>๐Ÿ‘‰ Take the survey today! <a href="https://survey.devographics.com/en-US/survey/state-of-css/2024" target="_blank" rel="nofollow noopener noreferrer" translate="no"><span class="invisible">https://</span><span class="ellipsis">survey.devographics.com/en-US/</span><span class="invisible">survey/state-of-css/2024</span></a></p>
MDN Web Docs<p>Why wait for a resource to download when you can process it as it arrives? The Streams API lets you:</p><p>โฉ Work with continuous data streams<br />โ™ป๏ธ Transform data on the fly<br />โŒ Cancel streams if you have the data you need</p><p>Learn about the Streams API via Vultr:</p><p><a href="https://developer.mozilla.org/en-US/blog/efficient-data-handling-with-the-streams-api/" target="_blank" rel="nofollow noopener noreferrer" translate="no"><span class="invisible">https://</span><span class="ellipsis">developer.mozilla.org/en-US/bl</span><span class="invisible">og/efficient-data-handling-with-the-streams-api/</span></a></p>
MDN Web Docs<p>We are looking for feedback! ๐Ÿ“ฃ</p><p>Do you find the &#39;Global values&#39; on the CSS pages useful?</p><p>๐Ÿ”— Example here: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background#syntax" target="_blank" rel="nofollow noopener noreferrer" translate="no"><span class="invisible">https://</span><span class="ellipsis">developer.mozilla.org/en-US/do</span><span class="invisible">cs/Web/CSS/background#syntax</span></a></p>
MDN Web Docs<p>nobody will remember:<br />- your salary<br />- how โ€œbusy you wereโ€<br />- how many hours you worked</p><p>people will remember:<br />- that obscure CORS error<br />- where the flexbox guide tab is<br />- checking BCD tables to see if a feature is supported yet</p>
MDN Web Docs<p>Using git stash before switching branches can be messy! ๐Ÿซ  </p><p>Stashing is better for breaking complex changes into smaller commits:<br />๐Ÿงน Keep your history clean<br />๐Ÿ” Review easily<br />๐Ÿ“ˆ Stay on track</p><p>@gitlab shares workflow tips on how to break them down here ๐Ÿ‘‡ <br /><a href="https://developer.mozilla.org/en-US/blog/optimize-your-workflow-git-stash/" target="_blank" rel="nofollow noopener noreferrer" translate="no"><span class="invisible">https://</span><span class="ellipsis">developer.mozilla.org/en-US/bl</span><span class="invisible">og/optimize-your-workflow-git-stash/</span></a></p>
MDN Web Docs<p>If MDN was a playlist...</p><p>What would you add here? ๐ŸŽง</p>
MDN Web Docs<p>CSS has come a long way in the past decade, laying the groundwork with Flexbox, Grid, and variables. But the future? </p><p>We shape it with your helpโ€”participate in the State of CSS 2024 survey!</p><p>Letโ€™s shape the future of web design together. โœŠ <br /><a href="https://survey.devographics.com/en-US/survey/state-of-css/2024" target="_blank" rel="nofollow noopener noreferrer" translate="no"><span class="invisible">https://</span><span class="ellipsis">survey.devographics.com/en-US/</span><span class="invisible">survey/state-of-css/2024</span></a></p>
MDN Web Docs<p>Are you building mobile apps? ๐Ÿ“ฑ</p><p>Learn why debugging on multiple devices is critical and how you can incorporate testing and debugging using LambdaTest into your development lifecycle.</p><p>See the latest post by LambdaTest โ†“ <br /><a href="https://developer.mozilla.org/en-US/blog/debug-mobile-apps-across-devices/" target="_blank" rel="nofollow noopener noreferrer" translate="no"><span class="invisible">https://</span><span class="ellipsis">developer.mozilla.org/en-US/bl</span><span class="invisible">og/debug-mobile-apps-across-devices/</span></a></p>
MDN Web Docs<p>โšก Faster Load Times<br />๐Ÿชด Improved User Experience<br />๐Ÿ—๏ธ Optimized Resource Management</p><p>This is what you get using rel=&quot;preload&quot;, and you can preload your custom font, or a large JS file.</p><p>Check the reference ๐Ÿ‘‡<br /><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/preload" target="_blank" rel="nofollow noopener noreferrer" translate="no"><span class="invisible">https://</span><span class="ellipsis">developer.mozilla.org/en-US/do</span><span class="invisible">cs/Web/HTML/Attributes/rel/preload</span></a></p>
MDN Web Docs<p>โœจ Tests for CORS: Referrer policy, CSP, TLS<br />โœจ CSP analysis<br />โœจ Server header values<br />โœจ Cookies detection<br />โœจ Benchmark comparison<br />โ€ฆand much more with the new MDN HTTP Observatory! ๐Ÿ”</p><p>Try here โ†ฏ<br /><a href="https://developer.mozilla.org/en-US/observatory" target="_blank" rel="nofollow noopener noreferrer" translate="no"><span class="invisible">https://</span><span class="ellipsis">developer.mozilla.org/en-US/ob</span><span class="invisible">servatory</span></a></p>
MDN Web Docs<p>๐Ÿ’ก Learn with MDN using Scrimba&#39;s unique format: a blend of video-like lessons and interactive coding! Learn with engaging and effective methods that involve both reading and practice.</p><p>Check it out ๐Ÿ‘‡<br /><a href="https://developer.mozilla.org/en-US/curriculum/" target="_blank" rel="nofollow noopener noreferrer" translate="no"><span class="invisible">https://</span><span class="ellipsis">developer.mozilla.org/en-US/cu</span><span class="invisible">rriculum/</span></a></p>
MDN Web Docs<p>Did you know? ๐Ÿค” </p><p>The InputEvent API provides a way for developers to override browser handling of text editing, avoiding bugs or inconsistencies in different browsers. ๐Ÿ“</p><p>Check it out โ†ฏ<br /><a href="https://developer.mozilla.org/en-US/docs/Web/API/InputEvent" target="_blank" rel="nofollow noopener noreferrer" translate="no"><span class="invisible">https://</span><span class="ellipsis">developer.mozilla.org/en-US/do</span><span class="invisible">cs/Web/API/InputEvent</span></a></p>
MDN Web Docs<p>What was the last section you visited on MDN? ๐Ÿ‘€</p>
MDN Web Docs<p>Named capturing groups allow you to assign names to your capturing groups. No more counting parentheses!</p><p>๐Ÿ” Improve readability<br />โœจ Easy to Maintain<br />๐Ÿ—’๏ธ Simplified Access</p><p>Start writing cleaner, more understandable regex patterns ๐Ÿ‘‡<br /><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Regular_expressions/Named_capturing_group" target="_blank" rel="nofollow noopener noreferrer" translate="no"><span class="invisible">https://</span><span class="ellipsis">developer.mozilla.org/en-US/do</span><span class="invisible">cs/Web/JavaScript/Reference/Regular_expressions/Named_capturing_group</span></a></p>
MDN Web Docs<p>Working with popovers? ๐Ÿฟ</p><p>The Popover API allows you to create popoversโ€”small overlay elements that can display additional content or actionsโ€”providing users with relevant information when they need it โž• a great alternative to modals!</p><p>Discover how โ†ฏ<br /><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/popover" target="_blank" rel="nofollow noopener noreferrer" translate="no"><span class="invisible">https://</span><span class="ellipsis">developer.mozilla.org/en-US/do</span><span class="invisible">cs/Web/API/HTMLElement/popover</span></a></p>
MDN Web Docs<p>Donโ€™t let device sleep interrupt your app ๐Ÿ˜ด</p><p>Sometimes, users need an app to stay running without the screen locking or dimming. The Screen Wake Lock API lets you request a wake lock! ๐Ÿซจ</p><p>Check the API Reference here โฌ<br /><a href="https://developer.mozilla.org/en-US/docs/Web/API/Screen_Wake_Lock_API" target="_blank" rel="nofollow noopener noreferrer" translate="no"><span class="invisible">https://</span><span class="ellipsis">developer.mozilla.org/en-US/do</span><span class="invisible">cs/Web/API/Screen_Wake_Lock_API</span></a></p>
MDN Web Docs<p>โšก Faster Load Times<br />๐Ÿชด Improved User Experience<br />๐Ÿ—๏ธ Optimized Resource Management</p><p>This is what you get using rel=&quot;preload&quot;, and you can preload your custom font, or a large JS file.</p><p>Check the reference ๐Ÿ‘‡<br /><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/preload" target="_blank" rel="nofollow noopener noreferrer" translate="no"><span class="invisible">https://</span><span class="ellipsis">developer.mozilla.org/en-US/do</span><span class="invisible">cs/Web/HTML/Attributes/rel/preload</span></a></p>
MDN Web Docs<p>Whatโ€™s your websiteโ€™s score on the MDN HTTP Observatory? ๐Ÿ”ข</p><p>๐Ÿ”— <a href="https://developer.mozilla.org/en-US/observatory" target="_blank" rel="nofollow noopener noreferrer" translate="no"><span class="invisible">https://</span><span class="ellipsis">developer.mozilla.org/en-US/ob</span><span class="invisible">servatory</span></a></p>
MDN Web Docs<p>Write modular, maintainable stylesheets with CSS Nesting! ๐Ÿช†</p><p>Simplify your stylesheets and write cleaner code with CSS Nesting, and structure your CSS more efficiently.</p><p>Start with this guide โฌ‡๏ธ<br /><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting/Using_CSS_nesting" target="_blank" rel="nofollow noopener noreferrer" translate="no"><span class="invisible">https://</span><span class="ellipsis">developer.mozilla.org/en-US/do</span><span class="invisible">cs/Web/CSS/CSS_nesting/Using_CSS_nesting</span></a> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting/Using_CSS_nesting" target="_blank" rel="nofollow noopener noreferrer" translate="no"><span class="invisible">https://</span><span class="ellipsis">developer.mozilla.org/en-US/do</span><span class="invisible">cs/Web/CSS/CSS_nesting/Using_CSS_nesting</span></a></p>
MDN Web Docs<p>๐Ÿ›ก๏ธ Strengthen your defense!</p><p>Analyze your websiteโ€™s defense with comprehensive reports from MDN Observatory. Identify weak points and fortify your security measures with expert recommendations.</p><p>Start now ๐Ÿ‘‡<br /><a href="https://developer.mozilla.org/en-US/observatory?utm_source=mastodon&amp;utm_medium=&amp;utm_campaign=launch&amp;utm_content=announcement" target="_blank" rel="nofollow noopener noreferrer" translate="no"><span class="invisible">https://</span><span class="ellipsis">developer.mozilla.org/en-US/ob</span><span class="invisible">servatory?utm_source=mastodon&amp;utm_medium=&amp;utm_campaign=launch&amp;utm_content=announcement</span></a></p>
MDN Web Docs<p>Curious about the Broadcast Channel API? ๐Ÿ”‰</p><p>๐Ÿ”— Sync messages across your apps without using shared workers<br />๐Ÿค Enable real-time collaboration in docs or files<br />๐Ÿ”” For notifications on statuses, messages, etc.</p><p>Check the demo app with Vultr ๐Ÿ‘‡<br /><a href="https://developer.mozilla.org/en-US/blog/exploring-the-broadcast-channel-api-for-cross-tab-communication/" target="_blank" rel="nofollow noopener noreferrer" translate="no"><span class="invisible">https://</span><span class="ellipsis">developer.mozilla.org/en-US/bl</span><span class="invisible">og/exploring-the-broadcast-channel-api-for-cross-tab-communication/</span></a></p>
MDN Web Docs<p>Beyond coding! ๐Ÿค </p><p>The MDN Curriculum and Scrimba courses also have you covered with essential soft skills like teamwork and problem-solving.</p><p>Build a well-rounded skill set ๐Ÿ‘‡<br /><a href="https://developer.mozilla.org/en-US/curriculum/?scrimba" target="_blank" rel="nofollow noopener noreferrer" translate="no"><span class="invisible">https://</span><span class="ellipsis">developer.mozilla.org/en-US/cu</span><span class="invisible">rriculum/?scrimba</span></a></p>
MDN Web Docs<p>Whatโ€™s your score? ๐Ÿˆด</p><p>MDN Observatory performs in-depth assessments of your site&#39;s MDN headers and key security configurations. Get detailed, actionable feedback to secure your site!</p><p>Check your score now ๐Ÿ‘‡<br /><a href="https://developer.mozilla.org/en-US/observatory?utm_source=mastodon&amp;utm_medium=&amp;utm_campaign=launch&amp;utm_content=announcement" target="_blank" rel="nofollow noopener noreferrer" translate="no"><span class="invisible">https://</span><span class="ellipsis">developer.mozilla.org/en-US/ob</span><span class="invisible">servatory?utm_source=mastodon&amp;utm_medium=&amp;utm_campaign=launch&amp;utm_content=announcement</span></a></p>
MDN Web Docs<p>๐ŸŽจ Weโ€™ve made learning with MDN interactive!</p><p>With our partnership with Scrimba, you can now code along with lessons and get hands-on experience right inside your browser.</p><p>Enhance your skills ๐Ÿ‘‡<br /><a href="https://developer.mozilla.org/en-US/blog/mdn-scrimba-partnership/?utm_source=mastodon&amp;utm_medium=&amp;utm_campaign=launch&amp;utm_content=announcement" target="_blank" rel="nofollow noopener noreferrer" translate="no"><span class="invisible">https://</span><span class="ellipsis">developer.mozilla.org/en-US/bl</span><span class="invisible">og/mdn-scrimba-partnership/?utm_source=mastodon&amp;utm_medium=&amp;utm_campaign=launch&amp;utm_content=announcement</span></a></p>
MDN Web Docs<p>๐ŸŒŸ Master the essentials!</p><p>Our MDN Curriculum Core modules cover fundamental skills every web developer needs. Dive into HTML, CSS, JavaScript, and more with Scrimba&#39;s courses.</p><p>See whatโ€™s new ๐Ÿ‘‡<br /><a href="https://developer.mozilla.org/en-US/blog/mdn-scrimba-partnership/?utm_source=mastodon&amp;utm_medium=&amp;utm_campaign=launch&amp;utm_content=announcement" target="_blank" rel="nofollow noopener noreferrer" translate="no"><span class="invisible">https://</span><span class="ellipsis">developer.mozilla.org/en-US/bl</span><span class="invisible">og/mdn-scrimba-partnership/?utm_source=mastodon&amp;utm_medium=&amp;utm_campaign=launch&amp;utm_content=announcement</span></a></p>
MDN Web Docs<p>Get actionable feedback on vulnerabilities! โš’๏ธ</p><p>โœจ Tests for CORS: Referrer policy, CSP, TLS<br />โœจ CSP analysis<br />โœจ Server header values<br />โœจ Cookies detection<br />โœจ Benchmark comparison<br />โ€ฆand much more!</p><p>Check your site now ๐Ÿ‘‡<br /><a href="https://developer.mozilla.org/en-US/observatory?utm_source=mastodon&amp;utm_medium=&amp;utm_campaign=launch&amp;utm_content=announcement" target="_blank" rel="nofollow noopener noreferrer" translate="no"><span class="invisible">https://</span><span class="ellipsis">developer.mozilla.org/en-US/ob</span><span class="invisible">servatory?utm_source=mastodon&amp;utm_medium=&amp;utm_campaign=launch&amp;utm_content=announcement</span></a></p>
MDN Web Docs<p>๐Ÿ“ˆ Weโ€™ve done over 47 million scans and insights into 6.5 million websites.</p><p>MDN Observatory is your go-to for the latest security trends and guidelines. Stay ahead of threats with the analysis!</p><p>Check your site now ๐Ÿ‘‡<br /><a href="https://developer.mozilla.org/en-US/observatory?utm_source=mastodon&amp;utm_medium=&amp;utm_campaign=launch&amp;utm_content=announcement" target="_blank" rel="nofollow noopener noreferrer" translate="no"><span class="invisible">https://</span><span class="ellipsis">developer.mozilla.org/en-US/ob</span><span class="invisible">servatory?utm_source=mastodon&amp;utm_medium=&amp;utm_campaign=launch&amp;utm_content=announcement</span></a></p>
MDN Web Docs<p>๐Ÿ’ก Learn with MDN using Scrimba&#39;s unique format: a blend of video-like lessons and interactive coding! Learn with engaging and effective methods that involve both reading and practice.</p><p>Check it out ๐Ÿ‘‡<br /><a href="https://developer.mozilla.org/en-US/curriculum/?scrimba" target="_blank" rel="nofollow noopener noreferrer" translate="no"><span class="invisible">https://</span><span class="ellipsis">developer.mozilla.org/en-US/cu</span><span class="invisible">rriculum/?scrimba</span></a></p>
MDN Web Docs<p>๐Ÿ“š The MDN Curriculum is your guide to mastering front-end development!</p><p>Covering all the fundamentals, it links to the best resources, including those from our new partner, Scrimba. ๐Ÿค </p><p>Explore now ๐Ÿ‘‡<br /><a href="https://developer.mozilla.org/en-US/curriculum/?scrimba" target="_blank" rel="nofollow noopener noreferrer" translate="no"><span class="invisible">https://</span><span class="ellipsis">developer.mozilla.org/en-US/cu</span><span class="invisible">rriculum/?scrimba</span></a></p>
MDN Web Docs<p>โ“ Got questions? We&#39;ve got answers!</p><p>Learn more about our partnership with Scrimba, how we prioritize data privacy, and more.<br /><a href="https://developer.mozilla.org/en-US/blog/mdn-scrimba-partnership/#faq?utm_source=mastodon&amp;utm_medium=&amp;utm_campaign=launch&amp;utm_content=announcement" target="_blank" rel="nofollow noopener noreferrer" translate="no"><span class="invisible">https://</span><span class="ellipsis">developer.mozilla.org/en-US/bl</span><span class="invisible">og/mdn-scrimba-partnership/#faq?utm_source=mastodon&amp;utm_medium=&amp;utm_campaign=launch&amp;utm_content=announcement</span></a></p>