blog podcast

Basics

Sometimes I find the Javascript landscape of libraries overwhelming. When I’ve been out of the tech for a while as well I find that the whole bootstrapping part of creating a javascript has too many options. Options are nice, but they also consume mental energy. That’s why it’s nice to know that things don’t need to be complicated.

The clean sheet looks like this:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>

Then you can simply link in a stylesheet and a javascript file and add a canvas:

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="style.css">
    <script src="animated-stars.js"></script>
  </head>
  <body>
    <canvas style="background-color:black;" class="full-screen" id="viewport">
    </canvas>
  </body>
</html>

Let style.css look like this:

.full-screen {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  width: 100%;
}

And add a window.onload = function() {...} in your javascript file.

With this setup you can now play around however you want with this canvas. No need for extra libraries. No need for webpack etc. Just write code and check what happens in your browser.