Started CSS Sparks

components/Header.tsx

@@ -2,10 +2,11 @@ import { site } from "../data/site.ts";
 
 export function Header() {
   return (
-    <header class="px-3 py-3 bg-yellow-200 h-16 flex items-center">
+    <header class="px-3 py-3 bg-[#84ea9a] h-16 flex items-center">
       <div class="px-4 max-w-screen-md">
         <a href="/" class="text-2xl font-bold hover:text-underline">
-          {site.title}
+        <span class = 'text-[#ffdc17] font-outline-2'>JS</span>
+          <span class = 'text-[#e04d6e] font-outline-2'>Less</span>
         </a>
       </div>
     </header>

components/HomeHeader.tsx

@@ -4,11 +4,12 @@ import { site } from "../data/site.ts";
 export function HomeHeader() {
   return (
     <header
-      class="bg-yellow-200 relative min-h-[30vh]"
+      class="bg-[#84ea9a] relative min-h-[30vh]"
     >
       <Container>
-        <h1 class="text-4xl lg:text-8xl font-bold absolute bottom-6 flex items-center">
-          {site.title}
+        <h1 class="Header text-4xl lg:text-8xl font-bold absolute bottom-6 flex items-center">
+          <span class = 'text-[#ffdc17] font-outline'>JS</span>
+          <span class = 'text-[#e04d6e] font-outline'>Less</span>
         </h1>
       </Container>
     </header>

data/posts/CSS-Event-Listeners-Sparks.md

@@ -0,0 +1,70 @@
+---
+title: CSS Event Listeners - Sparks
+published_at: 2024-02-20
+updated_at: 2024-02-20
+---
+
+
+## TLDR
+
+Using CSS resources loading behavior to observe user interactions.
+
+<br>
+
+## Concept
+
+CSS properties that specify some resource like a background  
+image are requested only when their css block is active.
+
+```css
+/* The image is only requested when you hover over the element */
+
+.Element:hover {
+    background-image : url('/Asset/Image.png') ;
+}
+```
+
+Of course we don't actually need to use a real image, instead we can  
+specify a custom endpoint that only returns a success status code.
+
+```css
+.Element:hover {
+    background-image : url('/API/OnHover') ;
+}
+```
+
+*Now we know when someone hovers over the element.*
+
+<br>
+
+## Cache Busting
+
+This method however only works once, the second time  
+you hover of the element, the request won't be send again.
+
+The most reliable method to counteract this is to make the url  
+unique on every hover via either a different path or parameter. 
+
+```css
+/* Uses the response timestamp as uniqueness factor */
+
+.Element:hover {
+    background-image : url('/API/OnHover/1708403536337')
+}
+```
+
+<br>
+
+## Complementary Events
+
+With our current setup we are actually spamming our server with  
+requests as when you hover the element, new rule with a unique  
+path is added and active right away, prompting another request.
+
+To stop this cyclic hell and to get more use out of the  
+technique we should consider the complementary event,  
+in this case the user stopping to hover over the element.
+
+
+
+<!----------------------------------------------------------------------------->

data/site.ts

@@ -1,5 +1,4 @@
 export const site = {
-  title: 'JSLess Blog',
   description: 'Interactivity without JavaScript',
   // This should be a url to the static file you're using for your open graph image
   ogImage: 'https://fresh-blog.littlesticks.dev/og-image.png',

routes/blog/[slug].tsx

@@ -40,7 +40,7 @@ export default function PostPage(props: PageProps<Data>) {
           </time>
               </span>
 
-          { ( post.updatedAt !== post.publishedAt ) && <>
+          { ( post.updatedAt.getMilliseconds() !== post.publishedAt.getMilliseconds() ) && <>
 
               <span>
               <b>Updated : </b>

static/styles.css

@@ -1,3 +1,17 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+@layer base {
+    .font-outline {
+      -webkit-text-stroke: 3px white;
+    }.font-outline-2 {
+      -webkit-text-stroke: 1.2px white;
+    }
+  }
+
+
+.Header {
+    inset-inline : 0 ;
+    justify-content : center ;
+}

tailwind.config.ts

@@ -10,7 +10,7 @@ export default {
   setup: {
     theme: {
       colors: {
-        yellow: colors.yellow,
+        yellow: '#84ea9a',
         transparent: 'transparent',
       },
     },