DEV Community: Bruno

How to work with nested locale folder structures in Vue

Bruno — Sat, 01 Nov 2025 20:38:03 +0000

Recently, I was working on a Vue-based application where I decided to explore a bit how I could adapt the frontend architecture (or more specifically - the folder structure and the config, in this case) to work with multiple locale/translation files, including nested in other directories.

Getting a single locale JSON file for each language is easy, especially if you work with Vite in your project, but what about multiple files for the same locale/language? Well, it is not that much of a big deal. I played around a bit with different solutions and our beloved ChatGPT has suggested the following approach.

The code

First step is to assign the translation files to a messages variable, and the catch here is, that if you want to assign a name to a specific set of translations (like "notifications", in this case), then you can just give it a key and assign the file to it:

import de from "./locale/de.json";
import en from "./locale/en.json";
import notificationsDe from "./locale/notifications/notifications_de.json";
import notificationsEn from "./locale/notifications/notifications_en.json";

// the rest of the code for the config bla bla...

const messages = {
  de: {
    ...de,
    notifications: notificationsDe,
  },
  en: {
    ...en,
    notifications: notificationsEn,
  },
};

And then in your Vue files, you just use either the normal keys in the "main" translation files in the root of the locales directory, or access the notifications translations specifically:

<p>{{ $t('app.notifications-banner') }}</p>
<p>{{ $t('notifications.newMessage') }}</p>

And then it will pick each translation accordingly.

Do I like this approach?

Yeah, sure. Why not? I mean, it works. Do I find it to be the cleanest, most efficient one? I am not sure. If I would write this from scratch for some other project right now, I would probably move the messages variable to a separate "utility" file instead, at least, just to keep the config file a bit cleaner and the locale stuff a bit more centralised. But as for an alternative solution, that is what I leave that up for discussion. I am curious if anyone has tried any other solutions than this, and if there is something better I have not thought of. 😉

Software Engineering: How to work and think like an engineer

Bruno — Wed, 18 Sep 2024 22:10:29 +0000

So far, building things with code has been one of the coolest, and most sought out fields of profession. Yep, no doubt there. However, sometimes I get the feeling that a lot of people confuse software development with the misconception that our job is to code. Solely, code. Nope, that is wrong. Well, in part it is correct, I know. However, being a software developer is much more than that. Because sometimes things can only be learned from working with fellow engineers with more experience than us, or perhaps different experiences, I thought sharing my thoughts in this would be useful for you somehow, fellow engineer.

Development is not only coding

I started this post with the misconception that our job is to code, code, and code. And even though that is true to a certain extent, our tasks go way deeper than the code we write.

During my day as a software engineer, I find myself doing more than simply deploying features into prod. I would say coding is a reduced fraction of what it looks like to the people around us. It involves tasks like planning, estimating, writing tests, fixing tests, fixing tests (again), designing user interfaces, writing documentation, fixing bugs, doing quality assurance, helping, being helped, asking questions, being asked questions. Anyway, the list goes on and on. This should be enough to give an idea that our job is much more than building, there is a whole other realm of tasks that we have to do to make sure our work brings any value to the end user. Brent Rambo supports quality work.

Take the following example. Imagine you were a developer, and a client asks you to build an application which allows them to manage their whole inventory/stock, track sales, and get access to all the data in a dashboard with charts, and such. Now, you as a software developer need to have a good understanding of what the client wants, right? Yes. Correct. Next, you need to plan, estimate, and deliver. You will also most likely face bugs, just like any other application. And your client will ask you for more features, so you have to reestimate, replan, and adapt. These are just a few of the things you will have to do, and be aware of before, and during the process of building the project for them. This will help you ensure quality work, and a satisfied customer, because the faster, and better you can build, the happier they will be, right?

What does "software engineering" even mean?

Well, this is another big misunderstanding that people seem to have, and it is completely normal, by the way. First, what question should we ask before we even ask ourselves what "sofware engineering" means? We should ask ourselves what engineering means in the first place. That is where software engineering comes from. Without it, there would be no software engineering anyway.

The term Engineering by itself means "the application of an empirical, scientific approach to finding efficient, econmic solutions to practical problems" ("Modern Software Engineering", David Farley). It is basically the foundation of the thinking we should adapt in our profession as software engineers. If we rely on the notion that coding is the main "tool" to achieve the result, then we are fooling ourselves to believe that it code is by itself the means, and the end.

Code is a tool, a language like any other spoken language, just interpreted by our computers to perform tasks. That is what coding in its rawest meaning is. However, in order to produce high-quality code, and build solutions to business problems, we need to apply a rather scientific reasoning (combined with our code, of course). By doing so, we are ensuring that we are in the pursue of a more authentic meaning to what our role actually is all about, and pursuing solutions that are more efficient, cleaner, and fun to build, too.

Conclusion

While coding is definitely the languages we "speak", and use as a means to building something, our jobs involve much more than just that. It involves the scientific, engineering-based reasoning that helps us go beyond the code we write, and come up with more clever solutions as we gradually maintain a project. By understanding what the term engineering means, you are hopefully able to apply a more scientific reasoning to your work as a software engineer, and therefore build more clever solutions to solve real-world problems.

About the Author

I'm a software developer, and technical writer based in Portugal. I'm passionate about software engineering 👨‍💻 and I love to explore new tools in my day-to-day, and find interesting, and creative solutions to common business, and techincal problems. You can find me on GitHub. If you have any questions or feedback, feel free to reach out! 🚀

How to pass props from child to parent component in React

Bruno — Tue, 10 Sep 2024 21:18:13 +0000

You have probably been passing props from parent to child components, and you have questioned yourself: "Hmm... but what if I want to pass props from child to a parent component? I mean... the other way round?", right? 🤔 I have also questioned myself that, but there are solutions actually.

We will go through them.

What is the typical flow of props?

The typical flow of props is from parent to child. Basically, let's say you have a Parent component which looks like this:

The child component we have below uses a Button component from the very much beloved shadcn/ui component library. The Button component has a children prop, which is passed from the Parent component.

Above, we are passing a children prop from the Parent component to the Child component. All good so far, right?

What if we want to pass props from child to parent?

Now, this is where things get a bit tricky, espcially if it is your first time implementing such logic. The tricky part about it is probably not how to go about doing it, but more how to visualize it. Either way, I have been there, and my experience will hopefully help you out 😌

Because learning is best done by doing, let's bring the example from earlier, and modify it a bit to see how we can pass props from child to parent. The goal of this example is to show how we can modify the state of the Parent component by passing data from the Child component.

