Nicolas BAPTISTA - Blog of a Parisian software architect

This blog contains 56 articles

N I C O L A S    B A P T I S T A

PERSONNAL BLOG

SOFTWARE ARCHITECT • JAVASCRIPT DEVELOPER • DESIGNER


LinkedIn Contact Github Remote OK Resume My Projects

Block specific exact content with Adblock Plus : Youtube, LinkedIn, … stupid suggested content

As you can know we (software developers) are facing serious information overdose everyday, especially on social networks and video services such as Youtube.

On Youtube, like on Twitter, etc…. , you can both found shitposts and useful informations. This is a serious problem because we can easily waste time by filtering ourself everyday theses informations which take energy and time. This is a real problem.

Youtube : the grid of stupid videos

Exemple of the Youtube main page with useless content

We can block the main Youtube page with add-ons like Adblock Plus (using others are possible but I will use this one in this tutorial).
As you can know, the social networks have psychologists and they are working hard with complex algorithms to waste your time and so you can be more on their platform and generate more money mainly with advertisement.
You can still see it if it is not a problem for you. As for me, the content is not relevant at all because watching cat videos will not help me about business, software development, earning money, and so on.

The solution

On Adblock Plus we can go to the Advanced settings :

You can add custom filters in this list

In “My Filter List” you can add filters that can block only the part of the website that contains useless informations.

Here is the Adblock Plus Cheatlist : https://adblockplus.org/filter-cheatsheet

We can now add the following rules to block the contents DIV

The DIV with “content” id is showing the useless content

So, we can try to add the following filter:

youtube.com###contents

The problem if you use the rule is that you will not be able to a Youtube search:

The search “earn money” was also blocked

Now, if we go deeper in inspecting the DOM, we can see that:

  • On the main page the DIV contents contains the class ytd-rich-grid-renderer if it is the main page
  • On the search page the DIV contents contains the class ytd-section-list-renderer (and others)

If you look on the documentation of Adblock Plus, on the cheatlist, you can see that you can also block the ID and the CLASS, which will give the following rule:

youtube.com###contents > .ytd-rich-grid-renderer

The result:

The main page, blocked ✅
The search page, not blocked ✅

LinkedIn : the infinite scrolling

linkedin.com##.scaffold-finite-scroll

If you have others you can tell me ! 😃

Thank you for reading my article, do not hesitate to support me by contacting me or making a donation.

List of the array method with Javascript

.forEach()

const array = ["Alpha", "Beta", "Omega", "Neptune", "Danube", "Dniepr"];
array.forEach(el => console.log(el)) // basic
array.forEach((el, index, array) => console.log(el, index, array)) // all params
array.forEach(function(el, index, array) { // without arrow function
   return console.log(el, index, array)
})

.map()

const users = [
{name: "Alpha", level: 1}, 
{name: "Beta", level: 2}, 
{name: "Omega", level: 3}];
const names = users.map(user => user.name) // basic mapping in new array
console.log(names) // ["Alpha", "Beta", "Omega"]

.find() / .findIndex() / .indexOf()

const array = ["Alpha", "Beta", "Omega", "Neptune", "Danube", "Dniepr"];
console.log(array.find(el => el === "Alpha")) // ["Alpha"]
console.log(array.findIndex(el => el === "Alpha")) // 0
console.log(array.indexOf("Neptune")) // 3

The difference between indexOf and findIndex :
– findIndex : callback function so can do more things inside the callback function
– indexOf : using fast function with only one parameter

const users = [
{name: "Alpha", level: 1}, 
{name: "Beta", level: 2}, 
{name: "Omega", level: 3}];
console.log(users.find(el => el.name === "Alpha")) // [{name: "Alpha", level: 1}]

.some() / .every() / .includes()

