DEV Community: Santiago Rincón

From Chaos to Clarity: Help Us Build an Open-Source Brainstorm Engine

Santiago Rincón — Mon, 28 Jul 2025 19:40:01 +0000

Every dev has a system for notes.
Mine was 40+ GPT chats, folders full of screenshots, and zero follow-through.

So I built something to fix it.

Meet `evolving_ideas`

evolving_ideas is the first CLI tool in the Trivox ecosystem: a growing suite of automation tools for devs and creators who live at the intersection of code and creativity.

This first tool helps you:

Capture raw thoughts quickly (via prompt-based templates)
Evolve ideas with guided iterations
Version your brainstorms like code
Turn ideas into TDDs, R&D plans, or creative briefs

All from your terminal.
All open-source.
Built for real-world workflows, not theory.

Why We're Building This

Creative chaos is Thanos, inevitable, but organizing it shouldn't slow you down.

Trivox is for developers and creatives who build things that don’t fit into Jira or Notion.

It’s for people who jump between code, AI, content, and experiments, and need tools that grow with them.

Join the Build

We’re looking for contributors who:

Love improving developer workflows
Are into CLI tools, automation, and Python
Enjoy turning fuzzy ideas into structured systems
Want to grow with a project from the ground up

Beginner-friendly issues are tagged, and we’ll support you with context, mentorship, and community.

🔗 Links

