Here We Go Round the Mulberry Bush

20 December 202304 novembre 2023 by Matt Biscay · Lecture: 5 minutes

Introduction

“Here We Go Round the Mulberry Bush” is not just a traditional nursery rhyme; it’s a formative part of childhood for many people around the world. This enchanting singing game has been passed down from generation to generation, captivating young minds and fostering a sense of community and fun.

With its simple yet memorable lyrics and universally relatable themes, the nursery rhyme holds a special place in global folklore. This article seeks to delve deep into the intricate world of this nursery rhyme, exploring its rich history, diverse variations, and the underlying meanings and messages that have made it a timeless classic.

The Nursery Rhyme

Before embarking on this fascinating journey, it’s essential to familiarize ourselves with the most popularly recited version of the nursery rhyme. This rendition has served as the standard form for many English-speaking households.

Here we go round the mulberry bush,
The mulberry bush, the mulberry bush,
Here we go round the mulberry bush,
On a cold and frosty morning.

This is the way we wash our hands,
Wash our hands, wash our hands,
This is the way we wash our hands,
On a cold and frosty morning.

This is the way we brush our hair,
brush our hair, brush our hair,
This is the way we brush our hair,
On a cold and frosty morning.

This is the way we go to school,
Go to school, go to school,
This is the way we go to school,
On a cold and frosty morning.

This is the way we wave bye-bye,
Wave bye-bye, wave bye-bye,
This is the way we wave bye-bye,
On a cold and frosty morning.
Here We Go Round The Mulberry Bush
Here we go round the mulberry bush

Origins and history

England: the birthplace

Many believe that “Here We Go Round the Mulberry Bush” originated in England. Historical records hint at the rhyme being popular as far back as the 19th century. Intriguingly, the “mulberry bush” in question is often thought to represent a prison exercise yard. In this interpretation, the song’s roots lie in the harsh realities of historical English penitentiaries, where prisoners would be led around a mulberry tree as a form of exercise.

Theories and speculations

The song’s origins are not just limited to the prison yard theory. Over the years, scholars and enthusiasts have developed various hypotheses about its genesis. One compelling theory suggests that the song initially served as a way for children to mimic adult activities. The original game accompanying the song involved children forming a circle and imitating daily chores, reflecting the societal norms and routines of the time.

An image of a computer screen with a green and purple background displaying the Message Of The Day (MOTD) on Ubuntu Server.

Changer le Message Of The Day (MOTD) sous Ubuntu Server

20 December 202312 octobre 2023 by Matt Biscay · Lecture: 5 minutes

Le Message Of The Day (communément appelé MOTD) est un message d’accueil ou des notifications importantes que les administrateurs de serveurs peuvent configurer pour s’afficher lorsqu’un utilisateur se connecte au serveur via SSH.

Ce tutoriel vous montre comment mettre à jour et personnaliser le MOTD sur un serveur Ubuntu 22.04.

Prérequis

Serveur Ubuntu 22.04 avec accès root ou un utilisateur avec des privilèges sudo.
Accès SSH au serveur.

Étape 1 : connexion au Serveur

Connectez-vous à votre serveur Ubuntu via SSH:

ssh USER@SERVER_IP -pPORTCode language: CSS (css)

Étape 2 : vérifier le MOTD existant

Pour voir le MOTD actuel, utilisez la commande suivante :

cat /run/motd.dynamic

Étape 3 : modifier le MOTD dynamique

Ubuntu 22.04 utilise des scripts dans le répertoire /etc/update-motd.d/ pour générer une partie du MOTD dynamiquement. Vous pouvez ajouter, supprimer ou modifier les scripts dans ce répertoire pour personnaliser davantage le MOTD.

Entête MOTD

Nous allons créer un entête qui contient le nom de notre serveur en ASCII art, ce qui nous permettra de bien l’identifier lors de nos sessions SSH:

sudo nano /etc/update-motd.d/00-custom

Et on y ajoute notre script bash:

#!/bin/sh

# Reset
Color_Off='\033[0m'       # Text Reset

# Bold
BBlack='\033[1;30m'       # Black
BRed='\033[1;31m'         # Red
BGreen='\033[1;32m'       # Green
BYellow='\033[1;33m'      # Yellow
BBlue='\033[1;34m'        # Blue
BPurple='\033[1;35m'      # Purple / Magenta
BCyan='\033[1;36m'        # Cyan
BWhite='\033[1;37m'       # White

# Set the text color to green
printf "$BGreen"

# https://patorjk.com/software/taag/#p=display&f=Doom&t=APOLLO%20.%20SKYMINDS%20.%20NET
cat << "EOF"
  ___  ______ _____ _      _     _____       _____ _   ____   ____  ________ _   _______  _____       _   _  _____ _____
 / _ \ | ___ \  _  | |    | |   |  _  |     /  ___| | / /\ \ / /  \/  |_   _| \ | |  _  \/  ___|     | \ | ||  ___|_   _|
/ /_\ \| |_/ / | | | |    | |   | | | |     \ `--.| |/ /  \ V /| .  . | | | |  \| | | | |\ `--.      |  \| || |__   | |
|  _  ||  __/| | | | |    | |   | | | |      `--. \    \   \ / | |\/| | | | | . ` | | | | `--. \     | . ` ||  __|  | |
| | | || |   \ \_/ / |____| |___\ \_/ /  _  /\__/ / |\  \  | | | |  | |_| |_| |\  | |/ / /\__/ /  _  | |\  || |___  | |
\_| |_/\_|    \___/\_____/\_____/\___/  (_) \____/\_| \_/  \_/ \_|  |_/\___/\_| \_/___/  \____/  (_) \_| \_/\____/  \_/
EOF

# Set the text color to magenta
printf "$BPurple"

# Left image lines
left1="                                   88 88  "
left2="                                   88 88  "
left3="                                   88 88  "
left4=",adPPYYba, 8b,dPPYba,   ,adPPYba,  88 88  ,adPPYba,"
left5="\"\"     \`Y8 88P'    \"8a a8\"     \"8a 88 88 a8\"     \"8a"
left6=",adPPPPP88 88       d8 8b       d8 88 88 8b       d8"
left7="88,    ,88 88b,   ,a8\" \"8a,   ,a8\" 88 88 \"8a,   ,a8\""
left8="\"8bbdP\"Y8 88\`YbbdP\"'   \"\"YbbdP\"'  88 88  \"\"YbbdP\"'"
left9="           88                                          "
left10="           88                                         "

# Right image lines
right1=" .              +   .                .   . .     .  ."
right2="                   .                    .       .     *"
right3="  .       *                        . . . .  .   .  + ."
right4="            \"You Are Here\"            .   .  +  . . ."
right5=".                 |             .  .   .    .    . ."
right6="                  |           .     .     . +.    +  ."
right7="                 \\|/            .       .   . ."
right8="         . .        V          .    * . . .  .  +   ."
right9="               +      .           .   .      +"
right10="                               .       . +  .+. ."

# Combine and print
echo "$left1 $right1"
echo "$left2 $right2"
echo "$left3 $right3"
echo "$left4 $right4"
echo "$left5 $right5"
echo "$left6 $right6"
echo "$left7 $right7"
echo "$left8 $right8"
echo "$left9 $right9"
echo "$left10 $right10"

# STATS
upSeconds="$(/usr/bin/cut -d. -f1 /proc/uptime)"
secs=$((${upSeconds}%60))
mins=$((${upSeconds}/60%60))
hours=$((${upSeconds}/3600%24))
days=$((${upSeconds}/86400))
UPTIME=$(printf "%d days, %02dh%02dm%02ds" "$days" "$hours" "$mins" "$secs")

