Forem: Lucas Rodriguez

Going beyond the old and boring console.log()

Lucas Rodriguez — Fri, 10 Feb 2023 13:00:00 +0000

Every dev that has ever used JS / TS has used at least once in his life the famous console.log(), either to just go step by step of the code, to show a return message and more, but you there, did you know that there's much more than just the console.log() ?

Below you will find so options that can even help us when developing our code. But just making it clear, those are not all the options that exist. Let's check them out!👇

🤔 console.assert

The console.assert() is for checking some expression we pass and if it is false, we return a message in the terminal / console.

🧹 console.clear

This option is for, as the name suggests, clearing our console / terminal.

The console.clear() can be very nice at the end of our code where we can clear the terminal and not worry about it later.

➕ console.count

We can use console.count() to count how many times a function has been executed / called or how many times we have gone through that code already etc.

In this example, we just called console.count() 5 times, the result of this in our terminal will be as follows:

Another example is the following, where we can pass a text that will be displayed on the terminal along with the default count from the console.count() itself (this text is one of the parameters we can pass):

The result of this code in the terminal will be as follows:

⚠️ console.warn

We use console.warn() to pass warnings to the user or just to identify something that is not going well, in this case the text itself gets the color yellow.

And the result is:

In this case we manually execute the code by going to the browser console, but this command can be given in your JS code and be executed after the user does some action on your HTML page, for example sending forms or clicking on some button.

❌ console.error

Almost like console.warn the console.error serves precisely to show us possible errors on the console / terminal, this time the text will be colored red.

And the result is:

❓ console.info

Almost identical to the traditional console.log() that we normally use, in this case we can use the console.info() to really know that it is necessary information and better understand the code, because otherwise there are no differences like the previous examples where the color of the letters and other things end up changing. In Firefox and Chrome, a little “i” icon can be displayed next to the console log items.

📋 console.table

The console.table() can be a great help when we want to better visualize some information on the console, precisely by using the console.table() we will create a table on the console where we will see the information we pass to it.

And the result is:

It creates a table with two columns, one with the index of each element in the array and the data that is in each of those indexes.

Another example that we can explore is passing an object instead of array to console.table():

And the result is:

👥 console.group

With the console.group() we can group some information to be able to visualize it in the best way, in a way that we delimit these groups (in the following examples we will see this) and also to help the messages will be indented inside our console.group() to help our visualization even more.

And the result is:

🕑 console.time

Have you ever thought about seeing how long it takes for a certain part of your code to run completely? That’s what console.time() is for, it will show you at the end of everything how long it took to reach the end from the console.time() call to the console.timeEnd() call.

Inside console.time() we pass as parameter a name for our timer, so to speak, and in console.timeEnd() we pass the same name to indicate that the time counting should be finished.

And the result is:

🛣️ console.trace

With console.trace() we can trace how the code is executing, step by step.

In the example below, we will just create 2 functions, one function called func1 that will call the other function func2, which in turn will have a console.trace() .

And the result is:

We can notice that as commented it shows a trail of which functions have been called.

Conclusion

If you have any questions or want to share any tips, please leave a comment below. I would love to read your opinion and feedback!

Thanks for reading! Follow me in this platform to read more programming content. Have a great day, see you soon! 👋

What is Purity in Javascript and Why Does It Matter?

Lucas Rodriguez — Thu, 09 Feb 2023 13:00:00 +0000

The process of studying JavaScript usually begins in a very practical way. From declaring variables to understanding the hell of Asynchronous JavaScript, the more theoretical concepts get left out. And this gap starts to get annoying when you get into deeper topics.

With this in mind, let's start by explaining some of the more theoretical (and even philosophical) concepts of Modern JavaScript, starting with purity. 👇

What is this purity?

Imagine that you are creating a complex system using the functional programming paradigm. This means that your project will have a plethora of functions, one calling the other, to the point where there comes a point where the code takes on a life of its own and does things you didn’t ask for.

If your goal is not to create a crazy AI, this is something you want to avoid at first. You don’t want that by changing something in one function, something in another function that you don’t even know where it is will do a carpentered double twist with no idea how it was done.

A pure function, therefore, is one in which there is no change. An impure function is one that modifies variables, states, or data beyond its scope.

The philosopher Heraclitus said that it is not possible to bathe in the same river twice, because the river of a second ago is no longer the same river of now, due to its flow. Pure functions go in the opposite direction and try to preserve the same river so that you can bathe in it as many times as you want, always knowing what will happen.

Pure functions

Let’s take a look at this JavaScript function:

const calculateDouble = (num) => num * 2;

Here we have a function that will calculate the double of a number. If we call calculateDouble(4) we get the result 8. No matter how many times we call this function, we know that if the argument is 4, the result will be 8. If the argument is 5, the result will be 10, and so on.

calculateDouble(4) // returns 8
calculateDouble(4) // returns 8
calculateDouble(4) // returns 8
// the result never changes

A pure function is going to have this unchanging behavior. It’s a function that knows who it is. It’s like that senior person at work, super disciplined and methodical. Everyone in the firm knows what time she is going to have a cup of coffee, how she is going to respond when approached, and so on.

