DEV Community: Mateus V. Farias

The Importance of a Design System: Lessons from Steam UI

Mateus V. Farias — Tue, 14 Jan 2025 00:10:44 +0000

Yes, this is the Steam app!

Now, imagine the confusion and difficulty in developing new features or maintaining this mess!

When there isn’t a design system in place, it’s common for teams to rely on existing references. But what happens when the same element appears in three (or more!) different styles for the same purpose? Chaos ensues.

The image below highlights the result of not having a unified design system. Search bars, tab menus, dropdowns, and buttons—each category showcases inconsistencies in appearance, interaction, and purpose. These inconsistencies not only create confusion for developers and designers but also impact user experience, leaving users to navigate through a fragmented interface.

A design system solves this by providing a single source of truth—a library of reusable components, patterns, and standards. It ensures visual and functional consistency across the platform, speeds up development, and makes future updates seamless. For apps like Steam, implementing a design system could prevent issues like these and lay the groundwork for a cohesive, scalable design strategy.

Image Source: Reddit - The Amazing Consistency of Steam's UI

Generating GPG Keys and Signing Commits

Mateus V. Farias — Wed, 24 Jul 2024 21:56:57 +0000

Generating a GPG key and using it to sign your Git commits is a recommended practice to ensure the authenticity and integrity of your code. In this post, we'll explore the step-by-step process.

1. Installing GPG

First, you need to install GPG (GNU Privacy Guard) on your machine. Depending on your operating system, you can use the following commands:

For Ubuntu/Debian: sudo apt-get install gnupg
For macOS: brew install gnupg
For Windows: Download and install Gpg4win from the official website.

2. Checking Existing Keys

Before generating a new GPG key, it's advisable to check if any existing keys have been generated on your machine. To do this, run the following command:

gpg --list-keys

If no keys are listed, you can proceed to generate a new GPG key.

3. Generating a GPG Key

Once GPG is installed, the next step is to generate a new key. Run the following command in the terminal:

gpg --full-generate-key

You will be prompted to provide some information such as the type of key, size, validity period, name, and email. Follow the on-screen instructions to complete the process.

4. Exporting the Public Key

After generating your key, you will need to export the public key to associate it with your profile on GitHub or another Git service. Use the command below to export your public key:

gpg --armor --export YOUR_KEY_ID

Replace "YOUR_KEY_ID" with the ID of your key, which can be found with the command gpg --list-keys or gpg --list-secret-key --keyid-format LONG.

5. Linking the Key to GitHub

Copy the output of the previous command and go to your account settings on GitHub. In the "SSH and GPG keys" section, add a new GPG key and paste the public key that you copied.

GitHub Docs: Adding a GPG key to your GitHub account

6. Setting Up Git to Use the GPG Key

Now, you need to configure Git to sign your commits with your GPG key. Execute the following commands replacing "YOUR_KEY_ID" with your key ID:

git config --global user.signingkey YOUR_KEY_ID
git config --global commit.gpgSign true

7. Signing Commits

With all configurations completed, you can start signing your commits. When making a commit, Git automatically uses your GPG key to sign it:

git commit -m "Your commit message"

To verify if the commit was signed correctly, you can use the command:

git log --show-signature

Conclusion

Signing your commits with a GPG key is an excellent way to enhance the security and reliability of your code. This guide should help you set up and effectively use GPG keys to sign your commits.

Share recommendation Visual Studio Code extensions

Mateus V. Farias — Mon, 14 Nov 2022 05:43:57 +0000

When we're working in a team, we would like to use the same set of tools to make the development process more robust and productive.

With Visual Studio Code, it makes sense to use the same set of extensions.

You can share the extensions with other people in your team by creating a file extensions.json located in the .vscode folder.

{
    "recommendations": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode", "svelte.svelte-vscode"]
}

The recommendations key contains the list of extensions which each of them is defined by an extension identifier.

You can see the list of installed extensions by running the command:

$ code --list-extensions

Example output

dbaeumer.vscode-eslint
rvest.vs-code-prettier-eslint
svelte.svelte-vscode

Follow me on Twitter and GitHub to get more useful contents.

