🔥 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.
This repo is related to my FrontendMasters course. You'll find the questions and additional resources to get a better understanding of the concepts.
This 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
Have fun, and hopefully you'll learn something new today! Good luck!
This repo does not contain the answers(!), only the questions and useful resources on the question's topic! To see the answers and watch visualized explanations for each question, **please watch the FrontendMasters course! ** |
---|
async
and defer
execution order
PerformanceNavigationTiming
WeakMap
Strict-Transport-Security
this
keyword
<script defer src="defer1.js" />
(loads in 300ms)<script defer src="defer2.js" />
(loads in 200ms)<script async src="async1.js" />
(loads in 300ms)<script async src="async2.js" />
(loads in 50ms)<script async defer src="asyncdefer1.js" />
(loads in 60ms)Answer:
Further reading:
display: hidden
, aren't part of the DOM treeAnswer:
Further reading:
- Browser sends request to [A]
- [A] queries [B]
- [B] responds with [C] IP address
- [A] queries [C]
- [C] responds with [D] IP address
- [A] queries [D]
- [D] responds with website's [E]
Answer:
Further reading:
setTimeout(() => console.log(1));
Promise.resolve().then(() => console.log(2));
Promise.resolve().then(() => setTimeout(() => console.log(3));
new Promise(() => console.log(4));
setTimeout(() => console.log(5));
1
2
3
4
5
1
5
2
4
3
3
2
4
1
5
4
2
1
5
3
2
4
3
1
5
Answer:
Further reading:
dns-prefetch
preconnect
prefetch
preload
Answer:
Further reading:
const member = {
name: "Jane",
address: { street: "101 Main St" }
};
const member2 = { ...member };
member.address.street = "102 Main St";
member.name = "Sarah";
console.log(member2);
{ name: "Jane", address: { street: "101 Main St" }}
{ name: "Jane", address: { street: "102 Main St" }}
{ name: "Sarah", address: { street: "101 Main St" }}
{ name: "Sarah", address: { street: "102 Main St" }}
Answer:
Further reading:
PerformanceNavigationTimings
in the right orderloadEventStart
domComplete
domContentLoadedEventStart
fetchStart
connectEnd
domInteractive
Answer:
Further reading:
no-cache
must-revalidate
no-store
private
stale-while-revalidate
Answer:
Further reading:
function addMember(name) {
return { name, createdAt: Date.now() }
}
let obj1 = addMember("John");
let obj2 = addMember("Sarah");
obj1.friend = obj2;
obj2.friend = obj1;
obj1 = null;
obj2 = null;
obj1
and obj2
cannot be garbage collected, leading to a memory leakobj1
and obj2
will be garbage collected immediately after setting them to null
obj1
and obj2
will only be garbage collected after closing the browser tabobj1
and obj2
can be garbage collected during the next garbage collection cycleAnswer:
Further reading:
width
: Layout, Paint, Compositeopacity
: Paint, Compositebackground-image
: Compositeleft
: Layout, Paint, Compositetransform
: Paint, CompositeAnswer:
Further reading:
<div class="outer">
<div class="inner">
<button>Click me!</button>
</div>
</div>
outer.addEventListener("click", () => log("A"), true);
outer.addEventListener("click", () => log("B"));
inner.addEventListener("click", () => log("C"), true);
inner.addEventListener("click", (e) => {
log("D");
e.stopPropagation();
log("E");
});
button.addEventListener("click", () => log("F"));
button.addEventListener("click", () => log("G"), true);
A
B
C
D
E
F
G
A
C
G
F
D
B
D
E
F
G
C
A
A
C
G
F
A
C
G
F
D
E
Answer:
Further reading:
div h1.large-text::before
div h1:first-child
h1:not(.small-text)
.large-text:nth-child(1)
h1.large-text[id="title"]
h1.large-text#title
Answer:
Further reading:
const userTokenMap = new WeakMap();
let user = {
name: "Jane Doe",
age: 24
};
userTokenMap.set(user, "secret_token");
userTokenMap
implements the iterator protocoluser
to null
, userTokenMap
returns 0
null
, itsuserTokenMap
entry can be be garbage collected.[...userTokenMap]
returns an array of userTokenMap
entriesAnswer:
Further reading:
Answer:
Further reading:
default-src "none"; script-src "self"; img-src "self" example.com; style-src fonts.googleapis.com; font-src fonts.gstatic.com;
<script src="/js/app.js"></script>
fetch("https://api.website.com/data")
@font-face { url("fonts/my-font.woff") }
<img src="data:image/svg+xml;..." />
<style>body { font-family: 'Roboto' }</style>
<iframe src="https://embed.example.com"></iframe>
<link rel="stylesheet" href="https://fonts.googleapis.com..>
<video src="https://videos.example.com/..."></video>
Answer:
Further reading:
rel="noopener"
is used to prevent the original page from accessing the window
object of the newly opened pagerel="noreferrer"
can be used to prevent the newly opened page from accessing the window
object of the original pagerel="noopener"
and rel="noreferrer"
can only be used with HTTPSrel="noopener"
can be used to prevent tabnabbingReferrer-Policy
is no-referrer-when-downgrade
Answer:
Further reading:
"In log: My input!"
get logged?function* generatorFunc() {
const result = yield "My input!";
console.log("In log:", result);
return "All done!"
};
const it = generatorFunc();
it.next()
it.next("My input!")
it.next()
it.next()
it.next("My input!")
it.next()
it.next()
Answer:
Further reading:
const promises = [
new Promise(res => setTimeout(() => res(1), 200),
new Promise(res => setTimeout(() => res(2), 100),
new Promise((_, rej) => setTimeout(() => rej(3), 100),
new Promise(res => setTimeout(() => res(4), 300)
];
Promise[]
.then(res => console.log("Result: ", res))
.catch(err => console.log("Error: ", err)
all
any
race
allSettled
Result: 2
Error: 3
Result: [{}, {}, {}, {}]
Result: 2
Answer:
Further reading:
unload
pagehide
onbeforeunload
pageshow
Answer:
Further reading:
Answer:
Further reading:
font-display: block
font-display: swap
font-display: fallback
font-display: optional
font-display: auto
Answer:
Further reading:
Set-Cookie: my-cookie="value"; Domain="website.com"; Secure; HttpOnly;
www.website.com
, but not from blog.website.com
website.com
domainwww.website.com
Answer:
Further reading:
<li>One</li>
?<div>
<ul>
<li>One</li>
<ul>
<li>Two</li>
<li>Three</li>
</ul>
</ul>
<ul>
<li>Four</li>
</ul>
</div>
ul:first-child > li
ul:first-child + li
ul:first-child > li:first-child
ul:first-of-type > li:first-of-type
ul:first-child + li:first-child
Answer:
Further reading:
Strict-Transport-Security: max-age=31536000; includeSubdomains;
max-age
expires, browsers will default to HTTPmax-age
is refreshed every time the browser reads the headerAnswer:
Further reading:
z-index: 1
translate3d: (0, 0, 0)
will-change: transform
transform: rotate(45deg)
position: fixed
position: absolute
Answer:
Further reading:
Answer:
Further reading:
Access-Control-Allow-Origin: https://www.website.com
Access-Control-Allow-Headers: Content-Type
Access-Control-Allow-Methods: *
Access-Control-Expose-Headers: X-Custom-Header
Access-Control-Max-Age: 600
https://www.website.com
are allowedX-Custom-Header
will be the only included response headerGET
, POST
, PATCH
and PUT
methods are allowed, but not DELETE
Answer:
Further reading:
setTimeout(() => console.log(1));
(async () => {
console.log(2);
await Promise.resolve();
console.log(3);
})()
Promise.resolve().then(() => Promise.resolve().then(() => console.log(4)))
1
2
3
4
2
4
3
1
2
3
4
1
2
3
1
4
Answer:
Further reading:
Answer:
Further reading:
const objA = {
type: "A",
foo() {
console.log(this.type)
}
}
const objB = {
type: "B",
foo: objA.foo,
bar: () => objA.foo(),
baz() { objA.foo() }
}
objB.foo();
objB.bar();
objB.baz();
A
B
B
B
A
A
A
A
A
A
undefined
A
B
undefined
B
Answer:
Further reading: