The Old One

  • article
  • early draft

Written by Matteo in

This article is a stub

Folders full of notes and sketches are still there in the corner of my desk(top). Each of them belongs to one of my unfinished project. Looking at that pile I am always tempted to dismiss them as a waste of time. Until now all my attempts have been focused on ‘how things work’, many times struggling to grasp ‘why’, while ‘delivering things’ has been a secondary goal to me. Though this strategy took me too much time and probably got a little out of hand, I can’t say it was just a pointless exercise. Here I want to go through one of my old works, trying to collect resources suitable to be spent again, list pitfalls I ran into and eventually gain some insight into web project organizational process.

A screenshot of the old page hosted at matteos.land

A screenshot of the old page hosted at matteos.land

Contents

The Idea

Image above shows how Matteo’s Land looks like. Ironically, you might point out that there is no land at all! 🙃 I know it is just a (gradient) blue sky crossed by some clouds 😶‍🌫️. However, the main idea was to depict a landscape with little animated details, in a cartoon-like style. The top-level domain ‘land’ was choosen, of course, to support the representation of a virtual place as a physical one.

Development

On my journey to create a website I learn how Web development encompasses quite a few areas of expertise, each requiring some knowledge and, more often than not, involving a lot of tools you really need to read the docs of (🥦🥕🍴😤).

Lets say we want to try new code ideas, we need a way to manage the codebase so, even if you were coding on your own, a tool like git may be a lot of help.

To avoid ‘reiventing the wheel’ we need a way to bring in and manage external libraries; using JS you have options: npm, yarn, pnpm; this sounds good, actually it is not, because even if you have a general good reason to pick one (faster, more consistent, …) you may have troubles along the way with some other tools you are using, which do not really agree with your choice.

If you are targeting the browser, you need at least a basic dev server to preview something on the screen. You may opt to a minimal solution installing a vscode extension or you may prefer using a dev server included into a bundler (Webpack, Parcel, Vite,…) which you will probably use anyway for building your code.

One moment after you start coding something is bothering you: your code style looks ugly. You rush to add prettier to your tools! Install the vscode extension and that’it! Something is wrong, this was too easy…and I know why: Eslint; At this point I starts feel bad - “Oooh do I really need to?” - and guilty - “I dont really need that! ok, maybe later…” -.

Previously, I had acquired some experience working on other small projects, mainly with React and its ecosystem. This time I made a back and opted for a vanilla JS approach, for two reason: firstly, find out what I really need in order to create a website aligned to modern standards; secondly, the project was quite simple and others solution would be like overkill or inappropriate;

System Setup

Before starting a new porject I generally make some check to the system where I develop the source. From os to the system-availbale tools, this time I employed:

  • Os: Debian on Windows wsl.

  • Nvm: System wide tool to manage Node versions.

  • Node: versions >= ?

  • Package Manager: Yarn with version > 2 set in the project. Unfortunately in that old times (nearly two years ago!), there was some debate on how to do this properly with node corepack. (see gh issue)

  • Git: of course, even for one-man developing.

  • VS Code: “Yeah, you know…today I dont feel like using Vim…” 😏

Git Workflow

The codebase is managed via git. There are a local repository, for development, and a remote one, hosted on GitHub and used as a central repo. I loosely follow a ‘Feature Branch’ workflow approach where development happens “local” on dedicated branches and changes are pushed to the matching remote branch. A pull request is set up and eventually the feature branch may be merged into main (this happens on the remote). Every pull request trigger a preview deployment while production deployment is aligned with the last commit on the ‘main’ branch. This is accomplished by the ‘Vercel’ GitHub app which connects the repo to Vercel cloud platform (see deployment )

$ prompt

Build Tools

Nowadays web development includes a so called building phase. That is the generation, from the codebase (code written by you along with assets like images, fonts, etc.), of the actual code that will be deployed. Building is a vague term, it covers a series of process: transpling, bundling and assets optimization among others. For example, the Parcel homepage displays clearly what a build tool can do.

The build tool I used for this project is Parcel

TODO

$ prompt

Svg and Animations

How I made the clouds

TODO

<svg class="nuvola" id="nuvola-1" viewBox="0 0 132.29 70.987" xmlns="http://www.w3.org/2000/svg">
  <!-- definitions -->
  <defs>
    <!-- cloud type 1 -->
    <g transform="matrix(.79952 0 0 .79952 -5.6984e-6 1.322e-5)" id="nuvola-path">
      <path
        d="m7.1273e-6 45.215c0 9.6131 8.5598 17.405 19.12 17.405 1.7608 0 3.4576-0.23514 5.0762-0.64026 0.7442 11.795 11.483 21.153 24.628 21.153 5.8564 0 11.234-1.8617 15.465-4.9653 4.354 6.3731 12.112 10.62 20.965 10.62 7.5221 0 14.253-3.069 18.779-7.902 3.8852 1.6297 8.2062 2.5458 12.764 2.5458 10.074 0 19.007-5.459 24.571-12.304 1.883 0.56494 3.8892 1.8984 5.9796 1.8984 10.56 0 18.118-7.7921 18.118-17.405 0-9.6121-7.461-17.008-15.098-17.135-2.0904-0.03461-6.5105 0.76343-8.9995 2.6466-5.5649-6.8444-14.497-13.32-24.571-13.32-0.46675 0-0.93049 0.01221-1.3922 0.03155-3.3734-8.7458-12.519-15.017-23.279-15.017-3.7029 0-7.2116 0.74714-10.364 2.0765-5.1092-8.8568-15.306-14.901-27.058-14.901-16.872 0-30.55 12.451-30.55 27.81 0 0.21172 0.01202 0.42141 0.01703 0.63314-1.6106-0.40105-3.2983-0.63314-5.0491-0.63314-10.56 0-19.12 7.7921-19.12 17.404"
        fill="#ededed"
      />
      <path
        d="m41.856 35.867c-4.2909-3.1891-10.775-3.6695-15.577-1.1543-4.8017 2.5152-7.6032 7.8613-6.7298 12.841 1.7208-3.8935 5.0241-6.651 8.9384-8.869 3.9143-2.217 8.7711-3.1321 13.368-2.8176"
        fill="#f5f5f5"
      />
      <path
        d="m54.525 61.575c1.6066 3.8528 5.9576 6.651 10.45 6.7202 4.4932 0.07024 8.8312-2.5916 10.423-6.3945-2.9357 2.0602-6.4814 2.728-10.218 2.787-3.736 0.05904-7.5581-1.1472-10.654-3.1128"
        fill="#d9d9d9"
      />
      <path
        d="m40.518 54.964c2.3768 4.5551 8.0099 7.5193 13.533 7.1192 5.5219-0.40004 10.57-4.1378 12.123-8.9779-3.3874 2.8471-7.6693 4.0502-12.251 4.5266-4.5814 0.4774-9.3991-0.59038-13.406-2.6679"
        fill="#d9d9d9"
      />
      <path
        d="m94.836 70.879c1.6567 3.1748 5.582 5.2402 9.4301 4.9613 3.8492-0.27891 7.3658-2.8837 8.4496-6.2571-2.3608 1.9839-5.3446 2.8237-8.5377 3.1555-3.1921 0.33184-6.5495-0.41225-9.342-1.8597"
        fill="#d9d9d9"
      />
      <path
        d="m92.124 12.825c-3.703 0-7.2116 0.74714-10.364 2.0775-5.1092-8.8578-15.306-14.902-27.058-14.902-16.872 0-30.55 12.451-30.55 27.81 0 0.21274 0.01202 0.42243 0.01703 0.63314-1.6106-0.40105-3.2993-0.63314-5.0501-0.63314-6.9201 0-12.982 3.3479-16.338 8.3611 2.3197-1.252 4.8708-2.1498 7.5241-2.5967 6.3742-1.0719 13.22 0.44177 18.343 4.0563-0.53686-8.3 2.3247-17.142 8.084-23.592 5.7603-6.4515 15.068-10.437 24.126-9.3729s17.299 7.6333 18.668 15.852c5.1042-3.867 11.712-5.7461 18.339-5.3766 2.9267 0.16286 5.8153 0.78989 8.5197 1.818-4.0265-2.6018-8.9454-4.1347-14.261-4.1347"
        fill="#f5f5f5"
      />
      <path
        d="m141.37 71.127c-5.5239 3.8752-12.848 9.437-19.834 9.381-6.8059-0.05395-13.622-2.9102-18.37-7.3493-5.0501 5.3979-13.508 7.9468-21.098 6.3578-7.5912-1.5879-14.585-6.8719-16.54-13.736-4.9049 6.3914-13.676 10.145-22.213 9.5072-7.5-0.55985-14.569-4.494-18.681-10.212 2.2486 10.295 12.222 18.057 24.191 18.057 5.8574 0 11.234-1.8617 15.466-4.9653 4.353 6.3731 12.112 10.619 20.964 10.619 7.5221 0 14.254-3.068 18.779-7.901 3.8852 1.6297 8.2062 2.502 12.765 2.5448 10.283 0.0967 19.673-5.6931 24.57-12.303"
        fill="#d9d9d9"
      />
    </g>
  </defs>
  <use xlink:href="#nuvola-path" />
</svg>
@keyframes sliding {
  15% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    transform: translateX(calc(98vw - 100%));
  }
}

Deployment

How to go online

TODO

Conclusion

TODO