Discover gists

Line wrapping in jsPDF

jsPDF is a low-level library for building PDF files in JavaScript. ~~It does not support multiline text.~~ It does, text accept array, just split with splitTextToSize

Based on: https://gist.github.com/AnalyzePlatypus/c54d520e9bd5b5f662aeb0276e3f01a4

Line wrapping in jsPDF

jsPDF is a low-level library for building PDF files in JavaScript. It does not support multiline text.

Here's a complete helper function based on the answers by @KB1788 and @user3749946 in this StackOverflow thread:

It includes line wrap, page wrap, and some styling control:

Stripe Checkout: Multiple Checkout buttons on the same page

Suppose you have a Stripe Checkout page setup to sell a product.

To link to your payment page, you must generate a Checkout button HTML snippet for display on your site. However, the default snippet only supports one Checkout button. You cannot have several Checkout buttons for the same product on the same page.

This gist modifies Stripe's generated snippet to support several buttons.

Using (and debugging) Pre-signed S3 URLS

Architecture - A Brief Overview

A Pre-signed URL is used to allow untrusted users to temporary access to private S3 resources. (Example: upload an image to a private S3 bucket).

The URL is a string consists of:

AWS URL of the object to be accessed, and
A signed base64 string describing the HTTP request:

Vue.js: Use Sentry.io without increasing initial bundle size

There's no questions about it: in the age of "fat" frontend clients, less bloat is better. A useful technique is to split off large libraries into separate Webpack chunks so the they don't take up space in your main bundle, delaying the initial load of your webapp. I like doing this with what I call the "installer pattern". Every split-out library gets its own "installer", an async function that loads the Webpack chunk, performs any initializations or configuration necessary, and then informs the relevant parts of your app that loading has completed.

Here's what that pattern looks like for installing the Sentry.io error reporting SDK:

First, add Sentry to your project:

	# CLI
	sudo apt update -y
	sudo apt install -y \
	git curl docker.io \
	build-essential pkg-config autoconf bison rustc cargo clang \
	libssl-dev libreadline-dev zlib1g-dev libyaml-dev libreadline-dev libncurses5-dev libffi-dev libgdbm-dev libjemalloc2 \
	libvips imagemagick libmagickwand-dev \
	redis-tools sqlite3 libsqlite3-0 libmysqlclient-dev \
	rbenv apache2-utils

	/*
	Usage:

	import getImageKitModifierQueryString from "getImageKitModifiers.js";

	const IMAGEKIT_CDN_ROOT = "https://ik.imagekit.io/my-app/";
	const myImageKey = "image.jpg";

	const modifierQueryString = getImageKitModifierQueryString({
	width: 45,

	readFileAsync(file) {
	return new Promise((resolve, reject) => {
	let reader = new FileReader()

	reader.onload = () => {
	resolve(reader.result)
	}

	reader.onerror = reject

	function convertPointsToUnit(points, unit) {
	// Unit table from https://github.com/MrRio/jsPDF/blob/ddbfc0f0250ca908f8061a72fa057116b7613e78/jspdf.js#L791
	var multiplier;
	switch(unit) {
	case 'pt': multiplier = 1; break;
	case 'mm': multiplier = 72 / 25.4; break;
	case 'cm': multiplier = 72 / 2.54; break;
	case 'in': multiplier = 72; break;
	case 'px': multiplier = 96 / 72; break;
	case 'pc': multiplier = 12; break;