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.
const { withAppDelegate } = require("expo/config-plugins"); | |
const { | |
mergeContents, | |
} = require("@expo/config-plugins/build/utils/generateCode"); | |
const withExpoP3 = (config) => { | |
return withAppDelegate(config, (config) => { | |
if ( | |
config.modResults.language === "objc" || | |
config.modResults.language === "objcpp" |
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.