> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
## Pre-Lecture Quiz
@ -32,7 +32,7 @@ In this lesson, we'll use HTML to structure the 'framework' of our virtual terra
On your computer, create a folder named 'terrarium' and inside it, a file called 'index.html'. You can do this in Visual Studio Code by opening a new VS Code window, clicking 'open folder', and navigating to your new folder. Then, click the small 'file' button in the Explorer pane to create the new file:
Alternatively, you can use these commands in Git Bash:
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
## Pre-Lecture Quiz
@ -83,7 +83,7 @@ body {
Open your browser's console and inspect the 'Elements' tab. Observe the font of the `<h1>` tag. You’ll see that it inherits the font from the body, as indicated by the browser:
✅ Can you make a nested style inherit a different property?
@ -259,7 +259,7 @@ We’re also using `rem` for the border-radius, a font-relative unit. Learn more
Add a "bubble" shine to the bottom-left area of the jar to make it look more like glass. Style the `.jar-glossy-long` and `.jar-glossy-short` to create a reflective shine. Here’s the final result:
To complete the post-lecture quiz, explore this Learn module: [Style your HTML app with CSS](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon)
# Terrarium Project Part 3: DOM Manipulation and a Closure
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
## Pre-Lecture Quiz
@ -28,7 +28,7 @@ We’ll use a closure to manipulate the DOM.
Think of the DOM as a tree that represents all the ways a web page document can be manipulated. Various APIs (Application Program Interfaces) have been created to allow developers to access, edit, rearrange, and manage the DOM using their preferred programming language.
> A representation of the DOM and the HTML markup that references it. From [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
@ -205,7 +205,7 @@ This small function resets the `onpointerup` and `onpointermove` events, allowin
Now your project is complete!
🥇Congratulations! You’ve finished your beautiful terrarium! 
🥇Congratulations! You’ve finished your beautiful terrarium! 
A small drag-and-drop coding exercise. With a bit of HTML, JS, and CSS, you’ll be able to create a web interface, style it, and even add various interactions of your choice.
> Some early browsers, via [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
When a user connects to the internet using a URL (Uniform Resource Locator), typically through Hypertext Transfer Protocol (`http` or `https`), the browser communicates with a web server to retrieve a web page.
@ -55,7 +55,7 @@ Developing browser extensions is also enjoyable. They focus on specific tasks an
Before building your own extension, familiarize yourself with the process of creating and deploying one. While each browser has slight variations, the process is similar across Chrome, Firefox, and Edge. Here's an example for Edge:
> Note: Make sure to toggle on developer mode and allow extensions from other stores.
@ -97,11 +97,11 @@ src
This extension has two views: one for collecting the API key and region code:
And another for displaying the region's carbon usage:
Start by creating the HTML for the form and styling it with CSS.
@ -110,7 +110,7 @@ Before proceeding, it's helpful to learn about an important browser concept: [Lo
You can set your APIKey to have a string value, for example, and view it in Edge by "inspecting" a web page (right-click to inspect) and navigating to the Applications tab to see the storage.
✅ Consider situations where you would NOT want to store certain data in LocalStorage. Generally, storing API Keys in LocalStorage is a bad idea! Can you understand why? In our case, since this app is purely for learning and won't be published in an app store, we'll use this method.
@ -29,7 +29,7 @@ The first step to ensuring your site runs efficiently is to gather data about it
The Performance tab includes a Profiling tool. Open a website (for example, [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) and click the 'Record' button, then refresh the site. Stop the recording at any time, and you'll see routines generated for 'script', 'render', and 'paint' processes:
✅ Visit the [Microsoft Documentation](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) on the Performance panel in Edge.
@ -39,11 +39,11 @@ Select elements of the profile timeline to zoom in on events that occur while yo
Get a snapshot of your page's performance by selecting a part of the profile timeline and reviewing the summary pane:
✅ Familiarize yourself with the profiler! Open the developer tools on this site and check for bottlenecks. What is the slowest-loading asset? The fastest?
Using tmrow's CO2 Signal API to monitor electricity consumption, create a browser extension that provides a reminder directly in your browser about the intensity of electricity usage in your region. Using this extension on the fly can help you make informed decisions about your activities based on this data.
To install on Edge, open the 'three dot' menu in the top right corner of the browser to access the Extensions panel. From there, select 'Load Unpacked' to add a new extension. When prompted, open the 'dist' folder, and the extension will load. To use it, you will need an API key for CO2 Signal's API ([get one here via email](https://www.co2signal.com/) - enter your email in the box on this page) and the [code for your region](http://api.electricitymap.org/v3/zones) corresponding to the [Electricity Map](https://www.electricitymap.org/map) (for example, in Boston, I use 'US-NEISO').
Once you input the API key and region into the extension interface, the colored dot in the browser extension bar will update to reflect your region's energy usage. It will also provide guidance on which energy-intensive activities might be suitable for you to undertake. The idea for this 'dot' system was inspired by the [Energy Lollipop extension](https://energylollipop.com/) for California emissions.
Using tmrow's CO2 signal API to track electricity usage, create a browser extension so you can have a direct reminder in your browser about your region's electricity consumption. Using this ad hoc extension will help you make decisions about your activities based on this information.
To install on Edge, use the 'three dots' menu in the top-right corner of the browser to find the Extensions panel. From there, select 'Load unpacked' to load a new extension. Open the 'dist' folder when prompted, and the extension will be loaded. To use it, you will need an API key for the CO2 Signal API ([get one here via email](https://www.co2signal.com/) - enter your email in the box on this page) and 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').
Once the API key and region are entered in the extension interface, the colored dot in the browser's extension bar should change to reflect your region's energy usage and give you an indicator about high-energy consumption activities that would be appropriate for you. The concept behind this "dot" system was inspired by the [Energy Lollipop extension](https://energylollipop.com/) for California emissions.
Using the CO2 Signal API from tmrow to monitor electricity consumption, create a browser extension so you can get a direct reminder in your browser about the electricity usage in your region. Using this ad hoc extension will help you make informed decisions about your activities based on this information.
To install on Edge, use the 'three dots' menu in the top-right corner of the browser to find the Extensions panel. From there, select 'Load unpacked extension' to load a new extension. Open the 'dist' folder when prompted, and the extension will load. To use it, you will need an API key for the CO2 Signal API ([get one here via email](https://www.co2signal.com/) - enter your email in the box on this page) and the [code for your region](http://api.electricitymap.org/v3/zones) corresponding to the [Electricity Map](https://www.electricitymap.org/map) (for Boston, for example, I use 'US-NEISO').
Once the API key and region are entered in the extension interface, the colored dot in the browser's extension bar should change to reflect your region's energy consumption and give you an indicator of energy-intensive activities that might be appropriate to perform. The concept behind this 'dot' system was inspired by the [Energy Lollipop extension](https://energylollipop.com/) for California emissions.
Using tmrow's CO2 Signal API to track electricity usage, this browser extension provides a reminder about how carbon-intensive the electricity in your area is while you're browsing. By using this extension, you can make informed decisions about your activities based on this information.
To install on Edge, use the 'three dots' menu in the top-right corner of the browser to find the Extensions panel. From there, select 'Load unpacked' to load a new extension. When prompted, open the 'dist' folder, and the extension will load. To use it, you will need an API key for CO2 Signal ([get it here via email](https://www.co2signal.com/) by entering your email in the box on that page) and [the code for your region](http://api.electricitymap.org/v3/zones) from [Electricity Map](https://www.electricitymap.org/map) (for example, in Boston, I use 'US-NEISO').
Once the API key and region are entered into the extension interface, the colored dot in the browser extension bar should change to reflect the energy usage in your area and provide an indicator of whether energy-intensive activities are appropriate for your performance. The concept behind this 'dot' system was inspired by the [Energy Lollipop Extension](https://energylollipop.com/) for California emissions.
We will use tmrow's CO2 Signal API to monitor electricity usage and create a browser extension that provides a direct reminder in your browser about the electricity intensity in your region. Using this custom extension will help you evaluate your activities based on this information.
## Getting Started
@ -31,7 +31,7 @@ npm run build
To install on Edge, use the "three dots" menu in the top-right corner of the browser to find the Extensions panel. If not already enabled, turn on Developer Mode (bottom left). Select "Load unpacked" to load a new extension. Open the "dist" folder when prompted, and the extension will be loaded. To use it, you will need an API key for the CO2 Signal API (you can [get one here via email](https://www.co2signal.com/) - enter your email in the box on this page) and the [code for your region](http://api.electricitymap.org/v3/zones) corresponding to the [electricity map](https://www.electricitymap.org/map) (for example, in Boston, "US-NEISO").
Once the API key and region are entered in the extension interface, the colored dot in the browser's extension bar should change to reflect your region's energy usage and provide a pointer on which high-energy activities would be appropriate to perform. The concept behind this "dot" system was inspired by the [Energy Lollipop extension](https://energylollipop.com/) for California emissions.
Using tmrow's CO2 Signal API, this browser extension tracks electricity usage in your area and displays it as a reminder directly in your browser. By using this extension on an ad hoc basis, you can make decisions about your activities based on this information.
To install it on Edge, find the "Extensions" panel from the "three dots" menu in the top-right corner of the browser. From there, select "Load Unpacked" to load the new extension. When prompted, open the "dist" folder, and the extension will be loaded. To use it, you'll need an API key for the CO2 Signal API ([get one here via email](https://www.co2signal.com/) - enter your email in the box on this page) and the [code for your region](http://api.electricitymap.org/v3/zones) corresponding to the [Electricity Map](https://www.electricitymap.org/map) (for example, in Boston, you would use 'US-NEISO').
Once you input the API key and region into the extension interface, the colored dot displayed in your browser's extension bar will change to reflect your area's energy usage. This helps indicate whether it's a good time to engage in activities that require energy. The concept for this "dot" system was inspired by the [Energy Lollipop extension](https://energylollipop.com/) for California emissions.
Using the CO2 Signal API from tmrow to monitor electricity usage, build a browser extension that alerts you in your browser about the intensity of electricity consumption in your region. This extension can help you make informed decisions about your activities based on this information.
To install it on Edge, use the 'three dots' menu in the top-right corner of the browser to find the Extensions panel. From there, select 'Load Unpacked' to load a new extension. Open the 'dist' folder when prompted, and the extension will be loaded. To use it, you’ll need an API key for the CO2 Signal API ([get one here via email](https://www.co2signal.com/) - enter your email in the box on this page) and [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').
Once the API key and region are entered into the extension interface, the colored dot in the browser extension bar will change to reflect your region's energy usage and provide guidance on heavy activities that are appropriate for you to undertake. The concept behind this 'dot' system was inspired by [the Energy Lollipop browser extension](https://energylollipop.com/) for California emissions.
Using tmrow's CO2 Signal API to monitor electricity usage, create a browser extension that provides a reminder directly in your browser about the intensity of electricity usage in your region. Using this extension on the fly can help you make informed decisions about your activities based on this data.
To install on Edge, open the 'three dot' menu in the top right corner of the browser to access the Extensions panel. From there, select 'Load Unpacked' to add a new extension. When prompted, open the 'dist' folder, and the extension will load. To use it, you’ll need an API key for CO2 Signal's API ([request one here via email](https://www.co2signal.com/) - enter your email in the box on this page) and the [region code](http://api.electricitymap.org/v3/zones) corresponding to the [Electricity Map](https://www.electricitymap.org/map) (for example, in Boston, I use 'US-NEISO').
Once you input the API key and region into the extension interface, the colored dot in the browser extension bar will update to reflect your region's energy usage. It will also provide guidance on which energy-intensive activities might be suitable for you to undertake. The idea for this 'dot' system was inspired by the [Energy Lollipop extension](https://energylollipop.com/) for California emissions.
@ -35,7 +35,7 @@ In the code above, we are setting the `id`, `width`, and `height`.
The canvas uses a Cartesian coordinate system to draw shapes. This means it uses an x-axis and y-axis to determine where things are placed. The position `0,0` is the top-left corner, and the bottom-right corner corresponds to the `width` and `height` of the canvas.
@ -200,7 +200,7 @@ Add the necessary code to `your-work/app.js` to complete the following tasks:
The final result should look like this:
@ -37,7 +37,7 @@ In games, the concept of "life" is simply a number. In a space game, it's common
Let's add the following features to your game:
- **Game score**: Award points for every enemy ship destroyed. We suggest 100 points per ship. The score should be displayed in the bottom left corner.
- **Life**: Your ship starts with three lives. You lose a life whenever an enemy ship collides with you. Lives should be displayed in the bottom right corner using the following graphic: .
- **Life**: Your ship starts with three lives. You lose a life whenever an enemy ship collides with you. Lives should be displayed in the bottom right corner using the following graphic: .
@ -273,7 +273,7 @@ Try clicking these links—you should now be able to navigate between the differ
Using `history.pushState` creates new entries in the browser’s navigation history. You can check this by holding the *back button* in your browser—it should display something like this:
If you try clicking the back button a few times, you’ll notice that the current URL changes and the history is updated, but the same template keeps being displayed.
@ -114,7 +114,7 @@ Now that we have a functional UI, the next step is to send the data to the serve
Did you notice the change in your browser's URL?
By default, a `<form>` submits data to the current server URL using the [GET method](https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.3), appending the form data to the URL. However, this method has limitations:
@ -136,7 +136,7 @@ Add `action` and `method` attributes to the registration form:
Now try registering a new account with your name. After clicking the *Register* button, you should see something like this:
If everything works correctly, the server will respond with a [JSON](https://www.json.org/json-en.html) object containing the created account data.
@ -236,7 +236,7 @@ async function register() {
That was a lot, but we made it! Open your [browser developer tools](https://developer.mozilla.org/docs/Learn/Common_questions/What_are_browser_developer_tools) and try registering a new account. You won't see any changes on the page, but a message will appear in the console confirming that everything works.
✅ Do you think the data is sent securely? What if someone intercepts the request? Learn more about [HTTPS](https://en.wikipedia.org/wiki/HTTPS) for secure data communication.
@ -278,7 +278,7 @@ Add a `maxlength` attribute to the text fields:
Now, if you press the *Register* button and a field does not comply with a validation rule we defined, you should see something like this:
Validation like this, performed *before* sending any data to the server, is called **client-side** validation. However, note that it's not always possible to perform all checks without sending the data. For example, we cannot verify here if an account already exists with the same username without sending a request to the server. Additional validation performed on the server is called **server-side** validation.
@ -292,7 +292,7 @@ Display an error message in the HTML if the user already exists.
Here's an example of what the final login page might look like after applying some styling:
Traditional websites update their content when users click a link or submit a form by reloading the entire HTML page. Each time new data is needed, the web server sends back a fresh HTML page, which the browser processes. This interrupts the user's current action and limits interactions during the reload. This approach is known as a *Multi-Page Application* or *MPA*.
As web applications became more interactive and complex, a technique called [AJAX (Asynchronous JavaScript and XML)](https://en.wikipedia.org/wiki/Ajax_(programming)) was introduced. AJAX allows web apps to send and retrieve data from a server asynchronously using JavaScript, without reloading the HTML page. This results in faster updates and smoother user experiences. Once new data is received, JavaScript can update the current HTML page using the [DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model) API. Over time, this approach evolved into what is now known as a [*Single-Page Application* or *SPA*](https://en.wikipedia.org/wiki/Single-page_application).
Initially, the only API available for asynchronous data fetching was [`XMLHttpRequest`](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest). However, modern browsers now support the more convenient and powerful [`Fetch` API](https://developer.mozilla.org/docs/Web/API/Fetch_API), which uses promises and is better suited for handling JSON data.
@ -166,7 +166,7 @@ if (data.error) {
Now, if you try to log in with an invalid account, you'll see something like this:
While the error text is visually displayed, screen readers won't announce it. To ensure dynamically added text is accessible to screen readers, we need to use a [Live Region](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/ARIA_Live_Regions). We'll use a specific type of live region called an alert:
@ -331,7 +331,7 @@ Work together to make the dashboard page resemble a real banking app. If you've
Here's an example of a styled dashboard page:
@ -53,7 +53,7 @@ We could address these issues individually, but doing so would lead to code dupl
Once these challenges are addressed, other issues may either resolve themselves or become easier to fix. There are many approaches to solving these problems, but we'll use a common solution: **centralizing the data and the methods to modify it**. The data flows will look like this:
> We won't cover the part where data automatically triggers view updates, as it involves more advanced concepts of [Reactive Programming](https://en.wikipedia.org/wiki/Reactive_programming). It's a great topic for further exploration.
@ -286,7 +286,7 @@ Work together to modify what is saved and loaded from `localStorage` to include
Here's an example result after completing the assignment:
@ -25,7 +25,7 @@ Refer to the [server API specifications](../api/README.md) to identify the API y
Here's an example of the result after completing the task:
In this project, you'll learn how to create a fictional bank. These lessons include instructions on designing a web app layout, setting up routes, building forms, managing state, and retrieving data from an API to access the bank's information.
@ -29,7 +29,7 @@ After completing this assignment, you will learn how to:
Click the `creating a new file` link, type the name `index.html`, and select the `Commit new file` button.
**Step 3:** Open [VSCode.dev](https://vscode.dev) and select the `Open Remote Repository` button.
✅ If successful, you’ll see your project and the `index.html` file open in the text editor in your browser.
**Step 4:** Open the `index.html` file, paste the code below into your code area, and save.
@ -225,7 +225,7 @@ Click the _`Extensions`_ icon on the activity bar and type in Codeswing. Either
This is what you will see on your screen after installing the extension.
If you’re satisfied with the changes you made, hover over the `Changes` folder and click the `+` button to stage the changes.
To provide some context, building Chat Assistants with generative AI is an excellent way to start learning about AI. In this lesson, you'll learn how to integrate generative AI into a web app. Let's get started.
@ -21,11 +21,11 @@ To provide some context, building Chat Assistants with generative AI is an excel
For the backend, we're using GitHub Models. It's a fantastic service that allows you to use AI for free. Visit its playground and grab the code corresponding to your preferred backend language. Here's what it looks like at [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground).
As mentioned, select the "Code" tab and your preferred runtime.
@ -17,7 +17,7 @@ Mira, entiendo totalmente si la programación te parece intimidante ahora mismo.
Hoy vamos a explorar las increíbles herramientas que hacen que el desarrollo web moderno no solo sea posible, sino realmente adictivo. Estoy hablando de los mismos editores, navegadores y flujos de trabajo que los desarrolladores de Netflix, Spotify y tu estudio indie favorito usan cada día. Y aquí viene la parte que te hará bailar de alegría: ¡la mayoría de estas herramientas profesionales y estándar de la industria son completamente gratuitas!
@ -17,7 +17,7 @@ Sé que esto puede parecer mucho al principio – caray, recuerdo mirar mi prime
Vamos a hacer este viaje juntos, paso a paso. Sin prisa, sin presión – solo tú, yo y algunas herramientas realmente geniales que van a convertirse en tus nuevos mejores amigos.
> Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid
@ -604,7 +604,7 @@ Primero, encuentra un repositorio (o **repo**) en GitHub que te interese y al qu
✅ Una buena manera de encontrar repositorios 'amigables para principiantes' es [buscar por la etiqueta 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
Hay varias maneras de copiar código. Una es "clonar" el contenido del repositorio, usando HTTPS, SSH o la CLI de GitHub (Interfaz de Línea de Comandos).
> Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac)
HTML, o Lenguaje de Marcado de Hipertexto, es la base de cada sitio web que hayas visitado. Piensa en HTML como el esqueleto que da estructura a las páginas web: define dónde va el contenido, cómo se organiza y qué representa cada pieza. Mientras que CSS más adelante "vestirá" tu HTML con colores y diseños, y JavaScript le dará vida con interactividad, HTML proporciona la estructura esencial que hace posible todo lo demás.
@ -86,7 +86,7 @@ Crearás una carpeta dedicada para tu proyecto terrario y agregarás tu primer a
4. En el panel Explorador, haz clic en el ícono "Nuevo archivo"
5. Nombra tu archivo `index.html`
**Opción 2: Usando comandos en la Terminal**
```bash
@ -236,48 +236,48 @@ Ahora añade las imágenes de las plantas organizadas en dos columnas entre tus
> Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac)
¿Recuerdas cómo se veía tu terrario HTML bastante básico? CSS es donde transformamos esa estructura simple en algo visualmente atractivo.
@ -202,7 +202,7 @@ body {
Abre las herramientas de desarrollo de tu navegador (F12), navega a la pestaña de Elementos, e inspecciona tu `<h1>`. Verás que hereda la familia tipográfica del body:
✅ **Tiempo de Experimento**: Prueba establecer otras propiedades heredables en el `<body>` como `color`, `line-height` o `text-align`. ¿Qué pasa con tu encabezado y otros elementos?
@ -332,7 +332,7 @@ En nuestro terrario, cada planta necesita un estilo similar pero también necesi
**Esta es la estructura HTML para cada planta:**
```html
<divclass="plant-holder">
<imgclass="plant"alt="Decorative plant for terrarium"id="plant1"src="../../../../translated_images/plant1.d18b18ffe73da18f.es.png" />
<imgclass="plant"alt="Decorative plant for terrarium"id="plant1"src="../../../../translated_images/es/plant1.d18b18ffe73da18f.png" />
</div>
```
@ -594,7 +594,7 @@ Aprende más sobre [modo agent](https://code.visualstudio.com/blogs/2025/02/24/i
Crearás reflejos sutiles que simulan cómo la luz se refleja en las superficies de vidrio. Este enfoque es similar a cómo los pintores renacentistas como Jan van Eyck usaban la luz y reflexión para dar volumen tridimensional a los vidrios pintados. Esto es lo que buscas lograr:
> Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac)
Bienvenido a uno de los aspectos más atractivos del desarrollo web: ¡hacer que las cosas sean interactivas! El Modelo de Objetos del Documento (DOM) es como un puente entre tu HTML y JavaScript, y hoy lo usaremos para dar vida a tu terrario. Cuando Tim Berners-Lee creó el primer navegador web, imaginó una web donde los documentos pudieran ser dinámicos e interactivos; el DOM hace posible esa visión.
@ -102,7 +102,7 @@ flowchart TD
style P fill:#ffebee
style Q fill:#ffebee
```
> Una representación del DOM y el marcado HTML que lo referencia. De [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
@ -146,7 +146,7 @@ flowchart LR
```
> 💡 **Entendiendo los Closures**: Los closures son un tema importante en JavaScript, y muchos desarrolladores los usan durante años antes de comprender completamente todos sus aspectos teóricos. Hoy nos concentramos en la aplicación práctica: verás closures emerger naturalmente mientras construimos nuestras características interactivas. La comprensión se desarrollará a medida que veas cómo solucionan problemas reales.
> Una representación del DOM y el marcado HTML que lo referencia. De [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
@ -591,7 +591,7 @@ Nuestro sistema de arrastre manipula dos propiedades clave de CSS:
- **Soporte multi-dispositivo**: Funciona en escritorio y móvil
- **Conciencia de rendimiento**: Sin fugas de memoria ni cálculos redundantes
> Algunos navegadores tempranos, vía [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
### Cómo los Navegadores Procesan Contenido Web
@ -194,7 +194,7 @@ quadrantChart
Entender el proceso de instalación de extensiones te ayuda a anticipar la experiencia del usuario cuando las personas instalen tu extensión. El proceso de instalación está estandarizado en navegadores modernos, con ligeras variaciones en el diseño de interfaz.
> **Importante**: Asegúrate de activar el modo desarrollador y permitir extensiones de otras tiendas al probar tus propias extensiones.
@ -308,10 +308,10 @@ Esto sigue el principio de divulgación progresiva usado en diseño de interface
### Visión General de Vistas de la Extensión
**Vista de Configuración** - Configuración inicial para usuarios primerizos:
**Vista de Resultados** - Visualización de datos de huella de carbono:
ClearStorage --> FirstTime: Volver a configuración
```
> ⚠️ **Consideración de Seguridad**: En aplicaciones de producción, almacenar claves API en LocalStorage implica riesgos de seguridad ya que JavaScript puede acceder a estos datos. Para propósitos de aprendizaje, este enfoque funciona bien, pero las aplicaciones reales deberían usar almacenamiento seguro del lado del servidor para credenciales sensibles.
@ -123,7 +123,7 @@ Para abrir las Herramientas de Desarrollador en Edge, haz clic en esos tres punt
Probémoslo. Abre un sitio web (Microsoft.com funciona bien para esto) y haz clic en el botón 'Grabar'. Ahora recarga la página y observa cómo el perfilador captura todo lo que sucede. Cuando detienes la grabación, verás un desglose detallado de cómo el navegador 'ejecuta scripts', 'renderiza' y 'pinta' el sitio. Me recuerda a cómo el control de misión monitorea cada sistema durante un lanzamiento de cohete: obtienes datos en tiempo real sobre exactamente qué está pasando y cuándo.
✅ La [Documentación de Microsoft](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) tiene muchos más detalles si quieres profundizar
@ -133,11 +133,11 @@ Selecciona elementos de la línea de tiempo del perfil para acercarte a eventos
Obtén una instantánea del rendimiento de tu página seleccionando una parte de la línea de tiempo del perfil y mirando el panel de resumen:
✅ ¡Conoce tu perfilador! Abre las herramientas de desarrollador en este sitio y ve si hay cuellos de botella. ¿Cuál es el recurso que carga más lento? ¿El más rápido?
> Imagen de [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
Para dibujar en el elemento canvas, seguirás el mismo proceso de tres pasos que forma la base de todos los gráficos en canvas. Una vez que lo hagas unas cuantas veces, se vuelve algo natural:
@ -323,11 +323,11 @@ Construirás una página web con un elemento Canvas. Debe mostrar una pantalla n
- **Sistema de puntuación**: Cada nave enemiga destruida otorga 100 puntos (los números redondos son más fáciles de calcular mentalmente para los jugadores). La puntuación se muestra en la esquina inferior izquierda.
- **Contador de vidas**: Tu héroe comienza con tres vidas: un estándar establecido por juegos arcade tempranos para equilibrar el desafío con la jugabilidad. Cada colisión con un enemigo cuesta una vida. Mostraremos las vidas restantes en la esquina inferior derecha usando íconos de nave .
- **Contador de vidas**: Tu héroe comienza con tres vidas: un estándar establecido por juegos arcade tempranos para equilibrar el desafío con la jugabilidad. Cada colisión con un enemigo cuesta una vida. Mostraremos las vidas restantes en la esquina inferior derecha usando íconos de nave .
Usar `history.pushState` crea nuevas entradas en el historial de navegación del navegador. Puedes comprobarlo manteniendo presionado el *botón de atrás* de tu navegador, debería mostrar algo así:
Si intentas hacer clic varias veces en el botón de atrás, verás que la URL cambia y el historial se actualiza, pero la misma plantilla sigue mostrándose.
@ -292,7 +292,7 @@ Primero, observemos qué sucede con un envío básico:
2. Observa los cambios en la barra de direcciones del navegador
3. Nota cómo la página se recarga y los datos aparecen en la URL
### Comparación de Métodos HTTP
@ -346,7 +346,7 @@ Configuremos tu formulario de registro para que se comunique correctamente con l
2. **Haz clic** en el botón "Crear Cuenta"
3. **Observa** la respuesta del servidor en tu navegador
**Lo que deberías ver:**
- **El navegador redirige** a la URL del endpoint API
@ -609,7 +609,7 @@ async function register() {
3. **Haz clic** en "Crear Cuenta"
4. **Observa** los mensajes en consola y la retroalimentación al usuario
**Lo que deberías ver:**
- **Aparece estado de carga** en el botón de enviar
@ -783,7 +783,7 @@ Mejoremos tu formulario de registro con validación robusta que brinda excelente
3. **Prueba** caracteres especiales en el campo de nombre de usuario
4. **Introduce** un saldo negativo
**Lo que observarás:**
- **El navegador muestra** mensajes de validación nativos
@ -943,7 +943,7 @@ Muestra un mensaje de error en el HTML si el usuario ya existe.
Aquí tienes un ejemplo de cómo puede verse la página de inicio de sesión final después de un poco de estilo:
@ -187,7 +187,7 @@ La [gestión de estado](https://en.wikipedia.org/wiki/State_management) trata re
En lugar de perseguir nuestra cola, vamos a crear un sistema de **gestión de estado centralizada**. Piénsalo como tener una persona realmente organizada encargada de todas las cosas importantes:
```mermaid
flowchart TD
@ -798,7 +798,7 @@ Este desafío te ayudará a pensar como un desarrollador profesional que conside
Aquí un ejemplo de resultado tras completar la tarea:
@ -112,7 +112,7 @@ Consulta la [documentación de la API del servidor](../api/README.md) para:
**Resultado esperado:**
Al completar esta tarea, tu aplicación bancaria debería tener una función "Agregar Transacción" totalmente funcional que luzca y se comporte profesionalmente:
@ -182,7 +182,7 @@ Como el teléfono de Alexander Graham Bell conectó lugares remotos, vincular tu
Una vez que todo cargue, verás un espacio de trabajo limpio y hermoso diseñado para mantenerte enfocado en lo que importa: ¡tu código!
**Aquí tienes tu recorrido por el vecindario:**
- **Barra de Actividades** (esa franja a la izquierda): Tu navegación principal con Explorador 📁, Búsqueda 🔍, Control de Código Fuente 🌿, Extensiones 🧩 y Configuración ⚙️
@ -229,7 +229,7 @@ Perfecto cuando comienzas fresco en VSCode.dev y quieres abrir un repositorio es
1. Ve a [vscode.dev](https://vscode.dev) si aún no estás allí
2. Busca el botón "Open Remote Repository" en la pantalla de bienvenida y haz clic
@ -78,7 +78,7 @@ Como VSCode.dev requiere al menos un archivo para abrir un repositorio, crearemo
4. **Escribe** un mensaje para el commit: "Add initial HTML structure"
5. **Haz clic** en "Commit new file" para guardar tus cambios
**Esto es lo que logra esta configuración inicial:**
- **Establece** la estructura correcta del documento HTML5 con elementos semánticos
@ -104,7 +104,7 @@ Ahora que la base de tu repositorio está establecida, vamos a pasar a VSCode.de
✅ **Indicador de éxito**: Deberías ver los archivos de tu proyecto en la barra lateral del Explorador y `index.html` disponible para editar en el área principal del editor.
**Qué verás en la interfaz:**
- **Barra lateral del Explorador**: **Muestra** los archivos y la estructura de carpetas de tu repositorio
@ -448,7 +448,7 @@ Las extensiones mejoran tu experiencia de desarrollo proporcionando capacidades
**Resultados inmediatos tras la instalación:**
Una vez instalado CodeSwing, verás una vista previa en vivo de tu sitio de currículum aparecer en el editor. Esto te permite ver exactamente cómo luce tu sitio conforme haces cambios.
**Entendiendo la interfaz mejorada:**
- **Vista dividida**: **Muestra** tu código a un lado y la vista previa en vivo al otro
## 🗺️ Tu Viaje de Aprendizaje en el Desarrollo de Aplicaciones de IA
@ -189,7 +189,7 @@ mindmap
```
**Principio Fundamental**: El desarrollo de aplicaciones de IA combina habilidades tradicionales de desarrollo web con integración de servicios de IA, creando aplicaciones inteligentes que se sienten naturales y receptivas para los usuarios.
**Esto es lo que hace el playground tan útil:**
- **Prueba** diferentes modelos de IA como GPT-4o-mini, Claude y otros (¡todos gratis!)
@ -199,7 +199,7 @@ mindmap
Una vez que hayas jugado un poco, solo haz clic en la pestaña "Code" y elige tu lenguaje de programación para obtener el código de implementación que necesitas.
## Configurando la Integración Backend en Python
@ -2349,14 +2349,14 @@ Las habilidades que has desarrollado en esta lección son directamente aplicable
- **Navega** al [repositorio Web Dev For Beginners](https://github.com/microsoft/Web-Dev-For-Beginners)
- **Haz clic** en "Use this template" en la esquina superior derecha (asegúrate de estar conectado a GitHub)
**Paso 2: Lanzar Codespaces**
- **Abre** tu repositorio recién creado
- **Haz clic** en el botón verde "Code" y selecciona "Codespaces"
- **Elige** "Create codespace on main" para iniciar tu entorno de desarrollo
**Paso 3: Configuración del entorno**
Una vez que tu Codespace cargue, tendrás acceso a:
Cada lección incluye una tarea para completar, una revisión de conocimientos y un desafío para guiarte en tópicos como:
@ -115,7 +115,7 @@ Sigue estos pasos:
En tu copia de este repositorio que creaste, haz clic en el botón **Code** y selecciona **Abrir con Codespaces**. Esto creará un nuevo Codespace para que trabajes dentro.
@ -42,10 +42,10 @@ Este plan de estudios incluye paquetes importables para flujos de trabajo comune
- Moodle Cloud tiene soporte limitado para Common Cartridge. Es preferible usar el archivo de Moodle mencionado anteriormente, que también puede cargarse en Canvas.
- Después de importar, revisa los módulos, fechas de entrega y configuraciones de cuestionarios para ajustarlos al calendario de tu periodo.
@ -17,7 +17,7 @@ Kuule, ma saan täiesti aru, kui programmeerimine tundub praegu hirmutav. Kui ma
Täna uurime uskumatuid tööriistu, mis teevad kaasaegse veebi arendamise mitte ainult võimalikuks, vaid väga sõltuvust tekitavaks. Räägin täpselt nendest samadest editoridest, brauseritest ja töövoogudest, mida kasutavad Netflixi, Spotify ja sinu lemmik sõltumatu rakenduse stuudio arendajad iga päev. Ja siin on osa, mis paneb sind rõõmust tantsima: enamik neist professionaalsest klassist ja tööstusharu standarditest tööriistadest on täiesti tasuta!
@ -17,7 +17,7 @@ Ma tean, et alguses võib see kõik tunduda palju – ausalt öeldes mäletan, k
Me võtame selle teekonna koos – sammhaaval. Ilma kiirustamise ja pingeta – ainult sina, mina ja mõned väga lahedad tööriistad, mis saavad sinu uueks parimaks sõbraks!
> Sketchnote autor [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid
@ -606,7 +606,7 @@ Esmalt leidke GitHubist endale huvipakkuv hoidlasse (või **repo**), kuhu soovik
✅ Hea viis "algajasõbralike" hoidlate leidmiseks on [otsida silti 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
HTML ehk hüperteksti märgistuskeel on iga veebilehe aluseks, mida sa kunagi külastanud oled. Mõtle HTML-ile kui skeletile, mis annab veebilehtedele struktuuri – see määrab, kuhu sisu läheb, kuidas see on organiseeritud ja mida iga osa esindab. Kuigi CSS "riietab" su HTML-i hiljem värvide ja paigutustega ning JavaScript toob selle ellu interaktiivsusega, annab HTML vajaliku põhistruktuuri, mis muudab muu võimalikuks.
@ -86,7 +86,7 @@ Sa lood spetsiaalse kausta terrariumiprojekti jaoks ja lisad esimese HTML-faili.
4. Avastusaknas klõpsa "Uus fail" ikoonile
5. Nyimesta oma fail nimega `index.html`
**Võimalus 2: Terminalikäskluste kasutamine**
```bash
@ -236,48 +236,48 @@ Nüüd lisa taimepildid, organiseerituna kahe veeruna, oma `<body></body>` silti
Kas mäletad, kuidas su HTML-terraarium nägi üsna lihtne välja? CSS on koht, kus me muudame selle tavalise struktuuri millekski visuaalselt atraktiivseks.
@ -202,7 +202,7 @@ body {
Ava brauseri arendajatööriistad (F12), mine Elements vaatesse ja vaata oma `<h1>` elementi. Näed, et see pärib fondiperekonna body-lt:
✅ **Katsetamise aeg**: Proovi teisi pärandatavaid omadusi `<body>` peal nagu `color`, `line-height` või `text-align`. Mis juhtub su pealkirja ja teiste elementidega?
@ -332,7 +332,7 @@ Meie terraariumis vajab iga taim sarnast stiili, kuid igaüks peab olema ka indi
**Näide iga taime HTML struktuurist:**
```html
<divclass="plant-holder">
<imgclass="plant"alt="Decorative plant for terrarium"id="plant1"src="../../../../translated_images/plant1.d18b18ffe73da18f.et.png" />
<imgclass="plant"alt="Decorative plant for terrarium"id="plant1"src="../../../../translated_images/et/plant1.d18b18ffe73da18f.png" />
</div>
```
@ -594,7 +594,7 @@ Valmis oma terrariumi täiustama realistlike klaasipeegeldustega? See tehnika li
Sa lood peened helkivad läikekujud, mis simuleerivad valguse peegeldumist klaasipindadelt. See lähenemine on sarnane Renessansi maalikunstnikele nagu Jan van Eyck, kes kasutasid valgust ja peegeldust klaasi kolme-mõõtmelise mulje loomiseks. Siin on, mida sa saavutada tahad:
> Sketš [Tomomi Imura](https://twitter.com/girlie_mac) poolt
Tere tulemast ühe kõige kaasahaaravama veebiarenduse aspekti juurde – asjade interaktiivseks muutmine! Document Object Model (DOM) on nagu sild sinu HTMLi ja JavaScripti vahel ning täna kasutame seda, et tuua sinu terrarium ellu. Kui Tim Berners-Lee lõi esimese veebibrauseri, nägi ta ette veebi, kus dokumendid võiksid olla dünaamilised ja interaktiivsed – DOM teeb selle visiooni teoks.
@ -102,7 +102,7 @@ flowchart TD
style P fill:#ffebee
style Q fill:#ffebee
```
> DOM-i ja HTML-i märgenduse kujutis, mis viitab sellele. Autor [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
@ -146,7 +146,7 @@ flowchart LR
```
> 💡 **Sulude mõistmine**: Sulud on JavaScriptis oluline teema ja paljud arendajad kasutavad neid aastaid, enne kui kõik teoreetilised aspektid täielikult selgeks saavad. Täna keskendume praktilisele rakendusele – näed sulud loomulikult tekkimas, kui ehitame oma interaktiivseid funktsioone. Mõistmine areneb koos sellega, kuidas nad lahendavad reaalseid probleeme.
> DOM-i ja HTML-i märgenduse kujutis, mis viitab sellele. Autor [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
@ -591,7 +591,7 @@ Nüüd testi oma interaktiivset terrariumit! Ava oma `index.html` fail veebilehi
- **Seadmeülene tugi**: Töötab nii lauaarvutis kui mobiilis
- **Jõudluse teadlikkus**: Puuduvad mälulekked või tarbetud arvutused
> Mõned varased brauserid, allikas [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
### Kuidas brauserid veebisisu töötlevad
@ -194,7 +194,7 @@ quadrantChart
Laienduste paigaldamise protsessi mõistmine aitab sul ette näha kasutajakogemust, kui inimesed paigaldavad sinu laienduse. Paigaldamine on standardiseeritud kaasaegsetes brauserid, väikeste erinevustega liidese kujunduses.
> **Oluline**: Veendu, et lülitad sisse arendajarežiimi ja lubad laiendusi teistest poodidest, kui testid oma laiendusi.
@ -308,10 +308,10 @@ See järgib progressiivse avaldamise põhimõtet, mida kasutatakse liidese disai
### Laiendi ülevaated
**Seadistamise vaade** – kasutaja esimese sõidu konfigureerimine:
**Tulemuste vaade** – süsiniku jalajälje andmete kuvamine:
> ⚠️ **Turvalisuse kaalutlus**: Produktionsrakendustes tähendab API võtmete salvestamine LocalStorage’is turvariske, sest JavaScript saab neid andmeid lugeda. Õppimise eesmärgil see lähenemine sobib, aga päris rakendustes tuleb tundlikud võtmed hoida turvaliselt serveripoolses salvestuses.
Proovime seda. Ava veebileht (näiteks Microsoft.com sobib hästi) ja vajuta 'Salvestus' nuppu. Nüüd värskenda lehte ja jälgi, kuidas profiler kõike jäädvustab. Kui salvestuse lõpetad, näed detailset ülevaadet sellest, kuidas brauser saidi 'skriptib', 'renderdab' ja 'maalib'. See meenutab missioonikontrolli, mis jälgib iga süsteemi raketi stardi ajal – saad reaalajas andmeid täpselt, mis toimub ja millal.
✅ [Microsofti dokumentatsioonis](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) on veel palju detaile, kui tahad süvitsi minna
@ -133,11 +133,11 @@ Vali profiili ajajoone osad, et suumida sündmusi, mis lehe laadimise ajal toimu
Saavuta oma lehe jõudlusest kiire ülevaade, valides ajajoone osa ja vaadates kokkuvõttepaneeli:
Kasutades tmrow CO2 Signal API-d elektritarbimise jälgimiseks, looge brauserilaiendus, mis tuletab teile meelde, kui suur on teie piirkonna elektritarbimine. Selle laienduse juhuslik kasutamine aitab teil teha teadlikke otsuseid oma tegevuste kohta, lähtudes sellest teabest.
Edge'i brauseris paigaldamiseks kasutage brauseri paremas ülanurgas asuvat 'kolme punkti' menüüd, et leida laienduste paneel. Sealt valige 'Laadi lahti pakkimata', et laadida uus laiendus. Avage 'dist' kaust, kui seda küsitakse, ja laiendus laaditakse. Selle kasutamiseks vajate CO2 Signal API jaoks API-võtit ([hankige see siit e-posti teel](https://www.co2signal.com/) - sisestage oma e-posti aadress sellel lehel olevasse kasti) ja [oma piirkonna koodi](http://api.electricitymap.org/v3/zones), mis vastab [Electricity Map](https://www.electricitymap.org/map) kaardile (näiteks Bostonis kasutan 'US-NEISO').
Kui API-võti ja piirkonna kood on laienduse liidesesse sisestatud, peaks brauserilaienduse ribal olev värviline täpp muutuma, et kajastada teie piirkonna energiatarbimist, ning andma teile vihjeid, millised energiamahukad tegevused oleksid sobivad. Selle 'täpi' süsteemi idee sain [Energy Lollipop laiendusest](https://energylollipop.com/) California heitkoguste jaoks.
Kasutades tmrow CO2 signaali API-d elektritarbimise jälgimiseks, looge brauserilaiend, mis annab teile otse brauseris meeldetuletuse teie piirkonna elektritarbimise kohta. Selle ad hoc laiendi kasutamine aitab teil teha otsuseid oma tegevuste kohta, tuginedes sellele teabele.
Edge'i brauseris installimiseks kasutage brauseri paremas ülanurgas asuvat 'kolme punkti' menüüd, et leida laienduste paneel. Sealt valige 'Laadi lahti pakitud', et laadida uus laiend. Kui küsitakse, avage kaust 'dist' ja laiend laaditakse. Kasutamiseks vajate CO2 signaali API võtit ([hankige see siit e-posti teel](https://www.co2signal.com/) - sisestage oma e-posti aadress selle lehe kasti) ja [oma piirkonna koodi](http://api.electricitymap.org/v3/zones), mis vastab [Electricity Mapile](https://www.electricitymap.org/map) (näiteks Bostonis kasutan 'US-NEISO').
Kui API võti ja piirkond on laiendi liideses sisestatud, peaks värvipunkt brauseri laiendusribal muutuma, et kajastada teie piirkonna energiatarbimist ja anda teile näitaja kõrge energiatarbimisega tegevuste kohta, mis oleksid teile sobivad. Selle "punktisüsteemi" kontseptsiooni sain [Energy Lollipop laiendist](https://energylollipop.com/) California heitkoguste jaoks.
Kasutades tmrow CO2 Signal API-d elektritarbimise jälgimiseks, looge brauserilaiend, mis annab teile otse brauseris meeldetuletuse teie piirkonna elektritarbimise kohta. Selle ad hoc laiendi kasutamine aitab teil teha teadlikke otsuseid oma tegevuste kohta, tuginedes nendele andmetele.
Edge'i brauseris installimiseks kasutage brauseri paremas ülanurgas asuvat 'kolme punkti' menüüd, et leida laienduste paneel. Sealt valige 'Laadi lahti pakitud laiend' uue laiendi laadimiseks. Avage 'dist' kaust, kui seda küsitakse, ja laiend laetakse. Kasutamiseks vajate API-võtit CO2 Signal API jaoks ([hankige see e-posti teel siit](https://www.co2signal.com/) - sisestage oma e-posti aadress sellel lehel olevasse kasti) ja [koodi oma piirkonna jaoks](http://api.electricitymap.org/v3/zones), mis vastab [Electricity Map'ile](https://www.electricitymap.org/map) (näiteks Bostonis kasutan 'US-NEISO').
Kui API-võti ja piirkond on sisestatud laiendi liidesesse, peaks värviline punkt brauseri laienduste ribal muutuma, et kajastada teie piirkonna energiatarbimist ja anda teile märku, milliseid energiamahukaid tegevusi oleks sobiv teha. Selle 'punktide' süsteemi idee sain [Energy Lollipop laiendist](https://energylollipop.com/) California heitkoguste jaoks.
Elektritarbimise jälgimiseks kasutades tmrow CO2 Signal API-d, on loodud brauserilaiend, mis tuletab teile meelde, kui intensiivne on teie piirkonna elektritarbimine. Selle laiendi kasutamine aitab teil teha otsuseid oma tegevuste kohta, tuginedes sellele teabele.
Edge'i brauseris installimiseks kasutage brauseri paremas ülanurgas asuvat "kolme punkti" menüüd, et leida laiendite paneel. Sealt valige "Laadi lahti pakitud" ja avage 'dist' kaust, kui seda küsitakse. Laiend laaditakse. Selle kasutamiseks vajate CO2 Signal API-d ([saate API võtme e-posti teel siit](https://www.co2snal.com/) – sisestage oma e-post selle lehe kastikesse) ja [oma piirkonna koodi](http://api.electricitymap.org/v3/zones) [Electricity Map](https://www.electricitymap.org/map) lehelt (näiteks Bostonis kasutan 'US-NEISO').
Kui API võti ja piirkond on laiendi liidesesse sisestatud, peaks brauserilaiendi ribal olev värviline täpp muutuma, et kajastada teie piirkonna energiatarbimist, ning andma teile indikatsiooni, millised energiamahukad tegevused sobivad teie kasutuseks. Selle "täpi" süsteemi idee sain California heitkoguste jaoks loodud [Energy Lollipop laiendist](https://energylollipop.com/).
Kasutame tmrow Signal CO2 API-d, et jälgida elektritarbimist ja luua brauserilaiend, mis annab otse brauseris meeldetuletuse selle kohta, kui suur on elektritarbimise koormus teie piirkonnas. Selle spetsiaalse laiendi kasutamine aitab hinnata oma tegevusi nende andmete põhjal.
Edge'i brauserisse installimiseks kasutage brauseri paremas ülanurgas asuvat "kolme punkti" menüüd, et leida laiendite paneel. Kui see pole veel aktiveeritud, lülitage sisse arendajarežiim (vasakus alanurgas). Valige "Laadi lahti pakitud", et laadida uus laiend. Avage viipas kaust "dist" ja laiend laaditakse. Kasutamiseks vajate CO2 Signal API võtmet (saate selle [siit e-posti teel](https://www.co2signal.com/) - sisestage oma e-posti aadress sellel lehel olevasse kasti) ja [oma piirkonna koodi](http://api.electricitymap.org/v3/zones), mis vastab [elektrikaardile](https://www.electricitymap.org/map) (näiteks Bostonis on see "US-NEISO").
Kui API võti ja piirkond on laiendi liideses sisestatud, peaks brauserilaiendi tööriistaribal olev värviline punkt muutuma, et kajastada piirkonna energiatarbimist, ning andma vihjeid selle kohta, millised suure energiatarbimisega tegevused oleksid sobivad. Selle "punktisüsteemi" kontseptsioon on inspireeritud [Energy Lollipop laiendist](https://energylollipop.com/), mis jälgib California heitkoguseid.
Ehita brauserilaiendus, mis kasutab tmrow CO2 Signal API-d, et jälgida elektritarbimist ja kuvada meeldetuletusena, kui palju energiat sinu piirkonnas kasutatakse. Selle laienduse ad hoc kasutamine võimaldab sul oma tegevusi vastavalt sellele teabele planeerida.
Edge'i installimiseks leia brauseri paremas ülanurgas olevast "kolme punkti" menüüst "Laiendused" paneel. Sealt vali "Load Unpacked" ja laadi uus laiendus. Kui avaneb prompt, ava "dist" kaust, et laiendus laadida. Kasutamiseks vajad CO2 Signal API API-võtit ([hankige see siit e-posti teel](https://www.co2signal.com/) - sisesta oma e-post selle lehe kastikesse) ja [Electricity Map](https://www.electricitymap.org/map) vastavat [koodi oma piirkonna jaoks](http://api.electricitymap.org/v3/zones) (näiteks Bostonis kasutatakse 'US-NEISO').
Kui sisestad API-võtme ja piirkonna laienduse liidesesse, muutub brauseri laiendusribal kuvatav värviline täpp, mis peegeldab sinu piirkonna energiatarbimist ja annab märku, milliseid energiat nõudvaid tegevusi on sobiv teha. Selle "täpi" süsteemi idee sain California osariigi emissioonide jaoks loodud [Energy Lollipop laiendusest](https://energylollipop.com/).
Kasutades tmrow CO2 Signaali API-d elektritarbimise jälgimiseks, loo brauserilaiendus, mis annab sulle brauseris märguandeid selle kohta, kui suur on sinu piirkonna elektritarbimise koormus. Selle laienduse kasutamine aitab sul teha teadlikumaid otsuseid oma tegevuste osas, tuginedes sellele teabele.
Edge'i paigaldamiseks kasuta brauseri paremas ülanurgas asuvat kolme punktiga menüüd, et leida Laienduste paneel. Sealt vali 'Load Unpacked', et laadida uus laiendus. Ava 'dist' kaust, kui seda küsitakse, ja laiendus laaditakse. Kasutamiseks vajad CO2 Signaali API võtit ([hankige see siit e-posti teel](https://www.co2signal.com/) - sisesta oma e-posti aadress sellel lehel olevasse kasti) ja [oma piirkonna koodi](http://api.electricitymap.org/v3/zones), mis vastab [Electricity Mapile](https://www.electricitymap.org/map) (näiteks Bostonis kasutan 'US-NEISO').
Kui API võti ja piirkond on laienduse liidesesse sisestatud, muutub brauserilaienduse tööriistaribal olev värviline punkt, et kajastada sinu piirkonna energiatarbimist, ning annab sulle soovitusi, milliseid tegevusi on sobiv teha. Selle 'punktisüsteemi' kontseptsiooni sain inspiratsiooniks [Energy Lollipop brauserilaiendusest](https://energylollipop.com/) California heitkoguste jaoks.
Kasutades tmrow'i CO2 Signal API-d elektritarbimise jälgimiseks, loo brauserilaiendus, mis annab sulle otse brauseris meeldetuletuse selle kohta, kui suur on sinu piirkonna elektritarbimise koormus. Selle laienduse juhuslik kasutamine aitab sul teha teadlikke otsuseid oma tegevuste osas, lähtudes sellest infost.
Edge'i brauseris paigaldamiseks kasuta brauseri paremas ülanurgas asuvat 'kolme punkti' menüüd, et leida Laienduste paneel. Sealt vali 'Laadi lahti pakkimata', et laadida uus laiendus. Avanevas dialoogis vali 'dist' kaust ja laiendus laetakse. Kasutamiseks vajad CO2 Signal API jaoks API-võtit ([hankige see e-posti teel siit](https://www.co2signal.com/) - sisesta oma e-post sellel lehel olevasse kasti) ja [oma piirkonna koodi](http://api.electricitymap.org/v3/zones), mis vastab [Electricity Map](https://www.electricitymap.org/map) andmetele (näiteks Bostonis kasutan 'US-NEISO').
Kui API-võti ja piirkonna kood on sisestatud laienduse liidesesse, peaks brauserilaienduse ribal olev värviline täpp muutuma, et kajastada sinu piirkonna energiatarbimist. See annab sulle vihje, millised energiamahukad tegevused oleksid sobivad. Selle 'täpi' süsteemi idee sain [Energy Lollipop laiendusest](https://energylollipop.com/) California heitmete jaoks.
> Pilt pärit [MDN-ist](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
Canvas elemendi joonistamiseks järgid kolme sammuga protsessi, mis moodustab kõigi canvas graafika aluse. Kui seda mõned korrad teha, saab see loomuomaseks:
@ -323,11 +323,11 @@ Ehitad veebilehe Canvas elemendiga. See kuvab musta taustaga ekraani mõõtmeteg
- **Skoorisüsteem**: Iga hävitatud vaenlase laev annab 100 punkti (ümarad numbrid on mängijatele kergemini vaimselt arvutatavad). Skoor kuvatakse vasakus alanurgas.
- **Elude lugur**: Sinu kangelane alustab kolme eluga - see on varaste arcade-mängude poolt kehtestatud standard mängimise väljakutse ja tasakaalu jaoks. Iga kokkupõrge vaenlasega maksab ühe elu. Jääke näitame paremas alanurgas laevaikoonidega .
- **Elude lugur**: Sinu kangelane alustab kolme eluga - see on varaste arcade-mängude poolt kehtestatud standard mängimise väljakutse ja tasakaalu jaoks. Iga kokkupõrge vaenlasega maksab ühe elu. Jääke näitame paremas alanurgas laevaikoonidega .
Funktsioon `history.pushState` loob uusi kirjeid brauseri ajaloos. Seda näeb, kui hoiate all oma brauseri *tagasi-nuppu*, mis peaks kuvama midagi sellist:
@ -292,7 +292,7 @@ Esiteks vaatleme, mis juhtub lihtsa vormi esitamisega:
2. Jälgige muudatusi oma brauseri aadressireal
3. Märkake, kuidas leht laaditakse uuesti ja andmed ilmuvad aadressireale
### HTTP meetodite võrdlus
@ -346,7 +346,7 @@ Seadistame oma registreerimisvormi, et see korrektselt suhtleks tagapõhja API-g
2. **Vajutage** nuppu "Loo konto"
3. **Vaadake** brauserist serveri vastust
**Mida peaks nägema:**
- **Brauser suunab** API lõpp-punkti URL-ile
@ -609,7 +609,7 @@ async function register() {
3. **Klõpsake** "Loo konto"
4. **Jälgige** konsooli sõnumeid ja kasutajale tagasisidet
**Mida peaksite nägema:**
- **Laadimisolek** ilmub esitamisklipile
@ -783,7 +783,7 @@ Täiustame teie registreerimisvormi tugeva valideerimisega, mis pakub suurepära
3. **Sisestage** kasutajanime välja erimärgid
4. **Sisestage** negatiivne saldosumma
**Mida täheldate:**
- **Brauser kuvab** oma staatilisi valideerimissõnumeid
@ -943,7 +943,7 @@ Kuva HTML-is veateade, kui kasutaja juba eksisteerib.
Näide sellest, kuidas lõplik sisselogimisleht võib välja näha pärast veidi kujundamist:
@ -187,7 +187,7 @@ Nagu Titanic'i kambrite jaotus, mis tundus tugev kuni mitme kambri samaaegne upp
Selle asemel, et oma saba taga ajada, loome **tsentraliseeritud oleku juhtimise** süsteemi. Mõtle sellele kui ühele väga organiseeritud inimesele, kes haldab kõike olulist:
```mermaid
flowchart TD
@ -798,7 +798,7 @@ See väljakutse aitab sul mõelda professionaalse arendajana, kes võtab arvesse
@ -112,7 +112,7 @@ Vaata [serveri API dokumentatsiooni](../api/README.md) kohta:
**Oodatav tulemus:**
Pärast selle ülesande lõpetamist peaks su pangarakendus omama täielikult toimivat "Lisa tehing" funktsionaalsust, mis näeb välja ja toimib professionaalselt:
Selles projektis õpid, kuidas luua fiktiivset panka. Need õppetunnid sisaldavad juhiseid veebirakenduse kujundamiseks ja marsruutide loomiseks, vormide ehitamiseks, oleku haldamiseks ning API-st andmete hankimiseks, mille abil saad panga andmeid kätte.
## 🗺️ Sinu õpiteek läbi AI-rakenduste arenduse
@ -189,7 +189,7 @@ mindmap
```
**Põhialus**: AI rakenduste arendus ühendab traditsioonilised veebiarenduse oskused AI teenuste integratsiooniga, luues nutikaid rakendusi, mis mõistavad loomulikult kasutajate vajadusi.
**Mida teeb mänguväljaku nii kasulikuks:**
- **Proovi** erinevaid AI mudeleid nagu GPT-4o-mini, Claude jpt (kõik tasuta!)
@ -199,7 +199,7 @@ mindmap
Kui oled natuke mänginud, klõpsa "Code" vahekaardile ja vali programmeerimiskeel, et saada vajaminev kood.
## Python tagapõhja integratsiooni seadistamine
@ -2351,14 +2351,14 @@ Tahad proovida seda projekti pilvearenduskeskkonnas? GitHub Codespaces pakub tä
- **Mine** aadressile [Web Dev For Beginners repository](https://github.com/microsoft/Web-Dev-For-Beginners)
- **Vajuta** paremas ülanurgas nuppu "Use this template" (vesi, et oled GitHubi sisse logitud)
**2. samm: Käivita Codespaces**
- **Ava** äsja loodud repositoorium
- **Vajuta** rohelist "Code" nuppu ja vali "Codespaces"
- **Vali** "Create codespace on main", et alustada oma arenduskeskkonda
امروز، ما به ابزارهای شگفتانگیزی میپردازیم که توسعه وب مدرن را نه تنها ممکن بلکه واقعاً اعتیادآور کردهاند. منظورم دقیقاً همان ویرایشگرها، مرورگرها و جریانهای کاری است که توسعهدهندگان شرکتهای Netflix، Spotify و استودیوی اپلیکیشنهای مستقل محبوب تو هر روز استفاده میکنند. و این بخشی است که باعث شادی تو میشود: بیشتر این ابزارهای حرفهای و استاندارد صنعت کاملاً رایگان هستند!
این سفر را با هم قدم به قدم طی میکنیم. بدون عجله، بدون فشار – فقط تو، من و ابزارهای واقعاً باحالی که قرار است بهترین دوستان جدیدت شوند!
> یادداشت تصویری توسط [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid
@ -605,7 +605,7 @@ flowchart TD
✅ یک راه خوب برای پیدا کردن مخازن 'مناسب برای مبتدیان' این است که به [جستجو بر اساس برچسب 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/) بپردازید.
روشهای مختلفی برای کپی کردن کد وجود دارد. یک روش این است که محتویات مخزن را "clone" کنید، از طریق HTTPS، SSH، یا با استفاده از رابط خط فرمان GitHub (CLI).
> اسکچنوت توسط [Tomomi Imura](https://twitter.com/girlie_mac)
HTML یا زبان نشانهگذاری ابرمتن، پایه و اساس هر وبسایتی است که تا به حال بازدید کردهاید. HTML را مانند اسکلت در نظر بگیرید که ساختار صفحات وب را میسازد – مشخص میکند محتوای چیست، چگونه سازماندهی شده و هر بخش چه نمایندگی دارد. در حالی که CSS بعداً «لباس» به HTML شما با رنگها و چیدمان میپوشاند و جاوااسکریپت با تعامل آن را زنده میکند، HTML ساختار اساسی را فراهم میکند که همه چیز را ممکن میسازد.
@ -86,7 +86,7 @@ mindmap
4. در پنل اکسپلورر روی آیکون "New File" کلیک کنید
5. فایل خود را به نام `index.html` نامگذاری کنید
**گزینه ۲: استفاده از دستورات ترمینال**
```bash
@ -236,48 +236,48 @@ HTML از تگهای جفتی برای تعریف عناصر استفاده
> اسکچنوت توسط [تومومی ایمورا](https://twitter.com/girlie_mac)
یادتان هست که تراریوم HTML شما چقدر ساده به نظر میرسید؟ CSS همان جایی است که آن ساختار ساده را به چیزی جذاب و دیدنی تبدیل میکنیم.
@ -202,7 +202,7 @@ body {
ابزار توسعهدهنده مرورگر خود را باز کنید (F12)، به تب Elements بروید و عنصر `<h1>` خود را بررسی کنید. خواهید دید که خانواده فونت را از body به ارث میبرد:
✅ **زمان آزمایش**: سعی کنید ویژگیهای ارثبرنده دیگری مانند `color`، `line-height` یا `text-align` را روی `<body>` تنظیم کنید. چه اتفاقی برای عنوان و سایر عناصر میافتد؟
@ -332,7 +332,7 @@ h1 {
**اینجا ساختار HTML برای هر گیاه است:**
```html
<divclass="plant-holder">
<imgclass="plant"alt="Decorative plant for terrarium"id="plant1"src="../../../../translated_images/plant1.d18b18ffe73da18f.fa.png" />
<imgclass="plant"alt="Decorative plant for terrarium"id="plant1"src="../../../../translated_images/fa/plant1.d18b18ffe73da18f.png" />
</div>
```
@ -594,7 +594,7 @@ flowchart LR
شما نقاط برجسته ملایمی ایجاد خواهید کرد که بازتاب نور از سطوح شیشه را شبیهسازی میکند. این روش مشابه نحوه استفاده نقاشان رنسانس مانند جان فان آیک از نور و بازتاب برای واقعی به نظر رسیدن شیشه نقاشی شده است. هدف شما این است:
localizeflow[bot]
1 week ago