약간 그... caniuse 느낌으로 보여준다. kangax github io_compat-table_es2016plus_

tailwind 👍2023. 6. 20.

panda-css를 시험삼아 함 써보던 중에 쓰면서는 인식하지 못하고 있던 tailwind의 장점을 알게 됐다.

tailwind로 작성되어 있던 코드를 바꿔봤는데: FzEqR1KaEAAxoFf 오른쪽의 형태가 되는 순간 어 이건 좀... 싶어지면서 아래의 두가지를 비로소 인식하게 되었다.

styled-components/emotion 처럼 css syntax를 쓰던지 stitches 처럼 js object syntax를 쓰던지 상관없이 스타일링 관련 코드는 무조건 세로 방향/2차원으로 코드 면적이 늘어나게 된다는 점.
key: value의 형태 때문에 반복하게 되는 타이핑량 + 시각적 스트레스가 있다는 점.

그러나 tailwind는:

코드가 가로/1차원으로만 늘어나고,
value만 줄줄이 넣는 식.

이라 1,2로 알게 모르게 느끼고 있던 스트레스가 해결되고 있었다는 걸 알게 되었고 결론은 tailwind가 선택지에 있으면 나는 tailwind를 쓸 것 같다는 뭐 그런 얘기.

추가:

이게 코드량/면적의 문제도 있지만 스타일링 관련 코드가 다른 코드랑 '생긴게' 아예 달라진다는 점.
스타일링 관련 코드가 className="..."에 '격리' 된다는 점.

을 또 들 수 있을 것 같다.

위에 나열한 요소들이 중요하게 느껴지는 건 아무래도 시각적으로 인지 부하가 줄어들기 때문인 것 같고.

css tailwind panda css

tailwind에서 pseudo 머시기 쓰기2023. 6. 18.

css	tailwind(modifier)
`:first-child`	`first:`
`:first-of-type`	`first-of-type:`
`:only-child`	`only:`
`:nth-child(odd)`	`odd:`
`:after`	`after:`

`group`, `peer`

추가로 지원하고 있는 기능이 있는데,

`group`

parent의 상태를 child가 쓸 수 있도록 함.

예)

<a href="#" class="group">
              <!-- ^^^^^ parent에서 `group`을 선언하고 나서 -->
  <div class="flex items-center space-x-3">
    <svg class="group-hover:stroke-white" fill="none" viewBox="0 0 24 24"><!-- ... --></svg>
          <!-- ^^^^^^^^^^^^^^^^^^^^^^^^ parent의 상태를 child 스타일링에 쓸 수 잇음 -->
  </div>
</a>

<a href="#" class="group">
              <!-- ^^^^^ parent에서 `group`을 선언하고 나서 -->
  <div class="flex items-center space-x-3">
    <svg class="group-hover:stroke-white" fill="none" viewBox="0 0 24 24"><!-- ... --></svg>
          <!-- ^^^^^^^^^^^^^^^^^^^^^^^^ parent의 상태를 child 스타일링에 쓸 수 잇음 -->
  </div>
</a>

`peer`

자신의 상태를 sibling이 쓸 수 있도록 함.

<form>
  <label class="block">
    <input type="email" class="peer ..."/>
                          <!-- ^^^^ 여기서 선언하면 -->
    <p class="mt-2 invisible peer-invalid:visible text-pink-600 text-sm">
                        <!-- ^^^^^^^^^^^^^^^^^^^^ 이렇게 sibling이 쓸 수 있음 -->
      Please provide a valid email address.
    </p>
  </label>
</form>

<form>
  <label class="block">
    <input type="email" class="peer ..."/>
                          <!-- ^^^^ 여기서 선언하면 -->
    <p class="mt-2 invisible peer-invalid:visible text-pink-600 text-sm">
                        <!-- ^^^^^^^^^^^^^^^^^^^^ 이렇게 sibling이 쓸 수 있음 -->
      Please provide a valid email address.
    </p>
  </label>
</form>

주의) peer-{modifier}는 peer의 prev 가 아니라 next sibling이 쓸 수 있음

Ref

Quick reference

css tailwind

Motivation2023. 6. 16.