const numbers = [12,14,23,27,11,9];
console.log(numbers.some(num => num === 40)) // false - do not have it
console.log(numbers.some(num => num === 12)) // true - yes have it
console.log(numbers.every(num => num < 20)) // false - not every item bellow 20
console.log(numbers.every(num => num < 40)) // true - yes every item bellow 40
console.log(numbers.includes(40)) // false - do not have it
console.log(numbers.includes(12)) // true - yes have it

.filter()

const numbers = [12,14,23,27,11,9];
const filteredNumbers = numbers.filter(num => num > 20) // [23, 27]

.sort()

Sort() works pretty good to order by ascending alphabetical order.
For numbers you will need to overload the condition in the callback function.

const numbers = [12,14,23,27,11,9];
const sortedNumbers = numbers.sort((a, b) => a - b) // [9, 11, 12, 14, 23, 27]
const array = ["Delta", "Neptune", "Alpha", "Danube", "Beta", "Dniepr"];
const sortedZone = array.sort() // ['Alpha', 'Beta', 'Danube', 'Delta', 'Dniepr', 'Neptune']

.reduce()

const numbers = [12,14,23,27,11,9];
const reducedNumbers = numbers.reduce((accumulator, currentValue) => accumulator + currentValue) // 96

Liste des plateformes de freelance en tant que développeur fullstack en France

Trouver des missions en freelance peut ne pas être toujours très simple mais en étant sur les bons canaux de communications et de diffusion d’offre, il est possible de pouvoir avoir de bonnes opportunités :

Lien: http://malt.fr

Lien: http://comet.co

Lien: https://fr.capgemini.talentnet.community/

Lien: http://freelancerepublik.com

Lien: https://www.freelance-dispo.fr/

Lien: http://free-work.com

Lien: https://www.espace-freelance.fr/

Lien: https://www.littlebigconnection.com/

Ensuite, les autres plateformes classiques peuvent offrir des opportunités en freelance : LinkedIn Jobs, Indeed, etc.

Ruby on MacBook M1 : Not updating version

In some cases, it seems that your ruby version can still on 2.6 (which is old, latest is 3.2.2 right now) even if you installed the lasted version with brew or rbenv. You can see also that you have rights problems and need sudo rights to install some gems.

# ruby -v
ruby 2.6.10p210 (2022-04-12 revision 67958) [universal.arm64e-darwin22]
# rbenv install 3.2.2
# rbenv global 3.2.2
# ruby -v # WE CAN SEE THAT WE STILL HAVE OLD VERSION
ruby 2.6.10p210 (2022-04-12 revision 67958) [universal.arm64e-darwin22]

This is because MacOS comes with a “system Ruby” pre-installed. If we remove all we can see the pre-installed version is located in this folder:

$ which ruby
/usr/bin/ruby

What should we do to not use system Ruby

There are two methods that I recommend, the method using brew or the method using rbenv which both allows you to manage Ruby version.

Method 1 : Updating Ruby version with Brew

First you need to install the Ruby version with brew:

brew install ruby ruby-build

Then open a terminal and go on your personal folder (/Users/YOUR_USERNAME) and use the following command to switch from the Ruby system version to the brew version with the .zshrc file in your user folder:

echo 'export PATH="/usr/local/opt/ruby/bin:$PATH"' >> ~/.zshrc

Method 2 : Updating Ruby version with RBEnv

If you still see the old version by checking the version doing ruby -v
First you need to install rbenv, which is a ruby version manager, we can install it with brew.

brew install rbenv ruby-build

Then open a terminal and go on your personal folder (/Users/YOUR_USERNAME) and use the following command to switch from the Ruby system version to the rbenv version with the .zshrc file in your user folder:

echo 'eval "$(rbenv init -)"' >> ~/.zshrc

Check the result

Then, open a new terminal (close the old one), if you updated correctly the zshrc file and have installed the correct ruby version, you should be able to see the good version:

% ruby -v
ruby 3.2.2 (2023-03-30 revision e51014f9c0) [arm64-darwin22]

