Wordpress is a famous CMS, but it&#39;s far from &quot;complete&quot; out of the box.
Wordpress is born to solve the &quot;blog&quot; problem, so the native CMS provides only blog functionalities.
Over the years, Wordpress started to be used for building websites that are not traditional blogs, and this trend changed the ecosystem of the platform, which saw emerging plugins, each adding specific functionality to the CMS.
Nowadays, the ecosystem is the platform!
<h2>Why do you need Worpress plugins?</h2>
Your website needs good SEO tools? It&#39;s better to use a dedicated SEO plugin ...
Your website is for a business that sells services, and each service has the same structure of information? You need dynamic data plugins...
Your website lets the user contact you with a form? You need a form plugin...
You... get the idea!
The Wordpress CMS capabilities of the early days are pretty much the same as what Wordpress offers today.
The ecosystem is the platform.
The platform is made of plugins.
You need to know them (and do not abuse)!



<h2>Collection of Plugins</h2>
Here is a list of the most used Wordpress plugins (based on my perspective). I update the list regularly. 
You can add your own plugins to the list by following the instructions that you find in the link. 
<a target="_blank" href="https://elastic-cymbal-9af.notion.site/03bdc660ec38433aaf43f792f13fd9b0?v=dd2a7bfbe2f74038882f136af3ca221c&pvs=74">Top Wordpress Plugins</a>

Interactive collection of most famous and used Wordpress plugins. Included SEO, Dynamic Data, Marketing and Page Builder

Top Wordpress plugins grouped by what they do

Imagine you&#39;re building a reusable <code>&lt;Section&gt;</code> component with React. The Section component renders an HTML <code>&lt;div&gt;</code> tag because you hardcoded it. However, in some cases, you might want to use an other tag instead, for example a <code>&lt;section&gt;</code> HTML tag.
This is a typical scenario when you want your HTML to be more semantic and SEO friendly.
The solution is to let the consumer decide which HTML tag should be used to render the component. 
<h2>The &quot;as&quot; prop</h2>
This is nothing new. It&#39;s an industry standard &quot;approach&quot; that allows you to dynamically decide which HTML tag should be used to render the component. A lot of React Components library use it, like Chakra UI and Material UI.
Without the &quot;as&quot; prop, you&#39;d need to create separate components for each use case, and it makes no sense. Don&#39;t do it!
This is how you consume the &quot;as&quot; prop
<pre><code class="hljs language-tsx">import { Section } from &#x27;./section&#x27;;

const App = () =&gt; {
 return (
 &lt;div&gt;
 &lt;Section as=&quot;section&quot;&gt;CTA&lt;/Section&gt;
 &lt;Section as=&quot;article&quot;&gt;My Article&lt;/Section&gt;
 &lt;Section&gt;This use the default HTML tag of the component&lt;/Section&gt;
 &lt;/div&gt;
 );
};
</code></pre>And this is the component definition
<pre><code class="hljs language-tsx">type SectionProps = {
 as?: React.ElementType,
 children: React.ReactNode,
}

