메모 24페이지

요약하자면

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

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

#font

#172생성됨: 2022년 4월 9일 토요일

📎

CSS fonts

developer.mozilla.org

폰트 만들기

prefers-reduced-data 가능하다면 ↩
특정 문자 변경하기 ↩
텍스트 스타일 ↩
로컬 폰트 감지를 위한 ↩
leading-trim — 글꼴이 갖고 있는 여분 공백 제거 (제안 단계) ↩
목적에 따라 글꼴 고르는 법 ↩
font-variant-numeric — 숫자·분수·서수의 대체 글리프 제어 ↩

#font #text #css

#171생성됨: 2022년 4월 9일 토요일

📎

Proxy

developer.mozilla.org

요청 본문을 누가 미리 읽었나 — 읽기 메서드를 Proxy 로 감싸 찾기

Reflect

form 예제가 같이 첨부 되서 좀 더 이해하기 쉽다. 그리고 결론부분에 어느정도 공감되는게 (서비스 개발자 입장에서는) proxy의 장점을 끌어내는게 쉽지 않을 것 같다. ↩
그래도 최대한 리얼월드스러운 예제코드들 ↩
이 글은 좀 더 스펙에 대한 설명을 같이 첨부 ↩
getters/setters에서 proxy를 사용해 코드를 변환하는 과정을 설명해주고 있다. ↩

#javascript #proxy #reflect

#169생성됨: 2022년 4월 9일 토요일

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

가끔 들어가보면 여전히 진행중이다… ↩
글쓴이는 결국 안되서 스크립트로 focus될때 readonly 속성으로 제어했다고 한다. ↩

#autofill #html

#168생성됨: 2022년 4월 9일 토요일

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

참고

#input #otp

#167생성됨: 2022년 4월 9일 토요일

::-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?

#input #css

#166생성됨: 2022년 4월 9일 토요일

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

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

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

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

#youtube-dl #zsh

#164생성됨: 2022년 4월 9일 토요일

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"

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

#youtube-dl

#163생성됨: 2022년 4월 9일 토요일

connect가 실행된 컴포넌트를 (enzyme) mount로 테스트한 경우 실패 케이스가 발생해서 찾아본 내용들 인 것 같은데 정확하게 기억이 안남. shallow로 변경했더니 이번에는 ref를 못쓰는 문제도 있었다고 하고… 여담이지만 컴포넌트를 명확하게 정의하고 분리해서 테스팅 스트레스를 줄이는 게 중요합니다.

#test

#161생성됨: 2022년 4월 9일 토요일

Google Optimize는 2023년 9월 30일 종료됐다¹ — 아래 Optimize 링크 둘은 살아 있지 않다. 남는 건 서비스가 아니라 교훈이다: 리다이렉트에서 query를 갈아끼우면 그 query에 실려 있던 측정 정보가 사라진다.

Google Optimize에서 Redirect 테스트를 진행했는데 기능 구현은 문제없는데 세션수가 안 잡히는 문제가 발생했다.

이번에 문제되었던 부분은 query 처리를 인지하지 못했던 점이었다. Optimize에서 redirect 처리가 이루어질 때 query에 정보(예. utm_expid)들이 추가되는데 리다이렉트 url 변경하는 부분이 있었고 optimize에서 참조되어야 할 query를 날려버리면서 측정이 불가능했던 것. 결국 replace 실행 코드를 이전 query를 assign 시켜주도록 변경해서 해결.

여담이지만 Charles를 사용하고 있어서 배포 없이 테스트 가능했던 점도 같이 메모.

Google Optimize sunset ↩

#optimize #charles

#160생성됨: 2022년 4월 9일 토요일

Footnotes

Footnotes

Footnotes

Footnotes

Footnotes

Footnotes