Posts from Cap'n Ola

⛵ 🔧 ~ Testing Galleon attributes with Carrd

Fri, 18 Apr 2025 00:00:00 GMT

I tested our own docs for Galleon attributes on our Queen Raae's github

I Added the Script to the `<head>` in my Carrd website

I clicked "+ Add Element"
I clicked "</> Embed" to create a new Embed element
I Set Type to Code
I Copy / Pasted in <script async src="https://cdn.jsdelivr.net/npm/@raae/galleon-attributes@1/dist/script.js"></script>
I Set the Style to "Hidden" and then "Head" for my website's <head> element

I used these Excellent Carrd docs

I Tested Galleon Attributes

Step 1. I added a container element to hold the data

I clicked "+ Add Element"
I clicked "Container" to create a new Container element
I Added the attribute gl-get=https://galleon.tools/v1/queen

Step 2. I added a text element inside my container element

I clicked "+ Add Element"
I clicked "Text" to create a new Text element
I Added the attribute gl-bind=name

Step 3. I added an Image element inside my container element

I clicked "+ Add Element"
I clicked "Image" to create a new Image element
I Added the attribute gl-bind-src=avatar.url
I Added the attribute gl-bind-alt=avatar.alt

Image with No Upload Blocks me from Publishing my Changes

This is where I hit my first rock right under the surface of the sea. I tried to publish my changes, but Carrd said no.

The error message looked like this:

I had to upload an image to make my element finished so I could publish the changes to my website.

Image with placeholder shows the placeholder, not our test image

I looked at my site, an wouldn't you guess it, I'd hit another rock in the sea. I could see the image I had uploaded and NOT the image I was supposed to see, the image from our test api. Onward!

Step 4. I added a Link element inside my container element

I clicked "+ Add Element"
I clicked "Link" to create a new Link element
I Added the attribute gl-iterate=socials
I Added the attribute gl-bind-href=url
I Added the attribute gl-bind=label

My Link doesn't work

Here I hit my third rock. I can see the link, but nothing happens when I try to cllick it. When I "Inspect" my website I see the href with the right link, see below:

Testing Galleon attributes with Carrd

⛵ 🔧 ~ Pirate's pages are weirdly unblocking

Thu, 29 Feb 2024 00:00:00 GMT

Pirate's pages are weirdly unblocking

Recovering my childhood's piraty creativity was a ... dirty knife fight ⚔️. And THAT's why I'm giving you my fav trick. My ace in the hole. I know it's not politically correct anymore, but I'm giving you a gun you can take to your own creativity knife fight

I recovered my childhood's piraty creativity and one tool I used is an age old and peculiar process I call the Pirate's Pages.

I've done my Pirate's Pages since 2021. Queen Raae started YEARS before me. And spent considerable time convincing me to do them.

What are Pirate's Pages?

I sit down in my private pirate place with a cup of dark coffee.
A fat pile of blank A4 papers in front of me and my fav fountain pen in my hand. I start a timer for 22 minutes.
Now I write down EVERYTHING that pops into my head. Literally. For example:

«I slept like dog shaite. Woke up sweaty like a hairy pig, from a bad dream. I was back working on the ship. We were loaded to the gunnels with guests in their summer finery. Toasting tall glasses of champagne. Our skipper was drink as a skunk and not far away I saw the cops coming in their black and white rubber dinghy. We were F***ED.

I guess it's because I'm meeting (redacted) tomorrow. F*******! I can't BELIEVE she can still get to me, after all these years.»

Why do I do Pirate's Pages?

Yeah it's BAD shit, pouring out. And it's REAL. That is the WHY right there, I get the BAD shit OUT with my Pirate's Pages. That makes it easier to get my creative stuff out.

There's no wrong way to do Pirate's Pages

There's no wrong way for me to do my Pirate's Pages. And doing morning pages is not really writing. I'm just dragging my pen across the page. Getting down whatever. As fast as I can. Nothing is too weird, weak, angry, evil, stupid or politically incorrect for my Pirate's Pages. Because nobody is EVER reading my Pirate's Pages. I didn't even read them MYSELF the first handful of weeks.

Really?

