| // 3D Dom viewer, copy-paste this into your console to visualise the DOM as a stack of solid blocks. | |
| // You can also minify and save it as a bookmarklet (https://www.freecodecamp.org/news/what-are-bookmarklets/) | |
| (() => { | |
| const SHOW_SIDES = false; // color sides of DOM nodes? | |
| const COLOR_SURFACE = true; // color tops of DOM nodes? | |
| const COLOR_RANDOM = false; // randomise color? | |
| const COLOR_HUE = 190; // hue in HSL (https://hslpicker.com) | |
| const MAX_ROTATION = 180; // set to 360 to rotate all the way round | |
| const THICKNESS = 20; // thickness of layers | |
| const DISTANCE = 10000; // ¯\\_(ツ)_/¯ |
| import * as React from 'react'; | |
| const useIsFirstRender = (): boolean => { | |
| const isFirst = React.useRef(true); | |
| if (isFirst.current) { | |
| isFirst.current = false; | |
| return true; | |
| } else { |
| /* | |
| This code shows how to resolve collisions using Matter physics with Phaser 3 in constant O(1) time. | |
| Going through all the collision pairs is still linear O(n) time depending on how many collisions happened this frame | |
| but the code that handles the resolution of the collision is constant and will not change with the total number of CollisionCategories / collision-lookups. | |
| The way the code works is by generating a number based on the each of the collision combinations, use that number as a key for storing a pointer to the respective collision handler function, | |
| and then when a collision happens, calculate the number again of both bodies' collision categories and use that number to fetch the collision handler function. Simple. | |
| // dreasgrech - https://github.com/dreasgrech/ | |
| */ |
Remix Deferred is currently implemented on top of React's Suspense model but is not limited to React. This will be a quick dive into how "promise over the wire" is accomplished.
It isn't rocket science, but a quick recap of how frameworks such as react do SSR:
| Differences in perceived speed | |
| (https://twitter.com/AkiyoshiKitaoka/status/1304361365516165121?s=20) | |
| The role of eye movements in the size-speed illusion of approaching trains | |
| (https://www.sciencedirect.com/science/article/abs/pii/S000145751530110X) | |
| The “Spinner” Illusion: More Dots, More Speed? |
| // | |
| // See: https://kentcdodds.com/blog/profile-a-react-app-for-performance#build-and-measure-the-production-app | |
| // See: https://nextjs.org/docs/api-reference/next.config.js/custom-webpack-config | |
| const TerserPlugin = require('next/dist/compiled/terser-webpack-plugin'); | |
| module.exports = { | |
| webpack: (config, options) => { | |
| // | |
| // Use profiler-enabled React builds |
These libraries can be used to quickly create a GUI for configureable parameters using sliders, checkboxes, colors pickers etc
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.
| Name | Stars | Last Commit | Description |
|---|---|---|---|
| three.js | 
| /*! | |
| * Copyright 2015 Google Inc. All rights reserved. | |
| * | |
| * Licensed under the Apache License, Version 2.0 (the "License"); | |
| * you may not use this file except in compliance with the License. | |
| * You may obtain a copy of the License at | |
| * | |
| * http://www.apache.org/licenses/LICENSE-2.0 | |
| * | |
| * Unless required by applicable law or agreed to in writing, software |
