Rough prototype of visualizing my sleep data with Visx and Framer Motion.
This is a code snippet from a Next.js 14 app. Uses the Oura v2 API to get data from your account.
Rough prototype of visualizing my sleep data with Visx and Framer Motion.
This is a code snippet from a Next.js 14 app. Uses the Oura v2 API to get data from your account.
import fs from "fs/promises"; | |
import path from "path"; | |
import { fileURLToPath } from "url"; | |
const __filename = fileURLToPath(import.meta.url); | |
const __dirname = path.dirname(__filename); | |
const APPS_DIRECTORY = path.resolve(__dirname, "../../apps"); | |
// Common SVG attributes that need renaming to camelCase for JSX | |
const attributeReplacements = { |
blueprint: | |
name: Philips Hue Tap Dial Light Brightness Control | |
description: Use the Philips Hue Tap Dial to control the brightness of a light. | |
domain: automation | |
input: | |
tap_dial: | |
name: Tap Dial | |
description: The tap dial to use. Select the battery sensor that is exposed. | |
selector: | |
entity: |
"use client"; | |
import { FastAverageColor } from "fast-average-color"; | |
import { useEffect, useState } from "react"; | |
const fac = new FastAverageColor(); | |
export function ImageWithAvgColor({ src }: { src: string }) { | |
const [avgColor, setAvgColor] = useState<string>("transparent"); | |
useEffect(() => { |
const { CI, PORT = 3000, VERCEL_ENV, NEXT_PUBLIC_VERCEL_ENV, VERCEL_URL, NEXT_PUBLIC_VERCEL_URL } = process.env; | |
export const ENVIRONMENT = VERCEL_ENV || NEXT_PUBLIC_VERCEL_ENV; | |
const baseDomainSource = CI ? VERCEL_URL : NEXT_PUBLIC_VERCEL_URL; | |
const baseDomain = baseDomainSource; | |
let BASE_URL: string; | |
if (ENVIRONMENT === 'preview') { |
SVG Attribute | JSX Property |
---|---|
class |
className |
fill-opacity |
fillOpacity |
stroke-opacity |
strokeOpacity |
stroke-width |
strokeWidth |
stroke-linecap |
strokeLinecap |
stroke-linejoin |
strokeLinejoin |
stroke-dasharray |
strokeDasharray |
stroke-dashoffset |
strokeDashoffset |
import * as React from 'react'; | |
const useIsFirstRender = (): boolean => { | |
const isFirst = React.useRef(true); | |
if (isFirst.current) { | |
isFirst.current = false; | |
return true; | |
} else { |
ytd-watch-flexy[full-bleed-player] #player-full-bleed-container.ytd-watch-flexy { | |
max-height: calc(100vh - 56px) !important; | |
} | |
ytd-watch-flexy[fullscreen] #player-full-bleed-container.ytd-watch-flexy { | |
max-height: none !important; | |
} |
GitHub’s search supports a variety of different operations. Here’s a quick cheat sheet for some of the common searches.
For more information, visit our search help section.
javascript:(function()%7B"use strict"%3Bconst iconDownload%3D'<svg width%3D"24" height%3D"24" viewBox%3D"0 0 512 512"><g><g><path d%3D"M472%2C313v139c0%2C11.028-8.972%2C20-20%2C20H60c-11.028%2C0-20-8.972-20-20V313H0v139c0%2C33.084%2C26.916%2C60%2C60%2C60h392 c33.084%2C0%2C60-26.916%2C60-60V313H472z"><%2Fpath><%2Fg><%2Fg><g><g><polygon points%3D"352%2C235.716 276%2C311.716 276%2C0 236%2C0 236%2C311.716 160%2C235.716 131.716%2C264 256%2C388.284 380.284%2C264"><%2Fpolygon><%2Fg><%2Fg><%2Fsvg>'%2CiconNewtab%3D'<svg width%3D"24" height%3D"24" viewBox%3D"0 0 482.239 482.239"><path d%3D"m465.016 0h-344.456c-9.52 0-17.223 7.703-17.223 17.223v86.114h-86.114c-9.52 0-17.223 7.703-17.223 17.223v344.456c0 9.52 7.703 17.223 17.223 17.223h344.456c9.52 0 17.223-7.703 17.223-17.223v-86.114h86.114c9.52 0 17.223-7.703 17.223-17.223v-344.456c0-9.52-7.703-17.223-17.223-17.223zm-120.56 447.793h-310.01v-310.01h310.011v310.01zm103.337-103.337h-68.891v-223.896c0-9.52-7.703-17.223-17.223-17.223h-223.896v-68.891h310.011v310.01z"><%2Fpa |