cyby.dev

Download Libro.fm files

2026-02-07T06:00:00+00:00

I want to listen to the audiobooks that I've purchased from Libro.fm in my pocdast player because I like the UI. I can never remember how to do this and some I'm writing this, so that I can remember the next time I want to download a book.

Download files from Libro.fm

Login to my Libro.fm account
Under the Library title, there's a list of my books. Find the book that I'm interested in
Click the Download files link
This will open a disclosure widget, click Audio m4b
Move the downloaded file to my iCloud Drive/Downloads folder
Wait for it to upload

Upload to Pocket Casts

Now that I have the downloaded file, here's how I add it to Pocket Casts.

Open the Pocket Casts app on my iPhone
Click on the Profile tab
Click on Files
Click Add file
Navigate to iCloud Drive/Download
Click the m4b file
I don't need to make any adjustments and the book cover is automatically imported, so click Save

That's it! The file is now availble in Profile/Files. Once I press on play, the file shows up in my Up Next playlist.

Once I finish the book

Once I've read the book, I can delete the file from Profile/Files.

Make node list into an array

2019-12-07T00:00:00+00:00

Most of the time when I'm coding with node lists, I want to iterate through each of them and preform some action. My first thought is, "Node lists are like arrays, I should be able to use the array methods like .map() or .filter() right?" 🤔

But every time it backfires because Node lists are actually objects.

const nodeArray = document.querySelectorAll('p');

nodeArray.map(node => console.log(node);
// ❗️TypeError: nodeArray.map is not a function

To quickly fix this, I could either use the .forEach() method instead of .map().

const nodeArray = document.querySelectorAll('p');

nodeArray.forEach(node => console.log(node);
// ✅ That works!

Or I could quickly turn the node list into an array using the spread operator.

const nodeArray = document.querySelectorAll('p');
const realArray = [...nodeArray];

realArray.map(node => console.log(node);
// ✅ That works!

Nested Destructuring

2019-06-22T00:00:00+00:00

I always forget the syntax for nested object destructuring. So I wrote this article so that I don't forget again.

Object Destructuring

The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables. - MDN Destructuring assignment

Destructing is one of my favorite ES6 syntax improvements. But when I need to pull things out of nested objects, I can never remember the syntax. So I'm writing this so I can focus on how to remember the syntax and so that I can refer to this article if I forget. 😆

But first, lets looks at destructuring from one object.

const MyAwesomeButton = (props) => (
    <button type="button" className="button">
        {props.label}
    </button>
);

Here we have MyAwesomeButton that takes a label prop and puts it inside of a <button>. We can use object destructing to only show the parts that we need to use, such as label.

+ const MyAwesomeButton = ({ label }) => (
- const MyAwesomeButton = props => (
  <button type="button" className="button">
+   {label}
-   {props.label}
  </button>
)

Now we've eliminated the reference to props and are only pulling out label so that we can use it as a variable name by itself. We need to wrap { label } in parentheses because without them, JavaScript would interpret it as an object literal.

Our final result looks like:

const MyAwesomeButton = ({ label }) => (
    <button type="button" className="">
        {label}
    </button>
);

Now Lets Try Nesting

Here is where the syntax gets confusing. If I want to pull from an object within an object, I totally can, but I never remember the right way to do it.

const MyAwesomeButton = (props) => (
    <button type="button" className="button">
        {props.constants.icon}
        {props.constants.label}
    </button>
);

So now I have an object inside of my props that have two different values, but they're nested inside of an object.

Before we look at how we can pull icon and label out of the prop, lets look at how an object literal is defined:

const myObject = {
    property: "value",
    nestedObject: {
        nestedProperty: "nested value",
    },
};

Ok we have curly braces, property names, and values. You can take the "shape" and apply it to how our destructuring will look.

// Pseudo code of how we would pull out `nestedProperty`
{
    nestedObject: {
        nestedProperty;
    }
}

Now reduce that format to one line.

{
    nestedObject: {
        nestedProperty;
    }
}

💡 Ah ha! I usually forget when I need to add another set of curly braces to get to the nested property!

Back to our React button example, I want to pull icon and label out of props.constants.

+ const MyAwesomeButton = { constants: { icon }, constants: { label }  } => (
- const MyAwesomeButton = props => (
  <button type="button" className="button">
+   {icon}
-   {props.constants.icon}
+   {label}
-   {props.constants.label}
  </button>
)

Our component now doesn't reference props or constants and has a cleaning look.

const MyAwesomeButton = { constants: { icon }, constants: { label }  } => (
  <button type="button" className="button">
    {icon}
    {label}
  </button>
)

GatsbyJS Example

I got this wrong several times while building this website. Pulling from nested objects seems like a normal thing when working with GraphQL, the query language I'm using in Gatsby. I like how clean it looks, but it took a little while to get use to.

Here is one of the craziest examples of nested destructuring that I had to do:

{
    quotes.map(
        ({
            node: { avatar },
            node: { company },
            node: { id },
            node: { person },
            node: { quote },
            node: { url },
        }) => (
            <li key={id} className="mb-8">
                <Quote
                    avatarAlt={`Avatar of ${person}`}
                    avatarUrl={avatar}
                    company={company}
                    linkUrl={url}
                    name={person}
                    quote={quote}
                />
            </li>
        )
    );
}

For each quote, I'm pulling out each piece of data as its own variable and then using it where I need to. And there's not all these references to node, which I like.

Conclusion

The syntax for nested destructuring on the left side mirrors what defining a nested object would look like on the right side.