Posts tagged #cloudinary

📝 ✨ ~ Winter vacay ❄️ And this week around the Gatsby islands

Mon, 20 Feb 2023 00:00:00 GMT

It's the winter vacation here in Oslo. We'll spend the beginning of the week in work mode and the end of the week at a cabin our friends rent without electicity or running water.

The plan was to skip this week's unauthorized and rum-fueled treasure hunt, but we encountered a bug in the Cloudinary SDK, Colby was game for some pair programming, so we're on Tuesday at 20:00 CET 🔴

This week

🔴 🐢 Slow & Steady - Episode 171
— Tuesday, February 21st @ 15:15 CET

🔴 🏴‍☠️ Let's fix a Cloudinary SDK bug with Colby Fayock · #JamstackPirates
— Tuesday, February 21st @ 20:00 CET

Future Royal visits by Queen Raae

Fireside Chat with Benedicte Raae: Making an Impact in the Developer Community (Codesmith)
— Tuesday, February 28th @ 21:00 CET (registration is open)

Cloudinary DevJam (Cloudinary)
— Wednesday, March 15th @ 19:00 CET (not on the schedule yet)

All the best,
Queen Raae

Queen Raae and family was responsible for the Cloudinary Gatsby Plugins.

🏝 🗓 ~ Linebreaks, Markdown and VS Code

Tue, 15 Nov 2022 00:00:00 GMT

TLDR: Use / to indicate a line break in Markdown, for example, when making an emoji bullet list:

⭐️ Star the repository on Github\
🐦 Tweet about the plugin, and make sure to tag @cloudinary\
👩‍💻 Create content about the plugin and let @cloudinary know on Twitter\
✍️ Refer to the plugin in your project's readme

Working on the docs for gatsby-source-cloudinary today, I again encountered the problem with using (i.e. double space) at the end of a line to indicate a line break.

By default, VSCode removes trailing whitespace. I disabled this setting at one point, but Ola still has the default setting. Whenever he worked on the docs the line breaks disappeared.

Unfortunately, this is not something we can solve with Prettier, and asking every contributor to disable the setting is not really feasible.

So I did some Googling, and what do you know: You can use \, problem solved!

All the best,
Queen Raae

Queen Raae and family was responsible for the Cloudinary Gatsby Plugins.

🖼 📥 ~ Please include a demo in your Gatsby Plugin repository

Fri, 23 Sep 2022 00:00:00 GMT

Yesterday, Colby Fayock of Space Jelly (and Cloudinary) joined the unauthorized and rum-fueled treasure hunt in the sharky waters around the Gatsby islands 🏴‍☠️

Cloudinary is our client. This summer, we upgraded their plugins to work with v4, and these days we are working on an automated release process, pluginOptionsSchema validation, clean-up of the documentation ++

The What?

Add a demo site to the gatsby-source-cloudinary repository

The Why?

Having a demo and the plugin code in the same repository makes setting up the dev environment a breeze. Even with automated tests in place, it's helpful to see the plugin in action as you develop.

The How

Make use of yarn workspaces. One workspace for the plugin and one for the demo.

Move the plugin code you already have into its own folder.
- I like to call it /plugin.
Then add the demo Gatsby site to another folder.
- I like to call it /demo.
Create a package.json in your root that looks like this

{
  "private": true,
  "workspaces": ["plugin", "demo"],
  "scripts": {
    "develop": "yarn workspace demo develop",
    "build": "yarn workspace demo build",
    "serve": "yarn workspace demo serve",
    "clean": "yarn workspace demo clean"
  }
}

Make sure to delete whatever node_modules folders you might have
Run yarn install from root

If you have any formatting or test scripts, I like to add those to the root package.json as well together with their local dev dependencies.

Check out the Pull Request on Github for the full work on gatsby-source-cloudinary.

All the best,
Queen Raae

PS: If you are starting from scratch I recommend you start with my Gatsby Plugin Starter

Queen Raae and family was responsible for the Cloudinary Gatsby Plugins.

🏝 🗓 ~ This week around the Gatsby islands

Mon, 20 Jun 2022 00:00:00 GMT

We are finishing up the major work on the Gatsby Cloudinary plugins 🎉 If you are using Gatsby + Cloudinary, we could really need some help testing them on real projects! LMK, if that could be you 🙏

