teleren/devto huggingface dataset:
Why create a technical blog nowadays?
Published: 2023-02-24 00:28:23

---
title: Why create a technical blog nowadays?
published: true
date: 2023-02-23 00:55:19 UTC
tags: 
canonical_url: https://blog.igoroliveira.dev/why-create-a-technical-blog-nowadays
---

Hi there, my name is Igor Oliveira and I am a mid-level software developer. I have been in the industry for a few years now, and I am constantly striving to improve my skills and knowledge. One area I would like to improve on is my English writing skills.

I am originally from Brazil, and English is not my first language. Although I have been reading English for some years, writing and speak in English has always been a challenge for me. However, I believe that learn English is an essential skill for any software developer, as it helps us to communicate our ideas, thoughts and insights with a wider audience and our work colleagues if you work in an English-speak company.

That is why I have decided to take on the challenge of writing blog posts in English. I know it will not be an easy task, but I am willing to put in the time and effort to improve my writing skills. Writing blog posts will not only help me to improve my English, but it will also allow me to share my experiences, insights and opinions with others in the software development community.

I hope that by writing blog posts, I will be able to reach a wider audience, connect with other developers and learn from their experiences. I also believe that writing blog posts will help me to grow as a software developer, as I will have to think critically and creatively about the topics I write about.

I plan to write about a variety of topics, such as my personal projects, which I share in my GitHub, and my experiences as a software developer. I hope that by sharing my thoughts and insights, I will be able to help other developers, especially those who are starting their careers.

So, stay tuned for my first blog post, and if you have any suggestions for topics that you would like me to write about, please let me know. I am open to suggestions and feedback, as I believe that is how we can all grow and improve together.

Thank you for reading, and I hope you enjoy my writing journey.
Why hooks are introduced in React
Published: 2023-02-23 00:50:26


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b8qpptwgufr0kqebkwrj.png)
React has functional and class-based components. There can be different use cases for them depending upon the user requirements. In earlier versions of react, i.e. prior to 16.8, class-based components were used for the high data-intensive scenarios. 

React introduced hooks in version 16.8 onwards that provide the user to use all the features of a class component without even writing a class component.

- Hooks provide the user a provision to define the state in functional components
- Life cycle methods that were limited to class components can be used in functional ones.
- The ‘this’ keyword works differently in javascript and functional components.
- Classes don't minify well and cause the hot reloading very unreliable.
- Every time we have to add the bindings for the event handlers.

Code Reusability:

- There’s no specific and easy way to share the logic between components.
- HOC and RenderProps do that but then wrapping layers increase.
- Code becomes complicated

Excessive life cycle methods:

- For Data fetching from API - componentDidMount and ComponentDidUpdate can be used.
- For subscribing and unsubscribing from some event, two lifecycle methods can be used such as componentDidMount and componentWillUnmount
- All of these features can be achieved using the minimum hooks such as useEffect and useCallback.

So, these are some of the reasons that can be considered while using hooks in React.
3-part series - (2) Create a CodeDeploy application and Deployment group
Tags: s3, ec2, codedeploy, codepipiline
Published: 2023-02-23 00:34:11

In this 3-part series on **Create and Deploy applications using CodeDeploy and CodePipeline with Amazon S3 bucket versioning enabled** -

In the **2nd article**, We will Cceate a CodeDeploy application and Deployment group