I know what your thinking «You call THIS bringing a gun to a knife fight? Give me a BREAK! This isn't even a tool.»

History speaks for itself

Well I'm not overstating it when I say that this tool has worked for hundreds of recovered artists. Maybe even thousands of recovered artists. Artists like Tim Ferriss. This tool is originally called The Morning Pages. Buy the beautiful book The Artist's Way by Julia Cameron and read all about it.

Since this beloved book came out in 1992, it's been praised by artists like Martin Scorsese, John Cleese and Reese Witherspoon.

⛵ 🔧 ~ Didn't you know Jamstack programming used to be illegal? Huh?

Thu, 27 Oct 2022 00:00:00 GMT

Ahoy, skill-builder pirate of Jamstackia!

👋😸🏴‍☠️

We looked into "my Again Logbook 📕" in my last letter, and today I'll start with the backstory of my plugin workbook. It's just a start, and you can start thinking about:

How writing your own backstory could be good for your motivation.

HOW Jamstack programming used to be illegal back in the good old, OLD times

You probably didn't know that, but soon you will.

A long time ago, on a Bridge far, far away ....

Lance-Lotta (13) is programming on her illegal Gatsby plugin.

«What are you DOING!» Shouts Lizabeth.

«I'm sourcing images from this piraty API thingy!» Says Lance-Lotta

«Sourcery!? You KNOW how illegal Jamstack sourcery is under the city's new anti-witchcraft laws.» Says Lizabeth.

«Relax, I'll never get caught» Says Lance-Lotta.

«You'll never get caught?! Like you didn't get caught last week when you "borrowed" Merlina's yellow submarine and crashed it into our bridge? Or like that time you....» Says Lizabeth.

«Oh DO shut up or else.» Says Lance-Lotta.

Yo-Ho-Ho and a bottle of GO! 😺

Your TODO

Write up a sentence about your idea for your backstory and email it to Lillian (7 🏴‍☠️👸) and me, that would help us a lot!

🏴‍☠️😺👍
ARR!

Stay piraty 🏴‍☠️😺👍 and keep practicing!
Cap'n Ola Vea

⛵ 🔧 ~ Could The Again Logbook 📕 help you to do your sub-task again and again?

Wed, 19 Oct 2022 00:00:00 GMT

Ahoy, skill-builder pirate of Jamstackia!

👋😸🏴‍☠️

We looked into "my favorite focus tool to find out when your sub-task practice session is done, the croco-clock 🐊-⏲️" in my last letter. Today I'll show you The Again Logbook 📕.

We'll look at:

What The Again Logbook 📕 is,
Why it can help you to do your sub-task again and again
How you use The Again Logbook 📕

WHAT is The Again Logbook 📕?

The Again Logbook can be a little red notebook. Here is mine; the Queen bought it for me in Greece.

WHY could The Again Logbook 📕 help you to do your sub-task again and again?

Firstly you decide to automate your sub-task into your dev-brain. This is good for your motivation. Your personal value increases with each sub-task you have automated into your dev-brain.

Secondly, by deciding to do your sub-task six times, or whatever you choose, you confirm to yourself your decision to automate your sub-task into your dev-brain.

Thirdly, if you give up before you have done your sub-task six times you loose.

HOW do you use your Again Logbook? 📕

Set your croco-clock 🐊-⏲️ to, for example 96 minutes
Make a row of tiny squares, as many as the repetitions you decided on
Each time you finish your sub-task, turn one tiny square into an "!"
Keep doing your sub-task again and again until your croco-clock 🐊-⏲️ goes ARRR! even past your six times, but keep making a new "!" each time
Because doing them more times than you planned feels like winning

Yo-Ho-Ho and a bottle of GO! 😺

Your TODO

Try it out and send Lillian (7 🏴‍☠️👸) and me a sentence about your Again Logbook 📕 experiments.

🏴‍☠️😺👍
ARR!

Stay piraty 🏴‍☠️😺👍 and keep practicing!
Cap'n Ola Vea

⛵ 🔧 ~ Could a croco-clock 🐊-⏲️ help you to focus like a pirate?

Thu, 13 Oct 2022 00:00:00 GMT

Ahoy, skill-builder pirate of Jamstackia!

