Skip to content

Instantly share code, notes, and snippets.

Avatar
⚛️
Reconciling

Alexis H. Munsayac LXSMNSYC

⚛️
Reconciling
View GitHub Profile
@addyosmani
addyosmani / README.md
Last active Nov 16, 2020 — forked from 140bytes/LICENSE.txt
108 byte CSS Layout Debugger
View README.md

CSS Layout Debugger

A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.

One-line version to paste in your DevTools

Use $$ if your browser aliases it:

~ 108 byte version

@gvergnaud
gvergnaud / lazy-list.js
Last active Jun 20, 2020
Lazy List, implemented with es6 generators
View lazy-list.js
/* ----------------------------------------- *
Lazy List Implementation
* ----------------------------------------- */
// Haskell-like infinite List, implemented with es6 generators
// Lazyness lets you do crazy stuff like
List.range(0, Infinity)
.drop(1000)
.map(n => -n)
@dmnsgn
dmnsgn / WebGL-WebGPU-frameworks-libraries.md
Last active Nov 21, 2020
A collection of WebGL and WebGPU frameworks and libraries
View WebGL-WebGPU-frameworks-libraries.md

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

  • 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
  • Filament: Filament is a real-time physically based rendering engine for Android, iOS, Windows, Linux, macOS and WASM/WebGL
  • ClayGL: A WebGL graphic library
@fgilio
fgilio / axios-catch-error.js
Last active Nov 18, 2020
Catch request errors with Axios
View axios-catch-error.js
/*
* Handling Errors using async/await
* Has to be used inside an async function
*/
try {
const response = await axios.get('https://your.site/api/v1/bla/ble/bli');
// Success 🎉
console.log(response);
} catch (error) {
// Error 😨
View didact-fiber.js
function commitAllWork(fiber) {
fiber.effects.forEach(f => {
commitWork(f);
});
fiber.stateNode._rootContainerFiber = fiber;
nextUnitOfWork = null;
pendingCommit = null;
}
function commitWork(fiber) {
View GPUComputationRenderer.js
/**
* @author yomboprime https://github.com/yomboprime
*
* GPUComputationRenderer, based on SimulationRenderer by zz85
*
* The GPUComputationRenderer uses the concept of variables. These variables are RGBA float textures that hold 4 floats
* for each compute element (texel)
*
* Each variable has a fragment shader that defines the computation made to obtain the variable in question.
* You can use as many variables you need, and make dependencies so you can use textures of other variables in the shader
@tunguskha
tunguskha / Gradient shadow in pure CSS.md
Last active Nov 19, 2020
Gradient shadow in pure CSS
View Gradient shadow in pure CSS.md

Gradient shadow in pure CSS

alt text

HTML
<button>Let's Go !</button>
@tiernan
tiernan / serviceworker.d.ts
Last active Jul 16, 2020
Service Worker Typings to Supplement lib.webworker.ts
View serviceworker.d.ts
/**
* Copyright (c) 2018, Tiernan Cridland
*
* Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby
* granted, provided that the above copyright notice and this permission notice appear in all copies.
*
* THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL
* IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
* INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER
* IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
@sebmarkbage
sebmarkbage / The Rules.md
Last active Nov 19, 2020
The Rules of React
View The Rules.md

The Rules of React

All libraries have subtle rules that you have to follow for them to work well. Often these are implied and undocumented rules that you have to learn as you go. This is an attempt to document the rules of React renders. Ideally a type system could enforce it.

What Functions Are "Pure"?

A number of methods in React are assumed to be "pure".

On classes that's the constructor, getDerivedStateFromProps, shouldComponentUpdate and render.

You can’t perform that action at this time.