newWindow storage

posts/2023-11-26-posts.md

@@ -1,6 +1,6 @@
 ---
 title: Sour Cream
-description: Today I learned that a website using Drupal as a CMS is almost twice as likely to have a good web vitals score than one using the most popular headless systems.
+description: Today I learned that sour cream has a bad name because there are only very minor differences between sour cream and crème fraîche.
 slug: sour-cream
 <!--- authors:
   - name: David Windham
@@ -18,6 +18,7 @@ Today I learned that sour cream has a bad name because there are only very minor
 
 It’d do better if it was marketed as Cream Fresh©. Both are made in the same way. Allowing a raw heavy cream to ripen at warm temperatures (70° - 90°) will allow bacteria to convert lactose ( milk sugar ) into lactic acid, thickening the cream and adding a sour tang. The texture and flavor mostly depend on the cream, temperature, and the length of fermentation. Making it is pretty simple:
 
+:::note[Recipe]
 - Combine in a jar:
 - 1 cup of heavy cream ( whipping > 35% fat  )
 - .5-1 cup of milk ( organic whole )
@@ -27,6 +28,7 @@ It’d do better if it was marketed as Cream Fresh©. Both are made in the same
 - Remove the lid, cover with cheesecloth or paper towel, and rubber band.
 - Leave out for 12-48 hrs @ 72°- 78°
 - Refrigerate for 12 hrs
+:::
 
 I like sour cream with my burritos and on my omelets. The better half likes to use it when baking muffins and cakes. It’s good in cold soups like cucumber or asparagus, on top of gazpacho, or with caviar.  There are hundreds of names for it, but I don’t think Sour works well. At least it’s not called Smântână as it is in some parts of Eastern Europe<sub>3</sub>. If you let it ferment long enough, you’ll end up with clabber<sub>4</sub>, which was commonly eaten in the rural southeast prior to refrigeration. I’d previously never heard the term, but it explains the Clabber Girl brand of baking powder. 
 

posts/2023-11-27-posts.md

@@ -0,0 +1,68 @@
+---
+title: newWindow storage
+description: Today I learned that you can use LocalStorage across multiple windows.
+slug: newwindow-storage
+<!--- authors:
+  - name: David Windham
+    title: Something Else
+    url: https://davidawindham.com
+    image_url: https://davidawindham.com/wp-content/themes/daw/img/opengraph_image.jpg -->
+tags: [js, webgl, threejs]
+image: https://davidawindham.com/wp-content/themes/daw/img/opengraph_image.jpg
+hide_table_of_contents: true
+---
+
+Today I learned that you can use LocalStorage across multiple windows.
+
+<!--truncate-->
+
+<video src="https://davidawindham.com/media/localstorage-3js.mp4" width="100%" controls="controls">
+</video>
+<video src="https://davidawindham.com/media/newWindow-3js.mp4" width="100%" controls="controls">
+</video>
+
+<div style={{display: 'flex',  justifyContent:'center', alignItems:'center', fontSize:'small', marginBottom:'20px'}}>☝🏼 top video by Bjørn Staal <sub>1</sub></div>
+
+I could imagine a use case like some authentication and/or confirmation windows that open could have a subtle graphic reference to the origin window. Otherwise it's just fun and that's why I like it. Here's some example code from [the repo](https://github.com/bgstaal/multipleWindow3dScene):
+
+```js
+constructor ()
+{
+  let that = this;
+
+  // event listener for when localStorage is changed from another window
+  addEventListener("storage", (event) => 
+  {
+    if (event.key == "windows")
+    {
+      let newWindows = JSON.parse(event.newValue);
+      let winChange = that.#didWindowsChange(that.#windows, newWindows);
+
+      that.#windows = newWindows;
+
+      if (winChange)
+      {
+      if (that.#winChangeCallback) that.#winChangeCallback();
+      }
+    }
+  });
+
+  // event listener for when current window is about to be closed
+  window.addEventListener('beforeunload', function (e) 
+  {
+    let index = that.getWindowIndexFromId(that.#id);
+
+  //remove this window from the list and update local storage
+    that.#windows.splice(index, 1);
+    that.updateWindowsLocalStorage();
+  });
+}
+  ```
+
+I found some other examples floating around out there too<sub>3</sub>.
+
+---
+
+1. Bjørn Gunnar Staal - X - https://twitter.com/_nonfigurativ_/status/1722543833408286927
+2. Bjørn Gunnar Staal - Github - https://github.com/bgstaal
+3. Momcilo Popov - Fun with Sockets - https://github.com/Momciloo/fun-with-sockets

src/pages/index.md

@@ -6,6 +6,7 @@ description: A place to keep notes and documentation
 # Today I Learned
 
 - **2023**
+  - 23/11/27 - [newWindow Storage](/posts/newwindow-storage)
   - 23/11/26 - [Sour Cream](/posts/sour-cream)
   - 23/11/13 - [Headless](/posts/headless)
   - 23/11/12 - [Docusaurus v3.0.0](/posts/docusaurus-3)