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 screenshot

snake-game sources

Animated Screen effect with CSS only

Check the live version here

animaged scree with css

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 with css and svg

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:

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

Usage:

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

CSS flex-layout sources