Skip to content

Replace GH sample embeds in the remaining Learn area articles #40905

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
chrisdavidmills merged 10 commits into from
Sep 1, 2025
Merged

Replace GH sample embeds in the remaining Learn area articles #40905

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
31f0441
Fix markdown lint errors
chrisdavidmills Aug 27, 2025
3a675af
Update files/en-us/learn_web_development/extensions/client-side_apis/…
chrisdavidmills Aug 27, 2025
99c50a8
Update files/en-us/learn_web_development/extensions/client-side_apis/…
chrisdavidmills Aug 27, 2025
4dc98a8
Update files/en-us/learn_web_development/extensions/client-side_apis/…
chrisdavidmills Aug 27, 2025
fbb5963
Update files/en-us/learn_web_development/extensions/client-side_apis/…
chrisdavidmills Aug 27, 2025
2a3232e
Fix markdown problems, remove fallbacks
chrisdavidmills Aug 27, 2025
31d2e1f
Merge branch 'main' into replace-testing-and-graphics-gh-sample-embeds
bsmth Aug 28, 2025
991d796
Update files/en-us/learn_web_development/extensions/client-side_apis/…
chrisdavidmills Sep 1, 2025
527a3e7
Put WebGL example into the page
chrisdavidmills Sep 1, 2025
4369c98
update references to sintel video to shared-assets
chrisdavidmills Sep 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Fix markdown problems, remove fallbacks
  • Loading branch information
@chrisdavidmills
chrisdavidmills committed Aug 27, 2025
commit 2a3232ea10a053005a8cbd641a265d9f6403759d
16 changes: 11 additions & 5 deletions ...-us/learn_web_development/extensions/client-side_apis/drawing_graphics/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -219,6 +219,7 @@ Let's start by creating our own canvas template to create future experiments in.

1. First, create a directory on your local hard drive called `canvas-template`.
2. Create a new file in the directory called `index.html` and save the following contents inside it:

```html live-sample___2-canvas-rectangles live-sample___3_canvas_paths live-sample___4-canvas-text live-sample___5-canvas-images live-sample___6-canvas-for-loop live-sample___7-canvas-walking-animation
<!DOCTYPE html>
<html lang="en-US">
Expand All @@ -235,21 +236,26 @@ Let's start by creating our own canvas template to create future experiments in.
</canvas>
</body>
</html>
```

3. Create a new file inside the directory called `style.css` and save the following CSS rule in it:

```css live-sample___2-canvas-rectangles live-sample___3_canvas_paths live-sample___4-canvas-text live-sample___5-canvas-images live-sample___6-canvas-for-loop live-sample___7-canvas-walking-animation
body {
margin: 0;
overflow: hidden;
}
```

4. Create a new file inside the directory called `script.js`. Leave this file blank for now.

5. Now open `script.js` and add the following lines of JavaScript:

```js
const canvas = document.querySelector(".myCanvas");
const width = (canvas.width = window.innerWidth);
const height = (canvas.height = window.innerHeight);
```
```js
const canvas = document.querySelector(".myCanvas");
const width = (canvas.width = window.innerWidth);
const height = (canvas.height = window.innerHeight);
```

Here we have stored a reference to the canvas in the `canvas` constant. In the second line we set both a new constant `width` and the canvas' `width` property equal to {{domxref("Window.innerWidth")}} (which gives us the viewport width). In the third line we set both a new constant `height` and the canvas' `height` property equal to {{domxref("Window.innerHeight")}} (which gives us the viewport height). So now we have a canvas that fills the entire width and height of the browser window!

Expand Down
18 changes: 0 additions & 18 deletions ...learn_web_development/extensions/client-side_apis/video_and_audio_apis/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,14 +58,6 @@ This creates a video player inside the browser like so:
<source
src="https://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/rabbit320.webm"
type="video/webm" />
<p>
Your browser doesn't support HTML5 video. Here is a
<a
href="https://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/rabbit320.mp4"
>link to the video</a
>
instead.
</p>
</video>
```

Expand All @@ -83,14 +75,6 @@ You can review what all the HTML features do in the article linked above; for ou
<source
src="https://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/rabbit320.webm"
type="video/webm" />
<p>
Your browser doesn't support HTML5 video. Here is a
<a
href="https://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/rabbit320.mp4"
>link to the video</a
>
instead.
</p>
</video>
```

Expand All @@ -115,7 +99,6 @@ Our finished example will look (and function) something like the following:
<source
src="https://mdn.github.io/learning-area/javascript/apis/video-audio/finished/video/sintel-short.webm"
type="video/webm" />
<!-- fallback content here -->
</video>
<div class="controls">
<button class="play" data-icon="P" aria-label="play pause toggle"></button>
Expand Down Expand Up @@ -411,7 +394,6 @@ To get started with this example, follow these steps:
<source
src="https://mdn.github.io/learning-area/javascript/apis/video-audio/finished/video/sintel-short.webm"
type="video/webm" />
<!-- fallback content here -->
</video>
<div class="controls">
<button
Expand Down