Repo on GitHub: github.com/trivox/evolving-ideas
Org Website: trivox.io
Docs: docs.trivox.io
Discord/Contact: discord.gg/ER9Sryjd
Good First Issues: [github.com/trivox-io/evolving-ideas/issues](https://github.com/trivox-io/evolving-ideas/issues?q=state%3Aopen%20label%3A%22good%20first%20issue%22?

Bonus: Help Us Grow

If you like what we’re building, we'd love your feedback, stars, shares, or memes.

Let’s bring clarity to the chaos.

Recursion in Javascript

Santiago Rincón — Wed, 24 Jan 2024 14:00:00 +0000

Have you ever found yourself needing to loop through a complex multidimensional object in JavaScript and didn't know how to do it? If this is the case, you should consider using Google as a powerful tool to find a solution. However, since you're here, if you keep reading, you may find an elegant solution to this problem.

Let's start by taking the following tree as an example.

const mySuperComplexTree = {
  name: "root",
  children: [
    {
      name: "child-1",
      children: [
        {
          name: "child-1-1",
          children: [
            {
              name: "child-1-1-1",
              children: []
            }
          ]
        }
      ]
    },
    {
      name: "child-2",
      children: []
    }
  ]
};

The problem: You have to print to the console each one of the node names, including the root.

The first time we come across these kinds of problems, we tend to get ourselves led by the Dunning-Kruger effect and think that this can be solved with a simple for loop. The short answer is yes... But also, no, that's not always the best approach.

Let's see what happens when we follow this approach:

console.log(mySuperComplexTree.name);
for (const node of mySuperComplexTree.children) {
  console.log(node.name);
  for (const node2 of node.children) {
    console.log(node2.name);
    for (const node3 of node2.children) {
      console.log(node3.name);
    }
  }
}

// Output:
// root
// child-1
// child-1-1
// child-1-1-1
// child-2

As you might see, even though it worked, there are several issues with this solution:

First of all, it's not easy to read. Nobody wants to see a bunch of nested loops on their code and you're a team player, right?
What will happen if this tree is supposed to change during runtime? The current implementation is not dynamic, so you must modify the code and add more nested loops manually. This can make the code harder to read and less maintainable.

Here's where recursion comes in handy.

So, what's a recursive function anyway?

It is a function that calls itself during its execution. This characteristic allows it to be used to solve problems that can be broken down into smaller and simpler sub-problems that are identical to the overall problem.

An easy way to visualize this would be a countdown function using recursion. Let's see.

function countDownFrom(n) {
  if (n < 0) return;
  console.log(n);
  countDownFrom(n - 1);
}
countDownFrom(10);

In this example, the countDownFrom function prints a number, then calls itself (recursion) with the number you passed, minus one, repeating this process until it reaches a base case (in this case, when n is less than 0).

As you can see, it's basically a loop but simpler and more elegant.

Let's go back to our tree object.

Our initial problem is that we need to print all the node names of the tree, and we are going to use recursion to solve it because we noticed our tree has a constant structure where each node has a name property (the string we are going to print), and a children property (an array of nodes).

So, our function needs to receive a node and print its name, then as all of the children are similar, we can loop one time through the children and just call the same function passing the child. This will receive a doe, print its name a repeat the process.

function printNodeNames(tree) {
  console.log(tree.name);
  for (const node of tree.children) {
    printNodeNames(node);
  }
}

printNodeNames(mySuperComplexTree);

// Output:
// root
// child-1
// child-1-1
// child-1-1-1
// child-2

As you can see, the printNodeNames function solves our initial problem.

It starts by printing the name of the current node (which is passed as an argument). Then, it loops through the children's array of the current node, and for each child node, it calls itself (recursion, again), passing the child node as the new argument. This process continues until it has printed all node names in the tree. Just what we said we needed.

This function demonstrates a common pattern for traversing a tree structure: processing the current node (in this case, printing its name), then recursively processing all child nodes.

This technique is known as a depth-first traversal because it goes as deep as possible into the tree before backtracking.

Why to use recursion

If for some reason, you're not convinced yet about using recursive functions, I'm going to leave you with four reasons why recursive functions are so useful.

Simplicity: Recursion is often more straightforward to understand than its iterative counterparts (for, while, etc). They can turn complex tasks into much simpler ones.
Problem Solving: Some problems are inherently recursive, like tree traversals, Tower of Hanoi, etc. For such problems, it is easier to use a recursive function.
Divide and Conquer: Recursive functions allow you to break down larger problems into smaller, more manageable sub-problems. This is the basis of many efficient algorithms like merge sort and quick sort.
Less Code: Recursive functions can lead to less code. Ok, shorter code doesn't necessarily mean better, but it can make the code more readable.

In conclusion, Recursion is not only an elegant solution for some problems but it is a powerful and useful tool for tasks that can be broken down into smaller ones, such as traversing a tree or sorting a list.

Their key components are the base case (the condition under which the function stops calling itself) and the recursive case (the part of the function that calls itself).

However, they can be more difficult to understand and debug than iterative solutions, and they can also lead to performance issues such as stack overflow if not implemented carefully. Therefore, it's important to use recursion judiciously and ensure that the base case is always reachable.

I hope you found this post useful and please let me know if you have used recursive functions before for a real-life scenario.

Callback functions in Javascript explained

Santiago Rincón — Sun, 12 Mar 2023 18:24:13 +0000

Imagine you are leading a development team responsible for creating a website, and you've found that the only remaining task for your team is to add a logo to the website.

However, as a team of developers, you guys lack the necessary skills to design a professional logo. Thus, you must reach out to the design team to get the piece of art. Once the design team has provided the logo, you can then assign the task of adding it to the website to one of your developers.

It's currently 2 PM on a Friday and you're eagerly waiting for the design team to provide the necessary design. Nonetheless, as time passes, you become increasingly frustrated with the delay. Finally, at 4:30 PM, the design team delivers the art, and now you're able to assign the task to a developer. However, due to the delay, it is now 6 PM, and the team is frustrated that they could not complete the work earlier.

Now imagine instead of waiting for the design team to deliver before assigning the task to a developer, you could have asked the design team to provide the logo directly to the developer responsible for adding it to the website. That could have saved you time.

This way, the developer could have started working on the container and had everything ready to add the design as soon as it was received. Everyone's happy. This is a callback function, and it's such a magical thing.

So what exactly are callback functions?

In simple terms, a callback function is just a function you can pass to another function for it to be invoked after performing another action.

The most interesting thing about them is that we use them all the time without even realizing it. Here are some examples:

Event handling

In web development, callback functions are commonly used to handle events: mouse clicks, key presses, form submissions, and so on. Event listeners are attached to HTML elements and triggered when the corresponding event occurs. The callback function is then executed, allowing the program to respond to the event.

I'm sure you've used something like this.

const button = document.querySelector("button");

button.addEventListener("click", function() {
  console.log("Button clicked!");
});

Asynchronous operations

Callback functions are often used in JavaScript to handle asynchronous operations, for example: making an HTTP request. The callback function is passed to the asynchronous function, and it is called when the data is fetched.

fetch("https://pokeapi.co/api/v2/pokemon/ditto")
  .then(function(response) {
    // callback function executed when the HTTP request is complete
    return response.json();
  })
  .then(function(data) {
    // callback function executed when the response is converted to JSON
    console.log(data);
  });

Array iteration

The Array.prototype.forEach(), Array.prototype.map(), etc. methods are examples of built-in JavaScript functions that take a callback function as an argument. These functions are used to iterate through an array and perform some operation for each element.

const numbers = [1, 2, 3, 4, 5];

// forEach method with callback function
numbers.forEach(function(number) {
  console.log(number);
});

// map method with callback function
const squaredNumbers = numbers.map(function(number) {
  return number * number;
});

In all of these examples, callback functions allow programs to be more flexible and responsive to changing conditions. They allow us to write code that can respond to events or data as they become available, and provide a way to separate concerns in our code, making it more modular, scalable, and easier to maintain.

The best part of it is that you can implement them yourself. Let's take Array.prototype.map() to see calback functions in detail. This method takes a callback function as an argument and returns a new array with the result of calling the callback function on each element of the original array.

const numbers = [1, 2, 3, 4, 5];

const squaredNumbers = numbers.map(function(number) {
  return number * number;
});

console.log(squaredNumbers); // Output: [1, 4, 9, 16, 25]

In this example, we have an array of numbers, and we want to create a new array with the squared values of each number. We can achieve this by calling the map() method on the numbers array and passing a callback function that takes a single argument (the current element of the array) and returns the squared value of that element.

The map() method then iterates through each element of the original array and applies the callback function to each element. The result of each call to the callback function is stored in a new array, which is returned once the iteration is done.

But, how does it work internally? Let's see a simplified example of how the map() method works.

Array.prototype.map = function(callback) {
  const newArray = []; // create a new array to store the result
  for (let i = 0; i < this.length; i++) { // iterate over each element of the original array
    const result = callback(this[i], i, this); // call the callback function on each element
    newArray.push(result); // add the result to the new array
  }
  return newArray; // return the new array with the results
};

In this implementation, we define the map() method on the Array.prototype object, which allows us to call the method on any array object. The callback parameter is the function that will be called on each element of the array.

Inside the method, we create an empty array newArray to store the results of calling the callback function on each element. We then use a for loop to iterate over each element of the original array.

On each iteration, we call the callback function with three arguments: the current element of the array this[i], the index of the current element i, and the original array this. The callback function can use these arguments to transform the current element of the array and then return the transformed value.

We then add the result of the callback function to the newArray using the push() method, and finally, we return the newArray with the results of calling the callback function on each element of the original array.

Now let's try to turn the metaphor at the beginning of this post into code with and without callback functions.

With callback function

// Example with callback functions for website development process

// Assume we have a function that represents the development team
function developmentTeam() {
  console.log("Development team is ready to add the illustration to the website");
}

// Assume we have a function that represents the design team
function designTeam(callback) {
  console.log("Design team is working on the illustration...");
  setTimeout(function() {
    console.log("Design team finished the illustration!");
    callback();
  }, 1500); // Simulate a delay of 1.5 seconds to complete the illustration
}

// Assume we have a function that represents the implementation task
function implementationTask() {
  console.log("Developer added the illustration to the website");
}

// Assume we want to coordinate between the development and design teams to complete the website
developmentTeam();
designTeam(implementationTask);

In this example, we have three functions: developmentTeam(), designTeam(callback), and implementationTask(). The first function represents the development team, while the second function represents the design team. The designTeam(callback) function takes a callback function as an argument, which represents the implementation task that the development team needs to perform.

Inside the designTeam(callback) function, we simulate a delay of 1.5 seconds to represent the time it takes for the design team to complete the design.

Once the design is completed, we call the callback function to notify the development team that they can proceed with the implementation task. Finally, we call developmentTeam() to indicate that the development team is ready to add the illustration to the website.

By using a callback function, we can ensure that the implementation task is only executed once the design team has completed the illustration. This helps to streamline the development process and avoid frustration on the development team.

Now without callback function

// Example without callback functions for website development process

// Assume we have a function that represents the development team
function developmentTeam() {
  console.log("Development team is ready to add the illustration to the website");
}

// Assume we have a function that represents the design team
function designTeam() {
  console.log("Design team is working on the illustration...");
  setTimeout(function() {
    console.log("Design team finished the illustration!");
    implementationTask();
  }, 1500); // Simulate a delay of 1.5 seconds to complete the illustration
}

// Assume we have a function that represents the implementation task
function implementationTask() {
  console.log("Developer added the illustration to the website");
}

// Assume we want to coordinate between the development and design teams to complete the website
developmentTeam();
designTeam();

In this example, we have the same three functions: developmentTeam(), designTeam(), and implementationTask(). However, instead of passing a callback function to designTeam(), we call implementationTask() directly from within designTeam() once the deign is complete.

While this approach may work in some cases, it can lead to problems if the implementation task depends on other tasks that need to be completed before it. In such cases, it may be more difficult to manage the dependencies and ensure that tasks are executed in the correct order.

In general, using callback functions can help you simplify the development process and make it easier to manage complex dependencies between functions.

In conclusion, callback functions are an essential feature in JavaScript that allows developers to write asynchronous, event-driven code, among other things. By passing a function as an argument to another function, the callback function can be executed once the first function has completed its task. This allows us, developers, to write more efficient and maintainable code, as they can avoid blocking the execution of code while waiting for long-running operations to complete.

Callback functions are used extensively for many purposes, like handling user input, making HTTP requests, and working with timers. They are also commonly used in modern web development frameworks, such as Express and React, to handle asynchronous operations.

While callback functions can be a powerful tool in a developer's toolbox, it's essential to use them carefully and understand the potential pitfalls. For example, callback functions can lead to callback hell, where the code becomes difficult to read and manage due to excessive nested callbacks. Developers should also consider using other techniques, such as promises or async/await, to manage complex dependencies between functions.

Overall, callback functions are a crucial part of JavaScript, and every developer should understand how to use them effectively to write efficient, scalable, and maintainable code.

Why to keep it simple

Santiago Rincón — Mon, 07 Nov 2022 16:35:49 +0000

I wanna share with you one of the most important lessons I've learned working as a software developer: Do not overengineer your software.

Most of the software developers I know—including myself.— when we were young, wild, and free—and by that I mean: junior.—, we used to think that by offering complex solutions to simple problems, we were going to impress everybody with our code. Well, let me tell you... We didn't!

Lets see my experience. It was December 2014 when I got this call from a man who had seen a few simple web pages I had developed using raw HTML, CSS, and javascript, so he wanted to make me an offer I couldn't refuse.

He wanted a social media platform where people could talk about their spiritual beliefs. It sounded fun, so I thought: "Yeah! Why not? That would be cool!"

Besides, by that time, I had developed a custom blank theme for WordPress, a PHP calendar, and even a basic CMS using PHP and this simple MVC framework I'd created myself.–reading a lot of blog posts though– and... How to forget... This WYSIWYG jQuery plugin. I Miss those times.

What could go wrong? [sight]... Everything went wrong! 🤡

We started development in 2015. It was a difficult journey due of my lack of experience in real-life projects... We made it happen though.

I'm not planning on going deeper into details, but it was this huge monolithic app mixing an actually solid backend and the mess of a frontend with a lot of .phtml files mixing PHP, CSS, HTML, and even javascript.

To achieve all the requirements I made this super huge javascript function that worked as a data access layer, interpreter, and presenter at the same time, while also offering utilities I actually didn't reuse that much.

I made it work decently, nontheless whenever they asked for a new feature it was a pain in the ass to the point that I had to re-engineer it from scratch several times.

It wasn't scalable, it wasn't easy to implement, and you needed to add a lot of code just to get a simple button. Even the layers in the backend closer to the frontend were getting affected by this bad practice. Then I couldn't handle it anymore so I left the project. The code stayed there, and nobody was able to implement it once again. You can imagine my frustration.

The reason I'm sharing this is that I've seen a lot of people out there creating super complex solutions, maybe thinking it will guarantee a job or just trying to demonstrate their knowledge by creating their own stuff, which is not bad, as long as you keep it simple.

My best advice for juniors is basically that. Keep it simple, don't stop thinking about solutions, don't stop, don't stop being a rebel, keep it simple though. There's no need for you to reinvent the wheel. There are a lot of helpful tools and resources at your disposal, use them to build something better. Keep your code as clean as possible, and something really important: frontend might be the new backend... It's not the same though.

Now I would like to read your experiences. Have you ever face this situation? what did you do to overcome the neccesity of overengineering software?

How to add a custom font to an HTML canvas

Santiago Rincón — Tue, 27 Apr 2021 17:02:58 +0000

So yesterday I was working on a canvas and I realized that the font I had tried to add using @font-face with CSS, wasn't working at all.

After doing what I guess every developer in my position would do—Yeah, I mean searching on StackOverflow‒I find that this is a pretty common issue.

But how can you solve this? Well, the solution is simple, even though I hope you have at least basic knowledge of HTML, CSS, and Javascript

HTML

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Canvas Project</title>
<style type="text/css"  rel="stylesheet">
    body {
        margin: 0;
    }
</style>
</head>
<body>
<canvas></canvas>
<script src="canvas.js"></script>
</body>
</html>

As you can see we have a simple HTML5 document here, with a <canvas> tag and a <script> tag that we will use to load our javascript code.

Javascript

Now it's time for us to work on the javascript file, the one that will let us load our custom font. I'll explain it step by step.

canvas = document.querySelector('canvas');

The first thing we need to do is to get the canvas element inside a variable. To do that we use the document.querySelector() method, which receives the element name ('canvas' in this case). Now we can interact with the canvas element from our javascript code.

canvas = document.querySelector('canvas');
var myFont = new FontFace('myFont', 'url(assets/fonts/myFont/myFont.otf)');

Now we create our font object using the javascript class FontFace which receives the font family and the source.

This is an experimental technology, you can learn more about i's browser compatibility here

canvas = document.querySelector('canvas');
var myFont = new FontFace('myFont', 'url(assets/fonts/myFont/myFont.otf)');

myFont.load().then(function(font){

  // our code here

});

Now we can load our font. As you can see, we are using .then() after loading the font because this is an asynchronous operation so we need to get the font before continue.

canvas = document.querySelector('canvas');
var myFont = new FontFace('myFont', 'url(assets/fonts/myFont/myFont.otf)');

myFont.load().then(function(font){

  // with canvas, if this is ommited won't work
  document.fonts.add(font);
  console.log('Font loaded');

});

There you go. What happened here is that we told the object FontFace to load our font and then we pass that font as a parameter of the function that will be executed next, the one inside the .load() method. Then we add the font to our document fonts and that's it, now we can display our "Hello, World!" with our custom font.

...

// set width and height as screen w and h
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

...

With these two lines, we specify our canvas width and height the same as the screen width and height.

...

// get canvas context
var ctx = canvas.getContext("2d");
ctx.font = "50px myFont"; // set font
ctx.textAlign = "center"; // center text
ctx.fillText("Hello, World!", canvas.width/2, canvas.height/2); // draw centered text

...

Now, all we need to do is to get our canvas context, assign the font we're gonna use, center the text, and draw our "Hello, World!" in the middle of our canvas.

Here You'll find the whole javascript code. I hope you have found this useful. If anything, just let me know in the comments, and please don't forget to follow me, Iḿ working on an interesting Shell Scripting series focused on video games. Till the next time.

Back to basics; Shell Scripting

Santiago Rincón — Mon, 26 Apr 2021 20:54:27 +0000

Hello, world, it's been a while since the last time I wrote something here, and it's been crazy all the things that have happened since.

Besides quarantine and stuff, I lost my old job, I've had to move twice, lost my computer, and had a lot of bad times. Nonetheless, not everything are bad news.

About a week ago, I decided to go back to my start point, bring back my old childhood dream; becoming an indie game developer.

Anyways, this is not a post for complaining or talking about my life dreams —for that matter, I got my personal blog, there you'll find my life experience kinda like mixed with video game stories—, we're here to talk about dev stuff and coding.

So, The main reason behind this post is to introduce my new tutorial series where you'll be able to learn Shell Scripting basics and how to develop an easy game by just using your command prompt, a game that will be available on GitHub for you to fork it or contribute. It'd be fun to develop a game as a community.

Please stay tuned for more info about this tutorial, so please, follow me on Twitter and if there's something, in particular, you want to learn about shell scripting, please let me know in the comments down below.

Thanks for reading, till the next time :)

