
If you want to prevent bots like ChatGPT from scraping and parsing a website, the robots.txt file is the one to update.

This is the file usually used to tell search engines which pages to index and which ones to ignore. In this case, you can use it to block AI bots or in that case, specifically ChatGPT. The only caveat is that it can't remove pages that have already been indexted.

Simply add the following line in your `robots.txt` file:

```
User-agent: GPTBot
Disallow: /
```

This code snippet will tell ChatGPT that it is not allowed to access any part or page of the site.

Whatever ChatGPT and Open AI actually respect this standard is up to them, but it's a good start. Of course, it may not be enough to prevent unwanted scraping and parsing and you may want to put in place additional measures such as implementing CAPTCHAs, using a content security policy, etc...

## References

- [GPTBot](https://platform.openai.com/docs/gptbot)


How to block ChatGPT from scraping and parsing your website? It may be simpler than you think.

How To Block ChatGPT form Scraping and Parsing your Website?


You've likely heard about "mobile first", "content first", "design first", and the like. But what about "user first"? To me, it's the most crucial principle of all.

The "User First" principle is a methodology where we put the user at the forefront in everything we undertake.

- Pondering over introducing a new feature? Seek feedback from your users.
- Wondering what could draw your user's acquaintances to your platform? Ask your users.
- Concerned about what might lead your user to stop using your platform? Ask your users.

You get the drift.

But why do some businesses still do the exact opposite? Why do they continue to decide what they think is best for their users without seeking their input? It can often make a business think they know better what users want.

A common statement I hear is "our users don't know what they want, they always grumble...". Well, if they're grumbling, it means they desire something different.

User needs generate businesses, and businesses foster user needs. It's a symbiotic cycle. If you don't listen to your users, you risk losing them. No amount of excuses can make up for neglecting to hear them out.


User First" approach puts users at the heart of all decisions. Engage with them to understand needs, ensuring your business remains relevant and loved.

The Philosophy and Approach of "User First"


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/notes/audiobinder-mp3-m4v/audiobinder-cover-view.jpg 'AudioBookBinder Files View')
![AudioBookBinder Cover View](/images/notes/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/notes/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 😜?!


After months of waiting, I finally received my Steam Deck confirmation email!

My Notes