Merge pull request #3364 from MicrosoftDocs/user/mikehoffms/web-plat-toc

Break out TOC buckets from "Development tips for Microsoft Edge"

Author: captainbrosset

microsoft-edge/develop-web-microsoft-edge.md

@@ -1,15 +1,33 @@
 ---
 title: Develop for the web with Microsoft Edge
-description: Develop for the web with Microsoft Edge by using Microsoft Edge DevTools, Microsoft Edge extensions, Progressive Web Apps, WebDriver automation, WebView2, and more.
+description: Develop for the web with Microsoft Edge by using standards-based web platform features, Microsoft Edge DevTools, Microsoft Edge extensions, Progressive Web Apps, WebDriver automation, WebView2, and more.
 author: MSEdgeTeam
 ms.author: msedgedevrel
 ms.topic: conceptual
 ms.service: microsoft-edge
-ms.date: 01/17/2023
+ms.date: 02/06/2025
 ---
 # Develop for the web with Microsoft Edge
 
-Develop for the web with Microsoft Edge by using Microsoft Edge DevTools, Microsoft Edge extensions, Progressive Web Apps, WebDriver automation, WebView2, and more.
+Develop for the web with Microsoft Edge by using standards-based web platform features, Microsoft Edge DevTools, Microsoft Edge extensions, Progressive Web Apps, WebDriver automation, WebView2, and more.
+
+
+<!-- ====================================================================== -->
+## Release notes
+
+To stay up to date with web platform feature changes in Microsoft Edge and the Chromium open-source project, see:
+* [Release Notes for web platform for Microsoft Edge](./web-platform/release-notes/index.md)
+* [Site compatibility-impacting changes coming to Microsoft Edge](./web-platform/site-impacting-changes.md)
+
+
+<!-- ====================================================================== -->
+## Experimental web platform features
+
+Use origin trials to try out experimental APIs on your own live site for a limited period of time.  When using origin trials, users of Microsoft Edge that visit your site can run code that uses experimental APIs.
+
+See:
+* [Use origin trials in Microsoft Edge](./origin-trials/index.md)
+* [Sign up for the Ad Selection API](./web-platform/ad-selection-api.md)
 
 
 <!-- ====================================================================== -->
@@ -36,7 +54,7 @@ With DevTools, you can do the following:
 
 <!-- /keep sync'd -->
 
-See [Overview of DevTools](devtools-guide-chromium/overview.md).
+See [Overview of DevTools](./devtools-guide-chromium/overview.md).
 
 
 <!-- ====================================================================== -->
@@ -52,7 +70,7 @@ A Microsoft Edge extension is structured similarly to a regular web app, and usu
 *  A JavaScript file that defines the behavior of the browser extension.
 *  HTML and CSS files that define the user interface.
 
-See [Overview of Microsoft Edge extensions](extensions-chromium/index.md).
+See [Overview of Microsoft Edge extensions](./extensions-chromium/index.md).
 
 
 <!-- ====================================================================== -->
@@ -64,7 +82,7 @@ Progressive Web Apps combine the best of the web and compiled apps, to provide u
 
 Progressive Web Apps have a much lower cross-platform development cost than compiled apps that require a specific codebase for each platform, such as a separate codebase for Android, for iOS, and for each desktop operating system.
 
-See [Overview of Progressive Web Apps (PWAs)](progressive-web-apps-chromium/index.md).
+See [Overview of Progressive Web Apps (PWAs)](./progressive-web-apps-chromium/index.md).
 
 
 <!-- ====================================================================== -->
@@ -81,7 +99,7 @@ The following diagram shows the spectrum of apps, from maximum reach, to maximum
 
 Hybrid apps, in the middle of this spectrum, allow you to enjoy the best of both worlds: the ubiquity and strength of the web platform, combined with the power and full capabilities of the native platform.
 
-See [Introduction to Microsoft Edge WebView2](webview2/index.md).
+See [Introduction to Microsoft Edge WebView2](./webview2/index.md).
 
 
 <!-- ====================================================================== -->
@@ -96,38 +114,31 @@ The following are tools to automate testing in Microsoft Edge:
 *  **WebDriver** simulates user interaction with Microsoft Edge.
 *  **webhint** linting checks code for errors and best practices.
 
-See [Test and automation in Microsoft Edge](test-and-automation/test-and-automation.md).
+See [Test and automation in Microsoft Edge](./test-and-automation/test-and-automation.md).
 
 
 <!-- ====================================================================== -->
-## Development tips for Microsoft Edge
-
-There are many tips and tricks to be aware of when building websites or web apps that work in Microsoft Edge, including:
+## Edge-specific web development tips
 
