JavaScript Browser APIs Course

Browser APIs Course Overview

Table of Contents

• Content
• Standards
• Aspects
  • 👶 Introduction
  • 💪 Workout
  • 🦑 Deep
  • ✨ New
  • 🔮 Obscura
  • Content without aspects

Content

Below you can find the ordered content of the topic, in a linear progression

The linear progression of content aims to cover all content, course by course, workout by workout as follows:

• first course is the only core one, denoted by its manifest
• the next course is denoted by the first item of the next array in each course manifest
• each course has its order of workouts designated by the sections field in the same aforementioned manifest

1. navigation

Insights:

no	name	content	aspects	standards	PQ	RQ	Quiz	done
1	form-a-url-from-its-parts	✅	❌	❌	✅	✅	❌	❌
2	navigating-the-browser-history	✅	❌	❌	✅	✅	❌	❌
3	modify-a-website-s-url	✅	❌	❌	✅	✅	❌	❌
4	warn-user-if-back-button-is-pressed	✅	❌	❌	✅	✅	❌	❌
5	top-location-href	✅	❌	❌	✅	✅	❌	❌

Exercises:

⚠️ There are no insights in this workout.

Game:

⚠️ There is no game in this workout.

2. toolbox-i

Insights:

no	name	content	aspects	standards	PQ	RQ	Quiz	done
1	notifications-api	✅	❌	❌	✅	✅	❌	❌
2	geolocation	✅	❌	❌	✅	✅	❌	❌
3	vibration-api	✅	❌	❌	✅	✅	❌	❌
4	battery-api	✅	❌	❌	✅	✅	❌	❌
5	page-visibility-api	✅	❌	❌	✅	✅	❌	❌

Exercises:

⚠️ There are no insights in this workout.

Game:

⚠️ There is no game in this workout.

3. measuring-performance

Insights:

no	name	content	aspects	standards	PQ	RQ	Quiz	done
1	async-and-defer-scripts	✅	❌	❌	✅	✅	❌	❌
2	high-resolution-time-api	✅	❌	❌	✅	✅	❌	❌
3	navigation-timing-api	✅	❌	❌	✅	✅	❌	❌
4	user-timing-api	✅	❌	❌	✅	✅	❌	❌
5	progress-event	✅	❌	❌	✅	✅	❌	❌

Exercises:

⚠️ There are no insights in this workout.

Game:

⚠️ There is no game in this workout.

4. reading-writing

Insights:

no	name	content	aspects	standards	PQ	RQ	Quiz	done
1	blobs	✅	❌	❌	✅	✅	❌	❌
2	filereader-readasdataurl	✅	❌	❌	✅	✅	❌	❌
3	filereader-readastext	✅	❌	❌	✅	✅	❌	❌
4	filereader-readasarraybuffer	✅	❌	❌	✅	✅	❌	❌
5	window-localstorage	✅	❌	❌	✅	✅	❌	❌

Exercises:

⚠️ There are no insights in this workout.

Game:

⚠️ There is no game in this workout.

5. toolbox-ii

Insights:

no	name	content	aspects	standards	PQ	RQ	Quiz	done
1	allow-an-element-to-go-fullscreen	✅	❌	❌	✅	✅	❌	❌
2	drawing-with-html5-canvas-api	✅	❌	❌	✅	✅	❌	❌
3	fetch-api	✅	❌	❌	✅	✅	❌	❌
4	permission-api	✅	❌	❌	✅	✅	❌	❌
5	network-information-api	✅	❌	❌	✅	✅	❌	❌

Exercises:

⚠️ There are no insights in this workout.

Game:

⚠️ There is no game in this workout.

6. user-interaction

Insights:

no	name	content	aspects	standards	PQ	RQ	Quiz	done
1	interaction-with-the-user	✅	❌	❌	✅	✅	❌	❌
2	handling-click-events	✅	❌	❌	✅	✅	❌	❌
3	drag-and-drop-api	✅	❌	❌	✅	✅	❌	❌
4	mediadevices-getusermedia	✅	❌	❌	✅	✅	❌	❌

Exercises:

⚠️ There are no insights in this workout.

Game:

⚠️ There is no game in this workout.

Standards

✅ - At least one insight covers this

❌ - Nothing covers this

🛠️ - This standard has no objectives yet

❌ Use the Document object to programmatically create and alter layouts

0. ❌ Create and append elements to the Document
1. ❌ Create complex elements from structured data
2. ❌ Modify the style or state of elements
3. ❌ Create events handlers for events relating to Document elements
4. ❌ Find elements in the DOM with Document methods