Getting started with PHP

Santiago Rincón — Mon, 06 Apr 2020 21:47:29 +0000

Hi there! When you start with web development, at some point, you realize that HTML and CSS are not enough to achieve your project goals.

There are a lot of technologies to build dynamic websites and PHP is one of the easiest ones and perfect if you want to build simple backends. Besides, it is a good option for beginners' self-taught web developers. It is really easy, and there is a lot of documentation.

This is the fist of a series of posts in which we will learn the basics of programming logic using PHP.

What is PHP?

Paraphrasing the omniscient Wikipedia, PHP is a programming language specially created for web development, and it is usually processed on a web server by a PHP interpreter implemented.

In simple words, it is a programing language to write server side web applications.

What do I need?

A computer, obviously, with Windows, Linux or Mac.
You need to install either WAMP, LAMP, MAMP or XAMPP
- Windows users: WAMP
- Linux users: LAMP
- Mac users: MAMP
Basic shell commands
Your favorite text editor

Hello, World!

Once you install the Apache server and PHP we can start coding. Open the command line, go to your server root (Usually C:\wamp\www\ on Windows, /var/www/ on Linux, and /Applications/MAMP/htdocs/ on Mac) to create a new folder and our first PHP file.

mkdir my-first-php-script

cd my-first-php-script

