Update last post

feed/feed.json

@@ -12,7 +12,7 @@
       "id": "https://lebcit.github.io/posts/click-without-javascript/",
       "url": "https://lebcit.github.io/posts/click-without-javascript/",
       "title": "Click without JavaScript !",
-      "content_html": "<p><em>This post is about clicking on an element without JavaScript.</em></p>\n<h2 id=\"intro\">Intro <a class=\"direct-link\" href=\"#intro\">#</a></h2>\n<p>Let's say that you have a button on which you want to click and perform a simple action like displaying some hidden content.<br>\nYou'll directly think :</p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">const</span> btn <span class=\"token operator\">=</span> document<span class=\"token punctuation\">.</span><span class=\"token function\">getElementById</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"btn\"</span><span class=\"token punctuation\">)</span><br>btn<span class=\"token punctuation\">.</span><span class=\"token function\">addEventListener</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"click\"</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span><br>\t<span class=\"token comment\">// display my hidden content...</span><br><span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span></code></pre>\n<p>What if I tell you that you could do it with CSS ?!</p>\n<h2 id=\"the-%3Atarget-css-pseudo-class\">The :target CSS pseudo-class <a class=\"direct-link\" href=\"#the-%3Atarget-css-pseudo-class\">#</a></h2>\n<p>While surfing the net, you surely clicked before on a <code>hash-link</code>, a link that redirects to a particular section in a page, just like the above <a href=\"#intro\">Intro</a> heading !<br>\nIt could also redirect to another page, but always to a particular <code>target</code> on the page.<br>\nThe <code>target</code> is this case is a link with a hash <code>#</code> :</p>\n<pre class=\"language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>a</span> <span class=\"token attr-name\">href</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>#intro<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>Intro<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>a</span><span class=\"token punctuation\">></span></span></code></pre>\n<p>This is why we call it a <code>hash-link</code>.</p>\n<p>CSS has a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/:target\" target=\"_blank\" rel=\"external noopener noreferrer\">:target</a> <em>pseudo-class</em>, that can be used to select a <code>target</code> and style it !<br>\nAre you already thinking about the <code>display</code> property ? 😉<br>\nLet's do it !</p>\n<p><a href=\"#the-code\">Reveal the code !</a></p>\n<div id=\"the-code\">\n<pre class=\"language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>a</span> <span class=\"token attr-name\">href</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>#the-code<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>Reveal the code !<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>a</span><span class=\"token punctuation\">></span></span><br><br><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>the-code<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span><br>\t<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">></span></span>This block of code is displayed after you click on the link<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">></span></span><br><br>\t<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>a</span> <span class=\"token attr-name\">href</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>#hide-the-code<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>Hide the code !<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>a</span><span class=\"token punctuation\">></span></span><br><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">></span></span></code></pre>\n<pre class=\"language-css\"><code class=\"language-css\"><span class=\"token selector\">#the-code</span> <span class=\"token punctuation\">{</span><br>\t<span class=\"token property\">display</span><span class=\"token punctuation\">:</span> none<span class=\"token punctuation\">;</span><br><span class=\"token punctuation\">}</span><br><br><span class=\"token selector\">#the-code:target</span> <span class=\"token punctuation\">{</span><br>\t<span class=\"token property\">display</span><span class=\"token punctuation\">:</span> block<span class=\"token punctuation\">;</span><br><span class=\"token punctuation\">}</span></code></pre>\n<p><a href=\"#hide-the-code\">Hide the code !</a></p>\n</div>\n<style>\n#the-code {\n\tdisplay: none;\n}\n\n#the-code:target {\n\tdisplay: block;\n}\n</style>\n<p>So how does this work ?!<br>\nIt's quite simple :</p>\n<ol>\n<li>We have a <code>hash-link</code> :</li>\n</ol>\n<pre class=\"language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>a</span> <span class=\"token attr-name\">href</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>#the-code<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>Reveal the code !<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>a</span><span class=\"token punctuation\">></span></span></code></pre>\n<ol start=\"2\">\n<li>We have a <code>div</code> with an <code>ID</code> matching the <code>hash-link</code> :</li>\n</ol>\n<pre class=\"language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>the-code<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>...<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">></span></span></code></pre>\n<ol start=\"3\">\n<li>We hide this <code>div</code> by default :</li>\n</ol>\n<pre class=\"language-css\"><code class=\"language-css\"><span class=\"token selector\">#the-code</span> <span class=\"token punctuation\">{</span><br>\t<span class=\"token property\">display</span><span class=\"token punctuation\">:</span> none<span class=\"token punctuation\">;</span><br><span class=\"token punctuation\">}</span></code></pre>\n<ol start=\"4\">\n<li>Then we display it if the <code>hash-link</code> becomes the target :</li>\n</ol>\n<pre class=\"language-css\"><code class=\"language-css\"><span class=\"token selector\">#the-code:target</span> <span class=\"token punctuation\">{</span><br>\t<span class=\"token property\">display</span><span class=\"token punctuation\">:</span> block<span class=\"token punctuation\">;</span><br><span class=\"token punctuation\">}</span></code></pre>\n<p>I've also added at the end of the <code>div</code> a <code>hash-link</code> that doesn't correspond to any <code>target</code> :</p>\n<pre class=\"language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>a</span> <span class=\"token attr-name\">href</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>#hide-the-code<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>Hide the code !<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>a</span><span class=\"token punctuation\">></span></span></code></pre>\n<p>When this one is clicked, the <code>target</code> is changed and the block of code goes back to it's original state, hidden, since this <code>hash-link</code> doesn't match it's <code>ID</code>.</p>\n<p>Hope you'll find it useful.</p>\n",
+      "content_html": "<p><em>This post is about clicking on an element without JavaScript.</em></p>\n<h2 id=\"intro\">Intro <a class=\"direct-link\" href=\"#intro\">#</a></h2>\n<p>Let's say that you have a button on which you want to click and perform a simple action like displaying some hidden content.<br>\nYou'll directly think :</p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">const</span> btn <span class=\"token operator\">=</span> document<span class=\"token punctuation\">.</span><span class=\"token function\">getElementById</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"btn\"</span><span class=\"token punctuation\">)</span><br>btn<span class=\"token punctuation\">.</span><span class=\"token function\">addEventListener</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"click\"</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span><br>\t<span class=\"token comment\">// display my hidden content...</span><br><span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span></code></pre>\n<p>What if I tell you that you could do it with CSS ?!</p>\n<h2 id=\"the-%3Atarget-css-pseudo-class\">The :target CSS pseudo-class <a class=\"direct-link\" href=\"#the-%3Atarget-css-pseudo-class\">#</a></h2>\n<p>While surfing the net, you surely clicked before on a <code>hash-link</code>, a link that redirects to a particular section in a page, just like the above <a href=\"#intro\">Intro</a> heading !<br>\nIt could also redirect to another page, but always to a particular <code>target</code> on the page.<br>\nThe <code>target</code> in this case is reached by a link with a hash <code>#</code> :</p>\n<pre class=\"language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>a</span> <span class=\"token attr-name\">href</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>#intro<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>Intro<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>a</span><span class=\"token punctuation\">></span></span></code></pre>\n<p>This is why we call it a <code>hash-link</code>.</p>\n<p>CSS has a <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/:target\" target=\"_blank\" rel=\"external noopener noreferrer\">:target</a> <em>pseudo-class</em>, that can be used to select a <code>target</code> and style it !<br>\nAre you already thinking about the <code>display</code> property ? 😉<br>\nLet's do it !</p>\n<p><a href=\"#the-code\">Reveal the code !</a></p>\n<div id=\"the-code\">\n<pre class=\"language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>a</span> <span class=\"token attr-name\">href</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>#the-code<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>Reveal the code !<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>a</span><span class=\"token punctuation\">></span></span><br><br><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>the-code<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span><br>\t<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">></span></span>This block of code is displayed after you click on the link<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">></span></span><br><br>\t<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>a</span> <span class=\"token attr-name\">href</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>#hide-the-code<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>Hide the code !<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>a</span><span class=\"token punctuation\">></span></span><br><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">></span></span></code></pre>\n<pre class=\"language-css\"><code class=\"language-css\"><span class=\"token selector\">#the-code</span> <span class=\"token punctuation\">{</span><br>\t<span class=\"token property\">display</span><span class=\"token punctuation\">:</span> none<span class=\"token punctuation\">;</span><br><span class=\"token punctuation\">}</span><br><br><span class=\"token selector\">#the-code:target</span> <span class=\"token punctuation\">{</span><br>\t<span class=\"token property\">display</span><span class=\"token punctuation\">:</span> block<span class=\"token punctuation\">;</span><br><span class=\"token punctuation\">}</span></code></pre>\n<p><a href=\"#hide-the-code\">Hide the code !</a></p>\n</div>\n<style>\n#the-code {\n\tdisplay: none;\n}\n\n#the-code:target {\n\tdisplay: block;\n}\n</style>\n<p>So how does this work ?!<br>\nIt's quite simple :</p>\n<ol>\n<li>We have a <code>hash-link</code> :</li>\n</ol>\n<pre class=\"language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>a</span> <span class=\"token attr-name\">href</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>#the-code<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>Reveal the code !<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>a</span><span class=\"token punctuation\">></span></span></code></pre>\n<ol start=\"2\">\n<li>We have a <code>div</code> with an <code>ID</code> matching the <code>hash-link</code> :</li>\n</ol>\n<pre class=\"language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>the-code<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>...<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">></span></span></code></pre>\n<ol start=\"3\">\n<li>We hide this <code>div</code> by default :</li>\n</ol>\n<pre class=\"language-css\"><code class=\"language-css\"><span class=\"token selector\">#the-code</span> <span class=\"token punctuation\">{</span><br>\t<span class=\"token property\">display</span><span class=\"token punctuation\">:</span> none<span class=\"token punctuation\">;</span><br><span class=\"token punctuation\">}</span></code></pre>\n<ol start=\"4\">\n<li>Then we display it if the <code>hash-link</code> becomes the target :</li>\n</ol>\n<pre class=\"language-css\"><code class=\"language-css\"><span class=\"token selector\">#the-code:target</span> <span class=\"token punctuation\">{</span><br>\t<span class=\"token property\">display</span><span class=\"token punctuation\">:</span> block<span class=\"token punctuation\">;</span><br><span class=\"token punctuation\">}</span></code></pre>\n<p>I've also added at the end of the <code>div</code> a <code>hash-link</code> that doesn't correspond to any <code>target</code> :</p>\n<pre class=\"language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>a</span> <span class=\"token attr-name\">href</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>#hide-the-code<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>Hide the code !<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>a</span><span class=\"token punctuation\">></span></span></code></pre>\n<p>When this one is clicked, the <code>target</code> is changed and the block of code goes back to it's original state, hidden, since this <code>hash-link</code> doesn't match it's <code>ID</code>.</p>\n<p>Hope you'll find it useful.</p>\n",
       "date_published": "2022-08-01T00:00:00Z"
     },{
       "id": "https://lebcit.github.io/posts/turn-a-markdown-blog-to-a-simple-ssg/",