medium에 읽기 회수 제한이 걸렸을 경우, 시크릿모드에서 문서를 열어보시면 됩니다.

개발 일반

What nobody tells you about documentation - Blog - Divio

기술 문서를 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은 허용하지 않음. 함수 포인터 허용하지 않음.
모든 코드는 컴파일되어야 함.

Server side

Keeping Node.js Fast: Tools, Techniques, And Tips For Making High-Performance Node.js Servers — Smashing Magazine

node.js 기반의 퍼포먼스를 측정하는 autocannon 툴과 node.js의 framegraph를 뽑아주는 clinic 가이드

node.js 스트림 프로그래밍 할때 참조 할만한 내용

K3s on Raspberry Pi Cluster - ddiiwoong Tech Blog

집에서 라즈베리파이로 k3s 클러스터 구축기

Handling Asynchronous Operations in Parallel in Node.js

최대 수행 개수를 정해서 돌리는 방법은 특정 endpoint에 동시 요청 개수를 제한할 필요가 있을 때 써먹을 만함. 처음에 promise all 하고 재귀함수를 통해 다음 promise 들을 chaining 함.

NodeJS logging made right - ITNEXT

Continuation Local Storage (CLS)

비동기 호출이 이루어지는 컨텍스트/동작을 추적할 수 있음.
Profiling/monitoring

Node JS 에서는 thread 가 하나이기 때문에 Thread Local Storage(TLS)는 쓸모없음.

CLS와 Proxy를 사용하여 dependency free한 logging 시스템 구축

How to scale your Node.js server using clustering - freeCodeCamp.org - Medium

pm2 보다 cluster를 사용하는 이유는 CPU 활용이 더 좋기 때문

Codepen Picks

Matter JS Pool

matter.js를 사용한 당구 게임

Bind CSS keyframe animation to scroll

Scroll 시, 상단 프로그레스와 에니메이션의 keyframe을 맵핑함.

{
  animation-play-state: paused;
  animation-delay: calc(var(--scrolly) * -1s), calc(var(--
scrollx) * -1s);
}

어떻게 animation play state를 paused 로 하면 delay 가 key frame 역할을 하는 것 같음.

1 element card background patterns (see description)

하나의 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 에서만 동작

ongruent shadow in rotated elements

그림자가 광원이 고정된 것처럼 해줌

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
}

Character Tutorial - Final

three.js 로 캐릭터 표현, 모델링하는 과정도 잘 설명되어 있음.

How to Create an Interactive 3D Character with Three.js | Codrops

Blender 사용, Mixamo 에서 animation asset 사용.

Credit Card Form - VueJs

신용카드 입력

Multi-line spanning animated underline.

multiline text에 밑줄 긋는 animation

background-image로 밑줄을 긋고, background-size를 animation 함.

swcho/devlog.md

개발 일반

[The Power of Ten – Rules for Developing Safety Critical Code}] (http://pixelscommander.com/wp-content/uploads/2014/12/P10.pdf)

Server side

node.js 스트림 프로그래밍 할때 참조 할만한 내용

Codepen Picks