Skip to content

Instantly share code, notes, and snippets.

View maraisr's full-sized avatar
:fishsticks:

marais maraisr

:fishsticks:
334 followers · 275 following
View GitHub Profile
@munrocket
munrocket / wgsl_2d_sdf.md
Last active May 3, 2024 13:49
WGSL 2D SDF Primitives

WGSL 2D SDF Primitives

Revision: 06.08.2023, https://compute.toys/view/398

Circle - exact

fn sdCircle(p: vec2f, r: f32) -> f32 {
  return length(p) - r;
}
@zackthehuman
zackthehuman / hexagons.js
Created February 20, 2012 03:46
Drawing a hexagonal grid with HTML canvas
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Canvas Hexagonal Map</title>
<style type="text/css">
canvas {
border:0;
display:block;
margin:0 auto;
@sibelius
sibelius / AutocompleteRelay.tsx
Last active March 23, 2024 10:13
@material-ui Autocomplete lab with react-window + infinite-loader for GraphQL/Relay connections
import React, { useRef, useState } from 'react';
import { Typography } from '@material-ui/core';
import TextField from '@material-ui/core/TextField';
import CircularProgress from '@material-ui/core/CircularProgress';
import Autocomplete, {
AutocompleteChangeDetails,
AutocompleteChangeReason,
AutocompleteProps
} from '@material-ui/lab/Autocomplete';
@ryanflorence
ryanflorence / folder-structure.md
Last active March 10, 2024 19:31

Folder Structure

Please note

While this gist has been shared and followed for years, I regret not giving more background. It was originally a gist for the engineering org I was in, not a "general suggestion" for any React app.

Typically I avoid folders altogether. Heck, I even avoid new files. If I can build an app with one 2000 line file I will. New files and folders are a pain.

@Jessidhia
Jessidhia / react-scheduler.md
Last active March 1, 2024 13:51
Implementation notes on react's scheduling model as of (shortly before) 16.8.0

Implementation notes on react's scheduling model as of (shortly before) 16.8.0

While the public API intended for users to use is the scheduler package, the reconciler currently does not use scheduler's priority classes internally.

ReactFiberScheduler has its own internal "mini-scheduler" that uses the scheduler package indirectly for its deadline-capable scheduleCallback.

This is kind of a documentation of implementation details that I suppose will be gone by the end of the year, but what can you do.

@gricard
gricard / webpack4upgrade.md
Last active February 29, 2024 20:23
Just some notes about my attempt to upgrade to webpack 4

If you enjoyed reading this, I'm intending to do more blogging like this over here: https://cdgd.tech

This is not a complaint about Webpack or v4 in any way. This is just a record of my process trying it out so I could provide feedback to the webpack team

Hmm... I don't see any docs for 4.0 on https://webpack.js.org. I guess I'll just wing it. All I need to do is npm i -D webpack@next, right?

+ webpack@4.0.0-beta.2
@maxboeck
maxboeck / donottrack.js
Last active November 6, 2023 10:00
Check "Do Not Track" Client Hint
const allowsTracking = () => {
const dnt =
window.doNotTrack ||
navigator.doNotTrack ||
navigator.msDoNotTrack
if (dnt === 1 || dnt === '1' || dnt === 'yes') {
return false
}
if ('msTrackingProtectionEnabled' in window.external) {
return !window.external.msTrackingProtectionEnabled()
@markerikson
markerikson / cheng-lou-spectrum-of-abstraction.md
Last active October 23, 2023 23:18
Cheng Lou - "On the Spectrum of Abstraction" summarized transcript (React Europe 2016)

Cheng Lou - On the Spectrum of Abstraction

Cheng Lou, a former member of the React team, gave an incredible talk at React Europe 2016 entitled "On the Spectrum of Abstraction". That talk is available for viewing here: https://www.youtube.com/watch?v=mVVNJKv9esE

It's only a half-hour, but it is mind-blowing. It's worth re-watching two or three times, to let the ideas sink in.

I just rewatched the talk for some research, and wrote down a summary that's semi-transcript-ish. I didn't see any other transcripts for this talk, other than the auto-generated closed captions, so I wanted to share for reference.

Summary

@developit
developit / little-vdom.js
Last active October 10, 2023 03:03
Demo: https://codepen.io/developit/pen/NWqpJQa?editors=0010 🔎 Decompiled: https://gist.github.com/marvinhagemeister/8950b1032d67918d21950b3985259d78
export const h=(t,p,...c)=>({t,p,c,k:p&&p.key})
export const render=(e,d,t=d.t||(d.t={}),p,r,c,m,y)=>
// arrays
e.map?e.map((e,p)=>render(e,d,t.o&&t.o[p])):
// components
e.t.call?(e.i=render((render.c=e).t(Object.assign({children:e.c},e.p),e.s=t.s||{},t=>
render(Object.assign(e.s,t)&&e,d,e)),t.i||d,t&&t.i||{}),d.t=t=e):(
// create notes
m=t.d||(e.t?document.createElement(e.t):new Text(e.p)),
// diff props
@joyrexus
joyrexus / README.md
Created March 28, 2014 16:59
Nested grouping of arrays

nest.js

A multi-level groupBy for arrays inspired by D3's nest operator.

Nesting allows elements in an array to be grouped into a hierarchical tree structure; think of it like the GROUP BY operator in SQL, except you can have multiple levels of grouping, and the resulting output is a tree rather than a flat table. The levels in the tree are specified by key functions.

See this fiddle for live demo.