touch helloworld.php
// On windows
type nul > helloworld.php

Open the file you just created and add the following lines

<?php
echo 'Hello, World!';
?>

Now, if you are using WAMP or LAMP, go to http://localhost/my-first-php-script/helloworld.php or http://127.0.0.1/my-first-php-script/helloworld.php. If you are using MAMP, go to http://localhost:8888/my-first-php-script/helloworld.php And you will see the message "Hello, World!" in your browser.

What happened here? I think you noticed the delimiters <?php ?>. They are required to insert the PHP code. Consider that you can mix PHP with HTML so these delimiters tell the server interpreter that this is PHP code. Let's see.

touch index.php

Open the file and add the following

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>PHP Hello World</title>
</head>
<body>
  <?php
    echo 'Hello, World!';
  ?>
</body>
</html>

This will be rendered as a simple HTML page but we are sending the "Hello, World!" from PHP, using the delimiters.

Let's continue. The command echo is a language constructor that allows us, in this case, to print a string in the browser. Notice that we are using a semicolon at the end of the line. This is really important in PHP. Each operation line must be ended by a semicolon, there are exceptions that we will see then.

To ease coding, we can abbreviate the echo command this way.

<?= 'PHP Hello World' ?>

Let's see it working.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- Abreviated `echo` command` -->
  <title><?= 'PHP Hello World' ?></title>
