πŸ—“ 2019.07.08 ~ 2019.07.14


πŸ“” λΈ”λ‘œκ·Έ

πŸ‡°πŸ‡· μš°μ•„ν•œν˜•μ œλ“€(λ°°λ‹¬μ˜λ―Όμ‘±)μ—μ„œ 5λ…„κ°„ λ‚΄κ°€ λ°°μš΄κ²ƒ

  • μš°μ•„ν•œν˜•μ œλ“€μ„ 5λ…„κ°„ λ‹€λ‹ˆμ‹œλ©΄μ„œ λ°°μš΄μ λ“€μ„ μ •λ¦¬ν•œ κΈ€.
  • λΉ„μ¦ˆλ‹ˆμŠ€, μž₯μ• , κΈ°μˆ λΆ€μ±„, κ°œλ°œλ¬Έν™”μ— λŒ€ν•΄ μ΄μ•ΌκΈ°ν•œλ‹€.
  • 짧은 글에 λͺ¨λ“  κ±Έ 담을 순 μ—†κ² μ§€λ§Œ, ν•œνŽΈμœΌλ‘œλŠ” 5λ…„μ΄λΌλŠ” κΈ΄μ‹œκ°„μ„ 짧은 글에 λ‹΄μ•„λƒˆκΈ° λ•Œλ¬Έμ— 더 진정성과 κΉŠμ΄κ°€ λŠκ»΄μ§€κΈ°λ„ ν•œλ‹€.

πŸ‡°πŸ‡· CSS Containment Module

  • 항상 μ›Ή κ΄€λ ¨ μ–‘μ§ˆμ˜ 글이 μ˜¬λΌμ˜€λŠ” NTS Blog. CSS Containment Module에 λŒ€ν•΄ μ„€λͺ…ν•œλ‹€.
  • CSS에 containμ΄λΌλŠ” μ†μ„±μœΌλ‘œ μ‚¬μš©ν•˜λŠ”λ° 이런 속성이 μžˆλŠ”μ§€λ„ 처음 μ•Œμ•˜λ‹€.
  • μ΅œμ ν™”μ— μ“°μ΄λŠ” 속성이라고 μ„€λͺ…λ˜μ–΄μžˆλŠ”λ°, contain: paint같은 속성은 μ„±λŠ₯ 외에 κ·Έλƒ₯ μ‚¬μš©ν•΄λ„ μœ μš©ν•΄λ³΄μΈλ‹€.

πŸ‡°πŸ‡· κ΅­λ‚΄ μŠ€νƒ€νŠΈμ—… κΈ°μ—…κ°€μΉ˜ Top 10을 μ•Œμ•„λ³΄μž

  • κ΅­λ‚΄ μŠ€νƒ€νŠΈμ—… κΈ°μ—…κ°€μΉ˜ Top 10 νšŒμ‚¬λ₯Ό ν•˜λ‚˜ν•˜λ‚˜ μžμ„Έν•˜κ²Œ 뢄석해놓은 κΈ€.
  • λΉ„μ¦ˆλ‹ˆμŠ€λŠ” 잘 λͺ¨λ₯΄μ§€λ§Œ μΌλ°˜μΈλ„ 정말 μ‰½κ²Œ 이해할 수 있게 쉽고 μžμ„Ένžˆ λΆ„μ„ν•΄λ†”μ„œ 재밌게 읽을 수 μžˆμ—ˆλ‹€.
  • 큰 곡톡점은 λͺ¨λ‘ κ°œλ°œλ¬Έν™”λ₯Ό μ€‘μš”μ‹œν•˜λŠ” ITνšŒμ‚¬λΌλŠ” 것.

πŸ“° λ‰΄μŠ€

πŸ‡°πŸ‡· μ΄μž¬μ›…λŒ€ν‘œ κ΄˜μ”Έμ£„,μ •λΆ€ κ²°κ΅­ νƒ€λ‹€λΆˆλ²• κ·œμ •,11μΌλ°œν‘œβ€˜700얡원내고 νƒμ‹œλ©΄ν—ˆμ‚¬λΌβ€™

  • μžμ£ΌλŠ” μ•„λ‹ˆμ§€λ§Œ 가끔 타닀λ₯Ό μ΄μš©ν•˜λŠ” 개인적인 μ†ŒλΉ„μžμž…μž₯μ—μ„œλŠ” 쑰금 μ•ˆνƒ€κΉŒμš΄ 기사.

πŸ‡°πŸ‡· μ• ν”Œ μ•±μŠ€ν† μ–΄, β€˜μΉ΄μΉ΄μ˜€νŽ˜μ΄ λ¨Έλ‹ˆβ€™λ‘œ κ²°μ œν•˜μ„Έμš”

  • μΉ΄μΉ΄μ˜€νŽ˜μ΄μ— μ•±μŠ€ν† μ–΄ κ²°μ œμ„œλΉ„μŠ€κ°€ 생겼닀. DCC(ν•΄μ™Έμ›ν™”κ²°μ œ)λ‚˜ μˆ˜μˆ˜λ£Œκ°€ μ—†λ‹€κ³  ν•œλ‹€.
  • κ΅¬λ…ν•˜κ³  μžˆλŠ” μ• ν”Œ μ•±, μ„œλΉ„μŠ€κ°€ λͺ‡ κ°œμžˆμ–΄μ„œ λ°”λ‘œ λ“±λ‘ν–ˆλ‹€.

πŸ“Ή μ˜μƒ

πŸ‡ΊπŸ‡Έ CSSconf EU 2019 | Manuel Rego: Improving Website Performance with CSS Containment - [JSCONF]

  • μœ„ NTS λΈ”λ‘œκ·Έ κΈ€μ—μ„œ μ†Œκ°œν•œ CSS Containment Moduleκ³Ό κ΄€λ ¨λœ CSSCONF EU 2019 μ˜μƒ.
  • 거의 λΉ„μŠ·ν•œ λ‚΄μš©μœΌλ‘œ λ°œν‘œν•œλ‹€.

