Forem: Marco Colli

Building an extremely accurate UTC clock on the web (without trusting the client clock)

Marco Colli — Tue, 29 Jul 2025 14:49:55 +0000

Displaying the current UTC time in a browser looks trivial, until you care about accuracy:

Client clocks drift and they are not always a reliable source of information.
Tabs throttle timers.
Networks add latency.

Overview

In this post we’ll present a design that:

fetches authoritative time from your server (not Date.now())
uses performance.now() to track elapsed time with a monotonic clock
renders instantly and smoothly via requestAnimationFrame() (no setInterval())
compensates for network latency
handles the real‑world details that make the difference between “pretty good” and “rock solid”.

The algorithm

Sync: Fetch the server’s current UTC.
Adjust for latency: Estimate one way latency (≈ RTT/2).
Save a local baseline: Record start = performance.now() at the moment the response arrives.
Simulate time: At any later instant, compute

   estimated_time = server_utc_at_response + one_way_latency + (performance.now() - start)

Render: Use requestAnimationFrame(update) to reflect the current second, updating the DOM only when the displayed second changes.

This yields instant, smooth display with low resource usage (low CPU and network usage). It also gives an exact time with high accuracy (± a few ms).

Tips

When you need to measure a time difference (e.g. how much time has elapsed from a certain instant) use performance.now() instead of Date.now(). It is more accurate and a change in the system clock doesn't affect it.
A very accurate Round Trip Time (RTT) can be estimated using a PerformanceObserver. When you need to measure the RTT of the HTTP request don't use a time difference calculated in your code (e.g. timeRequestEnd - timeRequestStart): that would include some other time that is not relevant in this specific case (like DNS time, connection time, computation time, etc.). Use a PerformanceObserver instead.
Don't use setInterval() to update time or to update the UI (it's not reliable if you need ms precision). Always use requestAnimationFrame() to update the UI: this allows to update the UI immediately when there is a time change.
Remember to set Cache-Control: no-cache on the time returned by server.
For styling a digital clock using CSS, monospace fonts (like Roboto Mono) are perfect because when a digit changes, its width doesn't change (so the timer keeps a fixed width).

See it in action

On Time UTC you can see the algorithm in action and the source code.

Web Push Notifications with React and Pushpad

Marco Colli — Thu, 23 Jan 2025 09:37:39 +0000

In this tutorial we'll see how to easily subscribe a user to web push notifications on a React website.

In particular we build a React component: a button that allows a user to subscribe / unsubscribe from push notifications.

We'll use the Pushpad SDK to create and manage the push subscription.

Setup the Pushpad JavaScript SDK

First you need to add a file named service-worker.js to the root folder of your website. Then add this line of code to that file:

importScripts('https://pushpad.xyz/service-worker.js');

Then copy and paste this code to your website:

<script>
  (function(p,u,s,h,x){p.pushpad=p.pushpad||function(){(p.pushpad.q=p.pushpad.q||[]).push(arguments)};h=u.getElementsByTagName('head')[0];x=u.createElement('script');x.async=1;x.src=s;h.appendChild(x);})(window,document,'https://pushpad.xyz/pushpad.js');

  pushpad('init', PROJECT_ID);
</script>

Replace PROJECT_ID with your project ID (you can find it in the project settings in the Pushpad dashboard).

Note: Pushpad init will also try to register the service-worker.js file. If your app already has a service worker and you register it from your custom code, you can skip that by calling pushpad('init', PROJECT_ID, { serviceWorkerPath: null });.

The JavaScript SDK functions

Now the fun part. You can build any UI component (like a subscribe button for push notifications, a custom modal for push notifications, etc.) with your custom style and a few simple methods:

you can subscribe the user to your notifications and display the native permission prompt for push notifications using pushpad('subscribe')
you can get the current push subscription status with pushpad('status')
you can unsubscribe the user from push notifications using pushpad('unsubscribe')
you can also authenticate your users with pushpad('uid') or attach other data for targeting with pushpad('tags').