There are two characteristics:

Given the same input, it will always return the same output.
It will not produce any side effects.

Impure functions

Now look at this function and try to understand what it is doing:

let num = 8;
const calculateDouble = () => num *= 2;

This function has the same purpose as the previous example. But notice that it is accessing a variable outside its own scope. When we call it with calculateDouble()we will get the result 16. If we call it again, the result will be 32, and so on. We have here an impure function.

calculateDouble() // returns 16
calculateDouble() // returns 32
calculateDouble() // returns 64

Another example of an impure function is:

const showAlert = () => {
  alert('This is a side effect!');
}

This is also an impure function because it has a side effect. The result will always be the same depending on the environment you have configured, i.e., it will always return an alert in the window with the same message. However, for it to produce this alert the DOM API is accessed. In the case of the DOM we are assured that it will probably never change, but if it were another API, who would guarantee us immutability?

Another example of an impure function is the following:

const multiplyRandom = (num) => num * Math.random();

Here we are taking a number and multiplying it by a random value (which is what the function Math.random() does. Incidentally, it is also impure). Even if your arguments are always the same, the results will be different:

multiplyRandom(3) // returns 1.2427312565643085
multiplyRandom(3) // returns 0.0966362658711748
multiplyRandom(3) // returns 2.493662851387264

It is clear from these examples that the impure function doesn’t really know what it returns. Compared to that stable co-worker, this is the one who comes in at 8 a.m. one day and is almost 12 p.m. the next, and you don’t know whether to respond politely or angrily. But it could be that this is exactly the creative employee who does something amazing if he has a leader capable of using his talent.

*So don’t condemn the impure functions. *Avoidance is always good, but they can be important if you know where to use them, taking great care to document the behavior so that the code is understandable to others or even to you in the future.

What are the benefits of using pure functions?

Reproducibility: one of the principles of a scientific experiment is its ability to be reproduced and the result remain the same. In programming, this ability allows tests to be run more easily, bugs to not occur…
Parallelization: although JavaScript, in theory, runs with single thread, i.e. one thing at a time, asynchronous functions are already quite common. With pure functions, you can call them in parallel without fear of the result changing, saving execution time.
Memoization: this term means, in this case, the ability to store in memory the result of the function. We saw that the result of the function will always be the same. This means that we can save the value of the function in a variable and then use it instead of the function and the result will be the same.

There are many other benefits, especially when you use functional programming, but for this we need to go into other concepts that will be the subject of future posts.

Conclusion

If you have any questions or want to share any tips, please leave a comment below. I would love to read your opinion and feedback!

Thanks for reading! Follow me in this platform to read more programming content. Have a great day, see you soon! 👋

Electron: Build Desktop Applications Using Plain Javascript

Lucas Rodriguez — Wed, 08 Feb 2023 14:06:17 +0000

The JavaScript ecosystem has proven to be very versatile over the years with great innovations, one of them being the ability to build desktop applications using just Node.js, HTML, CSS, and of course JavaScript.

⚛️ What is it?

Electron is a cross-platform shell — a user interface for accessing operating system services both via command line (CLI) and graphical user interface (GUI).

With Electron we can develop desktop applications using HTML, CSS and Javascript — the famous Web technologies. It has integration with Node.js, we can use it to build not only the screens but all the logic of a BackEnd that accesses resources of the operating system — local directories, database in a simpler way.

It is cross-platform — we can install the application on Windows, Linux and MacOS.

📖 History

Electron was created by Cheng Zhao, and released on April 11, 2013 under the name Atom Shell. As soon as May 6, 2014 the Atom code editor on GitHub became open source under the MIT license. In 2015 Atom Shell was renamed to Electron, and as time went by it became more popular and in just two years they managed to create and make available automatic app updates, Windows installers, sending app error logs, desktop notifications, among other features. In 2016 the Windows Store already started accepting Electron apps in its store.

⏳ Desktop applications in 2023?

Yes. There are several success cases and needs that we have — as programmers we use the VS Code code editor that was made with Electron, Atom itself the first app made with Electron.

It was also built with Slack, Figma, Twitch, Whatsapp desktop, among other apps that you can find on this site: https://www.electronjs.org/apps

🏛️ Architecture

Electron comes with Chromium browser, an open source project from where Google Chrome came from. All the visuals, windows, etc are rendered in this layer and the BackEnd runs on Node.js. Both have access to each other via RPC (Remote Procedure Call).

Two important concepts around the technology: main process and renderer process.

The file that is defined in the main property of package.json is called the main process. It is unique throughout the application, responsible for creating the application window(s) through instances of BrowserWindow.

Electron uses Chromium to render the web pages, the multi-process architecture of that tool is used as well, each web page (Electron’s desktop window) runs its own process, which is called the render process.

In short, we have Node.js in the main process using the Electron library that makes native calls to the operating system. And the Electron API running the application windows with HTML, CSS, JavaScript and its under-the-hood assets with Chromium.

