23. 03 스크랩

1. OpanAI, ChatGPT와 Whisper API 공개 (링크)

이제 ChatGPT 및 Speech-To-Text 기능을 자신의 앱 내에서 활용 가능
12월 ChatGPT 발표이후 최적화를 통해서 90% 비용 절감을 달성했고, 이걸 API 사용자에게 제공

 

ChatGPT API
- gpt-3.5-turbo 모델을 사용하며, 현재 ChatGPT 제품에서 사용하는 것과 같음
    - 1k 토큰당 $0.002 로 기존 GPT-3.5 보다 10배 저렴
    - 채팅외의 목적으로도 가장 좋은 모델로, 기존 text-davinci-003 을 gpt-3.5-turbo 로 쉽게 전환 가능(전환을 권장)
- API는 토큰으로 이뤄진 구조화되지 않은 텍스트를 입력 받음
    - 내부적으로는 ChatML 이라 불리는 토큰의 시퀀스로 렌더링 됨
- gpt-3.5-turbo 는 최신버전으로 계속 업그레이드 할 예정. 현재는 gpt-3.5-turbo-0301 로 6/1까지 지원 예정
- 4월에 새로운 안정버전을 출시 예정
- Dedicated Instance 도 별도 제공 (더 긴 컨텍스트 지원 및 하루에 4.5억개 이상의 토큰을 실행하는 사용자에게 적합)

Whisper API
- 2022년 9월에 오픈소스로 공개한 Speech-To-Text 모델
- 개발자 커뮤니티에서 좋은 평가를 받았지만, 운영하기는 힘들었음
- large-v2 모델을 API로 사용가능하며, $0.006/분
- transcriptions / translations 엔드포인트에서 이용 가능
- m4a, mp3, mp4, mpeg, mpga, wav, webm 포맷 지원

초기 사용 회사들
- Snap : My AI for Snapchat+ 라는 ChatGPT 기반 챗봇을 제공. 추천 및 친구들을 위한 시(하이쿠)를 작성
- Quizlet : 공부한 내역에 맞는 질문을 해주는 적응형 AI 튜터인 Q-Chat에 ChatGPT 적용
- Instacart : 음식에 대해서 질문하고 답변 받을수 있는 Ask 기능에 도입
- Shopify : Shop 앱에 쇼핑 도우미 기능을 도입
- Speak (한국) : Whisper API를 이용한 언어 교육 앱.

2. Scrollbar.app - CSS 스크롤바 인터랙티브 디자이너 (링크)

Webkit & Blink 기반 브라우저용 Pseudo 셀렉터 지원
Thumb Color, Track Color, Scrollbar Width, Border Radius, Thumb Border Width/Color 등 조절 가능
변경시 화면에서 즉시 적용되며, 해당 CSS 코드 복사 가능

3. 서버리스에 속지 마세요 (링크)

RoR을 만든 DHH의 글
- 클라우드 팬들은 비용, 성능, 복잡도 등 모든게 "서버리스"로 가면 마법처럼 해결 된다고 함
- 클라우드/VPS는 대량 구매 후 개별 판매라는 원칙에 따라 작동
    - $1000에 큰 서버를 구매해서 $200에 7명에게 임대해서 월 $400의 수익
    - 7명이 서버에 큰 부하를 주지 않거나, 서로 다른 시간에 사용한다면 잘 작동
    - 서버 전체의 용량을 필요로 한다면 $1000의 컴퓨터를 $1400에 사용
    - 1년 약정해서 쓴다면 월 $1250으로 할인도 가능 (기본적으로 연이율25%의 신용 계약)
- 서버리스는 위와 같지만 서버를 훨씬 더 얇게 쪼개는게 가능
    - 대형 서버 한대를 7명에게 월 $200에 주는게 아니라, 각 펑션 실행하는 고객 100명에게 월 $20에게 제공
    - 이제 월 $400 의 수익이 아니라 $1000의 이익을 냄
    - 클라우드 업체가 서버리스를 좋아하는게 놀라운 일이 아님