The React component: a button for web push notifications

This is the React code for building a subscribe / unsubscribe button for web push notifications:

const PushSubscriptionButton = () => {
  const [subscribed, setSubscribed] = useState(null);

  useEffect(() => {
    pushpad('status', (isSubscribed) => {
      setSubscribed(isSubscribed);
    });
  }, []);

  const subscribe = () => {
    pushpad('subscribe', (isSubscribed) => {
      if (isSubscribed) {
        setSubscribed(true);
      } else {
        alert('Notifications are blocked from browser preferences.');
      }
    });
  };

  const unsubscribe = () => {
    pushpad('unsubscribe', () => {
      setSubscribed(false);
    });
  };

  if (subscribed == null) {
    return null;
  }

  return subscribed ? (
    <button onClick={unsubscribe} style={{ color: 'white', background: 'gray' }}>
      Subscribed
    </button>
  ) : (
    <button onClick={subscribe} style={{ color: 'white', background: 'red' }}>
      Subscribe
    </button>
  );
};

The code is self-explanatory.

First it detects if the user is subscribed or not to the push notifications. If the user is not subscribed it display a "Subscribe" button, otherwise, if the user is already subscribed, it displays the text "Subscribed".

When a user clicks the "Subscribe" button, they will see the browser permission prompt for push notifications: if they accept, they will be subscribed to your website notifications.

The button will also display the current status (e.g. "Subscribed") and if you click on it again you can also unsubscribe from push notifications.

Sending the notifications

Now that you have the subscribers you can send some push notifications. The push notifications are delivered and displayed even when the users are not on your website. For example, if you have a blog, you may want to send a notifications when there is a new post; if you own an e-commerce you can promote the products, etc.

The easiest way to send the notifications is to use the Pushpad dashboard to send the notifications manually.

Otherwise you can also send the notifications from your server-side code using the API (Pushpad has some official libraries for Node.js and for other popular languages).

How to add a custom font to a Rails app

Marco Colli — Sun, 09 Jul 2023 18:14:05 +0000

First you need to create the folder app/assets/fonts if it doesn’t exist yet: this is the default directory for font assets in Rails.

Then download the font file from GitHub. For example Inter is a great choice and it is already used by many sites and by Tailwind UI. Move the file (e.g. Inter-roman.var.woff2) in the fonts directory.

Now you can use the font like a normal asset of the asset pipeline: for example you can use the helpers like asset_path and font_url to refer to it.

In order to use the font in the CSS you need a font face declaration:

@font-face {
  font-family: 'Inter var';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: font-url('Inter-roman.var.woff2') format('woff2');
  font-named-instance: 'Regular';
}

Note the use of the font-url helper, which is available in SASS files.

Finally you can use your font:

body {
  font-family: 'Inter var', sans-serif;
}

You can also speed up the loading of the font and avoid the page glitch while the font is loading using <link rel="preload">. Add this code to the <head> section of the application layout:

<%= preload_link_tag 'Inter-roman.var.woff2' %>

Originally posted on AbstractBrain Answers

Cuber is now open source: deploy your apps to K8s with 1 command

Marco Colli — Wed, 31 Aug 2022 20:52:16 +0000

I am happy to announce that after several months of work, I have decided to release Cuber as open source software:

cuber-cloud / cuber-gem

An automation tool that simplify the deployment of your apps on Kubernetes.

CUBER

Deploy your apps on Kubernetes easily.

What is Cuber?

Cuber is an automation tool (written in Ruby) that can package and deploy your apps (written in any language and framework) on Kubernetes.

Unlike other tools that add more options and more complexity to Kubernetes, Cuber is made to simplify and reduce the complexity, thus making the deployment process more standardized and reliable.

You just need to create a Cuberfile, with ~10 lines of code, and then type cuber deploy to package and deploy your app on any Kubernetes cluster.

