DEV Community: Edson Junior de Andrade

How to optimize SVG files for better use in projects?

Edson Junior de Andrade — Wed, 26 Mar 2025 15:45:03 +0000

We often come across large and complex SVG files full of redundancies, which can be a hassle. Fortunately, we can optimize this with SVGO, a tool that reduces the size of SVG files by removing unnecessary data without compromising quality.

How to use it?

To use it, install it globally with the following command:

# npm
npm install -g svgo

# yarn
yarn global add svgo

# pnpm
pnpm add -g svgo

Create an SVGO configuration file in the root of your project with the following command:

echo svgo.config.js

Open the svgo.config.js file and start configuring it. Below is an example, but feel free to explore other possibilities and even add plugins:

module.exports = {
  multipass: false, /* Performs multiple passes over the file to try to find more possible optimizations.*/
  plugins: [
    { name: 
      'removeViewBox', active: false }, /* Keep the viewBox to avoid clipping. */
    { name: 'removeDimensions', active: true }, /* Remove width and height to allow scalability. */
  ]
};

Go to the location where the svg you want to optimize is located and run the following command:

svgo file_name.svg -o file_name.min.svg

That's it! Your svg is optimized, all the redundancies and unnecessary parameters that come with an svg have been removed and it is ready to use.

For more complete content, visit the SVGO documentation

MVVM for React Native

Edson Junior de Andrade — Sat, 24 Aug 2024 17:06:56 +0000

Understanding MVVM in React Native

The MVVM (Model-View-ViewModel) pattern is widely used in software development to improve code organization, ease maintenance, and increase application testability. It helps to efficiently structure the business logic, user interface (UI), and presentation layer. In the context of React Native, MVVM can be implemented using functional components for Views, hooks to manage state, and functions for ViewModel logic, as well as external APIs or local storage for the Model.

It is an architectural pattern that separates business logic from UI, dividing the application into three main components:

Model: contains the business logic and data of the application.
View: responsible for rendering the UI and displaying data to the user.
ViewModel: acts as an intermediary between the View and the Model, managing the presentation logic and user interactions.

Why use MVVM in React Native?

Better code organization: MVVM helps keep code cleaner and more organized, making it easier for teams to collaborate on React Native projects.
Easy testing: The isolated business and presentation logic in the ViewModel makes it easier to create tests, allowing you to validate the functionality of your application without depending on the UI.
Maintainability and scalability: With a clear separation of responsibilities, it is simpler to add new features and fix bugs, especially in mobile apps that tend to evolve rapidly.

Large companies that use MVVM

The MVVM pattern is used by several technology companies to improve the modularity, testability, and maintainability of their applications. Examples include Microsoft (creator of MVVM), Slack, Netflix, Airbnb, Uber, Spotify, Alibaba, among others. These companies adopt MVVM to create more organized and scalable code.

Pros and Cons

Pros

Separation of concerns: Makes code easier to maintain by clearly separating business logic from presentation.
Code reuse: The ViewModel can be reused in different parts of the application, reducing code duplication.
Ease of maintainability: Large and complex projects become easier to maintain and evolve over time, as the MVVM framework promotes cleaner and more organized code.

Cons

Initial complexity in existing projects: Implementing MVVM in existing projects can add a certain amount of initial complexity, especially in large projects with many business rules.
Learning curve: The team’s adaptation can slow the process due to the familiarization curve with the MVVM pattern and its application in React Native.

Implementation tips

Refactor gradually: Don’t start refactoring the entire project at once; prefer to apply it as opportunities arise, whether when implementing a new feature or identifying a viable refactoring.
Identify components with a lot of logic: Find components that have a lot of business logic and move that logic to a ViewModel.
Keep the ViewModel independent of the UI: Ensure that the ViewModel does not depend on UI components, facilitating testing and reuse.
Use custom hooks: To make it easier to implement the ViewModel, create custom hooks that encapsulate the ViewModel logic and can be reused across different components, promoting consistency and avoiding code duplication.
Use tests to ensure that the refactoring doesn’t break anything: Before you start refactoring, write tests to ensure that the existing functionality will continue to work after the move to MVVM.

Conclusion

The MVVM pattern can be an excellent choice for projects in React Native, especially those that are growing and becoming difficult to maintain. While there may be a learning curve and initial complexity, the long-term benefits in terms of organization, testability, and maintainability can be significant.

Upgrade your Expo project

Edson Junior de Andrade — Tue, 10 Oct 2023 12:45:29 +0000

