hugosoucycc

[ARCHIVED] Another old source code of <hugo.soucy.cc>.
Log | Files | Refs | Submodules

commit 717062ba8facb284d820739d119e196e9ac19e28
parent 20f225efd1b55131c69d93f764e3c720fc439d53
Author: Hugo Soucy <hugo@soucy.cc>
Date:   Tue, 22 Nov 2016 22:15:45 -0500

Update site with svg

Diffstat:
Mcontent/file/pgp.md | 1+
Mcontent/txt/2014/02/les-partis-politiques-nuisent-ils-a-la-democratie.md | 1+
Mcontent/txt/2014/04/bronto-politiciens-de-silos.md | 1+
Mcontent/txt/2014/09/mes-logiciels-libres-preferes.md | 1+
Mcontent/txt/emacs/2015/06/emacs-101-l-introduction.md | 1+
Mcontent/txt/emacs/2015/06/emacs-101-la-configuration.md | 1+
Mcontent/txt/index.md | 2+-
Mfakestache | 12++++++------
Mfunctions/create-html-pages | 4++--
Mfunctions/parse_yaml | 47++++++++++++++++++++++++++++++++++-------------
Mpublic_html/feed.atom.xml | 2+-
Mpublic_html/file/curriculum-vitae.html | 10++++++++--
Mpublic_html/file/pgp.html | 239+++++++++++++++++++++++++++++++++++++++----------------------------------------
Mpublic_html/index.html | 10++++++++--
Mpublic_html/note/index.html | 10++++++++--
Mpublic_html/txt/2014/02/les-partis-politiques-nuisent-ils-a-la-democratie.html | 197+++++++++++++++++++++++++++++++++++++++----------------------------------------
Mpublic_html/txt/2014/04/bronto-politiciens-de-silos.html | 183+++++++++++++++++++++++++++++++++++++++----------------------------------------
Mpublic_html/txt/2014/09/mes-logiciels-libres-preferes.html | 199+++++++++++++++++++++++++++++++++++++++----------------------------------------
Mpublic_html/txt/emacs/2015/06/emacs-101-l-introduction.html | 457+++++++++++++++++++++++++++++++++++++++----------------------------------------
Mpublic_html/txt/emacs/2015/06/emacs-101-la-configuration.html | 323+++++++++++++++++++++++++++++++++++++++----------------------------------------
Mpublic_html/txt/index.html | 10++++++++--
Mtemplates/mustache/partials/nav.button.mustache | 5++++-
Mtemplates/mustache/partials/nav.close.mustache | 5++++-
23 files changed, 880 insertions(+), 841 deletions(-)

