PierBover

# create the pem files

openssl req -x509 -newkey rsa:2048 -nodes -sha256 -subj '/CN=localhost' -keyout mydomain-key.pem -out mydomain-cert.pem
mkcert -install
mkcert -key-file mydomain-key.pem -cert-file mydomain-cert.pem 127.0.0.1 localhost "*.mydomain.dev" mydomain.dev

echo "Certs created!"

# Convert PEM files to PFX format
openssl pkcs12 -export \

PierBover

PierBover

openssl req -x509 -newkey rsa:2048 -nodes -sha256 -subj '/CN=localhost' -keyout localhost-key.pem -out localhost-cert.pem
mkcert -install
mkcert -key-file localhost-key.pem -cert-file localhost-cert.pem mydevdomain.com localhost 127.0.0.1

PierBover

Reading waveform data in ffmpeg

When working on an audio player, I wanted to extract the audio waveform data to paint the audio waveform dynamically in the browser on a <canvas> element.

Initially I used the bbc/audiowaveform package but this proved problematic for a number of reasons. First I wasn't able to install that package (or build the binary) in macOS for local dev. The other big issue is that I was only able to figure out how to install it on Ubuntu, so I couldn't use it in Alpine (for Docker images) or other environments like cloud functions.

Initial approach

I found out from these docs it's possible to paint a waveform with ffmpeg by extracting raw audio data:

PierBover

const elements = [];
const events = [];

window.addEventListener('pageshow', (event) => {    
  const navigationType = window.performance.getEntriesByType('navigation')[0].type;
  if (navigationType !== 'back_forward') return;
  
  elements.forEach((element, index) => {
    element.dispatchEvent(new Event(events[index], {
      bubbles: true,

PierBover

openssl req -x509 -newkey rsa:2048 -nodes -sha256 -subj '/CN=localhost' -keyout localhost-key.pem -out localhost-cert.pem
mkcert -install
mkcert -key-file localhost-key.pem -cert-file localhost-cert.pem localhost 127.0.0.1

PierBover

Using Svelte in a Vercel serverless function

The easiest way of using Svelte for SSR in Node is by using svelte/register. This allows to require .svelte files without any bundling and render HTML, CSS, etc.

This is the example from the docs:

require('svelte/register');

const App = require('./App.svelte').default;

PierBover

const cache = caches.default;

addEventListener("fetch", (event) => {
    try {
        const request = event.request
        return event.respondWith(handleRequest(event))
    } catch (e) {
        return event.respondWith(new Response("Error thrown " + e.message))
    }
});

PierBover

<script>
  import keepAlive from "./action.js";
  import Component from './Component.svelte';
</script>

<div use:keepAlive={{id: 'some-manual-id', componentClass: Component}}/>

PierBover

CreateFunction({
	name: 'GetIndexValuesObject',
	body: Query(
		Lambda(
			['indexRef', 'indexValuesArray'],
			Let(
				{
					keys: Let(
						{
							indexDoc: Get(Var('indexRef')),