<a href="https://www.typescriptlang.org/">TypeScript</a> is tremendously helpful while developing Node.js applications. Let&#39;s see how to configure it for a seamless development experience.
<h2>Setting up TypeScript</h2>
First, we need to install TypeScript. We can do this by running the following command:
<pre><code class="highlited-code-wrapper langbash"><div class="highlited-code" data-language="bash">npm i -D typescript</div>
</code></pre>Next, we need to create a <code>tsconfig.json</code> file in the root of our project. This file will contain the TypeScript configuration for our project. Here is an example of a <code>tsconfig.json</code> file that I picked from <a href="https://www.totaltypescript.com/tsconfig-cheat-sheet">Total TypeScript</a> and added a few more things (read the code and pay attention to the comments):
<pre><code class="highlited-code-wrapper langjson"><div class="highlited-code" data-language="json">{
 &quot;compilerOptions&quot;: {
 /* Base Options: */
 &quot;esModuleInterop&quot;: true,
 &quot;skipLibCheck&quot;: true,
 &quot;target&quot;: &quot;es2022&quot;,
 &quot;allowJs&quot;: true,
 &quot;resolveJsonModule&quot;: true,
 &quot;moduleDetection&quot;: &quot;force&quot;,
 &quot;isolatedModules&quot;: true,
 &quot;verbatimModuleSyntax&quot;: true,

 /* Setting ~ as the alias for the src/ directory */
 &quot;baseUrl&quot;: &quot;.&quot;,
 &quot;paths&quot;: {
 &quot;~/*&quot;: [&quot;src/*&quot;]
 },

 /* Strictness */
 &quot;strict&quot;: true,
 &quot;noUncheckedIndexedAccess&quot;: true,
 &quot;noImplicitOverride&quot;: true,

 /* If transpiling with TypeScript: */
 &quot;module&quot;: &quot;NodeNext&quot;,
 &quot;outDir&quot;: &quot;dist&quot;,
 &quot;sourceMap&quot;: true,

 /* AND if you're building for a library: */
 &quot;declaration&quot;: true,

 /* AND if you're building for a library in a monorepo: */
 &quot;composite&quot;: true,
 &quot;declarationMap&quot;: true,

 /* If NOT transpiling with TypeScript: */
 &quot;module&quot;: &quot;preserve&quot;,
 &quot;noEmit&quot;: true,

 /* If your code runs in the DOM: */
 &quot;lib&quot;: [&quot;es2022&quot;, &quot;dom&quot;, &quot;dom.iterable&quot;],

 /* If your code doesn't run in the DOM: */
 &quot;lib&quot;: [&quot;es2022&quot;],
 },
 /* I'm considering all your code is in src/ */
 &quot;include&quot;: [&quot;src/**/*.ts&quot;]
}</div>
</code></pre><h2>Setting up the build script</h2>
Next, we need to set up a build script that will compile our TypeScript code to JavaScript. First, install <a href="https://www.npmjs.com/package/tsc-alias"><code>tsc-alias</code></a> to handle the aliases we defined in the <code>tsconfig.json</code> file:
<pre><code class="highlited-code-wrapper langbash"><div class="highlited-code" data-language="bash">npm i -D tsc-alias</div>
</code></pre>Then, you can add the <code>build</code> script by adding the following script to our <code>package.json</code> file:
<pre><code class="highlited-code-wrapper langjson"><div class="highlited-code" data-language="json">{
 &quot;scripts&quot;: {
 &quot;build&quot;: &quot;tsc &amp;&amp; tsc-alias&quot;
 }
}</div>
</code></pre><h2>Setting up the development script</h2>
Next, we need to set up a development script that will watch for changes in our TypeScript files and recompile them. Personally, I like to use <a href="https://tsx.is/"><code>tsx</code></a>, as it provides a much faster development experience compared to the built-in <a href="https://www.typescriptlang.org/docs/handbook/configuring-watch.html">TypeScript watcher</a> or <a href="https://typestrong.org/ts-node/">ts-node</a>. First, install <code>tsx</code>:
<pre><code class="highlited-code-wrapper langbash"><div class="highlited-code" data-language="bash">npm i -D tsx</div>
</code></pre>Then, you can add the <code>dev</code> script (in order to start the project in development mode) by adding the following script to your <code>package.json</code> file:
<pre><code class="highlited-code-wrapper langjson"><div class="highlited-code" data-language="json">{
 &quot;scripts&quot;: {
 &quot;build&quot;: &quot;tsc &amp;&amp; tsc-alias&quot;,
 &quot;dev&quot;: &quot;node --import=tsx --watch ./src/index.ts&quot;
 }
}</div>
</code></pre>Yes, you won&#39;t get typechecks while developing using <code>tsx</code>, but you can run <code>npm run build</code> for that or add a new <code>typecheck</code> scripts to your <code>package.json</code>, and run it whenever you want to check for type errors:
<pre><code class="highlited-code-wrapper langjson"><div class="highlited-code" data-language="json">{
 &quot;scripts&quot;: {
 &quot;build&quot;: &quot;tsc &amp;&amp; tsc-alias&quot;,
 &quot;dev&quot;: &quot;node --import=tsx --watch ./src/index.ts&quot;,
 &quot;typecheck&quot;: &quot;tsc --noEmit&quot;
 }
}</div>
</code></pre>

Using TypeScript in Node.js projects

TL; DR: No. Please add <code>node_modules</code> to your <code>.gitignore</code> file:
<pre><code><div class="highlited-code" data-language="">node_modules</div>
</code></pre><h2>But, why?</h2>
The <code>node_modules</code> directory is where your package manager (that can be <a href="https://www.npmjs.com/">npm</a>, <a href="https://classic.yarnpkg.com/">yarn</a> or <a href="https://pnpm.io/">pnpm</a>) will install all the project dependencies listed on your <code>package.json</code>. Regardless of the package manager you choose, a lockfile (<code>package-lock.json</code>, <code>yarn.lock</code> or <code>pnpm-lock.yaml</code>, respectelly) will be generated in the first time you install your project dependencies, describing the entire dependency tree. This way, every time you need to reinstall your project dependencies, you shall get the exact same files.
The lockfile should be commited to <code>git</code>, enabling the re-installation of the tree of dependencies in any other ambient, what makes unecessary to commit the <code>node_modules</code> directory to <code>git</code> (also, it cuts the size of your repository by a lot, as <code>node_modules</code> can consumes gigabytes of space).

Should I commit node_modules directory to git?

Sorting is a fundamental operation in the field of computer science, and because of this, there are various algorithms available to solve this problem. Each one is chosen based on factors such as the number of items to sort, the degree of order already present, the computer architecture where the algorithm will be executed, the type of storage device, among others. In this article, we will explore the insertion sort algorithm, understanding its nuances, strengths, and limitations.
<h2>What is insertion sort?</h2>
Insertion sort is a comparison-based algorithm that constructs its output one element at a time. It works similarly to the method we use to sort a deck of cards: we take one card at a time, compare it with the ones we already have in our hand, place the card in the correct position, and repeat this action until we finish our deck.
It is an adaptive algorithm, meaning it is efficient for small data sets, as well as other quadratic complexity algorithms (<math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi>O</mi><mo stretchy="false">(</mo><msup><mi>n</mi><mn>2</mn></msup><mo stretchy="false">)</mo></mrow><annotation encoding="application/x-tex">O(n^2)</annotation></semantics></math>O(n2)). It is simple to implement, requires a constant amount of memory, as changes in the list are made in the list itself (without the need to create a new list, which would double the use of memory), and is capable of sorting the list as it receives it.
<h2>How does insertion sort work?</h2>
Initialization: We assume that the first element of our list is already sorted. We proceed to the next element, consider it as our key, and insert it in the correct position in the sorted part of the list;
Iteration: For each item in the list (starting from the second element), we store the current item (key) and its position. Then we compare the key with the elements in the sorted part of the list (elements before the key);
Insertion: If the current element in the sorted part is greater than the key, we move that element one position up. This creates space for the new key to be inserted;
Repositioning the Key: We continue moving elements one position up until we find the correct position for the key. This position is found when we encounter an element that is less than or equal to the key or when we reach the beginning of the list;
Repeat: The process is repeated for all the elements in the list.
<h2>Implementation in JavaScript</h2>
To better understand the algorithm, let&#39;s implement it in JavaScript:
<pre><code class="highlited-code-wrapper langjs"><div class="highlited-code" data-language="js">/**
* Sorts an array of numbers using the insertion sort algorithm.
* 
* @param {number[]} numbers - The list of numbers to be sorted.
* @returns {number[]} - The sorted list of numbers.
*/
function insertionSort(numbers) {
 for (let i = 1; i &lt; numbers.length; i++) {
 const key = numbers[i]
 let j = i - 1
 
 while (j &gt;= 0 &amp;&amp; numbers[j] &gt; key) {
 numbers[j + 1] = numbers[j]
 j--
 }

 numbers[j + 1] = key
 }
}</div>
</code></pre><h2>Complexity Analysis</h2>
<h3>Time Complexity</h3>
Best Case (Array is already sorted): <math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi>O</mi><mo stretchy="false">(</mo><mi>n</mi><mo stretchy="false">)</mo></mrow><annotation encoding="application/x-tex">O(n)</annotation></semantics></math>O(n). This is because the inner loop (while) is not executed at all;
Average Case and Worst Case (Array is sorted in reverse order): <math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi>O</mi><mo stretchy="false">(</mo><msup><mi>n</mi><mn>2</mn></msup><mo stretchy="false">)</mo></mrow><annotation encoding="application/x-tex">O(n^2)</annotation></semantics></math>O(n2). In the worst case, each iteration will cause an element to be moved. This makes the algorithm inefficient for large data sets.
<h2>Space Complexity</h2>
Space Complexity: <math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi>O</mi><mo stretchy="false">(</mo><mn>1</mn><mo stretchy="false">)</mo></mrow><annotation encoding="application/x-tex">O(1)</annotation></semantics></math>O(1). Insertion sort is an in-place algorithm; it requires a constant amount of memory space.

Mastering Insertion Sort: A Detailed Guide

<h2>What is an Algorithm?</h2>
An algorithm is a precise and unambiguous specification of a sequence of computational steps that can be mechanically performed[^1]. From this, we can think of a function that receives a value or a set of values as input and returns a value or a set of values as its output.
An algorithm can be correct or incorrect. It is correct when, given its input parameters, its output is correct and, therefore, solves the computational problem for which it was developed. An incorrect algorithm, on the other hand, may stop with an incorrect output or may not stop at all for some input instances. Still, some incorrect algorithms can still have useful applications.
There can be different algorithms that solve the same problem, some more efficient, that is, faster than others. But, not every problem has an efficient solution. Such problems are known as <abbr title="Non-deterministic Polynomial time">NP</abbr>-complete.
<abbr title="Non-deterministic Polynomial time">NP</abbr>-complete problems are very interesting: even though no efficient algorithm has been found for this class of problems, it has not been proven that it is not possible to find an efficient algorithm (from class P, which can be solved in polynomial time) for such a problem. Moreover, if there were an efficient algorithm to solve an NP-complete problem, it would mean that there is an efficient algorithm for all <abbr title="Non-deterministic Polynomial time">NP</abbr>-complete problems.
<Alert title="P vs. NP">
P vs. NP is a fundamental question in computer science, specifically in the field of computational complexity theory. It concerns the relationship between two classes of problems. The P class consists of decision problems (problems with a yes or no answer) that can be quickly solved (in polynomial time) by a deterministic computer, meaning that the time needed to solve the problem grows at a manageable rate as the size of the input increases. On the other hand, the NP class consists of decision problems for which, if a solution is provided, it can be quickly verified (also in polynomial time) by a deterministic computer.

The crucial question, &quot;Is P equal to NP?&quot;, asks whether every problem whose solution can be quickly verified (NP) can also be solved quickly (P). This is profound because, if P were equal to NP, it would mean that all the problems that we can verify quickly can also be solved quickly. This has vast implications for various fields, including cryptography, optimization, and algorithm design.
</Alert>
<h2>Algorithmic Complexity</h2>
When we talk about algorithms, most of the time we are interested in the growth rate of time and space required to solve increasingly larger instances of certain problems. If we are interested in the time a particular algorithm takes to perform its function, we are interested in its time complexity. And the behavior of the time complexity limit of our algorithm in relation to the increase of the problem instances is called asymptotic time complexity. And it is this asymptotic complexity that determines the size of the problem that can be solved by algorithms[^2].
If an algorithm takes a time <math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi>c</mi><msup><mi>n</mi><mn>2</mn></msup></mrow><annotation encoding="application/x-tex">cn^2</annotation></semantics></math>cn2 for a constant <math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi>c</mi></mrow><annotation encoding="application/x-tex">c</annotation></semantics></math>c to process an input of size <math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi>n</mi></mrow><annotation encoding="application/x-tex">n</annotation></semantics></math>n, we say that the complexity of the algorithm is of the order of <math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><msup><mi>n</mi><mn>2</mn></msup></mrow><annotation encoding="application/x-tex">n^2</annotation></semantics></math>n2, or, in Bachmann–Landau notation (also called asymptotic notation and Big O notation), the algorithm has complexity <math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi>O</mi><mo stretchy="false">(</mo><msup><mi>n</mi><mn>2</mn></msup><mo stretchy="false">)</mo></mrow><annotation encoding="application/x-tex">O(n^2)</annotation></semantics></math>O(n2).
To get a better idea of what this means in relation to the runtime of our algorithm, consider that one unit of time on the computer on which we run our algorithm is 1 millisecond. Now, we want to know what the maximum size of input that our algorithm can process within a certain time limit (one second, one hour, and one day). Note, in the table below, how much the complexity of the algorithm interferes with the maximum size of the input it can handle, given the time limit:
<table>
<thead>
<tr>
<th>Time Complexity</th>
<th>1 second</th>
<th>1 minute</th>
<th>1 hour</th>
</tr>
</thead>
<tbody><tr>
<td><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi>n</mi></mrow><annotation encoding="application/x-tex">n</annotation></semantics></math>n</td>
<td>1000</td>
<td>60000</td>
<td>360000</td>
</tr>
<tr>
<td><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi>n</mi><msub><mrow><mi>log</mi><mo>⁡</mo></mrow><mn>2</mn></msub><mi>n</mi></mrow><annotation encoding="application/x-tex">n \log_2 n</annotation></semantics></math>nlog2​n</td>
<td>140</td>
<td>4895</td>
<td>204095</td>
</tr>
<tr>
<td><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><msup><mi>n</mi><mn>2</mn></msup></mrow><annotation encoding="application/x-tex">n^2</annotation></semantics></math>n2</td>
<td>31</td>
<td>244</td>
<td>1897</td>
</tr>
<tr>
<td><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><msup><mi>n</mi><mn>3</mn></msup></mrow><annotation encoding="application/x-tex">n^3</annotation></semantics></math>n3</td>
<td>10</td>
<td>39</td>
<td>153</td>
</tr>
<tr>
<td><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><msup><mn>2</mn><mi>n</mi></msup></mrow><annotation encoding="application/x-tex">2^n</annotation></semantics></math>2n</td>
<td>9</td>
<td>15</td>
<td>21</td>
</tr>
</tbody></table>
Even though we can build faster computers, the increase in the execution speed of less efficient algorithms would not be so significant, so we should always seek the most efficient algorithm to address a given problem.
[^1]: AHO, Alfred V.; ULLMAN, Jeffrey D. Foundations of Computer Science. Stanford, 1994.
[^2]: AHO, Alfred V.; HOPCROFT, John E.; ULLMAN, Jeffrey D. The Design and Analysis of Computer Algorithms. Addison-Wesley, 1974.

Introduction to algorithms

<a href="https://facebook.github.io/jsx/">JSX</a> is an excellent abstraction for building web interfaces. Introduced by Facebook and popularized by React, it&#39;s an extension of JavaScript designed to abstract nested function calls. It&#39;s expected that JSX code will be pre-processed (transpiled) into valid JavaScript before being executed in browsers or environments like Node.js.
<h2>Project Setup</h2>
First of all, let&#39;s start our project and install the necessary dependencies:
<pre><code><div class="highlited-code" data-language="">npm init -y
npm i fastify react react-dom
npm i -D @types/node @types/react @types/react-dom tsx typescript</div>
</code></pre>Now, we set up the scripts for our project. The <code>package.json</code> should look like this:
<pre><code class="highlited-code-wrapper langjson"><div class="highlited-code" data-language="json">{
 &quot;type&quot;: &quot;module&quot;,
 &quot;name&quot;: &quot;fastify-react&quot;,
 &quot;version&quot;: &quot;1.0.0&quot;,
 &quot;author&quot;: &quot;Douglas Moura &lt;douglas.ademoura@gmail.com&gt;&quot;,
 &quot;description&quot;: &quot;POC on rendering React components from Fastify&quot;,
 &quot;main&quot;: &quot;dist/main.js&quot;,
 &quot;scripts&quot;: {
 &quot;start&quot;: &quot;tsc &amp;&amp; node dist/main.js&quot;,
 &quot;dev&quot;: &quot;tsx --watch src/main.tsx&quot;,
 &quot;build&quot;: &quot;tsc&quot;
 },
 &quot;license&quot;: &quot;ISC&quot;,
 &quot;dependencies&quot;: {
 &quot;fastify&quot;: &quot;^4.25.2&quot;,
 &quot;react&quot;: &quot;^18.2.0&quot;,
 &quot;react-dom&quot;: &quot;^18.2.0&quot;
 },
 &quot;devDependencies&quot;: {
 &quot;@types/node&quot;: &quot;^20.11.6&quot;,
 &quot;@types/react&quot;: &quot;^18.2.48&quot;,
 &quot;@types/react-dom&quot;: &quot;^18.2.18&quot;,
 &quot;tsx&quot;: &quot;^4.7.0&quot;,
 &quot;typescript&quot;: &quot;^5.3.3&quot;
 }
}</div>
</code></pre>And this is the <code>tsconfig.json</code> that we will use:
<pre><code class="highlited-code-wrapper langjson"><div class="highlited-code" data-language="json">{
 &quot;compilerOptions&quot;: {
 &quot;target&quot;: &quot;ESNext&quot;,
 &quot;module&quot;: &quot;ESNext&quot;,
 &quot;lib&quot;: [
 &quot;dom&quot;,
 &quot;es6&quot;,
 &quot;es2017&quot;,
 &quot;esnext.asynciterable&quot;
 ],
 &quot;skipLibCheck&quot;: true,
 &quot;sourceMap&quot;: false,
 &quot;outDir&quot;: &quot;./dist&quot;,
 &quot;moduleResolution&quot;: &quot;node&quot;,
 &quot;removeComments&quot;: true,
 &quot;noImplicitAny&quot;: true,
 &quot;strictNullChecks&quot;: true,
 &quot;strictFunctionTypes&quot;: true,
 &quot;noImplicitThis&quot;: true,
 &quot;noUnusedLocals&quot;: true,
 &quot;noUnusedParameters&quot;: true,
 &quot;noImplicitReturns&quot;: true,
 &quot;noFallthroughCasesInSwitch&quot;: true,
 &quot;allowSyntheticDefaultImports&quot;: true,
 &quot;esModuleInterop&quot;: true,
 &quot;emitDecoratorMetadata&quot;: true,
 &quot;experimentalDecorators&quot;: true,
 &quot;resolveJsonModule&quot;: true,
 &quot;baseUrl&quot;: &quot;.&quot;,
 &quot;jsx&quot;: &quot;react-jsx&quot;
 },
 &quot;exclude&quot;: [
 &quot;node_modules&quot;
 ],
 &quot;include&quot;: [
 &quot;./src/**/*.ts&quot;,
 &quot;./src/**/*.tsx&quot;
 ]
}</div>
</code></pre><h2>Creating our components</h2>
The React ecosystem already provides the necessary tools for rendering our components to HTML and sending them directly from the server to our client. So, first, let&#39;s create the root component:
<pre><code class="highlited-code-wrapper langts"><div class="highlited-code" data-language="ts">// src/components/root.tsx

type RootProps = {
 children: React.ReactNode
 title: string
}

export function Root({ children, title }: RootProps) {
 return (
 &lt;html lang=&quot;en&quot;&gt;
 &lt;head&gt;
 &lt;meta charSet=&quot;utf-8&quot; /&gt;
 &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot; /&gt;
 &lt;title&gt;{title}&lt;/title&gt;
 &lt;/head&gt;
 &lt;body&gt;{children}&lt;/body&gt;
 &lt;/html&gt;
 )
}</div>
</code></pre>And our home page:
<pre><code class="highlited-code-wrapper langts"><div class="highlited-code" data-language="ts">// src/components/index.tsx

export function App() {
 return (
 &lt;h1&gt;Hello, World!&lt;/h1&gt;
 )
}</div>
</code></pre><h2>Configuring Fastify to Render Our React Component</h2>
As we don&#39;t intend to load React to hydrate our HTML on the client side, we can use the <code>renderToStaticMarkup</code> function exported from <code>react-dom/server</code>. Our server initialization file will look like this:
<pre><code class="highlited-code-wrapper langts"><div class="highlited-code" data-language="ts">import Fastify from 'fastify'
import { renderToStaticMarkup } from 'react-dom/server'

import { App } from './components/index.js'
import { Root } from './components/root.js'

type RenderArgs = {
 children: React.ReactNode
 title: string
}

const render = ({ title, children }: RenderArgs) =&gt; {
 return `&lt;!DOCTYPE html&gt;${renderToStaticMarkup(
 &lt;Root title={title}&gt;{children}&lt;/Root&gt;
 )}`
}

const fastify = Fastify({
 logger: true,
})

fastify.get('/', async function handler(_request, reply) {
 reply.type('text/html')
 return render({ children: &lt;App /&gt;, title: 'Hello, World!' })
})

try {
 await fastify.listen({ port: 3000 })
} catch (err) {
 fastify.log.error(err)
 process.exit(1)
}</div>
</code></pre>If you start the project now (<code>npm run dev</code>), you should see the page at <a href="http://localhost:3000/">http://localhost:3000</a>. Of course, we can enhance our implementation by using the new streaming API, introduced in React 18 (<a href="https://github.com/reactwg/react-18/discussions/106#discussion-3611411">which is the recommended method</a>). To do that, we will make the following changes to our code:
<pre><code class="highlited-code-wrapper langts"><div class="highlited-code" data-language="ts">import Fastify from 'fastify'
import { renderToStaticNodeStream } from 'react-dom/server'
import { Transform } from 'node:stream'

import { App } from './components/index.js'
import { Root } from './components/root.js'

type RenderArgs = {
 children: React.ReactNode
 title: string
}

const render = ({ title, children }: RenderArgs) =&gt; {
 let isFirstChunk = true
 const prepend = new Transform({
 transform(chunk, _encoding, callback) {
 if (isFirstChunk) {
 isFirstChunk = false
 this.push('&lt;!DOCTYPE html&gt;')
 }
 callback(null, chunk)
 },
 })

 return renderToStaticNodeStream(
 &lt;Root title={title}&gt;{children}&lt;/Root&gt;
 ).pipe(prepend)
}

const fastify = Fastify({
 logger: true,
})

fastify.get('/', async function handler(_request, reply) {
 const stream = render({ children: &lt;App /&gt;, title: 'Hello, World!' })

 reply.type('text/html')
 reply.send(stream)
})

try {
 await fastify.listen({ port: 3000 })
} catch (err) {
 fastify.log.error(err)
 process.exit(1)
}</div>
</code></pre>And with that, we are able to render our React components on the server side and stream them to our client. Here is the <a href="https://github.com/DouglasdeMoura/react-fastify">link</a> to the repository.

Rendering JSX on the Server with Fastify

Estimating, implementing, and deploying software rapidly is a characteristic of powerful programmers, as <a href="https://www.kentbeck.com/">Kent Beck</a> mentions in his book <a href="https://www.oreilly.com/library/view/extreme-programming-explained/0201616416/">Extreme Programming Explained</a>. In this article, I will explore these three points, inserting my own opinions on each one.
<h2>Estimation</h2>
Estimating a software project is <a href="https://jacobian.org/2021/may/20/estimation/">difficult</a>, and there are various different techniques on how to estimate a software project. You can create a method, through your own experience, learn the method used by other companies but, you must pay attention that the central point is that you have a good idea of how much time the project will take. Projects have a beginning, middle, and end. Learn to estimate your work.
<h2>Implementation</h2>
For me, particularly, implementing is the most fun part of the project. And as with any job, we have to be pragmatic in the choice of language and tools. Being pragmatic in the choice does not necessarily mean using the same as everyone else, because, often, some tools continue to be strong in the market due to pure inertia. <a href="https://expressjs.com/">Express</a> is a good example of this. Besides there being many better options with better support (like <a href="https://fastify.dev/">Fastify</a>), many teams still start new projects with Express, even if it is not being maintained regularly, does not handle Promise rejections, etc.
Besides the issue of tool choice, it is necessary that you master the technology stack of your project, being able to implement the best solutions in the shortest possible time. At the tip of your tongue, you have to know a good pattern to apply in the project, a good backend framework, a good frontend framework or even a good full-stack framework. And the experience of development cannot be left out. For the implementation to be fast, the understanding of the project must be easy, its documentation adequate, and its tests need to validate the intention flows of the user who will use the system.
<h2>Deployment</h2>
Today, can you build an entire project and put it into production, by yourself? And I&#39;m not talking about uploading your project to a completely managed platform, like Vercel, but rather, about taking a Linux machine, installing the necessary tools, and exposing your application to the web. And no, this is not any kind of purism. If you are not a startup that can burn a few million reais per year, without worrying about the cost of your infrastructure, you should, at least, know how to start your application and keep it active between server restarts (preferably using containers), put it behind a reverse proxy (like <a href="https://www.nginx.com/">NGINX</a> or <a href="https://caddyserver.com/">Caddy</a>), configure a firewall, and make a backup of the database in three different places. You can still bring up multiple instances of your application and use the same proxy tool as a load balancer to distribute your application&#39;s access to the different instances that are running.

The Powerful Programmer

You can create hashes in Node.js without the need to install any external library. Usually, I create the following utility function in the projects I work on:
<pre><code class="highlited-code-wrapper langjavascript"><div class="highlited-code" data-language="javascript">/**
 * Hashes a string using md5
 *
 * @param {string} str
 * @returns {string}
 */
export const md5 = (str) =&gt; createHash('md5').update(str).digest('hex')</div>
</code></pre>And I use it to replace the <a href="https://www.npmjs.com/package/md5">md5</a> library whenever I come across it.
Note that you can create hashes for any algorithm supported by the OpenSSL version on your platform. On Linux and Mac, you can see which algorithms are available with the command <code>openssl list -digest-algorithms</code>.

Generating MD5 hashes on Node.js

Finding the greatest common divisor in TypeScript

Understanding Tail Call Optimization With JavaScript

The <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius"><code>border-radius</code></a> property allows you to round the edges of an element. Giving the same <code>border-radius</code> value to the parent element and child element doesn&#39;t result in the best appearance, so how do you calculate the border radius of nested elements?
Check out the demo below:
<CodePen id="KKbzrER" />

In the example above, the two circles have the same radius and are inscribed in squares with rounded edges. Note that the radius of the border is the same as the radius of the circle. We want the end of the arc of the circle each edge starts to be coincident with both squares. This can be done in two ways:
<ol>
<li>Radius of the border of the inner square (Ri) + spacing between squares (E) = radius of the border of the outer square (Re);</li>
<li>Outer square border radius (Re) - spacing between squares (E) = inner square border radius Ri.</li>
</ol>
Note that the center of the circles inscribed in the squares do not coincide, as well as the end of the border arc. Still, the result is satisfactory.
<h2>Bonus</h2>
In this interactive example, made by <a href="https://jhey.dev/">Jhey Tompkins</a>, you can see how this rule applies in practice:
<CodePen user="jh3y" id="KKrYaxx" />

<h2>References</h2>
<ul>
<li><a href="https://twitter.com/jh3yy/status/1688542283602231296">@jh3yy</a></li>
<li><a href="https://www.30secondsofcode.org/css/s/nested-border-radius/">Tip: Perfect nested border radius in CSS</a></li>
<li><a href="https://www.w3schools.com/cssref/css3_pr_border-radius.asp">CSS3 border-radius Property</a></li>
<li><a href="https://www.w3.org/TR/css-backgrounds-3/#corners">CSS Backgrounds and Borders Module Level 3</a></li>
</ul>