diff --git a/content/file/pgp.md b/content/file/pgp.md @@ -1,6 +1,7 @@ --- title: Clé publique PGP date: 0000-00-00 +template: default --- Clé publique PGP diff --git a/content/txt/2014/02/les-partis-politiques-nuisent-ils-a-la-democratie.md b/content/txt/2014/02/les-partis-politiques-nuisent-ils-a-la-democratie.md @@ -2,6 +2,7 @@ title: Les partis politiques nuisent-ils à la democratie? date: 2014-02-19 datetime: 18:00:11 +template: default --- Les partis politiques nuisent-ils à la democratie? diff --git a/content/txt/2014/04/bronto-politiciens-de-silos.md b/content/txt/2014/04/bronto-politiciens-de-silos.md @@ -2,6 +2,7 @@ title: Bronto politiciens de silos date: 2014-04-03 datetime: 20:00:00 +template: default --- diff --git a/content/txt/2014/09/mes-logiciels-libres-preferes.md b/content/txt/2014/09/mes-logiciels-libres-preferes.md @@ -2,6 +2,7 @@ title: Mes logiciels libres préférés date: 2014-09-24 datetime: 09:10:55 +template: default --- Mes logiciels libres préférés diff --git a/content/txt/emacs/2015/06/emacs-101-l-introduction.md b/content/txt/emacs/2015/06/emacs-101-l-introduction.md @@ -2,6 +2,7 @@ title: Emacs 101 - l'introduction date: 2015-06-28 datetime: 19:12:02 +template: default --- Emacs 101 - l'introduction diff --git a/content/txt/emacs/2015/06/emacs-101-la-configuration.md b/content/txt/emacs/2015/06/emacs-101-la-configuration.md @@ -2,6 +2,7 @@ title: Emacs 101 - la configuration date: 2015-06-30 datetime: 12:22:16 +template: default --- Emacs 101 - la configuration diff --git a/content/txt/index.md b/content/txt/index.md @@ -1,6 +1,6 @@ --- title: Textes -date: null +date: 0000-00-00 --- Textes diff --git a/fakestache b/fakestache @@ -39,9 +39,9 @@ case $1 in archetype_datetime=$NOW_DATETIME archetype_template="$1" - # Remove special chars for the filename - archetype_title_nospecials=${archetype_title//[^A-Za-z0-9]/-} - archetype_filename=${archetype_title_nospecials//--/}.md + # Remove special chars and white spaces for the filename + archetype_title_nospecials=${archetype_title//[\'!,:;?]/} + archetype_filename=${archetype_title_nospecials// /-}.md mo $ARCHETYPES_PATH/$1.md > $CONTENT_PATH/$1/"${NOW_DATE:0:4}"/"${NOW_DATE:5:2}"/"${archetype_filename,,}" @@ -73,7 +73,7 @@ case $1 in ;; esac -if hash pandoc 2>/dev/null; then +if hash pandoc 2>/dev/null && (( ${BASH_VERSION%%.*} >= 4 )); then # Ok Pandoc is here. # Then execute main functions build_pandoc_templates @@ -85,8 +85,8 @@ if hash pandoc 2>/dev/null; then echo "- Your New Website Is Ready Here : $PUBLICHTML_PATH/ . Thanks Pandoc!!" exit 0 -else - echo "- Sorry But You must Install *Pandoc* For Using *FakeStache SSG*." +else + echo "- Sorry But You must Install *Pandoc* and/or have Bash >= 4 To Using *FakeStache SSG*." echo "- Please Visit <http://pandoc.org/installing.html>." exit 1 diff --git a/functions/create-html-pages b/functions/create-html-pages @@ -13,8 +13,8 @@ create_html_pages () { case "$1" in true) find_noindex_markdown=$(find "$CONTENT_PATH/" -mindepth 2 -type f \( -name "*.md" ! -name "index.md" \)) - rm -R "$PUBLICHTML_PATH/"* - rm -R "$TMP_PATH/"* + rm -R "$PUBLICHTML_PATH/"* + [ -d "$TMP_PATH/" ] && rm -R "$TMP_PATH/"* ;; false) find_noindex_markdown=$(find "$CONTENT_PATH/" -mindepth 2 -type f \( -name "*.md" ! -name "index.md" \) -mtime -100) diff --git a/functions/parse_yaml b/functions/parse_yaml @@ -3,17 +3,38 @@ # Source: https://gist.github.com/pkuczynski/8665367#file-parse_yaml-sh parse_yaml() { - local prefix=$2 - local s='[[:space:]]*' w='[a-zA-Z0-9_]*' fs=$(echo @|tr @ '\034') - sed -ne "s|^\($s\)\($w\)$s:$s\"\(.*\)\"$s\$|\1$fs\2$fs\3|p" \ - -e "s|^\($s\)\($w\)$s:$s\(.*\)$s\$|\1$fs\2$fs\3|p" $1 | - awk -F$fs '{ - indent = length($1)/2; - vname[indent] = $2; - for (i in vname) {if (i > indent) {delete vname[i]}} - if (length($3) > 0) { - vn=""; for (i=0; i<indent; i++) {vn=(vn)(vname[i])("_")} - printf("%s%s%s=\"%s\"\n", "'$prefix'",vn, $2, $3); - } - }' + local prefix=$2 + local s + local w + local fs + s='[[:space:]]*' + w='[a-zA-Z0-9_]*' + fs="$(echo @|tr @ '\034')" + sed -ne "s|^\($s\)\($w\)$s:$s\"\(.*\)\"$s\$|\1$fs\2$fs\3|p" \ + -e "s|^\($s\)\($w\)$s[:-]$s\(.*\)$s\$|\1$fs\2$fs\3|p" "$1" | + awk -F"$fs" '{ + indent = length($1)/2; + vname[indent] = $2; + for (i in vname) {if (i > indent) {delete vname[i]}} + if (length($3) > 0) { + vn=""; for (i=0; i<indent; i++) {vn=(vn)(vname[i])("_")} + printf("%s%s%s=(\"%s\")\n", "'"$prefix"'",vn, $2, $3); + } + }' | sed 's/_=/+=/g' } + +# parse_yaml() { +# local prefix=$2 +# local s='[[:space:]]*' w='[a-zA-Z0-9_]*' fs=$(echo @|tr @ '\034') +# sed -ne "s|^\($s\)\($w\)$s:$s\"\(.*\)\"$s\$|\1$fs\2$fs\3|p" \ + # -e "s|^\($s\)\($w\)$s:$s\(.*\)$s\$|\1$fs\2$fs\3|p" $1 | +# awk -F$fs '{ +# indent = length($1)/2; +# vname[indent] = $2; +# for (i in vname) {if (i > indent) {delete vname[i]}} +# if (length($3) > 0) { +# vn=""; for (i=0; i<indent; i++) {vn=(vn)(vname[i])("_")} +# printf("%s%s%s=\"%s\"\n", "'$prefix'",vn, $2, $3); +# } +# }' +# } diff --git a/public_html/feed.atom.xml b/public_html/feed.atom.xml @@ -4,7 +4,7 @@ <subtitle>Développeur Web frontend ayant plus de 10 ans d'expérience dans le milieu des technologies de l'information. Il habite dans le quartier Limoilou à Québec.</subtitle> <link href="http://hugo.soucy.cc/feed.atom.xml" rel="self" /> <link href="http://hugo.soucy.cc" /> - <updated>2016-11-22T07:30:35</updated> + <updated>2016-11-22T22:14:32</updated> <entry> <title> diff --git a/public_html/file/curriculum-vitae.html b/public_html/file/curriculum-vitae.html @@ -38,7 +38,10 @@ </span> <span class="nav-button__burger"> - <i class="nav-button__burger__ico"></i> + <svg fill="#fff" height="50" viewBox="0 0 24 24" width="50" xmlns="http://www.w3.org/2000/svg"> + <path d="M0 0h24v24H0z" fill="none"/> + <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/> + </svg> </span> </a> </div> @@ -189,7 +192,10 @@ </span> <span class="nav__x"> - <i class="nav__x__ico"></i> + <svg fill="currentColor" height="50" viewBox="0 0 24 24" width="50" xmlns="http://www.w3.org/2000/svg"> + <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/> + <path d="M0 0h24v24H0z" fill="none"/> + </svg> </span> </a> </div> diff --git a/public_html/file/pgp.html b/public_html/file/pgp.html @@ -28,131 +28,128 @@ <meta name="google-site-verification" content="-JraS76m4WZOftgNjizPIzRPC0MkCNNfxmPV4MGkJsc" /> </head> -<body class="cv" id="cv"> +<body id="single"> - <div class="layout"> - <a class="nav-button" href="#menu"> - <span class="nav-button__text"> - Menu <span class="visuallyhidden">principal</span> - </span> - - <span class="nav-button__burger"> - <i class="nav-button__burger__ico"></i> - </span> - </a> - </div> - - <header class="cv__banner"> <div class="layout"> - <h1 class="cv__title"> - <span class="visuallyhidden">Curriculum vitæ de</span> - <span class="logo">Hugo Soucy,</span> - </h1> - - <p class="cv__infos"> - <strong>Développeur Web frontend</strong><br> - <strong>Québec</strong>, Qc<br> - Téléphone: <a href="tel:+1581-996-6481">581-996-6481</a><br> - Courriel: <a href="mailto:hugo@soucy.cc">hugo@soucy.cc</a> - </p> + <a class="nav-button" href="#menu"> + <span class="nav-button__text"> + Menu <span class="visuallyhidden">principal</span> + </span> + + <span class="nav-button__burger"> + <svg fill="#fff" height="50" viewBox="0 0 24 24" width="50" xmlns="http://www.w3.org/2000/svg"> + <path d="M0 0h24v24H0z" fill="none"/> + <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/> + </svg> + </span> + </a> </div> - </header> - - <main class="cv__main"> - <div class="layout"> - <h1 id="clé-publique-pgp">Clé publique PGP</h1> - <pre><code>-----BEGIN PGP PUBLIC KEY BLOCK----- - Version: GnuPG v2 - - mQENBFVFLJwBCACtIqQEtS6LVgeqOCCMv6nSe23a4yWT5WdizPPBH+0KZW9dbH3k - gF/LArv4eTX9DQEoe8pN2CnaYN2vQ5pfCBymScySXthKw9F86LpMjLwr79tmHOuM - NB0qkntwd9kVbdLJ30gA0qJa3E21He0zz6R5W8RHqWP0XIGnccZwnvZNISuVbIyb - 8hVFwOqpkdfvfQCC97Ok3pCkYyG92fvqO1lRCrgOs51liWaZSqJBOTtj1jfjbX01 - fLaAu2M+JfGM87iU4cHckXzPMvtucX9OCzYAOuvWc1lqfoD1kDorNnE5v8zKG289 - 7VT836uMK+V7FBaHKQQvi4eIJ3OeoQBynw+XABEBAAG0Gkh1Z28gU291Y3kgPGh1 - Z29Ac291Y3kuY2M+iQE3BBMBCAAhBQJVRSycAhsDBQsJCAcCBhUICQoLAgQWAgMB - Ah4BAheAAAoJEKr0Uig12y4hQRAH/3+IrBy/aOyZ7uSpbvtBBgnF4l9lAhVeyOgN - kO6COrMYE2Wk6A2bVPH3LKEQUL4OBX4S218OcDTegJggHQegh5tjb1Wc0Ns9MAqc - Fpewoo8OecWHHeOzceflyqVJL8vJhokLwasOcS4sFHbjIZkv6yMx3IsNsTf4UW47 - cgeXbLVCLwIY8ZwIvrhrHsgXV0dnuhgFVyyljFHK3N3iNAz1GACaempbd5gsVv96 - c6k1MSw8ykD6n2jaT5GN8unO133CK0x+McVpFI7OTeoOGdiTIGNI8HPFyoArEZ/B - vTDfHJXnCcVSIySQLOLKAfG1psMJl/7JAlodP6EgxEcoN6oFhLa5AQ0EVUUsnAEI - AOyJwzo69WkXUc3oGqp8qaEbUkGnfnfiHBGvFUBtNuXObuwdAyr1aOPQcFWTVNKO - Q5/xnh7F9rk4fAW4UL8WxjULWLK7ji6eIh5vFgIirzlCN3GkcMtW8Qfi/5VYlvMt - LSs4R4lDwNvORO6NVe2EU6CDDGes1Vln3R+Mm7v+K8//mXZB8r9EBOqQIS+xOJbY - A9tEG9ZjBineXvVVqZbXN6lNPCnU4ZCw1EANEnYiH/T9sjM+Yl07ohV/TKLZfGCv - wsQS5nitvBtdl/D+xcFTGNfNwt3F6aEzuJouMGObkfkNVRYw07IOwE4lRrLTBKqz - dI2h5LrSyKjDNT/q/knYkhUAEQEAAYkBHwQYAQgACQUCVUUsnAIbDAAKCRCq9FIo - NdsuIVqGB/9DNr83M2kFUpDVpaNC2c7WJdkGwa8PmScjDRiSdAo5CRZI1r9hs2// - RLnkMf+W8ROWu2IlLiAVftXdmskRn5bCEaqCJmh6mdtINmR4xjT6GD9etNU0NJgQ - piL0hv7Z+MJSVjvO2Xoz7Vo1jIU5DAJDtxg/XFUsrqs8jJKZAHHZaoE8B3l7N8mT - bG6PshNzFRHuslTlGncruGuACHxv6gXnyIlX6sjGTq0XxewlsIo53n1b2dzoQrZp - XT+i75SJ/S87u8NGtg0jXd8etCwYQD0dF/7rLbkCX6R9b2d4UH8fI8SgPY/4rb0B - TOogzsJCuCLj1l3RYuW8sW/TZcO375A9 - =0QA5 - -----END PGP PUBLIC KEY BLOCK-----</code></pre> - <!-- [Télécharger ma clé publique PGP](http://198.199.122.108:8000/f/5e5b2894e5/). --> - - <div class="cv__list"> - </div> - </div> - </main> - - <nav class="nav"> - <div class="nav__panel" id="menu" tabindex="0"> - <div class="nav__panel__content layout"> - <h2 class="visuallyhidden">Navigation</h2> + + <article class="h-entry hentry"> + <div class="layout e-content p-name single"> + <!-- Pandoc var --> + <h1 id="clé-publique-pgp">Clé publique PGP</h1> +<pre><code>-----BEGIN PGP PUBLIC KEY BLOCK----- +Version: GnuPG v2 + +mQENBFVFLJwBCACtIqQEtS6LVgeqOCCMv6nSe23a4yWT5WdizPPBH+0KZW9dbH3k +gF/LArv4eTX9DQEoe8pN2CnaYN2vQ5pfCBymScySXthKw9F86LpMjLwr79tmHOuM +NB0qkntwd9kVbdLJ30gA0qJa3E21He0zz6R5W8RHqWP0XIGnccZwnvZNISuVbIyb +8hVFwOqpkdfvfQCC97Ok3pCkYyG92fvqO1lRCrgOs51liWaZSqJBOTtj1jfjbX01 +fLaAu2M+JfGM87iU4cHckXzPMvtucX9OCzYAOuvWc1lqfoD1kDorNnE5v8zKG289 +7VT836uMK+V7FBaHKQQvi4eIJ3OeoQBynw+XABEBAAG0Gkh1Z28gU291Y3kgPGh1 +Z29Ac291Y3kuY2M+iQE3BBMBCAAhBQJVRSycAhsDBQsJCAcCBhUICQoLAgQWAgMB +Ah4BAheAAAoJEKr0Uig12y4hQRAH/3+IrBy/aOyZ7uSpbvtBBgnF4l9lAhVeyOgN +kO6COrMYE2Wk6A2bVPH3LKEQUL4OBX4S218OcDTegJggHQegh5tjb1Wc0Ns9MAqc +Fpewoo8OecWHHeOzceflyqVJL8vJhokLwasOcS4sFHbjIZkv6yMx3IsNsTf4UW47 +cgeXbLVCLwIY8ZwIvrhrHsgXV0dnuhgFVyyljFHK3N3iNAz1GACaempbd5gsVv96 +c6k1MSw8ykD6n2jaT5GN8unO133CK0x+McVpFI7OTeoOGdiTIGNI8HPFyoArEZ/B +vTDfHJXnCcVSIySQLOLKAfG1psMJl/7JAlodP6EgxEcoN6oFhLa5AQ0EVUUsnAEI +AOyJwzo69WkXUc3oGqp8qaEbUkGnfnfiHBGvFUBtNuXObuwdAyr1aOPQcFWTVNKO +Q5/xnh7F9rk4fAW4UL8WxjULWLK7ji6eIh5vFgIirzlCN3GkcMtW8Qfi/5VYlvMt +LSs4R4lDwNvORO6NVe2EU6CDDGes1Vln3R+Mm7v+K8//mXZB8r9EBOqQIS+xOJbY +A9tEG9ZjBineXvVVqZbXN6lNPCnU4ZCw1EANEnYiH/T9sjM+Yl07ohV/TKLZfGCv +wsQS5nitvBtdl/D+xcFTGNfNwt3F6aEzuJouMGObkfkNVRYw07IOwE4lRrLTBKqz +dI2h5LrSyKjDNT/q/knYkhUAEQEAAYkBHwQYAQgACQUCVUUsnAIbDAAKCRCq9FIo +NdsuIVqGB/9DNr83M2kFUpDVpaNC2c7WJdkGwa8PmScjDRiSdAo5CRZI1r9hs2// +RLnkMf+W8ROWu2IlLiAVftXdmskRn5bCEaqCJmh6mdtINmR4xjT6GD9etNU0NJgQ +piL0hv7Z+MJSVjvO2Xoz7Vo1jIU5DAJDtxg/XFUsrqs8jJKZAHHZaoE8B3l7N8mT +bG6PshNzFRHuslTlGncruGuACHxv6gXnyIlX6sjGTq0XxewlsIo53n1b2dzoQrZp +XT+i75SJ/S87u8NGtg0jXd8etCwYQD0dF/7rLbkCX6R9b2d4UH8fI8SgPY/4rb0B +TOogzsJCuCLj1l3RYuW8sW/TZcO375A9 +=0QA5 +-----END PGP PUBLIC KEY BLOCK-----</code></pre> +<!-- [Télécharger ma clé publique PGP](http://198.199.122.108:8000/f/5e5b2894e5/). --> + </div> + + <nav class="nav"> + <div class="nav__panel" id="menu" tabindex="0"> + <div class="nav__panel__content layout"> + <h2 class="visuallyhidden">Navigation</h2> - <ul class="nav__list" role="menubar"> - <li class="nav__item"> - <a class="nav__link" href="http://hugo.soucy.cc" rel="index"> - Page d'accueil - </a> - </li> - <li class="nav__item"> - <a class="nav__link" href="http://hugo.soucy.cc/note"> - Notes - </a> - </li> - <li class="nav__item"> - <a class="nav__link" href="http://hugo.soucy.cc/txt"> - Textes - </a> - </li> - <li class="nav__item"> - <a class="nav__link" href="http://hugo.soucy.cc/file/curriculum-vitae.html"> - Curriculum vitae - </a> - </li> - </ul> - </div> - - <a class="nav__close" href="#" role="button"> - <span class="nav__close__text"> - Fermer <span class="visuallyhidden">le menu</span> - </span> - - <span class="nav__x"> - <i class="nav__x__ico"></i> - </span> - </a> - </div> - </nav> - <script id="cuttingTheMustard"> - var cuttingTheMustard = ('querySelector' in document); - var bottomjs; - - if (cuttingTheMustard) { - bottomjs = document.createElement('script'); - bottomjs.src = 'http://hugo.soucy.cc/js/script.min.js'; - bottomjs.id = 'bottomjs'; - - document.body.appendChild(bottomjs); - document.querySelector('html').classList.remove('no-js'); - document.querySelector('html').classList.add('js'); - } -</script> - + <ul class="nav__list" role="menubar"> + <li class="nav__item"> + <a class="nav__link" href="http://hugo.soucy.cc" rel="index"> + Page d'accueil + </a> + </li> + <li class="nav__item"> + <a class="nav__link" href="http://hugo.soucy.cc/note"> + Notes + </a> + </li> + <li class="nav__item"> + <a class="nav__link" href="http://hugo.soucy.cc/txt"> + Textes + </a> + </li> + <li class="nav__item"> + <a class="nav__link" href="http://hugo.soucy.cc/file/curriculum-vitae.html"> + Curriculum vitae + </a> + </li> + </ul> + </div> + + <a class="nav__close" href="#" role="button"> + <span class="nav__close__text"> + Fermer <span class="visuallyhidden">le menu</span> + </span> + + <span class="nav__x"> + <svg fill="currentColor" height="50" viewBox="0 0 24 24" width="50" xmlns="http://www.w3.org/2000/svg"> + <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/> + <path d="M0 0h24v24H0z" fill="none"/> + </svg> + </span> + </a> + </div> + </nav> + + <footer> + <address class="layout"> + <hr/> + + <p><a class="note__link u-url u-uid u-syndication" href="http://hugo.soucy.cc/file/pgp" rel="bookmark">#</a> Créé à Québec le <time class="dt-published" >0000-00-00</time> par <a class="p-author author" href="http://hugo.soucy.cc#hs" rel="author"><i>Hugo Soucy</i></a>. Modifié le <time class="dt-updated">2016-11-22T22:14:28</time>. + </p> + </address> + </footer> + </article> + + <script id="cuttingTheMustard"> + var cuttingTheMustard = ('querySelector' in document); + var bottomjs; + + if (cuttingTheMustard) { + bottomjs = document.createElement('script'); + bottomjs.src = 'http://hugo.soucy.cc/js/script.min.js'; + bottomjs.id = 'bottomjs'; + + document.body.appendChild(bottomjs); + document.querySelector('html').classList.remove('no-js'); + document.querySelector('html').classList.add('js'); + } + </script> </body> </html> diff --git a/public_html/index.html b/public_html/index.html @@ -40,7 +40,10 @@ </span> <span class="nav-button__burger"> - <i class="nav-button__burger__ico"></i> + <svg fill="#fff" height="50" viewBox="0 0 24 24" width="50" xmlns="http://www.w3.org/2000/svg"> + <path d="M0 0h24v24H0z" fill="none"/> + <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/> + </svg> </span> </a> </div> @@ -122,7 +125,10 @@ indieweb, etc.) --> </span> <span class="nav__x"> - <i class="nav__x__ico"></i> + <svg fill="currentColor" height="50" viewBox="0 0 24 24" width="50" xmlns="http://www.w3.org/2000/svg"> + <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/> + <path d="M0 0h24v24H0z" fill="none"/> + </svg> </span> </a> </div> diff --git a/public_html/note/index.html b/public_html/note/index.html @@ -39,7 +39,10 @@ </span> <span class="nav-button__burger"> - <i class="nav-button__burger__ico"></i> + <svg fill="#fff" height="50" viewBox="0 0 24 24" width="50" xmlns="http://www.w3.org/2000/svg"> + <path d="M0 0h24v24H0z" fill="none"/> + <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/> + </svg> </span> </a> </div> @@ -467,7 +470,10 @@ </span> <span class="nav__x"> - <i class="nav__x__ico"></i> + <svg fill="currentColor" height="50" viewBox="0 0 24 24" width="50" xmlns="http://www.w3.org/2000/svg"> + <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/> + <path d="M0 0h24v24H0z" fill="none"/> + </svg> </span> </a> </div> diff --git a/public_html/txt/2014/02/les-partis-politiques-nuisent-ils-a-la-democratie.html b/public_html/txt/2014/02/les-partis-politiques-nuisent-ils-a-la-democratie.html @@ -28,110 +28,107 @@ <meta name="google-site-verification" content="-JraS76m4WZOftgNjizPIzRPC0MkCNNfxmPV4MGkJsc" /> </head> -<body class="cv" id="cv"> +<body id="single"> - <div class="layout"> - <a class="nav-button" href="#menu"> - <span class="nav-button__text"> - Menu <span class="visuallyhidden">principal</span> - </span> - - <span class="nav-button__burger"> - <i class="nav-button__burger__ico"></i> - </span> - </a> - </div> - - <header class="cv__banner"> <div class="layout"> - <h1 class="cv__title"> - <span class="visuallyhidden">Curriculum vitæ de</span> - <span class="logo">Hugo Soucy,</span> - </h1> - - <p class="cv__infos"> - <strong>Développeur Web frontend</strong><br> - <strong>Québec</strong>, Qc<br> - Téléphone: <a href="tel:+1581-996-6481">581-996-6481</a><br> - Courriel: <a href="mailto:hugo@soucy.cc">hugo@soucy.cc</a> - </p> + <a class="nav-button" href="#menu"> + <span class="nav-button__text"> + Menu <span class="visuallyhidden">principal</span> + </span> + + <span class="nav-button__burger"> + <svg fill="#fff" height="50" viewBox="0 0 24 24" width="50" xmlns="http://www.w3.org/2000/svg"> + <path d="M0 0h24v24H0z" fill="none"/> + <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/> + </svg> + </span> + </a> </div> - </header> - - <main class="cv__main"> - <div class="layout"> - <h1 id="les-partis-politiques-nuisent-ils-à-la-democratie">Les partis politiques nuisent-ils à la democratie?</h1> - <p>La ligne de parti, l'antagonisme obligé par les règles tacites de la joute politique. Avoir le dessus sur ses adversaires semble plus important que la résolution de problème et l'avancement du bien commun. Les partis idéologiques qui prennent en otage tout l'appareil gouvernemental pour imposer leurs agendas cachés ou non. Les députés qui, une fois élus se font imposés les décisions du conseil des ministres, ou pire, les ordres du premier ministre et de sa garde rapprochée, composée bien souvent par des gens non désignés par le processus démocratique.</p> - <p>Tous ces députés que l'on qualifie <a href="http://www.assnat.qc.ca/en/patrimoine/lexique/depute-de-l-arriere-ban.html">d'arrière-ban</a>, sont pourtant les représentants élus par les citoyens d'une démocratie; il serait donc légitime de croire que chacun de ces députés aient droit au chapitre et que la voix de chacun possède un poids équivalent. Mais dans notre système parlementaire de type britannique il n'en n'est rien. Ici le premier ministre est comme un suzerain dont les membres de son parti seraient comme des vassaux. Et quand vient le temps de voter en chambre, la volonté du chef et de son cocus s'impose à l'ensemble.</p> - <p>En plus ça a l'avantage de faciliter la tâche de ceux qui veulent influencer les politiques en leur faveur, car cela fait moins de gens à convaincre si l'on permet à une minorité de commander à la majorité.</p> - <p>Et comment sont choisi les chefs d'un parti? L'argent est ce qui fait indéniablement la différence. Comment une personne choisit par une poignée de citoyens et des collecteurs de fonds peut-il avoir la légitimité de parler en faveur de toute la population? C'est un concours de popularité qui n'a que peu de valeur politique. En plus dans certains partis il n'est pas question de courses à la cheffrie, mais bel et bien de courrenement. La plupart du temps le chef du gouvernement n'a eu l'appui que de 40% de la population et il détient presque tous les pouvoirs!</p> - <p>À part le suffrage universel, il n'y pas grand chose de démocratique dans ce type de régime.</p> - <p>Un premier ministre ou un président devrait être seulement un porte-parole pour l'état et l'assemblée nationale; il ne devrait pas avoir plus de pouvoir que n'importe quel autre député. Même s'il n'est pas d'accord il devrait se plier aux décisions de l'ensemble des élus. Point barre. Il n'a pas à être un César ou un Napoléon.</p> - <p>Des élections à dates fixes, pas de gouvernement majoritaires ou minoritaires... Seulement des élus qui gouvernent pour le bien de la nation et non celui d'un parti ou de groupes d'intérêts.</p> - <p>Les partis politiques peuvent être inféodés et avalés par d'autres partis. C'est ce qui est arrivé à l'ADQ qui a été fusionné avec la CAQ. C'est également ce qui s'est passé avec le parti progressite conservateur, avalé lui aussi par le reform party et qui a changé l'idéologie de l'ancien parti conservateur.</p> - <p>Bien sûr je sais que les droits humains permettent à toute personne de s'associer librement. Qui alors empêcherait les gens de s'associer endehors du processus politique? D'abord il faudrait que le pouvoir ne soit plus influençable par les ploutocrates.</p> - <p>Voulons-nous encore de la démocratie? Est-ce que les élites médiatiques, économiques, académiques et syndicales croient ou veulent vraiment de la démocratie? Voient-ils en elle un processus en constante évolution? Un idéal à atteindre? Ou considèrent-ils qu'au-delà des urnes et des sondages le peuple ne peut réclamer plus de pouvoir? Peut-être que je me trompe, mais je ne vois pas beaucoup les élites que j'ai nommé plus haut, demander la décentralisation de la gouvernance. Le statu quo est à leur avantage.</p> - - <div class="cv__list"> - </div> - </div> - </main> - - <nav class="nav"> - <div class="nav__panel" id="menu" tabindex="0"> - <div class="nav__panel__content layout"> - <h2 class="visuallyhidden">Navigation</h2> + + <article class="h-entry hentry"> + <div class="layout e-content p-name single"> + <!-- Pandoc var --> + <h1 id="les-partis-politiques-nuisent-ils-à-la-democratie">Les partis politiques nuisent-ils à la democratie?</h1> +<p>La ligne de parti, l'antagonisme obligé par les règles tacites de la joute politique. Avoir le dessus sur ses adversaires semble plus important que la résolution de problème et l'avancement du bien commun. Les partis idéologiques qui prennent en otage tout l'appareil gouvernemental pour imposer leurs agendas cachés ou non. Les députés qui, une fois élus se font imposés les décisions du conseil des ministres, ou pire, les ordres du premier ministre et de sa garde rapprochée, composée bien souvent par des gens non désignés par le processus démocratique.</p> +<p>Tous ces députés que l'on qualifie <a href="http://www.assnat.qc.ca/en/patrimoine/lexique/depute-de-l-arriere-ban.html">d'arrière-ban</a>, sont pourtant les représentants élus par les citoyens d'une démocratie; il serait donc légitime de croire que chacun de ces députés aient droit au chapitre et que la voix de chacun possède un poids équivalent. Mais dans notre système parlementaire de type britannique il n'en n'est rien. Ici le premier ministre est comme un suzerain dont les membres de son parti seraient comme des vassaux. Et quand vient le temps de voter en chambre, la volonté du chef et de son cocus s'impose à l'ensemble.</p> +<p>En plus ça a l'avantage de faciliter la tâche de ceux qui veulent influencer les politiques en leur faveur, car cela fait moins de gens à convaincre si l'on permet à une minorité de commander à la majorité.</p> +<p>Et comment sont choisi les chefs d'un parti? L'argent est ce qui fait indéniablement la différence. Comment une personne choisit par une poignée de citoyens et des collecteurs de fonds peut-il avoir la légitimité de parler en faveur de toute la population? C'est un concours de popularité qui n'a que peu de valeur politique. En plus dans certains partis il n'est pas question de courses à la cheffrie, mais bel et bien de courrenement. La plupart du temps le chef du gouvernement n'a eu l'appui que de 40% de la population et il détient presque tous les pouvoirs!</p> +<p>À part le suffrage universel, il n'y pas grand chose de démocratique dans ce type de régime.</p> +<p>Un premier ministre ou un président devrait être seulement un porte-parole pour l'état et l'assemblée nationale; il ne devrait pas avoir plus de pouvoir que n'importe quel autre député. Même s'il n'est pas d'accord il devrait se plier aux décisions de l'ensemble des élus. Point barre. Il n'a pas à être un César ou un Napoléon.</p> +<p>Des élections à dates fixes, pas de gouvernement majoritaires ou minoritaires... Seulement des élus qui gouvernent pour le bien de la nation et non celui d'un parti ou de groupes d'intérêts.</p> +<p>Les partis politiques peuvent être inféodés et avalés par d'autres partis. C'est ce qui est arrivé à l'ADQ qui a été fusionné avec la CAQ. C'est également ce qui s'est passé avec le parti progressite conservateur, avalé lui aussi par le reform party et qui a changé l'idéologie de l'ancien parti conservateur.</p> +<p>Bien sûr je sais que les droits humains permettent à toute personne de s'associer librement. Qui alors empêcherait les gens de s'associer endehors du processus politique? D'abord il faudrait que le pouvoir ne soit plus influençable par les ploutocrates.</p> +<p>Voulons-nous encore de la démocratie? Est-ce que les élites médiatiques, économiques, académiques et syndicales croient ou veulent vraiment de la démocratie? Voient-ils en elle un processus en constante évolution? Un idéal à atteindre? Ou considèrent-ils qu'au-delà des urnes et des sondages le peuple ne peut réclamer plus de pouvoir? Peut-être que je me trompe, mais je ne vois pas beaucoup les élites que j'ai nommé plus haut, demander la décentralisation de la gouvernance. Le statu quo est à leur avantage.</p> + </div> + + <nav class="nav"> + <div class="nav__panel" id="menu" tabindex="0"> + <div class="nav__panel__content layout"> + <h2 class="visuallyhidden">Navigation</h2> - <ul class="nav__list" role="menubar"> - <li class="nav__item"> - <a class="nav__link" href="http://hugo.soucy.cc" rel="index"> - Page d'accueil - </a> - </li> - <li class="nav__item"> - <a class="nav__link" href="http://hugo.soucy.cc/note"> - Notes - </a> - </li> - <li class="nav__item"> - <a class="nav__link" href="http://hugo.soucy.cc/txt"> - Textes - </a> - </li> - <li class="nav__item"> - <a class="nav__link" href="http://hugo.soucy.cc/file/curriculum-vitae.html"> - Curriculum vitae - </a> - </li> - </ul> - </div> - - <a class="nav__close" href="#" role="button"> - <span class="nav__close__text"> - Fermer <span class="visuallyhidden">le menu</span> - </span> - - <span class="nav__x"> - <i class="nav__x__ico"></i> - </span> - </a> - </div> - </nav> - <script id="cuttingTheMustard"> - var cuttingTheMustard = ('querySelector' in document); - var bottomjs; - - if (cuttingTheMustard) { - bottomjs = document.createElement('script'); - bottomjs.src = 'http://hugo.soucy.cc/js/script.min.js'; - bottomjs.id = 'bottomjs'; - - document.body.appendChild(bottomjs); - document.querySelector('html').classList.remove('no-js'); - document.querySelector('html').classList.add('js'); - } -</script> - + <ul class="nav__list" role="menubar"> + <li class="nav__item"> + <a class="nav__link" href="http://hugo.soucy.cc" rel="index"> + Page d'accueil + </a> + </li> + <li class="nav__item"> + <a class="nav__link" href="http://hugo.soucy.cc/note"> + Notes + </a> + </li> + <li class="nav__item"> + <a class="nav__link" href="http://hugo.soucy.cc/txt"> + Textes + </a> + </li> + <li class="nav__item"> + <a class="nav__link" href="http://hugo.soucy.cc/file/curriculum-vitae.html"> + Curriculum vitae + </a> + </li> + </ul> + </div> + + <a class="nav__close" href="#" role="button"> + <span class="nav__close__text"> + Fermer <span class="visuallyhidden">le menu</span> + </span> + + <span class="nav__x"> + <svg fill="currentColor" height="50" viewBox="0 0 24 24" width="50" xmlns="http://www.w3.org/2000/svg"> + <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/> + <path d="M0 0h24v24H0z" fill="none"/> + </svg> + </span> + </a> + </div> + </nav> + + <footer> + <address class="layout"> + <hr/> + + <p><a class="note__link u-url u-uid u-syndication" href="http://hugo.soucy.cc/txt/2014/02/les-partis-politiques-nuisent-ils-a-la-democratie" rel="bookmark">#</a> Créé à Québec le <time class="dt-published" datetime="2014-02-19T18:00:11">2014-02-19</time> par <a class="p-author author" href="http://hugo.soucy.cc#hs" rel="author"><i>Hugo Soucy</i></a>. Modifié le <time class="dt-updated">2016-11-22T22:00:10</time>. + </p> + </address> + </footer> + </article> + + <script id="cuttingTheMustard"> + var cuttingTheMustard = ('querySelector' in document); + var bottomjs; + + if (cuttingTheMustard) { + bottomjs = document.createElement('script'); + bottomjs.src = 'http://hugo.soucy.cc/js/script.min.js'; + bottomjs.id = 'bottomjs'; + + document.body.appendChild(bottomjs); + document.querySelector('html').classList.remove('no-js'); + document.querySelector('html').classList.add('js'); + } + </script> </body> </html> diff --git a/public_html/txt/2014/04/bronto-politiciens-de-silos.html b/public_html/txt/2014/04/bronto-politiciens-de-silos.html @@ -28,103 +28,100 @@ <meta name="google-site-verification" content="-JraS76m4WZOftgNjizPIzRPC0MkCNNfxmPV4MGkJsc" /> </head> -<body class="cv" id="cv"> +<body id="single"> - <div class="layout"> - <a class="nav-button" href="#menu"> - <span class="nav-button__text"> - Menu <span class="visuallyhidden">principal</span> - </span> - - <span class="nav-button__burger"> - <i class="nav-button__burger__ico"></i> - </span> - </a> - </div> - - <header class="cv__banner"> - <div class="layout"> - <h1 class="cv__title"> - <span class="visuallyhidden">Curriculum vitæ de</span> - <span class="logo">Hugo Soucy,</span> - </h1> - - <p class="cv__infos"> - <strong>Développeur Web frontend</strong><br> - <strong>Québec</strong>, Qc<br> - Téléphone: <a href="tel:+1581-996-6481">581-996-6481</a><br> - Courriel: <a href="mailto:hugo@soucy.cc">hugo@soucy.cc</a> - </p> - </div> - </header> - - <main class="cv__main"> <div class="layout"> - <h1 id="bronto-politiciens-de-silos">Bronto-politiciens de silos</h1> - <p>Les politiciens traitent les sujets comme s'ils étaient en silos; comme si il n'y avait pas de rapport en eux. Mais tout est tissé dans la même trame: la trame de la société. Comment peut-on mettre l'emphase sur le système de santé et faire abstraction du sport, de l'alimentation, de l'environnement? On s'attaque au traitement en faisant fi des causes. On veut combattre la corruption sans miser sur la transparence des données gouvernementales.</p> - <p>On parle d'économie, mais on ne s'applique pas à diversifier l'économie des régions comme la Gaspésie, la Côte-Nord, l'Abitibi, le Lac-Saint-Jean, etc. Loin des grands centres les services sont souvent compromis, les jeunes quittent pour étudier et ne reviennent jamais. Est-ce qu'on maintient ces régions faibles économiquement et démographiquement pour les rendre moins résistantes aux grosses compagnies minières, pétrolières, forestières, lorsque celles-ci ont besoins de faire des milliards avec les ressources de notre territoire?!</p> - <p>Les politiciens disent qu'ils ont de de la vision. Pour ma part, je crois que cette vision se résume à regarder un agenda dans lequel est écrit quelques directives pour maintenir les citoyens dans un statu quo. De cette façon, les brontosores politiques et économiques peuvent continuer à s'engraisser pour maintenir leur stature éléphantesque, et ainsi cacher la forêt qui se meurt. Tandis que les moyens et petits s'agitent pour survivre à l'ombre des mastodontes.</p> - - <div class="cv__list"> - </div> + <a class="nav-button" href="#menu"> + <span class="nav-button__text"> + Menu <span class="visuallyhidden">principal</span> + </span> + + <span class="nav-button__burger"> + <svg fill="#fff" height="50" viewBox="0 0 24 24" width="50" xmlns="http://www.w3.org/2000/svg"> + <path d="M0 0h24v24H0z" fill="none"/> + <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/> + </svg> + </span> + </a> </div> - </main> - - <nav class="nav"> - <div class="nav__panel" id="menu" tabindex="0"> - <div class="nav__panel__content layout"> - <h2 class="visuallyhidden">Navigation</h2> + + <article class="h-entry hentry"> + <div class="layout e-content p-name single"> + <!-- Pandoc var --> + <h1 id="bronto-politiciens-de-silos">Bronto-politiciens de silos</h1> +<p>Les politiciens traitent les sujets comme s'ils étaient en silos; comme si il n'y avait pas de rapport en eux. Mais tout est tissé dans la même trame: la trame de la société. Comment peut-on mettre l'emphase sur le système de santé et faire abstraction du sport, de l'alimentation, de l'environnement? On s'attaque au traitement en faisant fi des causes. On veut combattre la corruption sans miser sur la transparence des données gouvernementales.</p> +<p>On parle d'économie, mais on ne s'applique pas à diversifier l'économie des régions comme la Gaspésie, la Côte-Nord, l'Abitibi, le Lac-Saint-Jean, etc. Loin des grands centres les services sont souvent compromis, les jeunes quittent pour étudier et ne reviennent jamais. Est-ce qu'on maintient ces régions faibles économiquement et démographiquement pour les rendre moins résistantes aux grosses compagnies minières, pétrolières, forestières, lorsque celles-ci ont besoins de faire des milliards avec les ressources de notre territoire?!</p> +<p>Les politiciens disent qu'ils ont de de la vision. Pour ma part, je crois que cette vision se résume à regarder un agenda dans lequel est écrit quelques directives pour maintenir les citoyens dans un statu quo. De cette façon, les brontosores politiques et économiques peuvent continuer à s'engraisser pour maintenir leur stature éléphantesque, et ainsi cacher la forêt qui se meurt. Tandis que les moyens et petits s'agitent pour survivre à l'ombre des mastodontes.</p> + </div> + + <nav class="nav"> + <div class="nav__panel" id="menu" tabindex="0"> + <div class="nav__panel__content layout"> + <h2 class="visuallyhidden">Navigation</h2> - <ul class="nav__list" role="menubar"> - <li class="nav__item"> - <a class="nav__link" href="http://hugo.soucy.cc" rel="index"> - Page d'accueil - </a> - </li> - <li class="nav__item"> - <a class="nav__link" href="http://hugo.soucy.cc/note"> - Notes - </a> - </li> - <li class="nav__item"> - <a class="nav__link" href="http://hugo.soucy.cc/txt"> - Textes - </a> - </li> - <li class="nav__item"> - <a class="nav__link" href="http://hugo.soucy.cc/file/curriculum-vitae.html"> - Curriculum vitae - </a> - </li> - </ul> - </div> - - <a class="nav__close" href="#" role="button"> - <span class="nav__close__text"> - Fermer <span class="visuallyhidden">le menu</span> - </span> - - <span class="nav__x"> - <i class="nav__x__ico"></i> - </span> - </a> - </div> - </nav> - <script id="cuttingTheMustard"> - var cuttingTheMustard = ('querySelector' in document); - var bottomjs; - - if (cuttingTheMustard) { - bottomjs = document.createElement('script'); - bottomjs.src = 'http://hugo.soucy.cc/js/script.min.js'; - bottomjs.id = 'bottomjs'; - - document.body.appendChild(bottomjs); - document.querySelector('html').classList.remove('no-js'); - document.querySelector('html').classList.add('js'); - } -</script> - + <ul class="nav__list" role="menubar"> + <li class="nav__item"> + <a class="nav__link" href="http://hugo.soucy.cc" rel="index"> + Page d'accueil + </a> + </li> + <li class="nav__item"> + <a class="nav__link" href="http://hugo.soucy.cc/note"> + Notes + </a> + </li> + <li class="nav__item"> + <a class="nav__link" href="http://hugo.soucy.cc/txt"> + Textes + </a> + </li> + <li class="nav__item"> + <a class="nav__link" href="http://hugo.soucy.cc/file/curriculum-vitae.html"> + Curriculum vitae + </a> + </li> + </ul> + </div> + + <a class="nav__close" href="#" role="button"> + <span class="nav__close__text"> + Fermer <span class="visuallyhidden">le menu</span> + </span> + + <span class="nav__x"> + <svg fill="currentColor" height="50" viewBox="0 0 24 24" width="50" xmlns="http://www.w3.org/2000/svg"> + <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/> + <path d="M0 0h24v24H0z" fill="none"/> + </svg> + </span> + </a> + </div> + </nav> + + <footer> + <address class="layout"> + <hr/> + + <p><a class="note__link u-url u-uid u-syndication" href="http://hugo.soucy.cc/txt/2014/04/bronto-politiciens-de-silos" rel="bookmark">#</a> Créé à Québec le <time class="dt-published" datetime="2014-04-03T20:00:00">2014-04-03</time> par <a class="p-author author" href="http://hugo.soucy.cc#hs" rel="author"><i>Hugo Soucy</i></a>. Modifié le <time class="dt-updated">2016-11-22T22:00:21</time>. + </p> + </address> + </footer> + </article> + + <script id="cuttingTheMustard"> + var cuttingTheMustard = ('querySelector' in document); + var bottomjs; + + if (cuttingTheMustard) { + bottomjs = document.createElement('script'); + bottomjs.src = 'http://hugo.soucy.cc/js/script.min.js'; + bottomjs.id = 'bottomjs'; + + document.body.appendChild(bottomjs); + document.querySelector('html').classList.remove('no-js'); + document.querySelector('html').classList.add('js'); + } + </script> </body> </html> diff --git a/public_html/txt/2014/09/mes-logiciels-libres-preferes.html b/public_html/txt/2014/09/mes-logiciels-libres-preferes.html @@ -28,111 +28,108 @@ <meta name="google-site-verification" content="-JraS76m4WZOftgNjizPIzRPC0MkCNNfxmPV4MGkJsc" /> </head> -<body class="cv" id="cv"> +<body id="single"> - <div class="layout"> - <a class="nav-button" href="#menu"> - <span class="nav-button__text"> - Menu <span class="visuallyhidden">principal</span> - </span> - - <span class="nav-button__burger"> - <i class="nav-button__burger__ico"></i> - </span> - </a> - </div> - - <header class="cv__banner"> <div class="layout"> - <h1 class="cv__title"> - <span class="visuallyhidden">Curriculum vitæ de</span> - <span class="logo">Hugo Soucy,</span> - </h1> - - <p class="cv__infos"> - <strong>Développeur Web frontend</strong><br> - <strong>Québec</strong>, Qc<br> - Téléphone: <a href="tel:+1581-996-6481">581-996-6481</a><br> - Courriel: <a href="mailto:hugo@soucy.cc">hugo@soucy.cc</a> - </p> + <a class="nav-button" href="#menu"> + <span class="nav-button__text"> + Menu <span class="visuallyhidden">principal</span> + </span> + + <span class="nav-button__burger"> + <svg fill="#fff" height="50" viewBox="0 0 24 24" width="50" xmlns="http://www.w3.org/2000/svg"> + <path d="M0 0h24v24H0z" fill="none"/> + <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/> + </svg> + </span> + </a> </div> - </header> - - <main class="cv__main"> - <div class="layout"> - <h1 id="mes-logiciels-libres-préférés">Mes logiciels libres préférés</h1> - <p>Voici une courte liste des logiciels libres que j'aime et que j'utilise :</p> - <ul> - <li><a href="//www.archlinux.org/">Arch Linux</a> — Jusqu'à maintenant c'est la distribution GNU/Linux que je préfère.</li> - <li><a href="//www.gnu.org/software/emacs/">Emacs</a> — L'outil parfait pour manipuler du texte, donc par ricochet, du code. Avec mon navigateur, c'est mon principal outil de travail. Selon moi, tous les développeurs devraient apprendre Emacs et/ou Vim ;) D'ailleurs, voici mes <a href="https://github.com/hs0ucy/emacs-notes">notes personnelles à propos d'Emacs</a>.</li> - <li><a href="//www.mozilla.org/en-US/firefox/new/">Firefox</a> — Cela fait plus de 10 ans que j'utilise ce navigateur. Nous sommes un vieux couple que Google Chrome n'a pas sû séparer.</li> - <li><a href="//code.google.com/p/jessies/wiki/Terminator">Terminator</a> — Terminal virtuel qui permet d'avoir plusieurs terminals dans une même fenêtre.</li> - <li><a href="//www.washington.edu/alpine/">Alpine</a> — Client de messagerie électronique pour terminal. Vraiment bien foutu et très plaisant à utiliser.</li> - <li><a href="//weechat.org/">WeeChat</a> — Client de clavardage IRC pour terminal, léger et rapide.</li> - <li><a href="//www.keepassx.org/">KeepassX</a> — Gérer simplement des mots de passe.</li> - <li><a href="//owncloud.org/">ownCloud</a> — Alternative à Dropbox, qu'on peut installer sur son serveur VPS.</li> - </ul> - - <div class="cv__list"> - </div> - </div> - </main> - - <nav class="nav"> - <div class="nav__panel" id="menu" tabindex="0"> - <div class="nav__panel__content layout"> - <h2 class="visuallyhidden">Navigation</h2> + + <article class="h-entry hentry"> + <div class="layout e-content p-name single"> + <!-- Pandoc var --> + <h1 id="mes-logiciels-libres-préférés">Mes logiciels libres préférés</h1> +<p>Voici une courte liste des logiciels libres que j'aime et que j'utilise :</p> +<ul> +<li><a href="//www.archlinux.org/">Arch Linux</a> — Jusqu'à maintenant c'est la distribution GNU/Linux que je préfère.</li> +<li><a href="//www.gnu.org/software/emacs/">Emacs</a> — L'outil parfait pour manipuler du texte, donc par ricochet, du code. Avec mon navigateur, c'est mon principal outil de travail. Selon moi, tous les développeurs devraient apprendre Emacs et/ou Vim ;) D'ailleurs, voici mes <a href="https://github.com/hs0ucy/emacs-notes">notes personnelles à propos d'Emacs</a>.</li> +<li><a href="//www.mozilla.org/en-US/firefox/new/">Firefox</a> — Cela fait plus de 10 ans que j'utilise ce navigateur. Nous sommes un vieux couple que Google Chrome n'a pas sû séparer.</li> +<li><a href="//code.google.com/p/jessies/wiki/Terminator">Terminator</a> — Terminal virtuel qui permet d'avoir plusieurs terminals dans une même fenêtre.</li> +<li><a href="//www.washington.edu/alpine/">Alpine</a> — Client de messagerie électronique pour terminal. Vraiment bien foutu et très plaisant à utiliser.</li> +<li><a href="//weechat.org/">WeeChat</a> — Client de clavardage IRC pour terminal, léger et rapide.</li> +<li><a href="//www.keepassx.org/">KeepassX</a> — Gérer simplement des mots de passe.</li> +<li><a href="//owncloud.org/">ownCloud</a> — Alternative à Dropbox, qu'on peut installer sur son serveur VPS.</li> +</ul> + </div> + + <nav class="nav"> + <div class="nav__panel" id="menu" tabindex="0"> + <div class="nav__panel__content layout"> + <h2 class="visuallyhidden">Navigation</h2> - <ul class="nav__list" role="menubar"> - <li class="nav__item"> - <a class="nav__link" href="http://hugo.soucy.cc" rel="index"> - Page d'accueil - </a> - </li> - <li class="nav__item"> - <a class="nav__link" href="http://hugo.soucy.cc/note"> - Notes - </a> - </li> - <li class="nav__item"> - <a class="nav__link" href="http://hugo.soucy.cc/txt"> - Textes - </a> - </li> - <li class="nav__item"> - <a class="nav__link" href="http://hugo.soucy.cc/file/curriculum-vitae.html"> - Curriculum vitae - </a> - </li> - </ul> - </div> - - <a class="nav__close" href="#" role="button"> - <span class="nav__close__text"> - Fermer <span class="visuallyhidden">le menu</span> - </span> - - <span class="nav__x"> - <i class="nav__x__ico"></i> - </span> - </a> - </div> - </nav> - <script id="cuttingTheMustard"> - var cuttingTheMustard = ('querySelector' in document); - var bottomjs; - - if (cuttingTheMustard) { - bottomjs = document.createElement('script'); - bottomjs.src = 'http://hugo.soucy.cc/js/script.min.js'; - bottomjs.id = 'bottomjs'; - - document.body.appendChild(bottomjs); - document.querySelector('html').classList.remove('no-js'); - document.querySelector('html').classList.add('js'); - } -</script> - + <ul class="nav__list" role="menubar"> + <li class="nav__item"> + <a class="nav__link" href="http://hugo.soucy.cc" rel="index"> + Page d'accueil + </a> + </li> + <li class="nav__item"> + <a class="nav__link" href="http://hugo.soucy.cc/note"> + Notes + </a> + </li> + <li class="nav__item"> + <a class="nav__link" href="http://hugo.soucy.cc/txt"> + Textes + </a> + </li> + <li class="nav__item"> + <a class="nav__link" href="http://hugo.soucy.cc/file/curriculum-vitae.html"> + Curriculum vitae + </a> + </li> + </ul> + </div> + + <a class="nav__close" href="#" role="button"> + <span class="nav__close__text"> + Fermer <span class="visuallyhidden">le menu</span> + </span> + + <span class="nav__x"> + <svg fill="currentColor" height="50" viewBox="0 0 24 24" width="50" xmlns="http://www.w3.org/2000/svg"> + <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/> + <path d="M0 0h24v24H0z" fill="none"/> + </svg> + </span> + </a> + </div> + </nav> + + <footer> + <address class="layout"> + <hr/> + + <p><a class="note__link u-url u-uid u-syndication" href="http://hugo.soucy.cc/txt/2014/09/mes-logiciels-libres-preferes" rel="bookmark">#</a> Créé à Québec le <time class="dt-published" datetime="2014-09-24T09:10:55">2014-09-24</time> par <a class="p-author author" href="http://hugo.soucy.cc#hs" rel="author"><i>Hugo Soucy</i></a>. Modifié le <time class="dt-updated">2016-11-22T22:00:33</time>. + </p> + </address> + </footer> + </article> + + <script id="cuttingTheMustard"> + var cuttingTheMustard = ('querySelector' in document); + var bottomjs; + + if (cuttingTheMustard) { + bottomjs = document.createElement('script'); + bottomjs.src = 'http://hugo.soucy.cc/js/script.min.js'; + bottomjs.id = 'bottomjs'; + + document.body.appendChild(bottomjs); + document.querySelector('html').classList.remove('no-js'); + document.querySelector('html').classList.add('js'); + } + </script> </body> </html> diff --git a/public_html/txt/emacs/2015/06/emacs-101-l-introduction.html b/public_html/txt/emacs/2015/06/emacs-101-l-introduction.html @@ -28,247 +28,244 @@ <meta name="google-site-verification" content="-JraS76m4WZOftgNjizPIzRPC0MkCNNfxmPV4MGkJsc" /> </head> -<body class="cv" id="cv"> +<body id="single"> - <div class="layout"> - <a class="nav-button" href="#menu"> - <span class="nav-button__text"> - Menu <span class="visuallyhidden">principal</span> - </span> - - <span class="nav-button__burger"> - <i class="nav-button__burger__ico"></i> - </span> - </a> - </div> - - <header class="cv__banner"> <div class="layout"> - <h1 class="cv__title"> - <span class="visuallyhidden">Curriculum vitæ de</span> - <span class="logo">Hugo Soucy,</span> - </h1> + <a class="nav-button" href="#menu"> + <span class="nav-button__text"> + Menu <span class="visuallyhidden">principal</span> + </span> - <p class="cv__infos"> - <strong>Développeur Web frontend</strong><br> - <strong>Québec</strong>, Qc<br> - Téléphone: <a href="tel:+1581-996-6481">581-996-6481</a><br> - Courriel: <a href="mailto:hugo@soucy.cc">hugo@soucy.cc</a> - </p> + <span class="nav-button__burger"> + <svg fill="#fff" height="50" viewBox="0 0 24 24" width="50" xmlns="http://www.w3.org/2000/svg"> + <path d="M0 0h24v24H0z" fill="none"/> + <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/> + </svg> + </span> + </a> </div> - </header> - - <main class="cv__main"> - <div class="layout"> - <h1 id="emacs-101---lintroduction">Emacs 101 - l'introduction</h1> - <p>Apprendre <a href="http://www.gnu.org/software/emacs/">Emacs</a> peut être perçu comme quelque chose de difficile. Pour ma part, je ne considère pas cela comme difficile, non. Mais cela demande certainement du temps.</p> - <p>Premièrement, il faut du temps pour découvrir cet envrionnement et apprendre les concepts qui le compose. Il faut aussi du temps pour connaître par coeur les commandes de base. Notre tête et nos doigts doivent s'y habituer pour sortir du joug de la souris. Car c'est bien cela l'avantage de maîtriser son éditeur texte : gagner en productivité.</p> - <p>Et passer moins de temps à faire des aller-retours entre la souris et le clavier apporte définitivement un gain en productivité.</p> - <p>Comme par exemple, si je veux sélectionner un paragraphe, le couper et le coller à fin du document. Je peux utiliser le clavier et la souris ... ou seulement la souris. Toutefois avec Emacs je ferais la série de commandes suivantes (<code>C-</code> correspond à la touche <code>Ctrl</code> et <code>M-</code> correspond à la touche <code>Alt</code>) :</p> - <ol style="list-style-type: decimal"> - <li><code>M-a</code>, pour placer mon curseur au début au paragraphe;</li> - <li><code>M-k</code>, pour couper une paragraphe vers l'avant (l'inverse serait <code>C-x &lt;DEL&gt;</code>);</li> - <li><code>M-&gt;</code>, pour me rendre à la fin du document;</li> - <li><code>C-y</code>, pour finalement coller le paragraphe.</li> - </ol> - <p>Dans les premiers temps ce type de séquence vous paraîtra beaucoup moins efficace que vos anciennes habitudes, mais si vous persévérez dans l'apprentissage d'Emacs, après quelques semaines vous exécuterez ce genre de tâche avec rapidité et fluidité.</p> - <p>Selon-moi le meilleur moyen d'apprendre les commandes de base, est de suivre le tutoriel officiel qui est directement intégrer dans Emacs. Pour y accéder, tapez <code>M-x</code>, puis entrez la commande <code>help-with-tutorial-spec-language</code>; un choix de langue vous sera offert.</p> - <p>Ce tutoriel interactif vous apprendra les bases pour atteindre le bonheur et le confort dans votre nouvel éditeur texte préféré :</p> - <ul> - <li>Démarrer et fermer Emacs.</li> - <li>Les commandes de bases pour vous déplacer dans le texte et l'éditer.</li> - <li>Ouvrir et sauvegarder des fichiers.</li> - <li>Les concepts qui composent Emacs : windows, frames, files, buffers, etc.</li> - <li>Invoquer des fonctions avec la commande <code>M-x</code>.</li> - <li>Etc.</li> - </ul> - <h2 id="buffers-windows-et-frames">Buffers, windows et frames</h2> - <p>Avant d'enter dans les commandes de déplacement et d'édition, je crois qu'il faut d'abord que je vous explique ce qu'est un <strong>buffer</strong>, une <strong>window</strong> et un <strong>frame</strong>. Ces concepts sont parfois un peu déroutant pour le nouveau venu dans Emacs ...</p> - <h3 id="buffers">Buffers</h3> - <p>Premièrement, on peut avoir plusieurs buffers ouverts en même temps. Habituellement un buffer représente le contenu d'un fichier, mais il peut être aussi de l'information en provenance de l'application, comme par exemple le buffer <em>Messages</em>, toujours présent à l'ouverture d'Emacs.</p> - <p>Les buffers sont visibles travers les fenêtres (windows). Pour passer à un autre buffer et l'afficher dans la fenêtre courante vous devez faire la commande <code>C-x b</code>. Cela a pour conséquence de déplacer le curseur vers le <strong>minibuffer</strong> et d'afficher un message qui ressemble à &quot;Switch to buffer (default <em>scratch</em>)&quot;.</p> - <p>À partir de là, vous pouvez taper le nom du buffer vers lequel vous voulez basculer. Pour afficher la liste de ceux qui sont ouverts appuyez sur la touche <code>Tab</code>.</p> - <p>Pour quitter le minibuffer, annuler la commande en cours et retourner le curseur dans le buffer faîtes <code>C-g</code>.</p> - <p>Il est aussi possible de lister directement tous les buffers qui sont actifs en tapant <code>C-x C-b</code>.</p> - <h3 id="windows-et-frames">Windows et frames</h3> - <p>Dans Emacs une fenêtre (window) n'est pas une fenêtre comme on l'entend dans un contexte de système d'exploitation; dans ce cas on parlerait plutôt d'un cadre (frame). La fenêtre est une vue sur un buffer, et il est possible d'avoir plusieurs fenêtres dans un seul cadre, ce qui permet d'afficher de multiple buffers en même temps.</p> - <p>Bien sûr il y des commandes pour créer ou supprimer des fenêtres, se déplacer dans chacune d'elle, <a href="http://www.gnu.org/software/emacs/manual/html_node/emacs/Change-Window.html">modifier leur taille, etc</a>.</p> - <ul> - <li>Nouvelle fenêtre horizontale : <code>C-x 2</code>.</li> - <li>Nouvelle fenêtre verticale : <code>C-x 3</code>.</li> - <li>Fermer toutes les fenêtres sauf la fenêtre courante : <code>C-x 1</code>.</li> - <li>Fermer la fenêtre courante : <code>C-x 0</code>.</li> - <li>Naviguer d'une fenêtre à l'autre : <code>C-x o</code>.</li> - </ul> - <p>Si vous voulez un nouveau cadre et non une nouvelle fenêtre, la commande est <code>C-x 5 2</code>.</p> - <h3 id="minibuffer">Minibuffer</h3> - <p>Le <strong>minibuffer</strong> quant à lui est l'espace, sous la barre de status, où vous interagissez avec Emacs : entrer une commande, donner un valeur à un argument, recevoir de l'info, etc. Dans le minibuffer vous avez accès aux mêmes fonctionnalités que dans n'importe quel buffer.</p> - <p><em>Rappel : Pour quitter le minibuffer, annuler la commande en cours et retourner le curseur dans le buffer faîtes <code>C-g</code>.</em></p> - <h2 id="les-commandes-de-base">Les commandes de base</h2> - <p>Voici une liste des commandes que vous devez maîtriser pour être efficace dans Emacs. Il est aussi intéressant de savoir que, plusieurs commandes Emacs de base fonctionneront dans n'importe quel terminal Linux ou BSD. Donc en les apprenant, vous devenez également un meilleur utilisateur UNIX.</p> - <p>D'abord, rappelons que <code>C-</code> correspond à la touche <code>Ctrl</code> et que <code>M-</code> correspond à la touche <code>Alt</code>. Donc <code>C-k</code> est semblable à <code>Ctrl + k</code>.</p> - <h3 id="ouvrir-créer-sauvegarder-et-fermer-des-buffers">Ouvrir, créer, sauvegarder et fermer des buffers</h3> - <ul> - <li>Ouvir ou créer un fichier : <code>C-x C-f</code>.</li> - <li>Sauvegarder le buffer courant : <code>C-x C-s</code>.</li> - <li>Sauvegarder tous les buffers ouverts : <code>C-x s</code>.</li> - <li>Enregistrer-sous : <code>C-x C-w</code>.</li> - <li>Fermer un buffer : <code>C-x k</code>.</li> - </ul> - <h3 id="se-déplacer-dans-un-buffer">Se déplacer dans un buffer</h3> - <ul> - <li>Caratère suivant : <code>C-f</code>.</li> - <li>Caratère précédent : <code>C-b</code>.</li> - <li>Ligne suivante : <code>C-n</code>.</li> - <li>Ligne précédente : <code>C-p</code>.</li> - <li>Début d'une ligne : <code>C-a</code>.</li> - <li>Début d'une ligne indentée : <code>M-m</code>.</li> - <li>Fin d'une ligne : <code>C-e</code>.</li> - <li>Mot suivant : <code>M-f</code>.</li> - <li>Mot précédent : <code>M-b</code>.</li> - <li>Phrase précédente : <code>M-a</code>.</li> - <li>Phrase suivante : <code>M-e</code>.</li> - <li>Page précédente : <code>M-v</code>.</li> - <li>Page suivante : <code>C-v</code>.</li> - <li>Début du buffer : <code>M-&lt;</code>.</li> - <li>Fin du buffer : <code>M-&gt;</code>.</li> - <li>Aller à une ligne en particulier : <code>M-g g</code>.</li> - </ul> - <h3 id="chercher-remplacer">Chercher / Remplacer</h3> - <ul> - <li>Recherche vers la fin du fichier : <code>C-s</code> (répéter la commande pour l'occurrence suivante).</li> - <li>Recherche vers le début du fichier : <code>C-r</code> (répéter la commande pour l'occurrence précédente).</li> - <li>Remplacer : <code>M-%</code>,</li> - <li><code>y</code> pour remplacer la correspondance en cours;</li> - <li><code>n</code> pour aller à la prohcaine correspondance sans remplacer;</li> - <li><code>q</code> pour sortir du processus de remplacement courant;</li> - <li><code>.</code> pour remplacer la correspondance en cours puis quitter le processus;</li> - <li><code>!</code> pour tout remplacer sans aucune autre question.</li> - <li>Chercher dans plusieurs fichiers : <code>M-x rgrep</code>.</li> - </ul> - <h3 id="effacer">Effacer</h3> - <ul> - <li>Effacer le mot suivant : <code>M-d</code>.</li> - <li>Effacer le mot précédant : <code>M-Backspace</code>.</li> - </ul> - <h3 id="sélectionner">Sélectionner</h3> - <ul> - <li>Indiquer le début (point) d'une sélection (mark) : <code>C-Spacebar</code>.</li> - <li>Sélectionner tout le paragraphe : <code>M-h</code>.</li> - <li>Sélectionner tout le buffer : <code>C-x h</code>.</li> - <li>Sélectionner une fonction : <code>C-M-h</code>.</li> - <li>Modifier une sélection : <code>C-x C-x</code>.</li> - </ul> - <p>Notez que l'on peut faire des actions spécifiques à une région qui est marquée. Ex.: Des undo, des trouver/remplacer, des recherches, etc.</p> - <h3 id="couper-copier-coller">Couper / Copier / Coller</h3> - <p>Dans le jargon Emacs les termes couper et coller sont remplacé par &quot;kill&quot; et &quot;yank&quot;.</p> - <ul> - <li>Couper : <code>C-w</code>.</li> - <li>Copier : <code>M-w</code>.</li> - <li>Coller : <code>C-y</code>.</li> - <li>Couper une ligne : <code>C-k</code>.</li> - <li>Couper une phrase (vers l'avant) : <code>M-k</code>.</li> - <li>Couper une phrase (vers l'arrière) : <code>C-x &lt;DEL&gt;</code>.</li> - <li>Couper une région : <code>C-w</code>.</li> - </ul> - <p>Emacs garde en mémoire tout ce qui a été couper et copier et lorsque vous collez vous avez accès à cet historique. Pour cela il suffit de coller une première fois avec <code>C-y</code>, puis ensuite faire <code>M-y</code> pour coller l'item de l'historique suivant. Cette &quot;mémoire&quot; se nomme <strong>kill ring</strong>. Cette fonctionnalité est une particularité très puissante et très utile de Emacs.</p> - <h3 id="undo">Undo</h3> - <p>Il y a trois combinaisons possibles pour invoquer la fonction undo ...</p> - <ul> - <li>Undo : <code>C-x u</code> ou <code>C-/</code> ou <code>C-_</code>.</li> - </ul> - <p>À la base Emacs n'offre pas de fonction &quot;redo&quot; je crois. Mais il y a une extension qui s'appelle <strong>undo-tree</strong> qui étend les fonctionnalités de base à ce niveau.</p> - <h3 id="changements-de-casse">Changements de casse</h3> - <ul> - <li>Premier caractère en majuscule : <code>M-c</code>.</li> - <li>Mot en majuscule : <code>M-u</code>.</li> - <li>Mot en minuscule : <code>M-l</code>.</li> - </ul> - <h3 id="permutations">Permutations</h3> - <ul> - <li>Intervertir deux lettres : <code>C-t</code>.</li> - <li>Intervertir deux mots : <code>M-t</code>.</li> - <li>Intervertir deux lignes : <code>C-x C-t</code>.</li> - </ul> - <h3 id="auto-complétion">Auto-Complétion</h3> - <ul> - <li>Auto-complétion d'un mot se trouvant déjà dans un buffer : <code>M-/</code>.</li> - </ul> - <h3 id="aide">Aide</h3> - <ul> - <li>Tutorial Emacs : <code>F1 t</code>.</li> - <li>Documentation : <code>F1 r</code>.</li> - <li>Description d'une commande : <code>F1 k</code> ou <code>C-h k</code>.</li> - <li>Description d'une fonction : <code>F1 f</code> ou <code>C-h f</code>.</li> - </ul> - <h2 id="conclusion-à-cette-introduction">Conclusion à cette introduction</h2> - <p>Vous vous doûtez bien qu'il s'agit ici que d'un survol très sommaire des commandes et des fonctionnalités d'Emacs. D'autres billets viendront complétés celui-ci, en choisissant d'explorer des aspects plus précis.</p> - <p>Ceci dit, j'espère que vous allez essayer et aimer Emacs. Au départ, je vous suggère d'expérimenter et appliquer les notions que vous avez apprisent dans des fichiers de configuration ou sur des projets personnels, avant d'en faire votre éditeur de tous les jours ... Si vous percévérez vous ne pourrez plus vous en passer.</p> - <p>Lire la suite de ce billet :</p> - <ul> - <li><a href="http://hugo.soucy.cc/txt/emacs/2015/06/emacs-101-la-configuration.html">Emacs 101 - la configuration</a>.</li> - </ul> + + <article class="h-entry hentry"> + <div class="layout e-content p-name single"> + <!-- Pandoc var --> + <h1 id="emacs-101---lintroduction">Emacs 101 - l'introduction</h1> +<p>Apprendre <a href="http://www.gnu.org/software/emacs/">Emacs</a> peut être perçu comme quelque chose de difficile. Pour ma part, je ne considère pas cela comme difficile, non. Mais cela demande certainement du temps.</p> +<p>Premièrement, il faut du temps pour découvrir cet envrionnement et apprendre les concepts qui le compose. Il faut aussi du temps pour connaître par coeur les commandes de base. Notre tête et nos doigts doivent s'y habituer pour sortir du joug de la souris. Car c'est bien cela l'avantage de maîtriser son éditeur texte : gagner en productivité.</p> +<p>Et passer moins de temps à faire des aller-retours entre la souris et le clavier apporte définitivement un gain en productivité.</p> +<p>Comme par exemple, si je veux sélectionner un paragraphe, le couper et le coller à fin du document. Je peux utiliser le clavier et la souris ... ou seulement la souris. Toutefois avec Emacs je ferais la série de commandes suivantes (<code>C-</code> correspond à la touche <code>Ctrl</code> et <code>M-</code> correspond à la touche <code>Alt</code>) :</p> +<ol style="list-style-type: decimal"> +<li><code>M-a</code>, pour placer mon curseur au début au paragraphe;</li> +<li><code>M-k</code>, pour couper une paragraphe vers l'avant (l'inverse serait <code>C-x &lt;DEL&gt;</code>);</li> +<li><code>M-&gt;</code>, pour me rendre à la fin du document;</li> +<li><code>C-y</code>, pour finalement coller le paragraphe.</li> +</ol> +<p>Dans les premiers temps ce type de séquence vous paraîtra beaucoup moins efficace que vos anciennes habitudes, mais si vous persévérez dans l'apprentissage d'Emacs, après quelques semaines vous exécuterez ce genre de tâche avec rapidité et fluidité.</p> +<p>Selon-moi le meilleur moyen d'apprendre les commandes de base, est de suivre le tutoriel officiel qui est directement intégrer dans Emacs. Pour y accéder, tapez <code>M-x</code>, puis entrez la commande <code>help-with-tutorial-spec-language</code>; un choix de langue vous sera offert.</p> +<p>Ce tutoriel interactif vous apprendra les bases pour atteindre le bonheur et le confort dans votre nouvel éditeur texte préféré :</p> +<ul> +<li>Démarrer et fermer Emacs.</li> +<li>Les commandes de bases pour vous déplacer dans le texte et l'éditer.</li> +<li>Ouvrir et sauvegarder des fichiers.</li> +<li>Les concepts qui composent Emacs : windows, frames, files, buffers, etc.</li> +<li>Invoquer des fonctions avec la commande <code>M-x</code>.</li> +<li>Etc.</li> +</ul> +<h2 id="buffers-windows-et-frames">Buffers, windows et frames</h2> +<p>Avant d'enter dans les commandes de déplacement et d'édition, je crois qu'il faut d'abord que je vous explique ce qu'est un <strong>buffer</strong>, une <strong>window</strong> et un <strong>frame</strong>. Ces concepts sont parfois un peu déroutant pour le nouveau venu dans Emacs ...</p> +<h3 id="buffers">Buffers</h3> +<p>Premièrement, on peut avoir plusieurs buffers ouverts en même temps. Habituellement un buffer représente le contenu d'un fichier, mais il peut être aussi de l'information en provenance de l'application, comme par exemple le buffer <em>Messages</em>, toujours présent à l'ouverture d'Emacs.</p> +<p>Les buffers sont visibles travers les fenêtres (windows). Pour passer à un autre buffer et l'afficher dans la fenêtre courante vous devez faire la commande <code>C-x b</code>. Cela a pour conséquence de déplacer le curseur vers le <strong>minibuffer</strong> et d'afficher un message qui ressemble à &quot;Switch to buffer (default <em>scratch</em>)&quot;.</p> +<p>À partir de là, vous pouvez taper le nom du buffer vers lequel vous voulez basculer. Pour afficher la liste de ceux qui sont ouverts appuyez sur la touche <code>Tab</code>.</p> +<p>Pour quitter le minibuffer, annuler la commande en cours et retourner le curseur dans le buffer faîtes <code>C-g</code>.</p> +<p>Il est aussi possible de lister directement tous les buffers qui sont actifs en tapant <code>C-x C-b</code>.</p> +<h3 id="windows-et-frames">Windows et frames</h3> +<p>Dans Emacs une fenêtre (window) n'est pas une fenêtre comme on l'entend dans un contexte de système d'exploitation; dans ce cas on parlerait plutôt d'un cadre (frame). La fenêtre est une vue sur un buffer, et il est possible d'avoir plusieurs fenêtres dans un seul cadre, ce qui permet d'afficher de multiple buffers en même temps.</p> +<p>Bien sûr il y des commandes pour créer ou supprimer des fenêtres, se déplacer dans chacune d'elle, <a href="http://www.gnu.org/software/emacs/manual/html_node/emacs/Change-Window.html">modifier leur taille, etc</a>.</p> +<ul> +<li>Nouvelle fenêtre horizontale : <code>C-x 2</code>.</li> +<li>Nouvelle fenêtre verticale : <code>C-x 3</code>.</li> +<li>Fermer toutes les fenêtres sauf la fenêtre courante : <code>C-x 1</code>.</li> +<li>Fermer la fenêtre courante : <code>C-x 0</code>.</li> +<li>Naviguer d'une fenêtre à l'autre : <code>C-x o</code>.</li> +</ul> +<p>Si vous voulez un nouveau cadre et non une nouvelle fenêtre, la commande est <code>C-x 5 2</code>.</p> +<h3 id="minibuffer">Minibuffer</h3> +<p>Le <strong>minibuffer</strong> quant à lui est l'espace, sous la barre de status, où vous interagissez avec Emacs : entrer une commande, donner un valeur à un argument, recevoir de l'info, etc. Dans le minibuffer vous avez accès aux mêmes fonctionnalités que dans n'importe quel buffer.</p> +<p><em>Rappel : Pour quitter le minibuffer, annuler la commande en cours et retourner le curseur dans le buffer faîtes <code>C-g</code>.</em></p> +<h2 id="les-commandes-de-base">Les commandes de base</h2> +<p>Voici une liste des commandes que vous devez maîtriser pour être efficace dans Emacs. Il est aussi intéressant de savoir que, plusieurs commandes Emacs de base fonctionneront dans n'importe quel terminal Linux ou BSD. Donc en les apprenant, vous devenez également un meilleur utilisateur UNIX.</p> +<p>D'abord, rappelons que <code>C-</code> correspond à la touche <code>Ctrl</code> et que <code>M-</code> correspond à la touche <code>Alt</code>. Donc <code>C-k</code> est semblable à <code>Ctrl + k</code>.</p> +<h3 id="ouvrir-créer-sauvegarder-et-fermer-des-buffers">Ouvrir, créer, sauvegarder et fermer des buffers</h3> +<ul> +<li>Ouvir ou créer un fichier : <code>C-x C-f</code>.</li> +<li>Sauvegarder le buffer courant : <code>C-x C-s</code>.</li> +<li>Sauvegarder tous les buffers ouverts : <code>C-x s</code>.</li> +<li>Enregistrer-sous : <code>C-x C-w</code>.</li> +<li>Fermer un buffer : <code>C-x k</code>.</li> +</ul> +<h3 id="se-déplacer-dans-un-buffer">Se déplacer dans un buffer</h3> +<ul> +<li>Caratère suivant : <code>C-f</code>.</li> +<li>Caratère précédent : <code>C-b</code>.</li> +<li>Ligne suivante : <code>C-n</code>.</li> +<li>Ligne précédente : <code>C-p</code>.</li> +<li>Début d'une ligne : <code>C-a</code>.</li> +<li>Début d'une ligne indentée : <code>M-m</code>.</li> +<li>Fin d'une ligne : <code>C-e</code>.</li> +<li>Mot suivant : <code>M-f</code>.</li> +<li>Mot précédent : <code>M-b</code>.</li> +<li>Phrase précédente : <code>M-a</code>.</li> +<li>Phrase suivante : <code>M-e</code>.</li> +<li>Page précédente : <code>M-v</code>.</li> +<li>Page suivante : <code>C-v</code>.</li> +<li>Début du buffer : <code>M-&lt;</code>.</li> +<li>Fin du buffer : <code>M-&gt;</code>.</li> +<li>Aller à une ligne en particulier : <code>M-g g</code>.</li> +</ul> +<h3 id="chercher-remplacer">Chercher / Remplacer</h3> +<ul> +<li>Recherche vers la fin du fichier : <code>C-s</code> (répéter la commande pour l'occurrence suivante).</li> +<li>Recherche vers le début du fichier : <code>C-r</code> (répéter la commande pour l'occurrence précédente).</li> +<li>Remplacer : <code>M-%</code>,</li> +<li><code>y</code> pour remplacer la correspondance en cours;</li> +<li><code>n</code> pour aller à la prohcaine correspondance sans remplacer;</li> +<li><code>q</code> pour sortir du processus de remplacement courant;</li> +<li><code>.</code> pour remplacer la correspondance en cours puis quitter le processus;</li> +<li><code>!</code> pour tout remplacer sans aucune autre question.</li> +<li>Chercher dans plusieurs fichiers : <code>M-x rgrep</code>.</li> +</ul> +<h3 id="effacer">Effacer</h3> +<ul> +<li>Effacer le mot suivant : <code>M-d</code>.</li> +<li>Effacer le mot précédant : <code>M-Backspace</code>.</li> +</ul> +<h3 id="sélectionner">Sélectionner</h3> +<ul> +<li>Indiquer le début (point) d'une sélection (mark) : <code>C-Spacebar</code>.</li> +<li>Sélectionner tout le paragraphe : <code>M-h</code>.</li> +<li>Sélectionner tout le buffer : <code>C-x h</code>.</li> +<li>Sélectionner une fonction : <code>C-M-h</code>.</li> +<li>Modifier une sélection : <code>C-x C-x</code>.</li> +</ul> +<p>Notez que l'on peut faire des actions spécifiques à une région qui est marquée. Ex.: Des undo, des trouver/remplacer, des recherches, etc.</p> +<h3 id="couper-copier-coller">Couper / Copier / Coller</h3> +<p>Dans le jargon Emacs les termes couper et coller sont remplacé par &quot;kill&quot; et &quot;yank&quot;.</p> +<ul> +<li>Couper : <code>C-w</code>.</li> +<li>Copier : <code>M-w</code>.</li> +<li>Coller : <code>C-y</code>.</li> +<li>Couper une ligne : <code>C-k</code>.</li> +<li>Couper une phrase (vers l'avant) : <code>M-k</code>.</li> +<li>Couper une phrase (vers l'arrière) : <code>C-x &lt;DEL&gt;</code>.</li> +<li>Couper une région : <code>C-w</code>.</li> +</ul> +<p>Emacs garde en mémoire tout ce qui a été couper et copier et lorsque vous collez vous avez accès à cet historique. Pour cela il suffit de coller une première fois avec <code>C-y</code>, puis ensuite faire <code>M-y</code> pour coller l'item de l'historique suivant. Cette &quot;mémoire&quot; se nomme <strong>kill ring</strong>. Cette fonctionnalité est une particularité très puissante et très utile de Emacs.</p> +<h3 id="undo">Undo</h3> +<p>Il y a trois combinaisons possibles pour invoquer la fonction undo ...</p> +<ul> +<li>Undo : <code>C-x u</code> ou <code>C-/</code> ou <code>C-_</code>.</li> +</ul> +<p>À la base Emacs n'offre pas de fonction &quot;redo&quot; je crois. Mais il y a une extension qui s'appelle <strong>undo-tree</strong> qui étend les fonctionnalités de base à ce niveau.</p> +<h3 id="changements-de-casse">Changements de casse</h3> +<ul> +<li>Premier caractère en majuscule : <code>M-c</code>.</li> +<li>Mot en majuscule : <code>M-u</code>.</li> +<li>Mot en minuscule : <code>M-l</code>.</li> +</ul> +<h3 id="permutations">Permutations</h3> +<ul> +<li>Intervertir deux lettres : <code>C-t</code>.</li> +<li>Intervertir deux mots : <code>M-t</code>.</li> +<li>Intervertir deux lignes : <code>C-x C-t</code>.</li> +</ul> +<h3 id="auto-complétion">Auto-Complétion</h3> +<ul> +<li>Auto-complétion d'un mot se trouvant déjà dans un buffer : <code>M-/</code>.</li> +</ul> +<h3 id="aide">Aide</h3> +<ul> +<li>Tutorial Emacs : <code>F1 t</code>.</li> +<li>Documentation : <code>F1 r</code>.</li> +<li>Description d'une commande : <code>F1 k</code> ou <code>C-h k</code>.</li> +<li>Description d'une fonction : <code>F1 f</code> ou <code>C-h f</code>.</li> +</ul> +<h2 id="conclusion-à-cette-introduction">Conclusion à cette introduction</h2> +<p>Vous vous doûtez bien qu'il s'agit ici que d'un survol très sommaire des commandes et des fonctionnalités d'Emacs. D'autres billets viendront complétés celui-ci, en choisissant d'explorer des aspects plus précis.</p> +<p>Ceci dit, j'espère que vous allez essayer et aimer Emacs. Au départ, je vous suggère d'expérimenter et appliquer les notions que vous avez apprisent dans des fichiers de configuration ou sur des projets personnels, avant d'en faire votre éditeur de tous les jours ... Si vous percévérez vous ne pourrez plus vous en passer.</p> +<p>Lire la suite de ce billet :</p> +<ul> +<li><a href="http://hugo.soucy.cc/txt/emacs/2015/06/emacs-101-la-configuration.html">Emacs 101 - la configuration</a>.</li> +</ul> + </div> - <div class="cv__list"> - </div> - </div> - </main> - - <nav class="nav"> - <div class="nav__panel" id="menu" tabindex="0"> - <div class="nav__panel__content layout"> - <h2 class="visuallyhidden">Navigation</h2> + <nav class="nav"> + <div class="nav__panel" id="menu" tabindex="0"> + <div class="nav__panel__content layout"> + <h2 class="visuallyhidden">Navigation</h2> - <ul class="nav__list" role="menubar"> - <li class="nav__item"> - <a class="nav__link" href="http://hugo.soucy.cc" rel="index"> - Page d'accueil - </a> - </li> - <li class="nav__item"> - <a class="nav__link" href="http://hugo.soucy.cc/note"> - Notes - </a> - </li> - <li class="nav__item"> - <a class="nav__link" href="http://hugo.soucy.cc/txt"> - Textes - </a> - </li> - <li class="nav__item"> - <a class="nav__link" href="http://hugo.soucy.cc/file/curriculum-vitae.html"> - Curriculum vitae - </a> - </li> - </ul> - </div> + <ul class="nav__list" role="menubar"> + <li class="nav__item"> + <a class="nav__link" href="http://hugo.soucy.cc" rel="index"> + Page d'accueil + </a> + </li> + <li class="nav__item"> + <a class="nav__link" href="http://hugo.soucy.cc/note"> + Notes + </a> + </li> + <li class="nav__item"> + <a class="nav__link" href="http://hugo.soucy.cc/txt"> + Textes + </a> + </li> + <li class="nav__item"> + <a class="nav__link" href="http://hugo.soucy.cc/file/curriculum-vitae.html"> + Curriculum vitae + </a> + </li> + </ul> + </div> + + <a class="nav__close" href="#" role="button"> + <span class="nav__close__text"> + Fermer <span class="visuallyhidden">le menu</span> + </span> - <a class="nav__close" href="#" role="button"> - <span class="nav__close__text"> - Fermer <span class="visuallyhidden">le menu</span> - </span> + <span class="nav__x"> + <svg fill="currentColor" height="50" viewBox="0 0 24 24" width="50" xmlns="http://www.w3.org/2000/svg"> + <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/> + <path d="M0 0h24v24H0z" fill="none"/> + </svg> + </span> + </a> + </div> + </nav> - <span class="nav__x"> - <i class="nav__x__ico"></i> - </span> - </a> - </div> - </nav> - <script id="cuttingTheMustard"> - var cuttingTheMustard = ('querySelector' in document); - var bottomjs; + <footer> + <address class="layout"> + <hr/> - if (cuttingTheMustard) { - bottomjs = document.createElement('script'); - bottomjs.src = 'http://hugo.soucy.cc/js/script.min.js'; - bottomjs.id = 'bottomjs'; + <p><a class="note__link u-url u-uid u-syndication" href="http://hugo.soucy.cc/txt/emacs/2015/06/emacs-101-l-introduction" rel="bookmark">#</a> Créé à Québec le <time class="dt-published" datetime="2015-06-28T19:12:02">2015-06-28</time> par <a class="p-author author" href="http://hugo.soucy.cc#hs" rel="author"><i>Hugo Soucy</i></a>. Modifié le <time class="dt-updated">2016-11-22T22:13:55</time>. + </p> + </address> + </footer> + </article> + + <script id="cuttingTheMustard"> + var cuttingTheMustard = ('querySelector' in document); + var bottomjs; - document.body.appendChild(bottomjs); - document.querySelector('html').classList.remove('no-js'); - document.querySelector('html').classList.add('js'); - } -</script> + if (cuttingTheMustard) { + bottomjs = document.createElement('script'); + bottomjs.src = 'http://hugo.soucy.cc/js/script.min.js'; + bottomjs.id = 'bottomjs'; + document.body.appendChild(bottomjs); + document.querySelector('html').classList.remove('no-js'); + document.querySelector('html').classList.add('js'); + } + </script> </body> </html> diff --git a/public_html/txt/emacs/2015/06/emacs-101-la-configuration.html b/public_html/txt/emacs/2015/06/emacs-101-la-configuration.html @@ -28,173 +28,170 @@ <meta name="google-site-verification" content="-JraS76m4WZOftgNjizPIzRPC0MkCNNfxmPV4MGkJsc" /> </head> -<body class="cv" id="cv"> +<body id="single"> - <div class="layout"> - <a class="nav-button" href="#menu"> - <span class="nav-button__text"> - Menu <span class="visuallyhidden">principal</span> - </span> - - <span class="nav-button__burger"> - <i class="nav-button__burger__ico"></i> - </span> - </a> - </div> - - <header class="cv__banner"> <div class="layout"> - <h1 class="cv__title"> - <span class="visuallyhidden">Curriculum vitæ de</span> - <span class="logo">Hugo Soucy,</span> - </h1> - - <p class="cv__infos"> - <strong>Développeur Web frontend</strong><br> - <strong>Québec</strong>, Qc<br> - Téléphone: <a href="tel:+1581-996-6481">581-996-6481</a><br> - Courriel: <a href="mailto:hugo@soucy.cc">hugo@soucy.cc</a> - </p> + <a class="nav-button" href="#menu"> + <span class="nav-button__text"> + Menu <span class="visuallyhidden">principal</span> + </span> + + <span class="nav-button__burger"> + <svg fill="#fff" height="50" viewBox="0 0 24 24" width="50" xmlns="http://www.w3.org/2000/svg"> + <path d="M0 0h24v24H0z" fill="none"/> + <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/> + </svg> + </span> + </a> </div> - </header> - - <main class="cv__main"> - <div class="layout"> - <h1 id="emacs-101---la-configuration">Emacs 101 - la configuration</h1> - <p>Un apsect essentiel et extrèmement puissant d'<a href="http://www.gnu.org/software/emacs">Emacs</a>, est sa capacité à être personnalisé et à être étendu en fonctionnalité. La configuration et l'ajout de nouvelles fonctions se fait avec un langage de programmation qui s'appelle le <strong>Emacs lisp</strong> ou <strong>elisp</strong>. Les fichiers écris en elisp se termine par l'extension <code>.el</code>.</p> - <p>Au démarrage, Emacs vérifie si il existe des fichiers elisp qui lui indiquerait des particularités d'initialisation dont il doit tenir compte. Pour se faire il va chercher si un des fichiers suivants existent à la racine du répertoire utilisateur : <code>~/.emacs</code>, <code>~/.emacs.el</code>, ou <code>~/.emacs.d/init.el</code>. C'est dans ce fichier que l'on doit indiquer au programme nos préférences d'utilisation.</p> - <p>Vous pouvez choisir la forme de fichier de configuration qui vous plaira, mais la dernière forme est considérée comme faisant partie des bonnes pratiques, car elle permet de regrouper en un seul répertoire tous les fichiers nécessaires à la personnalisation d'Emacs. D'ailleurs le répertoire <code>.emacs.d</code> est généré par défaut, donc il ne vous reste plus qu'à y ajouter votre fichier <code>init.el</code>.</p> - <h2 id="création-du-fichier-init.el">Création du fichier <code>init.el</code></h2> - <p>Tout d'abord, rappelons que <code>C-</code> correspond à la touche <code>Ctrl</code> et que <code>M-</code> correspond à la touche <code>Alt</code>. Donc <code>C-k</code> est semblable à <code>Ctrl + k</code>.</p> - <p>Nous allons maintenant créer le fichier <code>init.el</code> qui nous permettra de personnaliser Emacs à votre convenance :</p> - <ol style="list-style-type: decimal"> - <li>Ouvrir Emacs.</li> - <li>Exécuter la commande <code>C-x C-f</code> (ouvrir ou créer un fichier).</li> - <li>Le pointeur est déplacer vers le minibuffer, où il est indiqué &quot;Find file: ~/&quot;.</li> - <li>Écrivez alors <code>.emacs.d/init.el</code> puis tapez sur <code>Entrée</code>. Si vous vous êtes trompé ou que vous ne comprenez pas ce qui se passe, faîtes <code>C-g</code> pour sortir du minibuffer et recommencez.</li> - <li>Si tout c'est bien passé, vous avez basculé vers un nouveau fichier vierge et le pointeur n'est plus dans le minibuffer.</li> - <li>Faîtes <code>C-x C-s</code> pour enregistrer <code>init.el</code> sur le disque.</li> - </ol> - <p>Dès lors nous sommes en mesure de commencer notre personnalisation de Emacs.</p> - <h2 id="nos-premières-modifications">Nos premières modifications</h2> - <p>En démarrant Emacs vous avez peut-être remarqué que le programme s'ouvrait avec une page de bienvenue et que la marge ne contenait pas de numéros de ligne. Nous allons donc changer ces deux paramètres pour commencer; car vous l'avourez, c'est bien pratique des numéros de ligne lorqu'on écrit du code et la page de bienvenue n'est pas très jolie ;)</p> - <h3 id="ajouter-les-numéros-de-ligne">Ajouter les numéros de ligne</h3> - <p>Pour ajouter des numéros dans la marge, ajoutez les deux lignes de code suivantes à votre fichier <code>init.el</code>.</p> - <pre><code>;; Add line numbers - (global-linum-mode 1)</code></pre> - <p>La première ligne est simplement un commentaire pour indiquer quel est le rôle de la ligne suivante. D'ailleurs je vous conseille de toujours commenter ce que vous faîtes dans votre fichier de configuration personnel; il sera alors plus facile de vous y retrouver au fil du temps.</p> - <p>La deuxième ligne, vous l'aurez deviné, est une instruction qui indique à Emacs d'afficher les numéros de ligne dans la marge.</p> - <p>Pour voir les changements immédiatement, tapez <code>M-x load-file</code>, puis faîtes <code>Entrée</code>. Cette commande réexécutera votre fichier <code>init.el</code>. Sinon vous devez redémarrer le programme pour que la nouvelle instruction soit effective.</p> - <h4 id="surligner-la-ligne-courante">Surligner la ligne courante</h4> - <pre><code>;; Highlight Current Line - (global-hl-line-mode +1)</code></pre> - <h4 id="retirer-la-barre-de-défilement-scroll">Retirer la barre de défilement (scroll)</h4> - <pre><code>;; Disable scroll bars - (scroll-bar-mode -1)</code></pre> - <h3 id="changer-la-page-daccueil">Changer la page d'accueil</h3> - <p>Pour remplacer l'écran de démarrage par un autre buffer, il faut d'abord désactiver la valeur par défaut et ensuite indiquer avec quoi nous voulons le remplacer :</p> - <pre><code>;; Remove splash screen on startup - (setq inhibit-splash-screen t) - ;; Have dired open instead - (dired &quot;~/&quot;)</code></pre> - <p>Vous les aurez reconnus, la première et la troisième ligne sont des commentaires qui annonces ce que nous allons modifier et/ou ajouter.</p> - <p>La deuxième ligne elle, change la valeur par défaut de la variable <code>inhibit-splash-screen</code> à <code>t</code> (<code>vrai</code> en elisp) qui par défaut est à <code>nil</code> (<code>nul</code> en elisp). Le nom de cette variable se traduirait par «empêcher l'écran de démarrage».</p> - <p>Avec la quatrième ligne nous indiquons à Emacs d'ouvrir le répertoire utilisateur (<code>~/</code>) dans le gestionnaire de fichier (dired). Vous pouvez ainsi ouvrir le dossier de votre choix ou vous pourriez ouvrir directement un fichier avec la fonction <code>find-file</code> au lieu de la fonction <code>dired</code> :</p> - <pre><code>;; Remove splash screen on startup - (setq inhibit-splash-screen t) - ;; Have a file instead - (find-file &quot;~/.bashrc&quot;)</code></pre> - <h2 id="installer-des-extensions-avec-le-gestionnaire-de-paquet">Installer des extensions avec le gestionnaire de paquet</h2> - <p>Depuis la version 24 un gestionnaire de paquets est inclu par défaut. Le but de ce gestionnaire est de faciliter l'intallation, l'utilisation et la mise à jour d'extensions, de thèmes, de mode pour Emacs.</p> - <p>Pour afficher le gestionnaire de paquets vous devez taper la commande <code>M-x package-list</code>, puis faire <code>Entrée</code>. Le buffer <code>*Packages*</code> s'ouvrira; celui-ci est un tableau contenant l'archive par défaut qui porte le nom de <abbr title="Emacs Lisp Package - Archive">ELPA</abbr>. Pour avoir la description complète d'un paquet déplacez le curseur vis-à-vis celui-ci, puis appuyez sur <code>Entrée</code>. Pour marquer un paquet à installer faîtes <code>i</code>; pour compléter l'installation ou tout autre action appuyez sur la touche <code>x</code>.</p> - <h3 id="ajouter-des-archives">Ajouter des archives</h3> - <p>ELPA, c'est bien, mais il ne contient pas tout ce qui pourrait nous intéresser. Donc pour étendre l'offre des paquets il faut ajouter des archives à notre gestionnaire! Et MELPA et Marmalade sont deux des archives les plus fréquenter et fréquentables du moment.</p> - <p>Ce qui nous ramène donc à notre fichier <code>init.el</code> ... À la fin de celui-ci coller le bloc de code suivant :</p> - <pre><code>(when (&gt;= emacs-major-version 24) - (require &#39;package) - (package-initialize) - (add-to-list &#39;package-archives &#39;(&quot;melpa-stable&quot; . &quot;http://melpa-stable.milkbox.net/packages/&quot;) t) - (add-to-list &#39;package-archives &#39;(&quot;marmalade&quot; . &quot;https://marmalade-repo.org/packages/&quot;)) - )</code></pre> - <p>D'abord avec <code>when</code> nous vérifions que la version de Emacs est bien supérieur ou égal à la version 24. Ensuite nous importons le gestionnaire de paquets avec <code>require</code>, puis nous initialisons celui-ci. Dès lors nous pouvons ajouter des archives supplémentaires avec <code>add-to-list</code>.</p> - <p>Encore une fois, pour voir les changements immédiatement nous devons tapez <code>M-x load-file</code>, puis faire <code>Entrée</code>. Pour vérifier que les nouvelles archives sont bien chargées dans le gestionnaire de paquets il suffit de l'ouvrir (<code>M-x package-list</code>) et de regarder sous la colonne <em>Archive</em> si il y a les termes <em>melpa-stable</em> et <em>marmalade</em> qui apparaissent çà et là. Sinon il faut redémarrer Emacs et revérifier à nouveau.</p> - <p>Vous remarquerez que la liste des paquets s'est grandement apprécié de plusieurs dizaines d'items supplémentaires.</p> - <h3 id="mofication-du-thème-décore-ta-vie">Mofication du thème : décore ta vie !</h3> - <p>La dernière configuration que nous ferons aujourd'hui en est une de la plus haute importance : la mofification du thème graphique de Emacs ! D'autant plus que, maintenant grâce aux archives <em>MELPA</em> et <em>Marmalade</em>, nous avons accès à moulte nouveaux thèmes.</p> - <p>Vous pouvez parcourir <em>Packages</em> à la recherche de thèmes; pour se faire vous pouvez utiliser <em>I-search</em> (<code>C-s</code>) avec le mot clé <strong>theme</strong>.</p> - <p>Une fois votre theme télécharger vous pouvez l'utiliser avec la commande <code>M-x load-theme</code>. Le mini-buffer vous demandera alors le nom du thème à charger. Si vous ne vous en souvenez plus appuyez sur la touche <code>Tab</code> pour obtenir la liste des options disponibles.</p> - <p>Pour charger votre nouveau thème au démarage de Emacs il suffit de lancer la fonction <code>load-theme</code> dans votre fichier de configuration <code>init.el</code>. Disons que le thème installer par le gestionnaire de paquet est <strong>cyberpunk</strong>, vous indiquerez donc ceci :</p> - <pre><code>;; Theme - (load-theme &#39;cyberpunk t)</code></pre> - <p>Si ne voulez pas y aller à l'aveugle en installant et chargeant un par un les thèmes qui se trouvent dans <em>Packages</em>, vous pouvez aller sur le site web <a href="https://emacsthemes.com/">Emacs Themes</a> pour magasiner votre thème. C'est normalement indiquer si votre choix est disponible dans MELPA ou un autre archive.</p> - <h2 id="conclusion">Conclusion</h2> - <p>Dans le prochain billet je parlerai du comment configurer GNU Emacs pour faire du dévloppement web.</p> - <p>Autre billet de cette série :</p> - <ul> - <li><a href="http://hugo.soucy.cc/txt/emacs/2015/06/emacs-101-l-introduction">Emacs 101 - l'introduction</a>.</li> - </ul> - - <div class="cv__list"> - </div> - </div> - </main> - - <nav class="nav"> - <div class="nav__panel" id="menu" tabindex="0"> - <div class="nav__panel__content layout"> - <h2 class="visuallyhidden">Navigation</h2> + + <article class="h-entry hentry"> + <div class="layout e-content p-name single"> + <!-- Pandoc var --> + <h1 id="emacs-101---la-configuration">Emacs 101 - la configuration</h1> +<p>Un apsect essentiel et extrèmement puissant d'<a href="http://www.gnu.org/software/emacs">Emacs</a>, est sa capacité à être personnalisé et à être étendu en fonctionnalité. La configuration et l'ajout de nouvelles fonctions se fait avec un langage de programmation qui s'appelle le <strong>Emacs lisp</strong> ou <strong>elisp</strong>. Les fichiers écris en elisp se termine par l'extension <code>.el</code>.</p> +<p>Au démarrage, Emacs vérifie si il existe des fichiers elisp qui lui indiquerait des particularités d'initialisation dont il doit tenir compte. Pour se faire il va chercher si un des fichiers suivants existent à la racine du répertoire utilisateur : <code>~/.emacs</code>, <code>~/.emacs.el</code>, ou <code>~/.emacs.d/init.el</code>. C'est dans ce fichier que l'on doit indiquer au programme nos préférences d'utilisation.</p> +<p>Vous pouvez choisir la forme de fichier de configuration qui vous plaira, mais la dernière forme est considérée comme faisant partie des bonnes pratiques, car elle permet de regrouper en un seul répertoire tous les fichiers nécessaires à la personnalisation d'Emacs. D'ailleurs le répertoire <code>.emacs.d</code> est généré par défaut, donc il ne vous reste plus qu'à y ajouter votre fichier <code>init.el</code>.</p> +<h2 id="création-du-fichier-init.el">Création du fichier <code>init.el</code></h2> +<p>Tout d'abord, rappelons que <code>C-</code> correspond à la touche <code>Ctrl</code> et que <code>M-</code> correspond à la touche <code>Alt</code>. Donc <code>C-k</code> est semblable à <code>Ctrl + k</code>.</p> +<p>Nous allons maintenant créer le fichier <code>init.el</code> qui nous permettra de personnaliser Emacs à votre convenance :</p> +<ol style="list-style-type: decimal"> +<li>Ouvrir Emacs.</li> +<li>Exécuter la commande <code>C-x C-f</code> (ouvrir ou créer un fichier).</li> +<li>Le pointeur est déplacer vers le minibuffer, où il est indiqué &quot;Find file: ~/&quot;.</li> +<li>Écrivez alors <code>.emacs.d/init.el</code> puis tapez sur <code>Entrée</code>. Si vous vous êtes trompé ou que vous ne comprenez pas ce qui se passe, faîtes <code>C-g</code> pour sortir du minibuffer et recommencez.</li> +<li>Si tout c'est bien passé, vous avez basculé vers un nouveau fichier vierge et le pointeur n'est plus dans le minibuffer.</li> +<li>Faîtes <code>C-x C-s</code> pour enregistrer <code>init.el</code> sur le disque.</li> +</ol> +<p>Dès lors nous sommes en mesure de commencer notre personnalisation de Emacs.</p> +<h2 id="nos-premières-modifications">Nos premières modifications</h2> +<p>En démarrant Emacs vous avez peut-être remarqué que le programme s'ouvrait avec une page de bienvenue et que la marge ne contenait pas de numéros de ligne. Nous allons donc changer ces deux paramètres pour commencer; car vous l'avourez, c'est bien pratique des numéros de ligne lorqu'on écrit du code et la page de bienvenue n'est pas très jolie ;)</p> +<h3 id="ajouter-les-numéros-de-ligne">Ajouter les numéros de ligne</h3> +<p>Pour ajouter des numéros dans la marge, ajoutez les deux lignes de code suivantes à votre fichier <code>init.el</code>.</p> +<pre><code>;; Add line numbers +(global-linum-mode 1)</code></pre> +<p>La première ligne est simplement un commentaire pour indiquer quel est le rôle de la ligne suivante. D'ailleurs je vous conseille de toujours commenter ce que vous faîtes dans votre fichier de configuration personnel; il sera alors plus facile de vous y retrouver au fil du temps.</p> +<p>La deuxième ligne, vous l'aurez deviné, est une instruction qui indique à Emacs d'afficher les numéros de ligne dans la marge.</p> +<p>Pour voir les changements immédiatement, tapez <code>M-x load-file</code>, puis faîtes <code>Entrée</code>. Cette commande réexécutera votre fichier <code>init.el</code>. Sinon vous devez redémarrer le programme pour que la nouvelle instruction soit effective.</p> +<h4 id="surligner-la-ligne-courante">Surligner la ligne courante</h4> +<pre><code>;; Highlight Current Line +(global-hl-line-mode +1)</code></pre> +<h4 id="retirer-la-barre-de-défilement-scroll">Retirer la barre de défilement (scroll)</h4> +<pre><code>;; Disable scroll bars +(scroll-bar-mode -1)</code></pre> +<h3 id="changer-la-page-daccueil">Changer la page d'accueil</h3> +<p>Pour remplacer l'écran de démarrage par un autre buffer, il faut d'abord désactiver la valeur par défaut et ensuite indiquer avec quoi nous voulons le remplacer :</p> +<pre><code>;; Remove splash screen on startup +(setq inhibit-splash-screen t) +;; Have dired open instead +(dired &quot;~/&quot;)</code></pre> +<p>Vous les aurez reconnus, la première et la troisième ligne sont des commentaires qui annonces ce que nous allons modifier et/ou ajouter.</p> +<p>La deuxième ligne elle, change la valeur par défaut de la variable <code>inhibit-splash-screen</code> à <code>t</code> (<code>vrai</code> en elisp) qui par défaut est à <code>nil</code> (<code>nul</code> en elisp). Le nom de cette variable se traduirait par «empêcher l'écran de démarrage».</p> +<p>Avec la quatrième ligne nous indiquons à Emacs d'ouvrir le répertoire utilisateur (<code>~/</code>) dans le gestionnaire de fichier (dired). Vous pouvez ainsi ouvrir le dossier de votre choix ou vous pourriez ouvrir directement un fichier avec la fonction <code>find-file</code> au lieu de la fonction <code>dired</code> :</p> +<pre><code>;; Remove splash screen on startup +(setq inhibit-splash-screen t) +;; Have a file instead +(find-file &quot;~/.bashrc&quot;)</code></pre> +<h2 id="installer-des-extensions-avec-le-gestionnaire-de-paquet">Installer des extensions avec le gestionnaire de paquet</h2> +<p>Depuis la version 24 un gestionnaire de paquets est inclu par défaut. Le but de ce gestionnaire est de faciliter l'intallation, l'utilisation et la mise à jour d'extensions, de thèmes, de mode pour Emacs.</p> +<p>Pour afficher le gestionnaire de paquets vous devez taper la commande <code>M-x package-list</code>, puis faire <code>Entrée</code>. Le buffer <code>*Packages*</code> s'ouvrira; celui-ci est un tableau contenant l'archive par défaut qui porte le nom de <abbr title="Emacs Lisp Package +Archive">ELPA</abbr>. Pour avoir la description complète d'un paquet déplacez le curseur vis-à-vis celui-ci, puis appuyez sur <code>Entrée</code>. Pour marquer un paquet à installer faîtes <code>i</code>; pour compléter l'installation ou tout autre action appuyez sur la touche <code>x</code>.</p> +<h3 id="ajouter-des-archives">Ajouter des archives</h3> +<p>ELPA, c'est bien, mais il ne contient pas tout ce qui pourrait nous intéresser. Donc pour étendre l'offre des paquets il faut ajouter des archives à notre gestionnaire! Et MELPA et Marmalade sont deux des archives les plus fréquenter et fréquentables du moment.</p> +<p>Ce qui nous ramène donc à notre fichier <code>init.el</code> ... À la fin de celui-ci coller le bloc de code suivant :</p> +<pre><code>(when (&gt;= emacs-major-version 24) + (require &#39;package) + (package-initialize) + (add-to-list &#39;package-archives &#39;(&quot;melpa-stable&quot; . &quot;http://melpa-stable.milkbox.net/packages/&quot;) t) + (add-to-list &#39;package-archives &#39;(&quot;marmalade&quot; . &quot;https://marmalade-repo.org/packages/&quot;)) + )</code></pre> +<p>D'abord avec <code>when</code> nous vérifions que la version de Emacs est bien supérieur ou égal à la version 24. Ensuite nous importons le gestionnaire de paquets avec <code>require</code>, puis nous initialisons celui-ci. Dès lors nous pouvons ajouter des archives supplémentaires avec <code>add-to-list</code>.</p> +<p>Encore une fois, pour voir les changements immédiatement nous devons tapez <code>M-x load-file</code>, puis faire <code>Entrée</code>. Pour vérifier que les nouvelles archives sont bien chargées dans le gestionnaire de paquets il suffit de l'ouvrir (<code>M-x package-list</code>) et de regarder sous la colonne <em>Archive</em> si il y a les termes <em>melpa-stable</em> et <em>marmalade</em> qui apparaissent çà et là. Sinon il faut redémarrer Emacs et revérifier à nouveau.</p> +<p>Vous remarquerez que la liste des paquets s'est grandement apprécié de plusieurs dizaines d'items supplémentaires.</p> +<h3 id="mofication-du-thème-décore-ta-vie">Mofication du thème : décore ta vie !</h3> +<p>La dernière configuration que nous ferons aujourd'hui en est une de la plus haute importance : la mofification du thème graphique de Emacs ! D'autant plus que, maintenant grâce aux archives <em>MELPA</em> et <em>Marmalade</em>, nous avons accès à moulte nouveaux thèmes.</p> +<p>Vous pouvez parcourir <em>Packages</em> à la recherche de thèmes; pour se faire vous pouvez utiliser <em>I-search</em> (<code>C-s</code>) avec le mot clé <strong>theme</strong>.</p> +<p>Une fois votre theme télécharger vous pouvez l'utiliser avec la commande <code>M-x load-theme</code>. Le mini-buffer vous demandera alors le nom du thème à charger. Si vous ne vous en souvenez plus appuyez sur la touche <code>Tab</code> pour obtenir la liste des options disponibles.</p> +<p>Pour charger votre nouveau thème au démarage de Emacs il suffit de lancer la fonction <code>load-theme</code> dans votre fichier de configuration <code>init.el</code>. Disons que le thème installer par le gestionnaire de paquet est <strong>cyberpunk</strong>, vous indiquerez donc ceci :</p> +<pre><code>;; Theme +(load-theme &#39;cyberpunk t)</code></pre> +<p>Si ne voulez pas y aller à l'aveugle en installant et chargeant un par un les thèmes qui se trouvent dans <em>Packages</em>, vous pouvez aller sur le site web <a href="https://emacsthemes.com/">Emacs Themes</a> pour magasiner votre thème. C'est normalement indiquer si votre choix est disponible dans MELPA ou un autre archive.</p> +<h2 id="conclusion">Conclusion</h2> +<p>Dans le prochain billet je parlerai du comment configurer GNU Emacs pour faire du dévloppement web.</p> +<p>Autre billet de cette série :</p> +<ul> +<li><a href="http://hugo.soucy.cc/txt/emacs/2015/06/emacs-101-l-introduction">Emacs 101 - l'introduction</a>.</li> +</ul> + </div> + + <nav class="nav"> + <div class="nav__panel" id="menu" tabindex="0"> + <div class="nav__panel__content layout"> + <h2 class="visuallyhidden">Navigation</h2> - <ul class="nav__list" role="menubar"> - <li class="nav__item"> - <a class="nav__link" href="http://hugo.soucy.cc" rel="index"> - Page d'accueil - </a> - </li> - <li class="nav__item"> - <a class="nav__link" href="http://hugo.soucy.cc/note"> - Notes - </a> - </li> - <li class="nav__item"> - <a class="nav__link" href="http://hugo.soucy.cc/txt"> - Textes - </a> - </li> - <li class="nav__item"> - <a class="nav__link" href="http://hugo.soucy.cc/file/curriculum-vitae.html"> - Curriculum vitae - </a> - </li> - </ul> - </div> - - <a class="nav__close" href="#" role="button"> - <span class="nav__close__text"> - Fermer <span class="visuallyhidden">le menu</span> - </span> - - <span class="nav__x"> - <i class="nav__x__ico"></i> - </span> - </a> - </div> - </nav> - <script id="cuttingTheMustard"> - var cuttingTheMustard = ('querySelector' in document); - var bottomjs; - - if (cuttingTheMustard) { - bottomjs = document.createElement('script'); - bottomjs.src = 'http://hugo.soucy.cc/js/script.min.js'; - bottomjs.id = 'bottomjs'; - - document.body.appendChild(bottomjs); - document.querySelector('html').classList.remove('no-js'); - document.querySelector('html').classList.add('js'); - } -</script> - + <ul class="nav__list" role="menubar"> + <li class="nav__item"> + <a class="nav__link" href="http://hugo.soucy.cc" rel="index"> + Page d'accueil + </a> + </li> + <li class="nav__item"> + <a class="nav__link" href="http://hugo.soucy.cc/note"> + Notes + </a> + </li> + <li class="nav__item"> + <a class="nav__link" href="http://hugo.soucy.cc/txt"> + Textes + </a> + </li> + <li class="nav__item"> + <a class="nav__link" href="http://hugo.soucy.cc/file/curriculum-vitae.html"> + Curriculum vitae + </a> + </li> + </ul> + </div> + + <a class="nav__close" href="#" role="button"> + <span class="nav__close__text"> + Fermer <span class="visuallyhidden">le menu</span> + </span> + + <span class="nav__x"> + <svg fill="currentColor" height="50" viewBox="0 0 24 24" width="50" xmlns="http://www.w3.org/2000/svg"> + <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/> + <path d="M0 0h24v24H0z" fill="none"/> + </svg> + </span> + </a> + </div> + </nav> + + <footer> + <address class="layout"> + <hr/> + + <p><a class="note__link u-url u-uid u-syndication" href="http://hugo.soucy.cc/txt/emacs/2015/06/emacs-101-la-configuration" rel="bookmark">#</a> Créé à Québec le <time class="dt-published" datetime="2015-06-30T12:22:16">2015-06-30</time> par <a class="p-author author" href="http://hugo.soucy.cc#hs" rel="author"><i>Hugo Soucy</i></a>. Modifié le <time class="dt-updated">2016-11-22T22:14:01</time>. + </p> + </address> + </footer> + </article> + + <script id="cuttingTheMustard"> + var cuttingTheMustard = ('querySelector' in document); + var bottomjs; + + if (cuttingTheMustard) { + bottomjs = document.createElement('script'); + bottomjs.src = 'http://hugo.soucy.cc/js/script.min.js'; + bottomjs.id = 'bottomjs'; + + document.body.appendChild(bottomjs); + document.querySelector('html').classList.remove('no-js'); + document.querySelector('html').classList.add('js'); + } + </script> </body> </html> diff --git a/public_html/txt/index.html b/public_html/txt/index.html @@ -38,7 +38,10 @@ </span> <span class="nav-button__burger"> - <i class="nav-button__burger__ico"></i> + <svg fill="#fff" height="50" viewBox="0 0 24 24" width="50" xmlns="http://www.w3.org/2000/svg"> + <path d="M0 0h24v24H0z" fill="none"/> + <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/> + </svg> </span> </a> </div> @@ -102,7 +105,10 @@ </span> <span class="nav__x"> - <i class="nav__x__ico"></i> + <svg fill="currentColor" height="50" viewBox="0 0 24 24" width="50" xmlns="http://www.w3.org/2000/svg"> + <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/> + <path d="M0 0h24v24H0z" fill="none"/> + </svg> </span> </a> </div> diff --git a/templates/mustache/partials/nav.button.mustache b/templates/mustache/partials/nav.button.mustache @@ -7,7 +7,10 @@ </span> <span class="nav-button__burger"> - <i class="nav-button__burger__ico"></i> + <svg fill="#fff" height="50" viewBox="0 0 24 24" width="50" xmlns="http://www.w3.org/2000/svg"> + <path d="M0 0h24v24H0z" fill="none"/> + <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/> + </svg> </span> </a> </div> diff --git a/templates/mustache/partials/nav.close.mustache b/templates/mustache/partials/nav.close.mustache @@ -4,6 +4,9 @@ </span> <span class="nav__x"> - <i class="nav__x__ico"></i> + <svg fill="currentColor" height="50" viewBox="0 0 24 24" width="50" xmlns="http://www.w3.org/2000/svg"> + <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/> + <path d="M0 0h24v24H0z" fill="none"/> + </svg> </span> </a>