Practicing programming with sandbox projects

#programming #productivity #learning

This blog post describes an approach for experimenting with programming languages and frameworks by using minimal starter projects that cannot do much more than outputting "Hello, World!". Those projects can then be used to experiment with the respective technology.

The Angular framework is used as an example, but the idea for this approach is to be applicable to other technologies as well.

Infrastructure

The Bash snippets below have been tested on a basic Ubuntu Droplet from the DigitalOcean cloud service provider. Besides the Linux operating system, the Droplet has the Version Control System git preinstalled.

Since the example uses Angular, additionally Node.js and the Angular CLI need to be installed:

# Install Node.js as described here: https://nodejs.org/en/download
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash
source ~/.bashrc
nvm install 24

# Install Angular CLI as described here: https://angular.dev/installation#install-angular-cli
npm install -g @angular/cli

Also, configuring the git user data may be necessary, and setting the default branch to main might be useful for consistency with other projects:

git config --global user.email "you@example.com"
git config --global user.name "Your Name"

git config --global init.defaultBranch main

Create new project

The Angular CLI provides the ng program, which can be used to create a new Angular project.

# Create project using the Angular CLI tool
ng new angular_sandbox --defaults

# Change directory into the project directory
cd angular_sandbox

# Check git repository
git log

The expected output from git log is an initial commit for the sandbox project like this:

Author: Your Name <you@example.com>
Date:   Fri Dec 5 06:37:07 2025 +0000

    initial commit

Create experiment branch

By using a separate branch for the experiments, it is possible to keep track of the lessons learned and still start the subsequent experiments with the simplest possible project setup.

# Switch back to the main branch, if necessary
git switch main

# Create new branch
git switch --create 2025-12-03/example-experiment

# Apply changes in a text editor

# Commit all changes
git add .
git commit -m "Try out something"

✏️ Tip
If a remote git repository is used, the branch can be pushed to the remote repository. The used text editor may be able to generate a link to the file on the remote repository with the current commit (see e.g. jetbrains.com).

Update main branch

If it turns out that a certain change is done again and again for all experiments, then it may be useful to include it in the main branch.

# Switch back to the main branch
git switch main

# Install commonly used dependencies
ng add @angular-eslint/schematics --defaults
npm install prettier \
  prettier-eslint \
  eslint-config-prettier \
  eslint-plugin-prettier \
  eslint-plugin-simple-import-sort \
  --save-dev

# Commit changes
git add .
git commit -m "Add eslint and prettier dependencies"