To upgrade your Expo project from version 48 to version 49, you will need to follow some specific steps. Additionally, you should be aware that compatibility breaks between versions may occur, and it is important to test your application well after updating. Here are the general steps to make this update:

Step 1: Update Expo CLI
First, make sure you have the latest version of Expo CLI installed globally. You can do this by running the following command:

npm install -g expo-cli

This will update Expo CLI to the latest version.

Step 2: Update the Expo SDK
Then update the Expo SDK in your project configuration. Navigate to your Expo project directory and run the following command:

npx expo-cli upgrade

Isso deve atualizar o SDK Expo para a versão mais recente compatível com a versão 49.

Step 3: Update project dependencies
With the Expo SDK update, it is possible that some of the libraries or packages you are using may also need to be updated to ensure compatibility. To do this, you can run the following command in your project directory:

npx expo install

This will analyze your project's dependencies and update the required libraries to the latest version supported by the Expo 49 SDK.

Step 4: Test the project
After updating, it is essential to test your application thoroughly to ensure everything works as expected. Run your Expo project using the command:

npx expo start -c

Open the Expo Go app on your mobile device and scan the QR code displayed on the terminal to verify the operation of your updated app.

Step 5: Resolve compatibility issues
You may encounter compatibility issues when updating your project. Check the error messages in the terminal and the documentation for the libraries you use. Sometimes you may need to make adjustments to your application's code so that it works correctly with the latest version of Expo.

Step 6: Back up your project
Before making any significant updates, make a backup of your project to avoid data loss.

Remember to consult the official Expo documentation and the documentation for the libraries you are using for detailed information about any major changes in version 49 and any required updates.

These are the general steps for upgrading an Expo project from version 48 to version 49. Be sure to test your application thoroughly to ensure everything is working as expected after the upgrade.

Update your libraries to the latest version with yarn

Edson Junior de Andrade — Thu, 20 Jul 2023 20:06:40 +0000

Wirely update your libraries to the latest version using below command

yarn upgrade --latest

XOrg in Fedora

Edson Junior de Andrade — Thu, 20 Jul 2023 12:45:05 +0000

I have been facing problems when sharing screen through fedora, either on discord or I encounter black screen, I managed to solve my problem by installing X.Org.

What is X.Org?
X.Org Server é a implementação livre e de código aberto de servidor de exibição para o sistema de janelas X11 gerenciado pela X.Org Foundation, que é hospedada pela freedesktop.org, e concede acesso público ao padrão das liberações do X Window para os esforços da comunidade de software livre e de código aberto.

sudo dnf install @base-x

Once the installation is complete, restart your machine and when the login screen appears, in the lower right corner there is a gear, click on it and change the option you want, in my case I used GNOME in xorg

Husky + lint-staged + commitlint

Edson Junior de Andrade — Tue, 21 Mar 2023 11:18:16 +0000

In this post, I'll show you how to improve your husky workflow, using pre-commit to trigger error checking on your code before uploading it to the repository.

Start husky with the following command:

npx husky-init

Verify that the husky information has been entered into your package.json:

{

  "scripts": {
    ...
    "prepare": "husky install"
  },
  "devDependencies": {
    ...
    "husky": "^6.0.0"
  }
}

Install husky in your project:

#yarn 
yarn; npx husky add .husky/commit-msg 'npx --no-install commitlint --edit ""'

#npm 
npm install; npx husky add .husky/commit-msg 'npx --no-install commitlint --edit ""'

Checking .husky/commit-msg file you might find the following bash script:

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx --no-install commitlint --edit ""

Let's add the commit-lint package to the lint confirmation messages:

#yarn 
yarn add @commitlint/config-conventional @commitlint/cli --dev

#npm 
npm install @commitlint/config-conventional @commitlint/cli --dev

Create the commitlint.config.js file in the root of your directory and insert the following contents:

module.exports = { extends: ['@commitlint/config-conventional'] };

Now we will install lint-staged:

#yarn 
yarn add lint-staged --dev

#npm 
npm install lint-staged --save-dev

In package.json insert the following script for running lint-staged into our project:

 {
   "scripts": {
     ...
     "pre-commit": "lint-staged",
     "prepare": "husky install"
   }
}

We will create the .lintstagedrc file to run eslint and prettier at commit time:

{
  "src/**/*.+(js|json|ts|tsx)": ["eslint"],
  "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": ["eslint --fix", "prettier --write"]
}

