Christian Kaindl

Designer, Software Engineer. Interested in all kinds of things.

Research on HTML audio - Day 1

This is the result of one day of research about HTML audio - the HTML element and the Web Audio API. I surfed through a number of MDN articles and references and looked at some libraries and tools. Lastly, I even made a little contribution to the MDN docs.

Articles (with short summaries)


  • Web Audio API example and streaming
  • Tips & tricks


  • HTML audio events
  • Create custom audio controls
  • Comp tables for audio Formats (at the bottom)


  • How to know which parts are buffered/were already played
  • TimeRange Object


  • Audio/Video manipulation and filters


  • Pratical instroduction into the Web Audio API


Lib: https://howlerjs.com/ (personal recomandation)
Just for fun: https://www.talater.com/annyang/
Lib: https://521dimensions.com/open-source/amplitudejs


Voice-Change-O-Matic: https://github.com/mdn/voice-change-o-matic

JS talk 'Enabling New Web Experiences'

Video: https://www.youtube.com/watch?v=yqZYAM2es9Q
by David Bryant: https://twitter.com/david_bryant
at JSConf: https://2018.jsconf.eu/


I like Mozilla. No, I love them. Hopefully I can attend the MozFest this year again. This talk was about some tech that is and was developed by the Mozilla Emmerging Technology Group.

Short summary (together with some other related things):

Deep Speech is awesome (also project Common Voice)

Rust (programming language) is now used in parts of Firefox and in

Servo, a new browser engine built from scratch, from which parts were already imported into Firefox (mostly since Firefox 57)

ASM.js and WebAssembly make the web faster and allow native code to be run in the browser

Note to myself: I definitely should look into Machine Learning at some point; and Rust

JS talk 'Write Code With Standard and ESLint'

Video: https://www.youtube.com/watch?v=kuHfMw8j4xk
by Feross Aboukhadijeh: https://feross.org/
at JSConf: https://2018.jsconf.eu/


I can use ESLint with the Standard linter config (for me only with the exception of the semicolon) and create a binary out of it that I can run on my project and help me get things clean.

Note to myself: Go start using this now!

Linters are here for 3 purposes:

  • Programming errors
  • Best Practises
  • Style conventions

Prettier only cares about the last one, style, thus it should be used together with linters, such as ESLint.

Tools talked about in this talk

Trello Super Powers Add-on v0.9 | Release Notes

This release packs some cool new things into the Trello Super Powers Add-on. For speed, here are the most notable changes:


  • Export Trello boards as CSV lists
  • Much smaller Add-on size
  • Added CONTRIBUTE.md for easier contribution (The code is now documented way better, and it is also clearer where one can start and whom to ask.)
  • Now translated into Spanish (thanks to @quiqueciria on GitHub)!
  • Resolved issue where an input field was visible at the bottom of the Trello board (that is used for the Copy to Clipboard feature)

Trello Super Powers is a WebExtension currently available for Firefox. Get it here -> https://addons.mozilla.org/en-US/firefox/addon/trello-super-powers/

CSV Export

You will now see a new buttons in you Firfox address bar (officially called Awesome Bar) that looks like a little thunderbold. When you click this icon a popup UI will present you some options and let't you easily exort the Trello board you are currently on. This new export feature let's you easily export any of your boards in the CSV format. CSV is an abbebiation for Comma Seperated Values. Such list can be useful when working with small data sets and are commonly used together with programs like Excel. Normally only available to Trello's paid users.

New button in the awesome bar

I have taken great care so the icon follows Firefox' new style guide Photon so the icon stays in good contrast with the other icons in the address bar. But for the icon to stand out a bit, it has a bit color added to it. Under the hood Trello Super Powers fetches the board data as JSON and then parses it to a csv file with Papa Parse. Thanks @az0 on GitHub for making a feature request!

The popup UI for this feature is rendered with Hyperapp, a totally awesome framework for buiding Web Apps. In the future I will also use Hyperapp for other UIs such as the settings page.

Smaller Bundle Size

Also in this release, even though features were added I managed to shrink its bundle size (and thus the size that has to be downloaded by the user) by ten fold! Instead of 1 megabyte (and with the new release 2 megabytes) it now only has about 100 kilobytes in size. This is largly due to asset optimisations for both the SVG and PNG images. For SVG optimization I used the awesome SVGOMG.

Now Translated Into 4 Languages

The Spanish translation came "last minute" by Quique Ciri (@quiqueciri on GitHub). Thank you so much for your time and effort. This means that TSP is now translated into its 4 most used languages! This contibution enables 55 more people (roughly 5% of all ~1000 TSP users are Spanish) to experience the Add-on in their native language. Of course, all other language's translations have been updated for the new export feature (except for French, it will be updated soon in a point release).

Trello Super Powers is a small but useful browser extension that adds awesome features to your Trello (trello.com) experience. It is free and open source, and is made in my spare time. If you want to contribute or have an idea for improvements, please get started here.

I am very grateful that roughly a thousand people use TSP everyday to be more productve and hope that it can continue to thrive in the future.