Compose multiple React providers

Mateus V. Farias — Mon, 14 Nov 2022 05:03:25 +0000

Nowadays, it is commom to use React's context at the root of an application to manage a shared state between any components.

For example, checking whether or not the current user has logged in might be a accomplished by AuthProvider provider:

const App = () => {
    return (
        <AuthProvider>
            {...}
        </AuthProvider>
    );
};

Using multiple providers could make the code harder to read because there are a lot of nested components:

const App = () => {
    return (
        <Router>
            <AuthProvider>
                <ThemeProvider>
                    <LocalizationProvider>
                        {...}
                    </LocalizationProvider>
                </ThemeProvider>
            </AuthProvider>
        </Router>
    );
};

The providers can be composed together by using the reduce function:

const compose = (providers) =>
    providers.reduce((Prev, Curr) => ({ children }) => (
        <Prev>
            <Curr>{children}</Curr>
        </Prev>
    ));

The provider declarations in the root can be shorten below:

const Provider = compose([
    Router,
    AuthProvider,
    ThemeProvider,
    LocalizationProvider,
]);

const App = () => {
    return (
        <Provider>
            {...}
        </Provider>
    );
};

I hope it is helpful for you.

Do not render page while hydration

Mateus V. Farias — Mon, 10 Oct 2022 02:44:18 +0000

Handles the mounted state of the component.

Useful for cases where a content should only be rendered on the browser and the DOM should stay the same on the server and on the re-hydration process.

Why React is so popular

Mateus V. Farias — Sat, 19 Feb 2022 05:00:39 +0000

A Brief History

2011 — Designed and createcd in Facebook for internal use.
2012 — Instagram Started using it.
2013 — Open-sourced.
2015 — Open-sourced React Native for building native iOS and Android apps.

React is a library, not a framework

Its library approach has allowed React to evolve into such a great tool.

The main advantage is that Libraries are lightweight, and there is a freedom to choose different tools.

The Framework creates an entire ecosystem to build an app, and you don't have an easy way to use tools outside of it.

It is Flexible

Once you've learned React, you can use it for a vast variety of projects.

Generate a static site using Gatsby;
Add server rendering with Next.js;
Build mobile apps with React Native;
Create a virtual reality website for 360 experiences using React VR.

Great Dev Experience

Rapid development and small API combined create a fantastic developer experience. The API has very few concepts and is very simple to learn.

You just need to import the React library and create a component that accepts props and returns JSX, which converts API calls and renders HTML.

Supported by Meta

React is heavily used in Meta's apps like Facebook and Instagram. That's why Meta is deeply committed to it.

The top four React contributors on GitHub are full-time Meta employees.

The React team maintains a blog that gives you details for each release.

Broad Community Support

Since 2015, React's popularity has grown steadily. It has a massive active community and its GitHub Repository has over 183k Stars.

It is one of the Top 5 Repositories on GitHub.

Have you used the React library to build something?

The Psychology of Color: Use color to enhance learning 👨‍🎨

Mateus V. Farias — Tue, 23 Mar 2021 18:24:49 +0000

“Colors aren’t important.”

Oh yeah - then how do you explain traffic lights, warning signs, and rainbows? Color is important, and it’s time we pay attention to color in eLearning too.

Learning is a difficult field to understand, and there’s so much research out there discussing these issues that it’s hard to know where to begin. What’s pretty obvious though is that color plays a key role in creating an environment that fosters learning.

Using the right color, and the correct selection and placement can seriously affect feelings, attention, and behavior when learning. It’s time that we leveraged that to our advantage.

Power Up Setup

First, make shine ✨

I'm using Manjaro OS and theme zsh.

PowerLevel10k: A Zsh theme

romkatv / powerlevel10k

A Zsh theme

Powerlevel10k

Powerlevel10k is a theme for Zsh. It emphasizes speed flexibility and out-of-the-box experience.

Getting started

Install the recommended font. Optional but highly recommended.
Install Powerlevel10k itself.
Restart Zsh with exec zsh.
Type p10k configure if the configuration wizard doesn't start automatically.

Features

Configuration wizard

