Forem: Robertopaolo Ramirez

Free up storage space in Linux

Robertopaolo Ramirez — Sat, 21 Oct 2023 22:21:12 +0000

This month of October I had the experience of almost completely populating my 500GB SSD.

As the money still wasn't falling, I thought I'd start removing things that might be unnecessary on my computer.

Currently, my SSD is dual-booted and is:

300GB for Linux (Manjaro)
200GB for Windows (win11)

Tools

Disk Usage Analyzer
npkill
pactree
yay

Disk Usage Analyzer is an app from the Linux world to visualize the distribution of your disk with better aesthetics, where you can see the paths, sizes, and more. I used it for these things.

In my work as a Software Engineer, I use a lot of javascript and as a result, I have spread many node_modules folders around.

You've probably seen some of his memes haha, here are some!

Guys don't waste time making memes! 😄

Well, with those in mind, I thought I'd start removing it to get a good space. However, obviously, I wouldn't go from folder to folder to remove them, there are too many and I'm very lazy about that, so I found a script that can help with this and that helped me a lot, it's called npkill. Basically, it lists all the node_modules you have according to the folder you are in, that is, if you are in the root of your computer, (~), it will list them all, and so on.

It's very intuitive, so it was easy to apply, after a few minutes of reading, I saw that there really was a lot to remove, so I went with it.

It certainly saved me a lot of time, see the documentation here.

One interesting thing that I didn't mention was that in addition to viewing it through Disk Manager, I saw that a large part of the space was being consumed by installations that I made using yay.

So, to free up more space I also needed to clean up the apps and libs that I don't use, I currently only use pacman and yay as package managers, certainly in my opinion, they are the best!

a clear example of things that I installed and then forgot to remove and that was taking up a lot of space was the electro20 so I wanted to remove it, but first You need to ensure that removing it would not break any app, as it could possibly be dependent on something. With this point in mind, I used pactree which helps us in this regard and is simple to use, we just need to type:

pactree -r nome_do_pacote

If the mentioned package has any connection with another app, it will list it for you.

And since there wasn't, I removed every unnecessary dependency with the following command:

yay -Rsn nome_do_pacote

And so on with all packages!

One last tip is how to list the packages installed by yay:

yay -Qe

Now, if you want to list the name and size, type:

yay -Qe | awk '{print $1}' | xargs expac -H M "%n %m"

So guys, this is how I managed to free up more space on my computer, I hope it helps you in some way, if you have more tools, tell me in the comments how you do it and what tools you know. Strong hug!

Creating a browser extension that generates strong passwords!💪

Robertopaolo Ramirez — Wed, 12 Apr 2023 21:55:42 +0000

Hello everyone, everything good?

I haven't posted anything in a while, I was a little busy with changes in work and studies, but this weekend I learned something really cool and that particularly solved a problem I had…

Like many, when I registered in some form and needed to put a password to finish, I looked for dates, names, places or something familiar to remember more easily, but that's the problem... We can't put passwords that are familiar to us, can we? be easy to guess the password if we do social engineering. As in the series Mr. Robot, which I certainly highly recommend!

In this creation I learned two things:

I don't need to memorize my password. Since I can use some other application to be able to store my passwords.
And the second, of course, I cannot create weak passwords related to myself.

Thinking about these two pains, I created an extension that generates strong passwords!

I will divide this problem into 4 parts: Logic, where we will create a function that performs what we want, with pure javascript. Preview, where we will make the structure with HTML and add some points requested by the browser to publish our extension. E*stylization* ie we will give life with css to our extension and finally interactivity with the web where we will be modifying the web components.

Before all that, I needed to read the documentation for Chrome Extensions and in the root of our project add our manifest.json file:

{
  "manifest_version": 3,
  "name": "Generate Password",
  "description": "Generate a random password",
  "version": "1.0",
  "action": {
    "default_popup": "./src/index.html",
    "default_icon": "key.png"
  }
}

Logic

