DEV Community: Andrés Villarreal

LocalStack License Changed, CI First to Know

Andrés Villarreal — Sat, 28 Mar 2026 15:09:45 +0000

LocalStack is a great product. It’s basically an emulator for the AWS cloud that you can run locally. We rely on it for development and automated testing. However, nothing comes for free. Understandably, the company behind this amazing piece of software has some bills to pay. They changed the license to require a subscription to run their provided Docker images. If the license is not provided as an environment variable, the image simply fails to start. Normally, this would not be a problem if we pinned our versions properly. But surprise, we don’t!

CI started “randomly” failing in the middle of the day and annoying all the engineers. I consider myself the self-appointed CI shepherd, so it was my responsibility to find out what was going on. Initially I thought this was just a couple of flaky tests, but after it started failing constantly, it became obvious we had a real problem. We use testcontainers with the S3 LocalStack image, and all tests which used this setup were consistently failing.

The nice thing is that I was able to reproduce the problem locally, so then I just bumped the log levels to the max and looked for funny stuff. After some log spelunking, I noticed the failing image was localstack/localstack:s3-latest. From there it was easy to find out LocalStack’s latest blog post explaining their licensing changes.

The immediate fix was to pin the image to version 4.4.0. For example: change localstack/localstack:s3-latest to localstack/localstack:4.4.0.

I would say the main takeaway from all of this is to pin your versions. Then you always know what you get. Package manager dependencies, docker images, Github actions, anything! Always specify a deterministic version. Never use latest or similar. Oh, how I wish reproducible builds were more widespread in the software industry!

Back to the LocalStack topic, now I am actively on the lookout for a proper replacement. I only need a local S3-compatible emulator. I have tried MinIO but for some reason it doesn’t seem to be a drop-in replacement and also has some funny business going on with the licensing. floci also seems promising although it’s quite new. Please reach out if you have any recommendations!

Our CI Doesn't Do Weekends

Andrés Villarreal — Sat, 24 Jan 2026 09:34:06 +0000

I think a codebase can tell you a lot about the people that work on it. From this specific example in particular, I felt very reassured that the team takes work-life balance seriously and never works on weekends.

For context, the software interfaces with old-school banking systems that famously do not run certain processes on holidays or weekends.

We had some logic to to an early return to avoid running a process on bank holidays, imagine something like the following:

if (isBankHoliday(new Date())) {
  logger.info("Skipping process on bank holiday");
  return;
}
// ... continue business logic below

This logic was not covered by any tests! Not to say that there were no tests, but they were more focused on what would happen on work days and not the fact that the code should not run on bank holidays.

This worked quite well, until somebody pushed changes on a weekend.

Weekends are considered bank holidays, so the check to avoid running on bank holidays was triggered and the tests failed. Fortunately, the changes being pushed on the weekend were not urgent and nobody was blocked by this.

The lesson we learned from this is that you should not work on weekends!

Although in all seriousness, the tests should have faked the date from the start to avoid this. Even if people are not working on weekends, it could be that they work in a different timezone, or the team needs to push an urgent hotfix during the weekend.

The way to do this using vitest is very simple:

// Pick a date that is definitely not a bank holiday!
vi.useFakeTimers({
  now: new Date("2025-03-03"),
  toFake: ["Date"]
});

By the way, vitest is very fast and very easy to migrate to from jest! Make the switch if you haven’t already!

fzf + SSH Config Hosts

Andrés Villarreal — Thu, 10 Oct 2024 18:42:48 +0000

SSH has a nice feature in which you can store aliases for frequently accessed hosts.

Combining this with fzf, you can have a nice quick shortcut to quickly pick a server to connect to into.

This comes in very handy if you need to ssh into different servers and forget their IP or hostname often.

Here’s a sample ssh config file (normally located at ~/.ssh/config):

# see https://man.openbsd.org/ssh_config.5 for all the available configuration settings
Host runner-staging
    HostName 10.0.0.8
    User alpha

