teleren/devto huggingface dataset:
Adding generative AI to your Cloud Flows with AI Prompts
Tags: ai, powerautomate, gpt3, powerplatform
Published: 2024-04-03 16:30:24

AI innovation in the Power Platform keeps getting better and better! Now an AI prompt can be added as an action within a Power Automate flow making it possible to generate text from inside an automated process.

In this video, @gomomohapi shows how you can add these Generative AI capabilities to your flows. Showing you how to configure the flow with the AI Prompt, how to retrieve user information and how to add an approval step for human review of the AI generated content.

Watch here:
{% embed https://youtu.be/-4QqfrnGgm4?si=WPAMR_1cZVJmmamK %}

If you want to learn more:
Use your prompt in Power Automate: https://aka.ms/PowerAutomate/CustomPromptsInFlow
Human review for automation with a prompt: https://aka.ms/PowerAutomate/AIHumanReview
การคาดคะเนการเผาผลาญแคลอรี่ซึ่งเปรียบเทียบโดยใช้อุณหภูมิร่างกาย โดยการใช้ Machine Learning Linear Regression ใน Python
Tags: python, linearregression, ai, machinelearning
Published: 2024-04-03 16:30:23

ในการเราสามารถคาดคะเนการเผาผลาญในร่างกายของมนุษย์เป็นไปได้ด้วยในหลายวิธี แต่ในที่เรานำมานี้ จะเป็นการใช้ Machine Learning หรือ การใช้ Linear Regression ซึ่งในการคาดคะเนนั้นมีวิธีอีกมากมายที่วสามารถใช้แทนได้

Linear Regression หรือ การถดถอยเชิงเส้น คืออัลกอริทึมสำหรับการทำนายประเภทหนึ่ง โดยจะทำการเปรี่ยบเทียบกันระหว่างสองตัวแปร

โดยในบทความนี้เราจะมาดูวิธีการที่เราจะนำ Linear Regression มาดูการเผาผลาญ แคลอรี่ได้ยังไง

## ขั้นตอนการทำ
<u>~~ขั้นตอนที่ 1 ทำการ import library ที่ต้องใช้ในการทำ ~~</u>


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


<u>~~ขั้นตอนที่ 2 ทำการ เตรียมตัวข้อมูล ~~</u>

ตัวข้อมูลจะอยู่ใน folder caloriesData วิธีเรียกใช้คือทำการ ชื่อfolder ตามด้วย / ชื่อfile.สกุลไฟล์ เช่น calories.csv

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


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


ตัวข้อมูลที่นำมาใช้-->[Data Here](https://www.kaggle.com/code/ihsanzami/predicting-calorie-burn-with-ml-rf-xgb-gb/input)

<u>~~ขั้นตอนที่ 3 ทดลองหาแนวโน้มระหว่างอุณหภูมิร่างกายและCalories พร้อมค่าcorrelation ~~</u>




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

<u>~~ขั้นตอนที่ 4 สร้าง Linear Regression model ~~</u>

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


จะได้ค่า Intercept และ Coefficient

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

<u>~~ขั้นตอนที่ 5 ประเมิณและปรับปรุง ~~</u>

โดยอย่างแรกเราต้องหาค่า error ออกมาก่อนจากสมการตอนแรก

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y2l61vt9aquo3yd5kkfx.png)
โดยจะได้ค่า Errorประมาณนี้

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

ทีนี้ปรับปรุงสมการใหม่ ซึ่งปรับ regression model = 0 โดย ปรับ fit_intercept=False

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b1pcma5yjgeta0v3j7ji.png)
จะได้ค่าดังนี้

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/227mgc4bhwduupel00e9.png)
 และทำการหาค่าerror

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zvnnipl7k7qcfntd2yxx.png)
จะได้ค่า error ดังนี้

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

## สรุปผล
จากการดูแนวโน้มของกราฟ ที่สร้างจากตารางข้อมูลทำให้รู้ว่าเมื่อ อุณหภูมิร่างกายยิ่งเยอะขึ้นจะทำให้การเผาผลาญ แคลอรี่มากขึ้นเท่านั้น และในสิ่งที่ได้ต่อมาคือ เมื่อเราต้องการทำนาย การเผาผลาญแคลอรี่โดยใช้อุณหภูมิ มีสมการดังนี้ Calories = -2555.7467877671534 + (66.09010269*body_temp)

