folder names

5-browser-extension/1-about-browsers/.github/post-lecture-quiz.md

@@ -0,0 +1,18 @@
+*Complete this quiz by checking one answer per question.*
+
+1. The World Wide Web was invented by
+
+- [ ] Tom Barnard-Loft
+- [ ] Tim Berners-Lee
+- [ ] Trish Berth-Pool
+
+2. The first browser was called
+
+- [ ] World Wide Web
+- [ ] Mozilla
+- [ ] Netscape
+
+3. Browsers can store a user's browsing history
+
+- [ ] true
+- [ ] false

5-browser-extension/1-about-browsers/.github/pre-lecture-quiz.md

@@ -0,0 +1,20 @@
+*A warm-up quiz about browsers*
+
+Complete this quiz in class
+
+1. You can get browser extensions from
+
+- [ ] WalMart
+- [ ] The browser's extension store
+- [ ] The App store
+
+2. NPM stands for
+
+- [ ] Node Package Manager
+- [ ] Netscape Primary Mix
+- [ ] Natural Processing Manager
+
+3. Your browser can serve web pages both securely and insecurely 
+
+- [ ] true
+- [ ] false

5-browser-extension/1-about-browsers/LICENSE

@@ -0,0 +1,21 @@
+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.

5-browser-extension/1-about-browsers/README.md