Host runner-production
    HostName 10.0.0.9
    User beta

Host mainframe
    HostName mainframe.computer.world
    User hackerman

Here’s a small shell function which calls fzf with the hostnames configured and allows you to pick one to connect to:

s () {
  local server
  server=$(grep -E '^Host ' ~/.ssh/config | awk '{print $2}' | fzf)
  if [[ -n $server ]]; then
    ssh $server
  fi
}

Add this function to your .bashrc (or .zshrc, or whichever config file for your shell) and reload the configuration.

Now, you can quickly ssh into mainframe by typing s:

$ s

# fzf will allow to quickly search and pick your server
> runner-staging
  runner-production
  mainframe
  3/3 ──────────

# press enter and you will be connected!
[hackerman@mainframe.computer.world ~]$

Using AsyncLocalStorage for Better Traceability in NodeJS Applications

Andrés Villarreal — Sun, 29 Sep 2024 08:45:54 +0000

NodeJS has a neat API called AsyncLocalStorage. It’s used to share information across callbacks and promise chains.

For example, it is useful to share information for all the code executed when serving a web request. I also found it very useful to keep trace information to easily keep track of which item was being processed during a batch process.

The only caveat in my opinion, is that you need to wrap your code in yet another callback.

How to use `AsyncLocalStorage`:

First, create an instance of AsyncLocalStorage:
Then, use the run method to wrap your code:
Finally, use the getStore method to retrieve the shared state:

Real-world example

The previous example is very simple because it only shows how to use it.

Here’s a more elaborate example that will hopefully show why this feature is so useful:

import { AsyncLocalStorage } = from "node:async_hooks";

async function process() {
  try {
    await Promise.all([foo(), bar()]);
  } catch (err) {
    handleError(err);
  }
}

async function foo() {
  const { index } = asyncLocalStorage.getStore();
  console.log(`processing foo ${index}`);
}

async function bar() {
  const { index } = asyncLocalStorage.getStore();
  console.log(`processing bar ${index}`);

  if (Math.random() < 0.1) {
    // simulate a random failure
    throw new Error("A random failure happened");
  }
}

async function handleError(err) {
  const { index } = asyncLocalStorage.getStore();
  console.log(`Handling error when processing ${index}: ${err}`);
}

const asyncLocalStorage = new AsyncLocalStorage();

// process 20 things, asynchronously
const tasks = [];
for (let i = 0; i < 20; i++) {
  tasks.push(
    asyncLocalStorage.run({ index: i }, process)
  );
}

If you execute this code, it will clearly log for which items the failures occured, because the required information is available in the shared state exposed by AsyncLocalStorage.

Example of the output:

processing foo 0
processing bar 0
processing foo 1
processing bar 1
...
Handling error when processing 3: Error: A random failure happened
Handling error when processing 8: Error: A random failure happened
Handling error when processing 14: Error: A random failure happened

Starfield visualization in JavaScript

Andrés Villarreal — Sat, 31 Aug 2024 18:18:07 +0000

This is a simple, straightforward implementation of a visualization reminiscent of the classic Windows 95 starfield screensaver.

It is also interactive: you can touch the screen or use the accelerometer to influence the direction of the movement.

This is how it works:

Create a bunch of particles (100), each in a random position.
Every frame, move each particle further away from the center*. The further the particle is from the center, the more visible it will become. This gives the illusion that the particles are moving closer to the viewer, or that the viewer is going further into space.
The center is not really the center of the screen, but a variable point which can be influenced by the user by moving their cursor or tilting their device.
When the particles go outside of the view, put them near the center again, this keeps the visualization going on in perpetuity.

In this blog post, I want to share the heavily-commented source code to demonstrate how simple it is to create visually appealing animations with a few lines of code and basic math knowledge.

Please click here to see the visualization in action!

The code is available in this Gist:

Migrating From DokuWiki to Obsidian

