메모 13페이지

html

<head />

🤯 HEAD - A simple guide to HTML <head> elements

구조화된 데이터

lang

The lang attribute: browsers telling lies, telling sweet little lies - Manuel Matuzović

favicon

Microdata

Getting Started - schema.org

attributes

HTML attributes vs DOM properties - JakeArchibald.com

HTML for People

다양한 관점에서 파비콘을 분석한 글 ↩

#html #bookmarks

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

Under-Engineered Select Menus | Adrian Roselli

font, letter-spacing, word-spacing 상속
appearance 화살표 수정
상태(focus, required, invalid)에 따른 스타일 추가

#select #css

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

Building a multi-select component

다중 선택 UI를 구현하기위해서 checkbox, select 두가지 방법으로 작업하는 방식을 소개하고 있다. 그외 선택된 상태값을 얻기위한 counter() 함수, 모바일 체크를 위한 미디어쿼리도 알려주고 있다.

aside {
  counter-reset: filters;

  & :checked {
    counter-increment: filters;
  }

  &::after {
    content: counter(filters);
  }
}

@media (pointer: coarse) {
  //
}

#select #css #ui stackblitz.com

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

디자인 된 <select />에 placeholder 개념이 있어서 어떻게 하면 좋을지 찾아봤다. 간략하게 설명하자면 선택이 불가능하게 disabled 추가하고 hidden으로 숨김 마지막으로 selected로 디폴트값을 처리하면 완성.

function Select({ placeholder, children }) {
  return (
    <select>
      <option value="" disabled hidden selected>
        {placeholder}
      </option>
      {children}
    </select>
  )
}

How do I make a placeholder for a ‘select’ box?

#html #select

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

매니페스트 V3로 마이그레이션¹

host_permissions으로 분리
action으로 통합(두군데 수정이 필요하다)

https://github.com/cbcruk/webext/commit/cbb36355871fb36d5f6c21752aae3400d2a97abf#diff-0f354ef5fd807996fa3f5a7a83ceb74025aa8f85862e321b8938988031e99711L3-L25 ↩

#extensions

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

TIL — The power of JSON.stringify replacer parameter | pawelgrzybek.com

JSON.stringify(dude, (key, value) =>
  value instanceof Set ? [...value] : value
);
JSON.stringify(dude, null, "🍆");

#json

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

function getTiltedHeight(angle) {
  const a = 100;
  const A = 90 - angle;
  
  const c = a / Math.sin(Math.PI * A / 180);
  const b = Math.sqrt(Math.pow(c, 2) - Math.pow(a, 2));
  
  return `${Math.abs(b)}%`;
}