-*  Testing for coming changes that could impact compatibility of your website with Microsoft Edge.
-*  Moving users to Microsoft Edge from Internet Explorer.
-*  Configuring tracking prevention in Microsoft Edge.
-*  Detecting Microsoft Edge from your website.
-*  Customizing the Password Reveal button.
-*  Detecting Windows 11 by using User-Agent Client Hints.
+Microsoft Edge implements standards-based web features and APIs, which you can use to develop websites that work across browser engines.  In addition, Microsoft Edge offers a few Edge-specific web development features.
 
-See [Development tips for Microsoft Edge](web-platform/web-platform.md).
+See [Edge-specific web development tips](./web-platform/web-platform.md).
 
 
 <!-- ====================================================================== -->
 ## Microsoft Edge IDE integration
 
 Various features of Microsoft tools provide integration of development using Microsoft Edge, Visual Studio Code, and Visual Studio, to develop your products, webpages, and web apps that use and work with full integration in Microsoft Edge.
 
-See [Microsoft Edge IDE integration](visual-studio-code/ide-integration.md).
+See [Microsoft Edge IDE integration](./visual-studio-code/ide-integration.md).
 
 
 <!-- ====================================================================== -->
 ## Accessibility in Microsoft Edge
 
 Development of your webpages, web apps, and web-enabled products is robustly supported through the extensive Accessibility features in Microsoft Edge and its tooling ecosystem.
 
-See [Accessibility in Microsoft Edge](accessibility/index.md).
+See [Accessibility in Microsoft Edge](./accessibility/index.md).
 
 
 <!-- leaf node (article; omit per PR review) -->
@@ -148,7 +159,7 @@ The Web We Want initiative is a cross-browser, open initiative focused on identi
 
 If you build for the web, you inevitably run into problems.  Perhaps there's no way to achieve an aspect of your design with CSS, or it may require an incredible amount of experimenting with CSS.  Maybe there's a device feature you want to tap into using JavaScript, or there's a needed Developer Tools feature that can make your job easier.
 
-See [The Web We Want initiative](web-we-want/index.md).
+See [The Web We Want initiative](./web-we-want/index.md).
 -->
 
 
@@ -196,8 +207,8 @@ The full-text search page initially searches all _Microsoft Edge_ documentation.
 
 To provide feedback or enter issues:
 
-* [Contact the Microsoft Edge DevTools team](devtools-guide-chromium/contact.md)
-* [Contact the Microsoft Edge extensions team](extensions-chromium/publish/contact-extensions-team.md)
-* [Contact the WebView2 team](webview2/contact.md)
+* [Contact the Microsoft Edge DevTools team](./devtools-guide-chromium/contact.md)
+* [Contact the Microsoft Edge extensions team](./extensions-chromium/publish/contact-extensions-team.md)
+* [Contact the WebView2 team](./webview2/contact.md)
 
 To submit and view feedback for a specific page of the documentation, at the bottom of the page, click the **This page** button.

microsoft-edge/developer/index.yml

@@ -44,7 +44,22 @@ landingContent:
 # =============================================================================
 # Row 1
 # -----------------------------------------------------------------------------
-# Card r1c1
+# Card for toc bucket 1 (Release notes) & 2 (Experimental web platform features) - r1c1
+  - title: Web platform updates
+    linkLists:
+      - linkListType: whats-new
+        links:
+          - text: Release Notes for web platform for Microsoft Edge
+            url: ../web-platform/release-notes/index.md
+
+          - text: Site compatibility-impacting changes
+            url: ../web-platform/site-impacting-changes.md
+
+          - text: Use origin trials in Microsoft Edge
+            url: ../origin-trials/index.md
+
+# -----------------------------------------------------------------------------
+# Card for toc bucket 3 - r1c2
   - title: Microsoft Edge DevTools
     linkLists:
       - linkListType: overview
@@ -74,7 +89,7 @@ landingContent:
             url: ../devtools-guide-chromium/shortcuts/index.md
 
 # -----------------------------------------------------------------------------
-# Card r1c2
+# Card for toc bucket 4 - r1c3
   - title: Microsoft Edge extensions
     linkLists:
       - linkListType: overview
@@ -104,8 +119,10 @@ landingContent:
           - text: "Sample: Picture viewer pop-up webpage"
             url: ../extensions-chromium/getting-started/picture-viewer-popup-webpage.md
 
+# =============================================================================
+# Row 2
 # -----------------------------------------------------------------------------
-# Card r1c3
+# Card for toc bucket 5 - r2c1
   - title: Progressive Web Apps (PWAs)
     linkLists:
       - linkListType: overview
@@ -142,51 +159,8 @@ landingContent:
           - text: Store data on the device
             url: ../progressive-web-apps-chromium/how-to/offline.md
 
