From 01212162cdaf9395ea0bdb0ad411590dfd0d1904 Mon Sep 17 00:00:00 2001 From: "Michael S. Hoffman" Date: Fri, 18 Jul 2025 09:25:35 -0700 Subject: [PATCH 1/3] flag demos to move --- microsoft-edge/progressive-web-apps/demo-pwas.md | 4 ++-- .../progressive-web-apps/how-to/background-syncs.md | 4 ++-- microsoft-edge/progressive-web-apps/how-to/handle-files.md | 6 +++--- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/microsoft-edge/progressive-web-apps/demo-pwas.md b/microsoft-edge/progressive-web-apps/demo-pwas.md index 8bcf3c7128..01c6b297cd 100644 --- a/microsoft-edge/progressive-web-apps/demo-pwas.md +++ b/microsoft-edge/progressive-web-apps/demo-pwas.md @@ -75,7 +75,7 @@ My Tracks is useful for visualizing GPS tracks (`*.gpx` files) on a map. ![The My Tracks app](./demo-pwas-images/my-tracks.png) -[App](https://captainbrosset.github.io/mytracks/), [source code and Readme file](https://github.com/captainbrosset/mytracks). +[App](https://captainbrosset.github.io/mytracks/), [source code and Readme file](https://github.com/captainbrosset/mytracks). My Tracks uses the following features: @@ -94,7 +94,7 @@ This simple PWA demo lets you search for made up movies and store them locally. ![The My Movies app](./demo-pwas-images/my-movies.png) -[App](https://quirky-rosalind-ac1e65.netlify.app/), [source code](https://github.com/captainbrosset/movies-db-pwa). +[App](https://quirky-rosalind-ac1e65.netlify.app/), [source code](https://github.com/captainbrosset/movies-db-pwa). My Movies uses the following features: diff --git a/microsoft-edge/progressive-web-apps/how-to/background-syncs.md b/microsoft-edge/progressive-web-apps/how-to/background-syncs.md index 3fa346f120..1ee8736ea5 100644 --- a/microsoft-edge/progressive-web-apps/how-to/background-syncs.md +++ b/microsoft-edge/progressive-web-apps/how-to/background-syncs.md @@ -125,7 +125,7 @@ To test background syncing: 1. Reload the app. The movie details now appear. -To see the sample code, check out the [movies-db-pwa](https://github.com/captainbrosset/movies-db-pwa/) repo. +To see the sample code, check out the [movies-db-pwa](https://github.com/captainbrosset/movies-db-pwa/) repo. #### Debug background syncs with DevTools @@ -231,7 +231,7 @@ For more information about the `PeriodicSync` event, the `ServiceWorkerRegistrat ![The DevTools Tips app](./background-syncs-images/devtools-tips-demo.png) -Go to the [source code on GitHub](https://github.com/captainbrosset/devtools-tips/). In particular, the app registers the periodic sync in the [registerPeriodicSync](https://github.com/captainbrosset/devtools-tips/blob/a4a5277ee6b67e5cc61eee642bf3d9c68130094f/src/layouts/home.njk#L72) function. The [service worker code](https://github.com/captainbrosset/devtools-tips/blob/ebfb2c7631464149ce3cc7700d77564656971ff4/src/sw.js#L115) is where the app listens to the `periodicsync` event. +Go to the [source code on GitHub](https://github.com/captainbrosset/devtools-tips/). In particular, the app registers the periodic sync in the [registerPeriodicSync](https://github.com/captainbrosset/devtools-tips/blob/a4a5277ee6b67e5cc61eee642bf3d9c68130094f/src/layouts/home.njk#L72) function. The [service worker code](https://github.com/captainbrosset/devtools-tips/blob/ebfb2c7631464149ce3cc7700d77564656971ff4/src/sw.js#L115) is where the app listens to the `periodicsync` event. #### Debug periodic background syncs with DevTools diff --git a/microsoft-edge/progressive-web-apps/how-to/handle-files.md b/microsoft-edge/progressive-web-apps/how-to/handle-files.md index 9f02b7ed67..70f31eca0f 100644 --- a/microsoft-edge/progressive-web-apps/how-to/handle-files.md +++ b/microsoft-edge/progressive-web-apps/how-to/handle-files.md @@ -101,7 +101,7 @@ The `launchQueue` object queues all the launched files until a consumer is set w My Tracks is a PWA demo app that uses the File Handling feature to handle `.gpx` files. To try the feature with this demo app: -* Go to [My Tracks](https://captainbrosset.github.io/mytracks/) and install the app. +* Go to [My Tracks](https://captainbrosset.github.io/mytracks/) and install the app. * Download a GPX file on your computer. You can use this [test GPX file](https://www.visugpx.com/download.php?id=okB1eM4fzj). * Open the downloaded GPX file. @@ -113,7 +113,7 @@ If you allow the app to handle the file, a new entry appears in the app's sideba ![The new GPS track handled by the My Tracks app](./handle-files-images/my-tracks-new-file.png) -The source code for this app can be accessed on the [My Tracks GitHub repository](https://github.com/captainbrosset/mytracks). +The source code for this app can be accessed on the [My Tracks GitHub repository](https://github.com/captainbrosset/mytracks). * The [manifest.json](https://github.com/captainbrosset/mytracks/blob/main/mytracks/manifest.json) source file uses the `file_handlers` array to request handling `.gpx` files. -* The [file.js](https://github.com/captainbrosset/mytracks/blob/main/src/file.js) source file uses the `launchQueue` object to handle incoming files. +* The [file.js](https://github.com/captainbrosset/mytracks/blob/main/src/file.js) source file uses the `launchQueue` object to handle incoming files. From 7255c27250d2667bfaa7bf875a49a8a42d773b44 Mon Sep 17 00:00:00 2001 From: "Michael S. Hoffman" Date: Thu, 31 Jul 2025 16:31:52 -0700 Subject: [PATCH 2/3] demo demo --- microsoft-edge/web-platform/samples.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/microsoft-edge/web-platform/samples.md b/microsoft-edge/web-platform/samples.md index 405aa334f0..ef78f0bbd6 100644 --- a/microsoft-edge/web-platform/samples.md +++ b/microsoft-edge/web-platform/samples.md @@ -20,14 +20,14 @@ sync'd July 30, 2025 |---|---|---|---| | Built-in AI playgrounds | Demo pages showing how to use the built-in Prompt and Writing Assistance AI APIs in Microsoft Edge. | [/built-in-ai/](https://github.com/MicrosoftEdge/Demos/tree/main/built-in-ai) | [Built-in AI playgrounds](https://microsoftedge.github.io/Demos/built-in-ai/) demo | | CSS Gap Decorations demos | Draws line decorations within gaps in CSS Grid, Flexbox, and Multi-column layouts. | [/css-gap-decorations/](https://github.com/MicrosoftEdge/Demos/tree/main/css-gap-decorations) | [CSS Gap Decorations demos](https://microsoftedge.github.io/Demos/css-gap-decorations/) (Readme) | -| CSS Masonry demos | Showcase the implementation of CSS Masonry layout. | [/css-masonry/](https://github.com/MicrosoftEdge/Demos/tree/main/css-masonry) | [CSS Masonry demos](https://microsoftedge.github.io/Demos/css-masonry/) demos (Readme) | -| CSS Custom Highlight API | How to programmatically create and remove custom highlights on a web page. | [/custom-highlight-api/](https://github.com/MicrosoftEdge/Demos/tree/main/custom-highlight-api) | [CSS Custom Highlight API demo](https://microsoftedge.github.io/Demos/custom-highlight-api/) demo | +| CSS Masonry demos | Showcase the implementation of CSS Masonry layout. | [/css-masonry/](https://github.com/MicrosoftEdge/Demos/tree/main/css-masonry) | [CSS Masonry demos](https://microsoftedge.github.io/Demos/css-masonry/) (Readme) | +| CSS Custom Highlight API | How to programmatically create and remove custom highlights on a web page. | [/custom-highlight-api/](https://github.com/MicrosoftEdge/Demos/tree/main/custom-highlight-api) | [CSS Custom Highlight API demo](https://microsoftedge.github.io/Demos/custom-highlight-api/) | | EditContext API demo | Demo page showing how the EditContext API can be used to build an advanced text editor. | [/edit-context/](https://github.com/MicrosoftEdge/Demos/tree/main/edit-context) | [HTML editor demo](https://microsoftedge.github.io/Demos/edit-context/) | | EyeDropper API | How to use the EyeDropper API to create a color sampling tool from JavaScript. | [/eyedropper/](https://github.com/MicrosoftEdge/Demos/tree/main/eyedropper) | [EyeDropper API demos](https://microsoftedge.github.io/Demos/eyedropper/) | | IndexedDB: `getAllRecords()` | Shows the benefits of the proposed `getAllRecords()` IndexedDB method to more conveniently and quickly read IDB records. | [/idb-getallrecords/](https://github.com/MicrosoftEdge/Demos/tree/main/idb-getallrecords) | [IndexedDB: getAllRecords()](https://microsoftedge.github.io/Demos/idb-getallrecords/) demo | -| Notifications demo | Using incoming call notifications. | [/incoming-call-notifications/](https://github.com/MicrosoftEdge/Demos/tree/main/incoming-call-notifications) | [Notifications demo](https://microsoftedge.github.io/Demos/incoming-call-notifications/) demo | +| Notifications demo | Using incoming call notifications. | [/incoming-call-notifications/](https://github.com/MicrosoftEdge/Demos/tree/main/incoming-call-notifications) | [Notifications demo](https://microsoftedge.github.io/Demos/incoming-call-notifications/) | | JSON dummy data | Simple JSON files. Used for [View a JSON file or server response with formatting](./json-viewer.md). | [/json-dummy-data/](https://github.com/MicrosoftEdge/Demos/tree/main/json-dummy-data) | [JSON dummy data](https://microsoftedge.github.io/Demos/json-dummy-data/) (Readme) | -| Page Colors Custom Scrollbars demo | Shows a custom, green scrollbar in a page that has custom colors. | [/page-colors-custom-scrollbars/](https://github.com/MicrosoftEdge/Demos/tree/main/page-colors-custom-scrollbars) | [Page Colors Custom Scrollbars demo](https://microsoftedge.github.io/Demos/page-colors-custom-scrollbars/) demo | +| Page Colors Custom Scrollbars demo | Shows a custom, green scrollbar in a page that has custom colors. | [/page-colors-custom-scrollbars/](https://github.com/MicrosoftEdge/Demos/tree/main/page-colors-custom-scrollbars) | [Page Colors Custom Scrollbars demo](https://microsoftedge.github.io/Demos/page-colors-custom-scrollbars/) | | Reader app | An article reader app used to demonstrate how to use various web APIs such as CSS Custom Highlight, ``, EyeDropper, CSS and JSON modules, Scroll animation timeline, and Async Clipboard. | [/reader/](https://github.com/MicrosoftEdge/Demos/tree/main/reader) | [Reader](https://microsoftedge.github.io/Demos/reader/) demo | | Open UI's `` demos | Demo webpage showing how the Open UI's `` element can be used. | [/selectlist/](https://github.com/MicrosoftEdge/Demos/tree/main/selectlist) | [Open UI's \ demos](https://microsoftedge.github.io/Demos/selectlist/) | | `` demos | OpenUI's `` component was renamed to ``. | [/selectmenu/](https://github.com/MicrosoftEdge/Demos/tree/main/selectmenu) | [`` demos](https://microsoftedge.github.io/Demos/selectmenu/), redirects to `/selectlist/` demos | From f8c67fa99fc2cf28eccc7d044d2a7a8f7decf897 Mon Sep 17 00:00:00 2001 From: "Michael S. Hoffman" Date: Fri, 1 Aug 2025 16:07:41 -0700 Subject: [PATCH 3/3] readme file --- .../progressive-web-apps/demo-pwas.md | 28 +++++++++---------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/microsoft-edge/progressive-web-apps/demo-pwas.md b/microsoft-edge/progressive-web-apps/demo-pwas.md index 8fb1958d00..54d3888d89 100644 --- a/microsoft-edge/progressive-web-apps/demo-pwas.md +++ b/microsoft-edge/progressive-web-apps/demo-pwas.md @@ -31,7 +31,7 @@ followed by other repos ![The 1DIV app](./demo-pwas-images/1div-demo.png) -[App](https://microsoftedge.github.io/Demos/1DIV/dist/), [source code and Readme file](https://github.com/MicrosoftEdge/Demos/tree/main/1DIV/). +[App](https://microsoftedge.github.io/Demos/1DIV/dist/), [source code and Readme](https://github.com/MicrosoftEdge/Demos/tree/main/1DIV/). 1DIV uses the following features: @@ -45,7 +45,7 @@ followed by other repos A simulated email client PWA that demonstrates how to use PWA protocol handlers. -[App](https://microsoftedge.github.io/Demos/email-client/), [source code and Readme file](https://github.com/MicrosoftEdge/Demos/tree/main/email-client/). +[App](https://microsoftedge.github.io/Demos/email-client/), [source code and Readme](https://github.com/MicrosoftEdge/Demos/tree/main/email-client/). Email client uses the following features: @@ -61,7 +61,7 @@ This simple PWA demo lets you search for made-up movies and store them locally. ![The My Movie List app](./demo-pwas-images/my-movies.png) -[App](https://quirky-rosalind-ac1e65.netlify.app/), [source code and Readme file](https://github.com/captainbrosset/movies-db-pwa/). +[App](https://quirky-rosalind-ac1e65.netlify.app/), [source code and Readme](https://github.com/captainbrosset/movies-db-pwa/). -[App](https://microsoftedge.github.io/Demos/pwa-getting-started/), [source code and Readme file](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-getting-started). +[App](https://microsoftedge.github.io/Demos/pwa-getting-started/), [source code and Readme](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-getting-started). @@ -130,9 +130,9 @@ A simple PWA demo app that converts temperatures. Used for [Get started with PW A PWA that uses the Web Install API to install other PWAs. Also uses CSS Masonry. -[App](https://microsoftedge.github.io/Demos/pwa-pwastore/), [source code and Readme file](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-pwastore). +[App](https://microsoftedge.github.io/Demos/pwa-pwastore/), [source code and Readme](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-pwastore). PWA installer uses the following features: @@ -148,7 +148,7 @@ PWA installer uses the following features: Has a **Set timer** button, and you can set the duration of the timer. -[App](https://microsoftedge.github.io/Demos/pwa-timer/), [source code and Readme file](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-timer). +[App](https://microsoftedge.github.io/Demos/pwa-timer/), [source code and Readme](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-timer). @@ -156,7 +156,7 @@ Has a **Set timer** button, and you can set the duration of the timer. Create lists of tasks locally in your browser, or by installing the app. Click the **About** link in the rendered demo. -[App](https://microsoftedge.github.io/Demos/pwa-to-do/), [source code and Readme file](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-to-do). +[App](https://microsoftedge.github.io/Demos/pwa-to-do/), [source code and Readme](https://github.com/MicrosoftEdge/Demos/tree/main/pwa-to-do). @@ -166,7 +166,7 @@ PWAmp is a desktop music player that plays local and remote audio files. ![The PWAmp app, showing playback buttons and a list of songs](./demo-pwas-images/pwamp.png) -[App](https://microsoftedge.github.io/Demos/pwamp/), [source code and Readme file](https://github.com/MicrosoftEdge/Demos/tree/main/pwamp/). +[App](https://microsoftedge.github.io/Demos/pwamp/), [source code and Readme](https://github.com/MicrosoftEdge/Demos/tree/main/pwamp/). PWAmp uses the following features: @@ -188,7 +188,7 @@ wami can apply a sequence of image manipulation steps such as cropping, resizing ![The wami app](./demo-pwas-images/wami.png) -[App](https://microsoftedge.github.io/Demos/wami/), [source code and Readme file](https://github.com/MicrosoftEdge/Demos/tree/main/wami/). +[App](https://microsoftedge.github.io/Demos/wami/), [source code and Readme](https://github.com/MicrosoftEdge/Demos/tree/main/wami/). wami uses the following features: @@ -211,7 +211,7 @@ BPM Techno analyzes audio via the device microphone and displays a real-time bea ![The BPM Techno app](./demo-pwas-images/bpm-techno.png) -[App](https://bpmtech.no/), [source code and Readme file](https://github.com/webmaxru/bpm-counter/). +[App](https://bpmtech.no/), [source code and Readme](https://github.com/webmaxru/bpm-counter/). This demo is in the [webmaxru / bpm-counter](https://github.com/webmaxru/bpm-counter/) repo. @@ -232,7 +232,7 @@ Webboard is a drawing application. ![Webboard is a Progressive Web App for drawing and intelligent whiteboarding](./demo-pwas-images/webboard.png) -[App](https://webboard.app/), [source code and Readme file](https://github.com/pwa-builder/web-whiteboard/). +[App](https://webboard.app/), [source code and Readme](https://github.com/pwa-builder/web-whiteboard/). This demo is in the [pwa-builder / web-whiteboard](https://github.com/pwa-builder/web-whiteboard/) repo.