Inside .husky/pre-commit insert the following script:

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npm run pre-commit

That's it! Now test everything we have installed.

Adding a git commit message using vi on macOS

Edson Junior de Andrade — Fri, 09 Dec 2022 11:18:58 +0000

You must have already gone through the situation of having entered vi at the time of a commit and not knowing how to finalize it, below I leave a sequence that will help you with that

1 - Type i
2 - Write your message
3 - Type the ESC key
4 - Type :wq

DONE!

System limit for number of file watchers reached

Edson Junior de Andrade — Mon, 21 Nov 2022 13:52:30 +0000

If your linux hits the system watchers limit, solve it with the following command:

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

Basic setup for development

Edson Junior de Andrade — Thu, 17 Nov 2022 18:14:33 +0000

Development

Make

sudo apt-get update

sudo apt-get install make

Git

sudo apt-get install git

PHP 8

sudo apt install software-properties-common

sudo add-apt-repository ppa:ondrej/php

sudo apt update

sudo apt install php8.0 php8.0-intl php8.0-mysql php8.0-sqlite3 php8.0-gd

Composer

sudo apt update

sudo apt install php-cli unzip

cd ~

curl -sS https://getcomposer.org/installer -o composer-setup.php

sudo php composer-setup.php --install-dir=/usr/local/bin --filename=composer

# Test composer installation
composer

DBeaver

sudo add-apt-repository ppa:serge-rider/dbeaver-ce

sudo apt-get update

sudo apt-get install dbeaver-ce

Docker

sudo apt update

sudo apt install apt-transport-https ca-certificates curl software-properties-common

curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -

sudo add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu focal stable"

sudo apt update

apt-cache policy docker-ce

sudo apt install docker-ce

# Test the Docker installation
sudo systemctl status docker

Docker permission

sudo usermod -aG docker $(whoami)

sudo usermod -aG docker $USER

newgrp docker

Docker Compose

sudo curl -L "https://github.com/docker/compose/releases/download/1.25.5/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose

sudo chmod +x /usr/local/bin/docker-compose

sudo ln -s /usr/local/bin/docker-compose /usr/bin/docker-compose

docker-compose --version

NodeJS

sudo apt update

sudo apt install nodejs

sudo apt install npm

Yarn

curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -

echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list

sudo apt-get update && sudo apt-get install yarn

sudo apt-get install --no-install-recommends yarn

# Test the Yarn version
yarn --version

Browser

Google Chrome

wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
sudo dpkg -i google-chrome-stable_current_amd64.deb

System custom

Papirus icons

sudo add-apt-repository ppa:papirus/papirus

sudo apt install papirus-icon-theme

Gnome

sudo apt install chrome-gnome-shell gnome-shell-extensions

Extensions for Gnome

Axios interceptor token on first call

Edson Junior de Andrade — Thu, 29 Sep 2022 11:50:13 +0000

Just add the capture of the token in the local storage in the configuration inside the interceptors request.

In my case I use lib '@react-native-async-storage/async-storage', you should configure capture according to your storage method.

import AsyncStorage from '@react-native-async-storage/async-storage';

apiApp.interceptors.request.use(
  async config => {
    const userData = await AsyncStorage.getItem(STORAGE_USER_AUTH_DATA).then(
      response => JSON.parse(response || '{}'),
    );

    config.headers = {
      Authorization: `Bearer ${userData?.accessData?.token}`,
      ...config.headers,
    };
    return config;
  },
  error => Promise.reject(error),
);

Semantic commit messages

Edson Junior de Andrade — Fri, 16 Sep 2022 12:44:15 +0000

See how a minor change to your commit message style can make you a better programmer.

Format: <type>(<scope>): <subject>

<scope> is optional

Example

feat: add hat wobble
^--^  ^------------^
|     |
|     +-> Summary in present tense.
|
+-------> Type: chore, docs, feat, fix, refactor, style, or test.

feat: new feature for the user, not a new feature for build script
fix: bug fix for the user, not a fix to a build script
docs: changes to the documentation
style: formatting, missing semi colons, etc; no production code change
refactor: refactoring production code, eg. renaming a variable
test: adding missing tests, refactoring tests; no production code change
chore: updating grunt tasks etc; no production code change

Reference:

https://seesparkbox.com/foundry/semantic_commit_messages

Set default login and password for git requests

Edson Junior de Andrade — Fri, 16 Sep 2022 12:42:38 +0000

To not always need to tell git what your login and password are, enter the command below.

git config credential.helper store