teleren/devto huggingface dataset:
Some Silly Mistakes That You Might Be Making in React in 2024
Tags: react, reactjsdevelopment, jsdevelopmennt, webdev
Published: 2024-01-26 06:29:47


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

If you are a React developer, then at times I’m sure you might be making some silly mistakes. What’s even worse? You don’t even realize that those are actually mistakes.

Well, I got you. This happened to me as well. But if you are someone who’s just starting out in React, make sure you don’t make these mistakes. So, let’s get started.

**1. Not Using Proper Key**

In React, key is used to tell which item in the list is modified. It’s of paramount importance as well. But at times, in a rush developers forget to use the key. This will create problems later on. Make sure you avoid doing this by assigning unique keys to elements while you’re writing the code.

**2. Incorrectly Using State in Functional Components**

Functional components return React elements. We can also use state in functional components. But at times, developers mishandle these states. How to avoid this situation? Use useState. It will manage all the states correctly.

**3. Re-rendering of Functional Components**

One problem with functional components is that it re-renders whenever a state is changed. But at times, some components re-renders more than often. This can hurt your app’s speed as well as performance. You can prevent this by using React.memo or useMemo.

**4. Forgetting Component Structure**

Expert React developers break down their components in small pieces. This makes the codes readable as well as easy to use. But this is what beginner React developers often forget. So, as an expert React developer, beginners take my advice. Always break down your components into smaller pieces.

**5. Asynchronous Operations**

In case you want to fetch data from any API, you have to use async operations. But, at times due to varying reasons, errors do occur. Avoid this problem by using async/await in your code.

**6. Unnecessarily Using State**

In React, state is used as something that can store data and get modified overtime. Keyword: modify overtime. But some developers use state just to store data. Well, this isn’t wrong. But the problem is why are they not using other functions like useRef?

**7. State Doesn’t Update Automatically**

This is more common in beginners React developers than expert ones and that’s of assuming that your state variable automatically updates. Keep in mind that until and unless you render, your state variable won’t update.
Quantum Computing: A Comprehensive Exploration
Published: 2024-01-26 06:15:48

Dive into the fascinating world of **quantum computing** with our latest blog 🌐✨ Explore the fundamental principles, potential applications, and the race for quantum supremacy. 💡🔍 Whether you're a tech enthusiast or just curious about the _future of computing_, this blog is your gateway to understanding the quantum realm. 🚀🔮
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c8i00sxq1wowlxvoj49n.jpg)
Upload image files with Multer
Tags: multer, node, express, fileupload
Published: 2024-01-26 05:56:24