@@ -0,0 +1,164 @@
+# Browser Extension Project Part 1: All about Browsers
+
+![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)
+
+### 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:
+
+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.
+
+![early browsers](images/earlybrowsers.jpg)
+> Some early browsers, via [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
+
+When a user connected to the internet using a URL (Uniform Resource Locator) address, usually using Hypertext Transfer Protocol via an `http` or `https` address, the browser communicates with a web server and fetches a web page.
+
+At this point, the browser's rendering engine displays it on the user's device, which might be a mobile phone, desktop, or laptop.
+
+Browsers also have the ability to cache content so that it doesn't have to be retrieved from the server every time. They can record the history of a user's browsing activity, store 'cookies', which are small bits of data that contain information used to store a user's activity, and more. 
+
+A really important thing to remember about browsers is that they are not all the same! Each browser has its strengths and weaknesses, and a professional web developer needs to understand how to make web pages perform well cross-browser. This includes handling small viewports such as a mobile phone's, as well as a user who is offline.
+
+A really useful website that you probably should bookmark in whatever browser you prefer to use is [caniuse.com](https://www.caniuse.com). When you are building web pages, it's very helpful to use caniuse's lists of supported technologies so that you can best support your users.
+
+✅ How can you tell what browsers are most popular with your web site's user base? Check your analytics - you can install various analytics packages as part of your web development process, and they will tell you what browsers are most used by the various popular browsers.
+
+## Browser extensions
+
+Why would you want to build a browser extension? It's a handy thing to attach to your browser when you need quick access to tasks that you tend to repeat. For example, if you find yourself needing to check colors on the various web pages that you interact with, you might install a color-picker browser extension. If you have trouble remembering passwords, you might use a password-management browser extension. 
+
+Browser extensions are fun to develop, too. They tend to manage a finite number of tasks that they perform well.
+
+✅ What are your favorite browser extensions? What tasks do they perform?
+
+### Installing extensions
+
+Before you start building, take a look at the process of building and deploying a browser extension. While each browser varies a bit in how they manage this task, the process is similar on Chrome and Firefox to this example on Edge:
+
+![install a browser extension](images/install-on-edge.png)
+
+In essence, the process will be:
+
+- build your extension using `npm build` 
+- navigate in the browser to the extensions pane using the `...` icon on the top right
+- if it's a new installation, choose `load unpacked` to upload a fresh extension from its build folder (in our case it is `/dist`) 
+- or, click `reload` if you are reloading the already-installed extension
+
+✅ These instructions pertain to extensions you build yourself; to install extensions that have been released to the browser extension store associated to each browser, you should navigate to those [stores](https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home) and install the extension of your choice.
+
+### Get Started
+
+You're going to build a browser extension that displays your region's carbon footprint, showing your region's energy usage and the source of the energy. The extension will have a form that collects an API key so that you can access
+CO2 Signal's API.
+
+**You need:**
+
+- [an API key](https://www.co2signal.com/); enter your email in the box on this page and one will be sent to you
+- the [code for your region](http://api.electricitymap.org/v3/zones) corresponding to the [Electricity Map](https://www.electricitymap.org/map) (in Boston, for example, I use 'US-NEISO').
+- the [starter code](../start). Download the `start` folder; you will be completing code in this folder.
+- [NPM](https://www.npmjs.com) - NPM is a package management tool; install it locally and the packages listed in you `package.json` file will be installed for use by your web asset
+
+✅ Learn more about package management in this [excellent Learn module](https://docs.microsoft.com/en-us/learn/modules/create-nodejs-project-dependencies/)
+
+Take a minute to look through the codebase:
+
+dist
+    -|manifest.json (defaults set here)
+    -|index.html (front-end HTML markup here)
+    -|background.js (background JS here)
+    -|main.js (built JS)
+src
+    -|index.js (your JS code goes here)
+
+✅ Once you have your API key and Region code handy, store those somewhere in a note for future use.
+
+### Build the HTML for the extension
+
+This extension has two views. One to gather the API key and region code:
+
+![extension form](images/1.png)
+
+And the second to display the region's carbon usage:
+
+![carbon usage](images/2.png)
+
+Let's start by building the HTML for the form and styling it with CSS.
+
+In the `/dist` folder, you will build a form and a result area. In the `index.html` file, populate the delineated form area:
+
+```HTML
+<form class="form-data" autocomplete="on">
+	<div>
+		<h2>New? Add your Information</h2>
+	</div>
+	<div>
+	<label>Region Name</label>
+		<input type="text" required class="region-name" />
+	</div>
+	<div>
+		<label>Your API Key from tmrow</label>
+		<input type="text" required class="api-key" />
+	</div>
+	<button class="search-btn">Submit</button>
+</form>	
+```
+This is the form where your saved information will be input and saved to local storage.
+
+Next, create the results area; under the final form tag, add some divs:
+
+```HTML
+<div class="result">
+	<div class="loading">loading...</div>
+	<div class="errors"></div>
+	<div class="data"></div>
+	<div class="result-container">
+		<p><strong>Region: </strong><span class="my-region"></span></p>
+		<p><strong>Carbon Usage: </strong><span class="carbon-usage"></span></p>
+		<p><strong>Fossil Fuel Percentage: </strong><span class="fossil-fuel"></span></p>
+	</div>
+	<button class="clear-btn">Change region</button>
+</div>
+```
+At this point, you can try a build. Make sure to install the package dependencies of this extension:
+
+```
+npm install
+```
+
+This command will use npm, the Node Package Manager, to install webpack for your extension's build process. Webpack is a bundler that handles compiling code. You can see the output of this process by looking in `/dist/main.js` - you see the code has been bundled.
+
+For now, the extension should build and, if you deploy it into Edge as an extension, you'll see a form neatly displayed.
+
+Congratulations, you've taken the first steps towards building a browser extension. In subsequent lessons, you'll make it more functional and useful.
+
+---
+
+## 🚀 Challenge
+
+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)
+
+## Review & Self Study
+
+In this lesson you learned a little about the history of the web browser; take this opportunity to learn about how the inventors of the World Wide Web envisioned its use by reading more about its history. Some useful sites include:
+
+[The History of Web Browsers](https://www.mozilla.org/en-US/firefox/browsers/browser-history/)
+
+[History of the Web](https://webfoundation.org/about/vision/history-of-the-web/)
+
+[An interview with Tim Berners-Lee](https://www.theguardian.com/technology/2019/mar/12/tim-berners-lee-on-30-years-of-the-web-if-we-dream-a-little-we-can-get-the-web-we-want)
+
+## Assignment 
+
+[Restyle your extension](assignment.md)
+

5-browser-extension/1-about-browsers/assignment.md

@@ -0,0 +1,11 @@
+# Restyle your Extension
+
+## Instructions
+
+The codebase for this extension comes complete with styles, but you don't have to use them; make your extension your own by restyling it by editing its css file.
+
+## Rubric
+
+| Criteria | Exemplary                                    | Adequate              | Needs Improvement |
+| -------- | -------------------------------------------- | --------------------- | ----------------- |
+|          | Code is submitted with functional new styles | Styling is incomplete | Styles are buggy  |

5-browser-extension/1-about-browsers/translations/README.es.md

@@ -0,0 +1,161 @@
+# Proyecto de extensión del navegador Parte 1: Todo sobre los navegadores
+
+![Browser sketchnote](images/sketchnote.jpg)
+> Sketchnote de [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 prueba](.github/pre-lecture-quiz.md)
+
+### Introducción:
+
+Las extensiones de navegador agregan funcionalidad adicional a un navegador. Pero antes de crear uno, debe aprender un poco sobre cómo funcionan los navegadores.
+
+### Acerca del navegador:
+
+En esta serie de lecciones, aprenderá a crear una extensión de navegador que funcione en los navegadores Chrome, Firefox y Edge. En esta parte, descubrirá cómo funcionan los navegadores y distribuirá los elementos de la extensión del navegador.
+
+Pero, ¿qué es exactamente un navegador? Es una aplicación de software que permite al usuario final acceder al contenido de un servidor y mostrarlo en páginas web.
+
+✅ Un poco de historia: el primer navegador se llamó 'WorldWideWeb' y fue creado por Sir Tim Berners-Lee en 1990.
+
+! [navegadores iniciales](images / earlybrowsers.jpg)
+> Algunos de los primeros navegadores, a través de [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
+
+Cuando un usuario se conecta a Internet usando una dirección URL (Localizador uniforme de recursos), generalmente usando el Protocolo de transferencia de hipertexto a través de una dirección `http` o` https`, el navegador se comunica con un servidor web y busca una página web.
+
+En este punto, el motor de renderizado del navegador lo muestra en el dispositivo del usuario, que puede ser un teléfono móvil, una computadora de escritorio o una computadora portátil.
+
+Los navegadores también tienen la capacidad de almacenar en caché el contenido para que no sea necesario recuperarlo del servidor cada vez. Pueden registrar el historial de la actividad de navegación de un usuario, almacenar 'cookies', que son pequeños fragmentos de datos que contienen información que se utiliza para almacenar la actividad de un usuario, y más.
+
+Una cosa realmente importante para recordar acerca de los navegadores es que no todos son iguales. Cada navegador tiene sus fortalezas y debilidades, y un desarrollador web profesional debe comprender cómo hacer que las páginas web funcionen bien en todos los navegadores. Esto incluye el manejo de pequeñas ventanas gráficas, como las de un teléfono móvil, así como de un usuario sin conexión.
+
+Un sitio web realmente útil que probablemente debería marcar en cualquier navegador que prefiera usar es [caniuse.com](https://www.caniuse.com). Cuando está creando páginas web, es muy útil utilizar las listas de tecnologías compatibles de caniuse para que pueda ayudar mejor a sus usuarios.
+
+✅ ¿Cómo puede saber qué navegadores son los más populares entre la base de usuarios de su sitio web? Verifique sus análisis: puede instalar varios paquetes de análisis como parte de su proceso de desarrollo web, y le dirán qué navegadores son los más utilizados por los diversos navegadores populares.
+
+## Extensiones de navegador
+
+¿Por qué querrías crear una extensión de navegador? Es muy útil adjuntarlo a su navegador cuando necesita acceso rápido a tareas que tiende a repetir. Por ejemplo, si necesita comprobar los colores en las distintas páginas web con las que interactúa, puede instalar una extensión de navegador de selector de color. Si tiene problemas para recordar las contraseñas, puede utilizar una extensión de navegador de administración de contraseñas.
+
+Las extensiones de navegador también son divertidas de desarrollar. Suelen gestionar un número finito de tareas que realizan bien.
+
+✅ ¿Cuáles son sus extensiones de navegador favoritas? ¿Qué tareas realizan?
+
+### Instalando extensiones
+
+Antes de empezar a crear, observe el proceso de creación e implementación de una extensión de navegador. Si bien cada navegador varía un poco en la forma en que administran esta tarea, el proceso es similar en Chrome y Firefox a este ejemplo en Edge:
+
+![instalar una extensión de navegador](images/install-on-edge.png)
+
+En esencia, el proceso será:
+
+- construye tu extensión usando `npm build`
+- navegue en el navegador hasta el panel de extensiones usando el icono `...` en la parte superior derecha
+- si se trata de una nueva instalación, elija `load unpacked` para cargar una nueva extensión desde su carpeta de compilación (en nuestro caso es `/ dist`)
+- o haga clic en `recargar` si está recargando la extensión ya instalada
+
+✅ Estas instrucciones pertenecen a extensiones que usted mismo construye; para instalar extensiones que se han lanzado a la tienda de extensiones del navegador asociada a cada navegador, debe navegar a esas [tiendas](https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home) e instalar la extensión de tu elección.
+
+
+### Empezar
+
+Vas a crear una extensión de navegador que muestre la huella de carbono de tu región, mostrando el uso de energía de tu región y la fuente de energía. La extensión tendrá un formulario que recopila una clave API para que pueda acceder
+API de CO2 Signal.
+
+**Necesitas:**
+
+- [una clave API](https://www.co2signal.com/); ingrese su correo electrónico en el cuadro de esta página y se le enviará uno
+- el [código de su región](http://api.electricitymap.org/v3/zones) correspondiente al [Mapa de electricidad](https://www.electricitymap.org/map) (en Boston, por ejemplo, Yo uso 'US-NEISO').
+- el [código de inicio](../ inicio). Descargue la carpeta `start`; completará el código en esta carpeta.
+- [NPM](https://www.npmjs.com) - NPM es una herramienta de gestión de paquetes; instálelo localmente y los paquetes enumerados en su archivo `package.json` se instalarán para que los use su recurso web
+
+✅ Obtenga más información sobre la administración de paquetes en este [excelente módulo de aprendizaje](https://docs.microsoft.com/en-us/learn/modules/create-nodejs-project-dependencies/)
+
+Tómate un minuto para revisar el código base:
+
+dist
+     - | manifest.json (los valores predeterminados se establecen aquí)
+     - | index.html (marcado HTML de front-end aquí)
+     - | background.js (JS de fondo aquí)
+     - | main.js (JS construido)
+src
+     - | index.js (su código JS va aquí)
+
+✅ Una vez que tenga a mano su clave API y el código de región, guárdelos en algún lugar en una nota para uso futuro.
+
+### Construye el HTML para la extensión
+
+Esta extensión tiene dos vistas. Uno para recopilar la clave API y el código de región:
+
+![extension form](1.png)
+
+Y el segundo para mostrar el uso de carbono de la región:
+
+![carbon usage](2.png)
+
+Comencemos por construir el HTML para el formulario y darle estilo con CSS.
+
+En la carpeta `/dist`, creará un formulario y un área de resultados. En el archivo `index.html`, complete el área delineada del formulario:
+
+
+```HTML
+<form class="form-data" autocomplete="on">
+	<div>
+		<h2>¿Nuevo? Agrega tu información</h2>
+	</div>
+	<div>
+	<label>Nombre de la región</label>
+		<input type="text" required class="region-name" />
+	</div>
+	<div>
+		<label>Tu clave API de tmrow</label>
+		<input type="text" required class="api-key" />
+	</div>
+	<button class="search-btn">Enviar</button>
+</form>	
+```
+Este es el formulario donde se ingresará la información guardada y se guardará en el almacenamiento local.
+
+A continuación, cree el área de resultados; debajo de la etiqueta de formulario final, agregue algunos divs:
+
+```HTML
+<div class="result">
+	<div class="loading">cargando...</div>
+	<div class="errors"></div>
+	<div class="data"></div>
+	<div class="result-container">
+		<p><strong>Región: </strong><span class="my-region"></span></p>
+		<p><strong>Uso de carbono: </strong><span class="carbon-usage"></span></p>
+		<p><strong>Porcentaje de combustible fósil: </strong><span class="fossil-fuel"></span></p>
+	</div>
+	<button class="clear-btn">Cambia región</button>
+</div>
+```
+En este punto, puede probar una compilación. Asegúrese de instalar las dependencias del paquete de esta extensión:
+
+```
+npm install
+```
+
+Este comando usará npm, el Node Package Manager, para instalar el paquete web para el proceso de compilación de su extensión. Webpack es un paquete que maneja la compilación de código. Puede ver el resultado de este proceso mirando en `/dist/main.js`; verá que el código se ha incluido.
+
+Por ahora, la extensión debería compilarse y, si la implementa en Edge como una extensión, verá un formulario claramente mostrado.
+
+Felicitaciones, ha dado los primeros pasos para crear una extensión de navegador. En lecciones posteriores, lo hará más funcional y útil.
+
+🚀Challenge: Eche un vistazo a una tienda de extensiones de navegador e instale una en su navegador. Puede examinar sus archivos de formas interesantes. ¿Qué descubres?
+
+
+## [Post-lecture prueba](.github/post-lecture-quiz.md)
+
+## Revisión y autoestudio
+
+En esta lección aprendió un poco sobre la historia del navegador web; Aproveche esta oportunidad para aprender cómo los inventores de la World Wide Web imaginaron su uso leyendo más sobre su historia. Algunos sitios útiles incluyen:
+
+[La historia de los navegadores web](https://www.mozilla.org/en-US/firefox/browsers/browser-history/)
+
+[Historia de la Web](https://webfoundation.org/about/vision/history-of-the-web/)
+
+[Una entrevista con Tim Berners-Lee](https://www.theguardian.com/technology/2019/mar/12/tim-berners-lee-on-30-years-of-the-web-if-we-sueñe-un-poco-podemos-conseguir-la-web-que-queremos)
+
+**Tarea**: [Cambia el estilo de tu extensión](assignment.md)
+

5-browser-extension/1-about-browsers/translations/assignment.es.md

@@ -0,0 +1,11 @@
+# Cambia el estilo de tu extensión
+
+## Instrucciones
+
+El código base para esta extensión viene completo con estilos, pero no es necesario que los uses; haga suya su extensión al cambiarle el estilo editando su archivo css.
+
+## Rúbrica
+
+| Criterios | Ejemplar | Adecuado | Necesita mejorar |
+| -------- | -------------------------------------------- | --------------------- | ----------------- |
+| | El código se envía con nuevos estilos funcionales | El estilo está incompleto | Los estilos tienen errores |