<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 ininfluent.</li>
</ul>
</li>
</ul>
<h2>Basic Scripting</h2>
The syntax depends on the <code>shell</code> you are using. Common shells are <code>bash</code> and <code>zsh</code>.
The shell is the &quot;executable&quot; that execute what you write. To learn more here is a <a href="/blog/terminal-vs-shell">Terminal vs Shell</a> blog post.
<h2>Strings</h2>
<pre><code class="hljs language-bash"># create a variable named &quot;msg&quot; with &quot;Hello John&quot; as value
msg=&quot;Hello John&quot; # double quotes (&quot;works&quot; with variables)
msg=&#x27;Hello John&#x27; # alternative quotes (NOT &quot;works&quot; with variables)

# print it output
echo $msg # hello john
echo &quot;$msg&quot; # hello john
echo &#x27;$msg&#x27; # $msg
echo &quot;msg values is $msg, bye&quot; # msg value is hello john , bye
echo &quot;msg values is ${msg} , bye&quot; # msg value is hello john , bye
</code></pre><h2>Numbers</h2>
<pre><code class="hljs language-bash"># create avariable named &quot;count&quot; with 0 as value
count=0

# increment it
count=$((count+10))
echo $count # 10

# increment it
((count+=10))
echo $count # 20

# print it
echo &quot;Count is ${count} \!\!&quot;
</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!

Basic Scripting in CLI

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

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 !

Terminal vs Shell

Load global CSS in block theme in Wordpress

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 !

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 !

Essential CLI commands

Terminal vs Shell

Load global CSS in block theme in Wordpress

Publish a Typescript React library to NPM in a monorepo

Git remove file from not last commit

Use tRPC outside React