- 때대로 실행되는 몇개의 기능만 필요하다면 좋음(적어도 단기적으로는)
- 그러나 전체 컴퓨터 기능을 다 사용해야 하는 수준이라면 끔찍함
- 동일한 클럭수에 대해 더 많은 비용을 지불하면서도 락인도 엄청나기 때문
- 서버리스에서 "클라우드 네이티브" 서비스를 사용하게 될수록 밖으로 나가기가 더 어려워짐

 

"서버리스에 속지 마세요. 컴퓨터의 컴퓨팅 사이클 전체가 필요하다면, 그 컴퓨터를 사야 한다는 사실을 바꾸는 마법 같은 것은 없어요. 독점적인 서버리스 구성으로 시작하면 락인에서 벗어날 수 없다는 걸 알게 될 거에요"

"클라우드는 블랙프라이데이/크리스마스에 엄청난 수요가 있고, 나머지 기간엔 필요 없는 용량이 많았던 아마존처럼 사용량에 큰 변화가 있는 회사나, 컴퓨터 전체를 소유할 만한 비즈니스가 아니거나, 클라우드 지출이 아주 적어서 문제가 되지 않는 초기 기업들을 위한 것이에요. 서버리스가 그걸 바꾸지는 않습니다."

4. 타입스크립트 5.0 (링크)

드디어 데코레이터 공식 지원
const 유형 인자
extends 속성을 통한 다중 설정 파일 지원
모든 열거형 (enums)은 연합 열거형이 됩니다.
—moduleResolution 번들러 지원
사용자 지정 플래그 해결
—verbatimModuleSyntax 여기에 설명하기엔 길어서 별도 설명 예정
와일드카드 유형 출력 지원 (export type *)
@satisfies JSDoc 지원
@overload JSDoc 지원
—build 플래그와 같이 사용 가능한 플래그 추가
편집기에서 import 정렬 시 대소문자 무시
철저한 switch/case 자동완성
속도, 메모리, 패키지 용량 최적화
변경점 및 폐기 예정 기능은 링크를 참조하세요.

5. Detail - 여러 카메라를 동시에 녹화해서 편집하는 맥/iOS용 비디오 앱 (링크)

아이폰, DSLR, 웹캠, 스크린 모두를 동시에 동기화해서 녹화
가로나 세로로 녹화된 비디오를 매직캔버스를 통해서 전환하며 다양한 조합으로 리믹스 지원
매직마커 : 주요 장면을 쉽게 찾고 익스포트 지원
영상의 자동 Transcript 및 쉬운 편집 지원
멀티 채널 오디오 녹음
이미지/텍스트 오버레이, 비디오 레이아웃, 효과 필터등 제공
Final Cut Pro XML(FCPXML) Export 지원
다양한 영상 시나리오를 위한 Scene Pack 제공
M1/M2 맥에서 모든 기능 사용 가능(인텔에서는 제한적)
iOS용은 iPhone XS, XS Max, XR, SE (2세대). iPad Air (3세대), iPad Mini (5세대), 8세대 iPad 이상

6. Microsoft, 초보자를 위한 Progressive Web App(PWA) 영상 강의 공개 (링크)

Introduction to PWAs
Introduction to Service Workers
Web Capabilities & Native Integrations
Recap: Why Build PWAs?
Basics of Service Workers
Working With Service Workers
Caching and Fetching Using Service Workers
Beyond Caching
PWA Developer Tools: Intro
PWA Developer Tools: Getting Started
PWA Developer Tools: Debugging
PWA Native Integrations in Depth
Better UX for PWAs
How PWAs further integrate with the host OS
PWA Demos

7. Microsoft Visual ChatGPT (링크)

- ChatGPT 와 Visual Foundation Model을 연결하여, 채팅 중에 이미지를 주고 받기 지원
    - ChatGPT 는 언어기반 학습을 하여 이미지 처리 및 생성이 불가
    - VFM 은 이미지를 이해하고 처리하지만, 1회성 입력과 출력만 가능
