Karl Herrick

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

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}"

Experimenting with x-postpress

x-postpress screenshot in the devtools

While building using the custom elements v1 standard is achievable in a normal workflow, high quality libraries providing a wrapper on top of the standard seem like a more productive choice for my usage—especially any that offer a unified way to support Internet Explorer 11. After investigating a few, I decided to give LitElement a closer look. The guide says that it “is a simple base class for creating fast, lightweight web components that work in any web page with any framework.” I want that, and it’s coming from the Polymer project, so it seems like a good choice.

The small Web Component I built to try it out has its main functionality in the render method. It has the primary job of returning a template composed of styles, slotted content, and the articles loaded using the until directive from lit-html.

return html`
  ${styles}
  <slot name="articles"></slot>
  ${until(
    articles({
      apiUrl: this.apiUrl,
      siteUrl: this.siteUrl
    }),
    loading
  )}
`

All of the content becomes encapsulated within the x-postpress element, with the styles inside of the shadow root exposed through CSS custom properties.

x-postpress screenshot in the devtools

When used by the consumer, WordPress posts are fetched from the REST API. Try it out by adding the following script tag:

<script type="module" src="https://unpkg.com/x-postpress"></script>

Then declare the x-postpress element with the apiHost attribute set to the appropriate WordPress installation. There are other attributes that can be set to control the requested results. In the example below, the per_page attribute specifies that only one article for each “page” in the payload should be returned.

<x-postpress
  apiHost="https://content.example.com"
  per_page="1"
>
</x-postpress>

The repository also includes a few basic unit and integration tests. These start on Travis CI after a pull request is issued on GitHub. While the Chrome and Firefox tests are executed inside of a Docker image (Mocha for unit and Puppeteer for integration), unit tests are also sent to Sauce Labs for Windows and macOS browser testing.

I can see the potential in having all of the tests run there as they support a wide variety of platforms and configurations. Additionally, thorough mobile testing is hard (especially at any scale), so it is nice to see they offer help for open source projects.

The most exciting part of the whole thing in my opinion is its shareability. Whether loading the element in a script tag, or including it in a project as part of a build step—getting the results into the browser is easier than ever (based on my past experience anyway). For a live example, try it out at CodeSandbox.