Multer is a [nodejs middleware](https://expressjs.com/en/resources/middleware/multer.html) for uploading files in a nodejs application (Express Multer Middleware, n.d.).
To use multer install the package using ```
npm install multer
```
Once it is installed, import the package using this command ```
const multer = require("multer")
```
Next is configuring the files' storage destination and preferred filenames. A callback function is used to create the filenames for each of the file uploads.
``` 
const storage = multer.diskStorage({
  destination: "./images",
  filename: (req, file, cb) => {
    return cb(
      null,
      `${file.fieldname}_${Date.now()}`
    );
  },
});
```
After configuring the storage location and the filename, add the storage object to a multer instance.
``` 
const upload = multer({ storage: storage });
```
The middleware is then added to the request to process any incoming file from the request body. A post request to the route **"/upload"** will upload a single image file from a multi-part form field named product and save it inside a folder called images.
```
app.post("/upload", upload.single("product"), (req, res) => {
  res.json({
  file_info: req.file,
});
```
To access the file details, we can use the output of the **res.file** object and return it in json format.
```
{
  "file_info": {
    "fieldname": "product",
    "originalname": "img3.jpeg",
    "encoding": "7bit",
    "mimetype": "image/jpeg",
    "destination": "./upload/images",
    "filename": "1706247839665_img3.jpeg",
    "path": "upload/images/1706247839665_img3.jpeg",
    "size": 107421
  }
}
```
This is an easy way to upload files in a nodejs application. With more configurations, you can specify the required file types and so on.
**Credits:**

- GreatStack. (2024, January 2). How to create full stack E-Commerce website using React JS, MongoDB, Express & Node JS 2024 [Video]. YouTube. https://www.youtube.com/watch?v=y99YgaQjgx4

- Express multer middleware. (n.d.). https://expressjs.com/en/resources/middleware/multer.html
How to treat bad English sentence syntax and typo hell?
Published: 2024-01-26 05:53:40

English is a secondary language for me. I have no problem applying proper punctuation. Anyone that is capable of learning a second language sufficiently to be able to read and write in it, has the mental capability to capitalize "I", and to properly add punctuation.

However, there's a massive difference between having a couple of mistakes in one's Q/A, and just throwing all rules out of the window, as shown in the example linked by the OP.

Lacking punctuation is more often than not accompanied by the complete absence of capitalization, txtspk, and other lazy things like that.
"It's a second language" is a poor excuse. If you're capable of writing English words, you're capable of putting some effort into punctuation.

There are a bunch of guides on asking, and users are expected to post clear, grammatically correct questions / answers. Sure, a mistake can happen, but show us you've put some effort into the post.
Unlock Coding Superpowers: Meet Your Code Mates
Published: 2024-01-26 05:51:53

Hey coding buddies! You already know about the coding sensation GitHub Copilot, but did you know there's a league of coding superheroes ready to join the adventure? Each with its unique set of superpowers, these tools are here to make your coding journey even more exciting. Let's take a friendly stroll through these Copilot comrades!

**1. GitHub Copilot: Your AI Coding Buddy**

First up, the rockstar itself – GitHub Copilot! Your AI coding buddy that understands your code and completes lines or blocks like magic. It's the friend who's always there to lend a hand and make coding feel like a collaborative dance. Copilot is the talk of the town, and rightly so!

**2. TabNine: The Autocomplete Jedi**

Enter TabNine, the autocomplete Jedi. It predicts your coding needs and completes lines with a wave of its autocomplete wand. Fast, accurate, and always ready to assist, TabNine is the coding companion you didn't know you needed.

**3. Kite: The Code Whisperer**

Kite, the code whisperer, is here to understand your coding language. With intelligent code completions and instant documentation, Kite ensures you're never lost in the coding wilderness. It's like having a conversation with your code – smooth and effortless.

**4. DeepCode: Your Code Guardian Angel**

DeepCode, your coding guardian angel, watches over your code like a vigilant protector. It analyzes, catches potential bugs, and guides you to writing top-notch, secure code. With DeepCode, you're not just coding; you're coding with peace of mind.

**5. Codota: The Java and Kotlin Sidekick**

Codota, the dynamic duo for Java and Kotlin developers, speaks your language. With intelligent code completions tailored to your style, Codota turns coding into a delightful conversation. It's the language-specific sidekick you've always wanted.

**6. IntelliCode (Visual Studio): The Personal Assistant**

Last but not least, for those who call Visual Studio Code home, meet IntelliCode – your personal assistant. Learning from your patterns and team dynamics, IntelliCode offers personalized and context-aware code suggestions. It's like having a friend who finishes your sentences before you even start.


In the vast universe of coding tools, these Copilot comrades are here to elevate your coding experience. Whether you need autocomplete magic, code whispering, a guardian angel, a language-specific sidekick, or a personal assistant, these tools have your back. Happy coding, and may your coding adventures be filled with joy and success!
Create a navbar with gradient
Tags: css, html, design, learning
Published: 2024-01-26 05:38:01

TL;DR [codepen](https://codepen.io/devcon/pen/xxBPZEm)

I was hanging out at fly.io and noticed this sweet top navigation bar
![fly io](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f9z965rooutn3ey80f2u.png)
so I had to machete through all the tailwind to replicate.

First we pick three colors: lightskyblue rebeccapurple sandybrown

Let's introduce a nav with a height

```html
<nav>
</nav>
```
```css
nav {
  height: 80px;
```

Now let's introduce the gradient from top left to bottom right

```css
nav {
  background: 
    linear-gradient(to bottom right 
      lightskyblue rebeccapurple sandybrown
    );
}
```

![linear gradient with no opacity](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sc2lbryojd26pwa2kfp8.png)

We need to reduce the opacity on lightskyblue and sandybrown so let's get their HSL using shift click like so

![transform](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ns5681urgp3e0hmbnxjx.gif)

With reduced opacity (0.25), our code may look something like

```css
nav {
  background: linear-gradient(
    to bottom right,
    hsla(203, 92%, 75.5%, 0.25),
    rebeccapurple,
    hsla(27.6, 87.1%, 66.7%, 0.25)
  );
}
```

![header without background](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bon8kyx7ozw5pmlyze10.png)

Now let's add a background to the whole thing

```css
nav {
  background-color: rebeccapurple;
}
```

![header with background gradient](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g48od583f9rcvhjv4r5v.png)

I didn't love this so I went ahead and abstracted the rebeccapurple to HSL so I could darken it significantly (lightness in HSL from 40 to 15). It's in a CSS variable because we'll use it twice.

```css
nav {
/* --rebecca-purple: hsl(270, 50%, 40%); */
  --rebecca-purple: hsl(270, 60%, 15%);
```

![darker rebecca-purple](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vs3lzb5oquimexce5opx.png)

Almost there. A good gradient doesn't look like a gradient. So let's bring the lightness of the first and last colors down to 35% for the final result.

![final nav with gradient](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ro9ohdyfoamt1pa6frr2.png)

```css
nav {
  --rebecca-purple: hsl(270, 60%, 15%);
  background-image: linear-gradient(
    to bottom right, 
    hsla(203, 92%, 35.5%, 0.25), 
    var(--rebecca-purple), 
    hsla(27.6, 87.1%, 35.7%, 0.25)
  );
  background-color: var(--rebecca-purple);
}
```
A Sound Solution: Alerting Dev Server Failures
Tags: nextjs, frontend, developer
Published: 2024-01-26 05:27:25

---
title: A Sound Solution: Alerting Dev Server Failures
published: true
description: A simple command that audibly alerts you when your dev server silently fails.
tags: nextjs,frontend,developer
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-11-01 20:09 +0000
---

During my recent work developing a web app with NextJs 13+, I came across a sly problem - **silent (dev) server** *(with ZERO status code)*. Picture this: you're engrossed in code, cranking out new features, but nothing seems to change. After what feels like forever in developer's time (aka two minutes), you realize your dev server had crashed without you noticing.

But don't worry, because I found a way to stay ahead. Say hello to this lifesaving command:

```makefile
xdev:
	@trap 'say "This is outrageous"' ERR \
		; script -q /dev/null pnpm run dev:dashboard | tee /dev/tty \
		| grep --line-buffered -q "JavaScript heap out of memory" && say "Ooops" \
		; stty sane
```

Let's break it down:

- `trap 'say "This is outrageous"' ERR` this part instructs the system to say "This is outrageous" whenever an normal error occurs.
- `script -q /dev/null npm run dev | tee /dev/tty` run dev server with `npm run dev`, pipe the output using `script` command to keep the colors in an stdout
- `grep --line-buffered -q "JavaScript heap out of memory" && say "Ooops"` if the error message *"JavaScript heap out of memory"* appears, it triggers the system to say *"Ooops"*.
- `stty sane` reset the terminal settings if they've became garbled

In essence, this command provides an sound alert when your dev server fails, saving you precious minutes of confusion.

To run it simply type:

```bash
make xdev
```

Change *"grepped"* error message that triggers voice message "Oops" according your dev command or update sound to something funnier 8-)

Although developed for macOS, it should be easily transferable to Linux with one or two tweaks.

With this command, silent dev server failures will be a thing of the past. You can focus on conquering NextJs or any other framework, knowing an audible alert has got your back.

Have you encountered similar baffling situations in your development journey? What were your unique solutions?
Day 8: Fortifying Azure Governance - Empowering with Azure Policy and RBAC in #100DaysOfCloud
Tags: 100daysofcloud, azure, adcstreak, cloud
Published: 2024-01-26 05:21:15

Yesterday's journey in the #100DaysOfCloud took us into the realm of Azure governance, where we explored the powerful tools of Azure Policy and Role-Based Access Control (RBAC). Let's delve into how these pillars fortify our cloud infrastructure and empower efficient resource management. 

### Understanding Azure Policy: 
Azure Policy acts as the guardian of our Azure environment, enforcing compliance and governance by defining rules and applying them across resources. With Azure Policy, we can ensure that our cloud deployments align with organizational standards, regulatory requirements, and security best practices.

### RBAC and Policy:  
RBAC and Azure Policy complement each other seamlessly. While RBAC governs who can access Azure resources and what actions they can perform, Azure Policy ensures that the actions adhere to predefined rules and compliance standards. Together, they form a robust framework for maintaining control and security within Azure.

### Benefits of Azure Policy: 
The benefits of Azure Policy are manifold. By enforcing compliance and security controls, Azure Policy minimizes risks associated with misconfigurations and ensures consistent adherence to organizational standards. It promotes accountability and transparency, fostering a culture of governance within the cloud environment.

### Implementing Azure Policy: 
Implementing Azure Policy involves defining policy definitions, assigning them to specific scopes such as management groups, subscriptions, or resource groups, and monitoring compliance through built-in reports and dashboards. This structured approach empowers organizations to proactively manage and mitigate risks.

### Use Cases: From Security to Cost Management: 
The versatility of Azure Policy shines through various use cases. From enforcing encryption on storage accounts to restricting VM SKUs for cost optimization, Azure Policy addresses a wide array of requirements across security, compliance, and resource management domains.

### Empowering Cloud Governance: 
Azure Policy and RBAC lay the foundation for robust cloud governance practices. By establishing guardrails and controls, organizations can confidently embrace the cloud while maintaining security, compliance, and cost efficiency. It empowers teams to innovate and deploy with agility, knowing that governance is inherently integrated into their cloud environment.

Thanks @azdevindia and @beingwizard for the enlightening session and resources.

### Resources:
- https://michaeldurkan.com/2021/11/16/100daysofcloud-day8-azureresourcelocksazurepolicy/
Chat GPT Español Gratis: Transformando la Conversación Digital
Tags: webdev, chatgpt, chat, gpt
Published: 2024-01-26 04:27:33

Mirando hacia el Futuro del Chat GPT Español Gratis
Desarrollo de Asistentes Virtuales más Sofisticados
Con el tiempo, el Chat GPT podría contribuir al desarrollo de asistentes virtuales más sofisticados en español. Estos asistentes podrían transformar la forma en que accedemos y gestionamos información, proporcionando respuestas personalizadas y útiles. Experimenta el sitio web ChatGPT en Español: [Chat GPT Español](https://chatgptx.es/)

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

Innovación en Educación y Servicios
En el ámbito educativo y de servicios, el Chat GPT Español Gratis podría jugar un papel clave al proporcionar recursos educativos personalizados, responder preguntas específicas y ofrecer apoyo constante.

Conclusión: Un Nuevo Horizonte en la Conversación Digital en Español
El Chat GPT Español Gratis representa un hito en la interacción digital en español. Al proporcionar un recurso de conversación accesible y avanzado, no solo democratiza la inteligencia artificial, sino que también esboza un futuro emocionante donde la comunicación en línea es más inclusiva y enriquecedora para todos los hispanohablantes. Este fenómeno tecnológico no solo es una herramienta; es un paso hacia un horizonte digital más comprensivo y conectado para la comunidad de habla hispana.
Happy to announce I'm a trusted member
Tags: dev, javascript
Published: 2024-01-26 04:23:14

---
title: Happy to announce I'm a trusted member
published: true
description: it's been long time I joined dev community
tags: dev, js
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2024-01-26 04:21 +0000
---
Services - Kubernetes
Tags: k8sfull, services, kubernetes, ibbus
Published: 2024-01-26 04:22:59

In Kubernetes, a Service is a method for exposing a network application that is running as one or more Pods in your cluster.

3 types of service in k8's

1. Cluster IP
Only can access the pod via service if you have access to the cluster (from inside the cluster)

2. Node Port
Can access the service on each node.

3. Load balancer
Public users can access the pod from anywhere.
Load-Balancer🤖
Tags: systemdesign, loadbalancer, interview, ssd
Published: 2024-01-26 04:20:00

Not for me 🫤 ?
This is my exact feeling when I first heard of it. At the time I mostly worked on front-end and It definitely looked like some magic only the intelligent can deal with.

Is it really complicated 🤨
Naahh... You just need some full-stack/web-dev experience to understand different things that go behind the scenes to make an app/website work.

Load Balancer is one of it.

## Long **Story** Short
You opened a restaurant which basically has 10 tables, each table has a capacity of 4 chairs. When a customer visits the restaurant, there should be someone to guide them to a table. A manager well-dressed will take this job and perform it well.

![Load Balancer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ew1x8a9qpad91s80tjl.gif)

This is very basic idea of Load Balancer. In the request-response cycle, the requests will go to the load-balancer aka the manager who will guide them to different servers.

If the server (S1) is full, with the incoming requests, the load-balancer will see this and send the next request to server (S2).

![Request Response Cycle with Load Balancer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/czi9rabp5w53yvvx9080.png)

PS: This post is a part of **SillySystemDesign** in which each post gives very silly way to understand a complicated concept🫡
プロンプトエンジニアリングを始める方法
Tags: ai
Published: 2024-01-26 04:06:03

人工知能（AI）の絶えず進化する風景の中で、prompt engineeringは人間の意図と機械の理解をつなぐ重要な架け橋として浮かび上がります。この包括的なガイドは、prompt engineeringの深みを探り、AIコミュニケーションの未来を形作る上でのその中心的な役割を明らかにします。

1.Prompt Engineeringの理解

1.1. プロンプトエンジニアリングとは何ですか？
Prompt engineeringは、細心のプロンプトを通じてAIモデルを導く言語インターフェースとして機能します。これらのプロンプトはガイドラインとして機能し、人間のクエリや指示に対するAIの特定の出力を生成するために導きます。


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p2f8i69p548db0iqa1sk.jpg)
プロンプトエンジニアリングとは何ですか？
1.2. Prompt Engineeringの技術的側面
Prompt engineeringを支える技術的な複雑さに深入りします。プロンプトの効果を形作るAIモデルのアーキテクチャ、トークン化、モデルパラメータ、およびサンプリングテクニックを理解します。

2.効果的なプロンプトの構築：芸術と科学

2.1. プロンプトの微妙なニュアンス
プロンプト作成に固有の微妙なニュアンスを解き明かします。各単語や構造的な側面は非常に大きな影響を持ち、AIモデルの応答に影響を与えます。これらのニュアンスを駆使して望む出力を引き出す方法を学びます。

2.2.プロンプトの主要要素
明確な指示、文脈の手がかり、入力データ、AIモデルを特定の応答に導く指標を含むプロンプトの作成の技法をマスターします。

3.プロンプトエンジニアリングの仕組み
3.1. 適切なプロンプトの作成
明確で曖昧でないプロンプトを作成するための基本を習得します。役割演技や制約設定などの高度な手法を使用して、AIモデルを特定の成果に導きます。

3.2. 反復と評価
反復的な改善プロセスを理解します。AIモデルの出力に基づいてプロンプトをテストし、評価し、適応させ、所望の意図と整合することを確保します。

4プロンプトエンジニアの役割

4.1. AI分野の新たなキャリアパス
promptエンジニアの進化する役割を発見します—AI機械の不可欠な部分。これらの専門家は、人間のコミュニケーションの微妙なニュアンスとAIの理解をつなぎ、効果的な対話を確保します。

4.2. Promptエンジニアリングに必要なスキル
Promptエンジニアに必要なスキルセットに突入します。NLPの技術的な能力やモデルの理解から、コミュニケーションや批判的思考などのソフトスキルまで、これらの側面が成功するpromptエンジニアの基盤となります。

5.プロンプトエンジニアリングの未来

5.1. 継続的な研究と開発
プロンプトエンジニアリングの最新の進歩を追いかけます。適応型のプロンプト、多元的なインタラクション、AIコミュニケーションの領域を再構築する倫理的考慮などを探索します。

5.2. 挑戦と機会
挑戦を革新の礎として受け入れます。協力と革新がプロンプトエンジニアリングを通じてより微妙で効果的なAIインタラクションへの道を開きます。

6.最終的な考察
プロンプトエンジニアリングは単なるAIコミュニケーションの向上を超えています。それは、AIが私たちの生活にシームレスに統合され、経験を増幅し、人間の能力を増強する未来を予言しています。

プロンプトエンジニアリングへの旅に乗り出しましょう。AIのこの興味深い側面に没頭するための包括的なコースやリソースを見つけましょう。人工知能のダイナミックな世界での成長と革新の扉を開けます。
[次の記事でこの概念について詳しく読む: [プロンプトエンジニアリングとは何か？詳細な定義、利点、具体的な例を説明する](https://miichisoft.com/prompt-engineering-definitions-benefits-examples/)]
Laravel send OTP using Vue js (beta) and whatsapp
Tags: laravel, vue, whatsapp
Published: 2024-01-26 03:32:28

---
title: Laravel send OTP using Vue js (beta) and whatsapp
published: true
description: kirim notif whatsapp OTP laravel vue js, masih ada problem di session
tags: laravel, vue, whatsapp
cover_image: https://images.pexels.com/photos/1268869/pexels-photo-1268869.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1
# Use a ratio of 100:42 for best results.
# published_at: 2024-01-26 03:13 +0000
---

Penggunaan Laravel dan Vue js untuk fungsi send OTP pada saat akses panel auth.

masih terkendala session yang kurang stabil. paling tidak ku simpan dulu lah.

{% gist https://gist.github.com/rimbaborne/2f5b9c9e4dc0e2cf2c44d509181b8ec9 %}


dan component vue js -nya ini jujur aja masih ga terlalu paham. yang penting jalan lah

{% gist https://gist.github.com/rimbaborne/f168941302c2cf4cfba97a9360f7c3d2 %}

nah, kalo ini dimodif dikit pake redis
{% gist https://gist.github.com/rimbaborne/6f6186656d9d95228ad83eea75f70deb %}