Karl Herrick

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

The Web Is Dynamic

HTML, JavaScript, and CSS are key parts of the Open Web Platform as they assist in creating customized, yet reusable solutions that anyone might need to build high quality, robust web applications, without requiring unnecessary complexity.

In this small example, a few support libraries work together to provide efficient templating, as well as an implementation of React’s Hooks API, allowing us to use state of the art features, while still preserving compatibility with the wider ecosystem on the Web.

With the addition of script:

(async () => {
  const { html } = await import('https://unpkg.com/lit-html@^1.0.0/lit-html.js')
  const { component, useState } = await import('https://unpkg.com/haunted@4.7.1/haunted.js')

  const counter = () => {
    const [count, setCount] = useState(0);

    return html`
      <button type="button" @click=${() => setCount(count - 1)}>
        Decrement
      </button>
      <span id="count" style="margin: 0 2rem;">${count}</span>
      <button type="button" @click=${() => setCount(count + 1)}>
        Increment
      </button>
    `;
  }

  customElements.define('x-hook-component', component(counter));
})()

Some basic styles included:

x-hook-component {
  align-items: center;
  background: #2b2b2b;
  color: #fff;
  display: flex;
  justify-content: center;
  margin: 1rem 0;
  padding: 1rem;
}

And the element rendered, we can define new and interesting behavior without much trouble at all.

<x-hook-component></x-hook-component>

Being that custom elements and dynamic import are so widely supported now — adding functionality and content in this way is starting to make a lot more sense for many use cases — especially seeing how once loaded and cached, the cost to reload any support libraries seems barely noticeable.


Code Highlighting

It seemed like a neat idea to encapsulate syntax highlighting responsibilities for the various code snippets that I share at times, so I went ahead and wrote a custom element to help me take care of the job. To try it out, install x-postpress-code with your favorite package manager and import into your project. If you like going buildless [1, 2], load it from a CDN like unpkg or skypack:

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

Once registered, the web component requires a type attribute to identify which supported language should be highlighted. The content of the code itself can either be lazy loaded using the src attribute, or by including the source in the default slot surrounded by pre tags:

<x-postpress-code type="bash"><pre>
#/usr/bin/env bash
for file in *; do
  echo $file
done
</pre></x-postpress-code>

One nice side effect of defining the code this way, is that if JavaScript is disabled for whatever reason, the original is still rendered (although unhighlighted). Try it out at JS Bin, or checkout the project page for more information.


Fast Traxx Pi

I thought it was a good time to revisit trying to control an RC car’s handheld remote, so I returned to the community assistance I first started at and gave it a try. In the end, I just had to wire up some transistors to the remote control as well as a few resistors leading back to the GPIO pins on the Pi.

The software side is fairly straightforward as it implements basic driving functionality and requires only a few Node.js dependencies (the rpio library and an experimental one to handle keyup and keydown events). Running the main script from the github repo sets up four pins as outputs, and are triggered when the arrow keys are pressed. Ctrl+C can be used to exit.

Controlling the car directly would be more efficient, but as far as a proof of concept, doing it indirectly through the remote control works really well. Adding the Camera Module would be a good next step, but even at this point the process has got me thinking that a Pi Zero would be a nice addition to a platform like RC car that you can buy at the store — especially something like this Fast Traxx. Driving it with a keyboard over SSH is such a cool experience.