- 둘을 연결하여 이미지 생성, 생성한 이미지의 변경, 전송한 이미지내 특정 사물의 제거 또는 변경 등이 가능
    - 언어와 함께 이미지를 전송가능
    - 복잡한 시각적 질문이나 편집 명령으로 다단계 AI모델간 협업
    - 수정된 결과에 대한 피드백 등

8. CSS Media Query 완벽 가이드 (링크)

미디어 쿼리란 무엇인가요?
미디어 쿼리의 구조
미디어 타입
미디어 쿼리 사용
미디어 쿼리 기능들 사용하기
출시 예정 미디어 쿼리 기능들
미디어 쿼리 레벨 4 및 5의 새로운 표기법
더 이상 사용되지 않는 미디어 쿼리
자바스크립트에서 미디어 쿼리 사용

9. DEVIEW 2023 발표영상 공개 (링크)

DEVIEW 2023 홈페이지와 NAVER D2 유튜브 채널에 공개
인기세션 Top 3 - DAY1
하나의 코드로 React, Vue, Svelte 등 모든 프레임워크를 지원할 수 있는 CFCs Reactive - NAVER 최연규님
네이버 스케일로 카프카 컨슈머 사용하기 - NAVER 이동진님
UI 빌더를 지탱하는 레고 블록 같은 아키텍처 만들기 - NAVER 김훈민님

인기세션 Top 3 - DAY2
런타임 데드 코드 분석 도구 Scavenger: 당신의 코드는 생각보다 많이 죽어있다. - NAVER 김태연/권오준님
웨일 브라우저 오픈 소스 생존기 - NAVER Cloud 이형욱님
VictoriaMetrics: 시계열 데이터 대혼돈의 멀티버스 - NAVER 손주식/이선규님

10. 브라우저 탭 변경시에 favicon 교체하기 (링크)

"visibilitychange" 이벤트 받으면 document.hidden 값 보고 교체하기

11. Midjourney v5 - 더 사실적인 이미지와 5개의 손가락 (링크)

이미지 생성 AI인 Midjourney가 5번째 버전을 출시하여 알파 테스트 진행중
믿을 수 없을 정도로 사실적인 피부 질감과 영화 같은 조명, 더 나은 반사 및 그림자, 장면을 더 표현력 있는 앵글이나 오버뷰로 표현 가능
눈은 거의 완벽하고, 문제가 되었던 5개의 손가락 역시 잘 표현
이미지 해상도 2배 증가
v3,v4,v5 를 비교해본 이미지에서 좋아진 품질 확인 가능

12. Zed - Atom 개발자들이 만든 새로운 에디터. 오픈 베타 시작 (링크)

- 고성능 : 모든 CPU 코어와 GPU를 효율적으로 활용 고성능
- Language-Aware : 모든 입력 텍스트에 대한 Full Syntax Tree를 유지하여 정확한 코드 하이라팅 가능. LSP 지원
- Multi-buffers : 여러개의 파일을 하나의 가상 버퍼에 담아서 처리. 멀티 커서로 여러개의 파일을 동시에 처리가능
- Vim 모드 지원, 내장 터미널, 다양한 테마
- 멀티 플레이어 : 여러명이 공유 워크스페이스에서 같이 편집 가능. 팀원 초대 기능 내장. 다른 기기에 있는 코드도 편집 가능
- GPUI 프레임워크를 이용하여 게임처럼 구현. 빠르고 부드러움
- Rust로 Async 기반 구현으로 멀티 코어를 제대로 활용
- 모든 버퍼는 CRDT

13. 더 나은 CSS 트랜지션 & 애니메이션을 위한 팁들 (링크)

• 생각하는 것보다 더 짧게 할 것
  • 단일 트랜지션은 0.15~0.4초
  • 너무 빠르다고 생각될 때까지 빠르게 한 다음 조금씩 줄이기