</head>
<body>
  <?php
    echo 'Hello, World!';
  ?>
</body>
</html>

Now you can check in your browser and see how the title stays the same. Notice that I didn't add a semicolon at the end of the line. You can add it, but it is not required in this case.

Comments

PHP supports the same kind of comments that use languages like C, C++, and Shell. Let's see

touch comments.php

Open the file and add the following

<?php
echo 'This is an Example' // One line comment.
/* 
  Multiline comment
*/
# Like shell comment.
?>

We have to be careful with multiline comments. A simple error can crash your whole script.

<?php
echo 'This is OK'
/* 
  The multiline comments have delimiters.
  If you write something after closing, PHP will
  try to execute it as code and as obviously it 
  won't make sense, the script will crash
*/ <- Close delimiter.

echo 'This is not right'
?>

This is all for now. Next time we will learn about variables. I hope y you have found this useful. Please like and share and if you think something is missing, please let me know in the comments below.

Write your first web server with node.js

Santiago Rincón — Mon, 06 Apr 2020 16:35:34 +0000

Hey there. This time we will see how to write a web server using node.js and http.

What do I need to know?

What will I learn?

What is HTTP
Write a server

This is a guide for beginners so it comes with some theory. I will not dig a lot this time (assuming you already know what a server is) but if you don't care about it, you can go straight to the action.

