hscc

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

commit 6e7b865a6791c953b48aa46f4a8244f7382dc714
parent 6aaae9c8d2276934430bbb02af3d2d97c309ea2f
Author: Hugo Soucy <hugo@soucy.cc>
Date:   Sun, 24 Apr 2022 20:57:07 -0400

Add new content

Diffstat:
Acontent/2022/mp/basic-html-competency-is-the-new-punk-folk-explosion.lua | 8++++++++
Acontent/2022/mp/basic-html-competency-is-the-new-punk-folk-explosion.md | 37+++++++++++++++++++++++++++++++++++++
Acontent/2022/nt/masculinite-toxique-et-coors-light.lua | 10++++++++++
Acontent/2022/nt/masculinite-toxique-et-coors-light.md | 8++++++++
Acontent/2022/nt/patrons-des-banques-aiment-l-endettement.lua | 7+++++++
Acontent/2022/nt/patrons-des-banques-aiment-l-endettement.md | 18++++++++++++++++++
Acontent/2022/nt/pivot-pdg-banques-640w.png | 0
Acontent/2022/tx/Mike_Bossy_1978.png | 0
Acontent/2022/tx/bossy-elon.lua | 10++++++++++
Acontent/2022/tx/bossy-elon.md | 70++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Acontent/2022/tx/index.lua | 6++++++
Acontent/2022/tx/index.md | 3+++
Acontent/webdev-unix/css.lua | 5+++++
Acontent/webdev-unix/css.md | 165+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Acontent/xfn.html | 171+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
15 files changed, 518 insertions(+), 0 deletions(-)