In my last letter, we looked into Don't let Distraction Diaz distract you. Today, I'll show you my favorite focus tool to determine when your sub-task practice session is done. It's my great-grandfather Captain Crook's croco clock. 🐊 ⏲️ We'll look at:

What a croco-clock is, Why it can help you focus and How you use it.

WHAT is a croco-clock 🐊 ⏲️ ?

A croco-clock 🐊 can be an egg clock ⏲️ that goes ARRR! when your sub-task practice session is done.

Then you can stop

WHY could a croco-clock 🐊-⏲️ help you to focus like a pirate?

Firstly you decide to automate your sub-task into your dev-brain. This is good for your focus.

Secondly, by starting your croco-clock 🐊-⏲️ you confirm to yourself your decision to automate your sub-task into your dev-brain

Thirdly, the clock is literally ticking, and you know you have this ONE practice session to automate your sub-task into your dev-brain.

HOW do you use your croco-clock 🐊-⏲️ ?

You set your croco-clock 🐊-⏲️ to for example, 96 minutes
And place it in another room, especially if you are using your cellphone
You do your sub-task in exactly the same way again and again
Keep doing your sub-task again and again until your croco-clock 🐊-⏲️ goes ARRR! even past the point, you feel you are already doing your sub-task 96%-reliably
Because you're a practice pirate and this sub-task will be YOUR treasure only when you have it automated into your dev-brain

Yo-Ho-Ho and a bottle of GO! 😺

Your TODO

Write up a sentence about your croco-clock 🐊-⏲️ experiments and email it to Lillian (7 🏴‍☠️👸) and me; that would help us a lot!

🏴‍☠️😺👍
ARR!

Stay piraty 🏴‍☠️😺👍 and keep practicing!
Cap'n Ola Vea

PS: The next letter will be about "The Again Logbook."

⛵ 🔧 ~ Decide to automate your sub-task into your dev-brain

Thu, 29 Sep 2022 00:00:00 GMT

Ahoy, skill-builder pirate of Jamstackia!

👋😺🏴‍☠️

We looked into a can-do-with-effort sub-task in my last letter, and so today, I say:

Decide to automate your sub-task into your dev-brain

WHY: Your distractor enemies are "In It To Win It"

Your distractor enemies are "In It To Win It" and so should you be because you should not underestimate the Distracting Power of your enemies. Who are you up against? You have to find out for yourself who your worst distractor enemies are. But I KNOW one of your dev-brain's enemies is your own personal Distraction Diaz. Every time Distraction Diaz slaps your dev-brain, there's a chance you lose your focus.

Don't let Distraction Diaz take you down until your sub-task practice session is done

During your sub-task practice, session thoughts and feelings will enter your dev-brain uninvited. Here is a technique to help you stay focused.

HOW do you make each distraction leave your dev-brain?

A. When a distraction enters your dev-brain observe it calmly and label it either "thought" or "feeling," and let it go.

B. Go back to practicing your sub-task.

C. You can practice this labeling technique by meditating. That's what I do daily. Check out this 11 minute guided meditation for focus by Headspace if this sounds useful for you. I use a meditation from this focus-pack every day 😺

Example: Git hell distraction anger

This week I've been working on a plugin upgrade for our favorite client, and I ran into a bit of a git hell 😠 I did not let myself be distracted into trying to fix that myself. Instead, I labeled my anger "feeling," then I gave my laptop to The Queen and stayed in the kitchen until she fixed it. Then I went back to practicing my sub-task.

Your TODO

Write up a sentence, or two, about a distraction you labeled in a recent practice session. Or maybe a distraction that made you lose your focus. Or if you tried the labeling technique on a dev-task in your day job, please let us hear about it in an email. That'll do Lillian (7 🏴‍☠️👸) and me a ton of good!

🏴‍☠️😺👍

ARR!

Stay piraty 🏴‍☠️😺👍 and keep practicing!

Cap'n Ola Vea

P.S: The following letter will ask, "When is your sub-task practice session done?"

⛵ 🔧 ~ Ola is doing a can-do-with-effort sub-task

Thu, 15 Sep 2022 00:00:00 GMT

Ahoy, skill-builder pirate of Jamstackia!