For this tutorial, we are going to use the node http module, so let's see what is it.

HTTP

The Hypertext Transfer Protocol (HTTP) is an application protocol for distributed, collaborative, hypermedia information systems.

I really love Wikipedia's definitions XD. Let's try to clarify this concept.

A web application is stored on a piece of hardware with its respective software, which allows communication with other pieces of software called clients——This is a really basic definition about what a web server is but is enough for us now.

This "server" needs a set of rules and permissions to allow communication between it and the clients, and that's what HTTP is there for.

HTTP is the main web protocol. When we enter a website, our browser, which acts as a client, sends a request through an URL, then the server process that petition and sends a response.

In the case of node.js, we need to configure our server's behavior. It doesn't work as Apache or similar servers, and that's what we are going to learn next.

The action

This time we don't need to install anything. the http module comes as default with node.js so the first thing we are going to do is create our project directory and file to run our server. Open the command line and write the following.

mkdir server

cd server

touch server.js
// On windows
type nul > server.js

Open the server.js file with your favorite text editor and add the following.

const http = require('http')

As I already said, http comes with node.js so we don't need to install it. With this line, we load the module into the http constant.

const host = '127.0.0.1'
const port = 3000

As we are going to run our server on our local machine, we set our host referring localhost with its IP, and for a convention, we are going to use port 3000.

const server = http.createServer((req, res) => {
    res.statusCode = 200
    res.setHeader('Content-Type', 'text/plain')
    res.end('Hello, world!')
})

We are using the createServer method from http and we are passing around a callback with the parameters req and res. req is an object with the petition information, and res, an object with the response.

We are setting the statusCode 200 which is a standard response for successful HTTP requests.

With the setHeaders method, we are adding the content type of the response, and to finish, we close the connection with a message using the method end.

We will learn about HTTP headers and status codes and messages in future posts. By now this is enough. Let's continue.

server.listen(port, host, () => {
    console.log(`Listening on http://${host}:${port}`)
})

The method listen will receive the port, the host and a callback function that we will use to log a message in the console and it will execute the server.

Let's try it. In the command line, write.

node ./server

You should see this

Listening on http://127.0.0.1:3000

Now go to http://127.0.0.1:3000 and you will see the message "Hello, World!"

That's it. Now you have your first server running in node'js. In the next post, we will start using the Express framework to build our first app.

If you think I missed something, let me know in the comments below. Please, like and share if you found this useful. See you next time.

Understanding node.js before diving in

Santiago Rincón — Sun, 22 Mar 2020 22:28:21 +0000

There are a lot of articles on the Internet that explain what node.js is, nonetheless, for those of us without a computer science degree it all might sound really complex and confusing.

The approach of this post will be trying to explain conceptually and in context, what node.js is, how it works, and why to use it, in a way that anybody can understand. Then I'll say how you can say "Hello" to the world using node.js.

If you want to go straight to the action, go to the Getting Started section.

What is Node.js

Let me make things clear here before we start conceptualizing, it might not be your case but believe me, I have seen people comparing node.js to things such as Apache or Tomcat.