export const Section = (props: SectionProps) =&gt; {

 const { as: Tag = &#x27;div&#x27;, children } = props;

 return &lt;Tag&gt;{children}&lt;/Tag&gt;;

}
</code></pre><h2>Typescript Support for the &quot;as&quot; prop</h2>
React helps us with Typescript types. Using the typescript&#39;s <code>React.ElementType</code> type, provided by React, you will obtain autocomplete for your IDE, like this
<img src="/blog/dynamic-html-tag-in-react-components-with-the-as-prop/as-prop-autocomlete-ide.png" alt="VS Code autocomplete suggestion for the &quot;as&quot; prop">
As an alternative to <code>React.ElementType</code> you can use 
<pre><code class="hljs language-tsx">type SectionProps = {
 as?: keyof JSX.IntrinsicElements,
 children: React.ReactNode,
}
</code></pre>or
<pre><code class="hljs language-tsx">type SectionProps = {
 as?: keyof HTMLElementTagNameMap,
 children: React.ReactNode,
}
</code></pre>

Learn how to add the "as" prop to your React Component, to add dynamic HTML tags decided by the consumer Component

Dynamic HTML Tag in React Components with the "as" prop

Se stai pensando di creare un sito web per il tuo business, probabilmente ti sei chiesto se sia meglio farlo da solo o affidarti a un professionista. In questo articolo, esploreremo le principali differenze tra un sito web fai-da-te e uno creato da un esperto, evidenziando perché investire in un professionista può fare una grande differenza per il successo del tuo sito web.
<h2>Tempo e Sforzo</h2>
Sito Fai-da-te: Creare un sito web da solo può sembrare una soluzione economica, ma richiede un investimento significativo di tempo e sforzo. Dovrai imparare a utilizzare strumenti e piattaforme di costruzione di siti web, scegliere un design appropriato, creare contenuti, e risolvere eventuali problemi tecnici che potrebbero sorgere.
Sito Creato da un Professionista: Un web designer professionista ha già l’esperienza e le competenze necessarie per creare un sito web efficiente e funzionale. Questo ti permette di risparmiare tempo prezioso che puoi dedicare ad altre attività importanti del tuo business. Il professionista può gestire tutto, dalla pianificazione iniziale alla manutenzione continua.
<h2>Qualità del Design</h2>
Sito Fai-da-te: Le piattaforme fai-da-te offrono una varietà di modelli predefiniti, ma la personalizzazione può essere limitata. Il risultato finale potrebbe non rispecchiare completamente l’immagine e il brand del tuo business.
Sito Creato da un Professionista: Un web designer può creare un design unico e su misura che rappresenta perfettamente la tua azienda. I professionisti sanno come utilizzare colori, font e layout per creare un’esperienza utente coinvolgente e visivamente piacevole.
<h2>Funzionalità e Scalabilità</h2>
Sito Fai-da-te: Le piattaforme fai-da-te possono essere sufficienti per siti web semplici, ma potrebbero non offrire tutte le funzionalità avanzate necessarie per un business in crescita. L’aggiunta di nuove funzionalità può essere complicata e costosa.
Sito Creato da un Professionista: Un sito web creato da un professionista è progettato per essere scalabile e può includere tutte le funzionalità specifiche di cui hai bisogno, come moduli di contatto personalizzati, e-commerce, blog, e integrazioni con i social media. I professionisti utilizzano le migliori pratiche per garantire che il tuo sito possa crescere insieme al tuo business.
<h2>Ottimizzazione per i Motori di Ricerca (SEO)</h2>
Sito Fai-da-te: L’ottimizzazione per i motori di ricerca può essere complessa e richiede una conoscenza approfondita delle tecniche SEO. Senza un’adeguata ottimizzazione, il tuo sito potrebbe non comparire nei risultati di ricerca di Google, riducendo la sua visibilità.
Sito Creato da un Professionista: I professionisti sanno come ottimizzare il tuo sito per i motori di ricerca. Utilizzano tecniche SEO avanzate per migliorare la tua visibilità online, aiutandoti a raggiungere una posizione più alta nei risultati di ricerca e attirare più visitatori al tuo sito.
<h2>Sicurezza</h2>
Sito Fai-da-te: La sicurezza del sito web è cruciale, soprattutto se raccogli informazioni personali dai visitatori. Le piattaforme fai-da-te potrebbero non offrire tutte le protezioni necessarie contro attacchi informatici.
Sito Creato da un Professionista: Un professionista può implementare misure di sicurezza avanzate per proteggere il tuo sito e i dati dei tuoi clienti. Questo include l’uso di certificati SSL, firewall, e backup regolari per prevenire perdite di dati.
<h2>Manutenzione Continua</h2>
Sito Fai-da-te: Mantenere un sito web richiede aggiornamenti regolari e risoluzione di eventuali problemi tecnici. Senza la giusta esperienza, queste attività possono diventare difficili e richiedere molto tempo.
Sito Creato da un Professionista: I professionisti offrono servizi di manutenzione continua per garantire che il tuo sito funzioni sempre al meglio. Questo include aggiornamenti di sicurezza, miglioramenti delle prestazioni e supporto tecnico.
<h2>Conclusione</h2>
Affidarsi a un professionista per la creazione del tuo sito web offre numerosi vantaggi, dalla qualità del design alla sicurezza e alla scalabilità. Sebbene la soluzione fai-da-te possa sembrare più economica all’inizio, l’investimento in un sito web professionale può portare a un maggiore successo a lungo termine per il tuo business.
Se desideri un sito web che rappresenti al meglio la tua azienda e attragga più clienti, <a href="/?initial-is-visible-contact-me=true&skip-intro-animation=true">contattami</a> oggi per discutere del tuo progetto.

Perchè dovresti creare un Sito Web con l'aiuto di un Professionista ed evitare un Sito Web Fai-da-te

Le Differenze tra un Sito Web Fai-da-te e un Sito Creato da un Professionista

WordPress is a popular content management system - CMS - that provides a user-friendly interface for managing websites. However, by default, WordPress exposes sensitive user information publicly via its REST API.
For instance, the <code>wp/v2/users</code> endpoint exposes the <code>username</code> field of every user.
<h2>What can an attacker do by knowing the username?</h2>
This can increase the risk of bruteforce attacks, where attackers try to guess user credentials by repeatedly attempting different combinations.
Usually, the attacker tries randomly and repeatedly different combinations of username and password.
But if the attacker knows the usernames of your users, he can improve his attack by reducing the number of combinations and keeping the username stable - because he knows that an existing user with that username exists—and then try to guess the password.
<h2>When do you need wp/v2/users to be publicly available? And when you don&#39;t?</h2>
If your website is deployed with a headless approach using frameworks like Next.js, Nuxt, SvelteKit or Astro, you probably need this Rest API publicly available to let your framework get data during build.
But if your website uses the traditional WP monolith approach - like the majority of Wordpress websites out there - you probably don&#39;t need it. In this case, you can disable the REST API for user endpoints and improve security.
<h2>Disable the REST API user endpoints</h2>
This can be done by adding the following code to your website:
<pre><code class="hljs language-php">add_filter(&#x27;rest_endpoints&#x27;, function ($endpoints) {

 // Remove `/wp/v2/users` endpoints
 // Common endpoints are :
 // - `/wp/v2/users`
 // - `/wp/v2/users/{id}`
 // - `/wp/v2/users/{id}/{meta_key}`
 // - `/wp/v2/users/me`

 $disallowed = [
 &#x27;/wp/v2/users&#x27;,
 &#x27;/wp/v2/users/(?P&lt;id&gt;[\d]+)&#x27;,
 &#x27;/wp/v2/users/(?P&lt;id&gt;[\d]+)/(?P&lt;meta_key&gt;[\w-]+)&#x27;,
 &#x27;/wp/v2/users/me&#x27;,
 ];

 foreach ($disallowed as $name) {
 if (isset($endpoints[$name])) {
 unset($endpoints[$name]);
 }
 }

 return $endpoints;
});
</code></pre>This code removes some <code>/wp/v2/users</code> endpoints from the list of allowed REST API endpoints. Other endpoints are still allowed, mainly endpoints for generating application passwords programmatically.
Remember to test your changes thoroughly before deploying them to production.

