info/Web-Dev-For-Beginners
1
0
Fork 0
mirror of https://github.com/microsoft/Web-Dev-For-Beginners.git synced 2025-08-29 01:20:56 +02:00
Code Issues Projects Releases Wiki Activity

preliminary work for docsify implementation (up to space game)

Browse Source
This commit is contained in:
Jen Looper
2020-11-14 12:54:54 -05:00
parent 6e6419f280
commit a02eea3f47
22 changed files with 183 additions and 220 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
5-browser-extension/1-about-browsers/LICENSE
View File

@@ -1,21 +0,0 @@
MIT License
Copyright (c) 2020 WebDev-For-Beginners
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

16
5-browser-extension/1-about-browsers/README.md
View File

@@ -3,19 +3,21 @@
![Browser sketchnote](images/sketchnote.jpg)
> Sketchnote by [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob)
## [Pre-lecture quiz](.github/pre-lecture-quiz.md)
## Pre-Lecture Quiz
### Introduction:
[Pre-lecture quiz](5-browser-extension/1-about-browsers/.github/pre-lecture-quiz.md)
### Introduction
Browser extensions add additional functionality to a browser. But before you build one, you should learn a little about how browsers do their work.
### About the browser:
### About the browser
In this series of lessons, you'll learn how to build a browser extension that will work on Chrome, Firefox and Edge browsers. In this part, you'll discover how browsers work and scaffold out the elements of the browser extension.
But what is a browser exactly? It is a software application that allows an end user to access content from a server and display it on web pages.
✅ A little history: the first browser was called 'WorldWideWeb' and was created by Sir Tim Berners-Lee in 1990.
✅ A little history: the first browser was called 'WorldWideWeb' and was created by Sir Timothy Berners-Lee in 1990.
![early browsers](images/earlybrowsers.jpg)
> Some early browsers, via [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
@@ -146,7 +148,9 @@ Congratulations, you've taken the first steps towards building a browser extensi
Take a look at a browser extension store and install one to your browser. You can examine its files in interesting ways. What do you discover?
## [Post-lecture quiz](.github/post-lecture-quiz.md)
## Post-Lecture Quiz
[Post-lecture quiz](5-browser-extension/1-about-browsers/.github/post-lecture-quiz.md)
## Review & Self Study
@@ -160,5 +164,5 @@ In this lesson you learned a little about the history of the web browser; take t
## Assignment
[Restyle your extension](assignment.md)
[Restyle your extension](5-browser-extension/1-about-browsers/assignment.md)

21
5-browser-extension/2-forms-browsers-local-storage/LICENSE
View File

@@ -1,21 +0,0 @@
MIT License
Copyright (c) 2020 WebDev-For-Beginners
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

24
5-browser-extension/2-forms-browsers-local-storage/README.md
View File

@@ -1,14 +1,16 @@
# Browser Extension Project Part 2: Call an API, use Local Storage
## [Pre-lecture quiz](.github/pre-lecture-quiz.md)
## Pre-Lecture Quiz
### Introduction:
[Pre-lecture quiz](5-browser-extension/2-forms-browsers-local-storage/.github/pre-lecture-quiz.md)
### Introduction
In this lesson, you'll call an API by submitting your browser extension's form and display the results in your browser extension. In addition, you'll learn about how you can store data in your browser's local storage for future reference and use.
✅ Follow the numbered segments in the appropriate files to know where to place your code
### 1. Set up the elements to manipulate in the extension:
### Set up the elements to manipulate in the extension:
By this time you have built the HTML for the form and results `<div>` for your browser extension. From now on, you'll need to work in the `/src/index.js` file and building your extension bit by bit. Refer to the [previous lesson](../about-browsers/README.md) on getting your project set up and on the build process.
@@ -32,7 +34,7 @@ const clearBtn = document.querySelector('.clear-btn');
All of these fields are referenced by their css class, as you set it up in the HTML in the previous lesson.
### 2. Add listeners
### Add listeners
Next, add event listeners to the form and the clear button that resets the form, so that if a user submits the form or clicks that reset button, something will happen, and add the call to initialize the app at the bottom of the file:
@@ -44,7 +46,7 @@ init();
✅ Notice the shorthand used to listen for a submit or click event, and how the event it is passed to the handleSubmit or reset functions. Can you write the equivalent of this shorthand in a longer format? Which do you prefer?
### 3. Build out the init() function and the reset() function:
### Build out the init() function and the reset() function:
Now you are going to build the function that initializes the extension, which is called init():
@@ -106,7 +108,7 @@ Notice that you use the Web API to manipulate LocalStorage, either by using `get
Before building the `displayCarbonUsage()` function that is called in `init()`, let's build the functionality to handle the initial form submission.
### 4. Handle the form submission
### Handle the form submission
Create a function called `handleSubmit` that accepts an event argument `(e)`. Stop the event from propagating (in this case, we want to stop the browser from refreshing) and call a new function, `setUpUser`, passing in the arguments `apiKey.value` and `region.value`. In this way, you use the two values that are brought in via the initial form when the appropriate fields are populated.
@@ -118,7 +120,7 @@ function handleSubmit(e) {
```
✅ Refresh your memory - the HTML you set up in the last lesson has two input fields whose `values` are captured via the `const` you set up at the top of the file, and they are both `required` so the browser stops users from inputting null values.
### 5. Set up the user
### Set up the user
Moving on to the `setUpUser` function, here is where you set local storage values for apiKey and regionName. Add a new function:
@@ -135,7 +137,7 @@ function setUpUser(apiKey, regionName) {
```
This function sets a loading message to show while the API is called. At this point, you have arrived at creating the most important function of this browser extension!
### 6. Display Carbon Usage
### Display Carbon Usage
Finally it's time to query the API!
@@ -206,7 +208,9 @@ Congratulations! If you build your extension (`npm run build`) and refresh it in
We've discussed several types of API so far in these lessons. Choose a web API and research in depth what it offers. For example, take a look at APIs available within browsers such as the [HTML Drag and Drop API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API). What makes a great API in your opinion?
## [Post-lecture quiz](.github/post-lecture-quiz.md)
## Post-Lecture Quiz
[Post-lecture quiz](5-browser-extension/2-forms-browsers-local-storage/.github/post-lecture-quiz.md)
## Review & Self Study
@@ -214,5 +218,5 @@ You learned about LocalStorage and APIs in this lesson, both very useful for the
## Assignment
[Adopt an API](assignment.md)
[Adopt an API](5-browser-extension/2-forms-browsers-local-storage/assignment.md)

21
5-browser-extension/3-background-tasks-and-performance/LICENSE
View File

@@ -1,21 +0,0 @@
MIT License
Copyright (c) 2020 WebDev-For-Beginners
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

12
5-browser-extension/3-background-tasks-and-performance/README.md
View File

@@ -1,8 +1,10 @@
# Browser Extension Project Part 3: Learn about Background Tasks and Performance
## [Pre-lecture quiz](.github/pre-lecture-quiz.md)
## Pre-Lecture Quiz
### Introduction:
[Pre-lecture quiz](5-browser-extension/3-background-tasks-and-performance/.github/pre-lecture-quiz.md)
### Introduction
In the last two lessons of this module, you learned how to build a form and display area for data fetched from an API. It's a very standard way of creating web presences on the web. You even learned how to handle fetching data asyncronously. Your browser extension is very nearly complete.
@@ -143,7 +145,9 @@ Congratulations, you've built a useful browser extension and learned more about
Investigate some open source web sites have been around a long time ago, and, based on their GitHub history, see if you can determine how they were optimized over the years for performance, if at all. What is the most common pain point?
## [Post-lecture quiz](.github/post-lecture-quiz.md)
## Post-Lecture Quiz
[Post-lecture quiz](5-browser-extension/3-background-tasks-and-performance/.github/post-lecture-quiz.md)
## Review & Self Study
@@ -153,5 +157,5 @@ Investigate some of the ways that browsers gauge web performance by looking thro
## Assignment
[Analyze a site for performance](assignment.md)
[Analyze a site for performance](5-browser-extension/3-background-tasks-and-performance/assignment.md)