Andrés Villarreal — Sun, 18 Aug 2024 19:37:56 +0000

About a year ago, I decided to move all my personal notes from DokuWiki to Obsidian.

DokuWiki is great software and has served me well, but I never utilized it to its full capacity. It’s biggest strength is that it’s a… wiki, and I was the sole user.

It made little sense for me to keep a service running when I could just have some Markdown files locally. And Obsidian provides a really nice UI on top of those Markdown files.

One reason I chose DokuWiki in the first place, is that it doesn’t need a database. All the content is kept in plaintext files. So if I ever wanted to move my notes elsewhere, it would hopefully be a painless process. In the end, I think it was a good choice, because the migration was quite simple.

The Migration Process

These are the steps I followed:

1. Copying the data folder locally

First, I needed to get the source text and image files from DokuWiki to my local machine. All of it is located at /var/www/dokuwiki/data/ for a common installation. This directory contains all the text files and images that comprise the wiki pages. This directory is configurable, so check your configuration if you’re unsure.

2. Convert all text files from DokuWiki Syntax to proper Markdown

The next step was to locate all the .txt files in data/pages. These files needed to be renamed to .md, and the content converted to proper Markdown.

DokuWiki uses its own syntax, which is not really used anywhere else.

I ended up writing a quick script to handle this, with some help from ChatGPT to speed up the process.

Main points the script covers:

Changing DokuWiki’s heading syntax to Markdown format.
Adjusting link and image paths to work with Obsidian.
Handling any quirks like list formatting.

3. Moving Media Files

After the text files were converted, I moved all the media files from data/media to data/pages. Obsidian can handle images and other media in the same directory as the Markdown files, which DokuWiki did not.

4. Final Touches

The last step was to verify everything in Obsidian. I went through my notes to check formatting and that there were no broken links or images. A few minor tweaks were necessary, but the script got me 95% of the way there!

Conclusion

It’s been about a year since I did the migration, and using Obsidian is much smoother. I just need to make sure the directory with my notes is properly backed up / synchronized between my devices. Obsidian offers this as a paid feature, but I didn’t want to depend on yet another 3rd party service. I simply use a Git repository to keep my notes.

For anyone looking to do the same or similar, I hope this post helps you out.

Here is a small peek of my notes in Obsidian’s beautiful graph view:

How to use Let's Encrypt certificates with Keycloak

Andrés Villarreal — Wed, 04 Jan 2023 16:28:41 +0000

Keycloak provides user federation, strong authentication, user management, fine-grained authorization, and more.

Here is a guide to enable HTTPS access to your Keycloak server using a free Let's Encrypt SSL certificate. The beauty of Let's Encrypt is its ease of use and the fact that it's free!

This guide assumes you have already installed Keycloak at /opt/keycloak/ using the official guide for bare metal installs, and now you want to enable HTTPS access. You need to have version 20 or higher.

In all the instructions below, be sure to replace <DOMAIN> with the actual domain you will be using. All commands in this guide must be run as root.

1. Install certbot

First you will need to install certbot. This depends on the Linux distro you are using.

For example, for apt-based distros such as Debian or Ubuntu, you can just run the following:

apt install certbot

2. Create HTTPS certificates

Set up certificates:

$ certbot certonly --standalone --preferred-challenges http -d <DOMAIN>

3. Configure Keycloak to use Let's Encrypt certificates

Change configuration:

vi /opt/keycloak/conf/keycloak.conf

Add or update the following lines in that file:

https-certificate-file=/etc/letsencrypt/live/<DOMAIN>/cert.pem
https-certificate-key-file=/etc/letsencrypt/live/<DOMAIN>/privkey.pem
hostname=<DOMAIN>

https-port=443
http-port=80

Update keycloak config:

$ /opt/keycloak/bin/kc.sh build

You're done! Now you can run the following command and Keycloak should now be accessible from the browser via HTTPS:

$ /opt/keycloak/bin/kc.sh start

4. Optional: Set up Keycloak as a systemd service

The official guide purposely leaves this open-ended because there are many ways in which you might want to handle the lifecycle of the Keycloak server. However, I think a good approach is to just use systemd.

4.1. Set up systemd service

Create user and group:

$ useradd -g keycloak keycloak

Give access to certificates:

$ chmod 0755 /etc/letsencrypt/{live,archive}
$ chgrp keycloak /etc/letsencrypt/{live,archive}
$ chgrp -h keycloak /etc/letsencrypt/live/<DOMAIN>/privkey.pem

Give access to Keycloak directory:

$ chown -R keycloak:keycloak /opt/keycloak/

Create systemd service:

$ vi /etc/systemd/system/keycloak.service

Write the following contents into the file. You might need to add your chosen database service to the After line, for example postgresql.service or mysql.service.

[Unit]
Description=Keycloak Application Server
After=syslog.target network.target

[Service]
Type=idle
User=keycloak
Group=keycloak
LimitNOFILE=102642
ExecStart=/opt/keycloak/bin/kc.sh start --optimized
StandardOutput=append:/var/log/keycloak.log
StandardError=inherit
RestartSec=2s
Restart=always
AmbientCapabilities=CAP\_NET\_BIND\_SERVICE

[Install]
WantedBy=multi-user.target

Reload systemd config and start service:

$ systemctl daemon-reload
$ systemctl start keycloak.service

4.2. Automatic Keycloak server restart when certificates are updated

Make certbot restart Keycloak after updating certificates:

$ cd /etc/letsencrypt/renewal-hooks/deploy
$ vi restart-keycloak.sh

Write these contents:

#!/bin/sh
systemctl restart keycloak

Make the script executable:

$ chmod +x restart-keycloak.sh

You're done! Now Keycloak is set up as a systemd service and will start when your machine boots up.

Try Andy's Desk

Andrés Villarreal — Sat, 15 Jan 2022 10:35:29 +0000

LINK: https://desk.glitchy.website/

This is a nostalgic (and not very faithful) recreation of the Windows 7 desktop UI.

The code is intentionally not too polished, as this is a project I work on for fun.

Things might be buggy but that's part of the fun.

You WILL find weird hacks and work-arounds and lots of inefficient stuff.

One of my main goals with this project was to build it as fast as possible. I managed this by integrating as many existing projects/code as I could find. Of course, everything is credited if you open CREDITS.txt. You can also take a look at the source code for more information!

You can find the repo here: https://github.com/KaeruCT/desk.glitchy.website

Free Static Web Hosts for Frontend Developers

Andrés Villarreal — Sat, 15 Jan 2022 09:30:31 +0000

Nowadays it's very easy to publish on the web for free.

There are countless blogging platforms and website creators. But these platforms usually end up controlling your content. Sometimes you cannot even export your own data!

The other extreme is to set up your own server by yourself. Buy a VPS (virtual private server) or a shared hosting somewhere, install a web server, and upload your files. This is a lot of work already! Specially if all you want is to publish a static website.

You already know HTML and CSS, and maybe a bit of JavaScript. You just want a place where you can drop your files and see it on the web!

Here is a list of services that allow you to do that, in no specific order:

Netlify

Netlify allows you to drag & drop a zip with your files. You can also connect it to your project from Github, Gitlab or Bitbucket. I use Netlify for a lot of my projects, such as desk.glitchy.website.

Vercel

Vercel is very similar to Netlify. They are also the company behing Next.js, so they have many integrations with it. I use Vercel for my personal website and for glitchy.website.

Surge

Surge allows you to easily publish your static website from the command line.

Github Pages

Github Pages allows you to directly from your GitHub repository. Just edit, push, and your changes are live. My blog is hosted on Github Pages.

GitLab Pages

GitLab Pages allows you to publish static websites directly from a repository in GitLab.