function randomCharacter() {
  const letters = 'aAbBcCdDeEfFgGhHiIjJkKlLmMnNoOpPqQrRsStTuUvVwWxXyYzZ'
  const numbers = '0123456789'
  const simbols = '!"#$%&()*+,-./:;<=>?@[]^_`{|}~'
  const characters = letters + numbers + simbols
  return characters[Math.floor(Math.random() * characters.length)]
}
function generatePassword(length = 8) {
  let password = ""
  for (let i = 0; i < length; i++) {
    password += randomCharacter()
  }
  return password
}

export default { generatePassword }

The randomCharacter() function creates a characters string that contains uppercase and lowercase letters, numbers and symbols. It then returns a random character from that string.

The generatePassword() function takes a length as an optional parameter, which is set to 8 by default. It uses a loop to call the randomCharacter() function repeatedly and add the returned characters to a string password. After the loop, the function returns the generated random password.

In summary, the generatePassword() function uses the randomCharacter() function to generate random passwords of the desired length.

Viewer

<!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">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>
<body>
  <div class="content">
      <h1>Random Password Generator🔥</h1>
    <div class="content-options">
      <input class="input-option" type="text" id="input-text" value="" placeholder="Create password...">
    </div>
    <div class="message disabled" id="message">
      <p id="message">Password copied to clipboard!🥳</p>
    </div>
    <div class="content-buttons">
      <button class="button" id="generate">Generate</button>
      <button class="button-copy" id="copy">Copy</button>
    </div>
  </div>
  <script src="./index.js" type="module"></script>
</body>
</html>

This is a basic HTML file with a form to generate random passwords.

The HTML code starts with the <!DOCTYPE html> and <html lang="en"> tags that define the type and language of the document.

The <head> and <title> tags provide information about the page, such as the character encoding and title.

The <link> tag is used to link the CSS file style.css to style the page.

Inside the <body> tag is a div container with class "content" that contains the title "Random Password Generator" in a level 1 header (<h1 >).

Just below, there is an input text box with the class "input-option" which is used to display the generated passwords. The placeholder tag provides a hint for the user to type.

The next div with the "message" class displays a message that the password has been copied to the clipboard after the "Copy" button is clicked.

The last div with the "content-buttons" class contains two buttons: "Generate" to generate a new random password and "Copy" to copy the generated password to the clipboard.

The index.js JavaScript file is linked to the HTML via the <script> tag and provides the logic to generate random passwords and copy the password to the clipboard.

Style

This CSS style file defines the visual appearance of an HTML document.
I didn't put it how I did it because it's really something basic and I wanted to focus on logic.

Interactivity with the web page

This Javascript file is responsible for creating the interactivity of the web page, adding click events on the "Generate" and "Copy" buttons.

import generator from './helpers/generator.js'

document.addEventListener('DOMContentLoaded', () => {
  const input = document.getElementById('input-text')
  const buttonGenerate = document.getElementById('generate')
  const buttonCopyToClipboard = document.getElementById('copy')
  const message = document.getElementById('message')

  buttonGenerate.addEventListener('click', () => {
    const password = generator.generatePassword(10)
    console.log(password)
    input.value = password
  })

  buttonCopyToClipboard.addEventListener('click', () => {
    message.classList.remove('disabled')
    input.select()
    navigator.clipboard.writeText(input.value)
  })
})

First, the code imports an external module that contains a password generator function.

The code then uses the addEventListener method to add a callback function that will be executed when the "DOMContentLoaded" event occurs on the page. This ensures that all of the content on the page has loaded before the script starts interacting with it.

Within the callback, the code captures references to the HTML elements that will be manipulated (the text input field, the "Generate" and "Copy" buttons, and the message element).

The code then adds a click event to the "Generate" button. When the button is clicked, the callback function creates a random password using the imported password generator function and displays the password in the text input field.

The code also adds a click event to the "Copy" button. When the button is clicked, the callback function enables the display of the "password copied" message and copies the value of the text input field to the user's clipboard using the navigator.clipboard.writeText() method.

Project structure

├── src/
│   ├── helpers/
│   │   ├── generator.js
│   │   └── generator.spec.js
│   ├── index.html
│   ├── index.js
│   └── style.css
├── key.png
├── manifest.json
├── package.json
└── README.md

Triangle with loop