Kubernetes is up to 80% cheaper compared to PaaS like Heroku and you can choose between different cloud providers (no lock-in) It is also reliable and it can scale applications of any size The only downside is that it's complex and requires many steps and configurations, even if most applications share the same needs Cuber makes Kubernetes simple and…

View on GitHub

Cuber makes it extremely easy to build and deploy an application to Kubernetes.

We use it for a large monolithic application built in Rails (Pushpad), but it can really deploy any application (any language and framework) that can be deployed to Heroku or that can be built using a Dockerfile.

Basically you just need to define a Cuberfile, with a few lines of code that describe your application, and then run cuber deploy to publish your app on Kubernetes (on any cloud provider).

You can find more information and documentation on GitHub or on the official website of the project.

Cuber: a Capistrano alternative for deploying Rails applications on Kubernetes

Marco Colli — Wed, 13 Jul 2022 12:34:40 +0000

Cuber is an automation and deployment tool written in Ruby: it is similar to Capistrano, but it deploys on Kubernetes, so you don’t need to configure all the servers and it’s more scalable.

Basically you can deploy your application by defining a Cuberfile (a few lines of Ruby code, like a Capfile for Capistrano) and then typing cuber deploy in your terminal.

Cuber has been designed for monolithic Rails applications, but it can actually deploy any application, in any language and framework.

It has all the features needed to run an application in production.

Here’s an example Cuberfile that you can use to deploy any Rails app on Kubernetes:

app 'myapp'
repo '.'
buildpacks 'heroku/buildpacks:20'
image 'username/myapp'
dockerconfig 'dockerconfig.json'
kubeconfig 'kubeconfig.yml'
migrate 'rails db:migrate', check: 'rake db:abort_if_pending_migrations'
proc :web, 'bundle exec puma', scale: 3
proc :worker, 'bundle exec sidekiq', scale: 2
cron :mytask, '@daily', 'rake mytask'
env 'RAILS_ENV', 'production'
env 'RAILS_LOG_TO_STDOUT', 'enabled'
env 'RAILS_SERVE_STATIC_FILES', 'enabled'
env 'RAILS_MASTER_KEY', File.read('config/credentials/production.key').strip, secret: true

That's it. Save that file in a directory (usually your application root), type cuber deploy and let the magic happen.

There is also lot of information and technical documentation on the project website.

Finally note that Kubernetes can be 80% cheaper than Heroku or other PaaS, because it is bare infrastructure. Kubernetes is also offered by most cloud providers, and thus you avoid lock-in with a single service provider.

Cuber is released under a source available license

Marco Colli — Thu, 28 Apr 2022 15:36:35 +0000

I am happy to announce that Cuber is moving from a custom commercial license to a source available license.

cuber-cloud / cuber-gem

An automation tool that simplify the deployment of your apps on Kubernetes.

CUBER

Deploy your apps on Kubernetes easily.

What is Cuber?

Cuber is an automation tool (written in Ruby) that can package and deploy your apps (written in any language and framework) on Kubernetes.

Unlike other tools that add more options and more complexity to Kubernetes, Cuber is made to simplify and reduce the complexity.

Kubernetes is up to 80% cheaper compared to PaaS like Heroku and you can choose between different cloud providers (no lock-in) It is also reliable and it can scale enterprise applications at any size The only downside is that it's difficult to master Cuber makes Kubernetes simple! In this way you have the simplicity of a PaaS, at the cost of bare infrastructure and without the additional cost of a DevOp team.

Installation

First you need to install the prerequisites: ruby, git, docker, pack, kubectl.

Then install Cuber:

…

View on GitHub

In particular we are adopting the Standard Source Available License (SSAL) and you can use Cuber for free for small / medium apps.

Cuber makes it easy to deploy your apps on Kubernetes: just create a Cuberfile, with ~10 lines of code, and then type cuber deploy to package and deploy your app on any Kubernetes cluster.