We looked into one useless-on-it's-own sub-task in my last letter, and I promised you this letter would be about "How do you know what type of sub-task is right to bite off for your dev-brain?"

To can't-do or NOT can't-do, that is the question.

🗣️ 💀

Answer: a can't-do sub-task is bad for your brain

After years of piraty experimentation on the Pirate Princess, my current conclusion is "a can't-do sub-task is bad for your brain" because it's stealing your focus like a pirate steals loot. So a can-do-with-effort sub-task is better for your focus and thus your dev-brain.

I'll soon tell you WHY a can't-do sub-task is stealing your focus like a pirate, but first: WHAT is a can-do-with-effort sub-task?

WHAT is a can-do-with-effort sub-task?

You sometimes start out with a can't-do sub-task. Then after practicing a little, it becomes a can-do-with-effort sub-task. And Then, after practicing a lot more, you have a can-do-96%-reliably sub-task because you have finally nailed your sub-task into your dev-brain.

Imagine a yellow board with three parts:

a can't-do sub-task
a can-do-with-effort sub-task
a can-do-96%-reliably sub-task

You write your sub-task on a blue sticky note and move it from 1. to 2. and then to 3.

WHY a can't-do sub-task is stealing your focus like a pirate?

Like me, you probably also have many sub-tasks on your can-do-with-effort board. You need one less sub-task on your can-do-with-effort board. Because for each sub-task you have on your can-do-with-effort board, the harder it is for your dev-brain to focus on nailing the sub-task you're practicing in the moment. According to Kathy Sierra's badass book Badass, having too many sub-tasks on her can-do-with-effort board is The Number One thing stealing focus and wrecking the skill-buildership of developers.

HOW do you find your can-do-with-effort sub-task?

A. Look back on a dev-task you did last week

B. Bite off a can-do-with-effort sub-task

Yo-Ho-Ho and a bottle of GO! 😺

Example (Warning: summer workcation tall tales alert! ☀️ 🗣️ 💬 🔈)

Let's look at my slightly off-topic but weirdly handy example from our piraty summer workcation.

A can-do-with-effort sub-task for Lillian (7 🏴‍☠️👸)

Twisting the outboard engine handle:

To go faster forward
To go slower forward

Your TODO

Write up an idea for a sub-task and email it to Lillian (7 🏴‍☠️👸) and me. That would help us a lot! Then bite off a can-do-with-effort sub-task from a dev-task you did last week.

🏴‍☠️😺👍
ARR!

Stay piraty 🏴‍☠️😺👍 and keep practicing!
Cap'n Ola Vea

P.S The following letter will cover "Decide to automate your sub-task into your dev-brain in one practice session."

⛵ 🔧 ~ Ola adds "async and await" to sourceNodes in his piraty plugin

Wed, 07 Sep 2022 00:00:00 GMT

Adding "async and await" to sourceNodes is a sub-task

In my daily gatsby-plugin practice, I ONLY do one sub-task each session. Today's sub-task was:

adding async to exports.sourceNodes = and
await createPiratyNodes(

I'll soon tell you WHY I do a daily sub-task, but first WHAT is a sub-task?

WHAT is a sub-task?

That dev-task YOU did last week? Close your eyes and see your dev-task as a pink donut. Bite off a useless-on-it's-own sub-task. NOW you can chew it. Without choking on it *

HOW do you find your sub-task?

A. Look at a dev-task you did last week

B. Bite off a useless-on-it's-own sub-task

That's all 😺

WHY do I do a daily sub-task?

Because MY dev-brain practice is more piraty on a tiny sub-task than on the whole dev-task.

Here is my code before practice

// gatsby-node.js

const piraty = `source piraty api here`;

const createPiratyNodes = async (gatsbyUtils) => {
  console.log(`create Piraty Nodes here`);
};

// Add async

exports.sourceNodes = (gatsbyUtils) => {
  // Add await

  createPiratyNodes(gatsbyUtils, piraty);
};

After practice

// gatsby-node.js

const piraty = `source piraty api here`;

const createPiratyNodes = async (gatsbyUtils) => {
  console.log(`create Piraty Nodes here`);
};

// Add async

exports.sourceNodes = async (gatsbyUtils) => {
  // Add await

  await createPiratyNodes(gatsbyUtils, piraty);
};

Try out a sub-task on your own dev-brain; it might make your practice more piraty 🏴‍☠️😺👍

ARR!

Cap'n Ola Vea

P.S

The next plugin-pirate letter will cover "How do you know what type of sub-task is right to bite off for your dev-brain?"

* Some people CAN chew a whole donut without choking on it. Don't believe me? Dig up the video with Paul Scanlon winning a donut-eating contest against a Gatsby co-worker. You'll find the video somewhere on Paul's twitter.

Read more about adding async await to sourceNodes in Queen @raae's email Remember to await node creation! ⏳ ⌛️

⛵ 🔧 ~ Take the upgraded Gatsby Cloudinary plugins for a spin

Sat, 09 Jul 2022 00:00:00 GMT

Taking a tiny break from the summer vacay content hiatus to let you know:

The upgraded Gatsby Cloudinary plugins are ready for you!

Take'em for a spin on your website.

Support for gatsby-plugin-image and Gatsby v4 support has landed.

The good news is that you don't need to upgrade to Gatsby v4 because we made'em backward compatible with v3 as well.

How do I get the upgraded Gatsby Cloudinary plugins?

The source plugin has an official new release:

yarn add gatsby-source-cloudinary@latest
npm install gatsby-source-cloudinary@latest

While the transformer plugin is in beta, we would love it if you took it for a spin; it works with both Gatsby v3 and Gatsby v4:

yarn add gatsby-transformer-cloudinary@beta-v4
npm install gatsby-transformer-cloudinary@beta-v4

Suppose you are already using gatsby-transformer-cloudinary with existing data. In that case, you might want to start with gatsby-transformer-cloudinary@beta, which has no breaking changes, but the possibility to migrate to gatsby-plugin-image before doing v4 needed changes.

Backwards compatible plugins

With the gentle guidance of my mentor and senior plugin engineer, I've contributed code and learned a lot. I don't know your favorite learning style, but I am a learning-by-doing kind of junior dev.

I'll share one thing I learned about backward compatibility: the "if-else" statement. That's right! Good old else "if-else" is one thing I used to make gatsby-transformer-cloudinary work with your old Gatsby version. Or work with your new Gatsby version if you've updated it.

This is what I did:

I installed gatsby-plugin-utils:

npm i gatsby-plugin-utils

I followed the Great Gatsby version 4 docs on backward compatible global state: 3. Global state backward compatible

// packages/gatsby-transformer-cloudinary/gatsby-node.js

let coreSupportsOnPluginInit = undefined;

try {
  const { isGatsbyNodeLifecycleSupported } = require(`gatsby-plugin-utils`);

  if (isGatsbyNodeLifecycleSupported(`onPluginInit`)) {
    coreSupportsOnPluginInit = "stable";
  } else if (isGatsbyNodeLifecycleSupported(`unstable_onPluginInit`)) {
    coreSupportsOnPluginInit = "unstable";
  }
} catch (error) {
  console.error(`could not check`);
}

const pluginOptions = getPluginOptions();

const initializaGlobalState = ({ reporter }, pluginOptions) => {
  setPluginOptions({ reporter, pluginOptions });
};

if (coreSupportsOnPluginInit === "stable") {
  exports.onPluginInit = initializeGlobalState;
} else if (coreSupportsOnPluginInit === "stable") {
  exports.unstable_onPluginInit = initializeGlobalState;
} else {
  exports.onPreBootstrap = initializeGlobalState;
}

Join our bug-treasure-hunt

When I say learning-by-doing, I mean doing again and again and again. So if you DO run into a bug, please report it. I'd love to look in on my code again; it's great repetition. 😺

All the best
Cap'n Ola Vea

⛵ 🔧 ~ POW! Password Peek-a-boo

Tue, 15 Mar 2022 00:00:00 GMT

My Sunday Skill Builder Session:

This Sunday, I made Password Peek-a-boo on the login page on our POW!-website. So now we're showing you your password if you poke the eye icon inside the password field. Later we will use that login page on the POW! app

What did I do?

POW! Password Peek-a-boo

Why did I do it?

I like to see my pasSwords when I copy-paste them from 1Password and write them from memory because I am a visual guy. So we want our POW! customers to be able to choose for themselves. And because Queen @raae told me to do it.

How did I do it?

The short version:

made a button with MUI

<IconButton>👁️</IconButton>

added an aria-label and an onClick handler

<IconButton
  aria-label="toggle password visibility"
  onClick={handleClickShowPassword}
>
  👁️
</IconButton>

For the long version of My Sunday Skill Builder Session:, watch Sunday's OlaCast on YouTube

💪😺👍
Keep your skill-building-ship afloat this week!
⛵🔧🏴‍☠️

Ola Vea
Cap'n of his own skill-builder-ship

⛵ 🔧 ~ I found one error while creating pages only for markdown pages, not for markdown sections

Tue, 01 Mar 2022 00:00:00 GMT

My Sunday Skill Builder Session:

This Sunday, I created pages only for markdown pages, not for markdown sections. On our POW!-website.

What did I do?

I created pages with markdown and the createPages hook from @GatsbyJS

Why did I do it?

Because it's tidier than creating a bunch of "bonus" pages with content I already show on my index page. And because Queen Benedicte @raae told me to do it.

How did I do it?

The short version is I started out with my 1.2.3 A.B.C. mnemonic Gingerbread house. And I found one error; see below.

filter ☕ first
bakingSong 🎵 🦢
aromaNode 🍰💰

A. aromaNodePath 🍰.🍓.🐛 B. bakingSong 🎵 🙀 C. catsbyId 😼🆔

What was the error I found?

I forgot to rename allMarkdownRemark to supplies in my graphql query:

// wrong

const { data } = await graphql(`{
      allMarkdownRemark(
        filter: { fileAbsolutePath: { regex: "/index.md/" } }
      ) {}
    }`);

// right

const { data } = await graphql(`{
      supplies: allMarkdownRemark(
        filter: { fileAbsolutePath: { regex: "/index.md/" } }
      ) {}
    }`);

So that when I was going to use my data: data.supplies.nodes.forEach I got an error message, and the pages were not created.

For the long version of My Sunday Skill Builder Session, watch Sunday's OlaCast on YouTube

💪😺👍
Keep your skill-building-ship afloat this week!
⛵🔧🏴‍☠️

Ola Vea
Cap'n of his own skill-builder-ship

⛵ 🔧 ~ Failed at "create pages only for markdown pages, not for markdown sections"

Tue, 22 Feb 2022 00:00:00 GMT

My Sunday Skill Builder Session:

This Sunday, I tried to create pages only for markdown pages, not for markdown sections. On our POW! Website.

What did I do?

I created pages with markdown files and the createPages hook from @GatsbyJS

Why did I do it?

Because it's tidier and because Queen Benedicte @raae told me to do it.

How did I do it?

The short version is I started out with my 1.2.3 A.B.C. mnemonic Gingerbread house.

Supplies: allMarkdownRemark.node
Bakingsong = bakingSong.js
Loop over the supply node and create a page

A. Ahoy! Aroma path!
B. BakingSong is a component
C. Catsby id is context

What went wrong?

I'll get into what went wrong on Thursday at 7 pm CET!

That's right; I'll be live coding alone on our Gatsby Deep-Dives because the Queen and the Pirate Princess are skiing in the mountains. ⛰️⛷️

For the long version of My Sunday Skill Builder Session watch Sunday's OlaCast on YouTube

💪😺👍
Keep your skill-building-ship afloat this week!
⛵🔧🏴‍☠️

Ola Vea
Cap'n of his own skill-builder-ship

⛵ 🔧 ~ I created a Link with markdown on our POW!-website

Tue, 15 Feb 2022 00:00:00 GMT

My Sunday Skill Builder Session:

This Sunday, I created a Link with markdown on our POW!-website.

What did I do?

I created a Link with markdown.

Why did I do it?

I want to use markdown as my Content Management System (CMS) because it's my favorite CMS and Queen Raae told me to use markdown.

How did I do it?

I started out on my L.O.V.E. acronym.

L. Link and path and label
O. Open up in GraphiQL
V. Variable
E. Evol is love backward, no just kidding. I will do «E. Empty» on this Sunday's Skill Builder Session.

L.

Link and path and label

// POW!-website / pages / {MarkdownRemark.fields__slug}.js
<Link to={}>{}</Link>

// POW!-website / content / index / index.md

---
....
    cta:
      path: /signup
      label: Yes to privacy
---
....

O.

Open up in GraphiQL

// POW!-website / pages / {MarkdownRemark.fields__slug}.js
export const query = graphql`
  query ($id: String) {
    markdownRemark(id: { eq: $id }) {
      frontmatter {
        sections {
          cta {
            path
            label
          }
        }
      }
    }
  }
`;

V.

First I make the variable:

// POW!-website / pages / {MarkdownRemark.fields__slug}.js
const { path, label } = section.cta;

Then I use the variable:

<Link to={path}>{label}</Link>

// POW!-website / pages / {MarkdownRemark.fields__slug}.js
import React from "react";
import { graphql, Link } from "gatsby";

const ComponentName = ({ data }) => {
  const { frontmatter, html } = data.markdownRemark;
  const { title, sections } = frontmatter;

  return (
    <>
      <div className="container">
        <h1>{title}</h1>
        <div dangerouslySetInnerHTML={{ __html: html }} />
        {(sections || []).map((section) => {
          const { title } = section;
          const { html } = section.body.childMarkdownRemark || {};
          const { path, label } = section.cta || {};
          return (
            <section>
              <h2>{title}</h2>
              {html && <div dangerouslySetInnerHTML={{ __html: html }} />}
              {path && <Link to={path}>{label}</Link>}
            </section>
          );
        })}
      </div>
    </>
  );
};

export const query = graphql`
  query ($id: String) {
    markdownRemark(id: { eq: $id }) {
      html
      frontmatter {
        title
        sections {
          cta {
            path
            label
          }
          title
          body {
            childMarkdownRemark {
              html
            }
          }
        }
      }
    }
  }
`;

export default ComponentName;

For the long version, watch Sunday's OlaCast on YouTube.

💪😺👍
Keep your skill-builder-ship afloat this week!
⛵🔧🏴‍☠️

Ola Vea
Cap'n of his own skill-builder-ship

⛵ 🔧 ~ Ola adds a slug field to his homemade markdown node

Tue, 08 Feb 2022 00:00:00 GMT

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:

// 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:

// 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

💪😺👍
Keep your skill-builder-ship afloat this week!
⛵🔧🏴‍☠️

Ola Vea
Cap'n of his own skill-builder-ship

⛵ 🔧 ~ I created an image file with createRemoteFileNode

Mon, 31 Jan 2022 00:00:00 GMT

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:

// 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.

createNode({
  thumnail___NODE: imageFile.id,
});

For the longer version, watch Sunday's OlaCast on YouTube

💪😺👍
Keep your skill-building-ship afloat this week!
⛵🔧🏴‍☠️

Ola Vea
Cap'n of his own skill-builder-ship

⛵ 🔧 ~ This Sunday's Skill-Builder-Session went WRONG!

Tue, 25 Jan 2022 00:00:00 GMT

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

⛵ 🔧 ~ How did I free up my mind to focus on ONE coding step at the time? While live coding, late at night.

Tue, 18 Jan 2022 00:00:00 GMT

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.

08:00 PM is LATE for me. Most normal days, I am literally in bed reading a book about heroes in ancient Greece.
No coffee. For many hours.
I would have come straight up from a great-tasting but rich fish dinner cooked by the Queen herself.
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?

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 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).