πŸ‡ΊπŸ‡Έ Benjamin De Cock | Motion & Playfulness | UX Special, CSS Day 2018 - [Web Conferences Amsterdam]

  • Stripe의 UI Designerκ°€ 2018λ…„ μ•”μŠ€ν…Œλ₯΄λ‹΄ CSS dayμ—μ„œν•œ λ°œν‘œμ˜μƒ.
  • UX에 λŒ€ν•΄ Design, Development 두 가지 κ΄€μ μ—μ„œ μ΄μ•ΌκΈ°ν•œλ‹€.
  • StripeλŠ” ν™ˆνŽ˜μ΄μ§€λ§Œ 듀어가봐도 정말 UX/UIλ₯Ό μž˜λ§Œλ“ λ‹€κ³  μƒκ°λ˜λŠ”λ°, UX, Motion, Interaction에 관심이 λ§Žλ‹€λ©΄ 정말 μΆ”μ²œν•˜λŠ” μ˜μƒ.

πŸ’» μ˜€ν”ˆμ†ŒμŠ€

motion

  • framerμ—μ„œ motionμ΄λΌλŠ” React μ• λ‹ˆλ©”μ΄μ…˜ 라이브러리λ₯Ό κ³΅κ°œν–ˆλ‹€.
  • react-spring, react-motion, pose λ“± μ• λ‹ˆλ©”μ΄μ…˜ λΌμ΄λΈŒλŸ¬λ¦¬κ°€ 정말 λ§Žμ€λ°, GameChangerκ°€ 될 수 μžˆμ„κΉŒ.

πŸ”— κ·Έ μ™Έ μœ μš©ν•œ 링크

🎨 brizy.cloud

  • 블둝 Drag & Drop 방식 λžœλ”©νŽ˜μ΄μ§€ λΉŒλ”. 7μ›” 1일 ProductHunt 1μœ„μ— μ˜¬λžλ‹€.
  • μ›Ή κ°œλ°œμ„ ν•˜λŠ” μž…μž₯μ—μ„œ 이런 GUI Drag & Drop λ°©μ‹μ˜ μ›Ήμ‚¬μ΄νŠΈ λΉŒλ”λŠ” λ³„λ‘œ 달갑지 μ•Šμ§€λ§Œ, 이건 μ§€κΈˆκΉŒμ§€ 봀던 νŽ˜μ΄μ§€λΉŒλ” 쀑에 제일 μ“Έλ§Œν–ˆλ‹€.
  • κ°„λ‹¨ν•œ λžœλ”©νŽ˜μ΄μ§€λŠ” 1뢄이면 νšŒμ›κ°€μž…λ„ ν•„μš”μ—†μ΄ 배포된 web previewκΉŒμ§€ 확인가λŠ₯ν•˜λ‹€. 해컀톀 λ“±μ—μ„œ 써먹어도 μœ μš©ν•΄λ³΄μΈλ‹€.

πŸ“Š kepler.gl

  • μš°λ²„ λ°μ΄ν„°νŒ€μ—μ„œ λ§Œλ“  location data μ‹œκ°ν™” & λΆ„μ„νˆ΄.
  • μ‚¬μ΄νŠΈ μ•„λž˜μͺ½μ— μœ μ €λ“€μ΄ μ‹œκ°ν™”ν•΄λ†“μ€ Demo νŽ˜μ΄μ§€λ§Œ 듀어가봐도 μ—„μ²­λ‚˜λ‹€.

🎨 surfit.io

  • λ””μžμ΄λ„ˆλ₯Ό μœ„ν•œ μƒˆνƒ­ μ‹œμž‘νŽ˜μ΄μ§€ 크둬 μ΅μŠ€ν…μ…˜.

πŸ‡°πŸ‡· noonnu.cc

  • μžμ‹ μ˜ μ‚¬μ΄λ“œν”„λ‘œμ νŠΈλ₯Ό μ†Œκ°œν•˜λŠ” λͺ¨λ‘μ˜ TOY STORYλΌλŠ” ν–‰μ‚¬μ—μ„œ μŠ€νƒœν”„ν™œλ™μ„ ν–ˆλŠ”λ°, μ—¬κΈ°μ„œ λˆˆλˆ„λΌλŠ” μ‚¬μ΄λ“œν”„λ‘œμ νŠΈλ₯Ό μ•Œκ²Œλ˜μ—ˆλ‹€.
  • μƒμ—…μš© λ¬΄λ£Œν•œκΈ€ν°νŠΈλ₯Ό λͺ¨μ•„μ„œ λ³΄μ—¬μ£ΌλŠ” μ‚¬μ΄νŠΈ.
  • 항상 ν•œκΈ€ν°νŠΈλ₯Ό 잘 λͺ»κ³¨λΌμ„œ κ³ λ―Όν–ˆμ—ˆλŠ”λ°, μœ μš©ν•˜κ²Œ μ‚¬μš©ν•  수 μžˆμ„ 것 κ°™λ‹€.
  • ν•œ 가지 μ•„μ‰¬μš΄ 점은 κ΅¬κΈ€ν°νŠΈμ²˜λŸΌ μ‚¬μ΄νŠΈλ₯Ό λ– λ‚˜μ§€ μ•Šκ³  λ°”λ‘œ λ‹€μš΄λ°›μ„ 수 있으면 쒋을 것 같은데 ν•΄λ‹Ή ν°νŠΈκ³΅μ‹μ‚¬μ΄νŠΈλ‘œ 링크만 κ±Έλ €μžˆλ‹€.