From 4681d085d8990a8a88e48293f2c35c83d5829f8e Mon Sep 17 00:00:00 2001 From: David Dias Date: Fri, 11 Aug 2023 15:29:12 -0400 Subject: [PATCH] feat: add article about how to block chatgpt (#69) * feat: add article about how to block chatgpt * feat: new note and fix build --- apps/blog/public/rss/feed.json | 16 +- apps/blog/public/rss/feed.xml | 26 ++- apps/blog/public/rss/fr/feed.json | 4 +- apps/blog/public/rss/fr/feed.xml | 6 +- apps/blog/public/sitemap-0.xml | 176 +++++++++--------- .../get-article-posts/getAdjacentPosts.ts | 8 +- ...form-scraping-and-parsing-your-website.mdx | 31 +++ 7 files changed, 166 insertions(+), 101 deletions(-) create mode 100644 content/notes/how-to-block-chatgpt-form-scraping-and-parsing-your-website.mdx diff --git a/apps/blog/public/rss/feed.json b/apps/blog/public/rss/feed.json index 31297fc..3ef943a 100644 --- a/apps/blog/public/rss/feed.json +++ b/apps/blog/public/rss/feed.json @@ -10,6 +10,18 @@ "url": "https://twitter.com/thedaviddias" }, "items": [ + { + "id": "https://thedaviddias.dev/notes/how-to-block-chatgpt-form-scraping-and-parsing-your-website", + "content_html": "

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

\n

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.

\n

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

\n
User-agent: GPTBot\nDisallow: /\n
\n

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

\n

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...

\n

References

\n", + "url": "https://thedaviddias.dev/notes/how-to-block-chatgpt-form-scraping-and-parsing-your-website", + "title": "How To Block ChatGPT form Scraping and Parsing your Website?", + "summary": "How to block ChatGPT from scraping and parsing your website? It may be simpler than you think.", + "date_modified": "2023-08-09T01:35:47.739Z", + "author": { + "name": "David Dias", + "url": "https://twitter.com/thedaviddias" + } + }, { "id": "https://thedaviddias.dev/notes/philosophy-approach-user-first", "content_html": "

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.

\n

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

\n\n

You get the drift.

\n

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.

\n

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.

\n

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.

", @@ -252,9 +264,9 @@ } }, { - "id": "https://thedaviddias.dev/articles/how-morning-routine-can-positively-change-your-life-forever", + "id": "https://thedaviddias.dev/articles/morning-routine-positively-change-life", "content_html": "

\"\"
Meditation is part of my Morning Routine now…

\n

I cannot remember how many times it was hard for me to wake up in the morning. The snooze button was my best friend every morning, and I even hated when I was late to go somewhere. It was hard to believe that other ways could possibly exist when you work in my job area.

\n
\n

At that time, I believed only one possible way to live was possible.

\n
\n

As a Front-End Web Developer, these last years, sleeping 3–4 hours per night during a few successive days, drinking cups of coffee during the day (sometimes Redbull) was my ritual and my life. And I thought all developers life was close to that. To be the best, you need to go further, faster and perform better than others, and you cannot be restful, calm, have lot of leisure if you want to succeed…

\n

Moving to Mauritius in 2015

\n

I was asked to move from France to Mauritius in October 2015, delaying my goal to move to North America, to help my company to grow up and to manage a Front-End team of 12 persons (today 20).

\n

I met my wife on that island, the most beautiful and Kind woman ever (Kajaal Dias). And you may imagine I was in the paradise…

\n

But in reality, it was far to be the paradise like most of my colleagues and friends may still imagine.

\n

At that point of my life, I was not feeling accomplished; I was not really happy for what I was doing and I was not living the life I always wanted.

\n

As most of the people, I was not able to take real actions and make changes to build something new and different.

\n

Hacking my body to sleep only 4 hours per day

\n

In October 2016, seeing web tutorials on Youtube, my eyes were attracted by a video title “My 20 Hour Day” by Travis Neilson on his DevTips channel. And that was probably the start of lots of changes in my life.

\n

It was the first time I heard about “polyphasic sleep”. A way to sleep less, but being in good health and more alert than sleeping successive 8 hours. At the beginning, I thought it was another fake experiment that may work for few people only. But my curiosity pushed me to dive in some advanced research. (Thanks to Damien Fauché and his french ebook: “How to sleep only 2h per day”)

\n
\n

Finally, few days after, I decided to try the polyphasic sleep - Everyman 3.

\n

At the beginning it was hard and challenging but my motivation and dedication help me not to give up. Today, it has been 4 months that I’m still sleeping 3–4 hours at night and taking 2–3 naps during the day.

\n

My core sleeping time is between 10h30 pm to 2h30–3h00 am. I do my first nap at home before leaving for work at 7h am for 25 minutes, my second nap is at 1h pm during lunch time for 20 minutes (in my car) and the third one at home again at 6h30 pm for 25 minutes after working hours.

\n

\"Screenshots
Smart Sleep on iOS helps me to track my naps and to wake up. The start was not easy.

\n

It is not always simple to be regular, but it’s really essential to listen to your body. I remember sometimes at the beginning sleeping much more in the weekend because I missed some naps during the weekdays. I simply took attention to my body reactions and even you need to try hard at the beginning to create a new habit, your body can adapt if your are really aware of its needs.

\n

Today I am able to fall in sleep in less than 5 minutes (I slow down my breath, put myself in a stress-free position and not let my thoughts haunt me). That helps a lot when you need to do a 20 minutes nap.

\n

Some weeks after, I started to feel that my life can be different, I could do things differently and put a real step forward to my dreams and achieve more than I always wanted to do.

\n

Five minutes to change your way of thinking

\n

Putting a step forward in life, is putting a step ahead of others. And to feel good with others, you need to feel good in your life. And it started with me being grateful…

\n
\n

Gratitude is the quality of being thankful and simply appreciate what we have, even in general we don’t want to see how lucky we are.

\n
\n

I started writing into “The Five Minute Journal”. It is not a journal like the others. It allows me to be grateful, mindful and plan which great things will happen during my day. I feel positive and happier when I use it.

\n
View post on Twitter
\n

Starting my day with my journal, creating and tracking new habits were just the beginning of my journey.

\n

The “Miracle Morning” saved me (S.A.V.E.R.S.)

\n

Sleeping less allowed me to have time… much more time (one more day in my week). And even I love my work and to be a programmer, I felt I gave maybe too much to my coding life and not to my personal life and personal growth. I needed to put a real daily routine, a way to equilibrate my life in all its aspects.

\n

After starting my Five Minute Journal, I discovered “The Miracle Morning” by Hal Elrod, reading articles and his book. That was exactly what I was looking for!

\n

Then I started to put a morning routine using my favorite Todo app (Todoist).

\n
View post on Twitter
\n

S.A.V.E.R.S means Silence, Affirmations, Visualization, Exercises, Reading and Scribing. These 6 elements are part of my daily routine now and help me to start my day in the most positive way.

\n

My typical Morning Routine and his apps

\n

Waking up at 2h30 am, I start my day with a glass of water and a personal recipe with lemon, water, cinnamon, cayenne, ginger, apple cider, honey and collagen (everything organic). It allows me to feel good for whatever I ate the day before or will eat during the day. That did a huge change for my stomach, and I never had any stomach problems or pain again. (Remember in Mauritius, most of the recipes are spicy).

\n

I brew my “Kick Ass” coffee from Kicking Horse Coffee with my beautiful Java Presse (I really love USA brands). I don’t really need coffee, but it’s more a personal pleasure for my morning ritual. (Sometimes I drink the Bulletproof Coffee by Dave Asprey with Coconut Oil and Ghee).

\n

\"\"

\n

For meditation I use the excellent app calm.com. It can take only 10 minutes sometimes more, but that practice in my life had a significant impact in my way I live the present and feel more peaceful. There are other useful apps like Headspace amongst others.

\n

I wrote some affirmations I read every morning and before to go bed. After I take some minutes to visualize what I want to achieve in my day, that helps me to keep focus.

\n

I use Day One for scribbing whatever I feel or have in mind during my day and recently move to Fields Notes for my Morning Pages (thanks to Loic Le Meur).

\n

I put Brain.fm for 15 minutes (with my headphones) and read at least for 15 minutes. I created a list of books on Evernote I want to read each week and month. I’m challenging myself with Goodreads to read 50 books in 2017… I am late already… :)

