diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ab64775d35f78f5238fe.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ab64775d35f78f5238fe.md index 50d53654687..9f2bfe1a4a7 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ab64775d35f78f5238fe.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ab64775d35f78f5238fe.md @@ -1,14 +1,18 @@ --- id: 6733ab64775d35f78f5238fe title: What Does CRUD Stand For, and How Do the Basic Operations Work? -challengeType: 19 -# videoId: nVAaxZ34khk +challengeType: 11 +videoId: TmDWKodlfZM dashedName: what-does-crud-stand-for-and-how-do-the-basic-operations-work --- # --description-- -The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now: +Watch the video and answer the questions below. + +# --transcript-- + +What does CRUD stand for, and how do the basic operations work? CRUD is an acronym that stands for Create, Read, Update, and Delete. These are the four operations of persistent storage. @@ -84,7 +88,7 @@ In this example: - We update an item by modifying the array element at a given index. -- We delete an item by removing it from the array using splice(). +- We delete an item by removing it from the array using `splice()`. This is a basic representation of how CRUD operations work at a conceptual level. diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ff4a9319c8486750886c.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ff4a9319c8486750886c.md index caac99aa154..4055b085f31 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ff4a9319c8486750886c.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ff4a9319c8486750886c.md @@ -1,14 +1,18 @@ --- id: 6733ff4a9319c8486750886c title: What Is localStorage, and What Are Some Common Methods? -challengeType: 19 -# videoId: nVAaxZ34khk +challengeType: 11 +videoId: O-UYibtLTAg dashedName: what-is-localstorage-and-what-are-some-common-methods --- # --description-- -The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now: +Watch the video and answer the questions below. + +# --transcript-- + +What is `localStorage`, and what are some common methods? The Web Storage API provides a mechanism for browsers to store key-value pairs right within the browser, allowing developers to store information that can be used across different page reloads and sessions. diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ff5814129c48b4fca88e.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ff5814129c48b4fca88e.md index 29c27223d52..f5750c8b658 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ff5814129c48b4fca88e.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ff5814129c48b4fca88e.md @@ -1,14 +1,18 @@ --- id: 6733ff5814129c48b4fca88e title: What Is sessionStorage, and What Are Some Common Methods? -challengeType: 19 -# videoId: nVAaxZ34khk +challengeType: 11 +videoId: eJq2W_U2hAU dashedName: what-is-sessionstorage-and-what-are-some-common-methods --- # --description-- -The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now: +Watch the video and answer the questions below. + +# --transcript-- + +What is `sessionStorage`, and what are some common methods? In the previous lecture video, we learned about working with `localStorage` and were briefly introduced to `sessionStorage`. diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ff6f02dde548ebe4a6d5.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ff6f02dde548ebe4a6d5.md index 7626360fc15..6fea555874f 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ff6f02dde548ebe4a6d5.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ff6f02dde548ebe4a6d5.md @@ -1,14 +1,18 @@ --- id: 6733ff6f02dde548ebe4a6d5 title: What Are Cookies, and How Do They Work? -challengeType: 19 -# videoId: nVAaxZ34khk +challengeType: 11 +videoId: kaq7TvntyJ8 dashedName: what-are-cookies-and-how-do-they-work --- # --description-- -The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now: +Watch the video and answer the questions below. + +# --transcript-- + +What are cookies, and how do they work? Cookies, also known as web cookies or browser cookies, are small pieces of data that a server sends to a user's web browser. These cookies are stored on the user's device and sent back to the server with subsequent requests. @@ -46,7 +50,7 @@ Here is a breakdown of the different types of cookies. - Secure Cookies are only sent over HTTPS, ensuring that they cannot be intercepted by an attacker in transit. -- HttpOnly Cookies cannot be accessed or modified by JavaScript running in the browser, making them more secure against cross-site scripting (XSS) attacks. cross-site scripting (XSS) attacks happen when an attacker injects malicious scripts into a web page that is viewed by other users. These scripts can then execute in the context of the victim's browser, potentially stealing cookies, session data, or performing other malicious actions without the user's knowledge or consent. By marking cookies as HttpOnly, they are protected from being accessed via JavaScript, reducing the risk of such attacks. +- HttpOnly Cookies cannot be accessed or modified by JavaScript running in the browser, making them more secure against cross-site scripting (XSS) attacks. Cross-site scripting (XSS) attacks happen when an attacker injects malicious scripts into a web page that is viewed by other users. These scripts can then execute in the context of the victim's browser, potentially stealing cookies, session data, or performing other malicious actions without the user's knowledge or consent. By marking cookies as HttpOnly, they are protected from being accessed via JavaScript, reducing the risk of such attacks. You can create cookies via server responses using the `Set-Cookie` header or through JavaScript using `document.cookie`. diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ff8d06376149474a0c0d.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ff8d06376149474a0c0d.md index 9dc0436b956..fb864223cd8 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ff8d06376149474a0c0d.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ff8d06376149474a0c0d.md @@ -1,20 +1,24 @@ --- id: 6733ff8d06376149474a0c0d title: What Is the Cache API, and How Does It Work? -challengeType: 19 -# videoId: nVAaxZ34khk +challengeType: 11 +videoId: wRLVQXHNXu4 dashedName: what-is-the-cache-api-and-how-does-that-work --- # --description-- -The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now: +Watch the video and answer the questions below. -The Cache API is used to store network requests and responses, making web applications work more efficiently and even function offline. It is part of the broader Service Worker API and is crucial for creating Progressive Web Apps (PWAs) that can work under unreliable or slow network conditions. +# --transcript-- -Before we continue with the Cache API, we first need to understand how service workers, PWAs, and network requests work on a basic level. +What is the `Cache` API, and how does it work? -A Network request is a request made by a web browser or application to a server to retrieve data or resources over the internet. For example, when you visit a website, your browser sends a network request to the web server to get the files (such as HTML, images, or videos) needed to display the page. +The `Cache` API is used to store network requests and responses, making web applications work more efficiently and even function offline. It is part of the broader Service Worker API and is critical for creating Progressive Web Apps (PWAs) that can work under unreliable or slow network conditions. + +Before we continue with the `Cache` API, we first need to understand how service workers, PWAs, and network requests work on a basic level. + +A network request is a request made by a web browser or application to a server to retrieve data or resources over the internet. For example, when you visit a website, your browser sends a network request to the web server to get the files (such as HTML, images, or videos) needed to display the page. A service worker is a special type of JavaScript file that runs in the background of a web application, separate from the main browser thread. It acts as a middleman between the web page and the network, allowing developers to intercept network requests, cache resources, and handle things like push notifications or background sync. @@ -22,13 +26,13 @@ A PWA, or Progressive Web App, is a type of web application that uses modern web Now that we have a better understanding of service workers, PWAs, and network requests, we can dive deeper into the Cache API. -The Cache API is a storage mechanism that stores `Request` and `Response` objects. When a request is made to a server, the application can store the response and later retrieve it from the cache instead of making a new network request. This reduces load times, saves bandwidth, and improves the overall user experience. +The `Cache` API is a storage mechanism that stores `Request` and `Response` objects. When a request is made to a server, the application can store the response and later retrieve it from the cache instead of making a new network request. This reduces load times, saves bandwidth, and improves the overall user experience. -The browser provides a storage area known as Cache Storage, where developers can save key-value pairs of network requests and their corresponding responses. +The browser provides a storage area known as `CacheStorage`, where developers can save key-value pairs of network requests and their corresponding responses. -With the Cache-Control header, developers can specify how long a cached resource should remain stored, as well as whether it should be revalidated or served directly from the cache. +With the `Cache-Control` header, developers can specify how long a cached resource should remain stored, as well as whether it should be revalidated or served directly from the cache. -By using the Cache API, developers can build offline-first web applications, allowing a PWA, for example, to serve cached assets when the user is disconnected from the network. +By using the `Cache` API, developers can build offline-first web applications, allowing a PWA, for example, to serve cached assets when the user is disconnected from the network. # --questions-- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ff9d2fb9c449af68ad99.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ff9d2fb9c449af68ad99.md index 1054fc7bc76..ca8e2bba5e3 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ff9d2fb9c449af68ad99.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ff9d2fb9c449af68ad99.md @@ -1,14 +1,18 @@ --- id: 6733ff9d2fb9c449af68ad99 title: What Are Some Negative Patterns Associated with Client-Side Storage? -challengeType: 19 -# videoId: nVAaxZ34khk +challengeType: 11 +videoId: Yv_LgxyVDpY dashedName: what-are-some-negative-patterns-associated-with-client-side-storage --- # --description-- -The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now: +Watch the video and answer the questions below. + +# --transcript-- + +What are some negative patterns associated with client-side storage? Client-side storage allows websites to store data on a user's device. However, like many technologies, it can be misused. @@ -41,13 +45,13 @@ console.log(fingerprintExample); This code combines your browser's user agent with your screen dimensions. While this is a basic example, real fingerprinting methods are much more complex and can be highly accurate in identifying users. -Local Storage can also be misused as some websites use it to store sensitive information insecurely. For instance: +`localStorage` can also be misused as some websites use it to store sensitive information insecurely. For instance: ```js localStorage.setItem('userPassword', 'someonesPasswordHere'); ``` -This code stores a user's password in Local Storage. This is a serious security risk as the data in Local Storage is not encrypted and can be accessed easily. +This code stores a user's password in `localStorage`. This is a serious security risk as the data in `localStorage` is not encrypted and can be accessed easily. In conclusion, while client-side storage offers many benefits, it's crucial to use it responsibly. As you continue your web development journey, always consider the privacy and security of your users' data on the client side. @@ -127,35 +131,35 @@ Consider which option relates to identifying individual users. ## --text-- -Why is storing sensitive information like passwords in Local Storage a security risk? +Why is storing sensitive information like passwords in `localStorage` a security risk? ## --answers-- -Local Storage has limited capacity. +`localStorage` has limited capacity. ### --feedback-- -Think about the security features (or lack thereof) in Local Storage. +Think about the security features (or lack thereof) in `localStorage`. --- -Data in Local Storage is not encrypted. +Data in `localStorage` is not encrypted. --- -Local Storage is slower than cookies. +`localStorage` is slower than cookies. ### --feedback-- -Think about the security features (or lack thereof) in Local Storage. +Think about the security features (or lack thereof) in `localStorage`. --- -Local Storage doesn't work in all browsers. +`localStorage` doesn't work in all browsers. ### --feedback-- -Think about the security features (or lack thereof) in Local Storage. +Think about the security features (or lack thereof) in `localStorage`. ## --video-solution-- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ffacd0ad1e49ec2af051.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ffacd0ad1e49ec2af051.md index 8ceab42d32b..8e6d56d11ec 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ffacd0ad1e49ec2af051.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ffacd0ad1e49ec2af051.md @@ -1,14 +1,18 @@ --- id: 6733ffacd0ad1e49ec2af051 title: How Can You Use Cookies to Store Arbitrary Data, Normally Controlled by HTTP Headers? -challengeType: 19 -# videoId: nVAaxZ34khk +challengeType: 11 +videoId: 9w16Mk4oBWQ dashedName: how-can-you-use-cookies-to-store-arbitrary-data-normally-controlled-by-http-headers --- # --description-- -The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now: +Watch the video and answer the questions below. + +# --transcript-- + +How can you use cookies to store arbitrary data, normally controlled by HTTP headers? As you learned in previous lectures, cookies are simple data that websites can store on a user's device. @@ -26,7 +30,7 @@ document.cookie = "userInfo=" + JSON.stringify(userData) + "; path=/"; In this example, we're creating an object with user data, converting it to a JSON string, and then storing it in a cookie. When we want to retrieve this data, we can parse the JSON string into an object using `JSON.parse()`. -Now, you might be wondering about the “HTTP headers” aspect of our topic. Typically, cookies are set by the server using HTTP headers. +Now, you might be wondering about the "HTTP headers" aspect of our topic. Typically, cookies are set by the server using HTTP headers. For example, a server might send a header like this: diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ffb59c62ee4a23522efe.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ffb59c62ee4a23522efe.md index 3d1195d0055..56cb797b736 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ffb59c62ee4a23522efe.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ffb59c62ee4a23522efe.md @@ -1,20 +1,24 @@ --- id: 6733ffb59c62ee4a23522efe title: What Is IndexedDB, and How Does It Work? -challengeType: 19 -# videoId: nVAaxZ34khk +challengeType: 11 +videoId: cmXVJGcTEkY dashedName: what-is-indexeddb-and-how-does-it-work --- # --description-- -The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now: +Watch the video and answer the questions below. -IndexedDB is a tool for storing structured data in the browser. This is built into modern web browsers, allowing web apps to store and fetch JavaScript objects efficiently. +# --transcript-- -Unlike other storage mechanisms like localStorage, which is limited to storing strings, IndexedDB can store JavaScript objects, files, and pretty much any other type of data. This makes it easy for web applications that need to work with large and complex data structures. +What is `IndexedDB`, and how does it work? -Now, let's look at how IndexedDB works. +`IndexedDB` is a tool for storing structured data in the browser. This is built into modern web browsers, allowing web apps to store and fetch JavaScript objects efficiently. + +Unlike other storage mechanisms like `localStorage`, which is limited to storing strings, `IndexedDB` can store JavaScript objects, files, and pretty much any other type of data. This makes it easy for web applications that need to work with large and complex data structures. + +Now, let's look at how `IndexedDB` works. The first step is to open a database. Here's an example: @@ -31,7 +35,7 @@ request.onsuccess = function(event) { }; ``` -In this code, we're opening a database named `"Sample DB"` with version 1. We provide two callback functions: one for handling errors, and another for when the database is successfully opened. The 'db' object we get in the success callback is what we'll use to interact with the database. +In this code, we're opening a database named `"Sample DB"` with version 1. We provide two callback functions: one for handling errors, and another for when the database is successfully opened. The `db` object we get in the success callback is what we'll use to interact with the database. If you check the browser dev tools application interface, you will see your `Sample DB` in the `IndexedDb` section has been opened. Once you have your database open, you can start working with object stores. @@ -46,7 +50,7 @@ request.onupgradeneeded = function(event) { This code creates an object store named `"customers"` with `"id"` as its key path. The key path is like a primary key in a traditional database - it's used to uniquely identify each record. -To add data to our object store, we'd do something like this. The `db` in this example represents the IndexedDB database instance. +To add data to our object store, we'd do something like this. The `db` in this example represents the `IndexedDB` database instance. ```js let transaction = db.transaction(["customers"], "readwrite"); @@ -82,17 +86,17 @@ request.onsuccess = function(event) { This code retrieves the customer with `id` `1` from our `"customers"` object store. -One of the key features of IndexedDB is that it's asynchronous. +One of the key features of `IndexedDB` is that it's asynchronous. -This means that when you interact with IndexedDB, operations don't block the main thread of the web application. This ensures that your web application remains responsive even when dealing with large amounts of data. +This means that when you interact with `IndexedDB`, operations don't block the main thread of the web application. This ensures that your web application remains responsive even when dealing with large amounts of data. -While IndexedDB provides powerful capabilities, it has a steeper learning curve compared to other simpler storage API options which can be challenging for beginners. However, for applications that need to handle large amounts of structured data on the client-side, IndexedDB offers unparalleled capabilities. +While `IndexedDB` provides powerful capabilities, it has a steeper learning curve compared to other simpler storage API options which can be challenging for beginners. However, for applications that need to handle large amounts of structured data on the client-side, `IndexedDB` offers unparalleled capabilities. # --questions-- ## --text-- -What is a key characteristic of IndexedDB operations? +What is a key characteristic of `IndexedDB` operations? ## --answers-- @@ -100,7 +104,7 @@ They are always synchronous. ### --feedback-- -Consider how IndexedDB operations interact with the main thread of a web application. +Consider how `IndexedDB` operations interact with the main thread of a web application. --- @@ -112,7 +116,7 @@ They only work with string data. ### --feedback-- -Consider how IndexedDB operations interact with the main thread of a web application. +Consider how `IndexedDB` operations interact with the main thread of a web application. --- @@ -120,7 +124,7 @@ They require a constant internet connection. ### --feedback-- -Consider how IndexedDB operations interact with the main thread of a web application. +Consider how `IndexedDB` operations interact with the main thread of a web application. ## --video-solution-- @@ -128,11 +132,11 @@ Consider how IndexedDB operations interact with the main thread of a web applica ## --text-- -What is the primary advantage of using IndexedDB over localStorage? +What is the primary advantage of using `IndexedDB` over `localStorage`? ## --answers-- -IndexedDB is easier to use. +`IndexedDB` is easier to use. ### --feedback-- @@ -140,11 +144,11 @@ Consider the types of data each storage method can handle and how this affects t --- -IndexedDB supports storing complex JavaScript objects directly. +`IndexedDB` supports storing complex JavaScript objects directly. --- -IndexedDB is synchronous. +`IndexedDB` is synchronous. ### --feedback-- @@ -152,7 +156,7 @@ Consider the types of data each storage method can handle and how this affects t --- -IndexedDB is supported in older browsers. +`IndexedDB` is supported in older browsers. ### --feedback-- @@ -164,7 +168,7 @@ Consider the types of data each storage method can handle and how this affects t ## --text-- -In IndexedDB, what is an object store most similar to in traditional relational databases? +In `IndexedDB`, what is an object store most similar to in traditional relational databases? ## --answers-- @@ -172,7 +176,7 @@ A database. ### --feedback-- -Consider how data is organized in IndexedDB compared to a traditional SQL database. +Consider how data is organized in `IndexedDB` compared to a traditional SQL database. --- @@ -184,7 +188,7 @@ A row. ### --feedback-- -Consider how data is organized in IndexedDB compared to a traditional SQL database. +Consider how data is organized in `IndexedDB` compared to a traditional SQL database. --- @@ -192,7 +196,7 @@ A column. ### --feedback-- -Consider how data is organized in IndexedDB compared to a traditional SQL database. +Consider how data is organized in `IndexedDB` compared to a traditional SQL database. ## --video-solution-- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ffc7353af34a61ed683a.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ffc7353af34a61ed683a.md index d7a20ab64c1..f3364ff885d 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ffc7353af34a61ed683a.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-client-side-storage-and-crud-operations/6733ffc7353af34a61ed683a.md @@ -1,36 +1,40 @@ --- id: 6733ffc7353af34a61ed683a title: What Are Cache and Service Workers, and How Do They Work? -challengeType: 19 -# videoId: nVAaxZ34khk +challengeType: 11 +videoId: dINyijgrQ2w dashedName: what-are-cache-service-workers-and-how-do-they-work --- # --description-- -The video for this lecture isn't available yet, one will be available soon. Here is a transcript of the lecture for now: +Watch the video and answer the questions below. + +# --transcript-- + +What are cache and service workers, and how do they work? Caching is the process of storing copies of files in a temporary storage location so they can be accessed more quickly. When you visit a website, your browser can save certain files (such as images, CSS, and JavaScript) locally. This means that the next time you visit the same site, it can load these files from your device instead of fetching them again from a server, making the site load faster. -A Service Worker is a script that runs in the background, separate from your web page. It can intercept network requests, access the cache, and enable the web app to work offline. It is a key component of Progressive Web Apps. +A service worker is a script that runs in the background, separate from your web page. It can intercept network requests, access the cache, and enable the web app to work offline. It is a key component of Progressive Web Apps. -So, how do Cache and Service Workers work together in Progressive Web Apps? +So, how do cache and service workers work together in Progressive Web Apps? PWAs are web apps that can offer an app-like experience. They can work offline, send push notifications, and even be installed on the home screen of a mobile device or computer. -When a user first visits a PWA, the Service Worker can cache important files. +When a user first visits a PWA, the service worker can cache important files. Users can continue to use the app offline, and when they come back online, any upcoming changes can be synced with the server. -The combination of caching and Service Workers enables web apps to provide a fast and reliable experience even in poor network conditions. +The combination of caching and service workers enables web apps to provide a fast and reliable experience even in poor network conditions. # --questions-- ## --text-- -What is the primary purpose of a Service Worker in a Progressive Web App? +What is the primary purpose of a service worker in a Progressive Web App? ## --answers--