Robertopaolo Ramirez — Thu, 20 Oct 2022 13:54:23 +0000

Source Code

let myString = "#"
for(let i =0; i <= 7; i++){
  console.log(myString)
  myString += "#"
}

Explained

As we already know, the for is a way to be able to execute the same code until the condition is fulfilled.

So, in this case, the logic I concluded is as follows:

Execute a string (in my case I chose #) X times, and for each time it is executed, an extra print will be added.

We start by creating a variable containing the string.
The for said something like this: start with index = 0, as long as the index is less than or equal to 7, add 1 to the index.
This will make us loop 7 times until our variable gets the value greater than 7.
Let see

let myString = "#"
for(let i =0; i <= 7; i++){
  console.log(myString)
}

Terminal show

Now we need to add another string for each console.log line. To do this we just need to do a sum of strings in the loop:

myString += "#"

Nice!
we already have our triangle with loop

If you have other way to do this triangle, share with us!!

My first CRUD in Python without ORM

Robertopaolo Ramirez — Fri, 02 Sep 2022 01:45:46 +0000

Requirements

A database (MySQL or MariaDB)
Docker
Python

On this occasion we will use docker to connect with a database, for this we need the image and use it in Docker.

On the site docker hub, search for mariadb, choose the first option, which is an official image, something similar to the image below will appear.

Open your terminal and run the following command to download the image.

$ docker pull mariadb

and then create a folder for the project.

$ mkdir my-project
$ cd my-project

On this occasion we will use docker compose for the database, we could raise the container with Mariadb in one command, but I don't particularly like it, I prefer to use docker compose.

$ touch docker-compose.yml
$ nvim docker-compose.yml

We will add the following lines

version: "3.9"
services:
  chanchito:
    image: mariadb:10.6
    ports:
      - "3306:3306"
    environment:
      - MYSQL_ROOT_PASSWORD=root
      - MYSQL_PASSWORD=root
      - MYSQL_USER=roberto

These are the parameters we need for a database.

image name
version
doors
variables (password, username)

For more information, you can follow the Mariadb/MySQL documentation, which are basically the same. At the end of the tutorial, I will put the links for you!

When finished, we save and exit the file. In your terminal, inside the project folder that we created is the file, we will run it to raise our db.

Alright, now we need to create our “Tables” and “Schema” in MariaDB.

We will use MySQL Workbench to create in a more intuitive way.

We will create a new connection by clicking on the + icon

This window will appear, simply fill in the values that we put in our docker-compose.yml , click on Test connection, if everything is ok, a “warning” message will appear like this, because we are using Mariadb and not MySQL . Click Continue Anyway!

This confirmation window will appear.

Ready, now, to create our “Schema” and Tables, to create our “Schema” we must type.

CREATE SCHEMA `chanchitohappy`;

We click on the radius or press ctrl + Enter. Soon after, you can click refresh, if the new schema created does not appear in the left corner.

Now you might ask yourself “but aren't we going to use python to create?” and the answer is yes, but… we don't normally use python to create tables, we use python or another language to interact with the database.

The database structure is essentially already created

Create a table

CREATE TABLE `chanchitohappy`.`vendas` (
    `idProduct` INT NOT NULL AUTO_INCREMENT,
    `name_product` VARCHAR(45)NULL,
    `price` INT NULL,
    PRIMARY KEY(`idProduct`));

Again, we run the query and our “sales” table will be created

We can confirm as follows.

Okay, now we can go to our favorite IDE, create an index.py file and run our code.

import mysql.connector

conection = mysql.connector.connect(
    host='localhost',
    user='root',
    password='root',
    database='chanchitohappy'
)

cursor = conexao.cursor()


cursor.close()
conexao.close()

What we did was generate a connection to the database, for that we need the following parameters: host, user, password, database

After that, like every system, we must turn on and off both the cursor and the connection.

Now, every command we do will be between cursor = conexao.cursor() and cursor.close()

CREATE

product_choosed = 'coca cola'
price_choosed = 5

# CREATE
command = f'INSERT INTO vendas (name_product, price) VALUES ("{product_choosed}", {price_choosed})'
cursor.execute(command)
conexao.commit()

READ

command = f'SELECT * FROM vendas'
cursor.execute(command)
resultado = cursor.fetchall()
print(resultado)

UPDATE

# UPDATE
product_choosed = 'coca cola'
price_choosed = 3

command = f'UPDATE vendas SET price = {price_choosed} WHERE name_product = "{product_choosed}"'
cursor.execute(command)
conexao.commit()

DELETE

product_choosed = 'coca cola'
command = f'DELETE FROM vendas WHERE name_product = "{product_choosed}"'
cursor.execute(command)
conexao.commit()

FINAL RESULT

import mysql.connector

conexao = mysql.connector.connect(
    host='localhost',
    user='root',
    password='root',
    database='chanchitohappy',
)

cursor = conexao.cursor()

# CREATE
product_choosed = 'coca cola'
price_choosed = 5
command = f'INSERT INTO vendas (name_product, price) VALUES ("{product_choosed}", {price_choosed})'
cursor.execute(command)
conexao.commit()

# READ
command = f'SELECT * FROM vendas'
cursor.execute(command)
resultado = cursor.fetchall()
print(resultado)

# UPDATE
product_choosed = 'coca cola'
price_choosed = 3

command = f'UPDATE vendas SET price = {price_choosed} WHERE name_product = "{product_choosed}"'
cursor.execute(command)
conexao.commit()

# DELETE
product_choosed = 'coca cola'
command = f'DELETE FROM vendas WHERE name_product = "{product_choosed}"'
cursor.execute(command)
conexao.commit()

cursor.close()
conexao.close()

Remember for each action (execution), comment the others, because it will show error.

We could add error handling, in addition to putting each action in a function and calling them when needed, but this is the basis of CRUD in python, I hope you learned it as I did. A big hug, until next time!

Links

https://hub.docker.com/_/mariadb

How to configure git for the first time? - Linux environment

Robertopaolo Ramirez — Mon, 29 Aug 2022 13:38:00 +0000

Commands we will use

git config —list = list your git configuration

git config —system = git configuration for the machine in general

git config —global = user configuration for any project

The first thing you should do when installing Git is to configure your username and email address. This is important because each commit uses this information, and it is immutably stamped on the commits you start creating:

$ git config --global user.name ramirezmz
$ git config --global user.email ramirezmz@exemplo.br

Other configs that help in everyday life

Your favorite editor

When there is a need to edit messages and/or other things that need text editing, git will use some editor by default, but you can already tell git which one to use, in my case, I prefer to use neovim.

git config --global core.editor nvim

Autocomplete git

Let's say you mistyped or forgot the command to add items, git will recommend commands similar to what you tried to type. Also, the correct command will be executed after the x seconds you put

git config --global help.autocorrect 20

Default branch

git config --global init.defaultbranch=master

Links

https://git-scm.com/docs/git-config

How to fix a commit?

Robertopaolo Ramirez — Fri, 29 Apr 2022 12:18:02 +0000

To start this tutorial, I created a file and I'll use to test.

Let's imagine that in the last command we wrote like this:

git commit -m "adding fils"

To fix, simply type:

git commit -m "adding files" --amend

Two important commands that git give us

git --hard and git soft

HARD = is usually used when we messed up the code and want to get everything back to how it was before you messed with it. It's an undo-like function, so be careful.

SOFT = On the other hand, we have Soft, which will remove the commits from our commit list without removing the changes from the commits.

And in our case, we want to delete the last three commits.

git reset --soft HEAD~3

And we can confirm by putting git log

We also confirm that the files are to be committed

Inteface experience Git by terminal

Another way (the most correct according to the documentation) is to give the following command:

git rebase -i HEAD~3

And we can (we must) change the command pick to squash

When recording, another screen will appear, informing what was done.

Also, it will ask us to put a decent message.

The result

I hope I have helped you.

Set new resolution on Linux - Force

Robertopaolo Ramirez — Sat, 05 Mar 2022 03:20:27 +0000

Step 1: Run this command (put it the resolution that you would like) "cvt + resolution + hz":

cvt 1920 1080 60

Step 2: It will appear this message:

# 1920x1080 59.96 Hz (CVT 2.07M9) hsync: 67.16 kHz; pclk: 173.00 MHz
Modeline "1920x1080_60.00"  173.00  1920 2048 2248 2576  1080 1083 1088 1120 -hsync +vsync

So you will copy starting after Modeline.

Step 3: Run :

xrandr --newmode "1920x1080_60.00"  173.00  1920 2048 2248 2576  1080 1083 1088 1120 -hsync +vsync

Step 4: Run:

xrandr --addmode DP-1 1920x1080_60.00

Step 5: Run to confirm: xrandr

Screen 0: minimum 320 x 200, current 3286 x 1080, maximum 16384 x 16384
HDMI-1 connected primary 1920x1080+0+0 (normal left inverted right x axis y axis) 410mm x 230mm
   1360x768      60.02 +
   1920x1080     60.00*   59.94  
   1280x720      60.00    59.94  
   1024x768      75.03    70.07    60.00  
   832x624       74.55  
   800x600       72.19    75.00    60.32    56.25  
   720x480       60.00    59.94  
   640x480       75.00    72.81    66.67    60.00    59.94  
   720x400       70.08  
DP-1 connected 1366x768+1920+0 (normal left inverted right x axis y axis) 410mm x 230mm
   1366x768      59.79*+
   1360x768      60.02  
   1280x720      60.00  
   1024x768      75.03    70.07    60.00  
   832x624       74.55  
   800x600       72.19    75.00    60.32    56.25  
   640x480       75.00    72.81    66.67    59.94  
   720x400       70.08  
   1920x1080_60.00  59.96

Step 6: To put this resolution now, run:

xrandr --output DP-1 --mode 1920x1080_60.00

Step 7: Save this changes to keep when reboot computer.

Copy the 3 commands that we used previously.(create new resolution, add new mode, apply new mode)

xrandr --newmode "1920x1080_60.00"  173.00  1920 2048 2248 2576  1080 1083 1088 1120 -hsync +vsync
xrandr --addmode DP-1 1920x1080_60.00
xrandr --output DP-1 --mode 1920x1080_60.00

And goes to the /etc/profile. Open with your editor favorite as sudo mode, and paste down of latest fi, like this:

Installing Cypress and knowing the structure

Robertopaolo Ramirez — Wed, 23 Feb 2022 17:30:17 +0000

Hello guys! What's going?
It was a long time that I publish a post, but it better late than never, right?

Well, to start, we'll open our terminal and create a paste.

$mkdir myFirstTest

Next, inside the paste, we will to install dependencies by cypress.
$cd myFirstTest $npm init -y $npm install cypress --save-dev
When we install cypress in our project just appear this thinks:

But don't worry, we just need to run with this command to start cypress.

npx cypress open

Appear a windows like this:

Nice, we can see two paste: 1-getting-started and 2-advanced-examples and inside this paste there are a lot of examples that cypress show us to learn.

You can see this examples, it's very interesting and bring us a vision that how we can create our test.

When we run for the first time cypress, he will create any other thinks as like we saw.

Structure of Cypress project

Nice, let's talk about cypress.json file:

In this file, we will to put our configuration about cypress, we can put it what kind of files cypress will run or what it the default time out and more.

cypress paste Here, we will have 4 paste as like image show.

fixture= Usually we put it environment variables.

integration = We put it our test files, they finish with ".spec.js", I will not said "always" finish with ".spec.js" because we can change to cypress read others files, for example at the work we use "cucumber" to organized our test to better way, In this configuration we put it to read ".feature" files. It's nice to use, I can teach to use in other occasion.

plugins = As like said the name, in this paste, we add plugins to the project.

support = In this paste we can organized other files and integrate with files of integration paste.

I hope that you liked it, just remember that all these things are in the Documentation of Cypress.io, and if you have any questions you can send me, I'll be happy to help you!

How to use printer on Linux

Robertopaolo Ramirez — Thu, 16 Sep 2021 21:04:48 +0000

Hello everyone,

For those who think that using a printer is difficult on Linux, here is a little guide on how to install, configure and use any printer on any Linux distribution.

ps. Sorry if my english is not so good... I'm just learning.

Step 1: Download cups

Open your terminal and type:

sudo pacman -S cups

You can use pacman or apt-get or other package manager

Step 2: Start CUPS

sudo systemctl start cups

Step 3: Enable CUPS

sudo systemctl enable cups

Step 4: Configure CUPS

sudo nvim /etc/cups/cupsd.conf

Scroll down and find "Show shared printers on the local network" section. Here, you will find an entry title, "Browsing Off". Change this "Browsing On"

# Show shared printers on the local network.
Browsing On
BrowseLocalProtocols dnssd

Next, find the "Only listen for connections from the local machine" section and change.

# Only listen for connections from the local machine.
Port 631
Listen /run/cups/cups.sock

Now, find the "Restrict access to the server" section and add "Allow @LOCAL".

# Restrict access to the server...
<Location />
    Order allow,deny
    Allow @LOCAL
</Location>

And, find the "Restrict access to the admin pages" section. If you want to modify here.

# Restrict access to the admin pages...
<Location /admin>
    AuthType Default
    Require valid-user
    Order allow,deny
    Allow @LOCAL
</Location>

Finally, save and exit.

Step 5: Restart CUPS

sudo systemctl restart cups

Step 6: Add your printer in CUPS

Open your browser and type: localhost:631

In the page, click in Administration.

A login screen will appear.

The username is: root and password is the same that you use in your root.

Inside Administration, click in Find New Printers, then we will find printers that are within CUPS range, but if we want, we can do it manually clicking in Add Printer

Step 7: Verify Succesful Setup of CUPS Print Server

Now, we will verify if the printer that we add is ready to use.

Step 8: Open Printer

Open your linux distribution.

In my case, I use gnome as a desktop environment, so I will find in settings.

Click in add.

And finally, add our printer.
I hope I was helpfull. I tried to be as brief as possible, but if you want to go deeper about CUPS, I leave the links below.

FONTS

https://wiki.archlinux.org/title/CUPS
https://www.cups.org/
https://ubuntu.com/server/docs/service-cups
https://linuxhint.com/cups_print_server_ubuntu/

Hello friend👋

Robertopaolo Ramirez — Sun, 29 Aug 2021 18:49:46 +0000

Hello everyone.

I'm Roberto Ramirez, I'm from Peru but actually I live in Brazil. This is my first post in dev.to!.

Because My wife I learned to make my first lines of code.

console.log('Hello World')

That was the beginner of my career as a Software developer.

At the University I learned Python and C++, but actually I use Javascript for everything 😁.

I like to ...

read, I try to be reading during the day.
drink Coke, yes, this is my favorite drink.
teach, my first job was as a Spanish teacher,so I still have this passion for teaching not just my mother tongue.
code obviously! I love to know what is behind each System.

So..

If you have any suggestion about books or topics to learn, I'll be happy to receive it!

I'll share the things that I learned in my journal as a Software developer.

Connect with me:

LinkedIn
Instagram
GitHub
Telegram

Forem: Robertopaolo Ramirez

Free up storage space in Linux

Tools

Creating a browser extension that generates strong passwords!💪

Logic

Viewer

Style

Interactivity with the web page

Project structure

Triangle with loop

Source Code

Explained

My first CRUD in Python without ORM

Requirements

Create a table

CREATE

READ

UPDATE

DELETE

FINAL RESULT

Links

How to configure git for the first time? - Linux environment

Commands we will use

Other configs that help in everyday life

Links

How to fix a commit?

Two important commands that git give us

Inteface experience Git by terminal

Set new resolution on Linux - Force

Installing Cypress and knowing the structure

Structure of Cypress project

How to use printer on Linux

Hello everyone,

Step 1: Download cups

Step 2: Start CUPS

Step 3: Enable CUPS

Step 4: Configure CUPS

Step 5: Restart CUPS

Step 6: Add your printer in CUPS

Step 7: Verify Succesful Setup of CUPS Print Server

Step 8: Open Printer

FONTS

Hello friend👋

Hello everyone.

I like to ...

So..

Connect with me:

THANKS!