DEV Community: Matheus Maximiliano

Exploring Cloud Computing: Essential Concepts Made Simple!

Matheus Maximiliano — Mon, 26 Jun 2023 18:56:21 +0000

Unlimited operational resources, secure data storage, and unprecedented scalability! So this is what Cloud Computing has been offering, but what is it all about? How does it work? Let's explore some basic concepts of this technology and understand the benefits it provides.

Imagine you creating a company, starting a startup and you don't have to worry about buying expensive servers, preparing space, setting up a bunch of wires, and setting up this infrastructure.
In Cloud Computing the computing resources such as servers, storage, databases, all available as services on demand, you only pay for what you use, accessible at any time and from anywhere in the world.

Cloud Service Models

As we begin to explore what is behind Cloud Computing, it is crucial that we understand the different service models used such as:

SaaS - Software as a Service
PaaS - Platform as a Service
IaaS - Infrastructure as a Service

And each of these types of models plays a unique role and offers distinct benefits to companies and users alike.

SaaS - Software as a Service
To understand these models let's start with SaaS, the pioneer of the models and the most used and most present in our lives. SaaS is a model where applications and functionality are made available to you as a service through the cloud. This brings convenience, flexibility, and simplicity, as you don't need to install anything on your device and can access everything from anywhere.

SaaS Example
To better understand how SaaS works let's imagine, you are an entrepreneur and you want to create an online store to sell your products. In the old days you would have to hire a development team and create a custom e-commerce system, but all this takes time and a lot of resources.

However, using a SaaS model, you can now use platforms such as Shopify, which offers a cloud service that provides complete solutions for creating online stores, providing everything you need while spending less resources and time.

PaaS - Platform as a Service
Next, we have PaaS, which emerges as an option for developers and IT teams, bringing the possibility to create, deploy and manage applications efficiently, using a complete platform provided by the Cloud, bringing as main benefit to let developers focus only on the code, without having to worry about management since it is managed by the cloud service provider.
Google Cloud Platform (GCP) is an example of PaaS and how it works, suppose you are a developer and want to create a new web application. Instead of building and provisioning all the necessary infrastructure from scratch, such as servers, networks, and database, you can use GCP.

IaaS - Infrastructure as a Service
And finally, IaaS is a model that revolutionizes the way organizations manage IT infrastructure. Using this model, companies can provision critical computing resources, such as virtual servers, storage and networking, all on demand. This model offers the most flexibility and scalability, allowing companies to quickly adapt to the demand fluctuations that happen in their services.
Now using Microsoft's Azure as an example, let's imagine that you are a company that needs to run and manage some servers to host your applications and data, and instead of buying your physical server, you adopt Azure as a solution that already owns everything and only uses what is needed. For example:

Flexibility and scalability;
Server management;
Networking resources such as VPN Gatways and load balancer;
Automatic backups and disaster recovery;

And best of all, pay-as-you-go.

Benefits of Cloud Computing

And as if it were not enough so many interesting and important points that the Cloud offers us, let's understand some of them better!

Scalability, a very important concept in cloud computing, which basically refers to the ability to scale resources according to what we need, being able to adjust up or down according to the demand on our computing resources.
For example, Black Friday is coming and our company expects an increase in website traffic during this period, already knowing this, we can increase the capacity of our servers for a period of time to ensure that our website remains available and not overloaded, using only what is necessary.

Flexibility allows us as administrators to change the parameters of the services at any time from anywhere, by cell phone, notebook, without the need to be physically on site.
Cost savings, the thing that most appeals to us when we think of company management and use of the services.

Cost savings, which most delight us when we think of enterprise management and resource utilization. By opting for cloud services, companies generally eliminate the need to invest in their own physical infrastructure (which is already a huge savings). Not to mention the reduction in maintenance and upgrade costs and unnecessary overspending, because the costs of these cloud resources are charged only for what is actually used of the resources

Availability a key characteristic of cloud services. Cloud service providers, which are typically large technology companies, have a robust and scalable infrastructure to ensure high availability and uptime of cloud services. But we have to remember that correctly scaling the application is very important, because if it is not scaled well

Unlimited operational resources, secure storage, and unprecedented scalability, the cloud offers an efficient and cost-effective alternative to traditional physical infrastructures. It enables enterprises to save costs, optimize their resources, and focus on growth and innovation.

So get on this technological journey and enjoy all the benefits the cloud has to offer!

I will keep some more cloud topics around here! But leave me your vision, have you used it, had problems, or what solutions the cloud has already brought to you?

Thanks for reading and see you next time.

Very easy customizing console.log with CSS

Matheus Maximiliano — Tue, 17 May 2022 23:57:40 +0000

welcome and today we going customizing our console.log with css, and YES IS POSSIBLE!

