Notes

Some stuff I done learned. Click on a note to read more.

Japanese Furigana with React

The HTML standard has this great tag called <ruby> for displaying the pronounciation of East Asian characters. This makes it super easy to add Furigana to Japanese Kanji using Javascript, HTML and React.

const furiganaRe = /[\u4e00-\u9faf]*{.*?}/gm
const furiganaToHTML = string =>
  string.replace(furiganaRe, x => {
    let [base, furigana] = x.slice(0, -1).split("{")
    return `<ruby>${base}<rt>${furigana}</rt></ruby>`
  });

export const Furigana = ({ children, ...rest }) => (
  <>
    {React.Children.map(children, node =>
      typeof node === "string" ? (
        <span dangerouslySetInnerHTML={{
            __html: furiganaToHTML(node)
        }} />
      ) : (
        node
      )
    )}
  </>
)

/* USAGE:
 * <Furigana>
 *  人間{にんげん}を食{た}べる
 * </Furigana>
 */

Fix styled-components withComponent Method

styled-components have deprecated the withComponent method in favour of the inline as prop. Unfortunately, @types/styled-components says you should use withComponent method and not the as prop.

Ouch!

Here’s a higher-order component you can use instead of either of them.

import styled, { StyledComponent }
from "styled-components"

function withComponent<
  C extends StyledComponent<any, any>,
  T extends React.ComponentType<any>
    | keyof JSX.IntrinsicElements
>(Component: C, type: T) {
  return styled((props =>
    <Component as={type} {...props} />)
     as unknown as T)``
}

// Example Usage:

const Link = withComponent(Button, 'a');

Haskell Quicksort in JavaScript

Haskell is a really neat language! In fact, you can implement quicksort in just one line.

While this is tremendously inefficient, I thought it would be fun to create a JS version of the one-liner, should I ever need it in an interview.

const quicksort = ([h, ...arr]) => [h, ...arr].length
  ? [ ...quicksort(arr.filter(a => h >= a)), h,
      ...quicksort(arr.filter(a => h < a)) ]
  : []

Japanese Furigana with React

The HTML standard has this great tag called <ruby> for displaying the pronounciation of East Asian characters. This makes it super easy to add Furigana to Japanese Kanji using Javascript, HTML and React.

const furiganaRe = /[\u4e00-\u9faf]*{.*?}/gm
const furiganaToHTML = string =>
  string.replace(furiganaRe, x => {
    let [base, furigana] = x.slice(0, -1).split("{")
    return `<ruby>${base}<rt>${furigana}</rt></ruby>`
  });

export const Furigana = ({ children, ...rest }) => (
  <>
    {React.Children.map(children, node =>
      typeof node === "string" ? (
        <span dangerouslySetInnerHTML={{
            __html: furiganaToHTML(node)
        }} />
      ) : (
        node
      )
    )}
  </>
)

/* USAGE:
 * <Furigana>
 *  人間{にんげん}を食{た}べる
 * </Furigana>
 */

Fix styled-components withComponent Method

styled-components have deprecated the withComponent method in favour of the inline as prop. Unfortunately, @types/styled-components says you should use withComponent method and not the as prop.

Ouch!

Here’s a higher-order component you can use instead of either of them.

import styled, { StyledComponent }
from "styled-components"

function withComponent<
  C extends StyledComponent<any, any>,
  T extends React.ComponentType<any>
    | keyof JSX.IntrinsicElements
>(Component: C, type: T) {
  return styled((props =>
    <Component as={type} {...props} />)
     as unknown as T)``
}

// Example Usage:

const Link = withComponent(Button, 'a');

Haskell Quicksort in JavaScript

Haskell is a really neat language! In fact, you can implement quicksort in just one line.

While this is tremendously inefficient, I thought it would be fun to create a JS version of the one-liner, should I ever need it in an interview.

const quicksort = ([h, ...arr]) => [h, ...arr].length
  ? [ ...quicksort(arr.filter(a => h >= a)), h,
      ...quicksort(arr.filter(a => h < a)) ]
  : []