Skip to content

Instantly share code, notes, and snippets.

View peeke's full-sized avatar

Peeke peeke

View GitHub Profile
@thysultan
thysultan / WebGL-frameworks-libraries.md
Created February 9, 2019 23:51 — forked from dmnsgn/WebGL-WebGPU-frameworks-libraries.md
A collection of WebGL frameworks and libraries

A non-exhaustive list of WebGL frameworks and libraries. It is mostly for learning purposes as some of the libraries listed are outdated/not maintained anymore.

Engines and libraries

  • three.js: JavaScript 3D library
  • stack.gl: an open software ecosystem for WebGL, built on top of browserify and npm.
  • PixiJS: Super fast HTML 5 2D rendering engine that uses webGL with canvas fallback
  • Pex: Pex is a javascript 3d library / engine allowing for seamless development between Plask and WebGL in the browser.
  • Babylon.js: a complete JavaScript framework for building 3D games with HTML 5 and WebGL
  • AwayJS: AwayJS is a graphics library for javascript written in typescript
  • SceneJS: An extensible WebGL-based engine for high-detail 3D visualisation
@branneman
branneman / fp-lenses.js
Last active May 17, 2023 00:56
JavaScript: Lenses (Functional Programming)
// FP Lenses
const lens = get => set => ({ get, set });
const view = lens => obj => lens.get(obj);
const set = lens => val => obj => lens.set(val)(obj);
const over = lens => fn => obj => set(lens)(fn(view(lens)(obj)))(obj);
const lensProp = key => lens(prop(key))(assoc(key));
@paulirish
paulirish / what-forces-layout.md
Last active March 28, 2024 11:45
What forces layout/reflow. The comprehensive list.

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics
  • elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
@branneman
branneman / algebraic-data-types.js
Last active August 22, 2019 14:35
Simple Algebraic Data Types (ADTs) implementing fantasy-land: Identity, Const, Maybe, Either, IO
const fl = require('fantasy-land')
const inspect = require('util').inspect.custom
// Fantasy Land
// of :: Applicative f => a -> f a
// map :: Functor f => f a ~> (a -> b) -> f b
// ap :: Apply f => f a ~> f (a -> b) -> f b
// chain :: Chain m => m a ~> (a -> m b) -> m b
/**