Karl Herrick

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

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.


Web Components

Screenshot of x-weather Web Components

When I first started learning HTML I remember the delight I had after applying only a little markup and seeing the results after reloading. Even as new techniques were developed to manipulate the page, elements being created and then falling out of usage, and other ways of representing tags emerging, the platform’s ability to organize a large amount of content in a friendly way remains a key feature. With Web Components now, designers and developers are given a unified way to create and consume new HTML.

Their viability on the evergreen Web increased when a unified way to share presented itself after industry favored ES6 modules over HTML imports (similar functionality is being rethought) and an NPM packaged frontend showed itself more appealing. Polymer moved in this direction also. Templates are now fairly ubiquitous, and the main API used to build modern Web Components has shipped to production.

So what is a modern Web Component?

They are made using “three main technologies, which can be used together to create versatile custom elements with encapsulated functionality that can be reused wherever you like without fear of code collisions.” – MDN web docs.

These three are listed as, Custom Elements, Shadow DOM, and HTML templates. When used by the consumer of the Web Component, the tag essentially has to be lowercase, contain a hyphen, can contain custom attributes, and cannot be self closing. For example:

<x-weather
  appid="NOT_A_REAL_API_KEY"
  host="api.openweathermap.org"
  location="San Fransisco, California"
>
  <x-current scale="F"></x-current>
  <x-forecast days="2" scale="F"></x-forecast>
</x-weather>

For my own experimentation I wanted a reproducible way to view on non-native browsers, so I put together a small project that can include the required polyfills and transpile back to ES5 for a starter site (or singular component). It isn’t intended for use in a production setting but I did end up building a small set of weather components with it. Other than that, I’ve been reading on best practices and learning more about Shadow DOM.

While I’m hopeful for better server side rendering support and will continue to watch how the future looks in regard to React, the thought of composing a site with a text editor, a few tags, and the F5 key sounds a bit refreshing. 🙂


Testing a PWA with Lighthouse

Screenshot of audit tab in Chrome of Lighthouse performance testing

Adding the Audits panel and powering it by Lighthouse was a good move by the Chrome team. It is easier than ever to get a basic check on how well web apps are performing according to pre-defined settings for network and cpu throttling. It also has general mobile emulation. Although there is certainly room for improvement on this site (hosting it closer to where it gets the most traffic from and work on optimizing images would be logical next steps for more performance gains) the initial results seem promising.

You can also run it from the command line, so I thought it might be interesting to get it setup on top of the minimal continuous integration pipeline I have implemented on Docker and Travis CI.

On Google Developer’s Progressive Web Apps Training site, it is explained that Lighthouse tests if your app:

  • Can load in offline or flaky network conditions
  • Is relatively fast
  • Is served from a secure origin
  • Uses certain accessibility best practices

For more information, a good resource to start learning is the Introduction to Progressive Web App Architectures on Google Developer’s Web Fundamentals page.