{"id":15764931,"url":"https://github.com/lydiahallie/advanced-web-dev-quiz","last_synced_at":"2025-04-06T07:13:27.074Z","repository":{"id":174249938,"uuid":"651963944","full_name":"lydiahallie/advanced-web-dev-quiz","owner":"lydiahallie","description":"🔥 Repo related to my FrontendMasters course. An Advanced Web Dev Quiz that covers a wide range of the things web devs get to deal with on a daily basis.","archived":false,"fork":false,"pushed_at":"2024-07-30T05:23:36.000Z","size":10,"stargazers_count":315,"open_issues_count":3,"forks_count":55,"subscribers_count":7,"default_branch":"main","last_synced_at":"2024-10-05T12:22:51.477Z","etag":null,"topics":["csrf","css","html","javascript","performance","rendering","security","web","xss"],"latest_commit_sha":null,"homepage":"https://frontendmasters.com/courses/web-dev-quiz/","language":null,"has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lydiahallie.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-06-10T16:30:28.000Z","updated_at":"2024-10-03T10:36:38.000Z","dependencies_parsed_at":"2024-10-25T16:53:18.952Z","dependency_job_id":null,"html_url":"https://github.com/lydiahallie/advanced-web-dev-quiz","commit_stats":null,"previous_names":["lydiahallie/advanced-web-dev-quiz"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lydiahallie%2Fadvanced-web-dev-quiz","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lydiahallie%2Fadvanced-web-dev-quiz/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lydiahallie%2Fadvanced-web-dev-quiz/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lydiahallie%2Fadvanced-web-dev-quiz/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lydiahallie","download_url":"https://codeload.github.com/lydiahallie/advanced-web-dev-quiz/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247445671,"owners_count":20939958,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["csrf","css","html","javascript","performance","rendering","security","web","xss"],"created_at":"2024-10-04T12:23:17.820Z","updated_at":"2025-04-06T07:13:27.056Z","avatar_url":"https://github.com/lydiahallie.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cimg height=\"100\" src=\"https://javascriptpatterns.vercel.app/fm-logo.png\"\u003e\n  \u003ch1\u003eAdvanced Web Dev Quiz\u003c/h1\u003e\n\u003c/div\u003e\n\n---\n \n\u003e This  repo is related to my [FrontendMasters course](https://frontendmasters.com/courses/web-dev-quiz/). \u003cbr /\u003e You'll find the questions and additional resources to get a better understanding of the concepts.\n\nThis **Advanced Web Dev Quiz** covers a wide range of the things web devs get to deal with on a daily basis. The goal is to (re)introduce you to certain concepts that you may have forgotten over the years or simply don't get exposed to that often 🙂 \n\nHave fun, and hopefully you'll learn something new today! Good luck! 💪\n\n| ⚠️ This repo **does not contain the answers(!)**, only the questions and useful resources on the question's topic! \u003cbr /\u003e To see the answers and watch visualized explanations for each question, **please watch the [FrontendMasters course](https://frontendmasters.com/courses/web-dev-quiz/)! 🙏**  |\n|---|\n\n\u003c/div\u003e\n\n---\n\n## Overview\n\n- Question 1: [`async` and `defer` execution order](#1-put-the-scripts-in-the-right-order-of-execution)\n- Question 2: [Rendering Pipeline and Compositing](#2-which-statements-are-true)\n- Question 3: [Resolving Domain Requests](#3-fill-in-the-gaps)\n- Question 4: [Call Stack \u0026 Event Loop](#4-what-gets-logged)\n- Question 5: [Resource Hints](#5-match-the-resource-hints-with-their-definitions)\n- Quesiton 6: [Object Reference \u0026 Destructuring](#6-whats-the-output)\n- Question 7: [`PerformanceNavigationTiming`](#7-put-the-performancenavigationtimings-in-the-right-order)\n- Question 8: [Cache Directives](#8-match-the-caching-directives-to-their-definitions)\n- Question 9: [Garbage Collection](#9-what-statements-are-true-about-this-code-block)\n- Question 10: [Animation Cost](10-when-animating-the-following-properties-which-have-the-correctly-listed-rendering-costs)\n- Question 11: [Event Propagation](#11-what-gets-logged-when-clicking-button)\n- Question 12: [CSS Specificity](#12-order-the-css-selectors-by-ascending-specificity)\n- Question 13: [`WeakMap`](#13-what-statements-are-true)\n- Question 14: [Web Vitals](#14-match-the-web-vitals-to-the-correct-descriptions)\n- Question 15: [Content Security Policy](#15-which-resources-will-be-allowed-with-the-following-csp-header)\n- Question 16: [Referrer Policies](#16-which-statements-are-true)\n- Question 17: [Generators](#17-when-does-in-log-my-input-get-logged)\n- Question 18: [Promise Methods](#18-connect-the-promise-methods-to-the-right-output)\n- Question 19: [Back-Forward Cache](#19-which-of-the-following-values-will-always-make-your-page-ineligible-for-bfcache)\n- Question 20: [XSS, MITM, CSRF, Clickjacking](#20-connect-the-terms-with-their-definitions)\n- Question 21: [Font Strategies](#21-connect-the-font-strategies-to-their-definition)\n- Question 22: [Cookies](#22-what-statements-are-true-about-the-following-cookie-header)\n- Question 23: [CSS Pseudo Selectors](#23-which-of-the-css-pseudoselectors-can-we-use-to-only-target-the-first-list-item-lioneli)\n- Question 24: [`Strict-Transport-Security`](#24-what-is-true-about-the-following-header)\n- Question 25: [Render Layers](#25-which-of-the-following-properties-causes-the-element-to-be-promoted-to-its-own-renderlayer)\n- Question 26: [Image Formats](#26-match-the-image-formats-to-the--descriptions)\n- Question 27: [CORS](#27-what-is-true-about-the-following-cors-config)\n- Question 28: [Event Loop](#28-what-gets-logged)\n- Question 29: [HTTP/1, HTTP/2, HTTP/3](#29-what-statements-are-correct)\n- Question 30: [`this` keyword](#30-what-gets-logged)\n\n---\n\n## All Questions\n\n### 1. Put the scripts in the right order of execution\n\n- A. `\u003cscript defer src=\"defer1.js\" /\u003e` (loads in **300ms**)\n- B. `\u003cscript defer src=\"defer2.js\" /\u003e` (loads in **200ms**)\n- C. `\u003cscript async src=\"async1.js\" /\u003e` (loads in **300ms**)\n- D. `\u003cscript async src=\"async2.js\" /\u003e` (loads in **50ms**)\n- E. `\u003cscript async defer src=\"asyncdefer1.js\" /\u003e` (loads in **60ms**)\n\n\u003cdetails\u003e\n\u003csummary\u003e💡 \u003cb\u003eResources\u003c/b\u003e\u003c/summary\u003e\n \u003cbr /\u003e\n \n Answer:\n - [**Watch Answer \u0026 Explanation**](https://frontendmasters.com/courses/web-dev-quiz/q1-async-defer-execution-order/)\n \nFurther reading: \n - https://html.spec.whatwg.org/multipage/scripting.html#attr-script-async\n - https://javascript.info/script-async-defer\n - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script\n \n\u003c/details\u003e\n\n---\n\n### 2. Which statements are true?\n\n- A. The render tree contains all elements from the DOM and CSSOM combined \n- B. Compositing is the process of separating layers based on z-index, which are then combined to form the final image displayed on the screen\n- C. The layout process assigns colors and images to the visual elements in the render tree\n- D. The composting process happens on the compositor thread \n- E. Elements that aren't visible on the page, for example `display: hidden`, aren't part of the DOM tree\n\n\u003cdetails\u003e\n\u003csummary\u003e💡 \u003cb\u003eResources\u003c/b\u003e\u003c/summary\u003e\n \u003cbr /\u003e\n \n Answer:\n - [**Watch Answer \u0026 Explanation**](https://frontendmasters.com/courses/web-dev-quiz/q2-rendering-pipeline-compositing/)\n \nFurther reading: \n - https://www.chromium.org/developers/design-documents/graphics-and-skia/\n - https://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome/\n - https://chromium.googlesource.com/chromium/src/+/master/docs/how_cc_works.md\n - https://docs.google.com/presentation/d/1boPxbgNrTU0ddsc144rcXayGA_WF53k96imRH8Mp34Y\n - https://developer.chrome.com/blog/inside-browser-part4/\n - https://www.chromium.org/blink/\n \n\u003c/details\u003e\n\n---\n\n### 3. Fill in the gaps\n\n```\n- Browser sends request to [A]\n- [A] queries [B]\n- [B] responds with [C] IP address\n- [A] queries [C]\n- [C] responds with [D] IP address\n- [A] queries [D]\n- [D] responds with website's [E]\n```\n\n1. Recursive DNS Resolver\n2. Root Name Server\n3. IP Address\n4. Top Level Domain Name Server\n5. Autoritative Name Server\n\n\u003cdetails\u003e\n\u003csummary\u003e💡 \u003cb\u003eResources\u003c/b\u003e\u003c/summary\u003e\n \u003cbr /\u003e\n \n Answer:\n - [**Watch Answer \u0026 Explanation**](https://frontendmasters.com/courses/web-dev-quiz/q3-resolving-domain-requests/)\n \nFurther reading: \n - https://datatracker.ietf.org/doc/html/rfc1035\n - https://www.liquidweb.com/kb/how-to-demystify-the-dns-process/\n - https://www.cloudflare.com/learning/dns/what-is-dns/\n - https://www.cloudflare.com/learning/dns/what-is-recursive-dns/\n \n\u003c/details\u003e\n\n---\n\n### 4. What gets logged?\n\n```js\nsetTimeout(() =\u003e console.log(1));\nPromise.resolve().then(() =\u003e console.log(2));\nPromise.resolve().then(() =\u003e setTimeout(() =\u003e console.log(3));\nnew Promise(() =\u003e console.log(4));\nsetTimeout(() =\u003e console.log(5));\n```\n\n- A. `1` `2` `3` `4` `5`\n- B. `1` `5` `2` `4` `3`\n- C. `3` `2` `4` `1` `5`\n- D. `4` `2` `1` `5` `3`\n- E. `2` `4` `3` `1` `5`\n\n\u003cdetails\u003e\n\u003csummary\u003e💡 \u003cb\u003eResources\u003c/b\u003e\u003c/summary\u003e\n \u003cbr /\u003e\n \n Answer:\n - [**Watch Answer \u0026 Explanation**](https://frontendmasters.com/courses/web-dev-quiz/q4-call-stack-event-loop/)\n \nFurther reading: \n - https://tc39.es/ecma262/#sec-promise-objects\n - https://dev.to/lydiahallie/javascript-visualized-promises-async-await-5gke\n - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise\n - https://web.dev/promises/\n - https://javascript.info/promise-basics\n - https://javascript.info/microtask-queue\n \n\u003c/details\u003e\n\n---\n\n### 5. Match the resource hints with their definitions \n\n- A. `dns-prefetch`\n- B. `preconnect`\n- C. `prefetch`\n- D. `preload`\n\n1. prioritizes fetching of critical resources needed for the current navigation\n2. performs domain name resolution in the background\n3. proactively performs DNS resolution and TCP/TLS handshake\n4. requests non-critical resources in the background\n\n\u003cdetails\u003e\n\u003csummary\u003e💡 \u003cb\u003eResources\u003c/b\u003e\u003c/summary\u003e\n \u003cbr /\u003e\n \n Answer:\n - [**Watch Answer \u0026 Explanation**](https://frontendmasters.com/courses/web-dev-quiz/q5-resource-hints/)\n \nFurther reading: \n - https://html.spec.whatwg.org/#linkTypes\n - https://www.chromium.org/developers/design-documents/dns-prefetching/\n - https://www.smashingmagazine.com/2019/04/optimization-performance-resource-hints/\n - https://web.dev/preconnect-and-dns-prefetch/\n - https://csswizardry.com/2019/01/bandwidth-or-latency-when-to-optimise-which/\n - https://www.splunk.com/en_us/blog/learn/preconnect-resource-hints.html\n \n\u003c/details\u003e\n\n\n---\n\n### 6. What's the output?\n\n```js\nconst member = { \n  name: \"Jane\", \n  address: { street: \"101 Main St\" }\n};\nconst member2 = { ...member };\nmember.address.street = \"102 Main St\";\nmember.name = \"Sarah\";\n\nconsole.log(member2);\n```\n\n- A. `{ name: \"Jane\", address: { street: \"101 Main St\" }}`\n- B. `{ name: \"Jane\", address: { street: \"102 Main St\" }}`\n- C. `{ name: \"Sarah\", address: { street: \"101 Main St\" }}`\n- D. `{ name: \"Sarah\", address: { street: \"102 Main St\" }}`\n\n\u003cdetails\u003e\n\u003csummary\u003e💡 \u003cb\u003eResources\u003c/b\u003e\u003c/summary\u003e\n \u003cbr /\u003e\n \n Answer:\n - [**Watch Answer \u0026 Explanation**](https://frontendmasters.com/courses/web-dev-quiz/q6-object-reference-destructuring/)\n \nFurther reading: \n - https://developer.mozilla.org/en-US/docs/Glossary/Shallow_copy\n - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax\n\u003c/details\u003e\n\n---\n\n### 7. Put the `PerformanceNavigationTimings` in the right order\n\n- A. `loadEventStart`\n- B. `domComplete`\n- C. `domContentLoadedEventStart`\n- D. `fetchStart`\n- E. `connectEnd`\n- F. `domInteractive`\n\n\u003cdetails\u003e\n\u003csummary\u003e💡 \u003cb\u003eResources\u003c/b\u003e\u003c/summary\u003e\n \u003cbr /\u003e\n \n Answer:\n - [**Watch Answer \u0026 Explanation**](https://frontendmasters.com/courses/web-dev-quiz/q7-performancenavigationtiming/)\n \nFurther reading: \n - https://www.w3.org/TR/navigation-timing-2/\n - https://developer.mozilla.org/en-US/docs/Web/Performance/Navigation_and_resource_timings\n- https://web.dev/navigation-and-resource-timing/\n \n\u003c/details\u003e\n\n\n---\n\n### 8. Match the caching directives to their definitions\n\n- A. `no-cache`\n- B. `must-revalidate`\n- C. `no-store`\n- D. `private`\n- E. `stale-while-revalidate`\n\n1. validates a stale response with the origin server before using it\n2. serves stale content while validating the cached response with the origin server\n3. doesn't cache any part of the request or response\n4. validates a cached response with the origin server before using it, even if it is still fresh\n5. prevents caching on shared caches\n\n\u003cdetails\u003e\n\u003csummary\u003e💡 \u003cb\u003eResources\u003c/b\u003e\u003c/summary\u003e\n \u003cbr /\u003e\n \n Answer:\n - [**Watch Answer \u0026 Explanation**](https://frontendmasters.com/courses/web-dev-quiz/q8-cache-directives/)\n \nFurther reading: \n - https://www.rfc-editor.org/rfc/rfc9111\n - https://www.keycdn.com/blog/http-cache-headers\n - https://www.cloudflare.com/learning/cdn/glossary/what-is-cache-control/\n \n\u003c/details\u003e\n\n---\n\n### 9. What statements are true about this code block?  \n\n```js\nfunction addMember(name) {\n  return { name, createdAt: Date.now() }\n}\n\nlet obj1 = addMember(\"John\");\nlet obj2 = addMember(\"Sarah\");\n\nobj1.friend = obj2;\nobj2.friend = obj1;\n\nobj1 = null;\nobj2 = null;\n```\n\n- A. `obj1` and `obj2` cannot be garbage collected, leading to a memory leak\n- B. `obj1` and `obj2` will be garbage collected immediately after setting them to `null`\n- C. `obj1` and `obj2` will only be garbage collected after closing the browser tab\n- D. `obj1` and `obj2` can be garbage collected during the next garbage collection cycle\n\n\u003cdetails\u003e\n\u003csummary\u003e💡 \u003cb\u003eResources\u003c/b\u003e\u003c/summary\u003e\n \u003cbr /\u003e\n \n Answer:\n - [**Watch Answer \u0026 Explanation**](https://frontendmasters.com/courses/web-dev-quiz/q9-garbage-collection/)\n \nFurther reading: \n - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_management\n - https://javascript.info/garbage-collection\n - https://github.com/thlorenz/v8-perf/blob/master/gc.md\n - https://medium.com/@mmoshikoo/garbage-collector-in-v8-engine-1c582399837\n \n \n\u003c/details\u003e\n\n---\n\n### 10. When animating the following properties, which have the correctly listed rendering costs?\n\n- A. `width`: Layout, Paint, Composite\n- B. `opacity`: Paint, Composite\n- C. `background-image`: Composite\n- D. `left`: Layout, Paint, Composite\n- E. `transform`: Paint, Composite\n\n\u003cdetails\u003e\n\u003csummary\u003e💡 \u003cb\u003eResources\u003c/b\u003e\u003c/summary\u003e\n \u003cbr /\u003e\n \n Answer:\n - [**Watch Answer \u0026 Explanation**](https://frontendmasters.com/courses/web-dev-quiz/q10-animation-cost/)\n \nFurther reading: \n - https://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome/\n - https://developer.chrome.com/blog/inside-browser-part3/\n - https://www.smashingmagazine.com/2016/12/gpu-animation-doing-it-right/\n - https://web.dev/avoid-large-complex-layouts-and-layout-thrashing/\n - https://developer.chrome.com/blog/hardware-accelerated-animations/\n \n \n\u003c/details\u003e\n\n--- \n\n### 11. What gets logged when clicking button?\n\n```js\n\u003cdiv class=\"outer\"\u003e\n  \u003cdiv class=\"inner\"\u003e\n    \u003cbutton\u003eClick me!\u003c/button\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n```js\nouter.addEventListener(\"click\", () =\u003e log(\"A\"), true);\nouter.addEventListener(\"click\", () =\u003e log(\"B\"));\ninner.addEventListener(\"click\", () =\u003e log(\"C\"), true);\ninner.addEventListener(\"click\", (e) =\u003e {\n   log(\"D\");\n   e.stopPropagation();\n   log(\"E\");\n});\nbutton.addEventListener(\"click\", () =\u003e log(\"F\"));\nbutton.addEventListener(\"click\", () =\u003e log(\"G\"), true);\n```\n\n- A. `A` `B` `C` `D` `E` `F` `G`\n- B. `A` `C` `G` `F` `D`\n- C. `B` `D` `E` `F` `G` `C` `A`\n- D. `A` `C` `G` `F`\n- E. `A` `C` `G` `F` `D` `E`\n\n\u003cdetails\u003e\n\u003csummary\u003e💡 \u003cb\u003eResources\u003c/b\u003e\u003c/summary\u003e\n \u003cbr /\u003e\n \n Answer:\n - [**Watch Answer \u0026 Explanation**](https://frontendmasters.com/courses/web-dev-quiz/q11-event-propagation/)\n \nFurther reading: \n - https://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-flow\n - https://javascript.info/bubbling-and-capturing\n - https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener\n \n\u003c/details\u003e\n\n--- \n\n### 12. Order the CSS selectors by ascending specificity\n\n- A. `div h1.large-text::before`\n- B. `div h1:first-child`\n- C. `h1:not(.small-text)`\n- D. `.large-text:nth-child(1)`\n- E. `h1.large-text[id=\"title\"]`\n- F. `h1.large-text#title`\n\n\u003cdetails\u003e\n\u003csummary\u003e💡 \u003cb\u003eResources\u003c/b\u003e\u003c/summary\u003e\n \u003cbr /\u003e\n \n Answer:\n - [**Watch Answer \u0026 Explanation**](https://frontendmasters.com/courses/web-dev-quiz/q12-css-specificity/)\n \nFurther reading: \n - https://www.w3.org/TR/2018/REC-selectors-3-20181106/#specificity\n - https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity\n - https://specificity.keegan.st/\n \n\u003c/details\u003e\n\n---\n\n### 13. What statements are true?\n\n```js\nconst userTokenMap = new WeakMap();\n\nlet user = { \n  name: \"Jane Doe\", \n  age: 24 \n};\n\nuserTokenMap.set(user, \"secret_token\");\n```\n\n- A. `userTokenMap` implements the iterator protocol\n- B. When setting `user` to `null`, `userTokenMap` returns `0`\n- C. If the user object is set to `null`, its `userTokenMap`  entry can be be garbage collected.\n- D. `[...userTokenMap]` returns an array of `userTokenMap` entries\n\n\u003cdetails\u003e\n\u003csummary\u003e💡 \u003cb\u003eResources\u003c/b\u003e\u003c/summary\u003e\n \u003cbr /\u003e\n \n Answer:\n - [**Watch Answer \u0026 Explanation**](https://frontendmasters.com/courses/web-dev-quiz/q13-weakmap/)\n \nFurther reading: \n - https://read262.netlify.app/keyed-collections/weakmap-objects/\n - https://javascript.info/weakmap-weakset\n - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap\n \n\u003c/details\u003e\n\n---\n\n### 14. Match the Web Vitals to the correct descriptions\n\n- A. TTFB\n- B. FID\n- C. TTI\n- D. TBT\n- E. CLS\n- F. INP\n\n1. the time it takes for a webpage to respond to a user's first interaction.\n2. the time that the main thread is blocked from responding to user input.\n3. the average time it takes for a webpage to update its visuals after a user interacts with it. \n4. the time it takes for the server to respond to a request and start sending data back to the client\n5. the time it takes for a webpage to be fully loaded and responsive to user input.\n6. the stability of a webpage's layout, or the unexpected layout shifts that occur on a webpage as it loads.\n\n\u003cdetails\u003e\n\u003csummary\u003e💡 \u003cb\u003eResources\u003c/b\u003e\u003c/summary\u003e\n \u003cbr /\u003e\n \n Answer:\n - [**Watch Answer \u0026 Explanation**](https://frontendmasters.com/courses/web-dev-quiz/q14-web-vitals//)\n \nFurther reading: \n - https://web.dev/metrics/\n \n\u003c/details\u003e\n\n---\n\n### 15. Which resources will be allowed with the following CSP header?\n\n```js\ndefault-src \"none\"; script-src \"self\"; img-src \"self\" example.com; style-src fonts.googleapis.com; font-src fonts.gstatic.com;\n```\n\n- A. `\u003cscript src=\"/js/app.js\"\u003e\u003c/script\u003e`\n- B. `fetch(\"https://api.website.com/data\")`\n- C. `@font-face { url(\"fonts/my-font.woff\") }`\n- D. `\u003cimg src=\"data:image/svg+xml;...\" /\u003e`\n- E. `\u003cstyle\u003ebody { font-family: 'Roboto' }\u003c/style\u003e`\n- F. `\u003ciframe src=\"https://embed.example.com\"\u003e\u003c/iframe\u003e`\n- G. `\u003clink rel=\"stylesheet\" href=\"https://fonts.googleapis.com..\u003e`\n- H. `\u003cvideo src=\"https://videos.example.com/...\"\u003e\u003c/video\u003e`\n\n\u003cdetails\u003e\n\u003csummary\u003e💡 \u003cb\u003eResources\u003c/b\u003e\u003c/summary\u003e\n \u003cbr /\u003e\n \n Answer:\n - [**Watch Answer \u0026 Explanation**](https://frontendmasters.com/courses/web-dev-quiz/q15-content-security-policy-csp-header)\n \nFurther reading: \n - https://content-security-policy.com/\n - https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP\n - https://web.dev/csp/\n \n\u003c/details\u003e\n\n---\n\n### 16. Which statements are true?\n\n- A. `rel=\"noopener\"` is used to prevent the original page from accessing the `window` object of the newly opened page\n- B. `rel=\"noreferrer\"` can be used to prevent the newly opened page from accessing the `window` object of the original page\n- C. `rel=\"noopener\"` and `rel=\"noreferrer\"` can only be used with HTTPS\n- D. `rel=\"noopener\"` can be used to prevent tabnabbing\n- E. The default `Referrer-Policy` is `no-referrer-when-downgrade`\n\n\u003cdetails\u003e\n\u003csummary\u003e💡 \u003cb\u003eResources\u003c/b\u003e\u003c/summary\u003e\n \u003cbr /\u003e\n \n Answer:\n - [**Watch Answer \u0026 Explanation**](https://frontendmasters.com/courses/web-dev-quiz/q16-refer-policies)\n \nFurther reading: \n - https://www.w3.org/TR/referrer-policy/\n - https://html.spec.whatwg.org/multipage/links.html#link-type-noopener\n - https://html.spec.whatwg.org/multipage/links.html#link-type-noreferrer\n - https://web.dev/referrer-best-practices/\n \n\u003c/details\u003e\n\n---\n\n### 17. When does `\"In log: My input!\"` get logged?\n\n```js\nfunction* generatorFunc() {\n  const result = yield \"My input!\";\n  console.log(\"In log:\", result);\n  return \"All done!\"\n};\n\nconst it = generatorFunc();\n```\n\n- A. `it.next()`\n- B. `it.next(\"My input!\")` `it.next()`\n- C. `it.next()` `it.next(\"My input!\")`\n- D. `it.next()` `it.next()`\n\n\u003cdetails\u003e\n\u003csummary\u003e💡 \u003cb\u003eResources\u003c/b\u003e\u003c/summary\u003e\n \u003cbr /\u003e\n \n Answer:\n - [**Watch Answer \u0026 Explanation**](https://frontendmasters.com/courses/web-dev-quiz/q17-generators/)\n \nFurther reading: \n - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators\n - https://javascript.info/generators\n - https://exploringjs.com/es6/ch_iteration.html\n - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Generator\n - https://blog.logrocket.com/javascript-iterators-and-generators-a-complete-guide/\n \n\u003c/details\u003e\n\n---\n\n### 18. Connect the Promise methods to the right output\n\n```js\nconst promises = [\n   new Promise(res =\u003e setTimeout(() =\u003e res(1), 200),\n   new Promise(res =\u003e setTimeout(() =\u003e res(2), 100),\n   new Promise((_, rej) =\u003e setTimeout(() =\u003e rej(3), 100),\n   new Promise(res =\u003e setTimeout(() =\u003e res(4), 300)\n];\n\nPromise[❓]\n   .then(res =\u003e console.log(\"Result: \", res))\n   .catch(err =\u003e console.log(\"Error: \", err)\n```\n\n- A. `all`\n- B. `any`\n- C. `race`\n- D. `allSettled`\n\n1. `Result: 2`\n2. `Error: 3`\n3. `Result: [{}, {}, {}, {}]`\n4. `Result: 2`\n\n\u003cdetails\u003e\n\u003csummary\u003e💡 \u003cb\u003eResources\u003c/b\u003e\u003c/summary\u003e\n \u003cbr /\u003e\n \n Answer:\n - [**Watch Answer \u0026 Explanation**](https://frontendmasters.com/courses/web-dev-quiz/q18-promise-methods/)\n \nFurther reading: \n - https://javascript.info/promise-basics\n - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise\n \n\u003c/details\u003e\n\n---\n\n### 19. Which of the following values will always make your page ineligible for bfcache?\n\n- A. `unload`\n- B. `pagehide`\n- C. `onbeforeunload`\n- D. `pageshow`\n- E. All of the above\n- F. None of the above\n\n\u003cdetails\u003e\n\u003csummary\u003e💡 \u003cb\u003eResources\u003c/b\u003e\u003c/summary\u003e\n \u003cbr /\u003e\n \n Answer:\n - [**Watch Answer \u0026 Explanation**](https://frontendmasters.com/courses/web-dev-quiz/q19-back-forward-cache/)\n \nFurther reading: \n - https://web.dev/bfcache/\n - https://www.smashingmagazine.com/2022/05/performance-game-changer-back-forward-cache/\n - https://nitropack.io/blog/post/back-forward-cache\n \n\u003c/details\u003e\n\n---\n\n### 20. Connect the terms with their definitions\n\n- A. XSS\n- B. CSRF\n- C. UI Redressing\n- D. MITM\n\n1. allows attackers to inject malicious scripts into web pages viewed by others\n2. tricks users into interacting with disguised or hidden elements\n3. tricks users into executing unwanted actions by exploiting their authenticated session\n4. allows attackers to intercept and modify communication between two parties without their knowledge\n\n\u003cdetails\u003e\n\u003csummary\u003e💡 \u003cb\u003eResources\u003c/b\u003e\u003c/summary\u003e\n \u003cbr /\u003e\n \n Answer:\n - [**Watch Answer \u0026 Explanation**](https://frontendmasters.com/courses/web-dev-quiz/q20-front-end-security/)\n \nFurther reading: \n - https://owasp.org/www-community/attacks/xss/\n - https://owasp.org/www-community/attacks/csrf\n - https://owasp.org/www-community/attacks/Clickjacking\n - https://www.imperva.com/learn/application-security/man-in-the-middle-attack-mitm/\n - https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html\n- https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html\n \n\u003c/details\u003e\n\n\n---\n\n### 21. Connect the font strategies to their definition\n\n- A. `font-display: block`\n- B. `font-display: swap`\n- C. `font-display: fallback`\n- D. `font-display: optional`\n- E. `font-display: auto`\n\n1. temporarily render an invisible font until the custom font has been downloaded\n2. use a fallback font while the custom font is downloading, switch to the custom font when available\n3. only use the custom font if it is available, otherwise use a fallback font \n4. allows the browser to determine the most appropriate behavior for font loading\n5. use the custom font if it is available, use a fallback font if the custom font is not available\n\n\n\u003cdetails\u003e\n\u003csummary\u003e💡 \u003cb\u003eResources\u003c/b\u003e\u003c/summary\u003e\n \u003cbr /\u003e\n \n Answer:\n - [**Watch Answer \u0026 Explanation**](https://frontendmasters.com/courses/web-dev-quiz/q21-font-strategies/)\n \nFurther reading: \n - https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display\n- https://css-tricks.com/almanac/properties/f/font-display/\n \n \n\u003c/details\u003e\n\n---\n\n### 22. What statements are true about the following cookie header?\n\n```js\nSet-Cookie: my-cookie=\"value\"; Domain=\"website.com\"; Secure; HttpOnly;\n```\n\n- A. This cookie is accessible from `www.website.com`, but not from `blog.website.com`\n- B. This cookie can only be set client-side on the `website.com` domain\n- C. This cookie gets treated like a session cookie\n- D. This cookie will be sent when navigating from another website to `www.website.com`\n\n\u003cdetails\u003e\n\u003csummary\u003e💡 \u003cb\u003eResources\u003c/b\u003e\u003c/summary\u003e\n \u003cbr /\u003e\n \n Answer:\n - [**Watch Answer \u0026 Explanation**](https://frontendmasters.com/courses/web-dev-quiz/q22-cookie-policy-header/)\n \nFurther reading: \n - https://httpwg.org/http-extensions/draft-ietf-httpbis-rfc6265bis.html#name-overview\n - https://resources.infosecinstitute.com/topic/securing-cookies-httponly-secure-flags/\n - https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies\n - https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie\n\n \n\u003c/details\u003e\n\n---\n\n### 23. Which of the CSS (pseudo)selectors can we use to only target the first list item `\u003cli\u003eOne\u003c/li\u003e`?\n\n```html\n\u003cdiv\u003e\n  \u003cul\u003e\n    \u003cli\u003eOne\u003c/li\u003e\n    \u003cul\u003e\n      \u003cli\u003eTwo\u003c/li\u003e\n      \u003cli\u003eThree\u003c/li\u003e\n    \u003c/ul\u003e\n  \u003c/ul\u003e\n  \u003cul\u003e\n    \u003cli\u003eFour\u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/div\u003e\n```\n\n- A. `ul:first-child \u003e li`\n- B. `ul:first-child + li`\n- C. `ul:first-child \u003e li:first-child`\n- D. `ul:first-of-type \u003e li:first-of-type`\n- E. `ul:first-child + li:first-child`\n\n\u003cdetails\u003e\n\u003csummary\u003e💡 \u003cb\u003eResources\u003c/b\u003e\u003c/summary\u003e\n \u003cbr /\u003e\n \n Answer:\n - [**Watch Answer \u0026 Explanation**](https://frontendmasters.com/courses/web-dev-quiz/q23-css-pseudo-selector)\n \nFurther reading: \n - https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors\n - https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes\n - https://www.w3.org/TR/selectors-4/#pseudo-classes\n\n \n\u003c/details\u003e\n\n---\n\n### 24. What is true about the following header? \n\n```js\nStrict-Transport-Security: max-age=31536000; includeSubdomains;\n```\n\n- A. The header enforces HTTPS for one year on the domain and its subdomains\n- B. When `max-age` expires, browsers will default to HTTP\n- C. The `max-age` is refreshed every time the browser reads the header\n- D. Insecure requests to subdomains are allowed\n\n\u003cdetails\u003e\n\u003csummary\u003e💡 \u003cb\u003eResources\u003c/b\u003e\u003c/summary\u003e\n \u003cbr /\u003e\n \n Answer:\n - [**Watch Answer \u0026 Explanation**](https://frontendmasters.com/courses/web-dev-quiz/q24-transport-security)\n \nFurther reading: \n - https://cheatsheetseries.owasp.org/cheatsheets/HTTP_Strict_Transport_Security_Cheat_Sheet.html\n - https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Strict-Transport-Security\n\n\u003c/details\u003e\n\n---\n\n### 25. Which of the following properties causes the element to be promoted to its own RenderLayer?\n\n- A. `z-index: 1`\n- B. `translate3d: (0, 0, 0)`\n- C. `will-change: transform`\n- D. `transform: rotate(45deg)`\n- E. `position: fixed`\n- F. `position: absolute`\n\n\u003cdetails\u003e\n\u003csummary\u003e💡 \u003cb\u003eResources\u003c/b\u003e\u003c/summary\u003e\n \u003cbr /\u003e\n \n Answer:\n - [**Watch Answer \u0026 Explanation**](https://frontendmasters.com/courses/web-dev-quiz/q25-render-layers)\n \nFurther reading: \n - https://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome/\n - https://surma.dev/things/forcing-layers/\n - https://web.dev/speed-layers/\n - https://www.chromium.org/developers/design-documents/graphics-and-skia/\n\n\u003c/details\u003e\n\n---\n\n### 26. Match the image formats to the  descriptions\n\n- A. JPEG\n- B. PNG\n- C. WebP\n- D. AVIF\n\n1. Both lossy and lossless compression, supports HDR and WCG, supports transparency\n2. Both lossy and lossless compression, supports transparency, supports progressive rendering \n3. Lossless compression, high quality, supports transparency, larger file size\n4. Lossy compression, supports progressive rendering\n\n\u003cdetails\u003e\n\u003csummary\u003e💡 \u003cb\u003eResources\u003c/b\u003e\u003c/summary\u003e\n \u003cbr /\u003e\n \n Answer:\n - [**Watch Answer \u0026 Explanation**](https://frontendmasters.com/courses/web-dev-quiz/q26-image-formats/)\n \nFurther reading: \n - https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types\n- https://www.smashingmagazine.com/2021/09/modern-image-formats-avif-webp/\n\n\u003c/details\u003e\n\n---\n\n### 27. What is true about the following CORS config?\n\n```js\nAccess-Control-Allow-Origin: https://www.website.com\nAccess-Control-Allow-Headers: Content-Type\nAccess-Control-Allow-Methods: *\nAccess-Control-Expose-Headers: X-Custom-Header\nAccess-Control-Max-Age: 600\n```\n\n- A. A preflight request is required \n- B. Only requests from `https://www.website.com` are allowed \n- C. Requests with cookies are allowed \n- D. The actual response is cached for 600ms\n- E. `X-Custom-Header` will be the only included response header \n- F. `GET`, `POST`, `PATCH` and `PUT` methods are allowed, but not `DELETE`\n\n\u003cdetails\u003e\n\u003csummary\u003e💡 \u003cb\u003eResources\u003c/b\u003e\u003c/summary\u003e\n \u003cbr /\u003e\n \n Answer:\n - [**Watch Answer \u0026 Explanation**](https://frontendmasters.com/courses/web-dev-quiz/q27-cors-headers/)\n \nFurther reading: \n - https://www.w3.org/TR/2020/SPSD-cors-20200602/\n - https://fetch.spec.whatwg.org/#http-cors-protocol\n - https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS\n\n\u003c/details\u003e\n\n---\n\n### 28. What gets logged?\n\n```js\nsetTimeout(() =\u003e console.log(1));\n\n(async () =\u003e {\n  console.log(2);\n  await Promise.resolve();\n  console.log(3);\n})()\n\nPromise.resolve().then(() =\u003e Promise.resolve().then(() =\u003e console.log(4)))\n```\n\n- A. `1` `2` `3` `4` \n- B. `2` `4` `3` `1` \n- C. `2` `3` `4` `1` \n- D. `2` `3` `1` `4` \n\n\u003cdetails\u003e\n\u003csummary\u003e💡 \u003cb\u003eResources\u003c/b\u003e\u003c/summary\u003e\n \u003cbr /\u003e\n \n Answer:\n - [**Watch Answer \u0026 Explanation**](https://frontendmasters.com/courses/web-dev-quiz/q28-event-loop/)\n \nFurther reading: \n - https://tc39.es/ecma262/#sec-promise-objects\n - https://dev.to/lydiahallie/javascript-visualized-promises-async-await-5gke\n - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise\n - https://web.dev/promises/\n - https://javascript.info/promise-basics\n - https://javascript.info/microtask-queue\n\n\u003c/details\u003e\n\n---\n\n### 29. What statements are correct?\n\n- A. HTTP/2 allows multiple requests and responses concurrently over a single TCP connection\n- B. HTTP/3 can only be used with HTTPS\n- C. HTTP/2 is backward compatible with HTTP/1.1\n- D. HTTP/1.1 requires multiple TCP connections to process multiple requests simultaneously\n\n\u003cdetails\u003e\n\u003csummary\u003e💡 \u003cb\u003eResources\u003c/b\u003e\u003c/summary\u003e\n \u003cbr /\u003e\n \n Answer:\n - [**Watch Answer \u0026 Explanation**](https://frontendmasters.com/courses/web-dev-quiz/q28-event-loop/)\n \nFurther reading: \n - https://www.section.io/engineering-education/http3-vs-http2/\n - https://www.cloudflare.com/learning/performance/http2-vs-http1.1/\n - https://www.cloudflare.com/learning/performance/what-is-http3/\n\n\u003c/details\u003e\n\n---\n\n### 30. What gets logged?\n\n```js\nconst objA = { \n  type: \"A\",\n  foo() { \n    console.log(this.type) \n  }\n}\n\nconst objB = { \n  type: \"B\",\n  foo: objA.foo,\n  bar: () =\u003e objA.foo(),\n  baz() { objA.foo() }\n}\n\nobjB.foo();\nobjB.bar();\nobjB.baz(); \n```\n\n- A. `A` `B` `B`\n- B. `B` `A` `A`\n- C. `A` `A` `A`\n- D. `A` `undefined` `A`\n- E. `B` `undefined` `B`\n\n\n\u003cdetails\u003e\n\u003csummary\u003e💡 \u003cb\u003eResources\u003c/b\u003e\u003c/summary\u003e\n \u003cbr /\u003e\n \n Answer:\n - [**Watch Answer \u0026 Explanation**](https://frontendmasters.com/courses/web-dev-quiz/q28-event-loop/)\n \nFurther reading: \n - https://tc39.es/ecma262/#sec-function-environment-records-getthisbinding\n - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this\n - https://javascript.info/object-methods\n\n\u003c/details\u003e\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flydiahallie%2Fadvanced-web-dev-quiz","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flydiahallie%2Fadvanced-web-dev-quiz","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flydiahallie%2Fadvanced-web-dev-quiz/lists"}