Skip to content

Instantly share code, notes, and snippets.

View index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>vdom creation #jsbench #jsperf</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/1.0.0/benchmark.min.js"></script>
<script src="./suite.js"></script>
</head>
<body>
<h1>Open the console to view the results</h1>
View algorithmic-layouts.md

Algorithmic layouts

You are looking at the most important, and most abundant thing on the web. You can't see it, unfortunately, because it's very small… aaaaand it's invisible — so having a magnifying glass doesn't really help here. But still.

I'm talking, of course, about U+0020; not to be confused with the band U2, who are just as ubiquitous, but far less useful.

This unicode point, representing the humble space character, is between every word, in every run of text, on every page of the web. And it has a very special characteristic: it's not sticky like glue. If two words are neighbors but there's not enough room for both of them, the space will free the second word to wrap around and start a new line.

Before getting into flexible containers, viewport meta tags, and @media breakpoints this humble character is what makes the web fundamentally 'responsive'. That is: able to change the layout of its content to suit different devices, contexts, and settings. Browser text does this automa

@thysultan
thysultan / Middleware.js
Last active Apr 11, 2020
stylis.js/pull/#203
View Middleware.js
import {MS, MOZ, WEBKIT, RULESET, KEYFRAMES, DECLARATION} from './Enum.js'
import {match, charat, substr, strlen, sizeof, replace, combine} from './Utility.js'
import {copy, tokenize} from './Tokenizer.js'
import {serialize} from './Serializer.js'
import {prefix} from './Prefixer.js'
/**
* @param {function[]} collection
* @return {function}
*/
@thysultan
thysultan / WebGL-frameworks-libraries.md
Created Feb 9, 2019 — forked from dmnsgn/WebGL-WebGPU-frameworks-libraries.md
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
  • AwayJS: AwayJS is a graphics library for javascript written in typescript
  • SceneJS: An extensible WebGL-based engine for high-detail 3D visualisation
@thysultan
thysultan / v8.md
Created Jan 30, 2019 — forked from kevincennis/v8.md
V8 Installation and d8 shell usage
View v8.md

Installing V8 on a Mac

Prerequisites

  • Install Xcode (Avaliable on the Mac App Store)
  • Install Xcode Command Line Tools (Preferences > Downloads)
  • Install depot_tools
    • git clone https://chromium.googlesource.com/chromium/tools/depot_tools.git
    • sudo nano ~/.bash_profile
  • Add export PATH=/path/to/depot_tools:"$PATH" (it's important that depot_tools comes first here)
@thysultan
thysultan / gist:6941195937a3dcf7b123995d486ec51b
Created Jan 30, 2019 — forked from totherik/gist:3a4432f26eea1224ceeb
v8 --allow-natives-syntax RuntimeFunctions
View gist:6941195937a3dcf7b123995d486ec51b
Per https://code.google.com/p/v8/codesearch#v8/trunk/src/runtime.cc
%CreateSymbol
%CreatePrivateSymbol
%CreateGlobalPrivateSymbol
%NewSymbolWrapper
%SymbolDescription
%SymbolRegistry
%SymbolIsPrivate
@thysultan
thysultan / bench-instanceof-versus-typeof-megamorphic.js
Last active Jan 29, 2019 — forked from bmeurer/bench-instanceof-versus-typeof-megamorphic.js
Demonstrate the performance impact of using `instanceof` vs. checking for some existing property (in the megamorphic case)
View bench-instanceof-versus-typeof-megamorphic.js
// Copyright 2013-2019 Benedikt Meurer
//
// 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
//
// <https://www.apache.org/licenses/LICENSE-2.0>
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
View refs.js
// currentTarget is the current value i.e null/node while target is always the node the ref was attached to
// or vice-versa if matching event target/currentTarget sementics is of any merit.
function subscribe ({currentTarget, target, timeout = setInterval(() => {})}) {
assert(currentTarget instanceof Node || current === null)
assert(target instanceof Node)
// when a function is returned it is used when the ref is unmounted.
return () => setInterval(timeout)
}
View refs.js
// currentTarget is the current value i.e null/node while target is always node
function subscribe ({timeout = setTimeout(() => {}), target, currentTarget}, props, state, context) {
// when a function is returned it is used when the ref is unmounted.
return () => cleartimeout(returnValue)
}
View index.html
<script type="module">
import {h, render} from '//unpkg.com/dyo?module'
function handleLocation ({href} = location, {origin} = location) {
return href.replace(origin, '')
}
function handleClick (event, {href, children}, state, context) {
context.forceUpdate(history.pushState(event.preventDefault(), document.title = children, href))
}