• 액션을 커브에 맞출 것
  • 움직임은 색상만큼 주관적이지만, 그만큰 중요함
  • 실제 세계의 움직임을 생각하고 비교할 것
• 가속과 감속
  • 애니메이션이 부자연 스럽다면 갑자기 시작하거나 끝나기 때문
  • 미미하더라도 cubic-bezier 커브에 easing-in/out을 추가하는 게 좋음
  • 실제처럼 보이려면 "관성(Inertia)"도 좋음
• 적을수록 좋음
  • 애니메이션 중에 엘리먼트가 더 많이 변경될 수록, 더 과도하게 보일 위험이 커짐
  • 투명도가 0에서 1로 간다면 1대신 0.4를 시도해보기. 사이즈를 변경한다면 조금만 작은 크기에서 시작해보기
  • 대부분의 경우 자기 자리로 찾아가는 애니메이션은 5~40픽셀 사이에서 움직여야함
• 브라우저 기본값은 피할 것
  • 브라우저에는 linear, ease, ease-in, ease-out, ease-in-out 같은 커브가 내장
  • 편하고 특정 상황에서는 유용하지만, 너무 일반적이어서 다 똑같아 보임 (마치 Bootstrap/Tailwind로 만든 사이트가 다 비슷해 보이는 것처럼)
  • VS Code에 있는 cubic-bezier 커브의 자동 완성값을 사용해 볼 것
  • 또는 브라우저 개발자 도구를 열고 커브 편집기를 사용해 볼 것
• 여러가지 속성, 여러가지 easing
  • 항상 유용한 것은 아니지만, 여러개의 속성을 한번에 변경해야 할 때 (transform 과 opacity를 동시에)
    • 같은 cubic-bezier 커브를 적용하면 괜찮게 보일때도 있지만, 실제로 안그럴 때가 있음
    • transform에 잘 동작하는 커브도 fade에는 잘 안어울릴 수 있음
    • 이럴때는 CSS 속성별로 서로 다른 easing을 선택하는게 좋음
  • 속성별로 @keyframes 애니메이션을 나누거나, 여러개의 transition 선택 가능
    • opacity 에는 linear, transform 에는 cubic-bezier(.5, 0, .5, 1)
• 엇갈린 지연 사용
  • 여러개의 엘리먼트를 트랜지션할때 animation-delay 또는 transition-delay의 효과를 과소평가 하지 말 것
• In은 나가고, Out은 들어감
  • 이징 커브는 세가지 종류가 있음
    • ease in (느리게 시작)
    • ease out (느리게 끝남)
    • in-out (가운데만 빠르고, 시작과 끝에선 느림)
  • 트랜지션의 까다로운 점은, 종종 in 을 ease-out 하고 싶고, out 이 ease-in 되고 싶을 때가 있다는 것
    • 하나가 나가고 하나가 들어오는 애니메이션은, 사용자 입장에선 하나의 전환으로 보이지만, 내부에선 두개의 전환임
    • 나가는 것은 천천히 하고 싶으니까 ease-in이 필요하고, 들어오는 것은 ease-out 이 되어야 함
• 하드웨어 가속에 의존하기
  • 모든 CSS 속성이 모든 장치 & 브라우저에서 원활히 동작하는 것은 아님
  • 항상 하드웨어 가속 가능한 속성
    • transform(모든 translate, scale, rotate 및 3D 버전까지)
    • opacity
  • 경우에 따라 하드웨어 가속 가능한 속성
    • 특정 SVG 속성들
    • filter (브라우저 및 필터에 따라)
  • 캔버스 및 WebGL도 하드웨어 가속이 되지만 여기서는 다루지 않음
  • 즉, 이동, 크기 조정, 회전 하려면 항상 CSS tranform 속성을 사용할 것
  • 뭘하든 엘리먼트의 크기나 위치를 직접 변경하지 말 것
    • height, width, border, margin, padding 같이 페이지 레이아웃에 영향을 미치는 속성을 직접 변경하면 페이지 속도가 눈에 띄게 느려질 위험이 있음
