자동완성 기능은 편리할수도 있지만 비활성화가 필요한 경우도 있다. 하지만 chrome에서 무시되는 경우가 있는데…이게 거의 된다 지금은 안된다…되는 것 같다…이렇게 변질이 되는 것 같다.
- html - Disabling Chrome Autofill - Stack Overflow1
- Disabling autofill in Chrome | Codementor2
- How to turn off form autocompletion - Web security | MDN
- The Autofill Dark Pattern — Smashing Magazine
Footnotes
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
참고
::-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 {}
스트리밍 비디오 다운로드 할 경우 403 에러가 발생할때 해당 옵션으로 우회한다.1
youtube-dl --referer "URL" --user-agent "UA"
dmRef() {
youtube-dl $1 --referer $1 --user-agent "UA"
}
Footnotes
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도 파일에 포함시키고 싶을 경우1
-o '%(playlist)s/%(playlist_index)s - %(title)s.%(ext)s'
기본적으로 평소 사용하는 alias 설정
alias dm="youtube-dl"
alias da="youtube-dl -x --audio-format mp3"
Footnotes
brew로 ffmpeg 설치할때1
brew install ffmpeg $(brew options ffmpeg | grep -vE '\s' | grep -- --with-' | tr '\n' ' ')
Footnotes
connect가 실행된 컴포넌트를 (enzyme) mount로 테스트한 경우 실패 케이스가 발생해서 찾아본 내용들 인 것 같은데 정확하게 기억이 안남. shallow로 변경했더니 이번에는 ref를 못쓰는 문제도 있었다고 하고…
여담이지만 컴포넌트를 명확하게 정의하고 분리해서 테스팅 스트레스를 줄이는 게 중요합니다.
Google Optimize에서 Redirect 테스트를 진행했는데 기능 구현은 문제없는데 세션수가 안 잡히는 문제가 발생했다.
이번에 문제되었던 부분은 query 처리를 인지하지 못했던 점이었다. Optimize에서 redirect 처리가 이루어질 때 query에 정보(예. utm_expid)들이 추가되는데 리다이렉트 url 변경하는 부분이 있었고 optimize에서 참조되어야 할 query를 날려버리면서 측정이 불가능했던 것. 결국 replace 실행 코드를 이전 query를 assign 시켜주도록 변경해서 해결.
여담이지만 Charles를 사용하고 있어서 배포 없이 테스트 가능했던 점도 같이 메모.
import isAfter from 'date-fns/isAfter';
isAfter(new Date(), new Date(DATE))
날짜 비교 할 일이 있어서 별 생각 없이 new Date를 때렸는데 safari에서 안되는 문제가 발견되었다. 콘솔을 확인해보니 yyyy-MM-dd HH:mm:ss 해당 형태의 포멧 에서는 안된다. 평소에 new Date 보다는 moment나 date-fns같은 라이브러리를 당연하게 써오다 보니 몰랐다. 그런데 또 다른 생각을 해보자면 저런 문제가 있기 때문에 더 적극적으로 라이브러리를 사용해야 한다는 게 함정.
import isAfter from 'date-fns/isAfter';
import format from 'date-fns/format';
isAfter(new Date(), format(DATE))
live2d 구현이 필요할 경우 pixi+plugin을 사용하면 된다