Skip to content

Instantly share code, notes, and snippets.

View wangpin34's full-sized avatar
🎯
Focusing

Penn wangpin34

🎯
Focusing
View GitHub Profile
@wangpin34
wangpin34 / uno.config.ts
Created November 10, 2023 03:24
handwrite several classes of tailwindcss in unocss
/* eslint-disable no-useless-escape */
// uno.config.ts
import { defineConfig } from 'unocss'
function spaceToRem(space: string) {
const num = parseInt(space)
if (!isNaN(num)) {
return `${num * 0.25}rem`
}
return space
@wangpin34
wangpin34 / useDebounceEffect.ts
Last active March 28, 2023 01:53
React.useEffect variants
import { useEffect } from "react"
function useDebounceEffect(effect: () => void, deps: unknown[], delay: number) {
useEffect(() => {
const timeout = setTimeout(() => {
effect()
}, delay)
return () => {
clearTimeout(timeout)
}
}, [...(deps || []), delay])
@wangpin34
wangpin34 / react-rxjs.ts
Created February 20, 2023 03:28
react-rxjs
import { useEffect, useState } from "react"
import { BehaviorSubject, Observable, filter, shareReplay } from "rxjs"
export function createSignal<T>(initialValue?: T) {
const v$ = new BehaviorSubject<T | undefined>(initialValue)
const setValue = (v: T) => {
v$.next(v)
}
return [v$, setValue] as [BehaviorSubject<T>, (v: T) => void]
@wangpin34
wangpin34 / jest.config.js
Last active February 16, 2023 02:15
vite config(compatible with tird-part libs that use nodejs builtin objects such as global and process.env ), jest config, snapshot resolver, styled components, etc
module.exports = {
clearMocks: true,
reporters: [
"default",
["jest-junit", { outputDirectory: "coverage", outputName: "report.xml" }],
["jest-silent-reporter", { useDots: true }],
],
coverageReporters: ["clover", "json", ["lcov", {}], ["text", { skipFull: true }]],
collectCoverageFrom: ["src", "!**/*.d.ts", "!**/node_modules/**"],
moduleNameMapper: {
@wangpin34
wangpin34 / variables.sass
Created August 19, 2022 09:29
sass snippets
@use 'sass:math'
$dd-width: 375px
$ratio: math.div(1, 10)
@function strip-unit($number)
@if type-of($number) == 'number' and not unitless($number)
@return math.div($number, ($number * 0 + 1))
@return $number
@wangpin34
wangpin34 / yargs.sample.js
Created May 12, 2022 02:52
yargs sample to create command like `npm create-react-app appName
#!/usr/bin/env node
import path from 'path'
import yargs from 'yargs/yargs'
import fs from 'fs/promises'
import figlet from 'figlet'
import chalk from 'chalk'
import init from './command-init'
import packageJSON from '../package.json'
import { setLevel, Level } from 'utils/logger'
import { GlobalOptions } from 'command-init/types'
@wangpin34
wangpin34 / golang-env.ts
Created January 13, 2022 03:16
dev on golang, notes, etc
/*
* Covert Goland env to .env format
* e.g.
* Let's say we have env `ENV=production` and `DB=some-db-url` configured in Golang. It will be the following format when it is copiled from the conf.
* ENV=production;DB=some-db-url
* But the popular env format `.env` use the following format:
* ENV=production
* DB=some-db-url
*/
@wangpin34
wangpin34 / deploy-web-to-s3.yaml
Last active January 12, 2022 02:51
tekton tasks
apiVersion: tekton.dev/v1beta1
kind: Task
metadata:
name: deploy-web-to-s3
namespace: default
spec:
params:
- name: build_command
type: string
default: npm build
@wangpin34
wangpin34 / AsWebComponent.tsx
Last active December 15, 2021 02:24
Render component in shadow tree
import { useEffect, useCallback } from 'react'
import { render } from 'react-dom'
function Others() {
return <div>other will be rendered inside shadow tree</div>
}
class RendereComponent extends HTMLElement {
connectedCallback() {
const shadowRoot = this.attachShadow({ mode: 'open' })
@wangpin34
wangpin34 / download-or-copy.ts
Last active November 25, 2021 02:57
download, copy, select, etc
function download(text: string, name: string, type: string) {
var a = document.createElement('a')
a.style.display = "block";
var file = new Blob([text], {type: type});
a.href = URL.createObjectURL(file);
a.download = name;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}