Posts tagged #mirjam_diala

🏝 🗓 ~ This week around the Gatsby islands

Sun, 09 Oct 2022 00:00:00 GMT

This week Cam Sloan climbs onboard, and we'll use his product Hopscotch to add a product tour to Prune your follows. I think this will be a fun one!

Lillian and I had an action-packed week of family fun in Heidelberg last week. But I also got some grown-up time with Mirjam, who you might know from our Conference Buddy streams last Christmas. Check out the playlist on YouTube. We forgot to take a picture, so did it really happen?!

Ola, on the other hand, went sailing again ⛵️

Also, Gatsby released v4.24 at the end of September.

Our streaming schedule this week

🔴 🏴‍☠️ Gatsby + Hopscotch with Hopscotch founder Cam Sloan · #GatsbyJS Deep Dive
— Thursday, October 13th @ 19:00 CEST

Other events

React Router 6.4 with Ryan Florence (Learn with Jason)
— Tuesday, October 11th @ 19:30 CEST

All the best,
Queen Raae

PS: What are your thoughts on the new meme approach to social media Gatsby is taking?

🧪 📺 ~ How to TDD your Gatsby (Serverless) Functions with Jest

Tue, 14 Jun 2022 00:00:00 GMT

Interested in getting started with Test Driven Development?

Mirjam Diala (@mirjam_diala) show us how in last summers Testing your Gatsby Serverless Functions webinar.

We get into the TDD mentality and showcase how to specifically use Jest to test your Gatsby Serverless Functions.

The code can be found on on Github.

All the best,
Queen Raae

📄 🔄 ~ Markdown referencing markdown with Gatsby

Fri, 14 Jan 2022 00:00:00 GMT

In yesterday's unauthorized and rum-fueled treasure hunts in the sharky waters around the Gatsby islands helping Mirjam we looked at how to use markdown for marketing pages.

One of the tricks we covered is to reference a markdown file from the front matter of another markdown file.

---
sections:
  - title: About us
    md: ../about.md
---

It gives you access to the fully transformed markdown node through childMarkdownRemark.

query ExampleQuery {
  markdownRemark{
    frontmatter {
      sections {
        title
        md {
          childMarkdownRemark {
            html
          }
        }
      }
    }
  }
}

Kinda neat, right?

All the best,
Queen Raae

PS: I am a markdown aficionado, how about you? Would you like more markdown tips and tricks?

💀📄 ~ SSG even for authenticated routes in Gatsby

Fri, 07 Jan 2022 00:00:00 GMT

In yesterday's email, I alluded to a different approach for authenticated routes.

Instead of reaching for client-side only routes I more often utilize statically generated pages even for the authenticated routes these days.

You can protect these routes the same way Gatsby documents for client-side only routes. However, this does not consider a visitor refreshing a page while on an authenticated route. The code will kick the visitor off the page before the authentication status is determined.

Instead, I recommend assuming the visitor is supposed to be there if they hit an authenticated route. While waiting for the data to load, I will show a skeleton version of the page. If it turns out the visitor is not supposed to be there, I kick them off.

A skeleton version of a page is as much of the user interface as is possible without the data only available client-side. There is often a lot to show, menus, headers, icons, etc.

You can see the skeleton version of a profile page in action for POW!. If you get kicked off too soon, disable javascript to see it.

This approach gives a better experience for visitors using your app correctly; they will get a smooth transition from skeleton to the page filled with data. Visitors testing out routes they should not be on will get a flash of skeleton page before being kicked off, a slightly subpar experience.

Incidentally, the same topic of discussion, and pair programming, as on yesterday's unauthorized and rum-fueled treasure hunt in the sharky waters around the Gatsby islands, helping Mirjam with Conference Buddy v2.

Did any of this make sense? Reply to let me know either way...

All the best,
Queen Raae

🎇 ∞ ~ Server Side Rendered (SSR) fallback routes with Gatsby

Fri, 31 Dec 2021 00:00:00 GMT

The unauthorized and rum-fueled treasure hunts in the sharky waters around the Gatsby islands Conference Buddy edition is back.

And on yesterday's stream helping Mirjam source conference data from Supabase, we briefly touched on fallback routes.

What are fallback routes?

It's a way to render pages for data that Gatsby does not yet sourced.

In Mirjam's case with Conference Buddy there will be a period between a user submits a conference and a fresh build picks up the conference for static generation.

In that interim time, we can rely on fallback routes using either CSR (Client Side Rendering) or SSR (Server Side Rendering).

I was not sure if SSR fallback route would be allowed, so I spun up a contrived demo using SSG (Static Site Generation) for sourced YouTube videos and SSR for non-sourced YouTube videos.

The Gatsby docs does not mention SSR for fallback routes, but it builds and serves locally on my machine. However I must admit I have not yet tested deployment...

SSG Page Code

// src/pages/yt/{youTubeEmbed.id}.js

import React from "react";
import { graphql } from "gatsby";

import VideoLayout from "../../components/video-layout";

const SSGVideoPage = ({ data }) => {
  return <VideoLayout {...data.youTubeEmbed} />;
};

export default SSGVideoPage;

export const query = graphql`
  query ($id: String) {
    youTubeEmbed(id: { eq: $id }) {
      title
      html
    }
  }
`;

Fallback SSR Page Code

// src/pages/yt/[youTubeId].js

import React from "react";

import { fetchEmbed } from "../../services/oembed";
import VideoLayout from "../../components/video-layout";
import NotFoundPage from "../404";

const SSRVideoPage = ({ serverData }) => {
  if (serverData) {
    return <VideoLayout {...serverData} />;
  } else {
    return <NotFoundPage />;
  }
};

export default SSRVideoPage;

export async function getServerData({ params }) {
  console.log("SERVER SIDE RENDERING Page for ", params.youTubeId);

  const embedData = await fetchEmbed(params.youTubeId, console);

  return {
    props: embedData,
  };
}

🗄️ ✨ ~ One of the key things in software development is getting the data model right, but ...

Sat, 18 Dec 2021 00:00:00 GMT

The great and powerful Benedikt Deicke of Userlist climbed on board to help Mirjam settle on a data model on Thursday's stream.

To keep the pressure off Benedikt, let us know (@32:24):

I believe one of the key things in software development is getting the data model right...

But then, quite a few times throughout the stream, he would say: "I wouldn't worry about that now!"

Do your best in the initial planning and take the time to refactor the model when needed, but do not let the fear of getting it wrong stop you from getting started with your project!

All the best,
Queen Raae

PS: Mirjam will be back in 2 weeks, on December 30th.
PPS: Ola will keep streaming on Sunday's all through Christmas, and I might yolo a stream or two.
PPPS: If you would like to be notified 30 minutes before a stream goes live, sign up for stream reminders.

Userlist's co-founder Benedikt Deicke is Queen Raae's co-host on Slow & Steady podcast.

👩‍💻 💡 ~ Did you know GraphiQL in Gatsby can export code for you?

Fri, 10 Dec 2021 00:00:00 GMT

Working through Mirjam's markdown homework on yesterday's stream, I remembered how empowered I felt when I found out there is an Export code feature in Gatsby's GraphiQL.

I decided to pay it forward, and our Great and Powerful Pirate Guest, Swizec was flabbergasted...

Wow, is that new? That is so cool!

You can choose to export:

Page Query code

StaticQuery hook code

or StaticQuery component code

Did you know?
Do you use it?

All the best,
Queen Raae

PS: If you would like to be notified 30 minutes before the next stream, sign up for stream reminders.

🔴 ✨ ~ Let's help Mirjam create Conference Buddy 2.0 this holiday season

Thu, 02 Dec 2021 00:00:00 GMT

In a dramatic movie trailer voice... Today at 19:00 CET the journey towards Conference Buddy 2.0 begins on YouTube.

What is Conference Buddy?

Conference Buddy is an initiative started by Mirjam. Its purpose is to help lessen the anxiety for first-time conference-goers by giving them a chance to get to know other attendees ahead of time.

What is the plan?

Ola, guests, and I will advise Mirjam while she tackles creating a new conferencebuddy.io with Gatsby +++.

Tonight we'll have a look at Mirjam's initial Gatsby setup, talk about her plans for Conference Buddy 2.0 and decide on a next step (aka. homework for Mirjam 🤪).

Be a fly on the wall, or an active participant, in the development of Conference Buddy 2.0 by tuning in Thursdays at 19.00 CET.

All the best,
Queen Raae

PS: If you would like to be notified 30 minutes beforehand, sign up for stream reminders.

📦 💰 ~ Accept donations with @raae/gatsby-plugin-donations

Fri, 26 Nov 2021 00:00:00 GMT

Yesterday's unauthorized and rum-fueled treasure hunts in the sharky waters around the Gatsby islands tiny-task was "accept donations."

We did so by adding soon-to-be-officially released plugin: @raae/gatsby-plugin-donations.

The plugin adds a Gatsby Serverless Function you may use to accept pay-what-you-want donations. No ready-made components yet...

I wanted to test out the developer experience myself. Having Ola walk me through the steps in the readme and keep an eye out for areas to improve.

Pretty happy with the results, but some clarification is needed before it's ready for an official release.

We also tackled an issue reported by an early tester:

404 error when using the supplied example code...

Turns out he was using Gatsby version 3.2, and I had somehow put ^3.0.0 as a valid peer dependency when in fact, support for Gatsby Serverless Functions came with version 3.7 🤦‍♀️

Where was Paul, you might ask? He was living out his dream as an Englishman in New York.

If you decide to test out the new plugin, I would love to hear what you think over in the discussions.

All the best,
Queen Raae

PS: This was the last week of Season 2 of Gatsby Deep Dives with Queen Raae and the Nattermob Pirates.

PPS: Next week we'll be back with a new show where I'll support Mirjam as she builds out the new conferencebuddy.io site with Gatsby.

Posts tagged #mirjam_diala

🏝 🗓 ~ This week around the Gatsby islands

Our streaming schedule this week

Other events

🧪 📺 ~ How to TDD your Gatsby (Serverless) Functions with Jest

📄 🔄 ~ Markdown referencing markdown with Gatsby

💀📄 ~ SSG even for authenticated routes in Gatsby

🎇 ∞ ~ Server Side Rendered (SSR) fallback routes with Gatsby

What are fallback routes?

SSG Page Code

Fallback SSR Page Code

Links

🗄️ ✨ ~ One of the key things in software development is getting the data model right, but ...

👩‍💻 💡 ~ Did you know GraphiQL in Gatsby can export code for you?

🔴 ✨ ~ Let's help Mirjam create Conference Buddy 2.0 this holiday season

What is Conference Buddy?

What is the plan?

📦 💰 ~ Accept donations with @raae/gatsby-plugin-donations