Reduce risk of bruteforce attack by hiding Users information that Wordpress expose publicly by default via Rest API

Disable Wordpress Rest API Users route for better security

<h2>Terminal vs Shells</h2>
<a href="/blog/terminal-vs-shell">Terminal and shells are not the same things</a>, even if they are used as synonymous. Command must be written in the syntax expected by your shell. This article is written for <code>zsh</code> shell, the one I&#39;m using in my Mac.
<h2>CLI General Reminders</h2>
<ul>
<li>File extensions are not necessary for &quot;doing things&quot;, extensions are used to mark which format the information is written in.
Outside CLI context, extensions are used by the OS to pick an appropriate Application and use it to open a file.
In CLI context they &quot;are just the final part of the file name&quot;, so when you create a script file it&#39;s good practice to include an extension that indicate that is a script (<code>.sh</code> <code>.command</code> <code>.script</code>)</li>
<li>Which folder you are in does not count, but :<ul>
<li>when referencing file path using a &quot;relative&quot; approach, the starting point is your current folder (knows as <code>cwd</code>, current working directory)</li>
<li>when referencing file path using a &quot;relative&quot; approach, it is irrelevant.</li>
</ul>
</li>
</ul>
<h2>Commands</h2>
Here is a list of essential CLI commands for your daily tasks...
<h3>Print absolute path of current directory</h3>
<pre><code class="hljs language-bash"># pwd (print working directory)
pwd
</code></pre><h3>Show files/folder of a directory</h3>
<pre><code class="hljs language-bash"># show files of current directory
ls
# show files of other directory
ls path/to/directory
# show as list (easily scannable)
ls -l
# include hidden files
ls -a
</code></pre><h3>Show the file tree of a directory</h3>
<pre><code class="hljs language-bash"># Install the &quot;tree&quot; command if on MacOS
brew install tree
</code></pre><pre><code class="hljs language-bash"># show tree with depth level = 1
tree -L 1

