Karl Herrick

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

PHP inside a 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 an example 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.

Racing with the Pi

Car ready to race

The Raspberry Pi continues to deliver on cool projects to spend time with the family on. As a non-serious entrant for this year’s wood car race, we used a Pi Zero, Pi Camera Module, USB Wi-Fi adapter, and UPS PIco to send it down the track while streaming the video.

We were able to build simply and get it under “regulation weight” by limiting the amount of hardware attached, and fastening everything with thumb tacks and hot glue. There’s a lot of functionality on the UPS PIco that could be used to make the process easier, like accessible pins, push buttons, LEDs, and a tiny speaker—but I opted to SSH into the car and run the following script manually to start the video stream:

#!/usr/bin/env bash

printf 'connect to http://0.0.0.0:8080/\n'

raspivid -o - -t 0 -hf -w 640 -h 480 -fps 24 | \
  cvlc -vvv stream:///dev/stdin \
    --sout '#standard{access=http,mux=ts,dst=:8080}' :demux=h264
Preview to race video

It was saved using a Mac, running VLC on the same wireless network:

#!/usr/bin/env bash

readonly HOSTNAME=piracecar
declare TIMESTAMP

TIMESTAMP=$(date +'%Y-%m-%d_%H-%m-%S')

/Applications/VLC.app/Contents/MacOS/VLC \
  -I rc http://${HOSTNAME}:8080 \
  --sout="#std{access=file,mux=mp4,dst=${TIMESTAMP}.mp4}"