Why a "Standard Source Available License" doesn't exist yet?

Marco Colli — Tue, 15 Mar 2022 15:35:18 +0000

Open source has great advantages, but, often, it is also a way for big corporations to exploit the work of independent developers.

This is a major issue. Here's some outcomes:

Faker, Colors and other libraries: tired developers remove the library or voluntarily damage it
Log4j vulnerability, Heartbleed exploit: only 1 or 2 developers were maintaining it

Nobody should work for free forever: "visibility" doesn't pay the bills.

There are many videos (video 1, video 2) on Youtube that explain the problem with more context.

What is your opinion about "Source Available" licenses? i.e. a license where source code is public and you can also contribute it, but that gives more power / ownership to the original developer.

Can "Source Available" licenses solve many of the problems that Open Source has? We may release the code, but require a payment above a certain threshold or to use some advanced features (like SaaS).

Some projects like Redis modules and Gitlab EE already do something similar. However their licenses are complex and non-standard and that may limit the adoption of such projects (i.e. this is even more true for smaller projects).

I think it would be useful to create a "Standard Source Available License" that anyone can use for his projects (instead of MIT, GPL, etc.)

A quick idea for brainstorming: take the MIT license (or BSD, or something similar) and add this sentence:

[...] subject to the following conditions:
The purchase of a license may be required in order to use some advanced software features or above certain usage levels. You cannot make modifications to the software made to circumvent license key validations, license-related code or copyright.

This would make it legally required for larger organizations to buy a sponsorship (with the result of happier contributors and well-maintained software).

Let me know your thoughts below: if I collect enough feedback I can also open a repo on Github and try to write the full-text of the license.

Cuber: deploy your apps on Kubernetes easily (Heroku alternative)

Marco Colli — Mon, 21 Feb 2022 18:18:36 +0000

Cuber is an automation tool that makes it easy to publish your applications on Kubernetes. Cuber is a gem written in Ruby, but you can deploy apps in any language and framework.

TL;DR Define a Cuberfile, run cuber deploy and you will have your application running on Kubernetes (which is much cheaper than Heroku).

cuber-cloud / cuber-gem

An automation tool that simplify the deployment of your apps on Kubernetes.

CUBER

Deploy your apps on Kubernetes easily.

What is Cuber?

Cuber is an automation tool (written in Ruby) that can package and deploy your apps (written in any language and framework) on Kubernetes.

Unlike other tools that add more options and more complexity to Kubernetes, Cuber is made to simplify and reduce the complexity, thus making the deployment process more standardized and reliable.

You just need to create a Cuberfile, with ~10 lines of code, and then type cuber deploy to package and deploy your app on any Kubernetes cluster.

View on GitHub

Why Cuber?

There are already many platforms and tools to publish and run your applications in the cloud:

Heroku is simple, but you get lock-in and high costs when you scale.
Capistrano works very well, but when you scale on multiple machines you need to manage each of them (and can become a pain when you start having 10+ servers).
Dokku and other projects are great projects, but they don't have horizontal scalability (you are constrained on a single server).
Managing servers and infrastructure directly (e.g. use droplets directly on DigitalOcean) is complex and time consuming and it doesn't scale well to tens or hundreds of servers.
Jenkins, Argo CD, Helm, kustomize and other devops tools for Kubernetes require deep knowledge of Kubernetes and they basically add complexity over complexity.

... And that's why, after using many of the above solutions, I built Cuber.

Cuber has the simplicity of a PaaS, like Heroku, while you get the cost of bare infrastructure (i.e. by using Kubernetes, instead of Heroku, you get a 80% cost reduction!).

Also, you don't have provider lock-in, since you can easily move to any Kubernetes provider (e.g. DigitalOcean, Vultr, Google Cloud, AWS, or any other).

How it works