❌ Use modern Browser APIs to interact with the device

0. ❌ Use modern browser APIs to interact with device performance information, like battery level, memory usage, or storage availability
1. ❌ Use modern browser APIs to interact with device location information, like location or accelerometer data
2. ❌ Use modern browser APIs to interact with device ports, such as serial or usb
3. ❌ Use other device APIs to take advantage of device capabilities

❌ Use built-in Browser APIs to control the browser

0. ❌ Use the Geolocation API to determine a browser's physical location
1. ❌ Use browser APIs to manage windows and tabs
2. ❌ Use browser APIs to send notifications

❌ Use browser APIs to store and manage data on the client

0. ❌ Use localstorage to store data
1. ❌ Use WebSQL to store data
2. ❌ Use Cookies to store data
3. ❌ Use Session storage to store data
4. ❌ Direct the browser to cache responses
5. ❌ Direct the browser to clear data from persistent stores
6. ❌ Interact with stored data on the device

❌ Use built-in Browser APIs to connect to remote hosts

0. ❌ Use the XMLHttpRequest API to send and receive data from a remote host
1. ❌ Use the WebSocket API to maintain a stateful connection between a browser and remote host
2. ❌ Use the WebRTC API to create a real-time communication channel between two browsers
3. ❌ Use the Fetch API to request resources from a remote host

❌ Use modern browser tooling and APIs to improve load performance

0. ❌ Use in-browser tooling to measure resource loading times to identify network bottlenecks
1. ❌ Use in-browser tooling to profile memory issues and identify memory leaks
2. ❌ Use in-browser tooling to analyze runtime performance and improve efficiency

❌ Use the 2D and 3D drawing contexts to create images on a canvas

0. ❌ Create and use the canvas element
1. ❌ Initialize a 2D drawing context from a Canvas element
2. ❌ Initialize a 3D drawing context from a Canvas element
3. ❌ Create shapes with a drawing context
4. ❌ Use images on a Canvas
5. ❌ Put text on a Canvas
6. ❌ Transform a shape on a Canvas
7. ❌ Modify the style of elements on a Canvas

Aspects

Given the insights are tagged with aspects, we can filter over the linear content progression and create learning sub-paths.

These sub-path progressions will most likely not cover all content, but they will ensure and enforce an unified learning experience, tailor for the user wish.

For example, a user might be interested in new additions and updates of a language, rather than introduction lessions. Note that these sub-paths don't take games into consideration

👶 Introduction

If you are being introduced to the topic for the first time

⚠️ There are no insights tagged with this aspect in browser-apis. :warning: There are no exercises tagged with this aspect in browser-apis. :warning: There are no games tagged with this aspect in browser-apis.

💪 Workout

Theory put into practice/that’s how you achieve X points

⚠️ There are no insights tagged with this aspect in browser-apis. :warning: There are no exercises tagged with this aspect in browser-apis. :warning: There are no games tagged with this aspect in browser-apis.

🦑 Deep

Prerequisite knowledge consisting of 2 or more 👶/💪 workouts

⚠️ There are no insights tagged with this aspect in browser-apis. :warning: There are no exercises tagged with this aspect in browser-apis. :warning: There are no games tagged with this aspect in browser-apis.

✨ New

Recently added/gained traction feature

⚠️ There are no insights tagged with this aspect in browser-apis. :warning: There are no exercises tagged with this aspect in browser-apis. :warning: There are no games tagged with this aspect in browser-apis.

🔮 Obscura

Stories, obscure details that don’t specifically relate to a learning objective

⚠️ There are no insights tagged with this aspect in browser-apis. :warning: There are no exercises tagged with this aspect in browser-apis. :warning: There are no games tagged with this aspect in browser-apis.

Content without aspects

1. form-a-url-from-its-parts
2. navigating-the-browser-history
3. modify-a-website-s-url
4. warn-user-if-back-button-is-pressed
5. top-location-href
6. notifications-api
7. geolocation
8. vibration-api
9. battery-api
10. page-visibility-api
11. async-and-defer-scripts
12. high-resolution-time-api
13. navigation-timing-api
14. user-timing-api
15. progress-event
16. blobs
17. filereader-readasdataurl
18. filereader-readastext
19. filereader-readasarraybuffer
20. window-localstorage
21. allow-an-element-to-go-fullscreen
22. drawing-with-html5-canvas-api
23. fetch-api
24. permission-api
25. network-information-api
26. interaction-with-the-user
27. handling-click-events
28. drag-and-drop-api
29. mediadevices-getusermedia