
Depending on the platform, sometimes you may get audiobooks in MP3 format. However, MP3 is not the best format for audiobooks. It doesn't support chapters, and it's not bookmarkable. M4B is the best format for audiobooks. It supports chapters and is bookmarkable. It's also the format used by Apple for audiobooks.

Last year, I discovered the only MacOS that simply convert multiple MP3 files into one M4B file. It's called [AudioBookBinder App Store page](https://apps.apple.com/us/app/audiobook-binder/id413969927?mt=12) and can be found on the App Store for free!

## How to use AudioBookBinder?

AudioBook Binder is a simple app that does one thing and does it well. It converts MP3 files into M4B files. You drag your MP3 files into the app, and the cover, and it will convert them into one M4B file.

![AudioBookBinder Files View](/images/articles/audiobinder-mp3-m4v/audiobinder-cover-view.jpg 'AudioBookBinder Files View')
![AudioBookBinder Cover View](/images/articles/audiobinder-mp3-m4v/audiobinder-main-view.jpg 'AudioBookBinder Cover View')

The options are limited but sufficient. You can set the cover, the title, the author, and the genre. I usually leave it to "Audiobook" for the genre.

I hope you find this app useful as I did.

And in case you store some audiobooks on your own server, you take a look at [audiobookshelf](https://www.audiobookshelf.org/). It's a Google and Apple app that allows you to listen to your audiobooks from your own server. It's open-source and free. You're welcome!

![Audiobookshelf](/images/articles/audiobinder-mp3-m4v/audiobookshelf-screenshot.jpg 'Home page of Audiobookshelf')


Explore "AudioBookBinder", a handy MacOS app designed for making audiobooks. It quickly turns MP3 files into M4B format, making audiobook creation a breeze.

How to Convert MP3 to M4B for Audiobooks lovers, on MacOS?


I have seen way too many times people using the `<hr>` HTML element, which is called "thematic break" instead of CSS.

Using the HTML `<hr>` tag purely for designing horizontal lines is an incorrect practice.
The real purpose of the `<hr>` tag is to denote a thematic break in the content (like between paragraphs), not just to visually create a horizontal rule.

If you need a decorative line, CSS is a more appropriate choice.

For instance:

```html
<div class="styled-line">Some content</div>
```

Example CSS:

```css
.styled-line {
  border-bottom: 1px solid #000;
  margin: 1em 0;
}
```

You generally don't want to have a single empty `<span>` or `<div>` element just to style it as a horizontal line. Often times, you can just use a bottom border on the element above it.

In terms of accessibility, using `<hr>` as a design element can confuse screen reader users, as it indicates a "thematic break".

Semantics are important, not only for accessibility but also for SEO. So, please, stop using the `<hr>` tag to design a horizontal line!


It's sometimes easy to forget that UI doesn't dicated semantics. In this article I'll show you how to use the "<hr/>" tag properly.

Stop using the "<hr/>" tag to design a horizontal line!


You may be getting the issue **"The `set-output` command is deprecated and will be disabled soon. Please upgrade to using Environment Files."** from your Github workflow.

![Screenshot showing the 'set-output' issue from the Github workflows](/images/notes/set-output-nvmrc-github-actions.jpg)

Few months ago, I choose to update some of my Github workflows to read from my `.nvmrc` file instead of manually specifying my node version.

```.bash:.github/workflows/production.yml
on: push

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Detect Node version
        run: echo ::set-output name=NODE_VERSION::$(cat .nvmrc)
        id: nvmrc

      - name: Use Node.js ${{ steps.nvmrc.outputs.NODE_VERSION }}
        uses: actions/setup-node@v3
        with:
          node-version: ${{ steps.nvmrc.outputs.NODE_VERSION }}
```

But [since October 2022](https://github.blog/changelog/2022-10-11-github-actions-deprecating-save-state-and-set-output-commands/) and the runner version `2.298.2`, Github shows a warning regarding a future depreciation of the `set-output` command.

After few trials, I figured out how to update using the `$GITHUB_OUTPUT` instead:

```.bash:.github/workflows/update-production.yml
on: push

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Detect Node version
        run: echo "NODE_VERSION=$(cat .nvmrc)" >> $GITHUB_OUTPUT
        id: nvmrc
        # shell: bash (to be added if you use composite actions)

      - name: Use Node.js ${{ steps.nvmrc.outputs.NODE_VERSION }}
        uses: actions/setup-node@v3
        with:
          node-version: '${{ steps.nvmrc.outputs.NODE_VERSION }}'
```

And "voilà", the warning should have disappeared and you should see the number of the version right after `Use Node.js XXXX` in your workflow.


Find out how to fix the deprecated set-output when you read the Nodejs version from your .nvmrc file in Github workflows.

How to fix "set-output" when reading nvmrc from the GitHub Actions?


When recently working on my blog, I tried to add a `postbuild` scripts with `next-sitemap` in my `package.json`. My goal was to automatically generate `.xml` files after each Next.js builds.

Using [pnpm](https://pnpm.io/), I found out that my `postbuild` was working with `npm` but not `pnpm`.

I found out [this issue](https://github.com/pnpm/pnpm/issues/2891) on Github mentionning the same problem I encountered. It seems that pre/posts scripts are not activated if using pnpm.

I found the solution adding the line below in my `.npmrc` local file:

```.bash:.npmrc
enable-pre-post-scripts=true
```

Now I can use pre/posts scripts and `pnpm`. I hope this could save you some time!


Find out what I had to update to use pre and posts scripts with pnpm.

How to fix "postbuild" and "prebuild" not working with pnpm?


This was a long wait! After months of lurking on Youtube watching others playing with their Deck, I finally got **my purchase confirmation email** for the Steam Deck!

![](/images/notes/steam-deck-email-purchase.jpg)

What kept me sane during this time was probably [this tool](https://getmydeck.ingenhaag.dev/s/US/256/1626745255) created by [Labidou51](https://www.reddit.com/u/Labidou51). I was able to get a sense of when I would receive the email confirmation.

<Tweet url="https://twitter.com/TheDavidDias/status/1553069456704020480?s=20&t=5VHTZkURrFadrkG3H1nU1Q" />

Some more days to wait and I hope to get this new amazing piece of tech (it's a computer) in my own hands! Maybe I can find a [nice skin on Dbrand](https://dbrand.com/shop/steam-deck-skins) in the meantime 😜?!


My Notes

How to Convert MP3 to M4B for Audiobooks lovers, on MacOS?

Stop using the "<hr/>" tag to design a horizontal line!

How to fix "set-output" when reading nvmrc from the GitHub Actions?

How to fix "postbuild" and "prebuild" not working with pnpm?

Finally received my Steam Deck confirmation email!