\n

I regularly undertake activities like coding, watching tutorials, design, social media updates, new projects depending on the day. It is normally between 1h to 1h30 hours in the morning and oneextra hour in the evening.

\n

Then when my wife wakes up, we go for a 20 minutes walk in the park near our apartment. Before I take my shower, 5 minutes of plank and 5 minutes of shaper, it’s enough for me to sweat and feel good.

\n

I add when I have 20 minutes free some Yoga exercises with the help of Daily Yoga. Otherwise I participate every Saturday morning to a session class.

\n

\"The

\n

I take my cold shower hearing my favorite podcasts The School of Greatness by Lewis Howes, The 5 AM miracle by Jeff Sanders and The Tim Ferris Show by Tim Ferriss. Can’t leave home without hearing these guys!

\n

Since few weeks, I’m practicing Intermittent Fasting, so I don’t take breakfast but instead, I prepare a natural juice with cucumber, lemon, parsley, apple, carrot, wheat grass and with all others vegetables and fruits I find around.

\n

During my short trajet to work (10 minutes), I listen with my wife some best-selling nonfiction books using Blinkist. I really recommend you to take a premium account, it is worths every penny.

\n

Then I start my day at work with some other routines I may share in another article.

\n

(I use to track some new habits on my mini-book “Track your habits” by kikki.k and with the Coach.me app.)

\n

My new habits and Routines are only at the beginning

\n

Experimenting lot of new things in the previous 4 months, give me the will to go further and do everything I can to achieve my goals and dreams.

\n

I know I’m still adjusting with my Morning Routine, but I can’t go back after all what I discovered, all people I meet that give me some mindfulness and clarity in the life. I’m so grateful for all of this.

\n

Nothing can stop me now to fulfill every single unique present moment of my life.

\n
\n

Tell me about your Daily or Morning Routine

\n

And you, do you have a daily or morning routine?

\n

What you do daily to improve your life, achieve your goals and take actions to build the life you want?

", - "url": "https://thedaviddias.dev/articles/how-morning-routine-can-positively-change-your-life-forever", + "url": "https://thedaviddias.dev/articles/morning-routine-positively-change-life", "title": "How a Morning Routine can positively change your life forever", "summary": "Having a Morning Routine can positively change your life in so many good ways. Through experimentation, I explore ways to improve my health and my mindset.", "image": "https://thedaviddias.dev/images/articles/how-morning-routine-can-positively-change-your-life-forever/featured.jpeg", diff --git a/apps/blog/public/rss/feed.xml b/apps/blog/public/rss/feed.xml index 716f08c..6a865dc 100644 --- a/apps/blog/public/rss/feed.xml +++ b/apps/blog/public/rss/feed.xml @@ -4,7 +4,7 @@ The David Dias | Front-End Developer, Podcaster & Content Creator https://thedaviddias.dev Hey, I'm David Dias, a Front-End Developer based in Toronto/Canada. I love discussing code, technology, expatriation and life. - Sat, 05 Aug 2023 19:26:26 GMT + Fri, 11 Aug 2023 19:20:05 GMT https://validator.w3.org/feed/docs/rss2.html https://github.com/jpmonette/feed en-US @@ -15,6 +15,26 @@ All rights reserved 2023, David Dias Technology + + <![CDATA[How To Block ChatGPT form Scraping and Parsing your Website?]]> + https://thedaviddias.dev/notes/how-to-block-chatgpt-form-scraping-and-parsing-your-website + https://thedaviddias.dev/notes/how-to-block-chatgpt-form-scraping-and-parsing-your-website + Wed, 09 Aug 2023 01:35:47 GMT + + 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

+]]> + thedaviddias@gmail.com (David Dias) + <![CDATA[The Philosophy and Approach of "User First"]]> https://thedaviddias.dev/notes/philosophy-approach-user-first @@ -2512,8 +2532,8 @@ Don’t hesitate, everything you do, related to coding and web, take time to pre <![CDATA[How a Morning Routine can positively change your life forever]]> - https://thedaviddias.dev/articles/how-morning-routine-can-positively-change-your-life-forever - https://thedaviddias.dev/articles/how-morning-routine-can-positively-change-your-life-forever + https://thedaviddias.dev/articles/morning-routine-positively-change-life + https://thedaviddias.dev/articles/morning-routine-positively-change-life Sat, 21 Jan 2017 00:01:00 GMT
Meditation is part of my Morning Routine now…

