Baptiste Briel baptistebriel

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

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

Engines and libraries ⚙️

Name	Stars	Last Commit	Description
three.js	![GitHub

Saving GIF/MP4 Frames with Texel

The above GIF was rendered with Canvas2D and JavaScript. I used texel, a tool I am developing but have not yet released.

If you want to try this very experimental tool, install the latest working version like so:

npm install [email protected] --global

	import { getRgb } from 'color-string'

	function glsl(strings, ...variables) {
	variables = variables.map(v => {
	var rgb = getRgb(v)
	.map(x => x/255)
	.slice(0, 3)
	.join(', ')
	return `vec3(${rgb})`
	})

	/* bling.js */
	window.$ = document.querySelector.bind(document);
	window.$$ = document.querySelectorAll.bind(document);
	Node.prototype.on = window.on = function(name, fn) { this.addEventListener(name, fn); };
	NodeList.prototype.__proto__ = Array.prototype;
	NodeList.prototype.on = function(name, fn) { this.forEach((elem) => elem.on(name, fn)); };

	fire();

	setInterval(fire, 300);
	setInterval(unfire, 500);


	function fire() {
	$('#can').trigger(TRUMP.main.events[0]);
	}

	"use strict";


	// animation utils
	// ===============

	const trackTime = id => {
	const [entry] = performance.getEntriesByName(id);
	if (!entry) {
	performance.mark(id);

	<!doctype html>
	<div id="sketch"></div>

	<style>
	body {
	margin: 0;
	overflow: hidden;
	background: #383838;
	}
	#sketch {

	import React, { useEffect } from 'react'
	import gsap from 'gsap'
	import { useFrame } from '@react-three/fiber'

	// sync gsap raf to r3f raf
	gsap.ticker.remove(gsap.updateRoot)

	export const GsapTicker = () => {
	const pg = React.useRef(0)
	gsap.ticker.remove(gsap.updateRoot)