⛵ 🔧 ~ Minimal-doable-task

Wed, 12 Jan 2022 00:00:00 GMT

My Sunday Skill Builder Session:

I made a minimal-doable-task 🧚‍♀️

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.

⛵ 🔧 ~ Programatically create pages for tags from Sanity.io

Tue, 04 Jan 2022 00:00:00 GMT

My Sunday Skill Builder Session:

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

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

⛵ 🔧 ~ Create data relationship between TAGS and Lillian's photos of projects

Tue, 21 Dec 2021 00:00:00 GMT

My Skill Building Session:

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

// 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

// 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

// 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.

If you would like to see how the web app will look in the end jump to the 20 minute mark.

💪😺👍
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.

Posts from Cap'n Ola

⛵ 🔧 ~ Testing Galleon attributes with Carrd

I Added the Script to the <head> in my Carrd website

I Tested Galleon Attributes

Step 1. I added a container element to hold the data

Step 2. I added a text element inside my container element

Step 3. I added an Image element inside my container element

Image with No Upload Blocks me from Publishing my Changes

Image with placeholder shows the placeholder, not our test image

Step 4. I added a Link element inside my container element

My Link doesn't work

⛵ 🔧 ~ Pirate's pages are weirdly unblocking

Pirate's pages are weirdly unblocking

