<div
dangerouslySetInnerHTML={{
__html: `
<img src="http://unsplash.it/100/100?random" onload="console.log('you got hacked');" />
`,
}}
/>
가끔 아주 가끔 이상한 일을 해야할때가 있는데 그럴때는 이렇게 하면 된다.
const obj = {
a: 1,
b: 2,
}
console.log(obj[['a']]) // 1
console.log(obj[['b']]) // 2
이게 되네 🤔
# .gitignore가 규칙이 적용되지 않을때
git rm -rf --cached .
git add .
GitHub - meltingice/psd.js: A Photoshop PSD file parser for NodeJS and browsers
psd 파서. 이를 통해 관리 가능한 트리 구조에서 Photoshop 문서로 작업하고 다음과 같은 중요한 데이터를 찾을 수 있습니다.
- 문서 구조
- 문서 크기
- 레이어/폴더 크기 + 위치 지정
- 레이어/폴더 이름
- 레이어/폴더 가시성 및 불투명도
- 글꼴 데이터( psd-enginedata 를 통해 )
- 텍스트 영역 내용
- 글꼴 이름, 크기 및 색상
- 색상 모드 및 비트 심도
- 벡터 마스크 데이터
- 병합된 이미지 데이터
- 레이어 구성 요소
가변 글꼴은 진보된 OpenType 사양입니다. CSS를 사용할때 가짜 굵기 또는 기울임꼴과 같은 브라우저 왜곡 에 대해 걱정하지 않고 단일 글꼴 파일에 포함된 모든 스타일에 액세스할 수 있습니다.
이전에는 여러 스타일을 사용한다는 것은 모든 너비, 두께 또는 기울임꼴에 대해 하나씩 여러 파일을 로드하는 것을 의미했습니다. 이로 인해 디자인 표현력(사용된 글꼴 수)과 웹사이트 성능(다운로드할 데이터의 양) 사이에 긴장감이 생겼습니다. 가변 글꼴을 사용하면 전체 방정식이 변경됩니다.
- 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-Tricks1
Footnotes
-
다크모드에서 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 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 {}