ekzhang

Notes on Forma

Recently @dragostis at Google released an experimental vector graphics renderer called Forma.

The renderer has a pretty cool set of goals: portability, performance, simplicity, and size. Graphics and GPU computation models are a topic that I'm pretty interested in learning more about personally, and this project seems like an especially accessible / well-written codebase to learn from.

I'm very happy to see this work! The era of rendering vector graphics in GPU compute shaders is upon us, and I have no doubt it we'll start seeing these in production soon, as there's just such a performance advantage over CPU rendering, and I believe trying to run vector 2D graphics through the GPU rasterization pipeline doesn't quite work.

_This code is simpler than Vello (the new name for piet-gpu), focused on vector path rendering. It's also a strong demo of the power of WebGPU, while also having a performant software-only pipe

steveruizok

/**
 * Find the control points for a cubic segment from point a to point c passing through point b.
 * @param a The curve's start point
 * @param b The point to curve through
 * @param c The curve's end point
 */
export function findCubicControlPoints(
  a: { x: number; y: number },
  b: { x: number; y: number },
  c: { x: number; y: number }

matthen

smoothstep[t_, t0_, t1_] := 
  With[{tt = (t - t0)/(t1 - t0)}, 
   If[tt < 0, 0, If[tt > 1, 1, 6 tt^5 - 15 tt^4 + 10 tt^3]]];
a = 0.918;
p = ShearingMatrix[a, {1, 0}, {0, 1}].{Cos[th], Sin[th]}; \[Theta] = 
 ArcTan @@ Reverse[(p /. NMaximize[Norm[p], th][[2]])];
yscale = (RotationMatrix[\[Theta]].(p /. {th -> \[Theta]}))[[2]];
xscale = (RotationMatrix[\[Theta]].(p /. {th -> \[Theta] - 
          Pi/2}))[[1]];
\[Theta]2 = ArcTan @@ ((ScalingTransform[{(1/xscale) , (1/yscale) }].

slikts

Why using the children prop makes React.memo() not work

I've recently ran into a pitfall of [React.memo()][memo] that seems generally overlooked; skimming over the top results in Google just finds it mentioned in passing in a [React issue][regit], but not in the [FAQ] or API [overview][react-api], and not in the articles that set out to explain React.memo() (at least the ones I looked at). The issue is specifically that nesting children defeats memoization, unless the children are just plain text. To give a simplified code example:

const Memoized = React.memo(({ children }) => (<div>{children}</div>));
// Won't ever re-render
<Memoized>bar</Memoized>
// Will re-render every time; the memoization does nothing

gaearon

Note:

When this guide is more complete, the plan is to move it into Prepack documentation.
For now I put it out as a gist to gather initial feedback.

A Gentle Introduction to Prepack (Part 1)

If you're building JavaScript apps, you might already be familiar with some tools that compile JavaScript code to equivalent JavaScript code:

• Babel lets you use newer JavaScript language features, and outputs equivalent code that targets older JavaScript engines.

instr3

Play this game by pasting the script in http://www.puzzlescript.net/editor.html

sebmarkbage

let cache = new Map();
let pending = new Map();

function fetchTextSync(url) {
  if (cache.has(url)) {
    return cache.get(url);
  }
  if (pending.has(url)) {
    throw pending.get(url);
  }

tommyjtl

markerikson

Cheng Lou - On the Spectrum of Abstraction

Cheng Lou, a former member of the React team, gave an incredible talk at React Europe 2016 entitled "On the Spectrum of Abstraction". That talk is available for viewing here: https://www.youtube.com/watch?v=mVVNJKv9esE

It's only a half-hour, but it is mind-blowing. It's worth re-watching two or three times, to let the ideas sink in.

I just rewatched the talk for some research, and wrote down a summary that's semi-transcript-ish. I didn't see any other transcripts for this talk, other than the auto-generated closed captions, so I wanted to share for reference.

Summary

gaearon

/*
  This replaces <Sequencer> + multiple <Sampler>s with a marble diagram sequencer.
  You can use it like this:

      <Marble
        resolution={16}
        samples={[
          'samples/kick.wav',
          'samples/snare.wav',
        ]}