# output
.
├── Summer_Forest.mp4
├── dummy-assets
├── prove
├── text.txt
└── screenshot
</code></pre><pre><code class="hljs language-bash"># show tree with depth level = 2
tree -L 2

# output
.
├── Summer_Forest.mp4
├── dummy-assets
│ ├── artist
│ ├── images
│ └── travel
├── prove
│ ├── Schermata 2023-07-16 alle 20.33.14.png
│ ├── Schermata 2023-07-16 alle 20.33.22.png
│ ├── Schermata 2023-09-14 alle 21.56.02.png
│ ├── Schermata 2024-01-21 alle 17.56.25.png
│ ├── Schermata 2024-01-24 alle 21.57.38.png
│ ├── Schermata 2024-02-09 alle 18.39.27.png
│ ├── Schermata 2024-02-09 alle 18.39.54.png
│ ├── Schermata 2024-02-09 alle 18.55.26.png
│ ├── Schermata 2024-02-28 alle 10.39.45.png
│ ├── Schermata 2024-02-28 alle 13.06.00.png
│ ├── Schermata 2024-02-28 alle 14.41.22.png
│ ├── Schermata 2024-03-03 alle 16.29.49.png
│ ├── Schermata 2024-03-04 alle 17.11.15.png
│ ├── Schermata 2024-03-04 alle 18.05.51.png
│ ├── Schermata 2024-03-08 alle 17.50.21.png
│ ├── Schermata 2024-03-09 alle 15.36.57.png
│ └── Schermata 2024-03-11 alle 13.50.38.png
├── text.txt
└── screenshot
 ├── Schermata 2024-01-30 alle 17.28.04.png
 └── Schermata 2024-02-26 alle 14.52.17.png
</code></pre><h3>Go to a directory</h3>
Change current directory with provided one
<pre><code class="hljs language-bash"># go to dir (named &quot;dirName&quot;) that is child of current directory
cd dirName 
# go to dir (named &quot;dirName&quot;) knowing its absolute path
cd /absolute/path/to/dirName
# go to parent directory
cd ..
# go to home directory
# in MacOS home directiry is /Users/your-name
cd ~
</code></pre><h3>Create a directory</h3>
<pre><code class="hljs language-bash"># create a new directory named &quot;dirName&quot; as child of current dir
mkdir dirName
</code></pre><h3>Create a file</h3>
<pre><code class="hljs language-bash"># create a new file named &quot;fileName&quot; as child of current dir
touch fileName
</code></pre><h3>Edit a file with a text editor</h3>
<pre><code class="hljs language-bash"># with &quot;nano&quot; text editor
nano fileName.txt
# with &quot;vs code&quot; text editor
code fileName.txt
# with &quot;vim&quot; text editor
vi fileName.txt
# with &quot;micro text editor
micro fileName.txt
</code></pre><h3>Open a file with the default app used by the OS</h3>
<pre><code class="hljs language-bash"># open a file named &quot;fileName&quot; with OS default app
open fileName.png
</code></pre><h3>Show in Finder/File Explorer a directory</h3>
<pre><code class="hljs language-bash"># show current dir (do not miss the dot)
open .
# show a dir using absolute path
open /abs/path/to/dir
</code></pre><h2>Conclusion</h2>
I write articles mainly to help future myself or to help the growth of tools I use in my work.
If this article was helpful to you leave a like.
Would you like me to talk about a particular topic? Tell me in the comments!