## อ้างอิง

1. (https://www.geeksforgeeks.org/calories-burnt-prediction-using-machine-learning/)
2. (https://www.kaggle.com/code/ihsanzami/predicting-calorie-burn-with-ml-rf-xgb-gb/input)
Git Shortcuts That Boost Productivity
Tags: git, github, dev, tutorial
Published: 2024-04-03 16:26:26

As developers, we spend a significant amount of time interacting with Git—the ubiquitous version control system that powers our code repositories. Whether you’re a seasoned pro or just starting your coding journey, mastering Git shortcuts can significantly enhance your productivity. In this article, we’ll explore some essential Git shortcuts and their associated snippets to streamline your workflow.

##1. Alias Creation
Aliases allow you to create custom shortcuts for frequently used Git commands. By defining aliases in your `.gitconfig` file, you can save keystrokes and make your Git experience more efficient. Here are some useful aliases:

`[alias]
al = add
cm = commit -m
ph = push
pl = pull
st = status`

With these aliases, you can now use `git al` instead of `git add`, `git cm` instead of `git commit -m`, and so on. Feel free to customize these aliases to match your preferred workflow.

##2. Undoing a Commit Mistake:
Accidentally committed something? No worries! Run `git reflog` to see a list of recent actions. Identify the commit hash you want to revert to (usually the one before your mistake). Then: `git reset --hard <commit-hash>` This command will reset your branch to the specified commit, discarding any changes made after it.

##3. Recovering Lost Commits:
Ever lost a commit due to a force push or accidental branch deletion? `git reflog` to the rescue! Find the lost commit in the reflog and: `git cherry-pick <commit-hash>`
This cherry-picks the lost commit back into your branch.



##Conclusion
Incorporating Git shortcuts into your daily workflow is like having a secret weapon. By saving time, reducing typing errors, and improving efficiency, you’ll become a Git ninja. Experiment with these shortcuts, create your own, and watch your productivity soar. Happy coding! 🚀
Having trouble with react component hooks...
Tags: react, beginners, useeffect, usestate
Published: 2024-04-03 16:09:19


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


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

Ok so, im trying to pass a function ( eseentialy they are jsx components, listmap or listasc) as  a prop to my component there, so that the fetch function either just displays the data or first sort the data and then display them on screen. 

The handlechange is being triggered from an Onchange event in a selector 

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

So when i get into the site, in the console it logs the normal obj array and the sorted one, the first time i change the selector to ascending it displays the ascending order, and nothing works past that, its like the component doesnt rerender. Any help please?
IP Addresses Explained Like You're Five! 🌐🏠
Tags: explainlikeimfive, webdev, beginners, news
Published: 2024-04-03 16:03:00

Imagine you're sending a letter to your friend.

To make sure it gets to the right place, you write their address on the envelope. 

Now, think of the internet as a giant postal system. 

When you want to visit a website or send a message online, your device needs to know where to send that request. 

That's where IP addresses come in. 

![Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zxllfuhicx5hencigkaw.png)
<figcaption>https://www.avast.com/c-what-is-an-ip-address</figcaption>

An IP address is like a unique address for every device connected to the internet. 

It helps data find its way from your computer, phone, or tablet to the right destination, whether it's a website, a server, or another device. 

Just like how each house has its address, each device has its IP address. 

It's a way for everything on the internet to find its way around, kind of like a digital GPS!

I hope I was able to explain the topic to you in the simplest of the language.

***

## 🙌 Final Thoughts

Resources to learn more:

- https://www.fortinet.com/resources/cyberglossary/what-is-ip-address
- https://en.wikipedia.org/wiki/IP_address
- https://www.kaspersky.com/resource-center/definitions/what-is-an-ip-address
- https://www.geeksforgeeks.org/what-is-an-ip-address/

Comment your thoughts about this analogy and if you really understood by this!

Okay, that's it for today!

Connect with me @ [Linktree](https://linktr.ee/arjuncodess/).

Follow me on @ [Twitter](https://twitter.com/arjuncodess/).
Quality content coming soon!

Happy Coding! 🚀
Thanks for 26276! 🤗
Enhance Your React Application with Image Editing using react-profile
Published: 2024-04-03 16:02:46

Introduction:

In today’s digital landscape, visual content plays a crucial role in engaging users and conveying messages effectively. For React developers, integrating image editing capabilities directly into their applications can significantly enhance user experience. One such tool that simplifies image manipulation within React applications is the react-profile npm package.

What is react-profile?

react-profile is a powerful npm package designed specifically for React applications, enabling developers to incorporate image editing functionalities seamlessly. With react-profile, you can effortlessly crop, filter, rotate, and perform various other transformations on images, all within your React components.

Key Features of react-profile:

Crop Images: Easily crop images to focus on specific areas or dimensions, ensuring optimal visual presentation.
Apply Filters: Enhance the aesthetics of your images by applying a wide range of filters, adding artistic flair to your content.
Rotate Images: Adjust the orientation of images to achieve the desired alignment or perspective.
Simple Integration: Integrate image editing functionalities into your React components with minimal setup and configuration.

**> npm install react-profile**

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

Conclusion:

Incorporating image editing capabilities directly into your React applications has never been easier, thanks to the react-profile npm package. By empowering developers to manipulate images effortlessly, react-profile enhances the visual appeal and functionality of React-based projects, ultimately enriching the user experience.

Start leveraging the power of react-profile today to elevate your React applications to new heights of creativity and interactivity!

**> Follow Me**
[Medium](https://medium.com/@muhammadali01):
[Github](https://github.com/MuhammadAliashraf):
Software Development Course
Published: 2024-04-03 15:57:08

Hey everyone!

I'm thrilled to share that I've just embarked on a new journey in my career: I've started a brand new software development course! 🖥️💡

For me, diving into the world of software development has always been more than just writing lines of code. It's about crafting solutions, solving problems, and creating something meaningful from scratch. With this new course, I'm eager to deepen my understanding of programming languages, refine my problem-solving skills, and explore the latest technologies shaping the industry.

What drew me to this particular course is its comprehensive curriculum, covering everything from fundamental concepts to advanced topics in software engineering. I'm particularly excited about delving into areas like web development, mobile app development, and cloud computing. The opportunity to learn from industry experts and engage in hands-on projects is something I'm truly looking forward to.

But more than just acquiring technical skills, I see this course as a pathway to personal and professional growth. It's about pushing myself beyond my comfort zone, embracing challenges, and continuously evolving as a developer. I'm eager to collaborate with fellow learners, exchange ideas, and support each other throughout this journey.

Of course, embarking on a new course comes with its own set of challenges, but I'm ready to tackle them head-on. Whether it's debugging code, grappling with complex algorithms, or simply managing my time effectively, I'm committed to giving it my all and making the most of this opportunity.

I'll be sharing updates and insights from my learning journey along the way, so stay tuned for more! And if you're also passionate about software development or considering diving into the world of coding yourself, I'd love to connect and exchange experiences.

Here's to new beginnings, endless possibilities, and the exciting adventures that lie ahead! 🚀💻 #SoftwareDevelopment #NewCourse #LearningJourney
Exploring Game Design
Tags: gamedev, unity3d, csharp, design
Published: 2024-04-03 15:50:59

# Introduction
This Post will show overview of Game Design I have learned in post graduate university. 
This research is going to be the base of our game.

Table of contents

- Overview of Game Design Document & Tools
- Single-player and Multi-player Level Design
- Counter Play
- Game Economies
- Balancing Multiplayer Games
- Asymmetric Design
- Matchmaking and Ranking System
- Conclusion

## Overview of Game Design Tools

There are two powerful game development engines, which are **Unity** and **Unreal Engine**. They have their own pros and cons. This chapter will introduce them briefly. 

### Unity 

#### Assets 
There are over 50,000 3D game assets alone (03/04/2024).
You can use some of them for free. 

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

> https://assetstore.unity.com/

#### Language
C# is used for scripting. It is easy for new programmers to learn. 

#### Easy to use
You can use Unity easily for indie game developers or small teams.

### Unreal 
It is ofter used 

## Single-player and Multiplayer Level Design

## Counter Play

## Game Economies

## Balancing Multiplayer Games

## Asymmetric Design

## Matchmaking and Ranking System

## Conclusion
Is "webmaster" still a thing?
Tags: discuss, webdesign, webdev, webmaster
Published: 2024-04-03 15:47:55

---
title: Is "webmaster" still a thing?
published: true
description: How has the complexity of the internet siloed skills?
tags: #discuss #webdesign #webdevelopment #webmaster
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2024-04-03 15:37 +0000
---

The term "webmaster" popped back into my head a few days ago, and I've been thinking about it ever since.

It seems like that's not really a thing anymore.

The web has become so complex that skills have been siloed.

Webmasters used to design, build, and manage websites on their own. Sometimes they hosted the site, too.

But websites have mostly become too complex for that.

I don't even see the term "web designer" used much anymore.

A web designer now has 3 parts:
1. UI designer
2. UX designer (often the same person as the UI)
3. Front end developer (rarely designing anymore)

This has just been what I've seen and felt lately. 

What are your thoughts?

[Update]: I just found this post, coincidentally posted today
https://zeldman.com/2024/04/03/the-more-things-change-or-whats-in-a-job-title/
Inapp Messaging Intgr.- Native for react, ngx, flutter, vue, Next,js, iOS
Tags: react, tutorial, programming, watercooler
Published: 2024-04-03 15:39:27


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

### With our [in-app notification center](https://www.suprsend.com/products/app-inbox):

- **Adaptable UI:** Create a native in-app inbox interface with customizable pre-built components or headless API.
- **Secure Auth:** Robust HMAC security & authentication.
- **Real-time updates:** Lightning-fast web sockets delivering immediate alerts.
- **State mgmt.:** Streamlined handling for read/unread/archived notifications.
- **Filtering:** Neatly arranged tabs and filters, ensuring swift info access.
- **Observability:** Complete control over tracking & debugging with logs.
- **Smart batching:** Consolidated multi-alert notifications made easy.
- **Cross-platform routing:** Multiple delivery channels (email, Slack, SMS, WhatsApp) based on end-user preference.

And there's much more.

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

### Platforms Supported
- React
- React Native
- Angular
- Flutter
- iOS
- web
- Vue.js
- Next.js

### Github
- https://github.com/suprsend/suprsend-web-inbox
- https://github.com/suprsend/suprsend-react-inbox

Play with [sandbox](https://inbox-playground.suprsend.com/) 

![Image description](https://assets-global.website-files.com/62a87a4ff7326e1bc863e8f3/66081f7e93f891e48121e238_Views-lottie-final-transcode.mp4)

---

btw, we have launched app inbox on Product Hunt, consider giving us your support there: [Product Hunt Link](https://www.producthunt.com/posts/in-app-notification-center-by-suprsend)
𝐂𝐡𝐨𝐨𝐬𝐢𝐧𝐠 𝐑𝐢𝐠𝐡𝐭 𝐏𝐞𝐫𝐟𝐨𝐫𝐦𝐚𝐧𝐜𝐞 𝐌𝐞𝐭𝐫𝐢𝐜 𝐟𝐨𝐫 𝐂𝐥𝐚𝐬𝐬𝐢𝐟𝐢𝐜𝐚𝐭𝐢𝐨𝐧! 🚀
Tags: precision, recall, f1score, accuracy
Published: 2024-04-03 15:29:54

Feeling bewildered about which metrics to employ for evaluating your binary classification model? Let's navigate through and ascertain the optimal way to assess the classification model.



![confusion matrix](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qqeikrd8sutvacez20kx.jpeg)

🎯 𝐀𝐜𝐜𝐮𝐫𝐚𝐜𝐲:
→ Indicates the proportion of correctly classified instances among all instances.
→ Inadequate for imbalanced datasets as it might be deceptive.

💡 𝐏𝐫𝐞𝐜𝐢𝐬𝐢𝐨𝐧:
→ Quantifies the proportion of true positives among all positive predictions.
→ High Precision is crucial in scenarios where false positives are undesirable.
→ It aids in addressing the query: "Among all the instances predicted as positive, how many are truly positive?"

📊 𝐑𝐞𝐜𝐚𝐥𝐥:
→ Computes the proportion of true positives among all actual positives.
→ Also referred to as sensitivity or true positive rate.
→ High Recall is crucial in scenarios where false negatives are undesirable.
→ It aids in answering the question: "Of all the actual positive instances, how many did we accurately identify?"

📐 𝐅1 𝐒𝐜𝐨𝐫𝐞:
→ Represents the harmonic mean of precision and recall.
→ Incorporates both precision and recall, yielding a unified metric that balances the two.

🔍 𝐋𝐞𝐭'𝐬 𝐝𝐢𝐬𝐜𝐮𝐬𝐬:
→ Which evaluation metric do you primarily utilize in your domain?
→ Are there any additional metrics you employ aside from the ones discussed?

P.S. - Seeking professional advice to elevate your Data Science career? Feel free to drop me a DM with specific inquiries.
Convenções de Nomes em C#: Como Nomear Variáveis, Métodos e Classes
Tags: csharp, dotnet, namingconversion, naming
Published: 2024-04-03 15:22:40

Olá devs, vamos falar de um assunto um pouco polêmico, porque sempre aparece alguém para ~~cagar regra~~ dizer que devemos escrever o código de maneira X ou Y, e nem sempre isso estar de acordo com a conversão de nomes da linguagem que trabalhamos, então resolvi criar esse mini artigo para ~~cagar regra~~ ajudar vocês a nomear suas coisas em C# usando o guia oficial da comunidade escrito pela Microsoft.

Quando escrevemos código é importante seguir algumas convenções de nomenclatura para tornar nosso código mais legível e consistente. então, entenda que essas convenções ajudam a entender o propósito das variáveis, classes e outros elementos do código. Vamos dar uma olhada nelas e entender de uma vez por todas.

## A PascalCase

Dentro do C#, usamos a `PascalCase` para quase tudo, seja nomes de tipos, métodos públicos e propriedades, nomes de arquivos. Isso significa que a primeira letra de cada palavra é maiúscula, e as demais são minúsculas. 
Por exemplo:
- `MinhaClasse`
- `CalcularSalario`
- `NomeCompleto`

Os nomes de namespaces devem seguir a mesma convenção `PascalCase`. Por exemplo:
- `MeuProjeto.Utilitarios`
- `MeuProjeto.Modelos`

## A camelCase

Também usamos a `camelCase` Para variáveis locais, parâmetros de método e campos privados. A primeira letra é minúscula, e as demais palavras começam com letra maiúscula.
Exemplos:
- `idade`
- `nomeCompleto`
- `quantidadeItens`

## Agora o mais Difícil (não deveria ser)

Sempre crie nomes autoexplicativos, escolha nomes que sejam descritivos e faça sentido para o que você está fazendo. Por exemplo, em vez de usar a ou `x` como nome de variável, prefira algo como `idadeDoUsuario` ou `totalDeItens`, dessa forma você ajuda seu amiguinho que trabalha com você e ~~não querer te matar~~ ajudar a equipe a crescer.

Evite usar caracteres especiais como `$`, `@`, `#` nos nomes de identificadores. Como também abreviações que possam confundir outros desenvolvedores. Por exemplo, em vez de `btn`, use `botao` para um botão na interface.

## De onde você tirou isso? do C#?

Todas essas conversões foram tiradas da [documentação oficial da Microsoft sobre convenções de codificação em C#](https://learn.microsoft.com/pt-br/dotnet/csharp/fundamentals/coding-style/coding-conventions).
Porém, é importante salientar que essas convenções não são impostas pelo compilador, mas são amplamente adotadas pela comunidade. Então, segui-las tornará seu código mais fácil de ler e entender, especialmente quando você compartilha seu código com outros desenvolvedores.


Espero que vocês tenham gostado, se quiser deixar alguma dica e sugestão, correção, deixa aí em baixo nos comentários, Até a próxima!
How Dynamically Compiling Vue Template Strings in Quasar Electron Build
Published: 2024-04-03 14:32:28

I'm developing a Quasar v2 application with Electron where I dynamically load Vue components via template strings. My approach involves using a <component :is="dynamicComponent"></component> pattern to render components received from an IPC event in Electron. However, I'm encountering a runtime warning: [Vue warn]: Component provided template option but runtime compilation is not supported in this build of Vue. Configure your bundler to alias "vue" to "vue/dist/vue.esm-bundler.js". This suggests my Vue build doesn't support runtime template compilation. How can I configure my Quasar Electron project to support dynamic component compilation? Here's a snippet of my code for context:

vue
Copy code
<template>
    <view class="col colunm q-px-sm">
        <component :is="dynamicComponent"></component>
    </view>
</template>

<script setup lang="ts">
import { markRaw, onMounted, ref, Ref } from 'vue';
import type { Component } from 'vue';

const dynamicComponent: Ref<Component | null> = ref(null);

onMounted(() => {
  window.ipcRenderer.on('register-component', (event, PluginComponent) => {
    dynamicComponent.value = markRaw(PluginComponent as Component);
  });
});
</script>