Skip to content

Instantly share code, notes, and snippets.

⚛️
Reconciling

Alexis Munsayac LXSMNSYC

⚛️
Reconciling
Block or report user

Report or block LXSMNSYC

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@sebmarkbage
sebmarkbage / WhyReact.md
Created Sep 4, 2019
Why is React doing this?
View WhyReact.md

I heard some points of criticism to how React deals with reactivity and it's focus on "purity". It's interesting because there are really two approaches evolving. There's a mutable + change tracking approach and there's an immutability + referential equality testing approach. It's difficult to mix and match them when you build new features on top. So that's why React has been pushing a bit harder on immutability lately to be able to build on top of it. Both have various tradeoffs but others are doing good research in other areas, so we've decided to focus on this direction and see where it leads us.

I did want to address a few points that I didn't see get enough consideration around the tradeoffs. So here's a small brain dump.

"Compiled output results in smaller apps" - E.g. Svelte apps start smaller but the compiler output is 3-4x larger per component than the equivalent VDOM approach. This is mostly due to the code that is usually shared in the VDOM "VM" needs to be inlined into each component. The tr

@wybiral
wybiral / noscript-tracking.go
Last active Dec 5, 2019
Tracking cursor position in real-time with remote monitoring (without JavaScript)
View noscript-tracking.go
// Tracking cursor position in real-time without JavaScript
// Demo: https://twitter.com/davywtf/status/1124146339259002881
package main
import (
"fmt"
"net/http"
"strings"
)
@dferrandizmont
dferrandizmont / regex-cheatsheet.md
Last active Oct 2, 2019
[Regex cheatsheet] #regex
View regex-cheatsheet.md

Regular Expressions

Basic Syntax

  • /.../: Start and end regex delimiters
  • |: Alternation
  • (): Grouping
View request.js
/**
* Parses the JSON returned by a network request
*
* @param {object} response A response from a network request
*
* @return {object} The parsed JSON, status from the response
*/
function parseJSON(response) {
return new Promise(resolve =>
response.json().then(json =>
View safari-reaper.html
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
body {
background: repeat url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/7QCIUGhvdG9zaG9wIDMuMAA4QklNBAQAAAAAAGscAVoAAxslRxwCAAACAAAcAnQAV8KpIENoYWV5b3VuZ1dpbGxOZXZlckNoYWVvbGQgLSBodHRwOi8vd3d3LnJlZGJ1YmJsZS5jb20vcGVvcGxlL0NoYWV5b3VuZ1dpbGxOZXZlckNoYWVvbAD/4gxYSUNDX1BST0ZJTEUAAQEAAAxITGlubwIQAABtbnRyUkdCIFhZWiAHzgACAAkABgAxAABhY3NwTVNGVAAAAABJRUMgc1JHQgAAAAAAAAAAAAAAAAAA9tYAAQAAAADTLUhQICAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABFjcHJ0AAABUAAAADNkZXNjAAABhAAAAGx3dHB0AAAB8AAAABRia3B0AAACBAAAABRyWFlaAAACGAAAABRnWFlaAAACLAAAABRiWFlaAAACQAAAABRkbW5kAAACVAAAAHBkbWRkAAACxAAAAIh2dWVkAAADTAAAAIZ2aWV3AAAD1AAAACRsdW1pAAAD+AAAABRtZWFzAAAEDAAAACR0ZWNoAAAEMAAAAAxyVFJDAAAEPAAACAxnVFJDAAAEPAAACAxiVFJDAAAEPAAACAx0ZXh0AAAAAENvcHlyaWdodCAoYykgMTk5OCBIZXdsZXR0LVBhY2thcmQgQ29tcGFueQAAZGVzYwAAAAAAAAASc1JHQiBJRUM2MTk2Ni0yLjEAAAAAAAAAAAAAABJzUkdCIElFQzYxOTY2LTIuMQAAAAAAAA
View Gradient shadow in pure CSS.md

Gradient shadow in pure CSS

alt text

HTML
<button>Let's Go !</button>
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
@fgilio
fgilio / axios-catch-error.js
Last active Dec 6, 2019
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 😨
@dmnsgn
dmnsgn / WebGL-frameworks-libraries.md
Last active Dec 4, 2019
A collection of WebGL frameworks and libraries
View WebGL-frameworks-libraries.md

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
  • Filament: Filament is a real-time physically based rendering engine for Android, iOS, Windows, Linux, macOS and WASM/WebGL
  • ClayGL: A WebGL graphic library helping you to
You can’t perform that action at this time.