Useful list of CLI commands to get you started with command line usage in your daily work

Essential CLI commands

Terminal and Shell are not the same things but are commonly used interchangeably to refer to the the same concept: doing things with a CLI (command line interface).
<h2>Which is the difference between Terminal and Shell?</h2>
I like analogies to understand concepts, so when talking about Terminal and Shell these are what comes to my mind...
<h3>Analogy with VideoGames Emulator</h3>
If you want to play old Pokemon games in 2024, you have 2 options
<ul>
<li>Buy a Nintendo GameBoy Color/Advance and the game cartridge</li>
<li>Download an Emulator software on your PC and download the game file (ROM)</li>
</ul>
Opting for the Emulator...
You launch the Emulator, you decide which Console simulate and then you launch the game you want to play.
Similarly, When you launch a Terminal, you decide which Shell execute and then launch your commands by typing with the keyboard.
An Emulator can execute multiple Consoles.
A Terminal can execute multiple Shells.
If Consoles are <code>GameBoy Color</code>, <code>GameBoy Advance</code>... Shells are <code>zsh</code>, <code>bash</code>...
<h3>Analogy with Node and PHP</h3>
If you are familiar to Javascript and Node.js you know that you can &quot;execute&quot; js code by writing js code inside a file and then execute it by opening a Terminal and doing
<pre><code class="hljs language-bash">node script.js
</code></pre><code>node</code> is the executable that parse the <code>script.js</code>, interprets it and executes it.
Same things with PHP
<pre><code class="hljs language-bash">php script.php
</code></pre><code>php</code> is the executable that parse the <code>script.php</code>, interprets it and executes it.
Going back to Terminal vs Shell, you can think that when you do
<pre><code class="hljs language-bash">echo &#x27;a text portion&#x27;
</code></pre>under the hood this pseudo code happens
<pre><code class="hljs language-bash">shell &quot;echo &#x27;a text portion&#x27;&quot;
</code></pre>So the <code>shell</code> (like <code>node</code> and <code>php</code> in previous example) interprets and execute the code.
<h2>Common Shells</h2>
Common shells in MacOS are <code>zsh</code>, and <code>bash</code>. Other shells are:
<ul>
<li><code>sh</code></li>
<li><code>csh</code></li>
<li><code>dash</code></li>
<li><code>ksh</code></li>
<li><code>tcsh</code></li>
</ul>
<h2>Which shell I&#39;m using right now?</h2>
To check which shell is currently running you can run
<pre><code class="hljs language-bash">echo $0
# output
zsh

# not working? try these
ps -p $$
</code></pre><h2>Which shells are installed?</h2>
To check which shells are installed you can run
<pre><code class="hljs language-bash">cat /etc/shells

# output

# List of acceptable shells for chpass(1).
# Ftpd will not allow users to connect who are not using
# one of these shells.

/bin/bash
/bin/csh
/bin/dash
/bin/ksh
/bin/sh
/bin/tcsh
/bin/zsh
</code></pre><h2>How to change shell for current session?</h2>
To change which shell is currently running you can run
<pre><code class="hljs language-bash"># launch a &quot;bash&quot; shell
bash

# print current running shell
echo $0 
# bash

# print default shell for current user
echo $SHELL
# /bin/zsh

# exit shell
exit
</code></pre>...or...
<pre><code class="hljs language-bash"># launch a zsh shell
zsh

# print current running shell
echo $0 
# zsh

# print default shell for current user
echo $SHELL
# /bin/zsh

