Web

[DanKim0213]

Web

Whatever relates to Web!

• Web Dev Simplified

[DanKim0213]

Responsive Design

• Top 10 Advanced CSS Responsive Design Concepts You Should Know
• 5 simple tips to making responsive layouts the easy way
• Learn CSS Media Query In 7 Minutes

[DanKim0213]

SSE(server-sent event) vs web socket

what is the difference between Server-sent Event and Web socket api?

"WebSocket is a technology that enables two-way realtime communication between client and server. In contrast, Socket.IO is a library that provides an abstraction layer on top of WebSockets, making it easier to create realtime applications." by link

Furthermore

• Understanding socket and port in TCP
• Do html websockets maintain an open connection for each client
• difference between a port and a socket
• 600k concurrent websocket connections on AWS using Node.js

[DanKim0213]

What happens when you type a URL into your browser?

Furthermore

• What happens when you type a URL into your browser?
• 웹 브라우저에 URL을 입력하면 어떤 일이 생기나요?
• HTML specs

[DanKim0213]

CORS

• 크로스 도메인 요청 CORS
• WEB-📚-CORS-💯-정리-해결-방법-👏
• cors 란?
• Override CORS using Chrome Development tool

[DanKim0213]

Learn Image

https://web.dev/learn/images https://css-tricks.com/a-guide-to-the-responsive-images-syntax-in-html/ https://www.freecodecamp.org/news/time-saving-css-techniques-to-create-responsive-images-ebb1e84f90d5/

[DanKim0213]

How we improve performance

The more stuff you can do asynchronously, the better advantage your app can take of multicore processors.

• Well-structured document
• Use the defer or async attribute on script tags needed by the Web application.
• Use CSS transforms
• Don't include scripts or stylesheets that don't participate in the critical rendering path in your startup HTML file. Load them only when needed.
• Utilize resource hints (like preconnect or preload) whenever possible to indicate to the browser which files are more critical for your application.
• Always compress your data to make it as small as you can. - this is done by vite build
• If you need to decode asset files (for example, decoding JPEG files and turning them into raw texture data for later use by WebGL), that's great to do in workers.
• One potential use case for decode(): when loading very large images (for example, in an online photo album), you can present a low resolution thumbnail image initially and then replace that image with the full-resolution image by instantiating a new HTMLImageElement,

https://developer.mozilla.org/en-US/docs/Web/Performance/How_long_is_too_long https://developer.mozilla.org/en-US/docs/Learn/Performance/Measuring_performance https://developer.mozilla.org/en-US/docs/Web/Performance/Fundamentals https://developer.mozilla.org/en-US/docs/Web/Performance/Optimizing_startup_performance https://web.dev/learn/performance https://developer.mozilla.org/en-US/docs/Learn/Performance/Perceived_performance https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/decode

How long is too long (goal)

async vs defer attribute on <script></script https://javascript.info/script-async-defer

the browser must wait for the script to download, execute the downloaded script, and only then can it process the rest of the page. That leads to two important issues:

1. Scripts can’t see DOM elements below them, so they can’t add handlers etc.
2. If there’s a bulky script at the top of the page, it “blocks the page”. Users can’t see the page content till it downloads and runs:

In practice, defer is used for scripts that need the whole DOM and/or their relative execution order is important. And async is used for independent scripts, like counters or ads. And their relative execution order does not matter.

[DanKim0213]

Intersection Observer

[DanKim0213]

Internationalization-framework

• i18next
• react-i18next

[DanKim0213]

Event Delegation

https://github.com/javascript-tutorial/en.javascript.info/blob/master/2-ui/2-events/03-event-delegation/article.md

Capturing and bubbling allow us to implement one of the most powerful event handling patterns called event delegation.