Skip to content

Instantly share code, notes, and snippets.

View seonghyeonkimm's full-sized avatar
✌️

KimSeonghyeon seonghyeonkimm

✌️
View GitHub Profile
@ellemedit
ellemedit / post.md
Last active December 18, 2021 11:02

제 경험이 당신의 next.js 프로젝트에 도움이 되거나 영감을 주면 좋겠습니다.

왜 퍼시스턴트 레이아웃이 필요한가요?

가장 근본적인 이유는 퍼시스턴트하지 않으면 모든 DOM 노드가 파괴되고 다시 생성된다는 점 입니다.

  1. 이전 페이지의 DOM Node가 버려지기 때문에 항상 DOM 상태를 잃어버립니다. 예를들어 레이아웃에 흔하게 있을 수 있는 검색창 입력, 네비게이션 메뉴의 포커스 상태가 페이지 이동마다 사라집니다.
  2. 당연하게도 CSS Transition이 불가능합니다. 애니메이션이 필요하다면 전혀 다른 방법으로 구현해야 합니다.

위 이유로 인해 애플리케이션의 사용성과 접근성이 떨어질 수 있습니다.

@nishantmendiratta
nishantmendiratta / Time To Get Back To The Basics - How Browser Reads HTML, CSS, and JavaScript.md
Last active January 7, 2024 17:24
📖 Getting Back To The Basics - How Browser Reads HTML, CSS, and JavaScript?

What happens when a browser loads a website?

  1. It fetches the HTML page (index.html)
  2. Begin parsing the HTML
  3. The parser encounters a <script> tag referencing an external script file.
  4. The browser requests the script file. Meanwhile, the parser blocks and stops parsing the other HTML on your page.
  5. After some time the script is downloaded and subsequently executed.
  6. The parser continues parsing the rest of the HTML document.

(Step 4) It causes a bad user experience. Your website basically stops loading until you've downloaded all scripts. If there's one thing that users hate it's waiting for a website to load.

@MoOx
MoOx / README.md
Last active June 25, 2024 06:17
frontend project Readme example

PROJECT BLAH BLAH

Requirements

For development, you will only need Node.js installed on your environement. And please use the appropriate Editorconfig plugin for your Editor (not mandatory).

Node

Node is really easy to install & now include NPM.