22. 1월 스크랩

1. Headless UI - 스타일이 적용되지 않은 UI 컴포넌트(링크)

- Tailwind CSS와 잘 연동되게 디자인
- React/Vue 용 컴포넌트들
ㅤ→ Menu (Dropdown)
ㅤ→ Listbox (Select)
ㅤ→ Switch (Toggle)
ㅤ→ Disclosure
ㅤ→ Dialog (Modal)
ㅤ→ Popover
ㅤ→ Radio Group
ㅤ→ Transition
ㅤ→ Tabs

2. Mind AR JS - 웹 증강현실 라이브러리 (링크)

- 이미지 트래킹 & 얼굴 트래킹
ㅤ→ 멀티 타겟 트래킹 가능
- WebGL을 통한 GPU 활용
- Web Worker 이용하여 훌륭한 성능
- Tensorflow.js 사용

3. Scroll-snap - 스크롤 중 멈추면 원하는 형태로 페이지 스냅 (링크)

- CSS Scroll Snap 에 기능을 추가
- 최신 브라우저 모두 지원
- requestAnimationFrame 으로 60fps 적용
- 스냅시 액션에 대해 사용자 정의 가능

4. CSS Layout Generator - 자주 사용되는 CSS 레이아웃을 간단히 생성/편집하도록 도와주는 도구 (링크)

- 많이 쓰는 CSS 레이아웃을 간단히 생성/편집하도록 도와주는 도구
ㅤ→ 3x3 , Header/Main/Footer, Holy Grail, Infinite, Sidebar
- Preview 화면을 통해서 상세 편집 가능
ㅤ→ Children/Row/Column 갯수
ㅤ→ Row Height/Column Width/Gap 값 조정
ㅤ→ Grid Alignment 조정
ㅤ→ Direction 및 빈공간 채우기 지정
- CSS/JSX 가 바로 보이고 Copy 가능

5. 사무실 없이 일 잘하는 법 - 로켓펀치의 자율 근무 문화 가이드북 (링크)

자율 근무를 위한 세가지 원칙
- "더 자주 공유하되, 방해를 줄이고, 비언어 커뮤니케이션을 고려하는 것"

(1) 더 자주 공유하되 (Always Sharing)
ㅤ1) 대화에 '1:1 메시지' 대신 '공개 채널' 사용
ㅤ2) 문서 작성 시 기본적으로 공유된 문서로 작성
ㅤ3) 공개 대화와 공유 문서에 대한 리액션

(2) 방해를 줄이고, (With Less Distraction)
ㅤ1) 메시지는 최대한 완결된 단위로 작성
ㅤ2) 멘션(mention, @)의 적절한 사용
ㅤ3) 쓰레드(Thread)의 적절한 사용
ㅤ4) 답변은 가능한 빨리
ㅤ5) 업무 관련 일정 통보도 가능한 빨리

(3) 비언어 커뮤니케이션을 고려하는 것 (and Considering the Non-language Communication)
ㅤ1) 하나의 주제로 메시지가 3번 이상 오간다면, 통화를 시작하기
ㅤ2) 통화 시 특별한 이유가 없다면 반드시 얼굴을 보여주기

6. Tinkerstellar - iPad에서 Python 무료로 배우기 (링크)

- 인터랙티브 튜토리얼로 파이썬 코딩 부터 머신러닝 & 데이터 사이언스를 배울수 있는 무료 앱
- Swift Playground 처럼 iPad 내에서 코드를 편집하고 바로 실행 가능
ㅤ→ 파이썬 환경 구성이나 데이터셋 다운로드 등을 신경 쓸 필요 없음
- iOS용 Jupyter IDE 인 Juno를 만든 Rational Matter가 개발

7. Parcel CSS - 새로운 CSS 파서 & 컴파일러 (링크)

- Parcel팀이 Rust로 개발한 CSS Parser/Compiler/Minifier
ㅤ→ 훌륭한 성능 : CSSNano 대비 100x, ESBuild 대비 3x 빠름
ㅤ→ Minification 품질 향상 : 더 작은 사이즈 파일 생성
- CSS모듈, 트리 쉐이킹, 브라우저 벤더별 프리픽스 추가
- 최신 CSS 기능들 트랜스파일링 지원 (Nesting, Logical Properties, Level 4 Color Syntax등)

8.  SQIP - SVG 기반 이미지 플레이스홀더 (링크)

- 원본 이미지를 엄청 작은 크기의 SVG 벡터 파일로 바꿔주는 이미지 처리기
ㅤ→ 30kb 짜리 JPG 썸네일에서 1.25kb 정도의 흐린 이미지 미리보기 생성
- Node API 및 CLI 로 제공
- 변환한 이미지에 다양한 효과 적용 가능 : 픽셀화 / 폴리곤 아트 / Potrace

9. Eleventy - 정적 사이트 생성기 (링크)

- Jekyll 대체제
- 현재 폴더 구조를 그대로 이용
- 다양한 템플릿 엔진 동시 지원 : HTML, 마크다운, JS, Liquid, Nunjucks, Handlebars, Mustache, EJS, Haml, Pug..
- JS(Node.js)로 개발되었지만, JS 프레임워크는 아님(생성된 페이지에 별도 JS 포함할 필요 없음)

 

