hscc

Soure code of <https://hugo.soucy.cc>.
git clone git://soucy.cc/hscc.git
Log | Files | Refs

commit 9804d6766ae5c8a47b2f248fa4d398dc05d28b12
parent 6c11a263b5146c4ed5b81a425f1ea5a4d9c37607
Author: Hugo Soucy <hugo@soucy.cc>
Date:   Sun, 24 Apr 2022 20:55:42 -0400

Modify draft and add others

Diffstat:
Adrafts/smolnet.md | 24++++++++++++++++++++++++
Mdrafts/unix-web-ide.md | 15+++++++++++----
Mdrafts/unix-web-ide.org | 2+-
Adrafts/unix-web/colors.css | 9+++++++++
Mdrafts/unix-web/css-unix.md | 147++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-------------
Mdrafts/unix-web/html.md | 19+++++++++++++++++++
Mdrafts/unix-web/images.md | 18+++++++++++++++++-
Adrafts/unix-web/tokens.colors.csv | 4++++
Adrafts/unix-web/tokens.sh | 28++++++++++++++++++++++++++++
9 files changed, 237 insertions(+), 29 deletions(-)

diff --git a/drafts/smolnet.md b/drafts/smolnet.md @@ -0,0 +1,24 @@ +# Smolnet, AKA the small Internet + +* FTP + * ... +* Email + * https://ar.al/2021/12/20/how-to-send-an-email/ +* Gopher / Gemini + * https://thedorkweb.substack.com/p/gopher-gemini-and-the-smol-internet + * https://proxy.vulpes.one/ + * https://www.minnpost.com/business/2016/08/rise-and-fall-gopher-protocol/ + * https://www.linux-magazine.com/Issues/2021/245/The-Rise-of-the-Small-Internet +* IRC + * . +* Finger + * https://famicoman.com/2017/03/01/running-using-a-finger-daemon/ + * https://github.com/sirjofri/fingerlist + * People + * finger://peter@tcp.rip + * finger://julien@typed-hole.org +* Usenet + * https://blog.opencollective.com/usenet-big-8/ +* ?? +* Misc + * https://sr.ht/~julienxx/Castor/ diff --git a/drafts/unix-web-ide.md b/drafts/unix-web-ide.md @@ -9,6 +9,11 @@ Les outils que l'on trouve sur GNU/Linux et BSD et qui pourraient vous rendre d'exellent services pour le développement web. +J'ose même prétendre que c'est une approche qui devrait être enseigner +aux apprentis développeurs, c'est-à-dire apprendre à résoudre des +problèmes avec l'interface de programmation qui se trouve par défaut +sur leur machine [Unix]. + Le but est de montrer qu'il exsiste des alternatives aux scripts NPM, pas de les remplacer ... * Se réaproprier le Web et son ordinateur. @@ -30,11 +35,11 @@ Et `Make` pour regrouper le tout. des outils NodeJS. * Permet de s'adapter à différent besoin. * Simplifier nos pratiques et alléger la dette technique. -* Limite les dépendances. +* Limite la pile des dépendances. * Avoir des pratiques qui pérennes dans le temps et rétrocompatibles. * Documentation exhautives. * La plupart sont des technologies éprouvées. -* Facilite l'intégration de plusieurs langages de scripts selon les besoins ou les compétences: bash, python, perl, lua, etc. +* Facilite l'intégration de plusieurs langages de scripts selon les besoins ou les compétences: bash (shell script), python, perl, lua, etc. ## Inconvénients @@ -57,6 +62,7 @@ pas besoin de htop ou autres seulement utiliser grep * Avec Python * Avec PHP * Avec Perl (https://metacpan.org/pod/HTTP::Daemon) +* Autres? ## find @@ -90,7 +96,7 @@ Surveiller les changements avec entr et find ## rsync (openrsync) -... +déployer avec rsync ou git ## stdin, stdout, stderr, |, <, <<, >, >> @@ -126,8 +132,9 @@ Travaille sur plusieurs terminal en même temps ## Inkscape et Scour * Manipuler et compresser du SVG +* Est-ce possible de convertir des svg en symbols, pour ensuite les regrouper en un SVG de type Sprite? -## pngquant, jpegtran, cwebp, etc +## pngquant, jpegtran, cwebp, etc. Compresser les image diff --git a/drafts/unix-web-ide.org b/drafts/unix-web-ide.org @@ -3,7 +3,7 @@ #+EMAIL: hugo@soucy.cc #+DESCRIPTION: Les systèmes basés sur Unix sont de vrais coffrent à outils souvent sous-utilisés, surtout chez les concepteurs de sites web. -- Beaucoup de développeur utilisent un système d'exploitation basé sur +- Beaucoup de développeur web utilisent un système d'exploitation basé sur Unix, que ce soit GNU/Linux, Mac OS, ou BSD. Mais peu d'entre eux l'utilise de façon optimale, le plus souvent par méconnaissance. - Ils vont se tourner vers des solutions tiers, même quand ils ont diff --git a/drafts/unix-web/colors.css b/drafts/unix-web/colors.css @@ -0,0 +1,9 @@ +--teal-hex: #008080; +--teal-rgb: 0,50,50; +--teal-hsl: 180,100,25; +--navy-hex: #000080; +--navy-rgb: 0,0,50; +--navy-hsl: 240,100,25; +--purple-hex: #800080; +--purple-rgb: 50,0,50; +--purple-hsl: 300,100,25; diff --git a/drafts/unix-web/css-unix.md b/drafts/unix-web/css-unix.md @@ -1,40 +1,42 @@ -<!-- CSS et UNIX --> - -<!-- cssmin --> -<!-- valider avec : http://jigsaw.w3.org/css-validator/validator?uri=https://hugo.soucy.cc/css/index.min.css&profile=css3svg&usermedium=all&warning=1&vextwarning=&lang=fr --> - -* Concaténer des feuilles de styles (cat). -* Trouver et remplacer en lot (grep, sed). +# CSS et Unix +<!-- * Concaténer des feuilles de styles (cat). --> +<!-- * Design system basé sous des fichiers CSV --> +<!-- * Surveiller les changements avec `entr`. --> ## Regrouper plusieurs feuilles de styles ensemble sous Unix À des fins de performance, cela peut-être une bonne idée de regrouper nos feuilles de styles pour réduire le nombre de requêtes HTTP. -Si avec HTTP 1 c'était bien vue de ne servir qu'un seul fichier -CSS. Avec HTTP 2, il est conseiller de découper ses feuilles en -plusieurs ballots hiérarchisés. +Si avec HTTP 1.1, c'était bien vue de ne servir qu'un seul fichier +CSS. Avec HTTP 2, il est conseillé de découper ses feuilles en +plusieurs ballots hiérarchisés, plutôt qu'en un seul gros bloc de +code. À ce sujet, voir le banc d'essai de Harry Roberts: [CSS and Network Performance](https://csswizardry.com/2018/11/css-and-network-performance/). +### `@import` + La règle CSS `@import`, n'est pas conseillé en production pour justement une question de performance. +Alors quelle autre option nous reste-t-il si on veut découper nos +styles sans passer par un préprocesseur? + ### `cat` -Donc pour concaténer des fichiers ensemble sous Unix il faut utiliser -le programme `cat`. +Pour concaténer des fichiers ensemble sous Unix il faut utiliser le +programme `cat`. cat - concatenate and print files -Si vous n'avez pas beaucoup de fichiers CSS vous pourriez tout -simplement faire: +Avec peu de fichiers CSS, on peut simplement faire: cat a.css b.css c.css d.css e.css f.css > styles.css -Idéalement on pourrait faire: +En voulant être plus concis cela serait: cat *.css > styles.css @@ -43,19 +45,118 @@ pas neutraliser ou déclasser certains styles. Dans les programmes du shell il y a un flux entrant (standard input ou stdin) et un flux sortant (standard output ou stdout). La lecture se -fait par le stdin et l'écriture par le stdout. +fait par le **stdin** et l'écriture par le **stdout**. Il y a aussi un flux +sortant pour les erreurs (standard error ou stderr). + +Il est toutefois possible détourner ces flux. Comme par exemple avec +`<` ou `>` en appliquant des redirections vers un fichier, comme dans +mon exemple ci-haut, avec le programme `cat`, où l'on redirige la +sortie vers le fichier `styles.css`. Sans cette redirection le +résultat s'afficherait dans le terminal avec `stdout`. + +La redirection d'entrée utilise le symbole `<`. Cela permet d'indiquer +qu'un fichier sera passé en *stdin*. + +### Concaténer une liste de CSS avec `while`, `read` et `<` + +Maintenant nous allons utilser une boucle de type `while`, combiné +avec le programme `read`, pour concaténer un groupe de fichiers CSS. + +Notre liste se trouve dans un fichier nommé `global-styles.txt`. Nous +y avons inscrit une feuille de style par ligne: + + global/tokens/typography.css + global/tokens/colors.css + global/tokens/grid.css + + global/base.css + global/a11y.css + +Ensuite, notre script sera dans un autre fichier que nous appellerons +`css.sh`: + + #!/bin/sh + + while read -r line; do + [ -n "$line" ] && cat "./$line" + done < global-styles.txt + + +Attention, il est important de s'assurer que ce fichier soit +exécutable (`chmod u+x css.sh`), avant de lancer la commande: + + ./css.sh -Mais il est possible détourner ces flux. Comme par exemple avec `<` ou -`>` en appliquant des redirections vers un fichiers. +Si tout s'est bien passé, on constate que le contenu de toutes les +feuilles que nous avons listées s'affichent dans le terminal. + +Dans ce script, la valeur de chaque ligne est assignée à la variable +`line`. Puis `[ -n "$line" ]`, teste si la chaîne de caractère +retournée par `$line` n'est pas `null` avant de d'exécuter `cat`. Et +finalement, notre liste est dirigée dans la boucle avec `<`. + +L'étape suivante serait de rediriger `stdout` vers un fichier CSS avec +`>`: + + #!/bin/sh while read -r line; do - [ ! -z "$line" ] && cat "./$line" - done <<-EOF | tr -d '\n\r' > "$global.css" + [ -n "$line" ] && cat "./$line" + done < global-styles.txt > global.css + + +On pourrait aussi ne pas vouloir de fichier `.txt` et lister +directement dans le script les fichier à concaténer: + + #!/bin/sh + + while read -r line; do + [ -n "$line" ] && cat "./$line" + done <<EOF + global/tokens/typography.css + global/tokens/colors.css + global/tokens/grid.css + + global/base.css + global/a11y.css + EOF - global/typography.css - global/colors.css - global/grid.css +Ici `EOF` est une commande qui permet de faire une entrée +multiligne. Donc toutes les lignes qui se trouve entre `<<EOF` et +`EOF` est passé à `stdin`. + +## Minifier une feuille de style avec `tr` pour réduire son poid + +Le programme `tr` sert à *traduire* ou éliminer des caractères. Il va +permettre de retirer les sauts de ligne et les retours dans notre CSS, +pour ramener toutes les règles sur une seule ligne. Le poid du fichier +sera donc un peu moindre: + + cat global.css | tr -d '\n\r' > "$global.min.css" + +Ce n'est pas la façon la plus optimale de minifier, mais avec +plusieurs feuilles style cela permet de faire des gains de plusieurs +kilooctets. Sinon avec le programme `sed`, il est sans doute possible +d'améliorer la soustraction. + +Le caractère `|`, que l'on appelle *pipe*, sert à lier deux processus +en prenant le flux de sortie du premier, pour en faire le flux +d'entrée du second. + +Rendu ici, on peut mettre ensemble la concaténation et minification: + + #!/bin/sh + + while read -r line; do + [ -n "$line" ] && cat "./$line" + done <<EOF | tr -d '\n\r' > "global.min.css" + global/tokens/typography.css + global/tokens/colors.css + global/tokens/grid.css + + global/base.css + global/a11y.css EOF --- diff --git a/drafts/unix-web/html.md b/drafts/unix-web/html.md @@ -1,5 +1,24 @@ +# HTML et Unix + +Par défaut dans Unix, il n'y a pas grand chose d'intéressant pour le +HTML, à part peut-être faire de l'édition avec `vi`, ou bien parcourir +un fichier avec `cat` ou `less` (`more`). + +Sinon, ce n'est sans doute pas une bonne idée de manipuler le HTML +avec les utilitaires habituels, comme `sed` ou `awk`. Ils ne sont pas +fait pour cela. + +## L'utilitaire `xmllint` + +Si le HTML est du XHTML parfaitement formé, `xmllint` + <!-- Le HTML avec UNIX --> +<https://mywiki.wooledge.org/BashFAQ/113> + <!-- HTML Tidy --> HTML Tidy avec cURL pour tester l'accessibilité ou la qualité du HTML. `curl http://example.com/about.html | tidy` + +<!-- XMLlint --> +XMLlint pour valider le SVG, XHTML et RSS/Atom. diff --git a/drafts/unix-web/images.md b/drafts/unix-web/images.md @@ -1,6 +1,22 @@ <!-- Les images avec UNIX --> <!-- imagemagick --> <!-- inkscape, scour --> -<!-- pngquant,pngcrush, jpegtran, etc. --> +<!-- cwebp, pngquant, pngcrush, jpegtran, etc. --> find, stat + +--- + +De nos jours avec le Web sous une mirade de plateforme et de tailles +d'écran les images sont encore un enjeux très important et trop +souvent négligé ... + +Bien sûr grâce au CSS et au SVG nous sommes maintenant libre de corvé +de découpage d'image directement dans Photoshop pour avoir des ombres +portées, des dégradés, des boutons ou des bordures stylisés :) Et +c'est merveilleux. + +Mais les défis sont ailleurs, davantage dans la taille et le découpage +des images de contenu pour qu'elles soient optimisé aux différents +contextes de navigation: Performance de chargement, densité de pixel, +etc. diff --git a/drafts/unix-web/tokens.colors.csv b/drafts/unix-web/tokens.colors.csv @@ -0,0 +1,4 @@ +name|hex code|rgb|hsl +teal|#008080|0,50,50|180,100,25 +navy|#000080|0,0,50|240,100,25 +purple|#800080|50,0,50|300,100,25 diff --git a/drafts/unix-web/tokens.sh b/drafts/unix-web/tokens.sh @@ -0,0 +1,28 @@ +#!/bin/sh + +# Color token +# Delete the first line with sed +# Then loop over the CSV file +sed 1d tokens.colors.csv | while read -r color; do + color_name=$(echo "$color" | cut -d "|" -f 1) + color_hex=$(echo "$color" | cut -d "|" -f 2) + color_rgb=$(echo "$color" | cut -d "|" -f 3) + color_hsl=$(echo "$color" | cut -d "|" -f 4) + + echo "--$color_name-hex: $color_hex;" + echo "--$color_name-rgb: $color_rgb;" + echo "--$color_name-hsl: $color_hsl;" +done > cat << EOT +content-type: text/html + +<!DOCTYPE html> +<html> +<head> +<title>Test</title> +<meta http-equiv="refresh" content="10" /> +</head> +<body> +$(color_hsl) +</body> +</html> +EOT