And here is what we do from the Child component:

Making it simpler to understand in written form, what we are trying to accomplish with the two components is that we initialise the state in the Parent component, and then pass the variables down to the Child component, and the respective function to update the value of the state in the Parent component. In this case, suppose the value of the state is first set to false. When we click on the button from the Child component, it will take that value, and change it to the opposite of false (! in the value negates it) when the function gets called on the click event.

A common pitfall while passing data from child to parent

Passing data from the child component to the parent does have its quirks. One of the most common pitfalls is forgetting to pass the callback function as a prop to the child component, but that also means that you are passing more logic that you you need to pass. This can lead to more annoying, and harder to debug bugs.

One way to prevent this is to use the useCallback hook, which makes sure that the function you pass as a callback to the child component remains stable across renders, preventing unnecessary re-renders and improving performance. What happens with useCallback is that you pass a function as a prop to the child component, and the child component will have access to the function, and can call it when needed. Let's see how we can do this.

Now let's show how it looks like in the Child component:

Isn't this cleaner than passing the function, and then updating it from the child, and then passing again to the parent? Cleaner, and easier to implement, too, right? 🤩

Thank you for reading!

Even though there are surely more, and potentially even cleaner, better-looking ways of passing data from child to parent in React, I hope that after reading my article, you will find it easier to understand the flow of how data passes from child to parent, and how to go about implementing that with two different ways. Who knows, maybe you will find a more creative way of doing it yourself? 😉 If so, it would be greatly appreciated to explain your ideas in the comments!

About the Author

Vue Composables: what are they, and how to create & use one

Bruno — Fri, 29 Mar 2024 18:16:45 +0000

Hey there, fellow Vue enthusiasts! 🎉 Ever found yourself lost in the jungle of a Vue component, overwhelmed by its tangled mess of tasks? 🤯 We've all been there! Picture this: you start with a simple component, but as your project blossoms, so does the complexity. Before you know it, your once tidy component has morphed into a wild beast, hard to read, test, or reuse. 😱

Isn't it a pain when you're constantly scrolling up and down, trying to decipher what's happening? Or worse, when you find yourself copy-pasting the same logic across multiple components? Or testing a cascading waterfall of side effects? It's like a bad dream, isn't it? Fear not, my fellow brave coder! Vue.js to the rescue with its secret weapon: composables. 🦸‍♂️

What Exactly Are Composables?

Think of composables as your code's trusty sidekick, always ready to swoop in and save the day! 🦸‍♀️ They're like little nuggets of wisdom, encapsulating reusable logic that you can sprinkle throughout your app. 🌟 In simpler terms, they're functions that return an object of goodies you can use in your Vue components. Neat, huh?

// useVuei18n.js
import { useI18n } from 'vue-i18n'

export const useVuei18n = () => {
  const { t } = useI18n()

  return { t }
}

Now, you can sprinkle that t function magic in any component that imports the useVuei18n composable. Voila! ✨

<template>
  <div>{{ t('hello') }}</div>
</template>

<script setup>
import { useVuei18n } from './useVuei18n'

const { t } = useVuei18n()
</script>

Let's Dive into an Example

Ready for some hands-on learning? Let's dive into an example together! Imagine we have a component fetching users from an API and filtering them by name. Sounds simple, right? Here's how it could look:

<template>
  <div>
    <input v-model="search" @input="searchUsers" />
    <ul>
      <li v-for="user in users" :key="user.id">{{ user.name }}</li>
    </ul>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const users = ref([])
const search = ref('')

const searchUsers = () => {
  // fetch users
  fetch('https://jsonplaceholder.typicode.com/users')
    .then(response => response.json())
    .then(data => {
      users.value = data.filter(user => user.name.includes(search.value))
    })
}

onMounted(searchUsers)
</script>

The component starts simple, but as it grows, it becomes a tangled mess. Fear not! We'll rescue it with a useFetch composable, splitting responsibilities and making our code cleaner and more focused. 👌

// useFetch.js
import { ref } from 'vue'

export const useFetch = (url, data) => {
  const search = ref('')

  const searchUsers = () => {
    fetch(url)
      .then(response => response.json())
      .then(users => {
        data.value = users.filter(user => user.name.includes(search.value))
      })
  }

  return { search, searchUsers }
}

Now, let's sprinkle some useFetch magic in our component:

<template>
  <div>
    <input v-model="search" @input="searchUsers" />
    <ul>
      <li v-for="user in users" :key="user.id">{{ user.name }}</li>
    </ul>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useFetch } from './useFetch'

const users = ref([])

const { search, searchUsers } = useFetch('https://jsonplaceholder.typicode.com/users', users)

onMounted(searchUsers)
</script>

We went from a component that juggles two tasks to a clean and focused setup: one task for the component and one for the composable. It's like a breath of fresh air, isn't it? 🌬️ And that's the beauty of composables! They keep your codebase tidy and your components happy. 🎈 Even your cat will thank you later. 🐈‍⬛

Composables: Behind the Scenes

Curious about how composables work under the hood? Buckle up, because we're diving into the nitty-gritty details! 🕵️‍♂️ When you import a composable, it springs into action like a trusty sidekick 🦸‍♂️, executing once and caching its properties. This ensures efficiency and prevents messy side effects. Plus, composables are reactive! 🔄 They respond to changes, ensuring your components stay in sync with the data.

<template>
  <div>{{ $t('hello') }}</div>
</template>

<script setup>
import { useI18n } from 'vue-i

18n'

const { t: $t } = useI18n()

console.log('composable executed')
</script>

Click that button, and watch the magic happen! The composable springs back to life, reacting to changes like a champ. 🎉 Because let's face it, what's Vue.js without that sweet, sweet reactivity?

Also, performance speaking, composables also help you avoid unnecessary re-renders. By splitting your logic into composables, you can ensure that only the relevant parts of your component re-render when the data changes. 🚀 It would be pretty annoying if your entire component re-rendered every time you typed a single letter, wouldn't it?

When not to use Composables

While composables are a powerful tool in your Vue.js arsenal, there are times when you should think twice before using them. 🤔 For instance, if you're working on a small project or a one-off component, composables might be overkill. 🛠️ Instead, keep it simple and stick to the basics. Also, if you're dealing with a component that's tightly coupled with its logic, you might not need a composable. 🤝 Sometimes, it's okay to keep things together if they work well as a team. Take an example of a simple button component that toggles a modal. It's small, simple, and doesn't need to be split into a composable. 🛑

