Giuseppe Caruso carusog

Code is clean if it can be understood easily – by everyone on the team. Clean code can be read and enhanced by a developer other than its original author. With understandability comes readability, changeability, extensibility and maintainability.

General rules

Follow standard conventions.
Keep it simple stupid. Simpler is always better. Reduce complexity as much as possible.
Boy scout rule. Leave the campground cleaner than you found it.
Always find root cause. Always look for the root cause of a problem.

Design rules

Why I use web components

This is some sort of answer to recent posts regarding Web Components, where more than a few misconceptions were delivered as fact.

Let's start by defining what we are talking about.

The Web Components Umbrella

As you can read in the dedicated GitHub page, Web Components is a group of features, where each feature works already by itself, and it doesn't need other features of the group to be already usable, or useful.

Gulp + Sass + LiveReload

This Gist goes over setting up a gulp workflow that will:

watch for any sass changes, then compiles sass source into css
watch for any changes in the public directory, and trigger live-reload
serve static content in public/

	;; nano-emacs.el --- NANO Emacs (minimal version) -- lexical-binding: t --

	;; Copyright (c) 2025 Nicolas P. Rougier
	;; Released under the GNU General Public License 3.0
	;; Author: Nicolas P. Rougier <[email protected]>
	;; URL: https://github.com/rougier/nano-emacs

	;; This is NANO Emacs in 256 lines, without any dependency
	;; Usage (command line): emacs -Q -l nano.el -[light\|dark]

	<link rel="shortcut icon" width=32px>
	<canvas style="display: none" id="loader" width="16" height="16"></canvas>

	<script>
	class Loader {
	constructor(link, canvas) {
	this.link = link;
	this.canvas = canvas;
	this.context = canvas.getContext('2d');
	this.context.lineWidth = 2;

	/**
	* Marching ants selection
	*/

	rect {
	stroke: black;
	stroke-width: 2px;
	stroke-dasharray: 5px 3px;
	animation: marching-ants .6s linear infinite;
	fill: none;

	/**
	* Marching ants border
	*/

	@keyframes ants { to { background-position: 100% 100% } }

	div {
	padding: 1em;
	border: 1px solid transparent;
	background: linear-gradient(white, white) padding-box,

	# -----------------------------------------------------------------
	# .gitignore for WordPress @salcode
	# ver 20180808
	#
	# From the root of your project run
	# curl -O https://gist.githubusercontent.com/salcode/b515f520d3f8207ecd04/raw/.gitignore
	# to download this file
	#
	# By default all files are ignored. You'll need to whitelist
	# any mu-plugins, plugins, or themes you want to include in the repo.

	const convertToKebabCase = (string) => {
	return string.replace(/\s+/g, '-').toLowerCase();
	}