# exit shell
exit
</code></pre>As you noted, this will not change the default shell for your user, but it will change the shell for the current CLI session only.
<h2>How to check and change default shell?</h2>
When you open the &quot;Terminal&quot; app on your OS, that programs launch the &quot;shell&quot; configured as default for your user. Every user has a default shell defined.
You can check which is the default shell for you user by running
<pre><code class="hljs language-bash">echo &quot;$SHELL&quot;

# /bin/zsh

# In my case the default is &quot;zsh&quot;, 
# and the binary/executable path for &quot;zsh&quot; is /bin/zsh.
</code></pre>Then list shells path that you can use with
<pre><code class="hljs language-bash">cat /etc/shells

# List of acceptable shells for chpass(1).
# Ftpd will not allow users to connect who are not using
# one of these shells.

/bin/bash
/bin/csh
/bin/dash
/bin/ksh
/bin/sh
/bin/tcsh
/bin/zsh
</code></pre>And update the default shell with
<pre><code class="hljs language-bash"># change to &quot;sh&quot; shell
chsh -s /bin/sh

# or, change to &quot;bash&quot; shell
chsh -s /bin/bash
</code></pre><h2>Conclusion</h2>
I write articles mainly to help future myself or to help the growth of tools I use in my work.
If this article was helpful to you leave a like.
Would you like me to talk about a particular topic? Tell me in the comments !

Which is the difference between Terminal and Shell

Terminal vs Shell

How can you load global CSS in block theme in Wordpress and both frontend and block editor

Load global CSS in block theme in Wordpress

Step-by-step tutorial that demonstrate how to create and publish (to NPM) a dummy React hook, with Typescript, Semvers-ioning and Monorepo

Publish a Typescript React library to NPM in a monorepo

<h2>CAUTION</h2>
Before continue we need to understand that this will break the Git history.
This means that after the fact, in case the commit in question was already pushed you will need to overwrite it with <code>git push --force</code>, and every repo co-worker will need to <code>git pull --force</code>.
<h2>Git and Ethereum, somewhat similar</h2>
Git has a chain of commits, called history.
Ethereum/Bitcoin has a chain of blocks, called blockchain.
Every commit (Git) or block (Ethereum) has a parent commit/block, so when you edit a block/commit you will change also its children.
Only what precedes the changed commit/block remains identical, all that follows will be a new thing.
This it&#39;s why they say &quot;Git rebase rewrites history&quot;.
Note that in practice is not possibile to edit a commit, you can only overwriting it with a different version of it.
Git History and blockchain are both immutable.
<h2>Going back to our problem</h2>
My problem is that i&#39;ve scraped some date on the Web and saved this data on a .json file, this file size is 220MB, and Github let us upload files with a limit of 100MB per file.
<blockquote>
remote: error: File XXX is 220.00 MB; this exceeds GitHub&#39;s file size limit of 100 MB
</blockquote>
But i became aware of that only when i tried to push the repo.
So i need to remove that file from my Git history.
<h2>Git History</h2>
This is the Git History of this example.
<pre><code class="hljs language-bash">e6cfcb4 (HEAD -&gt; main) build: update docs about docker adminer # OK
d817a6c feat(api): get-XXX-by-id now use internal data # OK
9176b01 feat: seed database with scraped data # 👈 WRONG ONE
c1301d1 build: install ts-node for running scripts # OK
8c26fd5 feat: add XXX model to db # OK
e51acdb refactor: folder structure # OK
e0f1c7f build: add env.example # OK
a7d7e34 feat: vote persists in db # OK
f32d6c4 build: imported shadow-database docker instance # OK
987a245 build: implement prisma with first migration # OK
...
</code></pre>We need to :
<ul>
<li>keep all commit previous to <code>9176b01</code></li>
<li>edit <code>9176b01</code> commit , removing the unwanted file</li>
<li>commit a new version of <code>9176b01</code> with changes</li>
<li>recreate all untouched commits after <code>9176b01</code></li>
</ul>
<h2>Git rebase interactive</h2>
I could be wrong if i say that this is the only way to resolve this problem, I am only a regular developer that stackoverflows when need some help, like all of us 😎.
<blockquote>
If you know other solutions or has suggestions write them in the comments !
</blockquote>
Anyway, let&#39;s start.
<h2>Start</h2>
As a recap, the wrong commit is <code>9176b01</code>,
and last commit before the wrong one is <code>c1301d1</code>.
<pre><code class="hljs language-bash"># Start rebasing from last correct commit
git rebase -i c1301d1
</code></pre>Git will ask instruction on the rebase process.
<pre><code class="hljs language-bash">pick 9176b01 feat: seed database with scarped data
pick d817a6c feat(api): get-XXX-by-id now use internal data
pick e6cfcb4 build: update docs about docker adminer

