Experiments with CSS, JavaScript and DevOPS

Snake Game

A clone of the famous snake game before smartphones were a thing.
You can play it in the live-version here

snake-game sources

Multiple-clocks

Create an animated clock with different technologies, like with CSS and with SVG + JavaScript

Live version: https://multiple-clocks.vercel.app/

Multiple-clocks sources

CSS flex-layout

The idea was to create a tiny framework based on css flex-box to manage grids without flooding the html.
Once one defines a container everything inside it is turn into a column, greatly reducing the amount of tags needed.

It is published as an npm package here and can be installed as:

1npm i @webdev-tools/css-flex-layout

Usage:

 1<section class="fl-3-cols-container">
 2  <aside>001</aside>
 3  <aside>002</aside>
 4  <aside>003</aside>
 5  <!-- breaks to next line -->
 6  <aside>004</aside>
 7  <aside>005</aside>
 8  <aside>006</aside>
 9  <!-- breaks to next line -->
10  <aside>007</aside>
11  <!-- alone on the last line -->
12</section>

CSS flex-layout sources