diff --git a/apps/blog/public/rss/fr/feed.json b/apps/blog/public/rss/fr/feed.json index 83edded..03f041d 100644 --- a/apps/blog/public/rss/fr/feed.json +++ b/apps/blog/public/rss/fr/feed.json @@ -50,9 +50,9 @@ } }, { - "id": "https://thedaviddias.dev/fr/articles/outils-astuces-rendre-accessible-performante-application-react", + "id": "https://thedaviddias.dev/fr/articles/outils-astuces-pour-rendre-accessible-performante-son-application-react", "content_html": "

L’accessibilité et la performance sont deux (vastes) sujets qui m’ont toujours passionné et qui sont devenus ces dernières années au centre de nombreux meetups et conférences auquels j’ai pu assister (petit clin d’oeil à A11yTO). Récemment expatrié au Canada, j’ai eu l’opportunité, dans ma nouvelle entreprise, de dédier mon temps à la refonte d’un project avec React et de devoir du coup, rendre cette application accessible et performante. (Youpi !)

\n

Que vous connaissiez React ou pas, que vous utilisiez un framework JavaScript ou que vous développiez un simple site web en HTML et CSS, les outils et astuces que j’ai rassemblé dans cet article vous permettront de mieux appréhender ces problématiques et d’y répondre correctement dans vos projets (présents et futurs).

\n

Tout le monde a besoin d’accessibilité

\n

L’accessibilité (aussi appelée a11y) est un sujet qui a toujours été présent depuis le début du web.

\n

Encore de nos jours, certaines entreprises et même développeurs continuent pourtant de penser que l’accessibilité est un sujet à part… tout comme certains pensaient il y a quelques années que l’UX (Expérience Utilisateur) n’était pas importante… Hum hum. Je vais prendre un exemple très simple pour vous démontrer l’importance de rendre un site internet ou une application web accessible.

\n

Imaginons que vous deviez en urgence acheter un billet d’avion ou de train de chez vous. Vous êtes sur votre PC, vous naviguez tranquillement sur le site d’achat quand soudain… votre souris fonctionnant sur batterie, n’a plus de jus (et non vous n’avez pas de piles de rechange ni même le câble USB pour la connecter à votre ordinateur, et votre iPhone 5s vient juste de s’éteindre). Imaginons donc que vous n’ayez plus que votre clavier pour finaliser votre achat. Et maintenant imaginez que le développeur n’ait absolument pas eu envie de tester la navigation par clavier. On peut même imaginer qu’il ait gentiment mis un outline: 0; parce que le client n’aimait pas voir ce contour bleu autour des liens et boutons.

\n

Je ne pense pas avoir besoin d’aller plus loin. J’ai beaucoup d’autre exemples aussi simple que celui-ci, qui ne mettent aucun doute sur le fait que l’accessibilité n’est pas une thématique limitée aux personnes avec des handicaps ou problèmes physiques. L’accessibilité est une thématique actuelle et universelle.

\n

La documentation de React consacre toute une page concernant l’accessibilité et vous y trouverez des éléments complémentaires au contenu de mon article.

\n

Mes outils de base pour « mesurer et analyser »

\n

Que vous veniez de commencer à développer votre application ou que vous deviez optimiser un projet existant, il y a certains outils que vous pouvez utiliser pour vous donner un aperçu du statut de votre projet.

\n

Lighthouse

\n

Que ce soit l’accessibilité, la performance, le SEO ou tout autre domaine front-end, il est important de pouvoir mesurer régulièrement l’état de votre application avant d’y apporter des améliorations ou corrections. L’un des outils que j’utilise quotidiennement et que vous connaissez peut-être est Lighthouse.

\n

\"\"
Résultats d’analyse de Lighthouse sur 24joursdeweb.fr.

\n

Beaucoup mis en avant lors du dernier Google Dev Summit en novembre 2018, Lighthouse est l’outil que vous trouverez soit dans l’onglet « Audit » des outils de développement de Chrome, ou maintenant intégré dans la page résultat de Google PageSpeed Insights. Vous pouvez ainsi analyser n’importe quel site en utilisant n’importe quel navigateur.

\n

Webhint

\n

Webhint est aussi un outil (open-source) qui a été créé par deux connaissances travaillant chez Microsoft. La documentation présente sur leur site est une des plus complètes que j’ai vu à ce jour, je vous recommande d’y jeter un œil.

\n

Vous pouvez soit utiliser leur site ou analyser n’importe quel site utilisant la ligne de commande. Webhint vous génèrera un rapport en HTML que vous pourrez partager avec vos équipes ou votre client.

\n

… et les autres

\n

Dareboost (entreprise française) et Calibre sont d’autres services que j’utilise selon les projets et que vous pouvez tester gratuitement pour une durée ou un nombre de fois limité.

\n

Repérer les erreurs et optimiser l’accessibilité

\n

Au delà des outils précédents qui vous donnent un aperçu global de l’état de votre site internet ou de votre application web, il m’arrive de travailler avec des packages ou modules plus spécifiques que je couple avec mon workflow de travail. Mais avant de vous les présenter, voici par quoi vous devez commencer : activer l’inspecteur d’accessibilité.

\n

Dans Google Chrome:

\n
    \n
  • Depuis certaines récentes versions de Chrome, vous pouvez maintenant trouver l’onglet accessibilité dans la partie « styles » de l’onglet « Éléments » des outils de développement de Chrome.
    • \n
\n

\"\"

\n

Dans Mozilla Firefox:

\n

Ouvrez la boîte à outils du développeur dans Firefox: depuis la version 63 de Firefox, vous devriez avoir un onglet « Accessibilité » comme sur la capture suivante. Il suffit de cliquer sur le bouton pour l’activer.\n

\"\"

\n

ESLint-plugin-jsx-a11y

\n

Si vous travaillez avec JavaScript depuis quelques temps, vous devez certainement utiliser ESLint dans votre workflow (vous pouvez lire cet article pour une complète présentation d’ESLint). ESLint-plugin-jsx-a11y, qui fonctionne avec ESLint) est un simple plugin qui va vous alerter dans le cas où votre code présente une erreur en terme d’accessibilité. Un simple outil mais efficace pour détecteur une erreur pendant le développement ou au moment du build.

\n

stylelint-a11y

\n

Récemment sorti, stylelint-a11y, est à utiliser si bien sûr vous utiliser Stylelint de base. Le plugin vous alerte sur des possibles erreurs d’accessibilité dans votre CSS / Sass.\nSi par exemple, vous utilisez une taille de texte trop petite ou des display: none, stylelint-a11y vous le dira.