**1st article**
- As a reference, please read my **[3-part series - (1) Launch an EC2 Instance, Install CodeDeploy Agent and upload App_Linux.zip file to version enabled S3 bucket](https://dev.to/awsmine/3-part-series-1-launch-an-ec2-instance-install-codedeploy-agent-and-upload-applinuxzip-file-to-version-enabled-s3-bucket-dhp)**

_**Let’s get started!**_

Please visit my **[GitHub Repository for CI-CD/Docker/ECS/ECR articles](https://github.com/awsmine/Docker_projects)** on various topics being updated on constant basis.

# Objectives:

**1.** Create a CodeDeploy application 

**2.** Create a Deployment group


# Pre-requisites:
- AWS user account with admin access, not a root account.
- AWS CLI.


# Resources Used:

**[CodeCommit](https://docs.aws.amazon.com/codecommit/latest/userguide/welcome.html)**

**[CodeBuild](https://docs.aws.amazon.com/codebuild/latest/userguide/welcome.html)**

**[CodeDeploy](https://docs.aws.amazon.com/codedeploy/latest/userguide/welcome.html)**

**[AWS CodePipeline](https://docs.aws.amazon.com/codepipeline/latest/userguide/welcome.html)**



# Steps for implementation to this project

## 1. Create a CodeDeploy application 

- **`Go to CodeDeploy Console, Applications, Create application, my-codedeployapp, Compute platform , Select the EC2/On-Premises`**

- Create application



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5fiadpilukm92yojuc58.png)



## 2. Create a Deployment group


- **`click my-codedeployapp, Service role: Role-CodeDeploy, Create deployment group, my-codedeploy-grp, Deployment type, In-place deployment, Environment configuration, Select Amazon EC2 Instances,In Tag Group 1, Key-Name, Value:my-ec2, Matching instances, 1 unique matched instance, Agent configuration with AWS Systems Manager: Never, Deployment settings: Select CodeDeployDefault.AllAtOnce, Load balancer: Uncheck`** 

- Create deployment group.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o9vw6hmyq0l8c7oywdkn.png)


# What we have done so far

- We will successfully created a CodeDeploy application and Deployment group.
Vite com React do ZERO em 20min! - Como eu aprendo algo novo?
Published: 2023-03-01 18:46:50

---
title: Vite com React do ZERO em 20min! - Como eu aprendo algo novo?
published: true
date: 2023-02-23 00:00:00 UTC
tags: 
canonical_url: https://mariosouto.com/posts/vite-com-react-do-zero-em-20min-como-eu-aprendo-algo-novo
---

Aprenda a impulsionar sua produtividade no desenvolvimento JavaScript com Vite - o poderoso tooling para construir aplicações modernas em tempo recorde! 🚀👨‍💻 #JavaScript #Vite #Tooling

<iframe width="560" height="315" src="https://www.youtube.com/embed/Q0z_uK9Egt0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen=""></iframe>

* * *

Link para assistir direto e compartilhar: [https://youtu.be/Q0z\_uK9Egt0](https://youtu.be/Q0z_uK9Egt0)

* * *
Clean Architecture—The introduction
Published: 2023-02-22 23:35:11

Clean Architecture aims to separate the business rules or domain of an application from external resources like databases and frameworks. However, according to Rodrigo Branas, a more suitable name for it could be Clean Design, as architecture imposes constraints such as language and paradigm, while design involves defining responsibilities and their distribution.

Douglas Martin stresses that design is an unavoidable aspect of any project, and the only alternative to good design is bad design, not a complete absence of it. Even if someone not consciously attempts to design something, it will still be designed in some form, whether the result is a good or poor design. 

### Reinventing the wheel (or almost)
Rodrigo Branas explains that Clean Architecture does not invent anything new with its core principles. Instead, it builds upon concepts that were already introduced in Ivar Jacobson's software architecture books from the 1990s, specifically the use-case driven approach. The book isn't about reinventing the wheel, but rather refining and adapting existing concepts. 

Ivar Jacobson's book introduced several key concepts that are still relevant today, such as the Entity-Boundary-Control (EBC) pattern. It involves separating the entity (the object representation), the boundary (the external consumer), and the control (the coordinator) to create a more modular and flexible architecture. By using this pattern, developers can create software systems that are easier to maintain and modify over time.

### Core principles
According to Robert Martin, the core of your application is not centered around the database or any framework being used, but rather the use cases of your application. Achieving this requires the isolation of business rules, the definition of layers and responsibilities, and careful control of flow and dependencies within the application. By prioritizing these aspects, developers can ensure that the use cases of the application remain at the center of the development process.

### Wrapping this up
This was just an introduction, providing background information on the book and its history. In a subsequent post, I plan to delve into the key concepts presented in the Clean Code Architecture course by Rodrigo Branas, including enterprise and application business rules, interface adapters, and frameworks and drivers. These concepts are going to be a big part of what we do as developers on a day-to-day basis.``
The Ultimate Guide 🤝 To Frontend Development 👨‍💻
Tags: frontend, webdev, programming, beginners
Published: 2023-02-22 23:34:49

- Frontend development is a crucial element in the world of web and software engineering.

- It involves creating user interfaces that are visually appealing, intuitive, and interactive. 

- As a frontend developer, you will be responsible for developing the look and feel of websites or applications by using HTML5, [CSS3](https://www.youtube.com/watch?v=baXsdDqM_5o&t=6s), [JavaScript](https://www.youtube.com/watch?v=9EZ0TpuHYvI) (JS), React JS/Vue JS frameworks etc. to create dynamic user experiences. 

- The job requires knowledge of coding languages such as HTML5 & CSS3 which are used to define how content is structured on web pages.

- [JavaScript](https://www.youtube.com/watch?v=9EZ0TpuHYvI) (JS) -used for making pages interactive; React/Vue- used to create single page applications with rich UI components; AJAX –asynchronous data transfer from the server without reloading page & many more technologies like SASS & LESS preprocessor.

- You need a good understanding of Responsive Design techniques so that your website looks great on all devices regardless of the size or platform they use. 

- Additionally, it’s important that developers have an eye for design since they often collaborate with designers who provide them with visual assets such as logos, images & icons.  

- Being able to write clean code is essential when writing Front end code because this helps in debugging any errors quickly, also having knowledge about cross-browser compatibility issues can save time while testing different browsers across different platforms. 

- Last but not least being up-to-date with the latest trends related Front End Develop



###### Free 🔥 Websites To Master Frontend Development

🎥 {% youtube y0qMQqynpe8%}


#### Bonus

###### 10 JavaScript Games to learn-Totally Cool & Fun 🚀✨🔥

🎥 {% youtube https://www.youtube.com/watch?v=9EZ0TpuHYvI
%}


### Connect with Me 😊

#### 🔗 Links

[![linkedin](https://img.shields.io/badge/linkedin-0A66C2?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/mahmoud-el-kariouny-822719149/)

[![twitter](https://img.shields.io/badge/twitter-1DA1F2?style=for-the-badge&logo=twitter&logoColor=white)](https://twitter.com/Mahmoud42275)
Creating a Responsive Blog with HTML, CSS, and JavaScript
Tags: webdev, javascript, programming, tutorial
Published: 2023-02-22 23:30:05

Are you looking to build a professional-looking blog with HTML, CSS, and JavaScript? In this video 

tutorial, we'll walk you through the process of designing and developing a blog from scratch, step-by-step. 



From creating the layout of your blog with HTML and CSS to adding interactivity and functionality with JavaScript, 

we'll cover everything you need to know to create a fully functional blog. Whether you're a blogger, 

web developer, or simply looking to learn new skills, this tutorial is for you! 

We'll also provide some tips and tricks along the way to help you optimize your blog for search engines, improve your website's accessibility, and enhance the user experience. 

🔔 Subscribe for more! 

https://www.youtube.com/channel/UCHI9Mo7HCSlqum1UMP2APFQ

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 

🔗 Source code 

https://upfiles.com/KO0VqqK

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 

☝ Start developing the project (base files + images) 

- Click on the UpFiles link 

- Click the green button (code) 

- Click Download ZIP 

- Extract the project to the desired location 

📂Assets 

Icons: https://boxicon.com/

 Fonts: https://fonts.google.com/

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 

 🔥 Follow me! 

Facebook 

https://bit.ly/3IMfk04

 Instagram 

https://bit.ly/3GHoQyT

 Twitter 

https://bit.ly/3IOBEqc

 Linkedin 

https://bit.ly/3INnwNY

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 

Tags: 

#responsiveportfolio #portfoliohtmlcssjs #webmonster #html #css #javascript #webdesign #website #react #blog, #HTML #CSS #JavaScript #web_development #responsive_design #accessibility #user_experience #tutorial. 



So, if you're ready to start building your own blog, this video is the perfect place to start. Be sure to like this video and subscribe to our channel for more web development tutorials and tips!



Link of The Video :

https://youtu.be/BqgWIel4uuU

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nvgyi3hwd956el3xrt5k.jpg)
Suas amizades podem estar impactando sua evolução de carreira
Tags: carreira, amizade, network, habito
Published: 2023-02-22 23:20:40

É muito comum encontrarmos a teoria de que "você é a média das 5 pessoas com quem você convive", que precisamos ser criteriosos ao escolhermos as pessoas com quem nos relacionamos e, instintivamente e biologicamente falando, essa teoria está correta.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yv39aibqtset0ytdpca0.jpeg)

Lendo o livro Hábitos Atômicos do James Clear, me deparei com o seguinte fato: 

Instintivamente e biologicamente, nossos hábitos são moldados segundo o grupo com o qual nos relacionamos. Inconscientemente, somos influenciados pelos hábitos das pessoas desse grupo. Ou seja, a teoria acima tem base científica.

Há uma passagem interessante no livro que diz: "A gente prefere errar em multidão do que acertar sozinho", isso se deve ao fato de que nossa mente foi instintivamente programada para nos encaixarmos em grupo. 

Antigamente para nossa sobrevivência era muito importante fazermos parte de algum grupo e isso está arraigado em nosso cérebro, é o nosso modo de viver. No livro há outra citação interessante que é: "O lobo solitário morre e a matilha sobrevive". Viver bem em grupo foi fundamental para a nossa sobrevivência.

Seja direta ou indiretamente, somos influenciados pelos hábitos das pessoas que fazem parte desse mesmo grupo. Isso significa que, mesmo que não sejamos conscientes disso, nós estamos sujeitos às influências que essas pessoas têm sobre nós. 

É importante estarmos ciente da influência que outras pessoas têm sobre nós e estarmos disposto a fazer escolhas que reflitam nossos próprios desejos e valores, ao invés de nos deixar levar pelo fluxo do grupo.

Procure se aproximar de pessoas que você admira e que compartilham de valores semelhantes aos seus. Busque interagir com indivíduos que estão sempre em busca de autoaperfeiçoamento e crescimento pessoal contínuo, que mantêm o pensamento alinhado com o seu e que te inspiram a ser uma versão melhor de si mesmo a cada dia. Ao cercar-se de pessoas com mentalidade de crescimento, você passará a enxergar o mundo com outra perspectiva e também sentirá motivado a evoluir continuamente na direção de seus objetivos e sonhos.

Se você andar com quatro milionários, existe uma grande possibilidade de você se tornar o quinto. O oposto também é válido, se você anda apenas com pessoas pessimistas, que reclamam de tudo, você está propenso a começar a ter os mesmos hábitos dessas pessoas.

Refletir sobre as pessoas com quem você interage no trabalho todos os dias é uma boa ideia. Estes colegas e amigos estão apoiando você e sua carreira ou atrapalhando seu progresso?

Se você sentir que certas interações estão arrastando você para baixo ou distraindo você de suas tarefas, tente se distanciar dessas pessoas ou redefinir os limites. Por outro lado, passe mais tempo cultivando relacionamentos positivos com aqueles que o inspiram e apoiam. 

Como diria o Rick Chester: "Águia voa com águia, se você é águia, você não pode voar com pardal”.
Day 700 : Something Sensible
Tags: hiphop, code, coding, lifelongdev
Published: 2023-02-22 22:16:46

_liner notes_:
- Professional : Not a bad day. There was company townhall and got hear some news about what's happening and what's next. Spent the rest of the day working on updating and refactoring this repo that I got a lot done yesterday. Today I was cleaning up the code and updating the ReadMe to reflect any changes I made. I tried to keep the code as consistent with the other repos. It's amazing how much I miss until I see it in the Pull Request. haha Things like using both single and double quotes. I'm terrible. I use whatever I happen to type. haha Small stuff like that. Everything works, but I want to make sure it's consistent through out the code. I think seeing the code not in my code editor with different colors highlights things I may have missed. Yeah, pretty chill day. Got one more ticket for this sprint and like 2 days left. This last one is going to take a lot more refactoring to be like the other repos. We'll see how long it takes.

- Personal : So I went through some tracks for the radio show. Even though I have a lot already set from the work I did in the previous weeks, I still want to keep a good cushion. I just need to get the tracks I'll start the show off with. The others for the polls we hold are good for a few weeks. After that, I went and wrote some code to try and find a workaround my roadblock that I ran into about saving settings without a database. I think I'm pretty close. The plan is to create a file like settings.json and then upload that. The issue I'm running into is that I think I can't create the file on the hosting service I'm using, I think. I need to do more research and playing around with the code. Ended the night watching a couple of episodes of "Spy x Family".

![A valley in Yanacachi, Bolivia with green mountains and some mountain tops covered with clouds under a blue sky with white puffy clouds](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qf9wpxdbnul1p4sy9jm3.jpg)

Basically going to do a rerun of last night. Go through some tracks, work on my side project and watch some anime. There's got to be a way to get this thing to work. I'm probably missing something sensible right in front of my face. 

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube -HFscd1MCRY %}
Media Query Screen Range With Operators - Short And Easy
Tags: css, mediaquery, html
Published: 2023-02-22 22:07:34

In order to write a media query, we use the @media rule, followed by a media type and a set of features that describe the conditions under which the styles will be applied.

The media type can be either screen or print, and the features can include things like screen width, orientation, resolution, and more.


For example, if we wanted to target devices with a screen width between 420px and 720px, we can use the following media query:


```css
@media (min-width: 420px) and (max-width: 720px) {
  /* Styles for devices with a screen width between 420px and 720px */
}
```
Alternatively, we can use comparison operators to achieve the same result

```css
@media (420px <= width <= 720px) {
    /* Styles for devices with a screen width between 420px and 720px */
  }
```
Deploy a ChatGPT API Server in no time
Tags: chatgpt, nextjs
Published: 2023-02-22 14:55:26

---
title: Deploy a ChatGPT API Server in no time
published: true
date: 2023-02-22 14:59:00 UTC
tags: chatgpt, nextjs
canonical_url: https://www.yongliangliu.com/blog/chatgpt-nextjs-server/
---

## Motivation

Need a ChatGPT API server for quick prototyping? Let’s make an endpoint and deploy it with Vercel, for free!

TLDR:

- you get an endpoint that you can POST JSON to
- the endpoint will return JSON with the response from “ChatGPT”
- it’s done via OpenAI’s official text completion API
- using the “text-davinci-003” model
- OpenAI API is not free, but you are given some free credits to try it out
- you will need OPENAI\_API\_KEY

## Pre-requisites

- Get a [OpenAI API key](https://help.openai.com/en/articles/4936850-where-do-i-find-my-secret-api-key)
- Have a GitHub account and a Vercel account that is linked to your GitHub account

## Steps

If the pre-requisites are met, you can simply click on the button below to deploy. It will guide you through the process of cloning the repository and filling in the environment variable.

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Ftlylt%2Fchatgpt-nextjs-server&env=OPENAI_API_KEY&envDescription=This%20is%20the%20API%20Key%20needed%20to%20access%20OpenAI's%20completion%20API&envLink=https%3A%2F%2Fhelp.openai.com%2Fen%2Farticles%2F4936850-where-do-i-find-my-secret-api-key)

* * *

The exact steps are as follows:

1. Clone/fork [my template repository](https://github.com/tlylt/chatgpt-nextjs-server)
2. Go to the [Vercel dashboard](https://vercel.com/dashboard) and click on “Add New…” to import your new repository
3. Enter the environment variable OPENAI\_API\_KEY
4. Deploy the project

**DONE!**

- The deployed API will be available at `https://your-vercel-project-name.vercel.app/api/chat` (or whatever domain that you have configured)

- Send a POST request with a JSON body of `{"message": "Something to ChatGPT"}`

E.g. using curl:

<deckgo-highlight-code language="bash" terminal="carbon">
          <code slot="code">curl -i -X POST \
   -H "Content-Type:application/json" \
   -d \
'{
    "message": "Hello, how are you today?"
}' \
 'https://your-vercel-project-name.vercel.app/api/chat'</code>
        </deckgo-highlight-code>
- The response will be a JSON with the key “response” containing the response from your API server.
<deckgo-highlight-code language="json" terminal="carbon">
          <code slot="code">{
    "response": "I'm doing great! How are you?"
}</code>
        </deckgo-highlight-code>
## Conclusion

That’s it! You’ve now deployed a “ChatGPT” API server with Vercel and OpenAI’s official text completion API in no time. If you want to customize your API, you can modify the [API code](https://github.com/tlylt/chatgpt-nextjs-server/blob/main/pages/api/chat.ts) in the cloned repository.

## References

- [My Template repository](https://github.com/tlylt/chatgpt-nextjs-server)
- [Powered by transitive-bullshit/chatgpt-api](https://github.com/transitive-bullshit/chatgpt-api)