<template>
  <button @click="toggleModal">Open Modal</button>
  <Modal v-if="showModal" @close="toggleModal" />
</template>

<script setup>
import { ref } from 'vue'

const showModal = ref(false)

const toggleModal = () => {
  showModal.value = !showModal.value
}

</script>

If you put the toggleModal function in a composable, it would make the component more complex than it needs to be. 🤯 So, remember, composables are great, but use them wisely! 🧠

Wrapping Up

And there you have it, folks! Composables: the unsung heroes of Vue.js development. 🦸‍♀️ Give it a try, and you will thank yourself later! Happy coding!😁

Resources

About the Author

I'm a frontend developer and technical writer based in Portugal. I'm passionate about software engineering 👨‍💻, and I love to explore new tools in my day-to-day. You can find me on GitHub. If you have any questions or feedback, feel free to reach out! 🚀

🚀 Getting started with Vite

Bruno — Fri, 01 Mar 2024 21:46:15 +0000

Vite. Vite? Yes! But... what is Vite? Well, Vite is the next generation frontend tooling. It's a build tool that aims to provide a faster and leaner development experience for modern web projects. Come with me and let's explore Vite together. Who knows? Maybe you'll find it interesting and useful for your next project 😉

What is Vite?

First, let's learn a bit of history, because you know what they say: "Those who don't know history are doomed to repeat it" 📖 Vite is a French word that means "fast". It's pronounced like "veet". The name is a reference to the tool's main selling point: speed. Vite was created by Evan You, the creator of Vue.js, and it's designed to be a build tool that is the next generation in frontend development. If you try Vite, forget about slow builds and waiting for your project to compile. Vite is fast, really fast. It's so fast that it feels like you're working with a framework that has a built-in server. It's like, hmm well... magic! 🎩✨

Why Vite?

For starters, Vite was designed to solve a problem that many frontend developers face: slow builds. When you're working on a project, you want to see the changes you make in real-time. You don't want to wait for your project to compile every time you make a change.

Even Tom Cat knows that waiting is not fun. Vite addresses slow build times by providing a highly efficient development server that significantly speeds up the feedback loop for developers. It achieves this by using native ES modules in the browser, which allows for on-demand file serving and transformation, and by pre-bundling dependencies with esbuild, which is much faster than traditional JavaScript-based bundlers. This approach not only accelerates the development process, but also reduces the time developers spend waiting for changes to be reflected in the browser, making it feel very responsive.

Like the above illustration from Mozilla(see https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/) shows, breaking up the code into smaller chunks is possible with the ability to export and import variables between modules. This allows Vite to serve your code as-is, without having to bundle it into a single file. Comparing to tools like Webpack, which has to bundle your code into a single file before serving it, this is a huge performance improvement, and it's one of the main reasons why Vite is so fast.

Vite vs Webpack vs Snowpack

To get a better picture into the whole JavaScript bundler landscape, let's compare Vite with Webpack and Snowpack. Webpack is a popular JavaScript bundler that has been around for a while. It's powerful and flexible, but it can be slow, especially for large projects, the more they grow and the more packages you are using. Snowpack is a newer JavaScript bundler that is designed to be fast and lightweight. It's similar to Vite in that it uses native ES modules in the browser, but it's not as feature-rich as Vite. Vite, on the other hand, is designed to be fast, feature-rich, and highly optimized for Vue.js projects. It's also designed to be extensible, so you can use it with other frameworks and libraries as well.

In short, Vite is probably the best choice for Vue.js projects, but it's also a great choice for other modern web projects. Still not convinced? Let's take a look at some of the features that make Vite stand out.

Features

Let's break down some of the features that make Vite stand out:

Fast Builds: Vite is designed to be fast. It uses native ES modules in the browser, which allows for on-demand file serving and transformation, and it pre-bundles dependencies with esbuild, which is much faster than traditional JavaScript-based bundlers. This makes Vite feel very responsive and accelerates the development process.
Hot Module Replacement (HMR): Vite supports HMR out of the box, which means that you can see the changes you make in real-time without having to refresh the page. This makes the development process much more efficient and enjoyable.
Highly Optimized for Vue.js: Vite is designed to be highly optimized for Vue.js projects. It leverages Vue's reactivity system to provide a fast and efficient development experience for Vue developers.
Extensible: Vite is designed to be extensible, so you can use it with other frameworks and libraries as well. This makes it a great choice for modern web projects, not just Vue.js projects.
Built-in Features: Vite comes with built-in features like TypeScript support, CSS preprocessing, and more. This makes it easy to get started with Vite and reduces the need for additional configuration.

Getting Started

If this article has opened your appetite for Vite, you can get started by installing it with npm or yarn. To install Vite with npm, run the following command:

npm init vite@latest my-vite-project

To install Vite with yarn, run the following command:

yarn create vite my-vite-project

Once you've installed Vite, you can start your project by running the following commands:

cd my-vite-project
npm install
npm run dev

This will start the Vite development server and open your project in the browser. You can start making changes to your project and see the changes in real-time. It's that easy!

Conclusion

I hope this article has given you a good overview of Vite and why it's worth considering for your next project. As a quick recap, Vite is a fast, feature-rich, and highly optimized build tool that provides a faster and leaner development experience for modern web projects. It's designed to be highly efficient and responsive, and it comes with built-in features like TypeScript support, CSS preprocessing, and more. If you're looking for a modern build tool that is fast, feature-rich, and highly optimized for Vue.js projects, Vite is definitely worth considering. Give it a try and see for yourself!🚀

Resources

🙋‍♂️ About the Author

What is Amazon AWS EC2 and where can you use them?

Bruno — Thu, 06 Jul 2023 16:30:57 +0000

As you embark on your AWS journey, you've likely encountered references to EC2 (Elastic Compute Cloud) along the way. In this article, I aim to demystify EC2 by guiding you through its core concepts, origins, operational mechanics, and diverse application areas. So, let's delve into the captivating realm of EC2 together, unraveling its immense potential and discovering the myriad opportunities it presents!🏰

🤔 What exactly is "EC2"?

What is it? Who invented it? Well, you surely know it was developed by Amazon, I know... But... what is it? Well, EC2 stands for "Elastic Compute Cloud".

Now, what is exactly "Elastic Compute Cloud" and what does it mean for the cloud to be "elastic compute"? It means that the computing resources provided can be easily scaled up and down based on demand. Why is this useful? EC2 allows you to "rent" virtual machines in the cloud. With this, you are able to run applications which require a lot of computing power, and saving money in hardware and physical data centres.

