andrzej
/
devlog
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

edits

This commit is contained in:
andrzej 2024-11-15 12:45:24 +01:00
parent 3ce98b0922
commit f9c67e8a78
8 changed files with 94 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
content/posts/hard-problem.md
View File

@ -1,12 +1,12 @@
+++ +++
date = '2024-11-13T14:24:21+01:00' date = '2024-11-13T14:24:21+01:00'
draft = true draft = true
title = 'Hard Problem? Invalidating the browser cache' title = 'Invalidating the browser cache'
+++ +++
**I had a bit of an issue with my [website](https://demos.ajstepien.xyz) recently.** **I had a bit of an issue with my [website](https://demos.ajstepien.xyz) recently.**
I pushed some changes incorporating images for the first time (I know -- very swish, very modern), and everything seemed to be working just fine, but when I loaded the production site... in Firefox, the images were not styled. Stranger still, they *were* styled when I loaded the same page in Chrome. I pushed some changes incorporating images for the first time (I know -- very swish, very modern), and everything seemed to be working just fine, but when I loaded the production site in Firefox... the images were not styled. Stranger still, they *were* styled when I loaded the same page in Chrome.
The experienced computer touchers amongst you will be saying "this is obviously a cache problem", and you're right, it is obviously a cache problem. Pressing `CTR + SHIFT + R` (which forces Firefox to clear the cache and do a full reload) proved this thesis, and solved the immediate problem for me, on my machine. But what about other people's machines? **I needed to cache-bust.** The experienced computer touchers amongst you will be saying "this is obviously a cache problem", and you're right, it is obviously a cache problem. Pressing `CTR + SHIFT + R` (which forces Firefox to clear the cache and do a full reload) proved this thesis, and solved the immediate problem for me, on my machine. But what about other people's machines? **I needed to cache-bust.**
@ -14,9 +14,9 @@ Post-processors such as Tailwind use fancy 'fingerprinting' techniques for this,
## Invalidating cached HTML ## Invalidating cached HTML
The best way to deal with the caching problem is to tell the browser not to cache our HTML in the first place. Yes, this is kind of (100%) cheating, but c'mon bro, it's just one little HTML file --- browsers only cache those because most websites these days are glorified SPAs where the HTML rarely changes. The best way to deal with the caching problem is to tell the browser not to cache our HTML in the first place. Yes, this is kind of cheating (ok, it's 100% cheating), but c'mon bro, it's just one little HTML file, and browsers only cache those because most websites these days are SPAs whose HTML rarely changes.
I can stop the HTML getting cached by by adding the following meta tag, in this case to `index.html`. I can stop HTML files from getting cached by adding the following meta tag. In this case, I'm adding it to `index.html`.
```html ```html
<meta http-equi"pragma" content="no-cache" /> <meta http-equi"pragma" content="no-cache" />
@ -24,17 +24,19 @@ I can stop the HTML getting cached by by adding the following meta tag, in this
## Invalidating cached CSS ## Invalidating cached CSS
That's all well and good, but what I really need is for the browser to recognize my CSS as a new file and load it anew from the server. I could change the file name whenever I want to bust the cache, but this would get tedious very quickly. What's more, as far as Git is concerned, I'd be deleting the CSS file and writing a new one with every deployment. Surely there's a better way? That's all well and good, but what I really need is for the browser to recognize my *CSS* as a new file and load it anew from the server. One way to achieve this would be to change the filename whenever I want to bust the cache, but this would get tedious very quickly. What's more, as far as Git is concerned, I'd be deleting the CSS file and writing a new one with every deployment, which would be an intolerable mess. Surely there's a better way?
Of course there is.
### Using a query ### Using a query
Of course there is. Look at this: Look at this:
```html ```html
<link rel="stylesheet" href="css/defaults.css?2"/> <link rel="stylesheet" href="css/defaults.css?2"/>
``` ```
As I'm requesting the file via http, I can append a query. Awesome. Not awesome enough though. I'm too lazy to do this every time I push a commit, and, being human, I'll probably forget at a critical moment. This can only mean one thing. It's time to bash (🤣) out a quick build script. As I'm requesting the file via http, I can append a query. Awesome. Not awesome enough though. I'm too lazy to edit this line of code every time I push a commit, and, being human, I'll probably forget at a critical moment. This can only mean one thing: it's time to bash (🤣) out a quick build script.
### Automating query insertion ### Automating query insertion
```bash ```bash
@ -43,21 +45,30 @@ COMMIT="$(git rev-parse HEAD)"
sed -i "s/css?=\w*/css?${COMMIT}/g" index.html sed -i "s/css?=\w*/css?${COMMIT}/g" index.html
``` ```
Let's talk real quick about what's happening here: Let's talk about what's happening here:
`COMMIT="$(git rev-parse HEAD)"` gets the commit id from Git and assigns it to the variable `$COMMIT`. `COMMIT="$(git rev-parse HEAD)"` gets the commit id from Git and assigns it to the variable `$COMMIT`.
Then, `sed -i "s/css?=\w*/css?${COMMIT}/g" index.html` does a find and replace on `index.html`. The regular expression `css?=\w*` matches 'css?=' plus any number of contiguous alphanumeric characters (everything until the next quote mark, basically) before replacing these alphanumeric characters with the commit id. The flag `-i` tells sed to edit the file in place. The `g` tells it to perform the operation on the whole file. Then, `sed -i "s/css?=\w*/css?${COMMIT}/g" index.html` does a find and replace in the file `index.html`. The regular expression `css?=\w*` matches 'css?=' plus any number of contiguous alphanumeric characters (everything until the next quote mark) before replacing these alphanumeric characters with the commit id. The flag `-i` tells `sed` to edit the file in place. The `g` tells it to perform the operation on the whole file.
Now, whenever we push a new commit, any CSS imports in `index.html` will be changed to something like this: Now, whenever we push a new commit, any CSS imports in `index.html` will be changed to something like this:
```html ```html
<link rel="stylesheet" <link rel="stylesheet"
href="css/styles.css?=ab184 href="css/styles.css?=ab184410c10c1adfb8b85b03b316f72b"
410c10c1adfb8b85b03b316f72b"
/> />
``` ```
Now I just need to add the build script to my Jenkinsfile, and the problem is solved. Now I just need to add the build script to my Jenkinsfile...
```groovy
stage('build'){
steps{
sh './build.sh'
}
}
```
and the problem is solved.
Pretty neat, huh? Pretty neat, huh?

36
public/css/main.css
View File

@ -104,16 +104,19 @@ em {
header { header {
border-bottom: 1rem solid var(--rp-highlight-high); border-bottom: 1rem solid var(--rp-pine);
margin-bottom: 1rem; margin-bottom: 1rem;
/* background-color: var(--rp-muted); */
} }
header>a { header>a {
text-decoration: none; text-decoration: none;
} }
time {
color: var(--rp-subtle);
}
footer { footer {
border-top: 1px solid #222; border-top: 1px solid #222;
@ -130,35 +133,40 @@ a:visited {
} }
h1 { h1 {
color: var(--rp-gold); color: var(--rp-text);
background-color: var(--const-stripe); background-color: var(--rp-highlight-high);
/* background-image: linear-gradient(to bottom, var(--rp-highlight-high), var(--rp-overlay), var(--rp-base)); */ /* background-image: linear-gradient(to bottom, var(--rp-highlight-high), var(--rp-overlay), var(--rp-base)); */
border-radius: 1rem 1rem 0 0; border-radius: 1rem 1rem 0 0;
padding: 1rem; padding: 1rem;
text-shadow: 1px 1px 2px black; /* text-shadow: 1px 1px 2px black; */
} }
h2 { h2,
color: var(--rp-gold); h3,
h4,
h5 {
color: var(--rp-rose);
} }
code { code {
background: var(--rp-surface); background-color: hsl(247deg, 23%, 15%);
color: var(--rp-gold); color: var(--rp-foam);
padding: 0.3em; padding: 0.3em;
border-radius: 1em; border-radius: 1em;
font-size: 1.2em; font-size: 1.2em;
span { }
background: var(--rp-surface);
} p>code {
background-color: var(--rp-surface);
} }
.highlight { .highlight {
padding-left: 2rem; padding-left: 2rem;
background-color: var(--rp-surface); background-color: hsl(247deg, 23%, 15%);
border-radius: 1rem; border-radius: 1rem;
} }

4
public/index.html
View File

@ -40,9 +40,9 @@
<h2><a href="/posts/hard-problem/">Hard Problem? Invalidating the browser cache</a></h2> <h2><a href="/posts/hard-problem/">Invalidating the browser cache</a></h2>
<p><strong>I had a bit of an issue with my <a href="https://demos.ajstepien.xyz">website</a> recently.</strong></p> <p><strong>I had a bit of an issue with my <a href="https://demos.ajstepien.xyz">website</a> recently.</strong></p>
<p>I pushed some changes incorporating images for the first time (I know &ndash; very swish, very modern), and everything seemed to be working just fine, but when I loaded the production site&hellip; in Firefox, the images were not styled. Stranger still, they <em>were</em> styled when I loaded the same page in Chrome.</p> <p>I pushed some changes incorporating images for the first time (I know &ndash; very swish, very modern), and everything seemed to be working just fine, but when I loaded the production site in Firefox&hellip; the images were not styled. Stranger still, they <em>were</em> styled when I loaded the same page in Chrome.</p>
<p>The experienced computer touchers amongst you will be saying &ldquo;this is obviously a cache problem&rdquo;, and you&rsquo;re right, it is obviously a cache problem. Pressing <code>CTR + SHIFT + R</code> (which forces Firefox to clear the cache and do a full reload) proved this thesis, and solved the immediate problem for me, on my machine. But what about other people&rsquo;s machines? <strong>I needed to cache-bust.</strong></p> <p>The experienced computer touchers amongst you will be saying &ldquo;this is obviously a cache problem&rdquo;, and you&rsquo;re right, it is obviously a cache problem. Pressing <code>CTR + SHIFT + R</code> (which forces Firefox to clear the cache and do a full reload) proved this thesis, and solved the immediate problem for me, on my machine. But what about other people&rsquo;s machines? <strong>I needed to cache-bust.</strong></p>
<h2><a href="/posts/permissions-strike-again/">Permissions Strike Again</a></h2> <h2><a href="/posts/permissions-strike-again/">Permissions Strike Again</a></h2>

4
public/index.xml
View File

@ -9,11 +9,11 @@
<lastBuildDate>Wed, 13 Nov 2024 14:24:21 +0100</lastBuildDate> <lastBuildDate>Wed, 13 Nov 2024 14:24:21 +0100</lastBuildDate>
<atom:link href="http://localhost:1313/index.xml" rel="self" type="application/rss+xml" /> <atom:link href="http://localhost:1313/index.xml" rel="self" type="application/rss+xml" />
<item> <item>
<title>Hard Problem? Invalidating the browser cache</title> <title>Invalidating the browser cache</title>
<link>http://localhost:1313/posts/hard-problem/</link> <link>http://localhost:1313/posts/hard-problem/</link>
<pubDate>Wed, 13 Nov 2024 14:24:21 +0100</pubDate> <pubDate>Wed, 13 Nov 2024 14:24:21 +0100</pubDate>
<guid>http://localhost:1313/posts/hard-problem/</guid> <guid>http://localhost:1313/posts/hard-problem/</guid>
<description>&lt;p&gt;&lt;strong&gt;I had a bit of an issue with my &lt;a href=&#34;https://demos.ajstepien.xyz&#34;&gt;website&lt;/a&gt; recently.&lt;/strong&gt;&lt;/p&gt;&#xA;&lt;p&gt;I pushed some changes incorporating images for the first time (I know &amp;ndash; very swish, very modern), and everything seemed to be working just fine, but when I loaded the production site&amp;hellip; in Firefox, the images were not styled. Stranger still, they &lt;em&gt;were&lt;/em&gt; styled when I loaded the same page in Chrome.&lt;/p&gt;&#xA;&lt;p&gt;The experienced computer touchers amongst you will be saying &amp;ldquo;this is obviously a cache problem&amp;rdquo;, and you&amp;rsquo;re right, it is obviously a cache problem. Pressing &lt;code&gt;CTR + SHIFT + R&lt;/code&gt; (which forces Firefox to clear the cache and do a full reload) proved this thesis, and solved the immediate problem for me, on my machine. But what about other people&amp;rsquo;s machines? &lt;strong&gt;I needed to cache-bust.&lt;/strong&gt;&lt;/p&gt;</description> <description>&lt;p&gt;&lt;strong&gt;I had a bit of an issue with my &lt;a href=&#34;https://demos.ajstepien.xyz&#34;&gt;website&lt;/a&gt; recently.&lt;/strong&gt;&lt;/p&gt;&#xA;&lt;p&gt;I pushed some changes incorporating images for the first time (I know &amp;ndash; very swish, very modern), and everything seemed to be working just fine, but when I loaded the production site in Firefox&amp;hellip; the images were not styled. Stranger still, they &lt;em&gt;were&lt;/em&gt; styled when I loaded the same page in Chrome.&lt;/p&gt;&#xA;&lt;p&gt;The experienced computer touchers amongst you will be saying &amp;ldquo;this is obviously a cache problem&amp;rdquo;, and you&amp;rsquo;re right, it is obviously a cache problem. Pressing &lt;code&gt;CTR + SHIFT + R&lt;/code&gt; (which forces Firefox to clear the cache and do a full reload) proved this thesis, and solved the immediate problem for me, on my machine. But what about other people&amp;rsquo;s machines? &lt;strong&gt;I needed to cache-bust.&lt;/strong&gt;&lt;/p&gt;</description>
</item> </item>
<item> <item>
<title>Permissions Strike Again</title> <title>Permissions Strike Again</title>

32
public/posts/hard-problem/index.html
View File

@ -4,7 +4,7 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
<title> <title>
Hard Problem? Invalidating the browser cache | CODING WITH ANDRZEJ Invalidating the browser cache | CODING WITH ANDRZEJ
</title> </title>
<link rel="stylesheet" href="/css/main.css" /> <link rel="stylesheet" href="/css/main.css" />
@ -38,37 +38,43 @@
<main> <main>
<h1>Hard Problem? Invalidating the browser cache</h1> <h1>Invalidating the browser cache</h1>
<time datetime="2024-11-13T14:24:21&#43;01:00">November 13, 2024</time> <time datetime="2024-11-13T14:24:21&#43;01:00">November 13, 2024</time>
<p><strong>I had a bit of an issue with my <a href="https://demos.ajstepien.xyz">website</a> recently.</strong></p> <p><strong>I had a bit of an issue with my <a href="https://demos.ajstepien.xyz">website</a> recently.</strong></p>
<p>I pushed some changes incorporating images for the first time (I know &ndash; very swish, very modern), and everything seemed to be working just fine, but when I loaded the production site&hellip; in Firefox, the images were not styled. Stranger still, they <em>were</em> styled when I loaded the same page in Chrome.</p> <p>I pushed some changes incorporating images for the first time (I know &ndash; very swish, very modern), and everything seemed to be working just fine, but when I loaded the production site in Firefox&hellip; the images were not styled. Stranger still, they <em>were</em> styled when I loaded the same page in Chrome.</p>
<p>The experienced computer touchers amongst you will be saying &ldquo;this is obviously a cache problem&rdquo;, and you&rsquo;re right, it is obviously a cache problem. Pressing <code>CTR + SHIFT + R</code> (which forces Firefox to clear the cache and do a full reload) proved this thesis, and solved the immediate problem for me, on my machine. But what about other people&rsquo;s machines? <strong>I needed to cache-bust.</strong></p> <p>The experienced computer touchers amongst you will be saying &ldquo;this is obviously a cache problem&rdquo;, and you&rsquo;re right, it is obviously a cache problem. Pressing <code>CTR + SHIFT + R</code> (which forces Firefox to clear the cache and do a full reload) proved this thesis, and solved the immediate problem for me, on my machine. But what about other people&rsquo;s machines? <strong>I needed to cache-bust.</strong></p>
<p>Post-processors such as Tailwind use fancy &lsquo;fingerprinting&rsquo; techniques for this, but I want something simpler than that for this project. Something I can code myself, without losing sight of what&rsquo;s happening under the hood.</p> <p>Post-processors such as Tailwind use fancy &lsquo;fingerprinting&rsquo; techniques for this, but I want something simpler than that for this project. Something I can code myself, without losing sight of what&rsquo;s happening under the hood.</p>
<h2 id="invalidating-cached-html">Invalidating cached HTML</h2> <h2 id="invalidating-cached-html">Invalidating cached HTML</h2>
<p>The best way to deal with the caching problem is to tell the browser not to cache our HTML in the first place. Yes, this is kind of (100%) cheating, but c&rsquo;mon bro, it&rsquo;s just one little HTML file &mdash; browsers only cache those because most websites these days are glorified SPAs where the HTML rarely changes.</p> <p>The best way to deal with the caching problem is to tell the browser not to cache our HTML in the first place. Yes, this is kind of cheating (ok, it&rsquo;s 100% cheating), but c&rsquo;mon bro, it&rsquo;s just one little HTML file, and browsers only cache those because most websites these days are SPAs whose HTML rarely changes.</p>
<p>I can stop the HTML getting cached by by adding the following meta tag, in this case to <code>index.html</code>.</p> <p>I can stop HTML files from getting cached by adding the following meta tag. In this case, I&rsquo;m adding it to <code>index.html</code>.</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">http-equi</span><span class="err">&#34;</span><span class="na">pragma</span><span class="err">&#34;</span> <span class="na">content</span><span class="o">=</span><span class="s">&#34;no-cache&#34;</span> <span class="p">/&gt;</span> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">http-equi</span><span class="err">&#34;</span><span class="na">pragma</span><span class="err">&#34;</span> <span class="na">content</span><span class="o">=</span><span class="s">&#34;no-cache&#34;</span> <span class="p">/&gt;</span>
</span></span></code></pre></div><h2 id="invalidating-cached-css">Invalidating cached CSS</h2> </span></span></code></pre></div><h2 id="invalidating-cached-css">Invalidating cached CSS</h2>
<p>That&rsquo;s all well and good, but what I really need is for the browser to recognize my CSS as a new file and load it anew from the server. I could change the file name whenever I want to bust the cache, but this would get tedious very quickly. What&rsquo;s more, as far as Git is concerned, I&rsquo;d be deleting the CSS file and writing a new one with every deployment. Surely there&rsquo;s a better way?</p> <p>That&rsquo;s all well and good, but what I really need is for the browser to recognize my <em>CSS</em> as a new file and load it anew from the server. One way to achieve this would be to change the filename whenever I want to bust the cache, but this would get tedious very quickly. What&rsquo;s more, as far as Git is concerned, I&rsquo;d be deleting the CSS file and writing a new one with every deployment, which would be an intolerable mess. Surely there&rsquo;s a better way?</p>
<p>Of course there is.</p>
<h3 id="using-a-query">Using a query</h3> <h3 id="using-a-query">Using a query</h3>
<p>Of course there is. Look at this:</p> <p>Look at this:</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&#34;stylesheet&#34;</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;css/defaults.css?2&#34;</span><span class="p">/&gt;</span> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&#34;stylesheet&#34;</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;css/defaults.css?2&#34;</span><span class="p">/&gt;</span>
</span></span></code></pre></div><p>As I&rsquo;m requesting the file via http, I can append a query. Awesome. Not awesome enough though. I&rsquo;m too lazy to do this every time I push a commit, and, being human, I&rsquo;ll probably forget at a critical moment. This can only mean one thing. It&rsquo;s time to bash (🤣) out a quick build script.</p> </span></span></code></pre></div><p>As I&rsquo;m requesting the file via http, I can append a query. Awesome. Not awesome enough though. I&rsquo;m too lazy to edit this line of code every time I push a commit, and, being human, I&rsquo;ll probably forget at a critical moment. This can only mean one thing: it&rsquo;s time to bash (🤣) out a quick build script.</p>
<h3 id="automating-query-insertion">Automating query insertion</h3> <h3 id="automating-query-insertion">Automating query insertion</h3>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl"><span class="cp">#!/usr/bin/env bash <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl"><span class="cp">#!/usr/bin/env bash
</span></span></span><span class="line"><span class="cl"><span class="cp"></span><span class="nv">COMMIT</span><span class="o">=</span><span class="s2">&#34;</span><span class="k">$(</span>git rev-parse HEAD<span class="k">)</span><span class="s2">&#34;</span> </span></span></span><span class="line"><span class="cl"><span class="cp"></span><span class="nv">COMMIT</span><span class="o">=</span><span class="s2">&#34;</span><span class="k">$(</span>git rev-parse HEAD<span class="k">)</span><span class="s2">&#34;</span>
</span></span><span class="line"><span class="cl">sed -i <span class="s2">&#34;s/css?=\w*/css?</span><span class="si">${</span><span class="nv">COMMIT</span><span class="si">}</span><span class="s2">/g&#34;</span> index.html </span></span><span class="line"><span class="cl">sed -i <span class="s2">&#34;s/css?=\w*/css?</span><span class="si">${</span><span class="nv">COMMIT</span><span class="si">}</span><span class="s2">/g&#34;</span> index.html
</span></span></code></pre></div><p>Let&rsquo;s talk real quick about what&rsquo;s happening here:</p> </span></span></code></pre></div><p>Let&rsquo;s talk about what&rsquo;s happening here:</p>
<p><code>COMMIT=&quot;$(git rev-parse HEAD)&quot;</code> gets the commit id from Git and assigns it to the variable <code>$COMMIT</code>.</p> <p><code>COMMIT=&quot;$(git rev-parse HEAD)&quot;</code> gets the commit id from Git and assigns it to the variable <code>$COMMIT</code>.</p>
<p>Then, <code>sed -i &quot;s/css?=\w*/css?${COMMIT}/g&quot; index.html</code> does a find and replace on <code>index.html</code>. The regular expression <code>css?=\w*</code> matches &lsquo;css?=&rsquo; plus any number of contiguous alphanumeric characters (everything until the next quote mark, basically) before replacing these alphanumeric characters with the commit id. The flag <code>-i</code> tells sed to edit the file in place. The <code>g</code> tells it to perform the operation on the whole file.</p> <p>Then, <code>sed -i &quot;s/css?=\w*/css?${COMMIT}/g&quot; index.html</code> does a find and replace in the file <code>index.html</code>. The regular expression <code>css?=\w*</code> matches &lsquo;css?=&rsquo; plus any number of contiguous alphanumeric characters (everything until the next quote mark) before replacing these alphanumeric characters with the commit id. The flag <code>-i</code> tells <code>sed</code> to edit the file in place. The <code>g</code> tells it to perform the operation on the whole file.</p>
<p>Now, whenever we push a new commit, any CSS imports in <code>index.html</code> will be changed to something like this:</p> <p>Now, whenever we push a new commit, any CSS imports in <code>index.html</code> will be changed to something like this:</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&#34;stylesheet&#34;</span> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&#34;stylesheet&#34;</span>
</span></span><span class="line"><span class="cl"><span class="na">href</span><span class="o">=</span><span class="s">&#34;css/styles.css?=ab184 </span></span><span class="line"><span class="cl"><span class="na">href</span><span class="o">=</span><span class="s">&#34;css/styles.css?=ab184410c10c1adfb8b85b03b316f72b&#34;</span>
</span></span></span><span class="line"><span class="cl"><span class="s">410c10c1adfb8b85b03b316f72b&#34;</span>
</span></span><span class="line"><span class="cl"><span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">/&gt;</span>
</span></span></code></pre></div><p>Now I just need to add the build script to my Jenkinsfile, and the problem is solved.</p> </span></span></code></pre></div><p>Now I just need to add the build script to my Jenkinsfile&hellip;</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-groovy" data-lang="groovy"><span class="line"><span class="cl"> <span class="n">stage</span><span class="o">(</span><span class="s1">&#39;build&#39;</span><span class="o">){</span>
</span></span><span class="line"><span class="cl"> <span class="n">steps</span><span class="o">{</span>
</span></span><span class="line"><span class="cl"> <span class="n">sh</span> <span class="s1">&#39;./build.sh&#39;</span>
</span></span><span class="line"><span class="cl"> <span class="o">}</span>
</span></span><span class="line"><span class="cl"> <span class="o">}</span>
</span></span></code></pre></div><p>and the problem is solved.</p>
<p>Pretty neat, huh?</p> <p>Pretty neat, huh?</p>
<p>There&rsquo;s just one thing bugging me: surely I do actually want the CSS to be cached <em>sometimes</em>. Caching exists for a reason, and I don&rsquo;t want to sacrifice performance. Maybe I can modify the build script so that it only updates the CSS imports when the CSS files have changed&hellip; Sounds like a topic for another blogpost&hellip;</p> <p>There&rsquo;s just one thing bugging me: surely I do actually want the CSS to be cached <em>sometimes</em>. Caching exists for a reason, and I don&rsquo;t want to sacrifice performance. Maybe I can modify the build script so that it only updates the CSS imports when the CSS files have changed&hellip; Sounds like a topic for another blogpost&hellip;</p>

4
public/posts/index.html
View File

@ -41,9 +41,9 @@
<p>Tempor est exercitation ad qui pariatur quis adipisicing aliquip nisi ea consequat ipsum occaecat. Nostrud consequat ullamco laboris fugiat esse esse adipisicing velit laborum ipsum incididunt ut enim. Dolor pariatur nulla quis fugiat dolore excepteur. Aliquip ad quis aliqua enim do consequat.</p> <p>Tempor est exercitation ad qui pariatur quis adipisicing aliquip nisi ea consequat ipsum occaecat. Nostrud consequat ullamco laboris fugiat esse esse adipisicing velit laborum ipsum incididunt ut enim. Dolor pariatur nulla quis fugiat dolore excepteur. Aliquip ad quis aliqua enim do consequat.</p>
<h2><a href="/posts/hard-problem/">Hard Problem? Invalidating the browser cache</a></h2> <h2><a href="/posts/hard-problem/">Invalidating the browser cache</a></h2>
<p><strong>I had a bit of an issue with my <a href="https://demos.ajstepien.xyz">website</a> recently.</strong></p> <p><strong>I had a bit of an issue with my <a href="https://demos.ajstepien.xyz">website</a> recently.</strong></p>
<p>I pushed some changes incorporating images for the first time (I know &ndash; very swish, very modern), and everything seemed to be working just fine, but when I loaded the production site&hellip; in Firefox, the images were not styled. Stranger still, they <em>were</em> styled when I loaded the same page in Chrome.</p> <p>I pushed some changes incorporating images for the first time (I know &ndash; very swish, very modern), and everything seemed to be working just fine, but when I loaded the production site in Firefox&hellip; the images were not styled. Stranger still, they <em>were</em> styled when I loaded the same page in Chrome.</p>
<p>The experienced computer touchers amongst you will be saying &ldquo;this is obviously a cache problem&rdquo;, and you&rsquo;re right, it is obviously a cache problem. Pressing <code>CTR + SHIFT + R</code> (which forces Firefox to clear the cache and do a full reload) proved this thesis, and solved the immediate problem for me, on my machine. But what about other people&rsquo;s machines? <strong>I needed to cache-bust.</strong></p> <p>The experienced computer touchers amongst you will be saying &ldquo;this is obviously a cache problem&rdquo;, and you&rsquo;re right, it is obviously a cache problem. Pressing <code>CTR + SHIFT + R</code> (which forces Firefox to clear the cache and do a full reload) proved this thesis, and solved the immediate problem for me, on my machine. But what about other people&rsquo;s machines? <strong>I needed to cache-bust.</strong></p>
<h2><a href="/posts/permissions-strike-again/">Permissions Strike Again</a></h2> <h2><a href="/posts/permissions-strike-again/">Permissions Strike Again</a></h2>

4
public/posts/index.xml
View File

@ -9,11 +9,11 @@
<lastBuildDate>Wed, 13 Nov 2024 14:24:21 +0100</lastBuildDate> <lastBuildDate>Wed, 13 Nov 2024 14:24:21 +0100</lastBuildDate>
<atom:link href="http://localhost:1313/posts/index.xml" rel="self" type="application/rss+xml" /> <atom:link href="http://localhost:1313/posts/index.xml" rel="self" type="application/rss+xml" />
<item> <item>
<title>Hard Problem? Invalidating the browser cache</title> <title>Invalidating the browser cache</title>
<link>http://localhost:1313/posts/hard-problem/</link> <link>http://localhost:1313/posts/hard-problem/</link>
<pubDate>Wed, 13 Nov 2024 14:24:21 +0100</pubDate> <pubDate>Wed, 13 Nov 2024 14:24:21 +0100</pubDate>
<guid>http://localhost:1313/posts/hard-problem/</guid> <guid>http://localhost:1313/posts/hard-problem/</guid>
<description>&lt;p&gt;&lt;strong&gt;I had a bit of an issue with my &lt;a href=&#34;https://demos.ajstepien.xyz&#34;&gt;website&lt;/a&gt; recently.&lt;/strong&gt;&lt;/p&gt;&#xA;&lt;p&gt;I pushed some changes incorporating images for the first time (I know &amp;ndash; very swish, very modern), and everything seemed to be working just fine, but when I loaded the production site&amp;hellip; in Firefox, the images were not styled. Stranger still, they &lt;em&gt;were&lt;/em&gt; styled when I loaded the same page in Chrome.&lt;/p&gt;&#xA;&lt;p&gt;The experienced computer touchers amongst you will be saying &amp;ldquo;this is obviously a cache problem&amp;rdquo;, and you&amp;rsquo;re right, it is obviously a cache problem. Pressing &lt;code&gt;CTR + SHIFT + R&lt;/code&gt; (which forces Firefox to clear the cache and do a full reload) proved this thesis, and solved the immediate problem for me, on my machine. But what about other people&amp;rsquo;s machines? &lt;strong&gt;I needed to cache-bust.&lt;/strong&gt;&lt;/p&gt;</description> <description>&lt;p&gt;&lt;strong&gt;I had a bit of an issue with my &lt;a href=&#34;https://demos.ajstepien.xyz&#34;&gt;website&lt;/a&gt; recently.&lt;/strong&gt;&lt;/p&gt;&#xA;&lt;p&gt;I pushed some changes incorporating images for the first time (I know &amp;ndash; very swish, very modern), and everything seemed to be working just fine, but when I loaded the production site in Firefox&amp;hellip; the images were not styled. Stranger still, they &lt;em&gt;were&lt;/em&gt; styled when I loaded the same page in Chrome.&lt;/p&gt;&#xA;&lt;p&gt;The experienced computer touchers amongst you will be saying &amp;ldquo;this is obviously a cache problem&amp;rdquo;, and you&amp;rsquo;re right, it is obviously a cache problem. Pressing &lt;code&gt;CTR + SHIFT + R&lt;/code&gt; (which forces Firefox to clear the cache and do a full reload) proved this thesis, and solved the immediate problem for me, on my machine. But what about other people&amp;rsquo;s machines? &lt;strong&gt;I needed to cache-bust.&lt;/strong&gt;&lt;/p&gt;</description>
</item> </item>
<item> <item>
<title>Permissions Strike Again</title> <title>Permissions Strike Again</title>

36
themes/cuqui/assets/css/main.css
View File

@ -104,16 +104,19 @@ em {
header { header {
border-bottom: 1rem solid var(--rp-highlight-high); border-bottom: 1rem solid var(--rp-pine);
margin-bottom: 1rem; margin-bottom: 1rem;
/* background-color: var(--rp-muted); */
} }
header>a { header>a {
text-decoration: none; text-decoration: none;
} }
time {
color: var(--rp-subtle);
}
footer { footer {
border-top: 1px solid #222; border-top: 1px solid #222;
@ -130,35 +133,40 @@ a:visited {
} }
h1 { h1 {
color: var(--rp-gold); color: var(--rp-text);
background-color: var(--const-stripe); background-color: var(--rp-highlight-high);
/* background-image: linear-gradient(to bottom, var(--rp-highlight-high), var(--rp-overlay), var(--rp-base)); */ /* background-image: linear-gradient(to bottom, var(--rp-highlight-high), var(--rp-overlay), var(--rp-base)); */
border-radius: 1rem 1rem 0 0; border-radius: 1rem 1rem 0 0;
padding: 1rem; padding: 1rem;
text-shadow: 1px 1px 2px black; /* text-shadow: 1px 1px 2px black; */
} }
h2 { h2,
color: var(--rp-gold); h3,
h4,
h5 {
color: var(--rp-rose);
} }
code { code {
background: var(--rp-surface); background-color: hsl(247deg, 23%, 15%);
color: var(--rp-gold); color: var(--rp-foam);
padding: 0.3em; padding: 0.3em;
border-radius: 1em; border-radius: 1em;
font-size: 1.2em; font-size: 1.2em;
span { }
background: var(--rp-surface);
} p>code {
background-color: var(--rp-surface);
} }
.highlight { .highlight {
padding-left: 2rem; padding-left: 2rem;
background-color: var(--rp-surface); background-color: hsl(247deg, 23%, 15%);
border-radius: 1rem; border-radius: 1rem;
} }