# Rebase c1301d1..e6cfcb4 onto c1301d1 (3 commands)
#
# Commands:
# p, pick &lt;commit&gt; = use commit
# r, reword &lt;commit&gt; = use commit, but edit the commit message
# e, edit &lt;commit&gt; = use commit, but stop for amending
# s, squash &lt;commit&gt; = use commit, but meld into previous commit
# f, fixup [-C | -c] &lt;commit&gt; = like &quot;squash&quot; but keep only the previous
# commit&#x27;s log message, unless -C is used, in which case
# keep only this commit&#x27;s message; -c is same as -C but
# opens the editor
# x, exec &lt;command&gt; = run command (the rest of the line) using shell
# b, break = stop here (continue rebase later with &#x27;git rebase --continue&#x27;)
# d, drop &lt;commit&gt; = remove commit
# l, label &lt;label&gt; = label current HEAD with a name
# t, reset &lt;label&gt; = reset HEAD to a label
</code></pre>We must tell Git which commit we want to preserve and which ones we want to edit.
So we tell Git we want to edit <code>9176b01</code> by swapping <code>pick</code> with <code>edit</code>.
<pre><code class="hljs language-bash">edit 9176b01 feat: seed database with scarped data
pick d817a6c feat(api): get-XXX-by-id now use internal data
pick e6cfcb4 build: update docs about docker adminer

# Rebase c1301d1..e6cfcb4 onto c1301d1 (3 commands)
#
# Commands:
# ...
</code></pre>Save with <code>:wq</code> and Git tell us
<pre><code class="hljs language-bash">Stopped at 9176b01... feat: seed database with scraped data
You can amend the commit now, with

 git commit --amend 

Once you are satisfied with your changes, run

 git rebase --continue
</code></pre>Now if we <code>git log --oneline</code>, we see that our last commit is the wrong one, we are back at that point.
Let&#39;s remove the unwanted file, by
<pre><code class="hljs language-bash">rm path/to/unwanted-file
</code></pre><blockquote>
Tip: If you want to keep the file but undo changes made by this wrong commit use <code>git show path/to/changed-file | git apply -R</code> instead of <code>rm path/to/file</code>
In this example both command produces that same effect because the file didn&#39;t exists before this commit, so undo is same as delete.
</blockquote>
Add changes to staging area with
<pre><code class="hljs language-bash">git add path/to/unwanted-file
</code></pre>and
<pre><code class="hljs language-bash">git commit --amend
</code></pre>Edit the commit message if you want and confirm with <code>:wq</code>.
Then complete the rebase
<pre><code class="hljs language-bash">git rebase --continue
</code></pre>Voilà ! Now we have rewritten the Git history from that point.
<h2>Conclusion</h2>
I write articles mainly to help future myself or to help the growth of tools I use in my work.
If this article was helpful to you leave a like.
Would you like me to talk about a particular topic ? Tell me in the comments !

Edit you Git commint history and remove a file from a commit that is not the last one, preserving the rest of the Git history

Git remove file from not last commit