Jekyll(Ruby), Hugo(Go), Hexo(JS), Gatsby(JS + React), Nuxt(JS + Vue), Zola(Rust), Elder(JS + Svelte)

10. Animatize - 객체를 드래깅 해서 애니메이션 만들기 (링크)

- 복잡한 위치 계산 없이 캔바스 위에 객체를 드래그 하는걸 기록해서 애니메이션으로 만들어주는 오픈소스
- CSS/Javascript 로 된 애니메이션 코드를 생성해줘서, 웹사이트에 쉽게 임베딩 가능

11. Javascript 25 주년 타임라인 (링크)

자바스크립트가 벌써 25주년이 되었네요,
Jetbrains 에서 25주년을 맞이해서 타임라인을 만들었네요.

인상 깊은 타임라인 몇가지만 인용해봅니다.

- 2021년 5월: JavaScript 우주에 나가다
- 2019년 10월: React Hooks 발표
- 2018년 6월: Deno 프로토타입 발표
- 2016년 9월: Angular 발표
- 2015년 6월: ES2015 및 대규모 업데이트

12. 디자인 시스템 레퍼런스

https://blog.prototypr.io/50-design-systems-examples-to-learn-from-for-your-next-project-b9949e486702

https://component.gallery/

13. Drovp - 드래그 & 드롭 UI 기반 유틸리티 (링크)

- 맥/윈/리눅스 지원
- 특정 파일들을 드롭하면 원하는 동작을 수행 시켜주는 도구
ㅤ→ 미디어 파일 인코드, 이미지 최적화, 파일 이름 변경, S3/FTP등에 업로드, 파일에 대해 특정 명령 실행..
- 여러 개의 프로필(드롭 존) 지정해서 각각의 동작 지정 및 워크 플로우 생성
ㅤ→ 설정된 프로필 공유 및 임포트 가능
- 자동 큐 처리 및 히스토리 기능 내장
- 플러그인 기반으로 확장
ㅤ→ 플러그인은 단순한 Node.js 모듈로 NPM에 등록

14. 시니어 개발자가 말하는, 프론트엔드 역사와 미래 (링크)

15. Remix vs Next.js (링크)

Remix팀이 쓴 글 이라는 걸 감안하고 보면 나름 볼만
- 정적 콘텐츠 서빙에선 Remix가 Next.js 와 같거나 더 빠름
- 동적 콘텐츠 서빙은 Remix가 Next.js 보다 빠름
- Remix는 느린 네트워크에서도 빠른 사용자 경험을 제공
- Remix는 에러, 인터럽트, 경쟁 조건들을 자동으로 처리. Next.js는 하지 않음
- Next.js는 동적 콘텐츠 서빙에 클라이언트측 JS를 권장하지만 Remix는 그렇지 않음
- Next.js는 데이터 뮤테이션을 위해 클라이언트측 JS를 필요로 하지만 Remix는 그렇지 않음
- Next.js 빌드 시간은 데이터가 많아지면 같이 선형적으로 증가하지만, Remix는 거의 바로 빌드되며 데이터랑 분리되어 있음
- Next.js는 데이터 확장 시에 애플리케이션 아키텍처를 변경하고 성능을 희생해야 함
- 우리가 생각하기에 Remix의 추상화가 더 나은 어플리케이션 코드를 만들어 냄

16. 시니어 개발자가 말하는, 프론트엔드 업무와 잘하는 프론트엔드 개발자 (링크)

- 프론트엔드 개발자가 잘해야 하는 업무는?
-> 데이터 예쁘게 잘 보여주기
-> 데이터 화면 변경하기
-> 서버로 데이터 보내기
-> 서버에서 받은 데이터 다루기

- 일반적인 회사에서의 프론트 업무 범위는?
-> 웹이 거대해지면서 영역이 넓어지고 있기 때문에 확장 의식이 필요

- 회사의 입장에서 잘하는 프론트엔드 개발자란?

17. GitHub Actions by Example (링크)

- 예제로 배워보는 깃헙의 CI/CD 서비스
- Hello World 부터 주제별 코드에 대한 라인 단위 설명이 되어 있어 쉽게 따라하기 가능
ㅤ→ Event Triggers
ㅤ→ Actions
ㅤ→ Environment Variables
ㅤ→ Parallel Jobs
ㅤ→ Job Ordering
ㅤ→ Job Matrix
ㅤ→ Outputs
ㅤ→ Context Variables
ㅤ→ Context Expressions

18. Plasmic - 비주얼 콘텐츠를 쉽게 만드는 헤드리스 페이지 빌더 오픈소스 (링크)

- React/Vue/Angular/PHP/바닐라 JS 를 위한 디자인 도구
- 코드에 Plasmic 컴포넌트만 넣으면 누구나 쉽게 페이지 디자인 가능
ㅤ→ 페이지 빌더 또는 비쥬얼 CMS로 사용
- 드래그앤 드롭 방식으로 리액트 컴포넌트 조작
- Figma 디자인 임포트 가능
- 동적/정적 사이트 모두 지원
- 고품질 코드 생성. 자동 이미지 최적화