Experiments

Google Cast demo

Google Cast is pretty cool. Especially Chromecast, of course. You can cast pretty much any media on this super cheap device. But even better, you can build your own apps that run on the Chromecast.

To build an app, you need to create:

• A “sender” app which controls the casting
• A “receiver” app that runs on the Chromecast

Also, to test all of this in development, you need to register your device for development (super easy!).

Docs

dragger

A study in dragging and dropping in the browser.

Edge-rendered components

Wouldn’t it be awesome if you could just insert some dynamic elements on an otherwise static page? So you could just update the logged-in user’s name or add a country-specific discount when needed? Why yes, yes it would.

Just somehow render the needed HTML structure:

<edge-component title="My page" src="Country">
  <p>Not really sure where you're from...</p>
</edge-component>

Note that this (static) HTML is what users will see if no edge-rendering is done. It should work on its own - that way the edge rendering can be a “progressive enhancement” that should update a page but doesn’t have to update a page.

Then, create your actual component:

export const Country = (props, ctx) => (
  <div>
    <h1>{props.title}</h1>
    <p>Hello, user from {ctx.country}</p>
  </div>
);

This component is then compiled and sent to a Cloudflare Worker that acts as a proxy for your static content. It will receive the attributes of the element in the props object, and the request context in the ctx object, and update this part of the page in real-time.

Simple text editor

This is a test of the Filesystem API. It’s a very simple text editor. Use at your own risk… 😏

The Filesystem API is freaking amazing. With it you can magically open local files and also save them back! The API is in “Origin trial” from Chrome 78 onwards, and available as a flag in previous versions.

The API is pretty damn cool, if you ask me. This is a quite nice looking text editor with a contenteditable pre tag, and the code is not many lines long. Soon the days of native desktop apps are over! 😝

Technologies used

• Filesystem API

See more

Google developers post

Myday

See your Google calendar events for today.

Working domain

Requirements

• Google Cloud Platform project with Calendar API enabled
• API key and OAuth client for the project
• Private top-level domain for hosting (see note below)

Note: You need to authorize the OAuth client for a particular URL. This URL needs to be on a whitelisted domain, which in turn needs to be a private top-level domain.

This project also showcases using Google Sign-In to request for additional permissions on demand (incremental authorization). Note that it’s apparently not possible to bypass the account selection when doing this.

The Calendar API is restricted and requires validation by Google before usage. It still works without validation, but shows a very scary warning.

Quick start docs

PWA Weather App

An installable PWA that shows todays weather compared to yesterday.