Closing Words

With these services, you can host your own static website for free. If having your own domain is important, then you will have to buy one, but that's the only thing you need, as many of these services allow you to use your own custom domain as well.

I recommend you familiarize yourself with the options and not to put all your eggs in one basket. The beauty of static website is that something happens to the provider, you can just copy your files to another one, and you're done! Keep it simple.

Publishing an App on F-Droid

Andrés Villarreal — Tue, 03 Aug 2021 15:29:13 +0000

I made some small apps for Android and I wanted to distribute them. I also care a lot about software freedom, so F-Droid is the best place for me to publish my apps.

Disclaimer! You are not able to sell your app on F-Droid. If you want to make money with it, you would need to allow users to pay through another method. Please see this StackExchange question if you're interested in monetization.

What's F-Droid?

F-Droid is an alternative for the Play Store and other Android stores focused on software freedom and privacy.

The biggest difference is that F-Droid only allows Free and Open Source (FOSS) software. F-Droid also respects your privacy and discourages application which do not.

In an age where privacy and software freedom matters most, F-Droid is the perfect replacement for other Android stores.

Why publish on F-Droid?

F-Droid is a great way of distributing your FOSS Android application. It makes it very easy for your users to install your app and keep it up to date, without requiring them to side-load it.

There is also a higher level of trust since every apk published on F-Droid is built from source.

How to submit your app to F-Droid

I've broken this down into two big steps:

Preparing your app
Submitting it to F-Droid

Preparing your app's repo

F-Droid needs some metadata about your app so it can show something to the users. For example: app name, description, screenshots, and the changelog.

Makes sure you have good screenshots and good explanatory texts about your app. This makes people more interested in it, and speeds up the review process.

The best way to get this metadata to F-Droid is to put it in your app's repo. You only need to create a few files, following either of these methods. I recommend Fastlane.

Submitting your app's build metadata to F-Droid

Getting your app on F-Droid is as easy as sending them a merge request to their data repo.

To summarize, you need to:

Fork the repo on GitLab
Create a new branch for your changes
Create a metadata .yml file for your app. You should name it using your app's id, for example: com.kaeruct.raumballer.yml. There are some templates here.
Submit the merge request to F-Droid's data repo.
Wait for the automated build to finish.
Fix any errors in the build or feedback to your merge request.

There are details instructions in the repo's CONTRIBUTING.md file.

I highly recommend you also set up auto updates. This allows F-Droid to automatically know when you have released a new version. It will then update your app's metadata .yml file automatically and publish the new version of your app on the store.

My experience

Each of the apps I submitted were approved around 2 or 3 weeks, but this may vary depending on the complexity of your app. The contributors are very friendly and always give you helpful feedback to get your app on F-Droid as soon as possible.

Here is one of my app's metadata file on the F-Droid data repo and the source code on GitHub.

Closing words

F-Droid is a very valuable resource for people who care about software freedom and privacy. It is also run by volunteers. Please donate if you are able to!

Starry Sky in HTML5 Canvas - Part 2

Andrés Villarreal — Sat, 16 May 2020 10:22:25 +0000

This is part of a series! Please make sure you have read Part 1 first!

IMPORTANT -- you can try out the result of this tutorial by visiting this CodeSandbox.
However, I encourage you to read the blog post and try to follow along to understand how and why it works.

Last time we left off with a very nice starry sky, but it's a bit dead. We need to add some animation to it!
The way animation is done on HTML5 canvas is by drawing something else every frame.

For our case, we can use the requestAnimationFrame() function to call our render() function.

First, we will add a counter variable. We will increment this every time we draw.
This is useful because we will have a number that will change with every render.

let counter = 0;

Then, we will update our render() function so it uses requestAnimationFrame(). We will also make it increment the counter.