Hope it will work for you. Do not hesitate if any question.

Playwright: Count all the components on the page

Is it possible that you have to debug Playwright and list all the available items on the page, so you can know if your locate your item const buttons = await page.$$(‘button’); or your click await buttonButton1.click() will work. To do so you can list all items and also highlight them when you run npx playwright test , add the following in your playwright test file, in any test:

  const componentHandles = await page.evaluateHandle(() => {
    const components = new Map();
    const walker = document.createTreeWalker(
      document.body,
      NodeFilter.SHOW_ELEMENT,
    );

    while (walker.nextNode()) {
      const element = walker.currentNode as HTMLElement;
      const nodeName = element.nodeName.toLowerCase();
      if (components.has(nodeName)) {
        components.set(nodeName, components.get(nodeName) + 1);
      } else {
        components.set(nodeName, 1);
      }
      element.style.border = '2px solid red'; // Highlight the component
    }

    return Array.from(components);
  });

  const componentCount = await componentHandles.jsonValue();

  console.log('Component count:');
  for (const [component, count] of Object.entries(componentCount)) {
    console.log(`${component}: ${count}`);
  }

Result:

0: noscript,1
1: script,1
2: div,41
3: input,3
4: span,3
5: aside,1
6: style,1
7: button,2
8: svg,1
9: g,2
10: path,3

And it will display on the web browser you item with red borders.

Using ReactQuery with React instead of Axios + hooks

In your React app you can use ReactQuery and ReactQueries for request caching, background updates and stale data out of the box with zero-configuration, instead of just Axios + hooks.

UseQuery : 1 api request

import { useQuery } from '@tanstack/react-query';
import axios from 'axios';
...
const getServices = () => {
        return axios.get('https://jsonplaceholder.typicode.com/posts');
};
...
const { data, isError, isLoading } = useQuery(['services'], getServices);

if (isLoading) {
    return <p>Loading...</p>;
}

if (isError) {
    console.error('error');
}

return <ServiceComponent data={data} />;

UseQueries : 2+ api request

Index.tsx

import { useQueries } from '@tanstack/react-query';
import axios from 'axios';
...
const getServiceOne = () => {
        return axios.get('https://jsonplaceholder.typicode.com/posts');
};
...
const results: any = useQueries({
    queries: [
      { queryKey: ['serviceOne'], queryFn: getServiceOne, staleTime: Infinity },
      { queryKey: ['serviceTwo'], queryFn: getServiceTwo, staleTime: Infinity },
    ],
});

const serviceOneResult = results[0];
const serviceTwoResult = results[1];

  const isError = serviceOneResult.error || serviceTwoResult.error;
  const isLoading = serviceOneResult.isLoading || serviceTwoResult.isLoading;

  if (isLoading) {
    return <p>Loading...</p>;
  }

  if (isError) {
    console.error('error');
  }

  return (
    <ServiceComponent
      dataOne={serviceOneResult.data}
      dataTwo={serviceTwoResult.data}
    />
  );

Faire une demande de remboursement de TVA (Micro Entrepreneur)

Pour faire une demande de remboursement de TVA tout d’abord vous devez faire la déclaration de TVA.
A savoir potentiellement les lignes 34, 35, 49, 50 dans la déclaration (demandez confirmation à votre comptable) :

Ensuite, il faut remplir un formulaire spécifique de demande de remboursement de TVA. Pour accéder à ce formulaire il faut aller dans Déclarer la TVA dans votre espace professionnel, et en bas de la page remplir la période lié à la demande de remboursement de TVA :

Remplissez la période puis cliquez sur valider pour accéder au formulaire.
Attention, si la période n’est pas bonne, il y aura une erreur. En effet, il y a une vérification de vos déclarations quand vous cliquez sur valider.

