blob

new Blob(array, { type : 'text/html' })

파일 다운로드 생성이 잘 안되서 확인해보니 type 지정을 안했다.

GitHub - meltingice/psd.js: A Photoshop PSD file parser for NodeJS and browsers

psd 파서. 이를 통해 관리 가능한 트리 구조에서 Photoshop 문서로 작업하고 다음과 같은 중요한 데이터를 찾을 수 있습니다.

• 문서 구조
• 문서 크기
• 레이어/폴더 크기 + 위치 지정
• 레이어/폴더 이름
• 레이어/폴더 가시성 및 불투명도
• 글꼴 데이터( psd-enginedata 를 통해 )
  • 텍스트 영역 내용
  • 글꼴 이름, 크기 및 색상
• 색상 모드 및 비트 심도
• 벡터 마스크 데이터
• 병합된 이미지 데이터
• 레이어 구성 요소

• A Variable Fonts Primer
• Google Fonts
• Getting the Most Out of Variable Fonts on Google Fonts | CSS-Tricks
• Variable Fonts for Developers
• Using CSS Custom Properties to Adjust Variable Font Weights in Dark Mode | CSS-Tricks¹

---

Footnotes

1. 다크모드에서 weight가 시각적으로 차이가 날수 있기때문에 그럴경우 변수로 분리해서 대응하는 방법 ↩

• 5 steps to faster web fonts /// Iain Bean
• How to Stop Lighthouse Complaining About Render Blocking Google Fonts | Codeboosh
• A Comprehensive Guide to Font Loading Strategies—zachleat.com
• How to avoid layout shifts caused by web fonts – Simon Hearne
• The Fastest Google Fonts – CSS Wizardry – Web Performance Optimisation
• Time to Say Goodbye to Google Fonts
• The Best Font Loading Strategies and How to Execute Them | CSS-Tricks

요약하자면

• woff2
• font-display로 레이아웃 이슈 최소화
• preload
• self (feat. google webfonts helper)

몇몇 권장사항은 한글 폰트에서는 사실상 불가능한 부분이라 가능한 부분들을 적용하면 된다.

자동완성 기능은 편리할수도 있지만 비활성화가 필요한 경우도 있다. 하지만 chrome에서 무시되는 경우가 있는데…이게 거의 된다 지금은 안된다…되는 것 같다…이렇게 변질이 되는 것 같다.

• html - Disabling Chrome Autofill - Stack Overflow¹
• Disabling autofill in Chrome | Codementor²
• How to turn off form autocompletion - Web security | MDN
• The Autofill Dark Pattern — Smashing Magazine

---

Footnotes

1. 가끔 들어가보면 여전히 진행중이다… ↩

2. 글쓴이는 결국 안되서 스크립트로 focus될때 readonly 속성으로 제어했다고 한다. ↩

autocomplete="one-time-code" 사용자가 SMS 메시지를 수신 할 때마다, 운영 체제는 SMS에서 OTP 구문을 분석하고 키보드는 OTP를 제안합니다. iOS, iPadOS 및 macOS의 Safari 12 이상에서만 작동하지만 해당 플랫폼에서 SMS OTP 환경을 쉽게 개선할 수 있는 방법이므로 사용하는 것이 좋습니다.

<input 
  type="text"
  inputmode="numeric"
  autocomplete="one-time-code"
  pattern="\d{6}"
  required
/>

const otp = await navigator.credentials.get({
  otp: {
    transport: ['sms']
  }
})

input.value = otp.code

참고

• SMS OTP form best practices
• Apple Developer Documentation
• HTML attributes to improve your users’ two factor authentication experience

::-webkit-input-placeholder /* for (Chrome/Safari/Opera) */
:-ms-input-placeholder /* for IE. */
::-ms-input-placeholder /* for Edge (also supports webkit prefix) */

::-ms-clear {}
::-ms-reveal {}

---

• On Edge Browser, how to change input placeholder text color using CSS?

스트리밍 비디오 다운로드 할 경우 403 에러가 발생할때 해당 옵션으로 우회한다.¹

youtube-dl --referer "URL" --user-agent "UA"

dmRef() {
  youtube-dl $1 --referer $1 --user-agent "UA"
}

---

Footnotes

1. https://www.reddit.com/r/youtubedl/comments/g342nr/masterm3u8_http_error_403_forbidden_youtubedl_or/ ↩

youtube-dl 업데이트가 안되면서 다운로드 속도가 굉장히 저조하다. 그래서 yt-dlp로 일단 변경해서 사용 중.

---

여러 개 주소를 한꺼번에 받으려면 주소를 txt 파일로 저장하고 -a(-a, --batch-file FILE) 옵션을 추가하면 된다.

youtube-dl -a list.txt

---

가끔 중간에 에러가 발생하는 경우도 있는데 이럴 경우 ignore로 방어 코드를 설정하고 실행시키면 잘 된다.

youtube-dl -i, --ignore-errors

---

자막을 다운로드해야 된다면 –sub-lang 옵션을 추가한다. 자동 자막이 필요하다면 --write-auto-sub

youtube-dl --write-sub --sub-lang ko
youtube-dl --write-auto-sub

---

playlist를 다운 받을때 index도 파일에 포함시키고 싶을 경우¹

-o '%(playlist)s/%(playlist_index)s - %(title)s.%(ext)s'

---

기본적으로 평소 사용하는 alias 설정

alias dm="youtube-dl"
alias da="youtube-dl -x --audio-format mp3"

---

Footnotes

1. https://github.com/ytdl-org/youtube-dl#output-template ↩

brew로 ffmpeg 설치할때¹

brew install ffmpeg $(brew options ffmpeg | grep -vE '\s' | grep -- --with-' | tr '\n' ' ')

---

Footnotes

1. brew install ffmpeg with all options ↩