Skip to content

Instantly share code, notes, and snippets.

View alfredwesterveld's full-sized avatar

Alfred Westerveld alfredwesterveld

View GitHub Profile
@muralikg
muralikg / background.js
Last active July 29, 2024 14:29
puppeteer screen capture demo. Currently records 10 second video. Change the timeout in background.js with your own logic to stop the recording when necessary. Try with `node export.js`
/* global chrome, MediaRecorder, FileReader */
chrome.runtime.onConnect.addListener(port => {
let recorder = null
port.onMessage.addListener(msg => {
console.log(msg);
switch (msg.type) {
case 'REC_STOP':
console.log('Stopping recording')
if (!port.recorderPlaying || !recorder) {
@nat-n
nat-n / Recipe-bundling-fonts-with-headless-chrome.md
Last active June 30, 2026 16:14
How to build a fontconfig bundle for adding arbitrary fonts to headless chrome independent of the OS. This is specifically useful for deploying headless chrome to AWS lambda where it is necessary to include fonts for rendering CJK (Chinese, Japanese, Korean) characters into the deployed bundle.

Building fontconfig

Start up a lambda-like docker container:

docker run -i -t -v /tmp:/var/task lambci/lambda:build /bin/bash

Install some dependencies inside the container:

yum install gperf freetype-devel libxml2-devel git libtool -y

easy_install pip

import {createServer} from 'http';
function waitForChromeToTerminate() {
let retry = 5;
return new Promise((resolve, reject) => {
const server = createServer();
server.listen(9222);
server.once('listening', () => {
debug('Port is free')
server.close(() => resolve());
});
@homaily
homaily / index.js
Last active December 16, 2022 13:13
Lambda download and cache gzipped file from s3
'use strict';
console.log('// loading function');
const aws = require('aws-sdk');
const s3 = new aws.S3({apiVersion: '2006-03-01'});
const gzip = require('zlib').createGunzip();
const fs = require('fs');
@jwilson8767
jwilson8767 / es6-element-ready.js
Last active March 14, 2026 16:35
Wait for an element to exist. ES6, Promise, MutationObserver
// MIT Licensed
// Author: jwilson8767
/**
* Waits for an element satisfying selector to exist, then resolves promise with the element.
* Useful for resolving race conditions.
*
* @param selector
* @returns {Promise}
*/
@michaelbukachi
michaelbukachi / script.js
Last active June 4, 2024 20:06
Fabric.js Textbox resize according to specified height
// load canvas with id 'c'
const canvas = new fabric.Canvas('c');
// use canvas height as the height limit
var limit = canvas.height;
var text = new fabric.Textbox('Some very long text');
// set initial values
text.set({
top: margin,
width: canvas.width,
@clungzta
clungzta / transparent_overlay_cv2.py
Created March 28, 2017 10:20
Example for overlaying a transparent image onto a background image using cv2
import numpy as np
import cv2
img = cv2.imread('background.jpg')
overlay_t = cv2.imread('foreground_transparent.png',-1) # -1 loads with transparency
def overlay_transparent(background_img, img_to_overlay_t, x, y, overlay_size=None):
"""
@brief Overlays a transparant PNG onto another image using CV2
@krisselden
krisselden / trace-to-mp4.js
Last active April 6, 2025 09:18
Make an mp4 out of a Chrome DevTools trace with screenshots.
const fs = require('fs');
const path = require('path');
const spawn = require('child_process').spawn;
const FPS = 60;
const MICROSEC_PER_FRAME = Math.round(1000000 / FPS);
if (process.argv.length < 3) {
console.log(`node ${path.relative('.', process.argv[1])} [DevToolsProfile]`);
process.exit(1);
}
let traceFile = path.resolve(process.argv[2]);
@paulirish
paulirish / what-forces-layout.md
Last active September 9, 2026 06:11
What forces layout/reflow. The comprehensive list.

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics
  • elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
@atdt
atdt / wpt-side-by-side
Created August 18, 2015 01:46
Generate a side-by-side comparison video from two WebPageTest runs.
#!/usr/bin/env bash
#
# wpt-side-by-side
# ~~~~~~~~~~~~~~~~
# Generate a side-by-side comparison video from two WebPageTest runs.
#
# Usage:
# wpt-side-by-side WEBPAGETEST_URL_1 WEBPAGETEST_URL_2
#
# Requirements: