Karl Herrick

A technologist and web developer

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.


Going offline with HTML

The time I’ve put into developing postpress seems like it has been well spent. I have enjoyed working with the code and appreciate the experiences gained in going through the various exercises.

For example, after applying a web app manifest to the project and implementing a service worker, web development seems fun again. Not that I wasn’t ever into it, there’s just something exciting about seeing your hard work yield new and interesting results.

The project now has a fast initial render from a blank cache (using server side rendering), and the articles and portfolio components have offline capabilities, as well as near instant loading on a repeat visit to a page. The “Add To Homescreen” functionality varies between browser and OS, but I can see how vendors might utilize this feature in the future to promote PWAs that conform to a high enough standard.

 

 

Most importantly in my mind is that it is all working right now. It behaves as a web app when it should, and just like a traditional website when it counts. Combined with what seems like an eventual adoption of WebAssembly and Web Components as a standard part of the Open Web Platform, it’s a really awesome time to be developing against it, as it feels more alive than ever. 🙂


React, Redux, and using the WordPress REST API

Web application development using React, Redux and server-side rendering has been exciting. A great general resource I’ve found on the topic is a book from O’Reilly Media titled, “Learning React – Functional Web Development with React and Redux.” It lays out the basics, while describing other helpful tools that one might use in a fully assembled application (Jest, ESLint, and React Router make appearances in this book as well).

One of the things I like most about the ecosystem is the number of resources offered. Not interested in reading a book? Checkout the React and Redux documentation. They’re both excellent. Additionally, there are plenty of videos (1, 2, 3), tutorials, posts and even a CLI tool, just to get started.

To explore some ideas in this space, I decided to bundle a setup that would consume portions of the WordPress REST API. While not trying to get too fancy, I’ve affectionately titled it, postpress and styled it to look similar to this site. Check it out at the project page on GitHub.

A screenshot of postpress.


Loading ...