franky47

/**
 * Traverse a JSON object depth-first, in a `reduce` manner.
 *
 * License: MIT © 2021 François Best (https://francoisbest.com)
 * 
 * @param input The root node to traverse
 * @param callback A function to call on each visited node
 * @param initialState Think of this as the last argument of `reduce`
 */
export function reduceTree<State>(

franky47

{
  "colors": {
    "green": {
      "50": "#ECF8EF",
      "100": "#CBECD2",
      "200": "#A9DFB6",
      "300": "#88D399",
      "400": "#66C77C",
      "500": "#45BA60",
      "600": "#37954D",

franky47

Array.from(
  new Set(
    // List all links on the page
    Array.from(document.getElementsByTagName('a'))
      .filter(a =>
        // Only keep status URLs
        a.href.match(/^https:\/\/twitter\.com\/(\w+)\/status\/(\d+)$/)
      )
      .map(a => a.href) // Keep only the link URL
  ) // new Set: remove duplicates

franky47

import React from 'react'

export interface EmojiFaviconProps {
  emoji: string
  badgeEmoji?: string
}

export const EmojiFavicon: React.FC<EmojiFaviconProps> = ({ emoji, badgeEmoji }) => {
  const inlineSvg = React.useMemo(() => {
    return `

franky47

import * as React from 'react'

export function usePasteAnywhere(callback: (text: string) => void) {
  React.useEffect(() => {
    const body = document.getElementsByTagName('body')[0]
    const onPaste = (e: ClipboardEvent) => {
      const data = e.clipboardData?.getData('text/plain')
      if (data) {
        callback(data)
      }

franky47

• Dzhavat Ushev’s blog - website - RSS
• drew.tech - website - RSS
• your friend Joel's digital garden - website - RSS
• bitsofcode - website - RSS
• julian.digital - website - RSS
• Josh Comeau's blog - website - RSS
• Kyle Shevlin's Blog RSS Feed - website - RSS
• Overthought - website - RSS

In French:

franky47

{
  "Create functional component": {
    "prefix": "fct",
    "body": [
      "export interface ${1:Component}Props {",
      "",
      "}",
      "",
      "export const ${1:Component}: React.FC<${1:Component}Props> = ({ ...props }) => {",
      "  return (",

franky47

import React from 'react';
import { useWindowSize } from 'react-use';

// 100vh is broken on mobile (Chrome, Safari):
// https://chanind.github.io/javascript/2019/09/28/avoid-100vh-on-mobile-web.html

export default function use100vh() {
  const ref = React.useRef();
  const { height } = useWindowSize();

franky47

document.querySelector('.content').setAttribute("style", "margin:0 auto;font-size:16px;line-height:1.4;color:#333")

franky47

import React from 'react'

const useDerivedState = <T>(derive: () => T, deps: any[]): T => {
  const [value, setValue] = React.useState<T>(derive)
  React.useEffect(() => {
    setValue(derive())
  }, deps)
  return value
}