rsms

Binary Encoding

Note: This document is no longer being updated. Please see the normative documentation.

This document describes the portable binary encoding of the WebAssembly modules.

The binary encoding is a dense representation of module information that enables small files, fast decoding, and reduced memory usage. See the rationale document for more detail.

rsms

static unsigned char map[256] = {
        /* 0 1 2 3 4 5 6 7 8 9 A B C D E F */
/* 0x00 */ 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,  // <CTRL> ...
/* 0x10 */ 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,  // <CTRL> ...
/* 0x20 */ 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,  //   ! " # $ % & ' ( ) * + , - . /
/* 0x30 */ 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,  // 0 1 2 3 4 5 6 7 8 9 : ; < = > ?
/* 0x40 */ 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,  // @ A B C D E F G H I J K L M N O
/* 0x50 */ 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,  // P Q R S T U V W X Y Z [ \ ] ^ _
/* 0x60 */ 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,  // ` a b c d e f g h i j k l m n o
/* 0x70 */ 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,  // p q r s t u v w x y z { | } ~ <DEL>

rsms

// 1. Make sure you have imagemagick installed (`brew install imagemagick` on macos)
// 2. Visit https://www.figma.com/developers/api#authentication and click "Get personal access token"
// 3. Add your file links below, replacing the example links
// 4. Run with `FIGMA_API_TOKEN=YOUR_TOKEN_FROM_STEP_2_HERE node fig-thumbnails.js`

// [ host:string, filekey:string ][]
const fileKeys = `
https://www.figma.com/file/FILEKEY/
https://staging.figma.com/file/FILEKEY/
https://www.figma.com/file/FILEKEY/

rsms

Subject

RegExp that never finishes; hangs with 100% CPU. Easy repro

Repro steps

1. Run the attached script in V8/Chrome
2. Sample the process
3. Notice how it's stuck in v8::internal::NativeRegExpMacroAssembler::Execute

Expected outcome

The code to not take forever to finish

rsms

// measureFPS uses requestAnimationFrame to measure frame times and reports
// the average frames per second.
//
function measureFPS(report :(fps:number)=>void) {
  const samplesSize = 120       // total number of frame times look at (window size)
  const samples :number[] = []  // ring buffer; sliding window
  const reportAt = Math.round(samplesSize / 4)

  let samplesIndex = 0  // next index in samples
  let prevTime = 0      // last time value; frameTime = prevTime - time

rsms

function dominantColorRGBA(pxv :ArrayLike<int>, pxcount :int, stride :int) :RGBA {
  let cm = new Map<int,int[]>()

  // average and count RGB values
  for (let i = 0; i < pxcount; i += stride) {
    let r = pxv[i], g = pxv[i + 1], b = pxv[i + 2], a = pxv[i + 3]
    // key = (a << 24) + (r << 16) + (g << 8) + b
    let key = (r << 16) + (g << 8) + b

    // update or store entry in temporary map.

rsms

type EventHandler<T=any> = (data :T)=>void

export class EventEmitter<EventMap = {[k:string]:any}> {
  _events = new Map<keyof EventMap,Set<EventHandler>>()

  addListener<K extends keyof EventMap>(e :K, handler :EventHandler<EventMap[K]>) {
    let s = this._events.get(e)
    if (s) {
      s.add(handler)
    } else {

rsms

import { EventEmitter } from "./event"

const print = console.log.bind(console)

const _indexedDB = (window.indexedDB
                 || window["mozIndexedDB"]
                 || window["webkitIndexedDB"]
                 || window["msIndexedDB"]) as IDBFactory

rsms

Determining if a font is italic

To determine if a font is italic, you can look at fsSelection of the OS/2 table, checking the 0th and 9th bit:

For instance, here’s fsSelection for "Inter Medium Italic":

node -p '(129).toString(2).split("").reverse().join("")'
=> 10000001 == ITALIC | USE_TYPO_METRICS

rsms

import { Vec, RGBA } from './util'


interface OffscreenCanvas extends EventTarget {
  readonly width: number
  readonly height: number
  getContext(
    contextId: "2d",
    contextAttributes?: CanvasRenderingContext2DSettings
  ) :CanvasRenderingContext2D | null