Type p10k configure to access the builtin configuration wizard right from your terminal.

Screen recording

All styles except Pure are functionally equivalent. They display the same information and differ only in presentation.

Configuration wizard creates ~/.p10k.zsh based on your preferences. Additional prompt customization can be done by editing this file. It has plenty of comments to help you navigate through configuration options.

Tip…

View on GitHub

LSDeluxe: The next gen ls command

Peltoche / lsd

The next gen ls command

LSD (LSDeluxe)

This project is a rewrite of GNU ls with lots of added features like colors, icons, tree-view, more formatting options etc The project is heavily inspired by the super colorls project.

Installation

Packaging status

Prerequisites

Install the patched fonts of powerline nerd-font and/or font-awesome. Have a look at the Nerd Font README for more installation instructions. Don't forget to setup your terminal in order to use the correct font.

OS/Distro	Command
Archlinux	`pacman -S lsd`
Fedora	`dnf install lsd`
Gentoo	`sudo emerge sys-apps/lsd`
macOS	`brew install lsd` or `sudo port install lsd`
NixOS	`nix-env -iA nixos.lsd`
FreeBSD	`pkg install lsd`
NetBSD or any `pkgsrc` platform	`pkgin install lsd` or `cd /usr/pkgsrc/sysutils/lsd && make install`
Windows	`scoop install lsd`
Android (via Termux)	`pkg install lsd`
Ubuntu/Debian based distro	`sudo dpkg -i lsd_0.23.1_amd64.deb` get `.deb` file from release page
Solus	`eopkg it lsd`
Void Linux	`sudo xbps-install lsd`
openSUSE	`sudo`

…

View on GitHub

Tilda: A Gtk based drop down terminal for Linux and Unix

Peltoche / lsd

The next gen ls command

LSD (LSDeluxe)

This project is a rewrite of GNU ls with lots of added features like colors, icons, tree-view, more formatting options etc The project is heavily inspired by the super colorls project.

Installation

Packaging status

Prerequisites

OS/Distro	Command
Archlinux	`pacman -S lsd`
Fedora	`dnf install lsd`
Gentoo	`sudo emerge sys-apps/lsd`
macOS	`brew install lsd` or `sudo port install lsd`
NixOS	`nix-env -iA nixos.lsd`
FreeBSD	`pkg install lsd`
NetBSD or any `pkgsrc` platform	`pkgin install lsd` or `cd /usr/pkgsrc/sysutils/lsd && make install`
Windows	`scoop install lsd`
Android (via Termux)	`pkg install lsd`
Ubuntu/Debian based distro	`sudo dpkg -i lsd_0.23.1_amd64.deb` get `.deb` file from release page
Solus	`eopkg it lsd`
Void Linux	`sudo xbps-install lsd`
openSUSE	`sudo`

…

View on GitHub

Show your setup

Post your setup in the comments 👇

CSS Tips: Relative units with EM and REM

Mateus V. Farias — Mon, 15 Mar 2021 05:03:43 +0000

We have already seen the use of the relative unit of measure with %. We use this relative measure when we want an element to use, for example, 100% of the available space.

HTML:

<div>
  <img src="img/avatar.png" alt="Avatar">
</div>

CSS:

div {
  width: 400px;
}

In the example above, depending on the size of the image, the image may exceed the space we defined for the <div> or it may occupy a smaller space. If we want the image to occupy the entire space of the <div>, we can use the relative unit %:

div {
  width: 400px;
}

img {
  width: 100%; /* It occupies 100% of the available space */
}

The great advantage of using % is that no matter what size we put in <div>, <img> will always follow the size of its parent tag (the <div>).

EM and REM have the same concept as %, but instead of being based on the size of an element, these measures are based on the size of the font. EM uses the font size of the parent element and REM uses the font size of <html>.

HTML:

<html>
<head>
    <meta charset="UTF-8">
    <title>An example</title>
</head>
<body>
    <div>
        <img src="img/avatar.png" alt="Avatar">
    </div>
</body>
</html>

CSS:

html {
  font-size: 10px;
}

div {
  font-size: 20px;
}

