HTML-TIME

https://setyourwatchby.netlify.com

A ludicrous experiment triggered by a playful tweet:

free side project idea: HTML-only static site generated clock that deploys a new version to @netlify every minute – @zachleat

What does it do?

• Server-side, an Edge Function determines the user's location based on their IP address and modifies the returned HTML to display the correct local time.
• That's all.

Previously

In its original form, it demonstrated something slightly different:

• It built a page with the local time for a variety of timezones. (correct at build time.)
• When served on Netlify's global CDN, visitors were routed to the correct page for them based on the country they access from.

That was then, this is now

Prompted by that idea by Zach, I made this site as a demonstration of how frictionless and risk-free regular automated deployments could be. It automatically redeployed every minute of every day. It has been a helpful resource for demonstrations. But as the site shows, time moves on.

Edge Handlers have brought an easier and less wasteful way to do this. By modifying HTTP responses on the fly to provide dynamic content, we don't need to redeploy every minute to make a server-generated clock! And the likes of Netlify's CI/CD and automated deploys have become far more accepted as the norm, so there is less need to make this point.

Localised and modified on demand

Now the time you see on this site has been rendered on demand by an Edge Function. Edge Functions offer a very low latency serverless runtime at a location on the CDN geographically close to the requesting user. Very handy and still without the need to manage and maintain a server. It's just a function.

I miss the old way

Me too. It was a bit of fun. But it was wasteful to keep it alive forever for a demo.

What on earth for?

Since we can run this build so regularly and with such confidence on Netlify, we rebuild and deploy automatically every minute.

Are you an idiot?

Possibly. But it turns out that this is a nice example of how the country-specific CDN routing is on Netlify thanks to its concise, yet powerful _redirects API. (docs)

Have a poke around!

Developing locally

First ensure that you have the Netlify CLI installed to provide local development and testing of Edge Functions

# Install the Netlify CLI
npm i -g netlify-cli

# clone this repository
git clone [email protected]:philhawksworth/html-time.git

# move into the project and install the dependencies
cd html-time
npm i

# run a local development server with auto-rebuild and hot reloading
ntl dev

Deployed to Netlify