\n

Permettre à un utilisateur d’accéder au contenu de votre website ou application en prenant en compte tous ces facteurs est important. Addy Osmani, ingénieur chez Google, a récemment publié un article sur le « Coût du JavaScript » et présente les problématiques et les solutions pour améliorer les performances de son site ou application.

\n

react-a11y

\n

react-a11y est un autre module qui vous alerte de possibles problèmes d’accessibilité directement dans votre console.

\n

react-axe

\n

react-axe, similaire à react-a11y, mais est basé sur axe-core développé par Deque et qui permet aussi de prendre connaissance de possibles erreurs d’accessibilité. Vous pouvez aussi télécharger l’extension aXe qui rajoute un onglet à votre Google DevTools et vous donne la même chose que react-axe mais pour n’importe quel site.

\n

D’autres plugins à explorer

\n

Malheureusement, il serait trop long de vous parlez de tous les plugins que j’ai pu tester depuis le début de mon projet, et qui m’on permis de construire une application React plus accessible. Je vous partage toutefois une petite liste de plugins (régulièrement mis à jour) auxquels je vous recommande de jeter un œil :

\n\n

Rien ne vaut le test manuel

\n

Bien sûr, après avoir testé et optimiser votre code à l’aide de ces outils, le seul vrai moyen de tester votre application et d’inviter des personnes avec des difficultés d’accessibilité différentes à la tester manuellement. Ils pourront ainsi vous faire des retours utiles basés sur leurs expériences et leur manière de naviguer le web.

\n

\"\"

\n

Après avoir traiter assez rapidement certains outils et astuces pour davantage d’accessibilité, nous allons nous pencher sur la performance.

\n

Mais au fait, c’est quoi la performance ?

\n

Que vous viviez en France ou au Canada, de nos jours, les connexions internet sont ici et là extrêmement rapides. Mais Internet n’est pas limité à la France, ou même à l’Europe ou à l’Amérique. Internet est accessible de n’importe où dans le monde et à travers n’importe quel appareil (téléphone, smartphone, TV, montre, réfrigérateur, tableau blanc tactile…).

\n

Savoir détecter les problèmes de performance

\n

Améliorer les performances de son site ou plus particulièrement de son application React demande l’utilisation de certains outils que nous pouvons utiliser dès le début, au milieu ou même en fin de projet.

\n

Commencer par analyser vos bundles

\n

webpack-bundle-analyser n’est pas un outil spécifique à React : c’est un plugin qui permet de visualiser le poids de vos modules et fichiers JavaScript présents dans vos bundles générés par Webpack. C’est un bon moyen de découvrir un potentiel module qui serait trop lourd. Il est tout à fait possible de l’utiliser dès que vous commencer à importer des packages pour votre projet.

\n

Choisir une meilleure alternative

\n

Si webpack-bundle-analyser a mis un évidence certains modules qui pourraient impacter vos performances, vous pouvez alors utiliser Bundlephobia pour choisir d’autres modules équivalents (et plus léger). Un simple exemple avec la fameuse librairie Moment.js qui en général est utilisée à tort et à travers et qui pourrait très souvent être remplacée par d’autres librairies beaucoup plus petites.

\n

Avant de choisir d’utiliser quelqueconque plugin, n’hésitez pas à vous demander si celui que vous souhaitez utiliser est vraiment utile, s’il n’existe pas d’autres alternatives ou une alternative plus légère…

\n

Analyser vos props pour éviter le rendu inutile

\n

Le module why-did-you-update peut vous permettre de vous alerter lorsque vos props sont re-rendu inutilement.

\n

\"\"

\n

Il vous suffit d’installer le package dans votre projet et insérer ce bout de code dans votre app.js :

\n
import React from 'react'\n\nif (process.env.NODE_ENV !== 'production') {\n  const { whyDidYouUpdate } = require('why-did-you-update')\n  whyDidYouUpdate(React)\n}\n
\n

Astuces pour améliorer les performances de votre application react

\n

Utiliser le tree-shaking

\n

Le « tree-shaking » est une technique qui permet, à la création de votre bundle, de ne pas inclure du « code mort » dont vous n’avez pas besoin. Vous vous retrouvez donc avec un bundle plus léger.

\n

Pour cela, vous devez utiliser :

\n
    \n
  • Les ES2015 Modules (import, export…)
    • \n
  • Webpack 2 ou version supérieure
    • \n
  • Un minifier qui supporte le tree-shaking (UglifyJS ou Babel)
    • \n
\n

Un exemple de bonne pratique à adopter :

\n
// Au lieu de\nimport * from 'package'\n\n// Préférer cela\nimport { module } from 'package'\n
\n

N’oubliez pas la mise en cache

\n

La mise en cache n’est pas forcément utile dans la phase de développement mais est indispensable pour une web application en production. Cela consiste tout simplement à rajouter un hash (série de chiffres et caractères) qui change à chaque fois que le contenu du fichier est modifié.

\n

Ce que beaucoup font consiste à créer au moins un bundle (à l’aide de Webpack) « main » avec votre propre code et un fichier « vendor » qui contiendrait tous les fichiers des libraries externes que vous seriez amener à utiliser. (en production, préférer l’utilisation de contenthash).

\n

Ce n’est qu’un début…

\n

Bien sûr dans cet article, je n’ai fait que gratter la surface (il y aurait beaucoup d’autres points à traiter), l’accessibilité et la performance web sont des spécialités à part entière qui demande beaucoup de pratique avant d’être appréhendé correctement. Mais aujourd’hui, plus que jamais, si vous n’en avez pas fait vos domaines d’expertises, ce sont définitivement des sujets qu’il est impossible d’ignorer. Le Web a toujours été un moyen de partage et de communication ouvert à tous, c’est à nous, architectes de faire en sorte que cela puisse continuer de la sorte.

\n

Je vous laisse quelques ressources complémentaires qui vous permettront d’approfondir un peu plus ces 2 thématiques !

\n

Accessibilité :

\n
    \n
  • 24a11y: c’est comme 24 jours de web mais pour l’accessibilité.
    • \n
  • Deque University: Deque est une entreprise de consulting qui offre des certifications et ressources sur l’accessibilité.
    • \n
  • Accessibility sur Tuts+: une série d’articles sur l’accessibilité (en anglais)
    • \n
\n

Performance :

\n
    \n
  • Front-End Performance Checklist: mon open-source checklist pour ce qui concerne la performance (vous y trouverez tous les liens possibles pour approndir le sujet).
    • \n