<blockquote>
“[...] The code easiest to maintain is the code that was never written.”
-- <cite>Benjamin Franklin</cite>
</blockquote>
If you agree, you should try tRPC.
<h2>tRPC</h2>
<a href="https://trpc.io/">tRPC</a> is a library that drastically reduce amount of code you need to write to have a fully typed API Layer.
tRPC can be used with many framework, but a common duo is tRPC and Next.js.
If you write backend code in Next.js projects and use Typescript, give a try to tRPC, because it will make you fly.
<h2>Typcal tRPC usage pattern with Next.js</h2>
Server side, you create a tRPC router and expose it in a Next.js API route. 
Client side, you create a React Hooks that can invoke tRPC router procedures.
Then consume the hook in your React Components, in a React Query similar fashion.
<h2>But, i need to call tRPC outside React</h2>
Many reasons can dictates this: 
<ul>
<li>You want to call the procedure NOT from a React Component</li>
<li>Your views implement a cache layer (stored in client), so only if cache is empty you submit the HTTP request</li>
<li>You use Axios and React Query but you are not ready to replace all React Query hooks with tRPC.useQuery, but you want to replace Axios</li>
<li>You know ...</li>
</ul>
In my case i&#39;ve a cache layer on localStorage and i want only to replace my Axios invocations.
tRPC vanilla client comes into play.
<h2>tRPC Vanilla Client</h2>
Like Axios is a HTTP client, tRPC Vanilla Client is client used to communicate to tRPC procedures from Vanilla js.
tRPC Vanilla Client let you call your <code>tRPC procedures</code> in the same way as <code>trpc.&lt;procedure-name&gt;.useQuery</code> does. But unlike <code>trpc.&lt;procedure-name&gt;.useQuery</code> does, you are not limited to use inside React Components/Hooks.
You can call it whenever you can call a function that returns a Promise.
Here is how you can replace Axios with it.
<pre><code class="hljs language-tsx">
// Before
import axios from &#x27;axios&#x27;;

async function submitFormToServer(formValues: FormValues) {
 console.log(&#x27;submittin form to server ...&#x27;);
 try {
 // compose the request DTO
 const dto = {
 title: formValues.title,
 content: formValues.content,
 };
 // submit HTTP request to API Layer
 const response = await axios.post(&#x27;api/post&#x27;, dto);

 // parse request result
 if (response.status === 200) {
 console.log(&#x27;success&#x27;);
 return { success: true };
 }
 
 throw new Error(); // falltrough catch
 
 } catch (error) {
 console.error(&#x27;error:&#x27;, error);
 return { success: false }
 }
}


const Page = () =&gt; {
 const handleSubmit = async () =&gt; {
 const formValues = ....;
 const {success} = await submitFormToServer(formValues);
 ...
 }
 return &lt;form onSubmit={handleSubmit}&gt;...&lt;/form&gt; 
}
</code></pre><pre><code class="hljs language-tsx">
// After
import {trpcVanilla} from &#x27;../utils/trpc&#x27;;

async function submitFormToServer(formValues: FormValues) {
 console.log(&#x27;submittin form to server ...&#x27;);
 try {
 // submit HTTP request to tRPC API Layer
 await trpcVanilla.createPost.mutate({
 title: formValues.title,
 content: formValues.content,
 });
 return { success: true };
 } catch (error) {
 return { success: false };
 }
}




const Page = () =&gt; {
 const handleSubmit = async () =&gt; {
 const formValues = ....;
 const {success} = await submitFormToServer(formValues);
 ...
 }
 return &lt;form onSubmit={handleSubmit}&gt;...&lt;/form&gt; 
}
</code></pre><h2>How to create tRPC Vanilla Client</h2>
<a href="https://trpc.io/docs/v10/vanilla">View Documentation</a>
Example 
<pre><code class="hljs language-ts">// in /utils/trpc.ts

import { createTRPCProxyClient, httpBatchLink } from &#x27;@trpc/client&#x27;;
import type { AppRouter } from &#x27;...path to your tRPC router&#x27;;

export const trpcVanilla = createTRPCProxyClient&lt;AppRouter&gt;({
 links: [
 httpBatchLink({
 url: `http://localhost:3000/api/trpc`,
 }),
 ],
});
</code></pre><h2>Conclusion</h2>
I write articles mainly to help future myself or to help the growth of tools I use in my work.
If this article was helpful to you leave a like.
Would you like me to talk about a particular topic ? Tell me in the comments !

tRPC is an API-Layer library, made famous by framework like the T3 stack that uses React. But tRPC can be used from vanilla js as well. Leran how to do it in this guide