You just need to create a Cuberfile for your application (it is somewhat similar to a Procfile for Heroku or a Capfile for Capistrano).

A Cuberfile is made only of a few lines of code.

Here's an example for a Rails application:

app 'myapp'
repo '.'
buildpacks 'heroku/buildpacks:20'
image 'username/myapp'
kubeconfig 'kubeconfig.yml'
proc :web, 'bundle exec puma', scale: 3
env 'RAILS_ENV', 'production'
env 'RAILS_LOG_TO_STDOUT', 'enabled'
env 'RAILS_SERVE_STATIC_FILES', 'enabled'
env 'RAILS_MASTER_KEY', File.read('config/credentials/production.key').strip, secret: true

As you can see we define:

the name of our application
the Git repo (i.e. the location of the Git repo, where to get the source code)
how to build the application (i.e. in the above example we use automatic builds with Heroku Buildpacks, but we can also provide a Dockerfile if we prefer)
where the store the Docker image of our application (i.e. the Docker repository)
the Kubernetes cluster (i.e. where to deploy our application)
the process to run (i.e. in this case we define the web server process, but we can also add background workers and other custom processes)
the environment variables and secrets that we want to make available to our running application.

This is only a basic example, but you can also add more configurations (e.g. database migrations, ssl, etc.)

After defining your Cuberfile, you can deploy your application to Kubernetes with a single command:

$ cuber deploy

This command will run a CI/CD pipeline:

Checkout the code from the Git repository
Build the app using Buildpacks or Docker
Publish the Docker image in the Docker registry
Run your app on Kubernetes

Finally you can see the status of your running application:

$ cuber info

There's even more

Using Cuber, it's not only simple to deploy an application, but it's simple to maintain it over time.

When you need to change a configuration, simply edit the Cuberfile and then type cuber deploy again.

You can also run maintenance task directly on your cluster:

$ cuber run [yourcommand]

For example with a Rails application you can run:

$ cuber run rails db:migrate
$ cuber restart

Or you can run interactive shells, for example:

$ cuber run bash
$ cuber run rails console

You can even see your application logs with a simple command:

$ cuber logs

Built for production

Cuber is a new project, but it uses the best practices and it is a solid tool meant for production.

Before creating it I have scaled Pushpad to thousands of requests per second and I have written the Kubernetes & Rails Definitive Guide.

Give it a try ;)

Distributed Q&A for developers

Marco Colli — Tue, 25 Jan 2022 20:04:50 +0000

Today I am releasing a new site and I would love to hear your feedback (this is the official release post).

The name of the project is LinkAnswers and it's a different kind of Q&A for developers:

Write the answers on your domain and then add a link to it.
Unlike traditional Q&A, we give back to the contributors 🥰
https://linkanswers.com

Anyone can post a question, like a normal Q&A, however you can write the answers on your domain and then add a link to it.

Basically it's a Q&A that wants to give something back to contributors.

Personally I am in the top 1% of StackOverflow and despite all the time spent on the site, I get basically nothing from there.

It would be nice to have at least some visitors and organic traffic to your website...

In this way you can promote yourself, whether you are an agency, freelancer or SaaS provider.

So...

What is LinkAnswers?

LinkAnswers is a distributed Q&A for developers.

Unlike a traditional Q&A, you can post the answers on your domain and then add a link to it.

Why LinkAnswers?

Using LinkAnswers you own the answers that you write and you get more visibility.

Whether you are a freelancer or a company, you deserve a compensation for helping the community. Your website has your branding and you can show that you are a trustworthy authority and promote your services and products. Showing off your expertise on specific topics can be a great way to gain trust and new customers.

Currently the most popular Q&A benefit from your contributions (and make big money), but don't give anything back. It's time to create a more balanced ecosystem.

We also care about creating a more welcoming ecosystem, without downvotes and aggressive moderators.

How can I reply to a question?