\n

Et bientôt, j’aurais le plaisir de publier la « Front-End Accessibility Checklist » sur GitHub, restez attentif !

", - "url": "https://thedaviddias.dev/fr/articles/outils-astuces-rendre-accessible-performante-application-react", + "url": "https://thedaviddias.dev/fr/articles/outils-astuces-pour-rendre-accessible-performante-son-application-react", "title": "Outils et astuces pour rendre accessible et performante son application React", "summary": "L'accessibilité et la performance sont deux de mes sujets de prédilection. Je partage dans cet article mes astuces et conseils pour vous assurez une qualité minimum pour votre projet.", "image": "https://thedaviddias.dev/images/articles/outils-astuces-rendre-accessible-performante-application-react/featured.jpg", diff --git a/apps/blog/public/rss/fr/feed.xml b/apps/blog/public/rss/fr/feed.xml index 4cef545..d084fa4 100644 --- a/apps/blog/public/rss/fr/feed.xml +++ b/apps/blog/public/rss/fr/feed.xml @@ -4,7 +4,7 @@ The David Dias | Développeur Front-End, podcasteur & créateur de contenu https://thedaviddias.dev Salut toi! Je m'appele David Dias. Je suis développeur Front-End, podcasteur, créateur de contenu numérique passioné pour résoudre les problèmes digitaux et humains! J'aime rencontrer de nouvelles personnes, bâtir des communautées et parler de tech, d'expatriation et de web. - Sat, 05 Aug 2023 19:26:26 GMT + Fri, 11 Aug 2023 19:20:05 GMT https://validator.w3.org/feed/docs/rss2.html https://github.com/jpmonette/feed fr @@ -138,8 +138,8 @@ Ce n’est que récemment que j’ai pris le temps de rassembler toutes les info <![CDATA[Outils et astuces pour rendre accessible et performante son application React]]> - https://thedaviddias.dev/fr/articles/outils-astuces-rendre-accessible-performante-application-react - https://thedaviddias.dev/fr/articles/outils-astuces-rendre-accessible-performante-application-react + https://thedaviddias.dev/fr/articles/outils-astuces-pour-rendre-accessible-performante-son-application-react + https://thedaviddias.dev/fr/articles/outils-astuces-pour-rendre-accessible-performante-son-application-react Mon, 24 Dec 2018 02:34:11 GMT L’accessibilité et la performance sont deux (vastes) sujets qui m’ont toujours passionné et qui sont devenus ces dernières années au centre de nombreux meetups et conférences auquels j’ai pu assister (petit clin d’oeil à A11yTO). Récemment expatrié au Canada, j’ai eu l’opportunité, dans ma nouvelle entreprise, de dédier mon temps à la refonte d’un project avec React et de devoir du coup, rendre cette application accessible et performante. (Youpi !)