I don't know about you, but I love use console.log for debugging my codes, is very fast for me, and its not a problem, most peoples coming with the talk, "whos use console.log for debugging code, never going be a senior developer". But surprise I'm a senior and use console.log.

But this talk is for a another day.

Today let's customizing our console.log, and its very easy, you just place before your text in console a %c and done.

Now you create and customizing your console with this mode.

.
.
.
.
.
From post in PT-BR
Instagram: @imatheus.max
Post: https://www.instagram.com/p/Cdq4JFiMcnt/

3 Extensions from chrome web store

Matheus Maximiliano — Tue, 17 May 2022 01:27:34 +0000

if have one thing that help me day-a-day and I don't open my hand is my extensions, and always that i change my computer or browser, I install again they.

In first is the Wappalyzer, is it very interesting to know what type of tecnologys is used in a site, for it does so by you have a notion that how the market is using, as well as does from you get a reference for your projects.

The JSON Viewer, this one I don't have words, simply awesome, it make it easy see JSON docs inside in your browser, as well as the dark theme that not make you blind while you open the archive. 🤣

In finally the most be used for me, CSS Peeper, simply the best of all extensions in this post, completed, with loved designer, easily use, as well be extreme useful to capture colors, and sizes like a height and weight from a element.

.
.
.
.
.
From post in PT-BR
Instagram: @imatheus.max
Post: https://www.instagram.com/p/CdohttkhcBZ/

Most fast function to extract numbers from string!

Matheus Maximiliano — Mon, 16 May 2022 13:06:28 +0000

Most fast create card with Glassmorphism effect

Matheus Maximiliano — Sun, 15 May 2022 18:10:38 +0000

Lest go, this tutorial are very fast, to you create a very beautiful card using grassmorphism effect with css, in your project! 💥

We have 3 steps to create this card. 🧾

1. Create our structure, so can create with HTML, or React with JSX/TSX, so, wherever technology that you use to create, make this.

In my exemple, I use HTML.

2. now, lets go create our css

For this, we need attention for 2 things

⚠ The footer element receive our grassmorphism effect, so, this it need a opacity in your background-color for you can see the effect.

⚠ For opacity I used direct in HEX code color, like this #fafafa77 this 77 is like a opacity in HEX, test after you create this card.

For your header we create this code.

And for footer this code.

🚀 NICE, we create the beautiful card with glassmorphism effect, and if you lets create another element with this effect, use the code:

backdrop-filter:blur(1rem)

And don't forgot to opacity in element that have received this effect.

Finality this is our result!

.
.
.
.
.
From post in PT-BR
Instagram: @imatheus.max
Post: https://www.instagram.com/p/Cdlk5fTAWEy/

When I need use Typescript?

Matheus Maximiliano — Sat, 14 May 2022 16:07:17 +0000

Do you know what Typescript is? If you don't know, lets learn how to use it!

Typescript is a superset of Javascript, but what does is mean? It's basically our beloved Javascript + someone functions!

The most importante function we have is to include typing in Javascript.

But why?

When you declare an object, a variable a function whatever, you say what king of value is will receive!

This helps to avoid assign wrong values to variables, and thanks this our dear text editors end up getting much better, because they can warn if we doing something wrong before we even execute the code!

In my opinion, if you don't use Typescript, start as soon as possible!

But when and which project to use?

In all possible, from basic to advanced, there is no reason not to use Typescript 🚀

.
.
.
.
.
From post in PT-BR
Instagram: @imatheus.max
Post: https://www.instagram.com/p/CdivOVjOon-/

Create a Prismic IO Respository for Blog 👨🏽‍💻

Matheus Maximiliano — Thu, 20 Jan 2022 18:17:35 +0000

what is Prismic IO?

Prismic is a Headless CMS very simples to work, a tool for editing online content totally custom with a very nice API and a great free plan... Basically you keep your content in a content repository that you can query via its simples REST API with the prismisc client.

Creating Prismic account

Now we going create a prismic account, so, fill the information's and create your account. After your account created, open a new repository like this.

In prismic we have a two types of contents, Repeatable and unique, lets go understand the differences:

Repeatable is used to create content that you need create more that one, exemple:
- Posts blog;
- faq contents;
- testimonials;
Unique is used in singles pages content like a about us page in your site.

After created your repository, we will go to build our first type content. This type is it a repeatable **type called **posts, and here we add this modes with field names.

If you want create more types, feel freedom for this, custom and create of your way.

UID type | field name: uid
Title type | field name: title
Rich Text | field name: content

After created just save.

Get Environments Variables

To connect a Prisma client you need a two environments variables, the PRISMIC_ACCESS_TOKENand PRISMIC_ENDPOINT, this variables. you can use in .env.local for projects.