Suppose you are working with heavy sets of data, you can use an EC2 instance to work with it without having the need to buy ultra expensive hardware, for example.

Besides, EC2 instances are highly reliable, which means they make a great choice when deploying and storing apps and data in the cloud.

🧰 What kind of tools does EC2 provide?

With EC2, you get access to a handful of tools and types of instances, each to suit your needs. EC2 instances differ in terms of CPU, memory, storage, and networking capacity. Some examples of EC2 instances include:

General Purpose
Compute Optimised
Memory Optimised
Storage Optimised
GPU Instances
Bare Metal Instances

For instance, if you need a general-purpose instance, you can choose the General Purpose type. If you need an instance that is optimised for compute-intensive workloads, you can choose the Compute Optimised type. If you need an instance with high memory capacity, you can choose the Memory Optimised type. If you need an instance that is optimised for storage-intensive workloads, you can choose the Storage Optimised type. If you need an instance that is optimised for graphics-intensive workloads, you can choose the GPU Instances type. And if you need direct access to the underlying hardware, you can choose the Bare Metal Instances type.

🏎️ On-Demand EC2

AWS EC2 on-demand instances are charged by hour, immediately available and are ideal for short-term workloads or when you need to scale up quickly. They are used for a variety of workloads, including development and testing, web apps and small to medium-size databases. One other advantage with On-Demand instances is that you don't need to make any upfront commitments or reservations, and you can easily scale up or down your compute capacity as your needs change.

🙆‍♀️ Amazon EC2 Auto-Scaling

Auto Scaling is a key feature of Amazon Elastic Compute Cloud (EC2) that allows you to automatically adjust your computing resources based on the needs of your applications.

With Auto Scaling, you can increase or decrease the number of EC2 instances in your group based on several factors such as CPU utilisation, network traffic, or custom metrics.

Auto Scaling helps you maintain the availability of your applications and services by automatically replacing failed instances and distributing incoming traffic across healthy instances. It also helps you optimize the cost of your infrastructure by automatically scaling down your resources when they are not needed.

You can configure Auto Scaling to launch new instances based on predefined rules or in response to events such as traffic spikes or application failures. You can also integrate Auto Scaling with other AWS services such as Elastic Load Balancing (ELB) and Amazon CloudWatch to create a highly available and scalable architecture.

With all of the above aspects of EC2 instance auto-scaling, you play on the safe side when it comes to saving costs and keeping your users happy 😃

🧾 PAYG - Pay-as-you-go

What does it mean to be a "pay-as-you-go" service? Well, elastic compute clouds typically operate on a pay-as-you-go pricing model.

With EC2, you only pay for the compute resources you consume and the duration for which you use them. This flexibility eliminates the need for upfront hardware investments and allows you to align costs with actual usage. By scaling resources up or down as needed, you can optimise spending and maintain cost-effectiveness. This is one of the great benefits of this payment model.

Thank you for reading!👋

After having gone through all of these bits and bytes of AWS EC2 instances, you should now be able to get started in learning more about it by setting up one and exploring the services and tools it provides. Congratulations 🙌 and I hope it was helpful for you!🙂

I'd like to thank you for reading my article and invite you to follow me on Dev.to, as well as my other platforms:

GitHub: https://github.com/bcostaaa01
Twitter: https://twitter.com/bruno2001costa

I look forward to seeing you on my next one!

Until then,
Happy Coding!👩‍💻

AWS Cloud services: a friendly introduction

Bruno — Mon, 26 Jun 2023 10:58:28 +0000

In today's digital landscape, cloud computing plays a big role in handling codebases, databases and digital assets for businesses and individuals. One of the leading players in the cloud computing game is Amazon Web Services (AWS for short). By making use of the many services AWS offers, businesses get access to a wide range of tools to scale and maintain their digital environments in the cloud ☁️

🤔 What is Amazon Web Services (AWS)?

But, what is AWS exactly, you might ask. Well, AWS is a cloud computing product developed and maintained by Amazon with the aim to provide a wide range of secure and useful services to businesses so they can keep their web environments up and running, and easily maintainable and scalable. AWS offers all kinds of infrastructure services such as:

computing power
storage
databases
Machine Learning
Artificial Intelligence

The list of services you get access to in AWS is actually pretty long, so you bet you have a lot to choose from to be creative.

🔑 What are the key features of AWS?

You might now ask what are the key features of AWS. Here are some of the most relevant ones:

1: Scalability - it is no lie that AWS provides a good ability to scale resources (up or down based on demand). Two of the most interesting features to mention are the EC2 (Elastic Compute Cloud) instances and the auto-scaling (based on traffic or other metrics).

2: Reliability - but, what does it mean to be, "reliable"? Well, I am sure no user likes when the website or content they want to access is not available or when the servers go down, right? AWS has got you covered here too. It provides multiple availability zones and data centers in several locations across the globe. This ensures that the content is accessible with the lowest latency, is less vulnerable to downtimes and failures, and therefore, more reliable.

3: Security - no user and business want an insecure web environment or unauthorised access to data, right? Imagine you were running a hospital database. Would you want the patient data to be accessed by some bad intentioned individual to spread on the internet? I suppose not. AWS has as one of their highest priorities the security of the instances and their whole cloud environment. It provides services and tools to configure security and encryption such as:

Server-Side Encryption (SSE)
Client-Side Encryption
AWS Certificate Manager
AWS CloudHSM
Identity and Access Management (IAM)
security groups
Network ACLs (Access Lists) ...

4: Flexibility - one other interesting and motivating aspect of AWS is the ability to scale and innovate with the various services it provides and the scalability we mentioned earlier. However, there is much more juice in the glass 🧃:

supports various programming languages and provides different SDKs for your specific code needs
provides virtual servers, instances, storage solutions, big data analytics, ...

🏂 Key benefits of AWS

As you could see with the above mentioned, AWS provides a really nice and easy to scale policy. Hereby mentioned are some of its main benefits:

1: Cost-effectiveness - AWS provides several pricing tiers and models, but it also gives you the ability to save costs by defining how your instance will behave when demand grows or decreases, and you also don't have the need to pay rents for a physical data center and hardware as all you need is in the cloud ☁️ and at the tip of your fingers.

2: Global reach - one of the key benefits of deploying on AWS is the ability to provide content and services in a more reliable manner, with the least latency possible, regardless of their location. This is achieved with:

availability zones
edge locations
Amazon S3
Amazon DynamoDB