diff --git a/apps/blog/public/sitemap-0.xml b/apps/blog/public/sitemap-0.xml index c20d7f4..d5cb587 100644 --- a/apps/blog/public/sitemap-0.xml +++ b/apps/blog/public/sitemap-0.xml @@ -1,90 +1,92 @@ -https://thedaviddias.dev2023-08-05T00:41:47.431Zdaily0.7 -https://thedaviddias.dev/about2023-08-05T00:41:47.431Zweekly0.7 -https://thedaviddias.dev/articles2023-08-05T00:41:47.431Zdaily0.7 -https://thedaviddias.dev/dashboard2023-08-05T00:41:47.431Zweekly0.7 -https://thedaviddias.dev/notes2023-08-05T00:41:47.431Zdaily0.7 -https://thedaviddias.dev/projects2023-08-05T00:41:47.431Zweekly0.7 -https://thedaviddias.dev/supporters2023-08-05T00:41:47.431Zweekly0.7 -https://thedaviddias.dev/tags2023-08-05T00:41:47.431Zweekly0.7 -https://thedaviddias.dev/uses2023-08-05T00:41:47.431Zmonthly0.7 -https://thedaviddias.dev/fr/articles2023-08-05T00:41:47.431Zdaily0.7 -https://thedaviddias.dev/categories/side-project2023-08-05T00:41:47.431Zdaily0.7 -https://thedaviddias.dev/categories/productivity2023-08-05T00:41:47.431Zdaily0.7 -https://thedaviddias.dev/categories/web-development2023-08-05T00:41:47.431Zdaily0.7 -https://thedaviddias.dev/categories/user-experience2023-08-05T00:41:47.431Zdaily0.7 -https://thedaviddias.dev/categories/expatriation2023-08-05T00:41:47.431Zdaily0.7 -https://thedaviddias.dev/categories/management2023-08-05T00:41:47.431Zdaily0.7 -https://thedaviddias.dev/categories/reflexion2023-08-05T00:41:47.431Zdaily0.7 -https://thedaviddias.dev/fr/about2023-08-05T00:41:47.431Zdaily0.7 -https://thedaviddias.dev/fr/dashboard2023-08-05T00:41:47.431Zdaily0.7 -https://thedaviddias.dev/fr/notes2023-08-05T00:41:47.431Zdaily0.7 -https://thedaviddias.dev/fr2023-08-05T00:41:47.431Zdaily0.7 -https://thedaviddias.dev/fr/supporters2023-08-05T00:41:47.431Zdaily0.7 -https://thedaviddias.dev/tags/github2023-08-05T00:41:47.431Zdaily0.7 -https://thedaviddias.dev/tags/user-experience2023-08-05T00:41:47.431Zdaily0.7 -https://thedaviddias.dev/tags/front-end-development2023-08-05T00:41:47.431Zdaily0.7 -https://thedaviddias.dev/tags/open-source2023-08-05T00:41:47.431Zdaily0.7 -https://thedaviddias.dev/tags/front-end-checklist2023-08-05T00:41:47.431Zdaily0.7 -https://thedaviddias.dev/tags/dev-journal2023-08-05T00:41:47.431Zdaily0.7 -https://thedaviddias.dev/tags/best-practices2023-08-05T00:41:47.431Zdaily0.7 -https://thedaviddias.dev/tags/security2023-08-05T00:41:47.431Zdaily0.7 -https://thedaviddias.dev/tags/user-testing2023-08-05T00:41:47.431Zdaily0.7 -https://thedaviddias.dev/tags/canada2023-08-05T00:41:47.431Zdaily0.7 -https://thedaviddias.dev/tags/travel2023-08-05T00:41:47.431Zdaily0.7 -https://thedaviddias.dev/tags/usa2023-08-05T00:41:47.431Zdaily0.7 -https://thedaviddias.dev/tags/new-zealand2023-08-05T00:41:47.431Zdaily0.7 -https://thedaviddias.dev/tags/collaboration2023-08-05T00:41:47.431Zdaily0.7 -https://thedaviddias.dev/tags/user-interface2023-08-05T00:41:47.431Zdaily0.7 -https://thedaviddias.dev/tags/morning-routines2023-08-05T00:41:47.431Zdaily0.7 -https://thedaviddias.dev/tags/self-improvement2023-08-05T00:41:47.431Zdaily0.7 -https://thedaviddias.dev/tags/aws2023-08-05T00:41:47.431Zdaily0.7 -https://thedaviddias.dev/tags/github-actions2023-08-05T00:41:47.431Zdaily0.7 -https://thedaviddias.dev/tags/netlify2023-08-05T00:41:47.431Zdaily0.7 -https://thedaviddias.dev/tags/nextjs2023-08-05T00:41:47.431Zdaily0.7 -https://thedaviddias.dev/tags/raycast2023-08-05T00:41:47.431Zdaily0.7 -https://thedaviddias.dev/tags/vercel2023-08-05T00:41:47.431Zdaily0.7 -https://thedaviddias.dev/tags/visual-studio-code2023-08-05T00:41:47.431Zdaily0.7 -https://thedaviddias.dev/tags/life-lessons2023-08-05T00:41:47.431Zdaily0.7 -https://thedaviddias.dev/tags/coding2023-08-05T00:41:47.431Zdaily0.7 -https://thedaviddias.dev/tags/npm2023-08-05T00:41:47.431Zdaily0.7 -https://thedaviddias.dev/tags/steam-deck2023-08-05T00:41:47.431Zdaily0.7 -https://thedaviddias.dev/tags/gaming2023-08-05T00:41:47.431Zdaily0.7 -https://thedaviddias.dev/tags/audio2023-08-05T00:41:47.431Zdaily0.7 -https://thedaviddias.dev/tags/application2023-08-05T00:41:47.431Zdaily0.7 -https://thedaviddias.dev/tags/pnpm2023-08-05T00:41:47.431Zdaily0.7 -https://thedaviddias.dev/tags/product2023-08-05T00:41:47.431Zdaily0.7 -https://thedaviddias.dev/tags/business2023-08-05T00:41:47.431Zdaily0.7 -https://thedaviddias.dev/tags/html2023-08-05T00:41:47.431Zdaily0.7 -https://thedaviddias.dev/fr/tags2023-08-05T00:41:47.431Zdaily0.7 -https://thedaviddias.dev/fr/projects2023-08-05T00:41:47.431Zdaily0.7 -https://thedaviddias.dev/fr/uses2023-08-05T00:41:47.431Zdaily0.7 -https://thedaviddias.dev/notes/finally-received-steam-deck-confirmation-email2023-08-05T00:41:47.431Zdaily0.7 -https://thedaviddias.dev/notes/how-to-convert-mp3-to-m4b-for-audiobooks2023-08-05T00:41:47.431Zdaily0.7 -https://thedaviddias.dev/notes/how-to-fix-post-pre-build-pnpm2023-08-05T00:41:47.431Zdaily0.7 -https://thedaviddias.dev/notes/how-to-fix-set-output-nvmrc-github-actions2023-08-05T00:41:47.431Zdaily0.7 -https://thedaviddias.dev/notes/methodology-principle-user-first2023-08-05T00:41:47.431Zdaily0.7 -https://thedaviddias.dev/notes/stop-using-thematic-break-to-design-horizontal-line2023-08-05T00:41:47.431Zdaily0.7 -https://thedaviddias.dev/articles/9-best-practices-ux-for-two-factor-authentification2023-08-05T00:41:47.431Zdaily0.7 -https://thedaviddias.dev/fr/articles/9-reponses-questions-vous-vous-posez-toronto-canada2023-08-05T00:41:47.431Zdaily0.7 -https://thedaviddias.dev/fr/articles/astuces-dexpat-pour-faciliter-demarches-administratives2023-08-05T00:41:47.431Zdaily0.7 -https://thedaviddias.dev/articles/beyond-user-testing-leveraging-frontend-experience2023-08-05T00:41:47.431Zdaily0.7 -https://thedaviddias.dev/articles/choose-city-country-front-developer2023-08-05T00:41:47.431Zdaily0.7 -https://thedaviddias.dev/fr/articles/comment-canada-devenu-maison-4-ans-tentatives2023-08-05T00:41:47.431Zdaily0.7 -https://thedaviddias.dev/articles/decade-web-development-personal-journey-showcase2023-08-05T00:41:47.431Zdaily0.7 -https://thedaviddias.dev/articles/front-end-checklist-just-tool-everything-depends-on-you2023-08-05T00:41:47.431Zdaily0.7 -https://thedaviddias.dev/articles/front-end-performance-checklist-speeds-up-web-developments2023-08-05T00:41:47.431Zdaily0.7 -https://thedaviddias.dev/articles/how-front-end-developers-ui-ux-could-better-collaborate-together2023-08-05T00:41:47.431Zdaily0.7 -https://thedaviddias.dev/articles/how-morning-routine-can-positively-change-your-life-forever2023-08-05T00:41:47.431Zdaily0.7 -https://thedaviddias.dev/articles/how-my-open-source-project-earned-6000-stars-on-github-in-just-5-days2023-08-05T00:41:47.431Zdaily0.7 -https://thedaviddias.dev/articles/how-to-deploy-your-nextjs-app-on-netlify-using-github-actions2023-08-05T00:41:47.431Zdaily0.7 -https://thedaviddias.dev/articles/ideal-desk-setup-personal-journey2023-08-05T00:41:47.431Zdaily0.7 -https://thedaviddias.dev/articles/learned-presenting-side-project-europe2023-08-05T00:41:47.431Zdaily0.7 -https://thedaviddias.dev/fr/articles/outils-astuces-rendre-accessible-performante-application-react2023-08-05T00:41:47.431Zdaily0.7 -https://thedaviddias.dev/articles/raycast-applications-super-developer2023-08-05T00:41:47.431Zdaily0.7 -https://thedaviddias.dev/articles/you-have-something-in-you-the-world-needs2023-08-05T00:41:47.431Zdaily0.7 -https://thedaviddias.dev/projects/front-end-checklist-v12023-08-05T00:41:47.431Zdaily0.7 -https://thedaviddias.dev/projects/release-notification-info-action2023-08-05T00:41:47.431Zdaily0.7 -https://thedaviddias.dev/projects/ui-patterns-for-developers2023-08-05T00:41:47.431Zdaily0.7 +https://thedaviddias.dev2023-08-11T19:20:06.196Zdaily0.7 +https://thedaviddias.dev/about2023-08-11T19:20:06.196Zweekly0.7 +https://thedaviddias.dev/articles2023-08-11T19:20:06.196Zdaily0.7 +https://thedaviddias.dev/dashboard2023-08-11T19:20:06.196Zweekly0.7 +https://thedaviddias.dev/notes2023-08-11T19:20:06.196Zdaily0.7 +https://thedaviddias.dev/projects2023-08-11T19:20:06.196Zweekly0.7 +https://thedaviddias.dev/supporters2023-08-11T19:20:06.196Zweekly0.7 +https://thedaviddias.dev/tags2023-08-11T19:20:06.196Zweekly0.7 +https://thedaviddias.dev/uses2023-08-11T19:20:06.196Zmonthly0.7 +https://thedaviddias.dev/fr/articles2023-08-11T19:20:06.196Zdaily0.7 +https://thedaviddias.dev/categories/side-project2023-08-11T19:20:06.196Zdaily0.7 +https://thedaviddias.dev/categories/productivity2023-08-11T19:20:06.196Zdaily0.7 +https://thedaviddias.dev/categories/web-development2023-08-11T19:20:06.196Zdaily0.7 +https://thedaviddias.dev/categories/user-experience2023-08-11T19:20:06.196Zdaily0.7 +https://thedaviddias.dev/categories/expatriation2023-08-11T19:20:06.196Zdaily0.7 +https://thedaviddias.dev/categories/management2023-08-11T19:20:06.196Zdaily0.7 +https://thedaviddias.dev/categories/reflexion2023-08-11T19:20:06.196Zdaily0.7 +https://thedaviddias.dev/fr/notes2023-08-11T19:20:06.196Zdaily0.7 +https://thedaviddias.dev/fr/dashboard2023-08-11T19:20:06.196Zdaily0.7 +https://thedaviddias.dev/fr/about2023-08-11T19:20:06.196Zdaily0.7 +https://thedaviddias.dev/tags/github2023-08-11T19:20:06.196Zdaily0.7 +https://thedaviddias.dev/tags/user-experience2023-08-11T19:20:06.196Zdaily0.7 +https://thedaviddias.dev/tags/front-end-development2023-08-11T19:20:06.196Zdaily0.7 +https://thedaviddias.dev/tags/open-source2023-08-11T19:20:06.196Zdaily0.7 +https://thedaviddias.dev/tags/front-end-checklist2023-08-11T19:20:06.196Zdaily0.7 +https://thedaviddias.dev/tags/dev-journal2023-08-11T19:20:06.196Zdaily0.7 +https://thedaviddias.dev/tags/best-practices2023-08-11T19:20:06.196Zdaily0.7 +https://thedaviddias.dev/tags/security2023-08-11T19:20:06.196Zdaily0.7 +https://thedaviddias.dev/tags/user-testing2023-08-11T19:20:06.196Zdaily0.7 +https://thedaviddias.dev/tags/canada2023-08-11T19:20:06.196Zdaily0.7 +https://thedaviddias.dev/tags/travel2023-08-11T19:20:06.196Zdaily0.7 +https://thedaviddias.dev/tags/usa2023-08-11T19:20:06.196Zdaily0.7 +https://thedaviddias.dev/tags/new-zealand2023-08-11T19:20:06.196Zdaily0.7 +https://thedaviddias.dev/tags/collaboration2023-08-11T19:20:06.196Zdaily0.7 +https://thedaviddias.dev/tags/user-interface2023-08-11T19:20:06.196Zdaily0.7 +https://thedaviddias.dev/tags/aws2023-08-11T19:20:06.196Zdaily0.7 +https://thedaviddias.dev/tags/github-actions2023-08-11T19:20:06.196Zdaily0.7 +https://thedaviddias.dev/tags/netlify2023-08-11T19:20:06.196Zdaily0.7 +https://thedaviddias.dev/tags/nextjs2023-08-11T19:20:06.196Zdaily0.7 +https://thedaviddias.dev/tags/morning-routines2023-08-11T19:20:06.196Zdaily0.7 +https://thedaviddias.dev/tags/self-improvement2023-08-11T19:20:06.196Zdaily0.7 +https://thedaviddias.dev/tags/raycast2023-08-11T19:20:06.196Zdaily0.7 +https://thedaviddias.dev/tags/vercel2023-08-11T19:20:06.196Zdaily0.7 +https://thedaviddias.dev/tags/visual-studio-code2023-08-11T19:20:06.196Zdaily0.7 +https://thedaviddias.dev/tags/life-lessons2023-08-11T19:20:06.196Zdaily0.7 +https://thedaviddias.dev/tags/coding2023-08-11T19:20:06.196Zdaily0.7 +https://thedaviddias.dev/tags/npm2023-08-11T19:20:06.196Zdaily0.7 +https://thedaviddias.dev/tags/steam-deck2023-08-11T19:20:06.196Zdaily0.7 +https://thedaviddias.dev/tags/gaming2023-08-11T19:20:06.196Zdaily0.7 +https://thedaviddias.dev/tags/ai2023-08-11T19:20:06.196Zdaily0.7 +https://thedaviddias.dev/tags/audio2023-08-11T19:20:06.196Zdaily0.7 +https://thedaviddias.dev/tags/application2023-08-11T19:20:06.196Zdaily0.7 +https://thedaviddias.dev/tags/pnpm2023-08-11T19:20:06.196Zdaily0.7 +https://thedaviddias.dev/tags/product2023-08-11T19:20:06.196Zdaily0.7 +https://thedaviddias.dev/tags/business2023-08-11T19:20:06.196Zdaily0.7 +https://thedaviddias.dev/tags/html2023-08-11T19:20:06.196Zdaily0.7 +https://thedaviddias.dev/fr/tags2023-08-11T19:20:06.196Zdaily0.7 +https://thedaviddias.dev/fr2023-08-11T19:20:06.196Zdaily0.7 +https://thedaviddias.dev/fr/uses2023-08-11T19:20:06.196Zdaily0.7 +https://thedaviddias.dev/fr/supporters2023-08-11T19:20:06.196Zdaily0.7 +https://thedaviddias.dev/fr/projects2023-08-11T19:20:06.196Zdaily0.7 +https://thedaviddias.dev/notes/finally-received-steam-deck-confirmation-email2023-08-11T19:20:06.196Zdaily0.7 +https://thedaviddias.dev/notes/how-to-block-chatgpt-form-scraping-and-parsing-your-website2023-08-11T19:20:06.196Zdaily0.7 +https://thedaviddias.dev/notes/how-to-convert-mp3-to-m4b-for-audiobooks2023-08-11T19:20:06.196Zdaily0.7 +https://thedaviddias.dev/notes/how-to-fix-post-pre-build-pnpm2023-08-11T19:20:06.196Zdaily0.7 +https://thedaviddias.dev/notes/how-to-fix-set-output-nvmrc-github-actions2023-08-11T19:20:06.196Zdaily0.7 +https://thedaviddias.dev/notes/philosophy-approach-user-first2023-08-11T19:20:06.196Zdaily0.7 +https://thedaviddias.dev/notes/stop-using-thematic-break-to-design-horizontal-line2023-08-11T19:20:06.196Zdaily0.7 +https://thedaviddias.dev/articles/9-best-practices-ux-for-two-factor-authentification2023-08-11T19:20:06.196Zdaily0.7 +https://thedaviddias.dev/fr/articles/9-reponses-questions-vous-vous-posez-toronto-canada2023-08-11T19:20:06.196Zdaily0.7 +https://thedaviddias.dev/fr/articles/astuces-dexpat-pour-faciliter-demarches-administratives2023-08-11T19:20:06.196Zdaily0.7 +https://thedaviddias.dev/articles/beyond-user-testing-leveraging-frontend-experience2023-08-11T19:20:06.196Zdaily0.7 +https://thedaviddias.dev/articles/choose-city-country-front-developer2023-08-11T19:20:06.196Zdaily0.7 +https://thedaviddias.dev/fr/articles/comment-canada-devenu-maison-4-ans-tentatives2023-08-11T19:20:06.196Zdaily0.7 +https://thedaviddias.dev/articles/decade-web-development-personal-journey-showcase2023-08-11T19:20:06.196Zdaily0.7 +https://thedaviddias.dev/articles/front-end-checklist-just-tool-everything-depends-on-you2023-08-11T19:20:06.196Zdaily0.7 +https://thedaviddias.dev/articles/front-end-performance-checklist-speeds-up-web-developments2023-08-11T19:20:06.196Zdaily0.7 +https://thedaviddias.dev/articles/how-front-end-developers-ui-ux-could-better-collaborate-together2023-08-11T19:20:06.196Zdaily0.7 +https://thedaviddias.dev/articles/how-my-open-source-project-earned-6000-stars-on-github-in-just-5-days2023-08-11T19:20:06.196Zdaily0.7 +https://thedaviddias.dev/articles/how-to-deploy-your-nextjs-app-on-netlify-using-github-actions2023-08-11T19:20:06.196Zdaily0.7 +https://thedaviddias.dev/articles/ideal-desk-setup-personal-journey2023-08-11T19:20:06.196Zdaily0.7 +https://thedaviddias.dev/articles/learned-presenting-side-project-europe2023-08-11T19:20:06.196Zdaily0.7 +https://thedaviddias.dev/articles/morning-routine-positively-change-life2023-08-11T19:20:06.196Zdaily0.7 +https://thedaviddias.dev/fr/articles/outils-astuces-pour-rendre-accessible-performante-son-application-react2023-08-11T19:20:06.196Zdaily0.7 +https://thedaviddias.dev/articles/raycast-applications-super-developer2023-08-11T19:20:06.196Zdaily0.7 +https://thedaviddias.dev/articles/you-have-something-in-you-the-world-needs2023-08-11T19:20:06.196Zdaily0.7 +https://thedaviddias.dev/projects/front-end-checklist-v12023-08-11T19:20:06.196Zdaily0.7 +https://thedaviddias.dev/projects/release-notification-info-action2023-08-11T19:20:06.196Zdaily0.7 +https://thedaviddias.dev/projects/ui-patterns-for-developers2023-08-11T19:20:06.196Zdaily0.7 \ No newline at end of file diff --git a/apps/blog/src/utils/get-article-posts/getAdjacentPosts.ts b/apps/blog/src/utils/get-article-posts/getAdjacentPosts.ts index 586dcf9..06c086f 100644 --- a/apps/blog/src/utils/get-article-posts/getAdjacentPosts.ts +++ b/apps/blog/src/utils/get-article-posts/getAdjacentPosts.ts @@ -13,8 +13,8 @@ export function getAdjacentPosts(slug: string, locale: string, dataType: string) ? { slug: allPostHeaders[previousIndex].permalink, title: allPostHeaders[previousIndex].frontMatter.title, - image: allPostHeaders[previousIndex].frontMatter?.preview?.url || '', - alt: allPostHeaders[nextIndex].frontMatter?.preview?.alt || '', + image: allPostHeaders[previousIndex]?.frontMatter?.preview?.url || '', + alt: allPostHeaders[nextIndex]?.frontMatter?.preview?.alt || '', } : null @@ -23,8 +23,8 @@ export function getAdjacentPosts(slug: string, locale: string, dataType: string) ? { slug: allPostHeaders[nextIndex].permalink, title: allPostHeaders[nextIndex].frontMatter.title, - image: allPostHeaders[nextIndex].frontMatter?.preview?.url || '', - alt: allPostHeaders[nextIndex].frontMatter?.preview?.alt || '', + image: allPostHeaders[nextIndex]?.frontMatter?.preview?.url || '', + alt: allPostHeaders[nextIndex]?.frontMatter?.preview?.alt || '', } : null diff --git a/content/notes/how-to-block-chatgpt-form-scraping-and-parsing-your-website.mdx b/content/notes/how-to-block-chatgpt-form-scraping-and-parsing-your-website.mdx new file mode 100644 index 0000000..23157c0 --- /dev/null +++ b/content/notes/how-to-block-chatgpt-form-scraping-and-parsing-your-website.mdx @@ -0,0 +1,31 @@ +--- +draft: false +locale: en +date: 2023-08-09T01:35:47.739Z +title: How To Block ChatGPT form Scraping and Parsing your Website? +description: How to block ChatGPT from scraping and parsing your website? It may be simpler than you think. +author: David Dias +tags: + - coding + - ai +type: note +--- + +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)