Skip to content

Instantly share code, notes, and snippets.

@natew
natew / tamagui_example_themebuilder_themes.ts
Last active February 18, 2025 03:05
Code showing Tamagui ThemeBuilder generating the site theme suite
import {
blue,
blueDark,
gray,
grayDark,
green,
greenDark,
orange,
orangeDark,
pink,
import {
blue,
blueDark,
gray,
grayDark,
green,
greenDark,
orange,
orangeDark,
pink,
import { promises as fs } from 'node:fs'
import * as path from 'node:path'
import { exec } from 'node:child_process'
import os from 'node:os'
interface PackageJson {
profile?: { [key: string]: any }
[key: string]: any
}
@natew
natew / settings.json
Created August 10, 2023 23:54
my customize ui vscode
{
"apc.activityBar": {
"position": "bottom",
"hideSettings": true,
"size": 20
},
"apc.statusBar": {
"position": "editor-bottom",
"height": 22,
@natew
natew / AnimatedNumbers.tsx
Last active March 8, 2024 00:27
AnimatePresence number ticker
const AnimatedNumbers = () => {
const [numbers, setNumbers] = useState(100_000)
const len = `${numbers}`.length
return (
<YStack gap="$5">
<XStack gap="$2">
<Button
onPress={() => {
import { getSize, getSpace } from '@tamagui/get-token'
import { Moon } from '@tamagui/lucide-icons'
import {
GetProps,
SizeTokens,
Stack,
Text,
createStyledContext,
styled,
useTheme,
@natew
natew / deploy.rb
Last active March 16, 2022 06:35
Puma + Nginx + Capistrano
require 'bundler/capistrano'
require 'capistrano_colors'
load 'deploy/assets'
# ssh forwarding and shell
set :default_run_options, { :pty => true }
set :ssh_options, { :forward_agent => true }
set :scm_verbose, true
set :scm, :git
import r2 from '@mcro/r2'
import puppeteer from 'puppeteer'
import * as _ from 'lodash'
const sleep = ms => new Promise(res => setTimeout(res, ms))
const onFocus = page => {
return page.evaluate(() => {
return new Promise(res => {
if (document.hasFocus()) {
res()
import { animation, Button, Card, Geometry, Row, Title, View } from '@o/ui'
import React from 'react'
export const TestCarousel = () => {
const apps = [{ title: 'ok' }, { title: 'ok2' }, { title: 'ok3' }, { title: 'o4' }]
const carousel = animation(() => ({
scrollLeft: 0,
zoomed: false,
}))
/**
import { always, AppDefinition, AppIcon, createUsableStore, ensure, getAppDefinition, react, shallow, Templates, useReaction } from '@o/kit'
import { AppBit } from '@o/models'
import { Card, CardProps, fuzzyFilter, idFn, Row, useIntersectionObserver, useNodeSize, useParentNodeSize, useTheme, View } from '@o/ui'
import { numberBounder, numberScaler } from '@o/utils'
import React, { createRef, memo, useEffect, useLayoutEffect, useRef, useState } from 'react'
import { to, useSpring, useSprings } from 'react-spring'
import { useGesture } from 'react-use-gesture'
import { om, useOm } from '../../om/om'
import { queryStore } from '../../om/stores'