This commit is contained in:
andrzej 2024-11-15 10:27:29 +01:00
parent ff9362a353
commit 60a5ea4166
11 changed files with 72 additions and 24 deletions

View File

@ -6,11 +6,11 @@ title = 'Hard Problem? 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), 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 problem handily for me, on my machine. But what about other people's machines? I need 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.**
Post-processors such as Tailwind use fancy 'fingerprinting' techniques for this, but I want something simpler than that for this project. Something I can code myself, and understand at a deep level. Post-processors such as Tailwind use fancy 'fingerprinting' techniques for this, but I want something simpler than that for this project. Something I can code myself, without losing sight of what's happening under the hood.
## Invalidating cached HTML ## Invalidating cached HTML

View File

@ -1,3 +1,6 @@
/* TODO: add defaults.css to project */
:root { :root {
/* Rosé Pine Dawn */ /* Rosé Pine Dawn */
--rp-base: hsl(32deg, 57%, 95%); --rp-base: hsl(32deg, 57%, 95%);
@ -60,8 +63,20 @@ body {
color: var(--rp-text); color: var(--rp-text);
font-family: sans-serif; font-family: sans-serif;
line-height: 1.5; line-height: 1.5;
margin: 1rem; width: 100vw;
max-width: 768px; display: flex;
flex-direction: column;
justify-content: start;
align-items: center;
}
header {
align-self: flex-start;
width: 100vw;
}
main {
max-width: 800px;
} }
strong { strong {

View File

@ -41,8 +41,8 @@
<h2><a href="/posts/hard-problem/">Hard Problem? Invalidating the browser cache</a></h2> <h2><a href="/posts/hard-problem/">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, very swish), 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 <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&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>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 problem handily for me, on my machine. But what about other people&rsquo;s machines? I need to cache-bust.</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>
<p>Configuring Apache really isn&rsquo;t rocket science. There are a wealth of great tutorials online, the documentation is very well documented, and the defaults work more or less out of the box. But it&rsquo;s one of those jobs that I do just infrequently enough that I always forget things in the interim, and end up making the same old mistakes.</p> <p>Configuring Apache really isn&rsquo;t rocket science. There are a wealth of great tutorials online, the documentation is very well documented, and the defaults work more or less out of the box. But it&rsquo;s one of those jobs that I do just infrequently enough that I always forget things in the interim, and end up making the same old mistakes.</p>

View File

@ -13,7 +13,7 @@
<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, very swish), 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 &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 problem handily for me, on my machine. But what about other people&amp;rsquo;s machines? I need to cache-bust.&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&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>
</item> </item>
<item> <item>
<title>Permissions Strike Again</title> <title>Permissions Strike Again</title>

View File

@ -16,7 +16,7 @@
</head> </head>
<body> <body>
<header> <header>
<a href="http://localhost:1313"><h1>CODING WITH ANDRZEJ</h1></a> <a href=http://localhost:1313/><h1>CODING WITH ANDRZEJ</h1></a>
<nav> <nav>
<ul> <ul>
@ -36,16 +36,19 @@
</header> </header>
<main> <main>
<h1>Hard Problem? Invalidating the browser cache</h1>
<h1>Hard Problem? 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, very swish), 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 <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&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>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 problem handily for me, on my machine. But what about other people&rsquo;s machines? I need to cache-bust.</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, and understand at a deep level.</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 (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>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 the HTML getting cached by by adding the following meta tag, in this case to <code>index.html</code>.</p>

View File

@ -16,7 +16,7 @@
</head> </head>
<body> <body>
<header> <header>
<a href="http://localhost:1313"><h1>CODING WITH ANDRZEJ</h1></a> <a href=http://localhost:1313/><h1>CODING WITH ANDRZEJ</h1></a>
<nav> <nav>
<ul> <ul>
@ -36,12 +36,15 @@
</header> </header>
<main> <main>
<h1>Permissions Strike Again</h1> <h1>Permissions Strike Again</h1>
<time datetime="2024-11-13T11:53:13&#43;01:00">November 13, 2024</time> <time datetime="2024-11-13T11:53:13&#43;01:00">November 13, 2024</time>
<p>Configuring Apache really isn&rsquo;t rocket science. There are a wealth of great tutorials online, the documentation is very well documented, and the defaults work more or less out of the box. But it&rsquo;s one of those jobs that I do just infrequently enough that I always forget things in the interim, and end up making the same old mistakes.</p> <p>Configuring Apache really isn&rsquo;t rocket science. There are a wealth of great tutorials online, the documentation is very well documented, and the defaults work more or less out of the box. But it&rsquo;s one of those jobs that I do just infrequently enough that I always forget things in the interim, and end up making the same old mistakes.</p>
<p><em><strong>And it almost always has to do with permissions.</strong></em></p> <p><em><strong>And it almost always has to do with permissions.</strong></em></p>
<p>So, I&rsquo;m writing this post both as a means of christening this devlog (<a href="https://demos.ajstepien.xyz">Hi! I&rsquo;m Andrzej! Hire me!</a>) and also as a reminder to myself that <em>the home folder is not executable by default.</em></p> <p>So, I&rsquo;m writing this post both as a means of christening this devlog (<a href="https://demos.ajstepien.xyz">Hi! I&rsquo;m Andrzej! Hire me!</a>) and also as a reminder to myself that <em>the home folder is not executable by default.</em></p>

View File

@ -16,7 +16,7 @@
</head> </head>
<body> <body>
<header> <header>
<a href="http://localhost:1313"><h1>CODING WITH ANDRZEJ</h1></a> <a href=http://localhost:1313/><h1>CODING WITH ANDRZEJ</h1></a>
<nav> <nav>
<ul> <ul>
@ -36,12 +36,15 @@
</header> </header>
<main> <main>
<h1>Post 1</h1> <h1>Post 1</h1>
<time datetime="2023-01-15T09:00:00-07:00">January 15, 2023</time> <time datetime="2023-01-15T09:00:00-07:00">January 15, 2023</time>
<p>Tempor proident minim aliquip reprehenderit dolor et ad anim Lorem duis sint eiusmod. Labore ut ea duis dolor. Incididunt consectetur proident qui occaecat incididunt do nisi Lorem. Tempor do laborum elit laboris excepteur eiusmod do. Eiusmod nisi excepteur ut amet pariatur adipisicing Lorem.</p> <p>Tempor proident minim aliquip reprehenderit dolor et ad anim Lorem duis sint eiusmod. Labore ut ea duis dolor. Incididunt consectetur proident qui occaecat incididunt do nisi Lorem. Tempor do laborum elit laboris excepteur eiusmod do. Eiusmod nisi excepteur ut amet pariatur adipisicing Lorem.</p>
<p>Occaecat nulla excepteur dolore excepteur duis eiusmod ullamco officia anim in voluptate ea occaecat officia. Cillum sint esse velit ea officia minim fugiat. Elit ea esse id aliquip pariatur cupidatat id duis minim incididunt ea ea. Anim ut duis sunt nisi. Culpa cillum sit voluptate voluptate eiusmod dolor. Enim nisi Lorem ipsum irure est excepteur voluptate eu in enim nisi. Nostrud ipsum Lorem anim sint labore consequat do.</p> <p>Occaecat nulla excepteur dolore excepteur duis eiusmod ullamco officia anim in voluptate ea occaecat officia. Cillum sint esse velit ea officia minim fugiat. Elit ea esse id aliquip pariatur cupidatat id duis minim incididunt ea ea. Anim ut duis sunt nisi. Culpa cillum sit voluptate voluptate eiusmod dolor. Enim nisi Lorem ipsum irure est excepteur voluptate eu in enim nisi. Nostrud ipsum Lorem anim sint labore consequat do.</p>

View File

@ -16,7 +16,7 @@
</head> </head>
<body> <body>
<header> <header>
<a href="http://localhost:1313"><h1>CODING WITH ANDRZEJ</h1></a> <a href=http://localhost:1313/><h1>CODING WITH ANDRZEJ</h1></a>
<nav> <nav>
<ul> <ul>
@ -36,12 +36,15 @@
</header> </header>
<main> <main>
<h1>Post 2</h1> <h1>Post 2</h1>
<time datetime="2023-02-15T10:00:00-07:00">February 15, 2023</time> <time datetime="2023-02-15T10:00:00-07:00">February 15, 2023</time>
<p>Anim eiusmod irure incididunt sint cupidatat. Incididunt irure irure irure nisi ipsum do ut quis fugiat consectetur proident cupidatat incididunt cillum. Dolore voluptate occaecat qui mollit laborum ullamco et. Ipsum laboris officia anim laboris culpa eiusmod ex magna ex cupidatat anim ipsum aute. Mollit aliquip occaecat qui sunt velit ut cupidatat reprehenderit enim sunt laborum. Velit veniam in officia nulla adipisicing ut duis officia.</p> <p>Anim eiusmod irure incididunt sint cupidatat. Incididunt irure irure irure nisi ipsum do ut quis fugiat consectetur proident cupidatat incididunt cillum. Dolore voluptate occaecat qui mollit laborum ullamco et. Ipsum laboris officia anim laboris culpa eiusmod ex magna ex cupidatat anim ipsum aute. Mollit aliquip occaecat qui sunt velit ut cupidatat reprehenderit enim sunt laborum. Velit veniam in officia nulla adipisicing ut duis officia.</p>
<p>Exercitation voluptate irure in irure tempor mollit Lorem nostrud ad officia. Velit id fugiat occaecat do tempor. Sit officia Lorem aliquip eu deserunt consectetur. Aute proident deserunt in nulla aliquip dolore ipsum Lorem ut cupidatat consectetur sit sint laborum. Esse cupidatat sit sint sunt tempor exercitation deserunt. Labore dolor duis laborum est do nisi ut veniam dolor et nostrud nostrud.</p> <p>Exercitation voluptate irure in irure tempor mollit Lorem nostrud ad officia. Velit id fugiat occaecat do tempor. Sit officia Lorem aliquip eu deserunt consectetur. Aute proident deserunt in nulla aliquip dolore ipsum Lorem ut cupidatat consectetur sit sint laborum. Esse cupidatat sit sint sunt tempor exercitation deserunt. Labore dolor duis laborum est do nisi ut veniam dolor et nostrud nostrud.</p>

View File

@ -16,7 +16,7 @@
</head> </head>
<body> <body>
<header> <header>
<a href="http://localhost:1313"><h1>CODING WITH ANDRZEJ</h1></a> <a href=http://localhost:1313/><h1>CODING WITH ANDRZEJ</h1></a>
<nav> <nav>
<ul> <ul>
@ -36,12 +36,15 @@
</header> </header>
<main> <main>
<h1>Post 3</h1> <h1>Post 3</h1>
<time datetime="2023-03-15T11:00:00-07:00">March 15, 2023</time> <time datetime="2023-03-15T11:00:00-07:00">March 15, 2023</time>
<p>Occaecat aliqua consequat laborum ut ex aute aliqua culpa quis irure esse magna dolore quis. Proident fugiat labore eu laboris officia Lorem enim. Ipsum occaecat cillum ut tempor id sint aliqua incididunt nisi incididunt reprehenderit. Voluptate ad minim sint est aute aliquip esse occaecat tempor officia qui sunt. Aute ex ipsum id ut in est velit est laborum incididunt. Aliqua qui id do esse sunt eiusmod id deserunt eu nostrud aute sit ipsum. Deserunt esse cillum Lorem non magna adipisicing mollit amet consequat.</p> <p>Occaecat aliqua consequat laborum ut ex aute aliqua culpa quis irure esse magna dolore quis. Proident fugiat labore eu laboris officia Lorem enim. Ipsum occaecat cillum ut tempor id sint aliqua incididunt nisi incididunt reprehenderit. Voluptate ad minim sint est aute aliquip esse occaecat tempor officia qui sunt. Aute ex ipsum id ut in est velit est laborum incididunt. Aliqua qui id do esse sunt eiusmod id deserunt eu nostrud aute sit ipsum. Deserunt esse cillum Lorem non magna adipisicing mollit amet consequat.</p>
<p><img src="bryce-canyon.jpg" alt="Bryce Canyon National Park"></p> <p><img src="bryce-canyon.jpg" alt="Bryce Canyon National Park"></p>
<p>Sit excepteur do velit veniam mollit in nostrud laboris incididunt ea. Amet eu cillum ut reprehenderit culpa aliquip labore laborum amet sit sit duis. Laborum id proident nostrud dolore laborum reprehenderit quis mollit nulla amet veniam officia id id. Aliquip in deserunt qui magna duis qui pariatur officia sunt deserunt.</p> <p>Sit excepteur do velit veniam mollit in nostrud laboris incididunt ea. Amet eu cillum ut reprehenderit culpa aliquip labore laborum amet sit sit duis. Laborum id proident nostrud dolore laborum reprehenderit quis mollit nulla amet veniam officia id id. Aliquip in deserunt qui magna duis qui pariatur officia sunt deserunt.</p>

View File

@ -1,3 +1,6 @@
/* TODO: add defaults.css to project */
:root { :root {
/* Rosé Pine Dawn */ /* Rosé Pine Dawn */
--rp-base: hsl(32deg, 57%, 95%); --rp-base: hsl(32deg, 57%, 95%);
@ -60,8 +63,20 @@ body {
color: var(--rp-text); color: var(--rp-text);
font-family: sans-serif; font-family: sans-serif;
line-height: 1.5; line-height: 1.5;
margin: 1rem; width: 100vw;
max-width: 768px; display: flex;
flex-direction: column;
justify-content: start;
align-items: center;
}
header {
align-self: flex-start;
width: 100vw;
}
main {
max-width: 800px;
} }
strong { strong {

View File

@ -1,10 +1,13 @@
{{ define "main" }} {{ define "main" }}
<h1>{{ .Title }}</h1>
<h1>{{ .Title }}</h1>
{{ $dateMachine := .Date | time.Format "2006-01-02T15:04:05-07:00" }} {{ $dateMachine := .Date | time.Format "2006-01-02T15:04:05-07:00" }}
{{ $dateHuman := .Date | time.Format ":date_long" }} {{ $dateHuman := .Date | time.Format ":date_long" }}
<time datetime="{{ $dateMachine }}">{{ $dateHuman }}</time> <time datetime="{{ $dateMachine }}">{{ $dateHuman }}</time>
{{ .Content }} {{ .Content }}
{{ partial "terms.html" (dict "taxonomy" "tags" "page" .) }} {{ partial "terms.html" (dict "taxonomy" "tags" "page" .) }}
{{ end }} {{ end }}