medium에 읽기 회수 제한이 걸렸을 경우, 시크릿모드에서 문서를 열어보시면 됩니다.
기술 문서를 Tutorials, Hot-To Guide, Explanation, Reference로 나누고 그 구성과 어떠한 상황에서 사용해야 하는지 설명
[The Power of Ten – Rules for Developing Safety Critical Code}] (http://pixelscommander.com/wp-content/uploads/2014/12/P10.pdf)
안정성이 필요한 코드를 작성하는 방법, c/c++ 언의 룰 같지만, 일단 정리해 본다.
- 간단한 흐름
- loop는 정적이고 고정값이어야 함
- 초기화 이후 메모리 동적할당을 하지 않음
- 함수는 60 내외로, declaration과 statement는 한줄로.
- 함수 하나당 최소 2개의 assert 문 추가
- 데이터 객체는 최대한 작게 선언
- 함수의 리턴 값은 호출한 곳에서 파라미터는 해당 함수에서 검사해야 함.
- 전처리는 해더파일 include나 간단한 매크로에 한해서 사용.
- 포인터 사용 제약: 하나의 레벨 이상의 dereferencing은 허용하지 않음. 함수 포인터 허용하지 않음.
- 모든 코드는 컴파일되어야 함.
Keeping Node.js Fast: Tools, Techniques, And Tips For Making High-Performance Node.js Servers — Smashing Magazine
node.js 기반의 퍼포먼스를 측정하는 autocannon 툴과 node.js의 framegraph를 뽑아주는 clinic 가이드
- Using Node.js to Read Really, Really Large Datasets & Files (Pt 1)
- Writing memory efficient software applications in Node.js
집에서 라즈베리파이로 k3s 클러스터 구축기
최대 수행 개수를 정해서 돌리는 방법은 특정 endpoint에 동시 요청 개수를 제한할 필요가 있을 때 써먹을 만함. 처음에 promise all 하고 재귀함수를 통해 다음 promise 들을 chaining 함.
Continuation Local Storage (CLS)
- 비동기 호출이 이루어지는 컨텍스트/동작을 추적할 수 있음.
- Profiling/monitoring
Node JS 에서는 thread 가 하나이기 때문에 Thread Local Storage(TLS)는 쓸모없음.
CLS와 Proxy를 사용하여 dependency free한 logging 시스템 구축
pm2 보다 cluster를 사용하는 이유는 CPU 활용이 더 좋기 때문
matter.js를 사용한 당구 게임
Scroll 시, 상단 프로그레스와 에니메이션의 keyframe을 맵핑함.
{
animation-play-state: paused;
animation-delay: calc(var(--scrolly) * -1s), calc(var(--
scrollx) * -1s);
}어떻게 animation play state를 paused 로 하면 delay 가 key frame 역할을 하는 것 같음.
하나의 div tag에서 CSS 만을 활용하는 다양한 패턴들
Mask Compositing: The Crash Course | CSS-Tricks
SVG는 luminance mask 이다.
마스크 픽셀이 하얀색이면 불투명, 마스크 픽셀이 검은색이면 투명, 그 중간이면, luminance(grey, pink, line) 반투명
CSS는 alpha mask 이다.
mask-composite 는 firefox에서만 사용할 수 있음.
Chrome과 Firefox 에서만 동작
그림자가 광원이 고정된 것처럼 해줌
styleTextShadow와 styleBoxShadow 함수가 angle에 따른 그림자 계산함.
function styleTextShadow(angle, h, v, blur, color){
if(document.getElementById("staticShadow").checked ) return ""
var angleRadians = angle * Math.PI / 180
angleRadians= angleRadians + Math.PI / 4
return h * Math.sin(angleRadians) +"px " +
v * Math.cos(angleRadians) +"px " +
blur + "px " +
color
}
function styleBoxShadow(angle, h, v, blur, color, spread = 0, inset = ""){
if(document.getElementById("staticShadow").checked ) return ""
var angleRadians = angle * Math.PI / 180
angleRadians = angleRadians + Math.PI / 4
return inset + " " +
h * Math.sin(angleRadians) + "px " +
v * Math.cos(angleRadians) + "px " +
blur + "px " +
spread + "px " +
color
}three.js 로 캐릭터 표현, 모델링하는 과정도 잘 설명되어 있음.
How to Create an Interactive 3D Character with Three.js | Codrops
Blender 사용, Mixamo 에서 animation asset 사용.
신용카드 입력
multiline text에 밑줄 긋는 animation
background-image로 밑줄을 긋고, background-size를 animation 함.