You can simply write a post on your website and then add a link to it on LinkAnswers.

The questions are released under a permissive license (CC BY) and you can copy and adapt them if you want. Otherwise you can simply mention the original question with a link:

Question: Example question

You can post your answers on any domain, like a blog (e.g. blog.example.com) or a dedicated domain (e.g. answers.example.com).

Do you like this project?

I know that there's still a lot to do, but the basic website is ready and fully functional.

Please let me know what you think and if you like the idea sign up now →

You can also post a question or a link to your answers (on your domain 🎉) right now.

Favicons in 2022: you only need 1 SVG favicon

Marco Colli — Tue, 28 Dec 2021 14:57:41 +0000

The time has come to end the favicon craziness... Starting from 2022 it makes sense to use only 1 favicon in SVG format.

Is it a dream? No, it's real. This simple solution works for modern browsers.

Simply use an SVG favicon:

<link rel="icon" href="/icon.svg">

Supported by major browsers (except Safari in 2021) and Living Standard
Only 1 short line of code and simple to remember
Other attributes like type and sizes are not necessary
Scales much better at any size compared to PNG
Let's end the favicon craziness with hundreds of different sizes...

I have already used this strategy for our latest website (cuber.cloud) and it works perfectly on Chrome and other major browsers. You can test it yourself. Just 1 favicon for all browsers and all sizes!

For Apple Safari, the only missing browser, let's ask them to become standard-compliant... (btw, they are becoming the new IE). You can send a tweet to @webkit for feature requests (they suggest that on their official bug tracker).

Building a QR code generator with Ruby on Rails

Marco Colli — Fri, 06 Aug 2021 22:43:50 +0000

Today many applications use QR codes.

QR codes are used for many different purposes, like tickets, restaurant menus, payments, sharing a contact or a URL, etc.

A QR code may seem magical to non-tech users, but it is actually very simple. QR codes are simply a different way to write text: instead of using the normal alphabet, that is easily read by humans, we use different signs that are easily read by a machine.

Since you can write any text inside a QR code, you can also write a URL for example. URLs are one of the most common contents of QR codes. A mobile device that scans a QR code, reads the text, and finds a URL, may decide to open that link.

For example, if you have a restaurant menu online you can simply take the URL of the menu and convert it into a QR code: in this way users that scan the QR code will open the restaurant menu. That is exactly how a QR code menu works. And indeed this post is based on the work that I have done for BuonMenu, a QR code menu for restaurants built with Ruby on Rails.

The code

We want to build a simple page with Ruby on Rails that given an arbitrary text or a URL as an input, generates the QR code and allows the user to download it.

First of all create a new Rails application (or open an existing one).

Then add this gem:

# Gemfile

gem 'rqrcode'

And run bundle install.

Then create these routes:

# config/routes.rb

controller :pages do
  get :qr_code_generator
  get :qr_code_download
end

Then the controller:

# app/controllers/pages_controller.rb

class PagesController < ApplicationController
  def qr_code_generator; end

  def qr_code_download
    send_data RQRCode::QRCode.new(params[:content].to_s).as_png(size: 300), type: 'image/png', disposition: 'attachment'
  end
end

This is the code of the view:

<%# app/views/pages/qr_code_generator.html.erb %>

<h1>QR code generator</h1>

<%= form_tag :qr_code_download, method: :get do |f| %>
  <div class="field">
    <%= label_tag 'Text or URL' %>
    <%= text_field_tag :content, nil, required: true %>
  </div>

  <div class="actions">
    <%= submit_tag 'Generate QR code' %>
  </div>
<% end %>

Basically the view is to display a form where the user can add his text or URL and then it sends a request to qr_code_download which actually generates a PNG for the QR code. The QR code will be downloaded on the user device since we use disposition: 'attachment'.

Finally, if we prefer to display the QR code instead of downloading it, we can use a method similar to qr_code_download but with disposition: 'inline'.