The windows (FrontEnd) cannot invoke the native resources in order not to break the security of the application, but the communication between both processes — main and rendering, is done through a concept of inter-process communication (IPC) using the RPC (Remote Procedure Call) method. For this we have the ipcRender and ipcMain APIs.

This is an advanced topic, we can create an article just for this. This knowledge is needed when we are going to access a database and other operating system resources with requests made from the application windows (renderer process).

📁 Project Structure

Application in Electron, is essentially a Node.js application, needs:

package.json — Points to the main app file and lists its dependencies
main.js — Starts the app and creates a browser window for rendering HTML. This is the main process of the app (main process)
index.html — A web page that gets rendered. This is the renderer process of the app

👋 Creating the first project

Prerequisites: Basic knowledge in HTML, CSS, JavaScript, and Node.js.

Starting the project

Create a folder to make your project and initialize it in Node.js:

mkdir hi-electron && cd hi-electron && npm init -y

Open the hi electron folder in your code editor. If you are using VSCode use: code .

Install the electron dependency with:

npm install --save-dev electron

After the installation, the node_modules folder will be created in the root of the project.

In the package.json there will be a property “main” you can change from index.js to main.js this is the main file of the project that we will create next. And in the scripts property change the test to start and put electron main.js for Electron to run the main.js file.

{
  "name": "hi-electron",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "electron main.js"
  },
  "keywords": [],
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "electron": "^22.2.0"
  }
}

The main.js file will contain the code responsible for creating windows and handling all operating system events.

Let’s create a main.js and index.html file in the root of the project using the terminal if you prefer:

touch main.js index.html

🔃 Adding the Live Reload

Let’s add a lib to live reload the application with every code change we make, this helps a lot in development.

Without it we would have to stop the node process and rerun every comma we change in the code.

npm install electron-reload

Soon we will see the main.js code that will configure the application and use this lib we have just installed.

The main.js file

Basically this is the first code of the app with Electron and I’ve commented out every bit of it so you understand. This is the input file that will be executed when we run the npm start command.

Copy and paste this code into the main.js file that we created and read it throughly:

const { app, BrowserWindow } = require('electron');

const path = require('path');

const url = require('url');

// create a basic window

let win;

function createWindow() {

  win = new BrowserWindow({width: 800, height: 600});

  win.loadURL(url.format({

    pathname: path.join(__dirname, 'index.html'),

    protocol: 'file:',

    slashes: true

  }));

  win.on('closed', () => {

    win = null;

  });

}

// create a window when Electron is ready

app.on('ready', createWindow);

// close the window when all the windows are closed

app.on('window-all-closed', () => {

  if (process.platform !== 'darwin') {

    app.quit();

  }

});

// create a window when the app is activated

app.on('activate', () => {

  if (win === null) {

    createWindow();

  }

});

The index.html file

In this file paste this code below, it contains the HTML struture, the CSS styling and the logic in Javascript that will be displayed in the previously created window.

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>

  <style>

    body {

      background-color: #f0f0f0;

    }

    header {

      background-color: #f0f0f0;

      padding: 20px;

      text-align: center;

    }

    main {

      background-color: #f0f0f0;

      padding: 20px;

      text-align: center;

    }

    footer {

      background-color: #f0f0f0;

      padding: 20px;

      text-align: center;

    }

  </style>

</head>

<body>

  <header>

    <h1>My First HTML Page</h1>

  </header>

  <main>

    <p>My first paragraph.</p>

  </main>

  <footer>

    <p>My first footer.</p>

  </footer>

</body>

</html>

Running the project

Open your terminal and in the root of the project run:

npm start

⚡️ Next steps

Experiment with the Electron API: Try building a simple application using the Electron API and get familiar with the various components such as BrowserWindow, Menu, and Tray.
Develop a full-fledged application: Once you have a good understanding of the basics, you can start building a more complex application with features like multi-window support, file system access, and native notifications.
Customize the application’s look and feel: You can use CSS and JavaScript to customize the appearance of your application and make it look polished and professional.
**Integrate with other technologies: **Electron can be used with a variety of other technologies such as React, Angular, and Vue.js, to build powerful and complex applications.
Publish your application: Once your application is complete, you can publish it to the web or package it for distribution on various platforms like Windows, macOS, and Linux.
Join the Electron community: Joining the Electron community is a great way to stay up-to-date on the latest developments, learn from other developers, and get help with any challenges you may encounter. There are many online forums, Reddit groups, and GitHub repos dedicated to Electron.

Conclusion

I really liked the possibility to create a beautiful Desktop application in an easy way, using web technologies, we can use Bootstrap, React, Vue.js, any technology that runs in the browser and makes the screen building (UI) experience easier.

I believe that with HTML, CSS and JS it is easier and faster to implement UI/UX best practices than with Desktop applications made with Java, C#, Visual Basic or Delphi. Let me know what you think about this in the comments.

I think the possibility to reuse web knowledge to develop desktop apps is amazing.

If you have any questions or want to share any tips, please leave a comment below. I would love to read your opinion and feedback!

Thanks for reading! Follow me in this platform to read more programming content. Have a great day, see you soon! 👋