Space-efficient Embedding of WebAssembly in JavaScript

Posted on February 20, 2021

Recently, I came across a blog post about converting parts of a JavaScript library into WebAssembly. The part that interested me the most was a section about efficiently embedding the WebAssembly binary into the JavaScript code such that the library could be distributed as a single file, instead of the usual method of providing the WebAssembly binary as a separate file. This is accomplished by Base64-encoding the WebAssembly binary as a string and including the resulting string in the JavaScript file. Unfortunately, this significantly inflates the total file size, since the Base64-encoded string does not compress nearly as well as the original binary. To mitigate this issue, the blog post author had the clever idea of gzip-compressing the binary prior to Base64-encoding it and using the zlib.js JavaScript library to decompress the binary client-side, after undoing the Base64-encoding. While this significantly reduced the size of the Base64-encoded WebAssembly binary, it required ~6.5 kB for the decompression code, after gzip compression.1

While I liked the idea of compressing the WebAssembly binary prior to Base64-encoding it, I thought there must be a way of decompressing it with a smaller decompression code. The simplest change would be to use a raw Deflate-compressed payload instead of one encapsulated with gzip, as the zlib.js library also provides a decompression function for this, which is only ~2.5 kB after gzip-compression, saving ~4 kB. However, this is still excessive, since it shouldn’t be necessary to provide a Deflate decompression function as web browsers include such functionality. Although such decompression functionality isn’t exposed directly to JavaScript, PNG images can be decoded from JavaScript, and PNG images use Deflate compression. Thus, I decided to encode the WebAssembly binary as a grayscale PNG image, Base64-encode the PNG as a data URI, and include the resulting string in the JavaScript file. Continue reading →

  1. The author mentioned 12 kB of decompression code, but that was without gzip-compression of the JavaScript code.  ↩

Posted in | Tagged , , , | Leave a comment

Update on Figure Caption Color Indicators

Posted on October 31, 2020

Last year, I published a blog post on figure caption color indicators. The positive feedback I received on it from a number of individuals prompted me to revisit the subject. At the time, I did not have a good way of locating published examples of such caption indicators and was only able to locate a few published examples with shape indicators but none with color indicators. When thinking about revisiting the subject, I had the epiphany that although searching for such indicators in the published literature is next to impossible, searching in the LaTeX source markup for papers is not. As arXiv provides bulk access to the TeX source markup for its pre-prints, this provided a large corpus of manuscripts to search through. After finding examples in pre-prints, I was then able to see if the indicators survived the publication process and was thereby able to locate well over one hundred examples of color line or shape indicators in the figure captions of published academic papers. Continue reading →

Posted in | Tagged , , , , , | Leave a comment

Pre-calculated Line Breaks for HTML / CSS

Posted on May 25, 2020

Although slowly improving, typography on the web pages is considerably lower quality than that of high-quality print / PDF typography, such as that produced by LaTeX or Adobe InDesign. In particular, line breaks and hyphenation need considerable improvement. While CSS originally never specified what sort of line breaking algorithm should be used, browsers all converged on greedy line breaking, which produces poor-quality typography but is fast, simple, and stable. CSS Text Module Level 4 standardizes the current behavior as the default with a text-wrap property while introducing a pretty option, which instructs the browser to use a higher quality line breaking algorithm. However, as of the time of writing, no browsers supported this property.
Continue reading →

Posted in , | Tagged , , , , | Leave a comment

A Case Study in Product Label Regressions

Posted on March 29, 2020

Sometime last year, the Shop & Shop and Giant (of Landover) grocery store chains began introducing redesigned packaging for their store brand products. The two chains share a parent company and share branding, so the labels only use the shared logo without a brand name. The old label designs heavily featured a white background, which made them easy to locate in the store.1 The new brand identity is less distinct, but whether it’s better or worse is a matter of taste. However, there are specific design decisions that were made on some of the labels that have fundamental issues.

In particular, I will focus on the labels for canned vegetables. As one would expect, both the old and new label designs feature the name of the vegetable along with a picture of a “serving suggestion.” Since many vegetables are similar in color, it is often easier to find one’s desired vegetable on the shelf by looking for the name, especially when a particular vegetable comes in multiple variants, such as green beans (whole, cut, diagonally cut, and French style). The old design featured a plain sans-serif font in a dark color on a solid white background, resulting in good contrast and readability. The new design, however, is a clear regression; it trades the consistent, easily readable font for a hodgepodge of different heavily-stylized display fonts on a busier background with lower contrast, which results in much worse readability. This loss of readability makes it take longer to locate a particular product on the shelf.

No salt added green beans cans: old design on left, new design on right Continue reading →

  1. It’s the closest I’ve seen to what’s suggested by xkcd: Brand Identity.  ↩

Posted in , | Tagged , , , , | Leave a comment

Color Cycle Survey Update

Posted on January 31, 2020

Since my last update on the Color Cycle Survey, there have been no drastic changes, but responses have continued to trickle in. There are now ~13.7k total responses, with ~6k responses each for the six color and eight color components. This long-delayed—and somewhat brief—post serves as an update to my previously published six color analysis, while also extending it to eight colors.

I have only made minor changes to the previously detailed analysis procedures (see previous set ranking and order ranking posts for details), but there are now ~50% more responses, which has helped with training stability and has reduced uncertainty between different models in the network ensemble. The figure below shows the fifteen lowest ranked six-color color sets on the left and the fifteen highest ranked six-color color sets on the right.

Six-Color Ranked Color Sets Visualization Continue reading →

Posted in , | Tagged , , , , , , | Leave a comment