WebDev

Question 1

What is hydration?

Answer 1

Kun SSR palauttaa ensimmäisen renderin, liitetään palautettuun DOM:iin event listenerit. Jos palautetussa DOM:issa ei ole tarvittavia nodeja, ne luodaan niinkuin CSR:issä.

Question 2

What is shadow DOM?

Answer 2

Isoloitu osa DOM-puuta. Isoloidun alueen sisältä ei pääse käsiksi muuhun puuhun ja on mahdollista asettaa shadow DOM niin, että muualta ei pääse sinne käsiksi.

Tällöin query selectorit eivät hae asioita toistensa sisältä ja CSS-tyylit eivät sekoitu.

Esimerkiksi “video” HTML-tägi on shadow DOM ja devaajalle näkyy vain kyseisen shadow DOMin juuri.

Question 3

What is QUIC and what is solves?

Answer 3

QUIC is transport layer protocol that HTTP/3 uses and its goal is to reduce latency. It is built on top of UDP, because TCP implementations are so deep in the systems and hard to change. Depite being implemented on top of UDP, it acts similar to TCP+TLS+HTTP/2 stack.

Benefits of QUIC:
- It combines TCP/TLS handshakes into a single handshake, reducing connection times.
- It uses unique identifiers to connections between clients and servers, so when mobile user switch networks, connections can be re-established using those instead of IP. It allows faster reconnections.
- It eliminates Head-of-line-blocking in transport-layer. Instead of handling all TCP packets in a single queue, it uses different packet-queues for each connection.

Question 4

In what order does JS eventloop handle things?

Answer 4

After every macrotask, the microtask-queue is fully emptied.

Question 5

What is specificity in CSS?

Answer 5

Specificity prioritizes competing styles. ID-selector gives 100 points. class, attribute and pseudo-classes give 10. Elements and pseudo-elements give 1.

Question 6

How inheritance can be controlled in CSS?

Answer 6

Certain keywords inherit to all children by default. If children don’t inherit a value, a default initial values are set. Inheritance can be controlled with keywords; inherit keyword, that overrides keywords assigned with selectors and instead inherits the value from its parent; initial keyword set the default value and ignores all inheritance; unset does either initial or inherit depending if the value is inheritable.

Question 7

In CSS, what keywords control box-sizing depending on the text inside?

Answer 7

min-content; Makes the box as small so that the longest word barely fits.

max-content; Makes the box as wide so all the text fits in one row.

fit-content (<size>); Like max-content, but has maximum size as an argument.</size>

Question 8

What different SameSite-attributes do in cookies?

Answer 8

SameSite=Strict: Cookies are never sent with cross-site requests, providing the highest level of protection against CSRF attacks.

SameSite=Lax: Cookies are sent with top-level navigations (e.g., clicking a link) and safe requests (GET, HEAD), balancing security and usability.

SameSite=None: Cookies are sent in all contexts, including cross-site requests. This attribute requires the Secure attribute, meaning the cookie is only sent over HTTPS connections.

Question 9

What are __Secure- and __Host-prefix in cookies?

Answer 9

__Secure- prefix:

Ensures the cookie is only sent over HTTPS connections.
Requires the Secure attribute.
Example: \_\_Secure-id=12345; Secure

__Host- prefix:

Ensures the cookie is only sent from the host that set it (not subdomains).
Requires the Secure attribute.
Requires the Path=/ attribute.
Cannot have a Domain attribute.
Example: \_\_Host-id=12345; Secure; Path=/