import {
  addDays,
  addMonths,
  eachDayOfInterval,
  eachWeekOfInterval,
  startOfMonth,
} from 'date-fns'

const startOfMonthDate = startOfMonth(new Date())
const matrix = eachWeekOfInterval({
  start: startOfMonthDate,
  end: addMonths(startOfMonthDate, 1),
}).map((weekDay) => {
  const startDate = new Date(weekDay)

  return eachDayOfInterval({
    start: startDate,
    end: addDays(startDate, 6),
  })
})
#calendar#date
#29

Footnotes

  1. headless 모드가 있으면 좋을 것 같은데 찾기 어렵다. 이런게 있다…정도로만 생각하자. 실제 갖다 써보면 뭔말인지 알 수 있을거다. ↩

  2. 네이티브로 날짜 계산(?)을 구현하려면 참고 ↩

#calendar#ui#date
#28
ffmpeg -framerate 25 -i image_%1d.png -c:v libvpx-vp9 -pix_fmt yuva420p output.webm

단점

  • 두벌로 인코딩 작업을 해야한다. MacOS가 아닐경우 번거로운 부분이 존재한다.
  • 브라우저 지원이 애매하게 걸친 부분이 존재한다.
  • (개인적인 느낌) 사이즈가 커졌을 경우 프레임 드랍이 있다.

…그래서 어차피 안되는거 새로운 도전을 해보고 싶어서 크로마키 효과를 떠올렸다. sharp로 이미지 배경을 green 컬러로 채우고 그 이미지들을 합쳐서 동영상으로 변환. 그리고 canvas에 그리고 색상을 추출해서 green값을 alpha값으로 변환하면 완벽하지 않을까 싶었는데 겹치는 영역을 전혀 생각못했다. 이부분은 뭔가 특정 알고리즘이 있는 것 같은데 그냥 단순히 근사치3로 적용했을때 결과물이 완벽하지는 않다.

Footnotes

  1. 여기서는 좀 더 나아가서 ffmpeg으로 드로잉 하는 부분까지 알려주고 있다. ↩

  2. WebGL ↩

  3. javascript - How to accurately filter RGB value for chroma-key effect - Stack Overflow ↩

  4. 기본 배경지식을 설명하고 있다. video->canvas ↩

  5. hsv로 색상값을 체크하는 방법을 알려주고 있다. 그리고 해당 연산은 worker로 따로 분리해서 처리. ↩

  6. canvas 에서 색상값을 체크해서 필터 기능을 구현하고 머신러닝으로 모션탐지 기능구현이 가능하다는 예제를 보여준다. ↩

#video#ffmpeg#canvas
#27

데이터 시각화, 교육 목적 또는 단순한 재미를 위해 자신만의 대화형 지구본을 구축하는 데 관심이 있는 모든 사람에게 도움이 될 수 있습니다. 그들은 지구본을 만들기 위한 다양한 접근 방식과 기술을 보여주고 지구본 데이터로 작업할 때의 문제와 기회에 대한 귀중한 통찰력을 제공합니다.

Footnotes

  1. WebGL과 Three.js를 사용하여 지구본을 렌더링하고 Mapbox를 사용하여 데이터를 표시하는 지구본을 디자인하고 개발하는 과정을 설명합니다. ↩

  2. GitHub 팀이 전 세계 GitHub 사용자의 위치를 보여주는 대화형 지구본을 구축한 방법을 설명합니다. 이 게시물은 WebGL 및 d3-geo 라이브러리를 사용하여 시각화를 생성하는 지구본 구축의 기술적 문제에 대해 자세히 설명합니다. ↩

  3. Gatsby 서버리스 기능을 사용하여 국제 우주 정거장(ISS)의 위치를 추적하는 대화형 지구본을 구축하는 방법에 대해 설명합니다. 이 기사는 ISS의 위치를 표시하기 위해 Three.js 및 satellite.js를 사용하는 지구본 구축의 기술적 세부 사항을 다룹니다. ↩

  4. 개발자가 자신만의 대화형 지구본을 만들 수 있는 경량 WebGL 지구본 라이브러리입니다. ↩

#globe#webgl
#24

다음은 Raspberry Pi를 사용하여 날씨 정보를 표시하는 프로젝트의 두 가지 예입니다. 이 두 프로젝트 모두 Raspberry Pi를 사용하여 날씨 표시 또는 날씨 앱을 만드는 방법을 보여줍니다. 또한 Python 스크립트 또는 웹 기반 애플리케이션을 사용하여 날씨 데이터를 가져오고 표시하는 다양한 방법을 보여줍니다. 이 프로젝트는 Raspberry Pi를 사용하여 자신만의 날씨 디스플레이 또는 앱을 구축하는 데 관심이 있는 모든 사람에게 좋은 출발점이 될 수 있습니다.1