Please, guys, just don't... Those are products ready to install servers and easily allow you to deploy your app. Sure, you can add a module for PHP and a module to allow SSL connection with node.js, however, you will need to add some code to get your server running. We will talk about modules and servers later.

I have also seen people comparing node.js to Django and once again, no, Django is a framework for back-end development built with python, a tool to ease the development of web apps. In node.js we have Express for that——Though they are built with different approaches——and again, we will talk about it later.

Now that we made things clear, we can continue.

The node.js official website defines it as an asynchronous event-driven javaScript runtime, designed to build scalable network applications.——Awesome, isn't it?

Yeah, I know, the first time I read these words I was like–—Yeah! sure, piece of cake, I know PHP and some Python, what can go wrong?——It all went wrong, I didn't have a clue about what I was facing, and that meant a lot of problems then.

Let's dig inside node.js concepts while we see how it works, and hopefully, that will help you understand everything I'm talking about once you finish reading this post.

So, is it javascript or what?

Let's see, node.js was born when developers of javascript extended it from something you could only run in browsers, to something you could run on a machine.

That allowed us to build with javascript more than just interactive websites, providing us the capability to do stuff that other scripting languages like python can do, like back-end, for example. :)

Now, Did you know that the only language computers understand is binary? Yes, the only thing they understand is a sequence of 0 and 1. Those languages closest to that thing we know as "machine architecture" are low-level languages and those closest to us (programmers) are high-level languages.

Both node.js and javascript are high-level, and they run on the V8 javascript runtime engine. This engine takes your high-level code and converts it into something your machine can understand.

By the way, to make it possible, it requires time to execute a lot of default functions that ease our work and that is what makes it a runtime. There are a lot of instructions running while a program is being executed——It's deeper than that, but that's enough for now.

Non-blocking asynchronous

Ok, I think this is one of the most confusing things about node.js. I have seen a lot of people misunderstanding these concepts but it is actually really easy once you get it.

If you think about synchronized swimming, you may imagine a group of people making the same movement in parallel in a swimming pool. So, synchronous refers to it, operations taking place at the same time.

Asynchronous is literally the opposite of synchronous. Now, think about a restaurant. There are waitpersons who have to take the menu to the customers, to serve them food, to give them the bill, to clear the table once they are gone, etc.

These are asynchronous operations and customers' requirements (menu, food, bill, etc) are blocking calls. But you will never see a waitperson waiting to finish with one customer to start with another. Instead, they attempt to each table simulating some kind of parallelism which improves performance.

This kind of parallelism is what we call non-blocking architecture. Let's see what happens when we code.