• 필요시 will-change 사용하기
  • 이론적으로는 애니메이션이 부드럽고 성능이 좋아야 하는데, 부자연스러워 보인다면 will-change 속성을 사용할 것
  • 뭐가 변경될지 미리 알려주므로, 다른 계산을 건너 뛸 수 있음
• 보너스 : 사용자의 선호도를 존중하기
  • 사용자는 기기 설정에서 "reduced motion"을 선호하는지 지정 가능
  • 미디어 쿼리를 이용하거나 자바스크립트를 통해 이 값을 인식하고, 맞게 대응 가능

13. Modern Font Stacks - 시스템 폰트를 사용한 폰트 스택 (링크)

• 최신 OS들의 '시스템 폰트'를 사용한 폰트 스택 CSS들을 제공
• 내장 폰트라 웹폰트 다운로드가 필요 없으므로 빠른 웹페이지 구성 가능
• 15가지 서체 종류
  • System UI : OS의 기본 UI 폰트들
    • font-family: system-ui, sans-serif;
    • 맥/iOS San Francisco, 윈도우는 Segoe UI, Android는 Roboto, Linux는 Ubuntu 등을 사용하게
  • Transitional : 신/구의 조화
    • font-family: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
  • Old Style : 둥근 쉐리프가 특징인 르네상스 시대 폰트
    • font-family: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
  • Humanist : 유기적인 캘리그래피 형태, 르네상스시대의 손글씨에서 영감 받음. 다른 산세리프보다 읽기 쉬움
    • font-family: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
  • Geometric Humanist : 균일한 획 너비가 특징으로 헤드라인 용으로 자주 사용
    • font-family: Avenir, 'Avenir Next LT Pro', Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
  • Classical Humanist : 세리프로 끝나지 않고 획 끝에서 미묘하게 넓어짐
    • font-family: Optima, Candara, 'Noto Sans', source-sans-pro, sans-serif;
  • Neo-Grotesque : 19세기말~20세기 초에 발달한 산세리프 스타일
    • font-family: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
  • Monospace Slab Serif : 고정 너비 문자. 단순함. 보고서, 표, 기술문서에서 타자기 출력 에뮬레이션
    • font-family: 'Nimbus Mono PS', 'Courier New', 'Cutive Mono', monospace;
  • Monospace Code : 프로그래밍 용. 고정폭에 읽기 쉬움
    • font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
  • Industrial : 19세기 후반에 시작. 대담한 산세리프, 단순하고 직설적인 모양
    • font-family: Bahnschrift, 'DIN Alternate', 'Franklin Gothic Medium', 'Nimbus Sans Narrow', sansserif-condensed, sans-serif;
  • Rounded Sans : 둥글게 휘어서 더 부드럽고 친근한 느낌. 어린이 친화적
    • font-family: ui-rounded, 'Hiragino Maru Gothic ProN', Quicksand, Comfortaa, Manjari, 'Arial Rounded MT Bold', Calibri, source-sans-pro, sans-serif;
  • Slab Serif : 서체 끝에 두껍고 블록모양의 세리프
    • font-family: Rockwell, 'Rockwell Nova', 'Roboto Slab', 'DejaVu Serif', 'Sitka Small', serif;
  • Antique : 19세기에 유행. 블록 같은 세리프와 두껍고 균일한 획 두께가 특징
    • font-family: Superclarendon, 'Bookman Old Style', 'URW Bookman', 'URW Bookman L', 'Georgia Pro', Georgia, serif;
  • Didone : 모던 서체. 굵은 획. 브라케팅이 없는 헤어라인 세리프
    • font-family: Didot, 'Bodoni MT', 'Noto Serif Display', 'URW Palladio L', P052, Sylfaen, serif;
  • Handwritten : 손글씨
    • font-family: 'Segoe Print', 'Bradley Hand', Chilanka, TSCu_Comic, casual, cursive;