# get the load averages
read one five fifteen rest < /proc/loadavg

# text in yellow
printf "$BYellow"

echo "
   .~~.   .~~.    `date +"%A, %e %B %Y, %r"`
  '. \ ' ' / .'   `uname -srmo`
   .~ .~~~..~.
  : .~.'~'.~. :   Uptime.............: ${UPTIME}
 ~ (   ) (   ) ~  Memory.............: `cat /proc/meminfo | grep MemFree | awk {'print $2'}`kB (Free) / `cat /proc/meminfo | grep MemTotal | awk {'print $2'}`kB (Total)
( : '~'.~.'~' : ) Load Averages......: ${one}, ${five}, ${fifteen} (1, 5, 15 min)
 ~ .~ (   ) ~. ~  Running Processes..: `ps ax | wc -l | tr -d " "`
  (  : '~' :  )   IP Addresses.......: `ip a | grep glo | awk '{print $2}' | head -1 | cut -f1 -d/` and `wget -q -O - https://icanhazip.com/ | tail`
   '~ .~~~. ~'    Weather............: `curl -s "https://rss.accuweather.com/rss/liveweather_rss.asp?metric=1&locCode=EUR|FR|FR|NANTES|" | sed -n '/Currently:/ s/.*: \(.*\): \([0-9]*\)\([CF]\).*/\2°\3, \1/p'`
       '~'
"

# text default colour
printf "$Color_Off"Code language: PHP (php)

Cela affiche le nom du serveur (apollo.skyminds.net) puis une petite frise, et enfin les statistiques ainsi que la météo pour Nantes. Vous pouvez modifier la ville dans l’avant-dernière ligne.

Notez que j’ai compilé deux images pour qu’elles s’affichent sur les mêmes lignes: le mot “apollo” en ASCII art et une version de l’univers avec le texte “You are here!”. Il faut jouer avec l’indentation mais au bout de quelques essais, cela rend plutôt pas mal je trouve.

Rendez le script exécutable :

sudo chmod +x  /etc/update-motd.d/00-custom

Lancez la compilation de tous les modules dynamiques pour obtenir le MOTD final qui sera affiché à chaque connexion SSH:

run-parts /etc/update-motd.d/ > /run/motd.dynamicCode language: JavaScript (javascript)

Vanilla JS : identifier l’élément plus large que le viewport

20 December 202328 septembre 2023 by Matt Biscay · Lecture: 2 minutes

Aujourd’hui, je régle un petit souci d’affichage sur un une boutique WooCommerce propulsée par Astra.

Le problème est le suivant: lorsqu’on visite le site depuis un mobile, il est possible de faire bouger le contenu de la page vers la gauche, ce qui dévoile une hideuse colonne grise/verte sur le côté droit. Pourtant, aucun élément ne semble dépasser la largeur du contenu.

L’identification de l’élément causant ce défaut d’affichage n’est pas vraiment une chose aisée, car visuellement, on ne distingue rien qui dépasse.

Vanilla JS à la rescousse

Voici un petit script en Vanilla JS qui permet de trouver l’élément qui dépasse la largeur du viewport de votre page:

/**
 * Identify elements that exceed the viewport width
 * by Matt Biscay
 * https://www.skyminds.net/?p=614036
 */
document.addEventListener("DOMContentLoaded", function() {
  const elements = document.querySelectorAll('body *');
  elements.forEach(element => {
    if (element.offsetWidth > document.documentElement.clientWidth) {
      console.log('Element causing overflow: ', element);
    }
  });
});Code language: JavaScript (javascript)

CSS: couvrez cet overflow que je ne saurais voir

Une fois votre ou vos éléments identifiés, il ne vous reste plus qu’à cacher son overflow-x :

#element {
  overflow-x: hidden;
}Code language: CSS (css)

Rafraîchissez la page. Hop, problème résolu.

← Précédent Suivant →