Last year just before the Chrome Dev Summit, Miguel Casas came up to me and showed me something that blew my mind: Face Detection in the browser using the Shape Detection API. Shortly after that Barcode Detection was added that allowed me to update my QR Code scanner so that I no longer had to include a massive (albeit awesome) port of a QR scanning library.
The Shape Detection API is still in development, and neither the FaceDetection nor the Barcode Detection API’s are available outside experimentations (you need to enable “Experimental Web Platform features” in chrome://flags) but it is a very exciting space to watch and see another platform capability being opened up to developers and users on the web.
Within the last 6 months, it felt like a good time to get on board properly with Web Components so I’ve been toying around with bits and pieces. I’ve been thinking about the ecosystem as a whole and I’ve also recently been creating a few elements.
One thing that is really unclear to me is that there is no defined best practice for how to include styles and templates (HTML) with your custom element which means as a consumer of Custom elements you are at the mercy of what the component developer thinks is best.
Following on from my list of the things that I am [excited about on the web in 2017](/2017-exciting-times/) here are three predictions of things that I think will happen in 2017 based off reading tea-leaves and random musings of things that I have 0 direct knowledge of but I might do if I was 'them'.
I’ve been building out a quick sample that lets you quickly hook up an web push with a simple cURL request. The principle being that I would like to get integrations with third party APIs that currently don’t support Web Push in any way.
The thing about webhooks is that they are not standarised in any way other than you will most likely get a blob of data in a POST HTTP request, for example Travis CI application/x-www-form-urlencoded encodes the request data, whereas Github will just put a JSON object as the POST payload.
This is mostly for future reference. I recently built a tool trims a video and I needed to convert from seconds to the time-code format that FFMPEG uses of hh:mm:ss.ms
const secondsToTimeCode = function(timeInSeconds) { const zeropad = function(number) { return (number <= 9) ? `0{$number}`: number; } const hours = Math.floor(timeInSeconds / 3600) const minutes = Math.floor((timeInSeconds - (hours * 3600)) / 60) % 60; const seconds = timeInSeconds % 60; return `${zeropad(hours)}:${zeropad(minutes)}:${zeropad(seconds)}`; }; It worked well for what I needed.
In a recent project building a web push service I wanted to have my UI respond to application level events (semantically if you will) because there were a couple of components that require information from the system but are not dependent with each other and I wanted them to be able to manage themselves independently of the ‘business logic’.
I looked around at lots of different tools to help me, but because I frequently have a heavy case of NIH syndrome and the fact that I think people can implement their own infrastructural elements pretty quickly, I decided to quickly knock-up a simple client-side PubSub service — it worked pretty well for my needs.
The other week I talked about Face Detection via the Shape API that is in the Canary channel in Chrome. Now barcode detection is in Chrome Canary too (Miguel is my hero ;)
Barcodes are huge! they are on nearly every product we buy. Even the much maligned QRCode is huge outside of the US and Europe. The barcode and the QRcode provide a simple way for you to bridge the physical world and the digital world by transferring small amounts of data between the medium and you.
I recently built a Progressive Web App that takes a screencast from your Android device and then wraps the video in a device frame using FFMPEG.js like so:
I also managed to sort out building ffmpeg.js so that with relative ease, create custom optimized builds of ffmpeg and run it in the browser.
The two things together I think present a lot of opportunities to build some great new small Progressive Web Apps that push what we think the web is capable of with regards to manipulating audio and video.
FFMPEG.js is an amazing project and it helped me building one of my latest projects: Device Frame. It basically builds ffmpeg (with a good set of defaults to keep the size small — as small as it can be). If the default build doesn’t support the filters and encoders you need, then you will need to build it yourself.
This is more of a note for me in the future, but this is what I did to get it working.
As anyone who works for a US based company but lives in the UK knows, Thanksgiving is a wonderful time of the year. It is that point in the year when we can actually get work done without a barrage of emails hitting us in the morning and in the evening.
This Thanksgiving free-time I wanted to knock a project off my to-do list that had been sitting around for a while: a generic web-push web-hook end point.
This is more for my own future reference and noodling with.
I converted it from the aco file with https://github.com/websemantics/Color-Palette-Toolkit
Pomegranate #f44336
Lavender blush #ffebee
Pastel Pink #ffcdd2
Sea Pink #ef9a9a
Sunglo #e57373
Burnt Sienna #ef5350
Cinnabar #e53935
Persian Red #d32f2f
Tall Poppy #c62828
Thunderbird #b71c1c
Vivid Tangerine #ff8a80
Yesterday I posted about an update to my Service Worker caching strategy. If you look at my ServiceWorker you will see that there is more to it than just the fix I had to make for storing data in the Cache.
I have also introduced a URL routing framework to simplify my logic in the service worker when dealing with different kinds of requests. For example, I don’t want to cache requests to Google Analytics or Disquss, and rather than make my onfetch handler a lot more complex, it was easier to be declarative about the routes that I wanted to manage and then control the logic for those independently from the other routes.
About 5 months ago I documented my Service Worker caching strategy and it was noted that it wouldn’t work in Firefox because of my use of waitUntil. It was also noted that, well, my Service Worker didn’t actually work. It worked for me or so I thought, but every so often on a new page you could see it error and then quickly re-fetch from the network.
I made a number of changes to make the code more readable, however I didn’t solve the actual issue and it turns out my understanding of cache.
