Stay in the loop.
I'm trialing a newsletter. Join for monthly insights into web dev, Chrome, and the open web.
3 min read
Building a simple PubSub system in JavaScript
In this post, I share a simple client-side JavaScript PubSub system I built. Motivated by the Not-Invented-Here syndrome and the desire for independent UI components, I created a lightweight event manager called EventManager. It allows components to communicate without direct dependencies by publishing and subscribing to named events. While similar to tools like Redux, this approach avoids separate state management, leveraging the browser's existing state. The code is available on GitHub.
3 min read
Barcode detection using Shape Detection API
I'm excited to share that barcode detection is now available in Chrome Canary via the Shape Detection API! This feature, along with QR code detection, offers a standardized way to access device hardware and bridge the physical and digital worlds. It's especially useful for mobile, eliminating the need for special apps just to scan barcodes. The API is simple: use
BarcodeDetector.detect() with an image input to get a promise resolving to a list of barcodes. I've already integrated this into my QR Code Scanner App, and the ability to use it in worker threads is a huge bonus. It's a very promising addition to the web platform and I'm looking forward to seeing what people build with it!
2 min read
Ideas for web apps with FFMPEG and ffmpeg.js
I've created a Progressive Web App using FFMPEG.js that applies device frames to Android screen recordings. I've also streamlined the ffmpeg.js build process. This opens up exciting possibilities for building powerful web apps for audio and video manipulation. Many existing web-based video tools are outdated and ad-heavy. I'm interested in creating smaller, focused PWAs, each performing a specific task efficiently. I'm planning to build several apps based on this, such as video trimming, format conversion, watermarking, resizing, and splicing. The codebase from my Device Frames project provides a good starting point. I invite others to collaborate on this effort.
1 min read
Building ffmpeg.js for Ubuntu
Building ffmpeg.js, a tool I used in my project Device Frame, can be tricky if you need custom filters and encoders. This post details the steps I took to successfully build it on Ubuntu, including installing dependencies, cloning the repo, setting up Emscripten, and running the build. I also included solutions to some common errors encountered during the process.
9 min read
Designing a Web Push Service
This post details the creation of a generic web-push webhook endpoint. Motivated by the desire for a streamlined notification system for various web services, I built a system that allows me to receive push notifications without needing each service to individually support web push. The system consists of a front-end client, a service worker, a front-end server, a subscription service, and a send service. The front-end client manages subscriptions and provides a unique URL endpoint. The service worker displays notifications. The front-end server handles subscription data and message routing. The subscription service persists subscription information. The send service encrypts and delivers messages to the push service. While I anticipate needing to retire this as more services natively support web push, I hope this example serves as inspiration for others looking to implement similar functionality.
4 min read
Material colour pallette
This blog post showcases a Material Design color palette, converted from an Adobe Color (.aco) file using the Color Palette Toolkit. It's primarily for personal reference and includes a visual representation of each color along with its hex code. The palette covers a wide spectrum of colors, from vibrant reds and pinks to various shades of purple, blue, green, yellow, orange, brown, gray, black, and white.
3 min read
Service Worker Routing
In this post, I discuss a new routing framework I've added to my service worker. It's based on my older LeviRoutes project and allows me to handle different URL patterns separately. This is much cleaner than a complex
onfetch handler, and lets me easily manage things like requests to analytics services and my caching strategy. While sw-toolbox is a great alternative, I enjoyed the flexibility and learning experience of building my own. I encourage you to check out the code and consider routing in your own service workers.
2 min read
My blog's Service Worker and Caching Strategy Part 2
In this follow-up post, I've revised my blog's Service Worker and caching strategy to address previous issues, particularly the Firefox incompatibility due to the use of
waitUntil and a misunderstanding of cache.put. The updated strategy now correctly fetches from the network, caches the result, and serves content from the cache, falling back to the network request if not found. The code has also been improved for readability and reliability.
1 min read
GRPC + Google Cloud: Cannot find module grpc_node.node
This is a note for how to fix the above error because it annoyed me!