Footnotes

  1. https://weather-mu.vercel.app/ ↩

  2. 작은 화면에 현재 시간과 시간별 일기 예보를 표시하는 프로젝트입니다. 이 프로젝트는 Raspberry Pi Zero W와 1.3인치 OLED 디스플레이를 사용하며 OpenWeatherMap API에서 날씨 데이터를 가져와 화면에 표시하는 Python 스크립트로 구동됩니다. ↩

  3. Preact, Netlify Functions를 사용하여 OpenWeatherMap API에서 날씨 데이터를 가져옵니다. ↩

#raspberry_pi
#23

Debouncing and Throttling Explained Through Examples | CSS-Tricks1

  • throttle: 함수가 호출되는 속도를 제한 (일정시간 동안)
  • debounce: 추가 호출 없이 일정 시간이 경과할 때까지 함수 실행을 지연하거나 제한 (마지막 이벤트만)

Footnotes

  1. 검색 입력, 스크롤 이벤트, 크기 조정 이벤트 등 디바운싱과 스로틀링이 유용할 수 있는 사례들 ↩

#throttle#debounce#lodash#event#ui
#22

드래그 앤 드롭 기능이나 위지윅 편집기를 사용하여 사용자 인터페이스와 레이아웃을 구축하기 위한 도구와 라이브러리입니다. 이러한 도구는 수동으로 코드를 작성하지 않고도 복잡한 UI 디자인과 레이아웃을 만드는 과정을 간소화하는 것을 목표로 합니다.

Footnotes

  1. 랜딩 페이지, 마케팅 사이트, 전자상거래 스토어를 만들 수 있는 드래그 앤 드롭 빌더 ↩

  2. 직관적인 UI로 복잡한 반응형 레이아웃, 프로토타입 및 랜딩 페이지를 제작 ↩

  3. React 기반 비주얼 에디터 ↩

  4. 반응형 디자인을 만들고 자동으로 코드를 생성 ↩

  5. 실시간 피드백을 통해 UI 컴포넌트를 빌드할 수 있는 React 기반 비주얼 에디터 ↩

  6. React 및 ImmutableJS를 사용하여 반응형 UI 레이아웃을 만들기 위한 오픈 소스 드래그 앤 드롭 레이아웃 빌더입니다. ↩

#ui#builder#dnd
#21

계산기 응용 프로그램의 다양한 측면을 설명합니다.

Footnotes

  1. 사용자가 평범한 문장을 사용하여 계산을 수행할 수 있는 고유한 인터페이스가 있는 계산기 응용 프로그램인 Soulver를 만든 방법을 알려주는 내용. 제작자가 직면한 어려움과 Soulver를 돋보이게 하는 기능에 대해 설명합니다. ↩

  2. 계산기 응용 프로그램의 설계 원칙에 대해 설명합니다. 다양한 유형의 계산기와 사용자 친화적인 계산기 앱을 만드는 핵심 디자인 요소에 대한 자신의 생각을 공유합니다. ↩

  3. 자연어 인터페이스와 단위 환산, 통화 환산, 계산 내역과 같은 고급 기능을 제공하는 Mac용 계산기 애플리케이션인 Numi의 웹사이트. Numi의 기능 및 가격에 대한 정보가 포함. ↩

  4. Parsify Desktop은 엔지니어, 과학자 및 학생이 사용하도록 설계되었으며 복잡한 계산 및 단위 변환을 지원합니다. (자연어 인터페이스도 제공) ↩

  5. math.js ↩

#ui#calculator#math
#19
interface MathFn {
  (a: number, b: number): number
}
const sum: MathFn = (a, b) => a + b

Footnotes

  1. function declarations, function expressions, arrow functions, methods등 TypeScript에서 함수를 선언하는 다양한 방법들. ↩

#typescript#function
#15

Quick tip: reusable Array search predicates - JASON Format

arr.filter(callback(element[, index[, array]])[, thisArg])

배열 메서드에서 2번째 인자 thisArg에 참조값을 전달해서 재사용 가능한 함수를 만드는 트릭. 단 성능 이슈가 있으므로 주의해야 한다.

#javascript#arraystackblitz.com
#8
17 중 16페이지
이전 페이지다음 페이지