What are Pirate's Pages?

Why do I do Pirate's Pages?

There's no wrong way to do Pirate's Pages

Really?

History speaks for itself

Since this beloved book came out in 1992, it's been praised by artists like Martin Scorsese, John Cleese and Reese Witherspoon.

⛵ 🔧 ~ Didn't you know Jamstack programming used to be illegal? Huh?

HOW Jamstack programming used to be illegal back in the good old, OLD times

A long time ago, on a Bridge far, far away ....

Your TODO

⛵ 🔧 ~ Could The Again Logbook 📕 help you to do your sub-task again and again?

WHAT is The Again Logbook 📕?

WHY could The Again Logbook 📕 help you to do your sub-task again and again?

HOW do you use your Again Logbook? 📕

Your TODO

⛵ 🔧 ~ Could a croco-clock 🐊-⏲️ help you to focus like a pirate?

WHAT is a croco-clock 🐊 ⏲️ ?

WHY could a croco-clock 🐊-⏲️ help you to focus like a pirate?

HOW do you use your croco-clock 🐊-⏲️ ?

Your TODO

⛵ 🔧 ~ Decide to automate your sub-task into your dev-brain

WHY: Your distractor enemies are "In It To Win It"

Don't let Distraction Diaz take you down until your sub-task practice session is done