console.log('Hello, World')
console.log('I'm learning Node.js')

The result will be as expected, nothing unusual. First, you will see Hello, World, then, I'm learning Node.js but... what if that "Hello, World" comes from an operation that needs time to finish, something like a blocking call?

I will assume you know a little bit about the EcmaScript standard and arrow functions. If not, please, go and read.

Let's simulate it.

setTimeout(() => {
  console.log('Hello, World')
}, 5000)

console.log('I'm learning Node.js')

Result

I'm learning Node.js
Hello, World

What happened here? As we are using an asynchronous operation, this kind of approach will not work as expected. Sure, the first event will be blocked because it needs time to finish the operation but it will not put your threat to sleep.

I don't get it, why are we seeing first the next operation then? Is it executing two operations at the same time? Isn't it synchronous? No, it is because of the non-blocking architecture of node.js.

Let's see. In other languages, tasks are executed one by one, node.js can execute several asynchronous tasks at the same time which means that it will return immediately with whatever result it has. And how is it possible?

I don't know if you noticed. but we are passing around a function to setTimeout() as we do with variables in other languages. It's a callback function and it, my friends, is the key to make asynchronous possible in node.js.

In this context, a callback function defines what will be executed after the blocking call finishes. In fact, all of the asynchronous patterns in node.js are based in callbacks, they just add syntactic sugar to ease our work.

Now, setTimeout() is an async function that schedules a callback execution once a given time has passed. In simple words, it delays a function execution but other stuff can be happening at the same time outside this function thanks to the non-blocking architecture of node.js.

Maybe you are thinking "What if I configure the delay to 0 seconds"? Well, let's see what happens.

setTimeout(() => {
  console.log('I'm learning NodeJs')
}, 0)

console.log('Surprise')

Result

Surprise
I'm learning NodeJs

Wait, what? Yes, configuring the delay to 0 seconds will not mean that it will be executed first because the callback is added to the event-loop so it has to wait for its turn before being executed.

Did you say event-loop? Yes, it is responsible for scheduling the asynchronous operations, it is the heart of node.js, and this takes us to the event-driven concept which is a programming paradigm in which the flow of the program is determined by events such as user actions (mouse clicks, key presses), sensor outputs, or messages from other programs/threads. This means that applications act on events.

Asynchronous is a way more extensive topic——material for another post——but we have the basics we need to continue. If there is something you didn't understand, let me know in the comments.

Why would I use Node.js anyway

If you are a self-taught person, you should know how hard it can be to choose the perfect technology for your project. Node.js is not always the right answer but it could be for some cases, so first, let's try to figure out if you need to use node.js by understanding the problems it solves.

A few years ago I developed this prototype for a social network using PHP. It had a mixed back and front-end so it was a mess but it actually worked, at least as a prototype.

The main problem we faced at that time was the server connections. When we had over 100 active users it started to collapse, we needed a better server but we had no money for that. That situation among other management issues, made the project fail.

On the other hand, this app used third party API's, and a lot of other features that made it slow.

A few months later I had started a project lo learn customizing Bootstrap and there was where I met node.js. I had a javascript background so it was easy to dive in.

While I was learning, I discovered it had could help me to solve the previous project problems——Actually, even now I learn new things with node.js that would be helpful to that project.

The first important thing I discovered was that I could use javascript not just for the front-end but for the back-end.——I'm the kind of person that hates having mixed code.—— On the other hand The main goal of node.js is to ease scalable network applications development, and this is possible because of the way it works.

Single-threaded, event-driven architecture

When you are using languages like PHP, each connection creates a new thread which comes with 2 MB of RAM assigned. Depending on the RAM your system has, anyway, it gives you a theoretical maximum of connections.

As your project users grow you will need to add more servers to keep it up with the demand. This means adding up more money to cover the server costs. Besides this, we already have costs for traffic, employees, potential technical issues and more.

For this reason, the bottleneck of this kind of architecture is the maximum amount of connections that a server can handle. Node.js solves this problem by changing the way in which server connections are made.

Instead of creating a new thread per connection, each one triggers an execution event inside the process of the node.js engine, which means that node.js operates only with one threat without having a blocking call to start the event-loop as similar event-driven systems do.

All in all, node.js allows your application to hold tens of thousands of simultaneous connections inside the event-loop. But... what happens when the application is so big that becomes extremely difficult to maintain it?

The rise of the Microservices Pattern

Apps start out small, then, they start growing and you can use the MVP pattern. It might ease your firsts maintenance problems, for sure. But it could grow bigger, more features demand and more new users with a lot of expectation.

Without even regarding, you may end up with a project so big that not even your huge and experienced development team could cope with no struggling.

It grows more and more and becomes more complex until you realize that just thinking about adding a new feature is a complete nightmare.

If you are just developing websites you might think this never happens but it's a common problem for companies and its answer is the microservices pattern.

A microservice is a single self-contained unit which, together with many others, makes up a large application. By splitting your app into small units. Every part of it is independently deployable and scalable, can be written by different teams and in different programming languages and can be tested individually.——Max Stoiber.

That means that you can have different teams working in different features and you will not need to deploy the whole code every time you add a new feature.——Something really useful if you ask me.

npm

Last but not least, node.js provide us npm (Node Package Manager) which allows us to install, update and use smaller open-source package (Those modules we talked about at the beginning of this post) into our application, so you will not need to write everything from scratch.

I have heard people concerned about privacy and security when it comes to using node.js. It's understandable, government, Fintech or MedTech organizations may wary of storing their data in the cloud. For that, npm released the Enterprise version which allows you to run npm's infrastructure behind your company's firewall.

It gives businesses access to a private registry with advanced security features to help them control access to code, identify vulnerabilities, and automatically replace unsafe code.

Getting started

Now that hopefully, you understand what node.js is, let's give the next step.

Install

To install node.js you need to download it first from its official website.Download Node.js

Follow the instructions to install it.

When finished, you will end up with both node.js and npm.

Let's verify if everything is ok. Open the command line and execute the following.

node -v

It should return something like this but with the version you just installed

v12.16.0

Now, verify npm

npm -v

Again, you will get something like this but with the installed version

6.13.4

Hello, World! with Node.js

I think this is one of the easiest "Hello, World!" we will do, ever. Create a new file.

touch hello.js

// If you are using cmd on windows use the following
type nul > hello.js

Open it with your favorite text editor and add the following line.

console.log("Hello, World!")

Now just execute it using the node command.

node hello.js
// Output: Hello, World!

And that's it. A bunch theory, just one line of code and you already got started with node.js. :)

Please give this post some love and share it if you found it useful. If you think there is something I'm missing, please let me know in the comments below.

PS. Take your time to digest all this theory because I'll be back with some interesting practice soon.