Facebook's approach to CSS-in-JS | Frank Yan - YouTube CSS-in-JS 관련 적용한 내용, CSS 최적화
Building The New Facebook With React and Relay | Ashley Watkins React Conf Relay를 통해 first meaningfull paint와 렌더링 최적화하는 내용. data-driven dependencies, phased code downloading Streamed query
```
fragment HomepageData on User {
  name
  profile_picture {...}
  newsFeed(first: 10) {
    edges @stream
  }

  ...AdditionalData @defer
}
```
Data driven code splitting
React Developer tooling | Brian Vaughn - YouTube
- Fast refresh
24:42 NOW PLAYING Is React Translated Yet? | Nat Alison React Conf
- Localization Management Platform for agile teams | Crowdin
- Docusaurus · Easy to Maintain Open Source Documentation Websites
Data Fetching With Suspense In Relay | Joe Savona - YouTube
- Render as you fetch
  - Start loading resources before rendering
  - Suspend if resources aren't ready when you render
- 단계별 로딩을 사용하고자 한다면 <Suspense>를 사용
- 엘리먼트 간의 suspense resolving 순서를 결정하고 싶다면 <SuspenseList>를 사용
- Code, data, asset 들을 위해 suspense를 사용
Relay hooks
- preloadQuery() and usePreloadedQuery()
  - useLazyLoadQuery()
- useFragment()
- useRefetchableFragment()
- usePaginationFragment()
- @defer, @stream, Data-Driven-Dependencies
- https://relay.dev/docs/en/experimental/a-guided-tour-of-relay

Server side

Best practices for securing Node JS web applications

Node JS 보안 설정 tips

SSL/TLS 설정하는 방법
보안 관련 HTTP header 설정
CSRF
XSS
SQLi
Rate limite
보안 관련 툴

Node.js: How even quick async functions can block the Event-Loop, starve I/O

setTimeout(0) 대신에 setImmediate를 쓰라는 내용.

Node.js Modules: Basics to Advanced - Better Programming - Medium

잘알고 있다고 생각하지만, 잘 모르는 Node.js module에 대한 자세한 설명

exports, require, module, __filename, __dirname, require.resolve, require.resolve.paths, require.main === module

List of Node.js Articles - Pankaj Panigrahi - Medium

elasticsearch 관련 잘 설명 됨.

Verifying Service Mesh TLS in Kubernetes, Using ksniff and Wireshark

ksniff 라는 kubectl 툴로 네트워크 덤프 가능

Codepen Picks

[리뷰] Ink transition effect with PNG sprite

잉크가 번지면서 나타나는 효과, paralex

ScrollMagic ♥ Demo과 gsap 플러그인 사용.

Scroll Magic API Tutorial by ihatetomato :: Serenity

[ScrollMagic] 스크롤매직 라이브러리 - 기초편

SVG 필터링을 하고, GSAP의 기능을 활용함.

@keyframes ink-transition {
  0% {
    transform: translateX(-1.25%);
  }

  99% {
    transform: translateX(-98.75%);
    opacity: 1;
  }

  100% {
    transform: translateX(-98.75%);
    opacity: 0;
  }
}

[리뷰] rainbow-text-hover-animation-1

후버하면 글의 패턴/색상이 에니메이션

다음으로 배경색을 text로 clipping

{
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; 
}

배경 변화는 size와 position으로

@keyframes rainbow-text-animation-rev {
  0% {
    background-size: 300%;
    background-position: -9em 1em;
  }
  20% {
    background-size: 57%;
    background-position: 0 1em;
  }
  100% {
    background-size: 57%;
    background-position: 0 0;
  }
}

[리뷰] Cursor Bin 🗑

마우스 커셔 사라지게 하는 css

{
  outline: none;
  cursor: none;
}

[리뷰] Animating with React.js!

React로 검색 UX 에니메이션

순차적인 에니메이션을 css variable과 delay로 풀었음

  {data.map((item, i) => {
    return (
      <Result
        key={item}
        style={{
          "--i": i
        }}
      >
        {item}
      </Result>
    );
  })}

{
  animation-delay: calc( var(--i) * 0.08s );
}

[리뷰] GSAP 3 & ETC Crinkled Variable Font

글자 계단으로 만들기

실제로는 여러개의 GSAP 이라는 text를 배치하고 계단에 맞추어 x 축회전을 하고 보여지는 영역을 clip path로 제한하여 계단 효과를 만듬

function stepText(tEase, angle) {
	
	let tl = gsap.timeline();
	
	for (let step = 0; step < numSteps-1; step++){
	
		let dir = -1;

		if(step%2==0) {
			dir=1; // which way am I going? Up or down?
		}
		tl.to(`[data-face="face--${step+2}"]`, {
			rotationX: function() {
				if(angle!=0) {
					angle = stepAngle*dir;
				}
				return angle;
			},
			color: function() {
				let stepColor = "#fff";
				if(step%2==0 && angle!=0) {
					stepColor = "#d7d7d7";
				}
				return stepColor;
			},
			ease: tEase,
			transformOrigin: `50% ${stepHeight*step+stepHeight}%`,
			duration: 1.2
		}, `0.${step}`)
	}
	
	return tl;
}

제목과 달리 CSS variable font 와는 상관 없음.

Variable fonts (가변 폰트) | WIT블로그

swcho/devlog.md

개발 일반

Front end