3: Innovation and Agility - innovating and scaling in AWS is one of the "tastiest" bits about this "juice" 🧃 You get the flexibility of working with various programming languages, frameworks, development environments, AI and ML tools, and so on. You can even process huge chunks of data and AWS will still not complain - as long as you use the right resources, of course 🤪

👏 Conclusion

These are some of the most important aspects for an introduction to AWS that I could think of, but bear with me as this is the beginning of this series about the AWS cloud services, because trust me, it is a very big topic and no single article can cover even the basics of the basics 😉

In general, I think the AWS gives us access to do more with our creativity and needs as developers and business owners. There are a lot of services to choose from, which means you are not limited to a short range of tools. It is easily scalable and you can be creative with the different tools and options to configure them.

Thank you for reading!👋

After having gone through all of these bits and bytes of cloud computing in AWS, you should now be able to get started in learning more about it by setting up an account and exploring their platform. Congratulations 🙌 and I hope it was helpful for you!🙂

I'd like to thank you for reading my article and invite you to follow me on Dev.to, as well as my other platforms:

GitHub: https://github.com/bcostaaa01
Twitter: https://twitter.com/bruno2001costa

I look forward to seeing you on my next one!

Until then,
Happy Coding!👩‍💻

Asynchronous programming in Python

Bruno — Wed, 22 Mar 2023 10:35:25 +0000

Have you ever wanted to learn how to write asynchronous code, but found it difficult to understand how it all works and how to apply it in Python? Well, let me tell you it is not as difficult as it seems. Just bear with me as we go through the different sides of the pyramid.

🤔 What is asynchronous programming? And how does it differ from synchronous programming?

When we write code, it is typically executed one line at a time, in the sequence in which it was written. This is referred to as synchronous programming. However, there are occasions when we must execute lengthy activities, such as reading data from a file, fetching information from a remote server or API endpoint, or waiting for user input.

Asynchronous programming, on the other hand, allows us to perform these long-running tasks without blocking the rest of our code from executing. Instead of waiting for a task to complete before moving on, we can start the task and then move on to the next line of code. When the task is finished, we can come back to it and continue where we left off.

🐍 Asynchronour programing in Python

In Python, we can write asynchronous programming using external libraries such as asyncio, which I will be using throughout this article.

In order to use asyncio, you need to install (if you are using a version pre-3.7) and import it to your Python project:

Installing asyncio:

pip install asyncio

Importing asyncio:

import asyncio

Now you should be able to use asyncio and all its available functions/methods in your project 🎉

⚙️ Coroutines

A coroutine is a function that can be paused and resumed during execution.

You define a coroutine using the async keyword.

Take the following example:

async def my_coroutine():
    print("Coroutine started")
    await asyncio.sleep(1)
    print("Coroutine resumed")

In the example above, the coroutine function runs in the following order:

runs print("Coroutine started")
waits (with await) for 1 second until it can resume
runs print("Coroutine resumed)

🔂 Creating an event loop

In order to run coroutines concurrently, you need to use an event loop. It can manage multiple coroutines at the same time and you can use the asyncio.get_event_loop() method from the asyncio library for that purpose:

async def coroutine_one():
    print("Coroutine started")
    await asyncio.sleep(1)
    print("Coroutine resumed")

async def coroutine_two():
    print("Coroutine two started")
    await asyncio.sleep(2)
    print("Coroutine two resumed")

loop = asyncio.get_event_loop()
loop.run_until_complete(coroutine_one(), coroutine_two())

The code above runs in the following order:

coroutine_one is executed
print("Coroutine started") prints a message stating the coroutine has started
await asyncio.sleep(1) waits for 1 second until it resumes the execution of coroutine_one
print("Coroutine resumed") prints a message stating the coroutine has resumed
coroutine_two is executed
print("Coroutine started") prints a message stating the coroutine has started
await asyncio.sleep(2) waits for 2 seconds until it resumes the execution of coroutine_two
print("Coroutine resumed") prints a message stating the coroutine has resumed
main() function is define and is used to run both coroutines concurrently - simultaneously
an event loop is created using loop = asyncio.get_event_loop()
loop is executed on loop.run_until_complete(coroutine_one(), coroutine_two())
coroutine_one() is executed and runs print("Coroutine started")
coroutine_two() is executed and runs print("Coroutine started")
coroutine_one() waits for 1 second until it can resume
coroutine_two() waits for 2 seconds until it can resume
after both coroutines wait for 1 and 2 seconds to resume, loop finishes executing and returns the results of the loop

🛰 Using async/await with external libraries

Imagine you want to work with HTTP requests asynchronously, you can make use of the async and await keywords to make those requests in an asynchronous programming manner. Take the example of the aiohttp library:

import asyncio
import aiohttp

async def get_data():
   async with aiohttp.ClientSession as session:
      async with session.get(url) as response:
         data = response.json()
         return await data

async def main():
   data = await get_data("catsjsonapi.com/cat1")
   print(data)

loop = async.get_event_loop()
loop.run_until_complete(main())

In this example, we are importing the asyncio and aiohttp libraries to make HTTP requests asynchronously. As an overview if the code above, the main() coroutine is executed using loop (the event loop), which executes the get_data() coroutine and then prints the data from the "catsjsonapi.com/cat1" API endpoint as JSON.

💭 Final thoughts

Working with asynchronous programming in Python can be very useful in various environments/projects, and doing so is quite easy, as we saw throughout this article. All you need to do is import asyncio and make use of its functions, combine with external libraries, and so on.

However, there are other libraries which allow you to write asynchronous code in Python, such as:

Trio: https://trio.readthedocs.io/en/stable/
Trio-asyncio: https://trio-asyncio.readthedocs.io/en/latest/

Thank you for reading!👋

After having gone through all of these bits and bytes of async programming in Python, you should now be able to apply it in your code. Congratulations 🙌 and I hope it was helpful for you!🙂

I'd like to thank you for reading my article and invite you to follow me on Dev.to, as well as my other platforms:

GitHub: https://github.com/bcostaaa01
Twitter: https://twitter.com/bruno2001costa

I look forward to seeing you on my next one!

Until then,
Happy Coding!👩‍💻

🌙 Lua: an introduction

Bruno — Thu, 09 Feb 2023 11:15:01 +0000

You have probably programmed with other languages like JavaScript or Java, or C++, but found yourself with the question what is "Lua"?, or you would simply like to learn about it or learn a new language, am I right?

From video games to web applications, Lua has proven to be the perfect potion for creating dynamic and interactive content. So, grab your virtual wand and join me as we explore the wonders of Lua and discover why it's one of the most interesting languages in the programming realm!✨

🤔 What exactly is Lua?

Before we begin with the more technical explanation, there is a funny particularity about the name, because "lua" in Portuguese means "moon". 😄

Now, the technical side: Lua is a lightweight, high-level, multi-paradigm programming language designed primarily for embedded systems and clients. It is dynamically typed, interpreted, and garbage-collected, making it easy to learn and use. It supports procedural, object-oriented, and functional programming styles, and provides a simple syntax that can be used to build complex systems. It also has a small footprint, making it well suited for use in embedded systems, where memory and CPU resources are limited. Additionally, Lua has a strong ecosystem of libraries and tools, making it a popular choice for game development, scripting, and other applications.

💾 How do you install Lua?

Installing Lua depends on your machine, first of all, but I have divided the installation guide into Windows, MacOS and Linux so you only have to scroll to yours and start.

Windows:

Download the latest version of the Lua binary distribution from the official website (www.lua.org).
Extract the contents of the downloaded archive to a directory of your choice.
Add the path to the Lua bin directory to your system's PATH environment variable.

set PATH=%PATH%;<directory where Lua was extracted>\bin

Open a command prompt or terminal and run the command "lua" to verify the installation.

MacOS:

Download the latest version of the Lua binary distribution from the official website (www.lua.org).
Extract the contents of the downloaded archive to a directory of your choice.
Open Terminal and run the following commands:

$ cd <directory where Lua was extracted>
$ sudo make install

Verify the installation by running the command "lua" in the terminal.

Linux:

Download the latest version of the Lua source code from the official website (www.lua.org).
Extract the contents of the downloaded archive to a directory of your choice.
Open Terminal and run the following commands:

$ cd <directory where Lua was extracted>
$ sudo make linux
$ sudo make install

Verify the installation by running the command "lua" in the terminal.

There is another possible alternative here, by installing Lua using the package manager for your specific distribution (e.g. apt-get on Ubuntu). For example:

$ sudo apt-get install lua5.4

In all cases, I recommend you check out the official documentation before jumping straight to installing: https://www.lua.org/manual/5.4/readme.html

👷‍♀️ Creating your first Lua script

Let's take the most basic of examples: writing a function. In Lua, you can define a function using the "function" keyword followed by the function name, its parameters (enclosed in parentheses), and its body (enclosed in curly braces). Sounds familiar, doesn't it? 😉

function greet(greeting, name) 
   return greeting + ", " + name
end

message = greet("Hey", "Bruno")
pring(message) -- Hey, Bruno

But, there's something new here: functions in Lua are first-class citizens, meaning they can be assigned to variables (as you can see with message = greet("Hey", "Bruno")), passed as arguments to other functions, and even returned as values from other functions. Here is an example use case: suppose you want to sort an array of numbers in ascending order. You can write a comparison function that returns true if the first argument is less than the second argument, and false otherwise. This comparison function can then be passed as an argument to the table.sort function, which sorts the array based on the results of the comparison function. Take a look at the code:

-- Define the comparison function
function compare(a, b) 
   return a < b
end

-- Define an array of numbers
numbers = {3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5}

-- Sort the array using the compare function
table.sort(numbers, compare)

-- Print the sorted array
for i, v in ipairs(numbers) do
  print(v)
end

-- Output:
-- 1
-- 1
-- 2
-- 3
-- 3
-- 4
-- 5
-- 5
-- 5
-- 6
-- 9

In the above example, the comparison function compare() is a first-class citizen, meaning it can be assigned to a variable, passed as an argument to another function (table.sort), and even returned as a value from another function. This allows for a high degree of flexibility and reusability in the code, and makes it easy to write generic functions that can work with any comparison function. Cool, right? 😉

✨ Thank you for reading!

Lua is a very powerful language and more articles will follow this one, so bear with me as we explore the realm of this language ✨🌙

I'd like to thank you for reading my article and invite you to follow me on Dev.to, as well as my other platforms:

GitHub: https://github.com/bcostaaa01
Twitter: https://twitter.com/bruno2001costa

I look forward to seeing you on my next one!

Until then,
Happy Coding!👩‍💻

Garden.io: what is it and why should you be using it? 🪴

Bruno — Tue, 31 Jan 2023 21:47:15 +0000

Ready to streamline your development and operations processes? In this comprehensive guide, we'll dive deep into all that Garden.io has to offer, from its powerful features to its user-friendliness. You won't want to pass up the efficiency and productivity boost that Garden.io can bring to your applications, regardless of their scopes of complexity.

🪴 What is Garden.io?

Garden.io is a cloud native application development, testing, and deployment platform. It defines the build and deployment procedure for your application in a configuration file named 'garden.yml'. It is compatible with a variety of programming languages, including JavaScript, and may be used in projects developed using React, VueJS, NodeJS, and other frontend and backend technologies.

// Detect dark theme var iframe = document.getElementById('tweet-1585631425734144000-144'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1585631425734144000&theme=dark" }

Garden.io was developed in response to the demand for a standardized and adaptable method of managing and deploying applications, particularly in large and complex environments. It was created to support a broad variety of languages and frameworks, be simple to use, connect with well-known tools like Docker and Kubernetes, and be flexible.

The platform has grown in popularity among developers since its inception.
With constant additions of new features and integrations to fulfill the demands of companies and developers, it continues to expand and get better.

Sounds cool, right? 😉

🤔 Why should you be using it?

I will give you some reasons why you should be using Garden.io in your projects:

Garden.io makes complex app management easier by allowing you to describe all of your app's dependencies, build processes, and deployment configurations in a single configuration file.
CI/CD processes are streamlined by providing you with a configuration file that defines your pipeline's build, test, and deploy methods, automating the whole process of building, testing, and deploying your code.
Garden.io lets you design a consistent workflow for your projects, including the tools and processes for developing, testing, and delivering code. This ensures that all of your projects adhere to the same set of standards and procedures.
It supports a wide range of languages and frameworks, including Node.js, Python, and Java, making it a versatile and adaptable solution for managing and deploying your applications.

Let's look at some of the principles that will help you better comprehend the workflow.

🤽‍♀️ DevOps

DevOps is a software engineering methodology that emphasizes cooperation and communication between software developers and information technology (IT) experts while automating software delivery and infrastructure changes.
It seeks to shorten the development lifecycle and enable continuous delivery of high-quality software.

🔮 CI/CD

Continuous Integration/Continuous Deployment is abbreviated as CI/CD. It is a software development approach that tries to increase software delivery speed, quality, and dependability.

Continuous Integration (CI) is the technique of merging code changes into a central repository on a frequent basis, generally many times per day. This helps developers to recognize and resolve issues early in the development process, rather than waiting until later stages when they may be more difficult to resolve.

Continuous Deployment (CD) extends CI by automating the process of delivering code changes to production. This implies that if a change is made and successfully integrated into the central repository, it is immediately deployed to the production environment without any manual involvement.

⚙️ Installing Kubernetes, Docker and Garden.io

To utilize Garden.io, you must first install Kubernetes and Docker on your machine. You will need these as Garden.io relies on Docker and Kubernetes to manage and deploy containerized applications.

📦 Kubernetes

Install Kubernetes using NPM:

npm install -g kubernetes-cli

Install Kubernetes using Yarn:

yarn global add kubernetes-cli

Install Kubernetes using Homebrew:

brew install kubernetes-cli

🐳 Docker

Install Docker using NPM:

npm install -g docker

Install Docker using Yarn:

yarn global add docker

Install Docker using Homebrew:

brew install docker

🪴 Garden.io

After the latter tools have finished installing, it's time to install Garden.io.

Homebrew

brew tap garden-io/garden
brew install garden-cli

Installation script

curl -sfL https://git.io/get-garden | sh -s -- -b /usr/local/bin

The instructions above were designed for MacOS, but you can read more in the documentation if you are using Windows or Linux: https://docs.garden.io/getting-started/1-installation.

After Garden.io finishes installing, you should see a beautiful terminal look like the above!🤩

👨‍💻 Setting up Garden.io

In order to setup Garden.io in your project, run the following command:

garden init

Then, configure the project by adding the following as example to the garden.yml file, which is the file that specifies services, tasks, tests, and so on:

services:
  web:
    build: .
    ports:
      - target: 3000
        published: 3000
        protocol: tcp

The configuration for Garden.io is now complete (based on the specific needs of your project, of course).

🚧 Building the application

After having setup the configurations for Garden.io in your project, you can now run it by navigating to the project directory and running the following command:

garden start

Now that you have setup, configured Garden.io in your project and is now running, Garden will start the project and create a container for each service that you defined in the garden.yml file. If you access http://localhost:3000 in your browser, you should be able to access your project!🎉

🧪 Testing the application

In order to setup testing in your Garden.io (because testing is also important, right?😉), you can do so by first setting up a section in your garden.yml file called tests.

tests:
  my-tests:
    service: web
    command: npm run test

Here, you can define the specific testing that you need for your project. Then, when you run the following command, you should be able to see the test suites running:

garden test

This test, for example, will run npm run test in the web service. See? Testing in Garden.io is as easy as eating a slice of pizza!🍕

🚚 Deploying

The question now is: "How do I deploy a project using Garden.io?" 🤔 Well, it's also easy!😀

You can deploy it to various cloud providers and Kubernetes clusters, by creating a target environment section to your garden.yml file:

target:
  name: my-kubernetes-cluster
  provider: kubernetes

In this example, we specify that the target environment is a Kubernetes cluster called my-kubernetes-cluster. Note that you would need to have kubectl installed on your machine and have access to it in order to deploy to a Kubernetes cluster.

Then, you run the following command to deploy it:

garden deploy

After completing these steps, Garden.io will start the deployment process and create the necessary resources in your cloud provider or Kubernetes cluster. You can accompany the state of deployment in your lovely terminal 🥰

Then, in order to access your deployed project, open the URL or IP address of the deployed environment, depending on the specific cloud provider or Kubernetes setup you are using. After following these steps, you can see how Garden.io is so easy to work with when setting up, testing and deploying your project 😁

🌻 The official documentation

🪴 Garden.io's official documentation may be found here: https://docs.garden.io/ -
It covers all of the information you'll need in greater detail.

And what a beatiful documentation they have written!👏

Thank you for reading!👋

I'd like to thank you for reading my article! I hope it helped you getting to know a great tool and that it can be useful in your future projects 😁 I would also like to invite you to follow me on Dev.to, as well as my other platforms:

GitHub: https://github.com/bcostaaa01
Twitter: https://twitter.com/bruno2001costa

I look forward to seeing you on my next one!

Until then,
Happy Coding!👩‍💻

Getting started with Pinia for VueJS and NuxtJS🍍

Bruno — Mon, 23 Jan 2023 15:32:12 +0000

Say goodbye to cluttered and confusing state management in your VueJS and NuxtJS projects with Pinia! This tropical paradise of a plugin is not just your average state management tool, it's a full-featured framework that'll have you sipping on pina coladas while you build dynamic and responsive user interfaces.

With its powerful store manager, customizable layout system, and a plethora of tasty directives and components, Pinia is the ultimate way to add some island vibes to your development process. So put on your Hawaiian shirt and let's get ready to party with Pinia!

🍍 What exactly is Pinia?

Pinia is a versatile and lightweight plugin for VueJS and NuxtJS that makes building dynamic and responsive user interfaces a breeze. It's packed with all the features you need to create amazing projects and it is designed to make state management easy and organized.

With Pinia, you can manage your application's state in a centralized way, customize the layout of your application, and use a variety of directives and components to make your development process more efficient.

🤔 How does it differ from Vuex?

You may now ask yourserlf: "But how does it differ from Vuex?". Good question indeed!

Pinia and Vuex are both state management libraries for VueJS, but they have some key differences.

Vuex

Vuex is a centralized state management library that follows the Flux architecture pattern. It uses a strict unidirectional data flow and provides a centralized store for the whole application. This makes it simple to understand, but it can become complex when the application grows.

Pinia

On the other hand, Pinia is a state management library that is built on top of Vuex. It aims to provide a more flexible approach to state management by allowing developers to split the store into smaller, more manageable modules. This can make it easier to understand and maintain, especially for larger applications. Additionally, Pinia also provides a layout system and a set of directives and components that can help you to build their application in an easy and efficient way. It's a sort of "Jack of all trades", like the cat above who is not only a cat, but also a pineapple 🙃

✅ Why can it be a better choice?

Now that you have an idea of the differences, you may ask why use one over the other, right? Well, I will share some reasons why Pinia might make a good choice:

Pinia allows you to split the store into smaller, more manageable modules, which can make it easier to understand and maintain, especially for larger applications.
Pinia provides a simpler and more intuitive API that makes it easy to get started with state management in your VueJS and NuxtJS projects.
Pinia also provides a layout system and a set of directives and components that can help developers to build their application in an easy and efficient way.
Pinia allows to organize the state in a more natural way, making it easier to understand and to debug the application.
Pinia provides a dynamic layout system that can be used to switch layouts on the fly and also to customize the layout of the application

At the end of the day though, the choice over one or the other comes down to your specific needs for the project you are working on in particular. One could argue for hours what the best choice would be and like a colleague once told me: "it depends" 😉

💾 How to install Pinia

Too much talking, right? 😅 Let's now dive into what really matters - installing and using it. 😎

NPM

npm install @pina/core

Yarn

yarn add @pina/core

Now that you have installed it, let's import it to your project.

VueJS

import Pinia from '@pina/core'

Vue.use(Pinia)

NuxtJS

import Pinia from '@pina/core'
export default {
  // ...
  modules: [
    '@pina/core/nuxt'
  ],
  // ...
  pinia: {
    modules: [
        // modules goes here
    ]
  }
}

Installing and importing is done 👏 Let's now use it in an example project!

🚧 Use case

Setup a store to manage the state in your app:

// store.js

import { createStore } from '@pina/core'

export const store = createStore({
  state: {
    message: 'Hello, World!'
  },
  mutations: {
    updateMessage (state, payload) {
      state.message = payload
    }
  }
})

Create a component and paste the following template and script tags:

// PiniaExample.vue

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage('Hello, Pinia!')">Update Message</button>
  </div>
</template>

<script>
import { mapState, mapMutations } from '@pina/core'

export default {
  computed: {
    ...mapState(['message'])
  },
  methods: {
    ...mapMutations(['updateMessage'])
  }
}
</script>

I will now break the project down to simple steps so you have an idea of what's happening under the hood:

In the store, state has a message property which is set to "Hello, World!". The mutations are methods that allow us to modify the state. In this example, there is a mutation called updateMessage that takes a payload and updates the message property in the state.
The template in PiniaExample.vue displays the message from the store and has a button that when clicked, triggers the updateMessage mutation. The template uses the mapState helper from Pinia to access the message property in the store.
When the button is clicked, the updateMessage method is called and it triggers the mutation in the store, changing the message property.

Following the idea of the project above, you should be able to see the similarities between Vuex, as well as the way you can apply it to your project for state management. Good job!👏

Thank you for reading!

I hope that this article helped you gain an understanding of how Pinia works in it's core, and that you can take this tool to your project in the way you need and that will help you scale more easily.

Make sure to follow me on my social media to stay up to date on projects I work on or contribute to:

GitHub: https://github.com/bcostaaa01
Twitter: https://twitter.com/bruno2001costa

I look forward to seeing you on my next one!👋

Until then,
Happy Coding!👩‍💻

Computer Science: Basic Concepts of Data Processing

Bruno — Wed, 11 Jan 2023 16:40:39 +0000

Imagine a world in which you could forecast the next big trend or know precisely what your consumers want before they do. That world, however, is not so far away, owing to the power of data processing!

“Data is a precious thing and will last longer than the systems themselves.” - Tim Berners-Lee, inventor of the World Wide Web

But don't be fooled by the sophisticated name; it's not exclusively for techies and figure crunchers. "Data processing" is a fascinating and interesting area that aids in the transformation of mountains of confusing information into usable insights.

"Context is Everything"

The statement "context is everything" emphasizes the necessity of knowing the environment in which data is acquired and used.
The context in data processing refers to the background information and situations that surround and give meaning to the data. The data may be misinterpreted or of limited use if the context is not understood.

Consider a dataset of sales numbers from a retail business.
The basic figures may not reveal the entire story. By considering the context, such as the time period during which the sales were made, the location of the business, and the demographics of the neighborhood, one can acquire a better understanding of the sales data and uncover patterns or trends that may not be obvious from the raw numbers alone.

Binary Code

Binary code is used in data processing to store and transport data in digital systems. It is the foundation for all contemporary computers and the majority of the technologies we use in our everyday lives.

The meaning of data expressed in binary code is determined by how it is interpreted and used. In one context, the same sequence of binary digits can represent a letter of the alphabet and a number in another.

Encoding

Encoding is the process of converting data from one format to another, such as text to binary, and it's crucial to understand the context in which it's used since differing encoding methods might alter the quality and integrity of the data.

In conclusion, while binary is the cornerstone of data representation in digital systems, the context in which it is utilized, how it is encoded and processed, is critical for understanding and making the greatest use of the data.

Digital Representation of Color

The basic unit of a digital image in data processing is the pixel, which is commonly represented as a tiny square or rectangle of a single color.

Pixel - single square which is assigned a color and used to assemble a larger image.

The image is composed of a grid of pixels, each of which has its own color and brightness value. Each pixel's color is often represented by a mix of red, green, and blue (RGB) values, which are subsequently transformed to binary code for storage and processing in digital systems.

The color values of each pixel in a picture are represented using binary code.
Each color value is generally represented by 8 bits, allowing for a total of 256 distinct values (28). A pixel's brightness is commonly represented using 8 bits, allowing for a range of 256 distinct degrees of brightness.

Images may be modified in a number of ways when it comes to data processing by adjusting the color and brightness values of individual pixels or groups of pixels. Image editing software, for example, may be used to adjust the general brightness or contrast of an image, as well as the color of a single object.

Data Messaging

Data messaging is the process of sending data via a network between two or more devices. This can involve transmitting text messages, emails, or other digital data. Because binary code is a straightforward and efficient way to represent data in a digital format, it is utilized as the foundation for data communications.

Binary code is employed at the hardware level to represent data as electrical signals that are transferred via the different components of a computer, including the motherboard, which serves as the primary hub for all of the computer's components, including the CPU, which processes data, the memory controller and storage controller, which govern data flow, and communication channels that link devices to the motherboard. The devices have their own controllers that manage the data encoding and decoding into binary signals.

💭 Final thoughts

To summarize, Data Processing is an important part of Computer Science and how the data we interact with everyday is maintained and brought to anywhere it is needed. with several options. It is also a key part of the curriculum of Computer Science at the university and in the generality of our work as developers, analysts, data scientists and so on, therefore understanding how it all works will take you a step further in your career and studies. I hope this article helped you in that path!🙌

Thank you for reading!👋

I'd like to thank you for reading my article and invite you to follow me on Dev.to, as well as my other platforms:

GitHub: https://github.com/bcostaaa01
Twitter: https://twitter.com/bruno2001costa

I look forward to seeing you on my next one!

Until then,
Happy Coding!👩‍💻