This week is React Norway. We'll get to hang out with our contact at Cloudinary and other awesome peeps as a gentle introduction to workcation 2020!

No streams or regular content until late August, but we'll follow up with our clients and maybe do some recreational coding. It depends on how much rain we get, I suppose ☔️

I do love a good workcation, as you can see in this vlog from 2020 ☀️

Let's hang if you find yourself on the west coast of Sweden in July or in Oslo in August. Send me a DM on Twitter, and we'll figure it out.

Events

Jamstack and Databases?! with Taylor Barnett (cfe.dev)
— Thursday, June 23rd @ 19:00 CEST

All the best,
Queen Raae

Queen Raae and family was responsible for the Cloudinary Gatsby Plugins.

🏝 🗓 ~ This week around the Gatsby islands

Mon, 30 May 2022 00:00:00 GMT

Ola and I will be focusing on the Cloudinary Plugins this week. Let us know if you use either gatsby-source-cloudinary or gatsby-transformer-cloudinary. We could use some beta testers for our upgrades.

Last week Gatsby released the Script component as part of v4.15, making it easier to add third-party/external or custom scripts.

I am hoping to make use of it in our gatsby-remark-oembed plugin. Maybe it should be the topic for this week's Deep Dive 🤔

OG Deep Dive navigator Paul is doing his first-ever talk this week. If you are in San Fransisco, come out for Rise of the Robots.

Our streaming schedule this week

🔴 ⛵ Coding and chatting with Jed · #OlaCast #27
— Wednesday, June 1st @ 17:00 CEST

🔴 🏴‍☠️ Unauthorized and rum-fueled treasure hunt · #GatsbyJS Deep Dive
— Thursday, June 2nd @ 19:00 CEST

Other events

Rise of the Robots — Jamstack Creativity, Performance Optimization and Accessibility (Gatbsy - in person)
— Wednesday, June 1st @ 06:00 PDT

All the best,
Queen Raae

Queen Raae and family was responsible for the Cloudinary Gatsby Plugins.

🔁 2️⃣ ~ How to paginate through API results when sourcing data

Fri, 27 May 2022 00:00:00 GMT

We covered the two ways to paginate through API results when sourcing data on yesterday's unauthorized and rum-fueled treasure hunt in the sharky waters around the Gatsby islands.

The What?

Get more than the first page of results from an external API.

In our case, that means more than the "max results" returned from each request to the resources endpoint of the Cloudinary API.

The Why?

Pagination is needed to solve the bug Only returns up to 500 results in gatsby-source-cloudinary.

And it's on us to fix it as Cloudinary has hired us to make sure their Gatsby Plugins are up-to-date by summer 🎉🎉🎉

The How

There are two fundamental ways for solving pagination: recursion and iteration.

Both solve the use case "if there are more results, ask the API for the next page of results".

To not repeatedly ask for the same page, the API needs to know something about the requested page.

It can be the index of the page you are requesting, as seen in the ConvertKit subscribers endpoint.

Or it can be the concept of a cursor as used by Cloudinary. If there are more possible resources than included in the response, Cloudinary adds a next cursor value you then need to provide to the subsequent request for resources.

Recursion

Recursion is when a function calls itself within its code. It's a great way to get the same code to execute again and again and again.

But you must also make sure you stop at some point, or you'll continue to infinity and beyond (yes, I did just rewatch Toy Story with the Pirate Princess).

In our case, we only let createCloudinaryNodes call itself if there is a next cursor present in the response coming from Cloudinary.

// gatsby-node.js
// ... import and configure cloudinary
const createCloudinaryNodes = async (gatsbyUtils, nextCursor) => {
  const result = await cloudinary.api.resources({
    resource_type: "image",
    next_cursor: nextCursor,
  });

  gatsbyUtils.reporter.info(
    `Fetched Cloudinary Assets >>> ${result.resources.length} from ${nextCursor}`
  );

  // ... create a node for each resource in result.resource

  if (result.next_cursor) {
    await createCloudinaryNodes(gatsbyUtils, result.next_cursor);
  }
};

exports.sourceNodes = async (gatsbyUtils) => {
  await createCloudinaryNodes(gatsbyUtils);
};

Iteration

For the iterative solution, we used a do...while loop. The code in the do part of do...while loop will always execute once. And then keep on executing as long as the while condition is true.

In our case, we will keep requesting a new page of resources from Cloudinary until Cloudinary does not respond with the next cursor.

// gatsby-node.js
// ... import and configure cloudinary
const createCloudinaryNodes = async (gatsbyUtils) => {
  let nextCursor = null;

  do {
    const result = await cloudinary.api.resources({
      resource_type: "image",
      next_cursor: nextCursor,
    });

    gatsbyUtils.reporter.info(
      `Fetched Cloudinary Assets >>> ${result.resources.length} from ${nextCursor}`
    );

    // ... create a node for each resource in result.resource

    nextCursor = result.next_cursor;
  } while (nextCursor);
};

exports.sourceNodes = async (gatsbyUtils) => {
  await createCloudinaryNodes(gatsbyUtils);
};

More code!

To see the "missing" code check out and how to limit the number of resources fetched, check out the demo code on GitHub.

All the best,
Queen Raae

PS: Use the approach you feel most comfortable with. Don't get hung up on tech-bros arguing one over the other!

Queen Raae and family was responsible for the Cloudinary Gatsby Plugins.

⏳ ⌛️ ~ Remember to await node creation!

Wed, 25 May 2022 00:00:00 GMT

In yesterday's email I mentioned you must only create nodes within sourceNodes and onCreateNode.

A pretty straightforward rule, but sourcing data usually introduces asynchronous code. And with asynchronous code, you can quickly end up in a situation where you create nodes outside sourceNodes and onCreateNode.

Unfortunately, it still usually works, at least for a few nodes and often in development. However, when you deploy, it falls apart.

When you see inconsistent and weird behavior around node creation, your issue is probably nodes created outside of sourceNodes and onCreateNode. Or direct manipulation of nodes; the topic for tomorrow's email.

There is an excellent example in the Gatsby Docs, but here is another one without the use of .then:

// gatsby-node.js

const cloudinary = require("cloudinary").v2;

cloudinary.config({
  cloud_name: process.env.CLOUDINARY_CLOUD_NAME,
  api_key: process.env.CLOUDINARY_API_KEY,
  api_secret: process.env.CLOUDINARY_API_SECRET,
});

const createCloudinaryNodes = async (gatsbyUtils) => {
  const { actions, reporter, createNodeId, createContentDigest } = gatsbyUtils;
  const { createNode } = actions;

  const result = await cloudinary.api.resources({
    resource_type: "image",
  });

  result.resources.forEach((resource) => {
    reporter.info(`Create CloudinaryAsset >>> ${resource.public_id}`);
    createNode({
      id: createNodeId(resource.public_id),
      ...resource,
      internal: {
        type: "CloudinaryAsset",
        content: JSON.stringify(resource),
        contentDigest: createContentDigest(resource),
      },
    });
  });
};

exports.sourceNodes = (gatsbyUtils) => {
  const { reporter } = gatsbyUtils;

  reporter.info("sourceNodes - START");
  createCloudinaryNodes(gatsbyUtils);
  reporter.info("sourceNodes - DONE");
};

// CONSOLE OUTPUT
// info sourceNodes - START
// info sourceNodes - DONE
// info Create CloudinaryAsset >>> queen.raae.codes-test-5/static/raae-avatar
// info Create CloudinaryAsset >>> queen.raae.codes-test-5/static/raae
// ... more nodes

In the "console output," you see that nodes are created outside of sourceNodes.

The fix is to await createCloudinaryNodes'and make exports.sourceNodes` an asyncrounous functions.

exports.sourceNodes = async (gatsbyUtils) => {
  const { reporter } = gatsbyUtils;

  reporter.info("Sourcing nodes - START");
  await createCloudinaryNodes(gatsbyUtils);
  reporter.info("Sourcing nodes - DONE");
};

// CONSOLE OUTPUT
// info sourceNodes - START
// info Create CloudinaryAsset >>> queen.raae.codes-test-5/static/raae-avatar
// info Create CloudinaryAsset >>> queen.raae.codes-test-5/static/raae
// ... more nodes
// info sourceNodes - DONE

All the best,
Queen Raae

Queen Raae and family was responsible for the Cloudinary Gatsby Plugins.