peeke

const glob = require('glob')
const fs = require('fs')

const mapping = {
  'var(--borderRadius)': 'var(--radius-6)',
  'var(--borderRadiusSmall)': 'var(--radius-4)',
  // ...
}

glob('src/**/*.css', (error, files) => {

peeke

function merge(target, source) {
  if (!(target instanceof Object) || !(source instanceof Object)) return source

  return Object.entries(source).reduce(
    (result, [key, value]) => ({
      ...result,
      [key]: merge(result[key], value)
    }),
    { ...target }
  )

peeke

function lerp(a, b, weight) {
  return a + weight * (b - a)
}

function mapNumber({ from, to, input }) {
  const normalized = (input - from[0]) / from[1]
  return lerp(...to, normalized)
}

peeke

export function observeAttribute(element, attribute, callback) {
  const observer = new MutationObserver(mutations => {
    mutations
      .filter(x => x.type === 'attributes' && x.attributeName === attribute)
      .forEach(_ => callback(element.getAttribute(attribute)))
  })

  observer.observe(element, { attributes: true })

  return observer.disconnect

peeke

const clamp = (value, min, max) => Math.min(Math.max(value, min), max)

class SpatialHashMap {
  constructor(width, height) {
    this.width = width;
    this.height = height;

    this.grid = new Array(width * height).fill(null).map(() => []);
  }

peeke

// This clamp function does not need left to be smaller than right, making it better suited for animations

const clamp = (input, left, right) => {
  if (left > right) {
    [left, right] = [right, left]
  }
  return Math.min(Math.max(input, left), right)
}

export default clamp

peeke

const noop = () => {}

const animate = function(options = {}) {
  const defaultOptions = { from: 0, to: 1, duration: 1000, callback: noop, ease: t => t }
  const { from, to, duration, callback, ease } = {...defaultOptions, ...options}
  
  const delta = to - from

  let start

peeke

Hi Razvan,

I was thinking about your multifile upload component and how I can give you some handles before I'm off to my vacation :)

So what I think might help is thinking about your problem a bit more in a reactive fashion (the React way) and strictly separating the presentational and logic part. I think more often than not, flowcharts make our reasoning about the problem more complex than need be. They're useful, but more so for testing your solutation and documenting edge-cases, not so much serving as a blueprint for your solution.

First worry about what you are going to show on the screen, (the presentational part). There's a droparea with some states, and there's the uploading/uploaded files. Both are contained within a component which handles the logic.

The droparea has some fixed amount of variables (not sure what the warning state was about anymore):

peeke

class KdTree {

  constructor(points, axes = ['x', 'y']) {
    this._axes = axes
    this._tree = KdTree.build(points, axes)
  }

  static build(points, axes, depth = 0) {
    if (!points.length) return null
    

peeke

// The box pattern:
// Array chaining methods for single values
const box = v => [ v ]

box(1)
  .map(n => n * 2)
  .map(n => n + 2)
  .pop()