신경과학적으로 'Liking'에 연관된 기관과 'Wanting'에 연관된 기관은 따로라고 한다.
어떤 행위를 했을 때 좋다고 느낀다고 그걸 하고 싶어지는 것은 아닌 것이 그 때문.
예) 어쩌다 간만에 운동을 하고 '아 역시 좋군' 한다고 다음날 아침에 '와! 어서 피트니스 센터에 가고 싶군!' 이 되지 않음
'Wanting' 관련 기관은 21세기의 도파민 폭탄들 때문에 맛이 가있을 확률이 높고, 그래서 현대인은 대부분 Liking/Wanting 싱크가 더 안맞고 있을 확률이 ⬆️
그리고 뇌는 어떤 행위를 하기 전에 그것에 드는 인풋과 돌아올 보상의 수지 타산을 늘 계산하는데, 우선 순위가 저인풋고보상>저인풋저보상>고인풋고보상>고인풋저보상 이라고.
대부분의 의미 있는 일은 고인풋 고보상이라 늘 우선 순위에서 밀리게 마련이고 그래서 의욕이 생기지 않는 것이라고.
그러나 '왜 나는 의욕이 없지?', '보조제를 먹어야 되나?', '스터디 모임을 만들어야 되나?' 등과 같이 '집나간 의욕을 어떻게 찾아올까'는 실패할 확률이 더 높다.
그보다 성공률이 높은 건 의욕 유무를 실행 조건에서 빼는 것.
'해야 되는데 하고 싶지 않으니 의욕을 만들어서 한다'가 아니라 '해야 되니까 그냥 한다'가 훨씬 효과적이라고.

Refs

https://coaching.healthygamer.gg/guide/lessons/neuroscience-of-motivation

mind mental health

JavaScript 1.2 Reference2023. 6. 15.

나는 분명히 rsc 글을 쓰던 중이었는데
어쩌다보니 초창기 js 코드는 어떻게 생겼었을까 궁금해져서
검색도 해보고 gpt한테 물어도 보고 했는데 적절한 결과를 얻을 수 없었는데
그러다 아 초기 문서를 찾아보면 되겠구나 하는 생각이 들어 찾아보니
JavaScript 1.2 Reference 가 있었다

"10/31/97" ☜ 간지 난다...

wayback machine에 아카이빙된 오리지널 링크도 있었다.

javascript history

`for (; amount--; )`2023. 6. 15.

react-scrollbars-custom의 예제를 보다가 충격적인 걸 봐갖고

export function renderAmountOfParagraphs(amount = 5, paragraphsProps) {
  const result = [];

  for (; amount--; ) { // ??
    result.push(
      <p {...paragraphsProps} className="ExampleCard-Paragraph" key={`paragraph_${amount}`}>
        {getRandomParagraphText()}
      </p>
    );
  }

  return result;
}