Ensuite, le formulaire suivant s’affiche. Dans le cas d’un montant de 555€ mis dans la case “50 Remboursement demandé sur le formulaire de demande de remboursement (3517 DDR)” de la précédente déclaration, il faudra remplir le formulaire 3517-S de la façon suivante.
Rappel: On ne peut pas déclarer de nombre non entier, une TVA de 456,50€ sera arrondi à 457. Une TVA à 456,20 sera arrondi à 456.

Remplissez le même montant que vous avez déclaré dans la case “50 Remboursement demandé sur le formulaire de demande de remboursement (3517 DDR)” de la précédente déclaration
Pour obtenir le remboursement, cocher la case “A créditer au compte désigné” et remplissez les informations bancaires

Voici enfin une vidéo additionnelle qui montre comment faire la déclaration de TVA dans le cas d’une micro entreprise et qui récapitule un peu tout ça:

Payer les charges en prestation de service en auto-entrepreneur / micro-entreprise / indépendant

En tant qu’auto-entrepreneur ou chef d’entreprise d’une société unipersonnel (SASU ou EURL), nous nous devons malheureusement de payer d’une part les charges sociales auprès de l’URSSAF mais aussi les impôts (taxe CFE par exemple) et la TVA si vous avez dépassé le seuil de TVA, ainsi que d’autres charges annexes. Dans cet article je liste les principales charges de l’auto entrepreneur en prestation de service.

Principales charges et impôts d’un auto-entrepreneur / indépendant, en prestation de service (développeur, data analyst, UI/UX designer, testeur QA, marketing, chef de projet, etc.) :
– Assurance RC Pro (responsabilité civile obligatoire, ne prenez pas de risques)
– Banque Pro (il y a des banques pro gratuites mais généralement on vous propose d’être accompagné et d’avoir une carte bancaire professionnelle, toutes les banques physiques proposent : BNP, Caisse d’Epargne, Société Générale, HSBC, etc. mais vous pouvez vous dirigez vers des solutions plus utilisés et moins cher comme les banques en ligne : Shine, Hello Bank, Qonto, …). Pour information avoir une banque professionnelle n’est pas obligatoire mais avoir un compte séparé oui.
– Charges de l’URSSAF (22% du chiffre d’affaire en prestation de service < 75k€), à déclarer sur autoentrepreneur.urssaf.fr
– Les taxes et impôts professionnels (comme la taxe CFE, sur la partie PRO des impôts)
– La TVA, qu’il faudra facturer 20% au client et la reverser aux trésors publics suivant le régime TVA que vous avez choisi (CA12, CA3, …) si vous avez dépassé le seuil de dépassement de TVA (CA d’environ 36 000€, vérifiez sur le site des impôts)

– Les taxes et impôts particulier (sur la partie particulier des impôts
– Vous devez payer vous même absolument tout : restaurant, transports, mutuelle, … vous n’avez pas de CE, de mutuelle entreprise, de ticket restaurant, … Ce n’est pas une partie à négliger.

J’espère avoir été clair et avoir résumé la plupart des charges pour un indépendant exerçant son activité sur le territoire français en tant qu’un dépendant français, n’hésitez pas à me contacter si vous avez des questions.

Rename git branch

Use git command line (with git bash on Windows) to change the branch name.

1 – Be sure you are on the right branch

Firstly, you should be on your current branch (the branch you want to rename) with git checkout.

2 – Change the name of the branch locally

Secondly, you should rename the branch with the following command:

git branch -m <the_new_branch_name>

The new branch name should be valid, with no space. If you use special characters you should use quotes like:

git branch -m “let’s-put-a-complicated-name”

3 – Change the name of the branch remotely

You can now change the name of the branch remotely so it’s also changed on github / gitlab / bitbucket etc.
To do push it use:

git push origin HEAD:<old_branch_name>

If it’s a complicated name you can still use the quotes:
git push origin HEAD:”it’s-an-old-branch-name”

моя жизнь - дерьмо