Fix: a lot #72

content/emails-olavea/2021/12/21-data-model/index.md

@@ -0,0 +1,111 @@
+---
+title: Create data relationship between TAGS and Lillian's photos of projects
+---
+
+## My Skill Building Session:
+
+![data-relationships](./data-relationships-1-w51-2021.png)
+
+## What did I do?
+
+Create data relationship between TAGS and Lillian's photos of projects.
+
+## Why did I do it?
+
+To make it easier for Lillian to ship her projects to friends.
+
+## How did I do it?
+
+**The Plan**
+
+S - See: `toppings` are not on `pizzas` in GraphQL  
+A - Array: Add `array` to pizza.js in Sanity
+
+N - Nodes: `toppings` are now on `pizzas` in GraphQL
+
+Look at these steps later:
+
+I - Into my webapp with GraphQL
+
+T - Treasure: TBD  
+Y - Yeah: Toppings can be linked in my web app after copy-pasting some Wes Bos wizardry.
+
+## The Steps
+
+### S - See: `toppings` are not on `pizzas` in GraphQL or in GraphiQL
+
+```js
+// ToppingsFilter.js
+// How do I get a list of all the pizzas with their toppings?
+const { pizzas } = useStaticQuery(graphql`
+  query {
+    pizzas: allSanityPizza {
+      nodes {
+        // 👁️ Look no "toppings" here 👀
+        id
+      }
+      slug {
+        current
+      }
+    }
+  }
+}`);
+```
+
+### A - Array: Add `array` to pizza.js in Sanity
+
+I added this code to my pizza.js. in Sanity
+
+```js
+// schemas/pizza.js
+  {
+    name: 'toppings',
+    title: 'Toppings and Tools and Tags of Pirate Princess Lillian (6 🏴‍☠️👸)',
+    type: 'array',
+    of: [{ type: 'reference', to: [{ type: 'topping' }] }],
+  }
+```
+
+### N - Nodes: `toppings` are now on `pizzas` in GraphQL
+
+I looked in my GraphiQL and copy-pasted the new query into ToppingsFilter.js
+
+```js
+// Rubys-TimeShip/src/components/ToppingsFilter.js
+// This is how do I get a list of all the Pizzas with their toppings!
+const { pizzas } = useStaticQuery(graphql`
+  query {
+    pizzas: allSanityPizza {
+      nodes {
+        toppings {
+          name
+          id
+        }
+        slug {
+          current
+        }
+        id
+      }
+    }
+  }
+`);
+```
+
+And that's enough steps for this week!
+
+Pirate Princess Lillian joined me at the beginning of Sunday's [skill building session on youtube](https://youtu.be/ix_0vrwQnWk).
+
+If you would like to see how the web app will look in the end [jump to the 20 minute mark](https://youtu.be/ix_0vrwQnWk?t=1200).
+
+💪😺👍  
+Keep your skill-building-submarine afloat this week!  
+⛵🔧🏴‍☠️
+
+   
+Cap'n Ola Vea
+
+   
+**PS:** If you feel like doing me a favour give me a smiley emoji comment to feed my youtube algo some vitamins.
+
+- [The web app I am working on](https://timeship1.gatsbyjs.io/pizzas/)
+- [Direct link to the 20 minute mark in Sunday's OlaCast on YouTube](https://youtu.be/ix_0vrwQnWk?t=1200)

content/emails-olavea/2022/01/04-tag-pages/index.md

@@ -0,0 +1,30 @@
+---
+title: Programatically create pages for tags from Sanity.io
+---
+
+## My Sunday Skill Builder Session:
+
+![tags-on-a-pink-card](tags-on-a-pink-card-from-twitter-smaller.png)
+
+## What did I do?
+
+I followed the "red string" of one tag from the front end of the web app and all the way back to my backend in sanity.io.
+
+## Why did I do it?
+
+I want to use tags in a way that make it easier for Lillian (7 🏴‍☠️👸) to finish her projects by shipping them to the internet — and then archiving her projects on my labyrinthine loft because it is good for skill-building to finish projects.
+
+## How did I do it?
+
+See this two-minute summary where I followed the "red string" of one tag from the frontend of the web app and all the way back to my backend in sanity.io.
+
+[Ola follows the "red string" near the end of 🏴‍☠️ OlaCast: Sunday Skill Builder Session](https://youtu.be/ix_0vrwQnWk?t=1200)
+
+If you feel like doing me a favor, you can give me a 🏴‍☠️ emoji comment to feed my youtube algos some vitamins.
+
+💪😺👍  
+Keep your skill-building-submarine afloat this week!  
+🔧⛵🏴‍☠️
+
+   
+Cap'n Ola Vea

content/emails-olavea/2022/01/12-minimal-doable-task/index.md

@@ -0,0 +1,32 @@
+---
+title: Minimal-doable-task
+---
+
+## My Sunday Skill Builder Session:
+
+I made a minimal-doable-task 🧚‍♀️
+
+![Now I have a Taskerbell-Task](./skill-builder-w2-2022-ship-it.png)
+
+## What did I do?
+
+I deconstructed a task into a minimal-doable-task
+
+## Why did I do it?
+
+I wanted my task to be tiny, so that I could automate it in my skull, by doing it again and again. Automating it in my skull is skill building.
+
+## How did I do it?
+
+I wrote down the two smallest tasks i did this week. I picked the smallest task, cut it in half. I picked one half. I cut my half-task in 3. Now I have a Taskerbell-Task.
+
+   
+💪😺👍  
+Keep your skill-building-submarine afloat this week!  
+⛵🔧🏴‍☠️
+
+   
+Cap'n Ola Vea
+
+   
+**PS:** Sunday's #OlaCast is rescheduled for 11:30 CET where you get to see my [minimal-doable-task in action](https://youtu.be/4fQj3YNKYoQ).

content/emails-olavea/2022/01/18-free-focus/index.md

@@ -0,0 +1,64 @@
+---
+title: How did I free up my mind to focus on ONE coding step at the time? While live coding, late at night.
+---
+
+## My Sunday Skill Builder Sessions:
+
+This Sunday, I did 2 live Skill-Builder-Sessions, and the second was terrible! 🙀
+
+I knew it when waking up, so I prepared. I needed to prepare to keep myself un-distracted even when tired.
+
+My daily morning Skill-Builder-Session went well because my mind is fresh, alone, and un-distracted up in my labyrinthine loft. Just my code, my coffee, and I.
+
+But my second Skill-Builder-Session would be worse because live coding is distracting. You know, making sure video and audio are ok. And comments, putting them on screen, reading them out loud, removing them from the screen. And then my own talking, getting carried away into a story, for example. Distracting. But smooth sailing compared to later, in the dark and stormy night.
+
+However, the terrible third session would find me physically and mentally tired for four reasons.
+
+1. 08:00 PM is LATE for me. Most normal days, I am literally in bed reading a book about heroes in ancient Greece.
+
+2. No coffee. For many hours.
+
+3. I would have come straight up from a great-tasting but rich fish dinner cooked by the Queen herself.
+
+4. Before the dinner, I would have come straight in from bicycling Lillian (7 🏴‍☠️👸) to the wintry woods. Bicycling around after the skiing Pirate Princess between the ski tracks under snow-laden branches and bicycling back home on icy and car-filled roads. Lovely, but tiring.
+
+So I knew I'd be tired and distracted. How did I prepare to free up my mind to focus on only one coding step at the time?
+
+![focus](skill-builder-w3-2022.png)
+
+## What did I do?
+
+I used an acronym to name the steps of my task. I wrote «iACTiONS» on paper.
+
+## Why did I do it?
+
+Looking over at «iACTiONS» freed up my mind to focus on doing each step. Like i. id.
+
+## How did I do it?
+
+I wrote down the «iACTiONS» on paper like this:
+
+i. id
+A. actions
+C. contentDigest
+T. type
+i. internal: {
+O. (OLA_TUBE_ID)
+N. node
+S. singing
+
+Every time I got distracted, I could take a quick look at my paper. But because I KNEW my paper was there, I relaxed and stayed focused enough to remember that I was on «T. type» and get back to coding. I remember this happening several times 💪😺.
+
+   
+💪😺👍  
+Keep your skill-building-ship afloat this week!  
+⛵🔧🏴‍☠️
+
+   
+Ola Vea  
+Cap'n of his own skill-builder-ship
+
+   
+**PS:** Here is the video of my late-night live Skill-Builder-Session [starting at 5 minutes](https://youtu.be/_ZLxiOfhIi8?t=329) when I start coding from «i. id» If you watch for 1 minute, you will see gorgeous Giggles-the-pug in the video of the id I am using. Giggles is one of Sid's two dogs. Sid, formerly at Gatsby, now at Cloudflare.
+
+**PPS:** You can find my cheat sheet for the live coding [this GitHub issue] (https://github.com/olavea/Rubys-TimeShip/issues/8).

content/emails-olavea/2022/01/25-wrong/index.md

@@ -0,0 +1,30 @@
+---
+title: This Sunday's Skill-Builder-Session went WRONG!
+---
+
+![wrong](OlaCast-14-POW-Day-1-WRONG-26.jpeg)
+
+## My Sunday Skill Builder Session:
+
+This Sunday, I was only supposed to prepare 1 node and get data later. What went wrong?
+
+## What did I do?
+
+I prepared 1 node.
+
+## Why did I do it?
+
+I did just a tiiiny task again. So that I automate it in my brain. (That rhymes, when I say it at least... 💪😺)
+
+## How did I do it (WRONG)?
+
+I kept on coding further. For 2 more hours! Live on youtube. What was I thinking?
+
+   
+💪😺👍  
+Keep your skill-building-ship afloat this week!  
+⛵🔧🏴‍☠️
+
+   
+Ola Vea  
+Cap'n of his own skill-builder-ship

content/emails-olavea/2022/01/31-image-file/index.md

@@ -0,0 +1,55 @@
+---
+title: I created an image file with createRemoteFileNode
+---
+
+![imageFile](imageFile-1.jpeg)
+
+## My Sunday Skill Builder Session:
+
+This Sunday, I created an image file with createRemoteFileNode
+
+## What did I do?
+
+I created an image file to use inside my node
+
+## Why did I do it?
+
+I wanted to use some Gatsby Image trickery on the thumbnail in our youtube data 💪😺. Therefore I downloaded the thumbnail into my data layer. At least, that is how I see it.
+
+## How did I do it?
+
+The short version:
+
+```js
+// POW!-website plugins / local - source - youtube / gatsby - node.js;
+const { createRemoteFileNode } = require("gatsby-source-filesystem");
+
+const youTubeNodeId = createNodeId(`you-tube-${id}`);
+
+const imageFile = await createRemoteFileNode({
+  url: embedData.thumbnail_url,
+  parentNodeId: youTubeNodeId,
+  getCache,
+  createNode,
+  createNodeId,
+});
+```
+
+And then, I use my image file inside my node like this.
+
+```js
+createNode({
+  thumnail___NODE: imageFile.id,
+});
+```
+
+For the longer version, watch [Sunday's OlaCast on YouTube](https://youtu.be/LQ2DRJbG8FY)
+
+   
+💪😺👍  
+Keep your skill-building-ship afloat this week!  
+⛵🔧🏴‍☠️
+
+   
+Ola Vea  
+Cap'n of his own skill-builder-ship

content/emails-olavea/2022/02/08-markdown-slug/index.md

@@ -0,0 +1,71 @@
+---
+title: Ola adds a slug field to his homemade markdown node
+---
+
+## My Sunday Skill Builder Session:
+
+This Sunday, I added a slug field to my homemade markdown node 🐛
+
+## What did I do?
+
+I added a slug field to my homemade markdown node with createNodeField from the onCreateNode hook.
+
+## Why did I do it?
+
+I need that slug to add support for a basic content section to create Markdown marketing pages with sections for Queen @raae's usepow.app.
+
+## How did I do it?
+
+Short version:
+
+```js
+// POW!-website / gatsby - node.js;
+async function slugifyMarkdownRemarkNode({ actions, node, getNode }) {
+  const { createNodeField } = actions;
+  if (node.internal.type === "MarkdownRemark") {
+    const slug = createFilePath({ node, getNode });
+    createNodeField({
+      name: "slug",
+      node,
+      value: slug,
+    });
+  }
+}
+
+exports.onCreateNode = async (gatsbyUtils) => {
+  await Promise.all([slugifyMarkdownRemarkNode(gatsbyUtils)]);
+};
+```
+
+Cheat Sheet:
+
+```js
+// POW!-site/gatsby-node.js
+async function slugifyMarkdownRemarkNode({ actions, node, getNode }) {
+  // 🔨💰🍓
+  con
+  // my md type of node ... internal
+  if ( ) {
+    // 🐛 = 🔨 + 📁 + 🎢 ({ node, getNode })
+  con
+    // 🔨💰🍓 ({ 🐛, 💰, 🐛 })
+    cre
+      na
+      no
+      va
+    })
+  }
+};
+```
+
+If you can guess what one of the emojis mean, reply to this email 😺👍
+
+Long version: [Sunday's OlaCast on YouTube](https://youtu.be/otRx6U5zASw)
+
+   
+💪😺👍  
+Keep your skill-builder-ship afloat this week!  
+⛵🔧🏴‍☠️
+
+Ola Vea  
+Cap'n of his own skill-builder-ship