export function renderAmountOfParagraphs(amount = 5, paragraphsProps) {
  const result = [];

  for (; amount--; ) { // ??
    result.push(
      <p {...paragraphsProps} className="ExampleCard-Paragraph" key={`paragraph_${amount}`}>
        {getRandomParagraphText()}
      </p>
    );
  }

  return result;
}

  for (; amount--; ) {

  for (; amount--; ) {

?? 🤯

mdn의 for 관련 문서를 보니

All three expressions in the head of the for loop are optional. For example, it is not required to use the initialization block to initialize variables

🤯🤯

이 외에도 충격적인 게 더 있었는데:

Using for without a body

🤯🤯🤯

Using for with two iterating variables

🤯🤯🤯🤯

javascript

`column-count`2023. 6. 14.

이력서를 리액트 컴포넌트로 작성하다가 2단 처리를 어떻게 해야 되나 싶어서 알아보니 column-count 라는 프로퍼티가 있었고,

column-count: 2;

column-count: 2;

하면 되는 것이었다...

column-count: <number>;

column-count: <number>;

기본적으로 위와 같이 쓰면 되고, 이런 저런 관련 프로퍼티가 있는데,

`column-width`

column-count: auto;
column-width: 8rem;

column-count: auto;
column-width: 8rem;

content 분량에 따라 8rem width에 맞춰 자동으로 채워진다.

`column-fill`

column-fill: auto;
column-fill: balance;

column-fill: auto;
column-fill: balance;

auto: 일반적으로 기대되는 분량에 따라 채워지는 동작
balance: column-count에 지정된 대로 content를 나누어 각 column에 배치

`column-gap`

ㅇㅇ 그것임

`column-rule`

규칙인가? 싶지만 그게 아니고 각 컬럼 사이에 라인을 그어준다.

column-rule: dotted;
column-rule: solid 8px;
column-rule: solid blue;
column-rule: thick inset blue;

column-rule: dotted;
column-rule: solid 8px;
column-rule: solid blue;
column-rule: thick inset blue;

이런 느낌.

`column-span`

특정 요소가 cols 사이를 가로지르게 만들 수 있다. 아래는 mdn의 예시.

css

Colors2023. 6. 13.

JS yellow: #F0DC4E TC39 orange: #FC7C00 npm red: #EA2039

trivia

Custom Nerd Fonts2023. 6. 10.

nvim등 터미널 환경에선 nerd fonts(기존 폰트에 아이콘 등 각종 UI용 문자를 추가한 폰트)를 쓰는 게 편한데 유료 폰트이거나 폰트 취향이 너무 마이너인 경우 직접 만들써야 함. 귀찮아서 한동안 걍 Iosevka 쓰다가 어제 잠깐 의욕이 생겨서 알아보니 같은 곳에서 제공하는 Font Patcher를 사용하면 되는 것이었고, 이런저런 실행 방법을 제공하는데 그 중 docker로 하는게 젤 간단했음.

docker run --rm \
    -v /path/to/original/font:/in \
    -v /path/to/patched/font:/out \
    nerdfonts/patcher \
    --progressbars \
    --adjust-line-height \
    --fontawesome \
    --fontawesomeextension \
    --fontlogos \
    --octicons \
    --codicons \
    --powersymbols \
    --pomicons \
    --powerline \
    --powerlineextra \
    --material \
    --weather

docker run --rm \
    -v /path/to/original/font:/in \
    -v /path/to/patched/font:/out \
    nerdfonts/patcher \
    --progressbars \
    --adjust-line-height \
    --fontawesome \
    --fontawesomeextension \
    --fontlogos \
    --octicons \
    --codicons \
    --powersymbols \
    --pomicons \
    --powerline \
    --powerlineextra \
    --material \
    --weather

위의 /path/to/original/font, /path/to/patched/font는 폴더이고 original의 경우 그 안에 폰트 파일이 들어있으면 된다. 작업이 완료되면 patched 폴더 안에 생성된 폰트 파일을 설치해서 쓰면 됨.

Before: Before

After: After

Links

terminal font nerd fonts nvim

Track Awesome Eslint Updates Daily2023. 6. 10.

www | feed

eslint

1 2 3 4 5 6 7 8 9 10 11 12 13

notes

EcmaScript 업데이트 상황 편하게 보기2023. 6. 21.

tailwind 👍2023. 6. 20.

tailwind에서 pseudo 머시기 쓰기2023. 6. 18.

`group`, `peer`

`group`

`peer`

Ref

Motivation2023. 6. 16.

Refs

JavaScript 1.2 Reference2023. 6. 15.

`for (; amount--; )`2023. 6. 15.

`column-count`2023. 6. 14.

`column-width`

`column-fill`

`column-gap`

`column-rule`

`column-span`

Colors2023. 6. 13.

Custom Nerd Fonts2023. 6. 10.

Links

Track Awesome Eslint Updates Daily2023. 6. 10.

Tags

notes

EcmaScript 업데이트 상황 편하게 보기2023. 6. 21.

tailwind 👍2023. 6. 20.

tailwind에서 pseudo 머시기 쓰기2023. 6. 18.

group, peer

group

peer

Ref

Motivation2023. 6. 16.

Refs

JavaScript 1.2 Reference2023. 6. 15.

`for (; amount--; )`2023. 6. 15.

`column-count`2023. 6. 14.

column-width

column-fill

column-gap

column-rule

column-span

Colors2023. 6. 13.

Custom Nerd Fonts2023. 6. 10.

Links

Track Awesome Eslint Updates Daily2023. 6. 10.

Tags

`group`, `peer`

`group`

`peer`

`column-width`

`column-fill`

`column-gap`

`column-rule`

`column-span`