diff --git a/content/2022/mp/basic-html-competency-is-the-new-punk-folk-explosion.lua b/content/2022/mp/basic-html-competency-is-the-new-punk-folk-explosion.lua @@ -0,0 +1,8 @@ +return { + title = "Basic HTML Competency Is the New Punk Folk Explosion!", + url = "https://coolguy.website/basic-html-competency-is-the-new-punk-folk-explosion/", + date = "2022-04-06", + datetime = "09:01:42", + posttype = "bookmark", + keywords = { "html","webdev","diy", } +} diff --git a/content/2022/mp/basic-html-competency-is-the-new-punk-folk-explosion.md b/content/2022/mp/basic-html-competency-is-the-new-punk-folk-explosion.md @@ -0,0 +1,37 @@ +<https://coolguy.website/basic-html-competency-is-the-new-punk-folk-explosion/> + +> "In my head, there was a clear connection between the diy punk movement +> of the 80's and the folk revival of the 60's and 70's. Punk culture +> was all about doing things yourself, which meant you had to learn how +> things were done in the first place." +> +> [...] +> +> "I know it feels premature to say that basic HTML competency is a type +> of folk craft, but I'm not sure what else to call it." +> +> "How does something become a folk tradition? Is it the age of the +> practice, or how many (or few) people practice it? Folk revivalists in +> the 60's were idolizing artists from the depression era, which +> happened just 30 years prior. The world wide web is nearly 30 years +> old, and the internet itself over 60. There are people leading +> internet companies today who are far younger than the web, who never +> knew a world without the internet. If a teen is drawn to early web +> aesthetics, it is not out of a nostalgia for their youth. It is, +> instead, a yearning for a time from before they even existed, a time +> they can only imagine." +> +> [...] +> +> "I want our personalities to come through not just in the words or +> links we share, but in the URLS we use and the code we write. I dream +> of regional communities forming online, based around organically grown +> web rings, and for idiosyncrasies to form in the aesthetics of our +> sites based on the communities we learned to code from. Basically, to +> bring back all the things that made the early internet so exciting and +> open and welcoming. It's a little bit harder, but that's part of the +> charm." + +Voir aussi [The Old Internet Shows Signs of Quietly Coming +Back](https://cheapskatesguide.org/articles/old-internet-coming-back.html). + diff --git a/content/2022/nt/masculinite-toxique-et-coors-light.lua b/content/2022/nt/masculinite-toxique-et-coors-light.lua @@ -0,0 +1,10 @@ +return { +title = "Masculinité toxique et coors light", +date = "2022-04-11", +datetime = "11:44:27", +posttype = "note", +keywords = { "masculinité toxique" }, +posse = { + mastodon = "https://mastodon.sdf.org/@hs0ucy/108114230965502268" +} +} diff --git a/content/2022/nt/masculinite-toxique-et-coors-light.md b/content/2022/nt/masculinite-toxique-et-coors-light.md @@ -0,0 +1,7 @@ +Pourquoi la masculinité toxique boit de la *coors light*? 😛 + +Pourquoi la masculinité toxique se cache dans son pick-up ou derrière +un gun? + +Et pourquoi la masculinité toxique a peur de regarder les changements +climatiques droit dans les yeux? +\ No newline at end of file diff --git a/content/2022/nt/patrons-des-banques-aiment-l-endettement.lua b/content/2022/nt/patrons-des-banques-aiment-l-endettement.lua @@ -0,0 +1,7 @@ +return { + title = "Les patrons des banques aiment ça le monde endetter et la guerre", + date = "2022-03-23", + datetime = "20:01:37", + posttype = "note", + keywords = { "banque","endettement","guerre", } +} diff --git a/content/2022/nt/patrons-des-banques-aiment-l-endettement.md b/content/2022/nt/patrons-des-banques-aiment-l-endettement.md @@ -0,0 +1,18 @@ +> "Hausse de rémunération de 15 millions $ : les patrons des banques +> canadiennes bénéficient de l’endettement des ménages" + +Ces **assités sociaux corporatifs** s'enrichissent du malheur des +gens. En temps de guerre, les armuriers, les banquiers et autres +amants de la cupidité, sont souvent les seuls qui sortent vraiment +vainqueurs des crises. + +![Les dirigeants des cinq plus grandes banques canadiennes derrières un gros tas de fric | Montage : Thibault Carron, Pivot](/2022/nt/pivot-pdg-banques-640w.png) + +> "Les dirigeants de banques ont empoché des sommes record en 2021 au +> Canada. Ils ont eu droit à de généreux bonus, leurs entreprises +> ayant eu une année profitable. Les banques ont en effet bénéficié de +> la bulle immobilière et de l’endettement des ménages en temps de +> crise pandémique. Pendant ce temps, l’écart de rémunération entre +> les dirigeants et les employé·s continue de se creuser fortement." + +<https://pivot.quebec/2022/03/11/hausse-de-remuneration-de-15-millions-les-patrons-des-banques-canadiennes-beneficient-de-lendettement-des-menages/> diff --git a/content/2022/nt/pivot-pdg-banques-640w.png b/content/2022/nt/pivot-pdg-banques-640w.png Binary files differ. diff --git a/content/2022/tx/Mike_Bossy_1978.png b/content/2022/tx/Mike_Bossy_1978.png Binary files differ. diff --git a/content/2022/tx/bossy-elon.lua b/content/2022/tx/bossy-elon.lua @@ -0,0 +1,10 @@ +return { +title = "Bossy Elon", +date = "2022-04-15", +datetime = "10:06:38", +posttype = "article", +keywords = { "twitter","Mike Bossy" }, +summary = [[ +Hier, les gens s'énervaient le poil des jambes parce que le roi des douchebags veut acheter un site web pour 43 milliards de dollars [inflationnés]. Quel monde de fous! Un monde où, un humain a le droit de posséder autant d'argent, est un monde malade... +]] +} diff --git a/content/2022/tx/bossy-elon.md b/content/2022/tx/bossy-elon.md @@ -0,0 +1,69 @@ +## L'oiseau bleu + +Hier, les gens s'énervaient le poil des jambes parce que le roi des +douchebags veut acheter un site web pour 43 milliards de dollars +[inflationnés]. Quel monde de fous! + +Un monde où, un humain a le droit de posséder autant d'argent, est un +monde malade. + +La liberté la belle affaire! Mais elle ne fait aucun sens sans +l'égalité et la coopération. Comment nous battre pour ramener un +semblant d'équilibre, quand des individus, qui veulent le contraire, +ont accumulés autant de puissance et d'influence?! + +Le statu quo ne durera pas, et ce cancer de l'Éthique nous laisse peu +de chance de rémission. Pourtant [l'ennemi n'est pas +invisible](https://pivot.quebec/2021/11/01/il-est-temps-de-nommer-les-adversaires-dans-la-lutte-pour-le-climat/ +"Il est temps de nommer les adversaires dans la lutte pour le +climat"), il est complaisant et nous regarde d'un air supérieur, +transpirant l'hubris. + +--- + +## Mike + +Et aujourd'hui, nous apprenons la mort de Mike Bossy, un grand joueur +de hockey de la fin des années 70' et 80'. Il est mort de cancer je +crois. + +Je suis assez vieux pour l'avoir vu jouer, mais je mentirais si je +disais que je m'en souviens, vue que j'allais au lit après +Passe-Partout :P + +![Mike Bossy dans l'uniforme des Islanders de New York en 1978](/2022/tx/Mike_Bossy_1978.png) + +J'essaie de trouver un lien entre ces deux événments. Il n'y en a +peut-être pas? + +D'un coté, nous avons un homme qui cherche le pouvoir, la domination, +en pratiquant la cupidité. Un individu qui s'approprie le travail +d'autrui. Quelqu'un qui prétend savoir à lui seul, ce qui est bien +pour l'humanité. + +Et de l'autre, un homme qui a probablement réalisé son rêve d'enfant. +C'est-à-dire, continuer de faire ce qu'il aimait le plus au monde: +pratiquer son sport, continuer à jouer. Il l'a fait avec brio et +fairplay. + +À l'époque de Mike Bossy, les joueurs professionnnels n'étaient pas +encore des businesses sur deux pattes avec l'entourage d'une +rockstar. Ils étaient mus par leur rêve, leur passion, et probablement +la gloire pour certains. Au Québec, c'était souvent des jeunes de +milieus modestes, pour qui les perspectives d'avenir n'étaient pas +nécessairement alléchantes. + +## Conclusion + +J'ai la conviction que la grande majorité des humains aspirent à +trouver leur place dans ce monde, en accumulant les expériences et les +rencontres. Ils désirent l'amour, l'amitié, le plaisir, le respect des +autres. Ils veulent s'exprimer et créer. + +Seulement, il semble y avoir une petite minorité de gens qui cherchent +à exploiter tout ce qui se trouve sur leur chemin. Des gens aux égos +démesurés, aux dents longues et aux poches de plus en plus +profondes. Nous devrions toujours nous méfier de ceux qui cherchent le +pouvoir et <a +href="https://fr.wikipedia.org/wiki/Ostracisme_(Gr%C3%A8ce_antique)">les +remettre à leur place</a>! +\ No newline at end of file diff --git a/content/2022/tx/index.lua b/content/2022/tx/index.lua @@ -0,0 +1,6 @@ +return { + date = "2022-04-15", + datetime = "12:07:00", + title = "Textes de 2022", + template = "publications" +} diff --git a/content/2022/tx/index.md b/content/2022/tx/index.md @@ -0,0 +1,3 @@ +# Textes de <time>2022</time> + +Les [anciens textes](/txt) sont accessibles par [la page des archives](/archives.html). diff --git a/content/webdev-unix/css.lua b/content/webdev-unix/css.lua @@ -0,0 +1,5 @@ +return { + title = "CSS et Unix (le développement web sous Unix)", + date = "2022-03-24", + datetime = "15:10:22", +} diff --git a/content/webdev-unix/css.md b/content/webdev-unix/css.md @@ -0,0 +1,165 @@ +# CSS et Unix + +<!-- * 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.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/). + +### Règle `@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? + +### Utilitaire `cat` + +Pour concaténer des fichiers ensemble sous Unix il faut utiliser +l'utilitaire `cat`. + + cat - concatenate and print files + +Avec peu de fichiers CSS, on peut simplement faire: + + cat a.css b.css c.css d.css e.css f.css > styles.css + +En voulant être plus concis cela serait: + + cat *.css > styles.css + +Mais en CSS l'ordre des déclarations est important. Nous ne voudrions +pas neutraliser ou déclasser certains styles. + +Dans les utilitaires 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**. 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 l'utilitaire `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 l'utilitaire `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 + +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 + [ -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 + + +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 + +L'utilitaire `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 l'utilitaire `sed`, il est sans doute possible +d'améliorer la soustraction. + +<!-- https://siongui.github.io/2016/03/11/makefile-concetenate-and-minify-css-via-sed-and-tr/ --> +<!-- https://www.tero.co.uk/scripts/minify.php --> +<!-- https://mohammadthalif.wordpress.com/2016/07/25/how-to-minify-css-using-simple-bash-commands/ --> + +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/content/xfn.html b/content/xfn.html @@ -0,0 +1,171 @@ +<h1>Des liens, des liens, des liens, blogroll et webrings</h1> + +<h2>Des gens que je connais bien (ou pas)</h2> + +<p>Les amis, la famille, les camarades ou les collègues qui ont une + présence sur le Web:</p> + +<ul class="xfn"> + <li> + <a href="http://sophiepa.com/">Sophie Perreault-Allen</a> + </li> + <li> + <a href="http://www.frednolet.com/">Fred Nolet</a> + </li> + <li> + <a href="http://catherinelesieur.com/">Catherine Lesieur</a> + </li> + <li> + <a href="http://roxanne.soucy.cc" rel="nofollow">Roxanne Soucy</a> (maintenant hors-ligne) + </li> + <li> + <a href="https://bernardchhun.com/">Bernard Chhun</a> + </li> + <li> + <a href="http://collapseos.org/" title="Collapse OS - Bootstrap post-collapse technology">Virgil Dupras</a> + </li> + <li> + <a href="https://pieplu.ca/">Alexis Piéplu</a> + </li> + <li> + <a href="https://www.orizonmedia.com/" title="Orizon Média">Benoît Arbour</a> + </li> + <li> + <a href="http://mouleesdunord.com/" title="Les moulées du nord">Mireille Rancourt</a> + </li> + <li> + <a href="https://bourrasque.ca/" title="Bourrasque">Sam De Champlain</a> + </li> + <li> + <a href="https://fermerondine.com/" title="Ferme de la Rondine">Sylvain &amp; Suzanne</a> + </li> + <li> + <a href="https://jacynthecarrier.com/">Jacynthe Carrier</a> + </li> + <li> + <a href="https://rudeingenierie.com/" title="Théâtre Rude Ingénierie">Bruno Bouchard</a> + </li> + <li> + <a href="https://charactercreator.org/" title="The Character Creator">Frederic Guimont</a> + </li> + <li> + <a href="https://www.schapados.com/" title="S. Chapados, ébéniste">Sophie Chapados</a> + </li> + <li> + <a href="http://waglo.com/">Robin Millette</a> + </li> + <li> + <a href="http://philstjacques.com/">Philippe St-Jacques</a> + </li> + <li> + <a href="https://pikselkraft.com/" title="Pikselkraft">Derek Salmon</a> + </li> + <li> + <a href="https://filierem.com/" title="Filière M">Mélanie Filiatrault </a> + </li> + <li> + <a href="https://larlet.fr/david/">David Larlet</a> + </li> + <li> + <a href="https://louis-andre.net/">Louis-André Labadie</a> + </li> + <li> + <a href="https://kokorobot.ca" title="kokorobot.ca">Rekka Bellum</a> + </li> +</ul> + +<hr/> + +<h2>Blogroll</h2> + +<ul class="xfn"> + <li> + <a href="https://100r.co/site/log.html" rel="external">100r</a> + </li> + <li> + <a href="http://carnet.delbecque.org/" rel="external">Yannick Delbecque</a> + </li> + <li> + <a href="https://cipay.ca/" rel="external" title="cipay.ca">ᒋᐸᐩ</a> + </li> + <li> + <a href="https://nchrs.xyz/" rel="external">Clemens Scott</a> + </li> + <li> + <a href="https://cupofsquid.com/" rel="external">Cup of Squid</a> + </li> + <li> + <a href="https://drewdevault.com/" rel="external">Drew DeVault</a> + </li> + <li> + <a href="https://hund.tty1.se/" rel="external">Hund</a> + </li> + <li> + <a href="https://www.la-grange.net/" rel="external">Karl Dubost</a> + </li> + <li> + <a href="https://www.lowtechmagazine.com/" rel="external">Low-tech Magazine</a> + </li> + <li> + <a href="https://www.notechmagazine.com/" rel="external">No Tech Magazine</a> + </li> + <li> + <a href="http://ratfactor.com/" rel="external">Dave Gauer</a> + </li> + <li> + <a href="https://solarpunks.net/" rel="external">Solarpunks.net</a> + </li> + <li> + <a href="https://tdarb.org/" rel="external">Bradley Taunt</a> + </li> + <li> + <a href="https://unixsheikh.com/" rel="external">unixsheikh.com</a> + </li> + <li> + <a href="https://si3t.ch/" rel="external">prx's Si₃TcH</a> + </li> + <li> + <a href="http://viznut.fi/en/" rel="external">Viznut</a> +</ul> + +<hr/> + +<h2>Webrings</h2> + +<p>Les webrings sont merveilleux pour découvrir des contenus +intéressants en-dehors des silos des GAFAMs qui cachent la forêt +et <a href="https://serveur410.com/les-passages-secrets-du-web/">les +passages secrets du Web</a>:</p> + +<ul class="xfn"> + <li> + <a href="https://webring.xxiivv.com/" rel="external">webring.xxiivv.com</a> + </li> + <li> + <a href="https://fediring.net/" rel="external">Fediring.net</a> + </li> + <li> + <a href="https://emreed.net/LowTech_Directory.html" rel="external">Low Tech Webring Directory</a> + </li> + <li> + <a href="https://webring.recurse.com/" rel="external">webring.recurse.com</a> + </li> + <li> + <a href="https://weirdwidewebring.net/" rel="external">Weird Wide Webring</a> + </li> + <li> + <a href="https://xn--sr8hvo.ws/directory" rel="external">An IndieWeb Webring</a> + </li> + <li> + <a href="https://1mb.club/" rel="external">1MB Club</a> + </li> + <li> + <a href="https://xhtml.club/" rel="external">XHTML Club</a> + </li> + <li> + <a href="https://512kb.club/" rel="external">The 512KB Club</a> + </li> +</ul> + + +