img {
  width: 10em; /* The width will be 200px */
  height: 10rem; /* The height will be 100px */
}

The advantage of using these measures is that if we have other elements using these measures and we need to change the size of all the elements proportionately, just change them in one place. These units of measure are ideal for when the website needs to be displayed on different screen sizes, where on each screen size the font must be displayed on different size scales and proportional to each other.

Toggle Between Dark/Light Modes with HTML5 web storage API

Mateus V. Farias — Thu, 31 Dec 2020 04:23:12 +0000

Dark-theme is a really simple dark mode library that enables a switcher to toggle between dark and light modes on the web application.

Written in vanilla JavaScript. Uses HTML5 web storage API (local storage) to save the current theme on the client-side.

How to use it:

Create a checkbox based toggle switch on the page.

<div class="toggle">
  <input id="switch" type="checkbox" name="theme">
  <label for="switch">Toggle</label>
</div>

input[type=checkbox]{
  height: 0;
  width: 0;
  visibility: hidden;
}

label {
  cursor: pointer;
  text-indent: -9999px;
  width: 52px;
  height: 27px;
  background: grey;
  float: right;
  border-radius: 100px;
  position: relative;
}

label::after{
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background-color: white;
  border-radius: 90px;
  transition: 0.3s;
}

input:checked + label {
  background-color: var(--color-headings);
}

input:checked + label::after {
  left: calc(100% - 5px);
  transform: translateX(-100%);
}

label:active:after {
  width: 45px;
}

Determine the styles on the light mode using the following CSS variables.

html {
  --bg: #FCFCFC;
}

body {
  background-color: var(--bg);
}

The main JavaScript to enable the dark mode switcher and determine the CSS styles on the dark mode.

const html = document.querySelector("html")
const checkbox = document.querySelector("input[name=theme]")

const getStyle = (element, style) => 
  window
    .getComputedStyle(element)
    .getPropertyValue(style);

const initialColors = {
  bg: getStyle(html, "--bg"),
}

const darkMode = {
  bg: "#333333", // override styles here
}

const transformKey = key => 
  "--" + key.replace(/([A-Z])/, "-$1").toLowerCase();

const changeColors = (colors) => {
  Object.keys(colors).map(key => 
    html.style.setProperty(transformKey(key), colors[key]) 
  );
}

checkbox.addEventListener("change", ({target}) => {
    target.checked ? changeColors(darkMode) : changeColors(initialColors);
});

Create local storage.

const isExistLocalStorage = (key) => localStorage.getItem(key) != null;

const createOrEditLocalStorage = (key, value) =>
  localStorage.setItem(key, JSON.stringify(value));

const getValeuLocalStorage = (key) => JSON.parse(localStorage.getItem(key));

checkbox.addEventListener("change", ({ target }) => {
  if (target.checked) {
    changeColors(darkMode);
    createOrEditLocalStorage("mode", "darkMode");
  } else {
    changeColors(initialColors);
    createOrEditLocalStorage("mode", "initialColors");
  }
});

if (!isExistLocalStorage("mode"))
  createOrEditLocalStorage("mode", "initialColors");

if (getValeuLocalStorage("mode") === "initialColors") {
  checkbox.removeAttribute("checked");
  changeColors(initialColors);
} else {
  checkbox.setAttribute("checked", "");
  changeColors(darkMode);
}

Now, try it!

HTTP Status Codes

Mateus V. Farias — Tue, 08 Dec 2020 04:30:25 +0000

What are they and what are they for?

1XX - Informational

Indicates only one information. Examples:

100 - Continue.
102 - Processing

2XX - Success

Indicates successful request. Examples:

200 - OK
201 - Created
202 - Accepted

3XX - Redirection

Indicates a redial. Examples:

301 - Moved Permanently
308 - Permanent Redirect

4XX - Client Error

Indicates an error on the client side. An example that we all face is when we enter the URL incorrectly. Examples:

400 - Bad Request
401 - Unauthorized
403 - Forbidden
404 - Not found

5XX - Server Error

Indicator an error on the server side. Examples:

500 - Internal Server Error
502 Bad Gateway
503 - Service Unavailable