For get your endpoint, he finds himself in top of the page settings. And for generate your access token, fill the application name in prismic settings and add application, so, now we have this two information for connect with prismic client.

Conclusion

The prismic IO is a very good CMS, with a very nice free plan, so you can create news projects and use for manager your contents, and create singles pages, or repeatables contens, and in a very easy way to do.

Awesome method to create a NextJS project.

Matheus Maximiliano — Wed, 19 Jan 2022 03:23:15 +0000

Why NextJS?

If you work today with web development, have chances that you listened about NextJS. NextJS comes with powerful Sever-Side Rendering (SSR), and Static Site Generation (SSG) capabilities built-in.

Using NextJS you spend more time writing features, and less time struggling with build tools and Webpack. 💥

He have a very great structures of into pages to doing routing to your project and combine with a improved search engine optimization is a great framework to build a frontend project.

Chakra UI, why it?

chakra UI is a very great component library for building React applications. That is super easy to us developing while also taking care of accessibility.

I love the themes that chakra have, by create a color pallet and can automatically create states for hover, active, disabled, etc. As well as be able to build and change themes, like a light theme, and dark theme in very easy form.

Moreover the form of use Styled System, simplifying use of inline styliing with style props, provides shorhand versions of commomn, like margin as 'm' and padding as 'p, and facilitating write codes responsive .

<Text
   fontSize={["1.4rem","1.75rem"]}
   fontWeight="700"
   color="purple.900"
   w={["90%","100%"]}
   lineHeight="1.5rem"
   mb="4"
>
   Hello World!
</Text>

After all, I say that Chakra UI is the best design system to create my projects, all the functionality that is offered help me in create great projects in less time.

Start a Project 🚀

NextJS have a lot types of exemples to start your project, and if you need create a front-end project with chakra ui and typescript, just use this command.

Using create-next-app execute with npm or yarn this exemple:

npx create-next-app --example with-chakra-ui-typescript blogproject
or
yarn create next-app --example with-chakra-ui-typescript blogproject

so now, you have a great base to start your projects.

This is a great form to create a new projects, and start use NextJS and adventuring create awesome interfaces. And if you want others exemples 🚀 from NextJS, you can in this link.

How to use Insomnia to test your API

Matheus Maximiliano — Tue, 18 Jan 2022 02:13:36 +0000

What is Insomnia?

If you are developing a set of APIs, Insomnia is a great software to test your REST or GraphQL APIs in terms of functionality, performance, besides a well simple alternative.

The goal of this article is to share how to get the best of it, show some of the tips and tricks that you can use.

Insomnia is available on Linux, Windows and macOS, in this link

Get Organized

When you work with a lot a projects, you need staying organized for that you can do maintainability your projects. So, Insomnia have two ways to do start, in first, we have a Request Collection, and inside, we have folders.

Request Collection or Workspaces

Request collections or Workspace are the first item that need created to start a test your new project or application or even microservice.

In your dashboard, you can view all your Request Collections, and open for you start work.

Besides as well is possible can create environments variables for each collection, like a base url, keys, whatever you need reuse.

Folders

The folders are items for organization inside your collection to organize your requests.

You can use the folder for organize your requests for product, or group requests of the same domain, or differences paths.

As well folders will continue to have access to the environments variables of your collection.

Environment Variables

You can configure your collection a base environments or a sub environments, and switch to a different environment with ease.

This environments are place to store data as a JSON object that you can modify in whatever moment.

Create a requests

Inside your collection, you can create your endpoints and choice the type of request you need, POST, GET, PUT, DELETE whatever you want.

After you created, you need place into a endpoint for testing your API. In this point its possible use a base environments, like a base url for your endpoint.

Start use

So, suppose we have an API that let us manage a collection of Clients, and we have a tree basic endpoints:

POST /client/create to create a new client;
POST /client/auth to get a access token;
GET /client/ to get a data client logged;

For POST route, we need fill the information's for sign up using a JSON structure.

The endpoint use a baseUrl environment.

This API is responsible to generate a unique identifier at the creation of a client like a uuid, so after we create our client, and have successful in our request, we need get the data of this client.

Now, after create your client user we need a access token to use Bearer Authenticate for get a client data.

So call your Auth router to get a token authenticate.

After use the Auth, we have this return.

So, finally, open the get client route, and go to second tab Auth, and select the "Bearer Token" or whatever you use to authenticate.

In input text token, press Ctrl+space (in Windows), and select response => body attribute.

Edit Tag

Edit the tag filter to set path and identifier attribute $.token, and adapt the trigger to you need, equal the image below .

And is it! Now you can get the data client object!

Closing thoughts

Personally, I find Insomnia very easy to work with, we have seen some of the features Insomnia to make us more productive. I hope this article made your development more easy too.
There are a lot of possibilities to explore. if you want to go further, you can check out Insomnia documentation