HOW do you make each distraction leave your dev-brain?

Example: Git hell distraction anger

Your TODO

⛵ 🔧 ~ Ola is doing a can-do-with-effort sub-task

Answer: a can't-do sub-task is bad for your brain

WHAT is a can-do-with-effort sub-task?

WHY a can't-do sub-task is stealing your focus like a pirate?

HOW do you find your can-do-with-effort sub-task?

Example (Warning: summer workcation tall tales alert! ☀️ 🗣️ 💬 🔈)

A can-do-with-effort sub-task for Lillian (7 🏴‍☠️👸)

Your TODO

⛵ 🔧 ~ Ola adds "async and await" to sourceNodes in his piraty plugin

Adding "async and await" to sourceNodes is a sub-task

WHAT is a sub-task?

HOW do you find your sub-task?

WHY do I do a daily sub-task?

Here is my code before practice

After practice

⛵ 🔧 ~ Take the upgraded Gatsby Cloudinary plugins for a spin

The upgraded Gatsby Cloudinary plugins are ready for you!

How do I get the upgraded Gatsby Cloudinary plugins?

Backwards compatible plugins

Join our bug-treasure-hunt

⛵ 🔧 ~ POW! Password Peek-a-boo

My Sunday Skill Builder Session:

What did I do?

Why did I do it?

How did I do it?

⛵ 🔧 ~ I found one error while creating pages only for markdown pages, not for markdown sections

My Sunday Skill Builder Session:

What did I do?

Why did I do it?

How did I do it?

What was the error I found?

⛵ 🔧 ~ Failed at "create pages only for markdown pages, not for markdown sections"

My Sunday Skill Builder Session:

What did I do?

Why did I do it?

How did I do it?

What went wrong?

⛵ 🔧 ~ I created a Link with markdown on our POW!-website

My Sunday Skill Builder Session:

What did I do?

Why did I do it?

I Added the Script to the `<head>` in my Carrd website

S - See: `toppings` are not on `pizzas` in GraphQL or in GraphiQL

A - Array: Add `array` to pizza.js in Sanity

N - Nodes: `toppings` are now on `pizzas` in GraphQL