-# =============================================================================
-# Row 2
-# -----------------------------------------------------------------------------
-# Card r2c1
-  - title: Development tips for Microsoft Edge  # /web-platform/
-    linkLists:
-#     - linkListType: overview
-#       links:
-#         - text: Development tips for Microsoft Edge  # jump page for overview of bucket, omit bc 10 max
-#           url: ../web-platform/web-platform.md
-      - linkListType: whats-new
-        links:
-          - text: Site compatibility-impacting changes
-            url: ../web-platform/site-impacting-changes.md
-      - linkListType: how-to-guide
-        links:
-          - text: Move users to Microsoft Edge from Internet Explorer
-            url: ../web-platform/ie-to-microsoft-edge-redirection.md
-
-          - text: Tracking prevention in Microsoft Edge
-            url: ../web-platform/tracking-prevention.md
-
-          - text: Detect Microsoft Edge from your website
-            url: ../web-platform/user-agent-guidance.md
-
-          - text: Develop experiences for the sidebar in Microsoft Edge
-            url: ../web-platform/sidebar.md
-
-          - text: Detect Windows 11 using User-Agent Client Hints
-            url: ../web-platform/how-to-detect-win11.md
-
-          - text: Customize the password reveal button
-            url: ../web-platform/password-reveal.md
-
-          - text: Display regional versions of your site, based on OS settings
-            url: ../web-platform/os-regional-settings.md
-
-          - text: View formatted JSON responses or files
-            url: ../devtools-guide-chromium/json-viewer/json-viewer.md
-
-          - text: Sign up for the Ad Selection API
-            url: ../web-platform/ad-selection-api.md
-
 # -----------------------------------------------------------------------------
-# Card r2c2
+# Card for toc bucket 6 - r2c2
   - title: WebView2
     linkLists:
       - linkListType: overview
@@ -221,7 +195,7 @@ landingContent:
             url: ../webview2/webview2-api-reference.md
 
 # -----------------------------------------------------------------------------
-# Card r2c3
+# Card for toc bucket 7 - r2c3
   - title: Test and automation
     linkLists:
       - linkListType: how-to-guide
@@ -232,9 +206,6 @@ landingContent:
           - text: DevTools Protocol
             url: ../devtools-protocol-chromium/index.md   # https://learn.microsoft.com/microsoft-edge/devtools-protocol-chromium/
 
-          - text: Use origin trials in Microsoft Edge
-            url: ../origin-trials/index.md
-
           - text: Use Playwright to automate and test in Microsoft Edge
             url: ../playwright/index.md
 
@@ -250,7 +221,44 @@ landingContent:
 # =============================================================================
 # Row 3
 # -----------------------------------------------------------------------------
-# Card r3c1
+# Card for toc bucket 8 - r3c1
+  - title: Edge-specific web development tips
+    linkLists:
+#     - linkListType: overview
+#       links:
+#         - text: Edge-specific web development tips  # jump page for overview of bucket, omit bc 10 max
+#           url: ../web-platform/web-platform.md
+      - linkListType: how-to-guide
+        links:
+          - text: Move users to Microsoft Edge from Internet Explorer
+            url: ../web-platform/ie-to-microsoft-edge-redirection.md
+
+          - text: Tracking prevention in Microsoft Edge
+            url: ../web-platform/tracking-prevention.md
+
+          - text: Detect Microsoft Edge from your website
+            url: ../web-platform/user-agent-guidance.md
+
+          - text: Develop experiences for the sidebar in Microsoft Edge
+            url: ../web-platform/sidebar.md
+
+          - text: Detect Windows 11 using User-Agent Client Hints
+            url: ../web-platform/how-to-detect-win11.md
+
+          - text: Customize the password reveal button
+            url: ../web-platform/password-reveal.md
+
+          - text: Display regional versions of your site, based on OS settings
+            url: ../web-platform/os-regional-settings.md
+
+          - text: View formatted JSON responses or files
+            url: ../devtools-guide-chromium/json-viewer/json-viewer.md
+
+          - text: Sign up for the Ad Selection API  # todo: moved to "Experimental web platform features" toc bucket, delete?
+            url: ../web-platform/ad-selection-api.md
+
+# -----------------------------------------------------------------------------
+# Card for toc bucket 9 - r3c2
   - title: Microsoft Edge IDE integration
     linkLists:
       - linkListType: overview
@@ -272,7 +280,7 @@ landingContent:
             url: ../visual-studio/index.md
 
 # -----------------------------------------------------------------------------
-# Card r3c2
+# Card for toc bucket 10 - r3c3
   - title: Accessibility in Microsoft Edge
     linkLists:
       - linkListType: overview
@@ -287,8 +295,10 @@ landingContent:
           - text: Accessibility testing
             url: ../accessibility/test.md
 
+# =============================================================================
+# Row 4
 # -----------------------------------------------------------------------------
-# Card r3c3
+# Card for toc bucket 11 - r4c1
   - title: DualEngine
     linkLists:
       - linkListType: overview
@@ -314,8 +324,6 @@ landingContent:
           - text: DualEngine Win32 C++ Reference
             url: ../dualengine/reference/index.md
 
-# =============================================================================
-# Row 4
 # -----------------------------------------------------------------------------
 # Card r4c1
 # leaf articles at bottom of toc (videos, privacy, initiative) - omit