function render() {
  ctx.fillStyle = backgroundColor;
  ctx.fillRect(0, 0, width, height);
  stars.forEach(function(star) {
    const x = star.x;
    const y = star.y;
    const r = star.r;
    fillCircle(ctx, x, y, r, "rgb(255, 255, 255)");
  });
  counter++;
  requestAnimationFrame(render);
}

For now, this will look exactly the same as before, because we always render the same thing. But let's begin to change that now.

We'll make a small change to make the stars look like they're flickering.

First, let's add a function to generate an opacity value. This value will go from 0 to 1 and will determine the opacity of our star.

The use of Math.sin() in the function below is just to make sure we get a value that changes smoothly.


const minStarOpacity = 0.1;
const maxStarOpacity = 0.7;

function getOpacity(factor) {
  const opacityIncrement =
    (maxStarOpacity - minStarOpacity) * Math.abs(Math.sin(factor));
  const opacity = minStarOpacity + opacityIncrement;
  return opacity;
}

Then, we will use this function when rendering our stars.
Also notice how we change the color from rgb(255, 255, 255) to rgba(255, 255, 255, opacity).

function render() {
  ctx.fillStyle = backgroundColor;
  ctx.fillRect(0, 0, width, height);
  stars.forEach(function(star, i) {
    // factor will be a different number for every star
    const factor = counter * i; 
    const x = star.x;
    const y = star.y;
    const opacity = getOpacity(factor);
    fillCircle(ctx, x, y, star.r, `rgba(255, 255, 255, ${opacity}`);
  });
  counter++;
  requestAnimationFrame(render);
}

Now the sky is looking really nice and animated. But it's still missing a nice big moon. Let's add it next.

We will create a function to render our moon, and call it from render().

const moon = {
  color: "#fea",
  x: height / 3,
  y: width / 3,
  r: 40
};

function renderMoon(ctx, blur) {
  fillCircle(ctx, moon.x, moon.y, moon.r, moon.color);
  // render a smaller circle above the moon to give it that well-known moon-shape
  fillCircle(
    ctx,
    moon.x - moon.r / 3,
    moon.y - moon.r / 3,
    moon.r,
    backgroundColor
  );
}

And our updated render() function:

function render() {
  ctx.fillStyle = backgroundColor;
  ctx.fillRect(0, 0, width, height);
  stars.forEach(function(star, i) {
    const factor = counter * i;
    const x = star.x;
    const y = star.y;
    const opacity = getOpacity(factor);
    fillCircle(ctx, x, y, star.r, `rgba(255, 255, 255, ${opacity}`);
  });

  renderMoon(ctx);

  counter++;
  requestAnimationFrame(render);
}

That leaves us with the finished product:

Thanks for following this tutorial to the end! Remember you can look at a working example in the CodeSandbox.

Have fun experimenting and tweaking the values used to render the stars and the moon.
Some ideas you may want to try to learn more and improve your skills:

Make the stars more colorful.
Make the moon move across the sky.
Add shooting stars.
Add a gradient background instead of a solid color.
Add multiple moons.

Don't hesitate to contact me at @KaeruCT if you have any questions, suggestions, or improvements for this tutorial!

Starry Sky in HTML5 Canvas - Part 1

Andrés Villarreal — Sat, 16 May 2020 10:19:19 +0000

In my spare time I often enjoy creating visualizations using HTML5 canvas.
I'm planning to do a little presentation about this so I thought a good way to get started was to create a blog post explaining how to do a simple one.

This tutorial will teach you how to create something like the image below from scratch!

IMPORTANT -- you can try out the result of this part of the tutorial by visiting this CodeSandbox.
However, I encourage you to read the blog post and try to follow along to understand how and why it works.

First, you will need an HTML file, let's name it index.html:

<!DOCTYPE html>
<html>
  <head>
    <title>Starry sky</title>
    <style>
      body, html {
        padding: 0;
        margin: 0;
      }
      canvas {
        position: absolute;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas"></canvas>
  </body>
</html>

Nothing crazy so far, just some styles and a canvas element.

Next, let's create a JavaScript file. Let's name this index.js.

const backgroundColor = "#030318";
const width = window.innerWidth;
const height = window.innerHeight;
const canvas = document.querySelector("#canvas");
const ctx = canvas.getContext("2d");
canvas.width = width;
canvas.height = height;

function render() {
  ctx.fillStyle = backgroundColor;
  ctx.fillRect(0, 0, width, height);
}
render();

In the code above, we set the canvas' width and height so it takes up the whole window.
Then, in the render() function, we fill the canvas with the background color.
If you run it on your browser, it will look like this:

Yup. Not very interesting. Let's put something in there!
Let's add some code to our index.js file to draw some stars.

First, let's have a function that creates the stars.

function createStars(width, height, spacing) {
  const stars = [];

  for (let x = 0; x < width; x += spacing) {
    for (let y = 0; y < height; y += spacing) {
      const star = {
        x: x,
        y: y
      };
      stars.push(star);
    }
  }
  return stars;
}

const stars = createStars(width, height, 30);

The spacing parameter will control the spacing between stars.

Then, let's update our render() function so it renders the stars.

function render() {
  ctx.fillStyle = backgroundColor;
  ctx.fillRect(0, 0, width, height);
  stars.forEach(function(star) {
    const x = star.x;
    const y = star.y;
    const r = 5;
    ctx.beginPath();
    ctx.fillStyle = "rgb(255, 255, 255)";
    ctx.arc(x, y, r, 0, Math.PI * 2);
    ctx.fill();
  });
}

For our purposes, a star is a circle, so we can use the arc() function to draw our stars.
An explanation of the parameters:

x and y are used for the position.
r is used for the radius of the circle.
0 and Math.PI * 2 are the start and end angle, respectively. A full circle goes from 0 to 2pi.

The line ctx.fillStyle = "rgb(255, 255, 255)"; is used to set the color of the circle to white.

Let's see what we get now:

It's definitely a bit more interesting. But it doesn't look like a starry sky at all!
Stars don't usually look so uniform and boring. We need to add some randomness.

Let's create a function called randomInt(max) that will return a random number:

function randomInt(max) {
  return Math.floor(Math.random() * max);
}

Then, let's use these random numbers when creating our stars:

function createStars(width, height, spacing) {
  const stars = [];

  for (let x = 0; x < width; x += spacing) {
    for (let y = 0; y < height; y += spacing) {
      const star = {
        x: x + randomInt(spacing),
        y: y + randomInt(spacing)
      };
      stars.push(star);
    }
  }
  return stars;
}

That looks already almost real! Now let's make it so the stars are different sizes.
To do this, we will need a different radius for each star, so we will add it to the star objects.

const maxStarRadius = 1.5;

function createStars(width, height, spacing) {
  const stars = [];

  for (let x = 0; x < width; x += spacing) {
    for (let y = 0; y < height; y += spacing) {
      const star = {
        x: x + randomInt(spacing),
        y: y + randomInt(spacing),
        r: Math.random() * maxStarRadius,
      };
      stars.push(star);
    }
  }
  return stars;
}

Then, we will update the render() function so it uses the star's radius when drawing.
While we're at it, let's extract the circle drawing logic to a new function as well.

function fillCircle(ctx, x, y, r, fillStyle) {
  ctx.beginPath();
  ctx.fillStyle = fillStyle;
  ctx.arc(x, y, r, 0, Math.PI * 2);
  ctx.fill();
}

function render() {
  ctx.fillStyle = backgroundColor;
  ctx.fillRect(0, 0, width, height);
  stars.forEach(function(star) {
    const x = star.x;
    const y = star.y;
    const r = star.r;
    fillCircle(ctx, x, y, r, "rgb(255, 255, 255)");
  });
}

Much better! Now the stars are all different sizes!

This is all for part 1. You can continue reading Part 2, where we will add a moon and make our stars flicker!