Karl Herrick

A technologist and web developer | Posts about technology encountered along the journey.

Compiling pwgen to WebAssembly

A progressive web app with pwgen.

While there are many ways to generate strong passwords, I’ve been a fan of using pwgen for systems that I stand up. It’s usually been an “apt-get install” away, but there have been times while away from a Linux machine where I couldn’t access it like I normally would; right on the cli.

After coming across a Docker image that sets up most of the environment to compile a C/C++ project using Emscripten, it got me thinking that it might be easier than I thought to build a Wasm version of the original pwgen. It progressed something like this, “I can currently use it on the Linux command line—but with WebAssembly on Node.js and Wasmer, I could run it on Mac OS X, Windows, and really anywhere a runtime isI think I can wrap this in a custom element.”

So, I gave it a shot, and I couldn’t be more pleased with how easy the results are to use and in how many environments it runs on. Does the system already have a recent setup of npm/npx installed? Start generating passwords with the command below (wapm is similar), or pass “‐‐help” for additional options to be printed.

npx pwgen

What about from the browser? The PWA works offline, includes a minimal view for displaying passwords, some sliders to adjust the settings, and the x-pwgen Web Component that wraps up everything. At first I was a bit surprised that the JavaScript wrapper that Emscripten provides to load the module is larger than the Wasm itself, but it still loads fast. To use it in React, Angular or anywhere else HTML likes to hide out, declare the following:

<x-pwgen></x-pwgen>

<script type="module">
  import 'https://unpkg.com/pwgen'
</script>

Checkout the project at Github, or browse some demos [1, 2] to find out more.


PHP Web Component

WebAssembly becomes the fourth language for the Web which allows code to run in the browser

I’ve been enjoying learning a little bit more about WebAssembly. The journey has been long and a bit sporadic as my first introduction to the concepts were with Emscripten shortly after the release of asm.js. Since then, the scope of the project seems to have widened and the landscape has grown — it’s more than the browser [1, 2, 3, 4].

With that said, here are a few projects that have caught my attention for use in that environment:

…wait, PHP in the browser. I’ve always wanted that.

So just for fun I decided to clone PIB, build with the latest versions, and wrap it up as Web Component called <x-php>. In my opinion, the most exciting part is defining the contents of the PHP script inside of an actual HTML script tag and passing it along inside of the default slot. The MIME type I chose for the type attribute is debatable, but it seems to work in the browsers I’ve tested it in.

Try it out live in the browser or in an HTML document:

<x-php>
  <script type="text/php">
  <?php
    $it = new RecursiveIteratorIterator(
      new RecursiveDirectoryIterator('.')
    );

    foreach ($it as $name => $entry) {
      echo "$name <br/>";
    }
  </script>
</x-php>
<script>
  window.__XPHP_REMOTE_PACKAGE_BASE =
  'https://kherrick.github.io/x-php/assets/'
</script>
<script
  src="https://kherrick.github.io/x-php/dist/esm/XPHP.js"
  type="module"
></script>

XWeather App

Rendering x-weather along with some of Polymer’s App Layout custom elements makes it look a lot better and paves the way for additional features. Also, learning more about various ways to isolate component functionality and exposing desired behavior has been appreciated. Implementing some kind of location search functionality seems like it would be a good next step.

State management has been particularly interesting to me, especially when various caching systems are involved, so there has been a bit of opportunity to gain additional understanding in this area as well. Even with all of the JavaScript used the initial Lighthouse and WebPageTest scores are promising:

XWeather App Lighthouse performance overview.