OS 별로 어떻게 보이는 지 확인 : https://github.com/system-fonts/modern-font-stacks

14. Runway, 비디오 생성형 AI "Gen-2" 공개 (링크)

텍스트, 이미지, 비디오 클립에서 매우 현실적인 동영상을 만들어 내주는 멀티 모달 AI
Text to Video : 텍스트 프롬프트만으로 영상 합성
Text + Image to Video : 특정 이미지 기반으로 텍스트 내용을 합성
Image to Video : 이미지 만으로 움직이는 영상을 만들어내기
Stylization 모드: 특정 스타일을 적용 (클레이 애니메이션, 특정 이미지의 느낌)
Storyboard 모드 : 목업을 특정 형태로 변형 (책을 세워두고 빌딩으로)
Mask 모드 : 특정 객체만 마스킹하여 변형 (흰 강아지를 점박이로)
Render 모드 : 렌더링 안된 화면을 이미지와 프롬프트로 비디오 렌더링
Customization 모드 : 다양한 변화를 한번에 적용

15. Transformer.js - 트랜스포머를 브라우저에서 실행 (링크)

- 텍스트-to-텍스트 생성, 번역, 요약, 음성 자동 인식, 이미지 분류, 이미지-to-텍스트 등의 기능을 브라우저에서 직접 구현 가능
- 지원 모델 : BERT, ALBERT, DistilBERT, T5, T5v1.1, FLAN-T5, GPT2, BART, CodeGen, Whisper, CLIP, Vision Transformer, VisionEncoderDecoder
- ONNX 런타임을 이용함 (PyTorch 모델을 ONNX로 변환해야 실행가능

16. 프론트엔드에서 다룰 수 있는 로컬 퍼스트 아키텍처 세가지 주제 (링크)

- Storage: 사용자 데이터를 로컬 스토리지에 저장하는 방법과 관련된 주제입니다. 사용자가 인터넷에 연결되지 않은 상태에서도 로컬 스토리지에 저장된 데이터를 사용할 수 있습니다.
- Sync: 인터넷 연결이 되었을 때 서버와 데이터를 동기화하는 방법과 관련된 주제입니다. 사용자가 인터넷에 연결되어 있을 때 로컬 스토리지의 변경 사항이 서버에 적용됩니다.
- Conflicts: 서버와 동기화하는 과정에서 다른 사용자들이 만든 변경 사항과 충돌하는 경우에 대처하는 방법과 관련된 주제입니다. 예를 들어, 한 사용자가 인터넷 연결이 끊어진 상태에서 로컬 데이터를 수정하고, 다른 사용자가 동일한 데이터를 온라인에서 수정한 경우 충돌이 발생할 수 있습니다. 이러한 충돌을 방지하고 처리하는 방법에 대해서 다루게 됩니다.

17. ThumbHash - 더욱 가벼워지는 썸네일 이미지 (링크)

ESBBuild 제작자이며 Figma의 창립자인 Evan Wallace 오픈소스.

BlurHash 와 비슷하지만, 아래와 같은 장점이 있음.
- 같은 공간이라도 표현을 더 자세하게 인코딩
- 빠른 인코딩 및 디코딩
- 해상도 비율까지 인코딩
- 더욱 정확한 색을 선정
- 투명도 이미지 지원

현재 지원되는 언어
- 자바스크립트 (npm 제공)
- 자바
- 스위프트
- 러스트 (cargo 제공)

18. Github Copilot X : AI 기반 개발자 경험 (링크)

Github가 GPT-4 기반으로 5가지의 새로운 Copilot 시리즈인 Copilot X 공개.

Copilot Chat
- 사용하는 편집기에서 ChatGPT와 동일한 경험을 제공.
- IDE와 긴밀하게 결합하여 코드, 오류 메시지 등을 인식하여 동작.

Copilot Voice
- Copilot Chat을 목소리를 통해 이용하여 키보드 없이 코딩 가능.

Copilot for PRs
- Github App을 통해 PR과 관련된 설명을 대신 작성해 줌.
- Copilot 기반으로 테스트를 추가하고, PR 작성 중 실시간으로 내용을 추천해 주는 내용은 출시 예정.
또한 앞으로 Issue에서 자동으로 PR을 작성하는 기능, PR의 변경 사항을 검토해주는 기능 등이 개발될 것.

Copilot Docs
- ChatGPT처럼, 채팅 인터페이스를 통해 각종 기술 질문을 포함하여 문서에 대한 질문을 하고, 답변을 자동으로 생성하는 기능.
- MDN, Azura Docs, React Docs 등 공식 문서를 적극적으로 참고함.
- 향후 조직의 내부 문서에도 동일한 기능을 제공하기 위해 노력 중.

Copilot CLI
- CLI 상에서 질문을 통해 명령어를 생성하고, 명령어에 대한 설명을 보고, 다시 명령어를 변경해달라고 대화식으로 요청 가능.
- 명령어를 다 만들면 즉시 실행 가능.
- GeekNews에서 소개된 AiShell과 비슷한 기능.

아직 모든 기능은 기술 미리보기 단계로 대기자 명단에 등록해야 함.
- Copilot Chat의 경우 Copilot 유료 구독이 필요함.

19. Bloop - GPT4를 이용한 코드 검색 엔진 (링크)

로컬 / 리모트 Repo 에 대해서 자연어/대화형으로 검색 가능
매우 빠른 Regex 검색 지원
정교한 쿼리 필터 기능으로 검색 결과의 범위를 좁힐 수 있음
Rust 오픈소스. Tantivy + Qdrant + Tauri

20. Lenis - 부드러운 스크롤 라이브러리 (링크)

경량(~3KB), 빠른 스크롤을 지원하는 오픈소스
메인쓰레드에서 스크롤 실행, 접근성 지원
네이티브 스크롤바 이용
다른 애니메이션 라이브러리들과 잘 연동
Horizontal/Vertical 스크롤
Position:Sticky 이용 가능

21. Autodoc - LLM을 이용한 코드베이스 문서 자동 생성 툴킷 (링크)

GPT-4/Alpaca등을 이용해서 Git Repo의 문서를 자동 생성
Repo의 모든 콘텐츠를 깊이우선 탐색으로 인덱싱한 후, LLM에게 각 파일과 폴더에 대해 작성을 요청
생성된 문서는 코드베이스에 저장되며, Repo를 받은 개발자는 doc 명령으로 코드에 대해 질문하고 답변을 얻을 수 있음
CI 파이프라인에 연결되어 항상 최신으로 업데이트 예정

22. Learn Images - 웹 개발자를 위한 이미지에 대한 모든 것 (링크)

초보부터 고급 웹 개발자까지, 이미지의 기초부터 포맷, 전송방식까지

목차
Learn Images

Images and performance
- A brief history of images on the web
- Key performance issues

Image formats and compression
- Vector images
- Raster images
- Image formats: GIF
- Image formats: PNG
- Image formats: JPEG
- Image formats: WebP
- Image formats: AVIF

Responsive Images
- Responsive images
- Descriptive syntaxes
- Prescriptive syntaxes

High performance image workflows
-  Automating compression and encoding
- Site Generators, frameworks, and CMSs
- Image content delivery networks
- Conclusion

23. MiniSearch - JavaScript 인메모리 풀텍스트 검색 엔진 (링크)

작지만 강력한 브라우저 & Node용 풀텍스트 검색엔진
다양한 기능 제공 : Prefix 검색, 퍼지 검색, 랭킹, 필드 부스팅 등
메모리 효율적인 인덱스. 아무때나 새 문서 추가 가능
자동 추천 엔진(검색어 자동 완성을 위해)
외부 의존성 없음