teleren/devto huggingface dataset:
Cool library that I recently discovered: Zag.js
Tags: react, vue, solidjs, webdev
Published: 2023-03-05 15:31:04

Today, I want to share with you a cool library that I recently discovered: Zag.js! 🎉


🌟 Zag.js is framework-agnostic, which means you can use it with popular frameworks like React, Solid, and Vue, and more without sweating over the logic. With Zag.js, you can focus on creating visually stunning UI components and let the toolkit handle the rest.

💻 This library is perfect for those who need to build custom UI components while minimizing the time spent reinventing the wheel by writing state logic from scratch.

📚 Whether you're building menus, accordions, dialogs, or any other UI component, Zag.js provides a wealth of pre-built state machines to choose from. You can find a complete list of available state machines in their documentation.

👨‍💻I highly recommend giving Zag.js a try. It's an excellent choice for building custom UI components in your web applications while ensuring accessibility, and it works with many frameworks!

🔗 Head over to [https://zagjs.com/](https://zagjs.com/) to learn more about Zag.js and get started with building accessible UI components in your web applications!
Un proyecto en AWS
Tags: aws, datascience, datapathformation, dataanalyst
Published: 2023-03-05 15:30:47

Queremos acelerar el talento en data y analytics en LATAM. Si te gusta el artículo recuerda que todos los meses tenemos inicios de nuestros programas especializados de Data Engineering, Data Analyst, Cloud y Machine Learning Engineer. Puedes conocer más [aquí](https://wa.me/51946561058?text=Hola,%20vengo%20de%20la%20comunidad%20Dev.to,%20quiero%20conocer%20los%20pr%C3%B3ximos%20inicios).

AWS (Amazon Web Services) es uno de los principales proveedores de servicios en la nube. Usado por grandes empresas como LG Electronics, Mercado Libre, Beat, McDonald’s, entre otras. Por ello, me parece importante compartir un resumen del proceso de creación de un proyecto en AWS.
En primer lugar, se deben elegir y configurar los servicios que sean necesarios para el proyecto que vayamos a desarrollar como Amazon S3 (almacenamiento de datos), Amazon EC2 (instancias de servidor), Amazon RDS (bases de datos), entre otros servicios.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ul7mal0laomei2jesdns.jpg)
Seguidamente, se deben configurar las reglas de seguridad y accesos a los recursos o servicios del proyecto. Para esto, AWS Identity and Access Management (IAM) es el servicio web que lo ayudará a gestionar de manera segura quien puede acceder a los servicios.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nyvrdi6st0rpdmp3bbrx.png)
Cuando se cree una cuenta automáticamente se tendrá creado un usuario raíz el cual tiene el poder de controlar los accesos a los servicios y/o recursos. Dentro de esta misma cuenta también es posible crear otros usuarios, estos serán los usuarios IAM, a los cuales se le asociará una política que les dará acceso solo a ciertos servicios establecidos por el usuario raíz.
También es posible el caso en que un servicio necesite hacer uso de otro servicio. En este caso, para realizar una asociación entre servicios se utilizarán los roles. Por ejemplo, se crea un rol asociado al recurso ED2 que pueda acceder al servicio de almacenamiento de S3.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/214qw995uv1qx5wpuydw.png)
En resumen, las políticas se usan para que los usuarios puedan acceder a los servicios y los roles para que los servicios accedan a otros servicios.

_Cesar Piero Salvador
Coordinador Académico Datapath_

**Conoce nuestros programas**

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

✔Descubre cómo acelerar tu talento en Data, Analytics y Cloud: 
 - Tenemos inicios todo los meses, conoce más [aquí](https://datapath.ai).
Notes on Data Science Fundamentals
Tags: datascience, machinelearning, ai, python
Published: 2023-03-05 15:25:42

 **Why Data Science?**
Huge amount of data is produced everyday from virtual platforms, industrial zones, corporate offices, Scientific experiments etc. All of these data needs to be managed, organized, analyzed properly to be used for making better strategies for our businesses, organizations, research work etc. Data is a core part of the development as well as the revolution of 21st century. So we need a whole field where we will work,understand, discover with data and from data. This field of work and study is know as Data Science.

**What is Data Science?**
The science of getting insights from data(usually huge amount of data) by collecting, organizing summarizing, and visualizing them for better decision making is called Data Science.

**Some Tools we use for Data Science :-**

▪️Databases (MySQL, MongoDB etc.) : Used for storing data in a structured way.
▪️Spreadsheet softwares (MS Excel, Google Drive Spreadsheet etc.) : Used to prepare Data for analysis.
▪️ Data analysis tools (Python, R, MATLAB etc.) : Used for structure, analyze, visualize data.
▪️ Programming libraries and modules (Matplotlib, seaborn, plotly, Numpy,Pandas etc.) : Used for performing different operations on the Data.
▪️ Apache Spark : Used for big data loads.
▪️ Virtual Environments ( Jupyter Notebook, VSCode etc.) : Used to perform the operations on data using programming languages.

(There are many more tools which are widely used in the field of Data Science)

**Data Science methodology( steps we follow for Data Science) :-**
▪️Business Understanding 
▪️Analytic Approach 
▪️Data requirements 
▪️Data Collection 
▪️Data understanding 
▪️Data preparation 
▪️Modeling 
▪️Evaluation 
▪️Deployment 
▪️Feedback 

(All of the concepts mentioned above will be broadly explained in another blog)
JavaScript hoisting
Tags: javascript, beginners, programming, webdev
Published: 2023-03-05 15:13:57

[JavaScript hoisting](https://www.webdeveloperblogs.com/2023/03/javascript-hoisting.html) is a mechanism where variables and function declarations are moved to the top of their respective scopes during the compilation phase.

![JavaScript hoisting](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kadg7udd20zivc2vxfh4.png)
Add to cart using javascript
Tags: javascript, beginners, webdev, programming
Published: 2023-03-05 15:07:44

In this article, we'll learn how to implement this feature using JavaScript and local storage.

Adding items to a shopping cart is a common feature in e-commerce websites.

**Localstorage**
Local storage is a feature available in modern web browsers that allows websites to store data locally on the user's device. This data persists even after the user closes the browser or turns off their device, making it an ideal choice for storing shopping cart data.

Save Data to Local Storage
`localStorage.setItem(key, value);`

Read Data from Local Storage
`localStorage.getItem(key);`

Remove Data from Local Storage
`localStorage.removeItem(key);`

Remove All (Clear Local Storage)
`localStorage.clear();`

**Shopping Cart**
To add an item to the shopping cart using JavaScript and local storage, we need to follow the following steps:

- Create a function that takes the item to be added as a parameter.
- Retrieve the current cart data from local storage.
- Check if the item to be added already exists in the cart. If so, increase its quantity. If not, add the item to the cart with a quantity of 1.
- Save the updated cart data to local storage.
- Update the UI to reflect the changes in the cart.


**Filter**
A category filter allows users to filter a list of items based on categories

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


**Search Products**
The jQuery code waits for the document to be ready and then attaches a `keyup` event listener to the search input field. This event will be triggered whenever the user types or deletes a character in the search box.

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

I hope this tutorial will be useful to you

Source will be available on : https://github.com/erajamanickam/add-to-cart-javascript

Live demo : https://add-to-cart-javascript.vercel.app/

Watch on video : https://youtu.be/UPyNp-SVV4M

Codepen : https://codepen.io/erajamanickam/pen/YzOjZLa
HTML Cheatsheet: The Ultimate Guide to HTML Fundamentals
Tags: webdev, beginners, tutorial, html
Published: 2023-03-05 14:33:00

HTML (HyperText Markup Language) is a fundamental building block of the web. It provides the structure and content of a website, making it a crucial part of any web development project. Whether you're a beginner or an experienced developer, having a comprehensive HTML cheatsheet can be incredibly helpful. Here's everything you need to know about HTML, all in one place.

## Basic HTML Structure

Here's the basic structure of an HTML document:

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <!-- Your content goes here -->
  </body>
</html>
```

### Heading Elements

HTML has six different heading elements, from `<h1>` to `<h6>`. Here's an example of each:

```html
<h1>This is a heading 1</h1>
<h2>This is a heading 2</h2>
<h3>This is a heading 3</h3>
<h4>This is a heading 4</h4>
<h5>This is a heading 5</h5>
<h6>This is a heading 6</h6>
```

### Paragraphs

To create a paragraph in HTML, simply wrap your text in `<p>` tags:

```html
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
```

### Links

Links allow users to navigate between different pages on the web. To create a link, use the `<a>` element:

```html
<a href="https://www.example.com">This is a link</a>
```

### Images

To display an image on a webpage, use the `<img>` element:

```html
<img src="image.jpg" alt="A description of the image">
```

### Lists

Lists are a great way to organize content on a webpage. There are two types of lists in HTML: ordered and unordered.

**Ordered Lists**

Ordered lists are numbered and use the `<ol>` element:

```html
<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>
```

**Unordered Lists**

Unordered lists use bullet points and the `<ul>` element:

```html
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
```

### Tables

Tables are a great way to display data in a tabular format. Here's an example of a simple HTML table:

```html
<table>
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
  </tr>
  <tr>
    <td>Row 1, Column 1</td>
    <td>Row 1, Column 2</td>
  </tr>
  <tr>
    <td>Row 2, Column 1</td>
    <td>Row 2, Column 2</td>
  </tr>
</table>
```


![html meme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vkmayhmvcv7g5m1vwzj6.jpg)

And there you have it! This HTML cheatsheet covers the basic tags and elements that you'll use in almost every HTML project. Of course, there's much more to HTML than what's covered here, but this should be enough to get you started. Happy coding!
An Introduction✨
Tags: intro, firstpost, newhere
Published: 2023-03-05 14:07:00

Hello there Random People, Welcome to my blog thing.

Well, I will be posting randomly over here when I get some inspiration or just a weird tingling for tech... here I'll strive to deliver content that's straight on point, humorous, and informative.

Whether you're a seasoned techie or just getting started in the tech world, I hope you'll find something here that sparks your interest and expands your knowledge.

### bye for now👋
Taxonomy of common concepts based on matrices of concepts, for AI improvement
Published: 2023-03-05 14:06:33


This is to introduce my github project (MIT license):
[Taxonomy of common concepts based on matrices of concepts, for AI improvement](https://github.com/paulfranceschi/taxonomy-of-concepts-for-AI)
Compelling though it is, in most cases, the GPT model answers questions like these incorrectly:

With which concept is blissful optimism in the same type of relationship as subjectivity and objectivity?
The answer is: '... perception.' 

We propose here a set of training data that allow for a response of the type:

'On the one hand, blissful optimism is a negative concept. On the other hand, subjectivity is a negative one and objectivity is a positive concept. Thus, the missing concept is a positive one. Hence, blissful optimism and awareness of problems are in the same relationship as subjectivity and objectivity.'

#chatgpt #python #trainingdata #showdev
6 Useful JavaScript Tips for Beginners
Tags: javascript, react, angular, node
Published: 2023-03-05 13:41:00

Hey Guys, Hope you all are doing well. Here are some of the useful tips that can improve productivity and overall performance of JavaScript code. These tips are for beginner and intermediate programmers as well. So without further ado let's jump in!

## Ternary Operator 

> 

```javascript
// Don't Do this
let port;
if(process.env.PORT) {
    port = process.env.PORT;
} else {
    port = 8080;
}

// Do This
const port = process.env.PORT || 8080;
```


## Template Literals

> 
```javascript
// Don't Do this
const greeting = 'Welcome Back ' + firstName + ' ' + lastName;
const successMessage = 'Your Product ' + productName + ' has been delivered on ' + orderDate + ' successfully!';

// Do This
const greeting = `Welcome Back ${firstName} ${lastName}`;
const successMessage = `Your Product ${productName} has been delivered on ${orderDate} successfully!`;
```

## Check if the value is undefined or null - Nullish coalescing

> 
```javascript
// Don't Do This
const userInfo = {};
let userName = '';

if(user.name === undefined || user.name === null) {
    userName = 'User not found!';
} else {
    userName = user.name;
}

// Do This
const userInfo = {};
let userName = user.name ?? 'User not found!';
```

Read more about Nullish Coalescing Operator from [Official Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator).

## Converting string to number

> 
```javascript
// Don't Do This
const age = parseInt('22');
const qauntity = parseFloat('11.02');

// Do This
const age = +'22';
const qauntity  = +'11.02';
``` 

## Array/Object Destructuring

> 
```javascript
// Given
const project = {
    name: 'Dribble Shot Design',
    reporter: 'John Doe',
    dueDate: '2023-03-05',
    status: 'pending'
};

// Don't Do This
const projectName = project.name;
const projectReporter = project.reporter;
const projectDueDate = project.dueDate;
const projectStatus = project.status;

// Do This
const { name, reporter, dueDate, status } = project;
```

## Implicit Boolean Coercion

> 
```javascript
// Don't Do This
const orderInfo = {} ;
let isOrderInfoAvailable;

if(Object.keys(orderInfo).length) {
    isOrderInfoAvailable = true;
} else {
    isOrderInfoAvailable = false;
}

// Do This
const orderInfo = {};
const isOrderInfoAvailable = !!orderInfo;
console.log(isOrderInfoAvailable); // true
```

Thanks for reading, If you liked the post please share it and leave suggestions.

## Connect With Me


Website: [Hardik Gohil](https://hardikgohilhlr.tech)

Github: [https://github.com/HardikGohilHLR](https://github.com/HardikGohilHLR)

Linkedin: [https://www.linkedin.com/in/hardikgohilhlr](https://www.linkedin.com/in/hardikgohilhlr)

Thanks ❤️
easy way to memorize Shorthand Property for padding and margin
Published: 2023-03-05 13:35:42

you want to write the shorthand for the padding property but you can't memorize it ? 

I created a gif with hand gesture I use it each time to know the right order of the property



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


as you can see move your hand clockwise top right bottom left and that is the right order for the shorthand 


hope it helps
Next 基礎 Part 03 -- フォームを作る
Tags: nextjs, react, html
Published: 2023-03-05 13:30:06


## why

フォームをしっかり全て作ったことがない。網羅したい。

AI の ChatGPT にきいた。

```
1. テキスト入力欄の作成
最も基本的なフォーム要素であるテキスト入力欄を作成します。
2. パスワード入力欄の作成
パスワードを入力するためのフォーム要素であるパスワード入力欄を作成します。
3. メールアドレス入力欄の作成
メールアドレスを入力するためのフォーム要素であるメールアドレス入力欄を作成します。
4. 数字入力欄の作成
数値を入力するためのフォーム要素である数字入力欄を作成します。
5. テキストエリアの作成
複数行のテキストを入力するためのフォーム要素であるテキストエリアを作成します。
6. チェックボックスの作成
複数の選択肢から一つ以上を選ぶためのフォーム要素であるチェックボックスを作成します。
7. ラジオボタンの作成
複数の選択肢から一つだけを選ぶためのフォーム要素であるラジオボタンを作成します。
8. セレクトボックスの作成
複数の選択肢から一つだけを選ぶためのフォーム要素であるセレクトボックスを作成します。
9. マルチセレクトボックスの作成
複数の選択肢から複数選ぶためのフォーム要素であるマルチセレクトボックスを作成します。
10. スライダーの作成
数値を範囲で選択するためのフォーム要素であるスライダーを作成します。
11. スイッチの作成
オン・オフを選択するためのフォーム要素であるスイッチを作成します。
12. 日付入力欄の作成
日付を選択するためのフォーム要素である日付入力欄を作成します。
13. 時刻入力欄の作成
時刻を選択するためのフォーム要素である時刻入力欄を作成します。
14. ファイルアップロード機能の作成
ファイルをアップロードするためのフォーム要素
```

このように返してくれた。

この通りに作っていく。

---

## 0. 共通のスタイリング

見やすいように作る。

```html
<div className={styles.container}>
  <h1>person-web</h1>
  <input 
    type="text" 
    className={styles.item}
  />
  <input 
    type="text" 
    className={styles.item}
  />
</div>
```

このように

コンテナの中にアイテムを並べる想定。

Home.modules.css

ここに

```css
.container {
  padding: 6rem; 
  /* ないと上に詰まる */
  flex-direction: column;
  display: flex;
  align-items: center;
  /* 横方向に中央に揃える、かつ長さを短くしている */
}
.item {
  margin-top: 1rem;
  min-height: 1.5rem;
  font-size: 1rem;
}
```

このように並べ方とサイズを決めた。


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

すると、このように見た目を作れる。

---

## 1. テキスト

```ts
const [text, setText] = useState<String>("")
```

text, setText のステートを用意する。

```ts
  const handleInputText = (e: React.ChangeEvent<HTMLInputElement>) => {
    console.log(e.target.value);
    setText(e.target.value)
  }
```

受け取った入力イベントの値をログに出して、
Text ステートに入れるハンドラ関数を作成する。

```html
<input 
  type="text" 
  onInput={handleInputText} 
  value={String(text)}
  className={styles.item}
/>
```

input に組み込む。
中身を String にして受け取らないとエラーになる。

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

これでテキストが入力できる。

---

## 2. パスワード

```html
<input 
  type="password" 
  onInput={handleInputPassword} 
  value={String(password)}
  className={styles.item}
/>
```

テキストとほぼ同じ。
タイプだけパスワードにする。

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

これで、ショルダーハック防止仕様のテキストフォームが作れる。

また、Chrome がパスワードをサジェストもしてくれる。

---
Release version 3.0.0 of elvis_core, the Erlang Linter!
Tags: erlang, beam, linter
Published: 2023-03-05 13:16:15

Brujo Benavides (watch my interview with him here:  [Q&A with Brujo Benavides - Introduction to Functional Programming class #Erlang #BEAM](https://youtu.be/6MTSl2OArd0)),  Staff Engineer at NextRoll, posted on Twitter:

{% twitter https://twitter.com/elbrujohalcon/status/1632011934009622529?s=20 %}

"After yet another #hackweek at NextRoll,  we can proudly release version 3.0.0 of `elvis_core`, the Erlang Linter!
Look at all the new rules we added with Samantha Yeargin,  Mackenzie Morgan, and the invaluable help of Paulo F. Oliveira (as usual)!"

You can find `elvis_core` here: [https://github.com/inaka/elvis_core](https://github.com/inaka/elvis_core).

Brujo also wrote that [Rebar3](https://github.com/erlang/rebar3) users also have [a new version of `rebar3_lint`](https://github.com/project-fifo/rebar3_lint/releases/tag/3.0.0).

{% twitter https://twitter.com/elbrujohalcon/status/1632014327698927641?s=20 %}
Simple web app to transcribe audio
Tags: gradio, whispers
Published: 2022-12-15 17:50:21

---
title: Simple web app to transcribe audio
published: true
date: 2023-03-05 13:00:00 UTC
tags: gradio,whispers
canonical_url: https://friendlyuser.github.io/posts/stonks/web_app_to_transcribe_audio/
---


## Summary

Audio transcription is the process of converting speech in an audio recording into written text. This can be useful in a variety of situations, such as when a person wants to search for a specific word or phrase within an audio recording, or when a person wants to make the content of an audio recording more accessible to people who are deaf or hard of hearing. Audio transcription can also be useful for creating written records of meetings, interviews, and other events that are recorded in audio form. In general, audio transcription can help to make the information in audio recordings more easily accessible and searchable.


Audio transcription can be useful for transcribing investor calls, which are typically audio recordings of meetings or conference calls where company executives discuss the company's financial performance and outlook with investors. Transcribing these calls can make the information contained in them more easily accessible and searchable, which can be helpful for investors who want to review the information discussed in the calls at a later date. 

The contents of requirements.txt are as follows:
```
whispers
git+https://github.com/openai/whisper.git
```

```python
import whisper
import gradio as gr


def get_text_from_mp3_whisper(mp3_file: str)->str:
    model = whisper.load_model("base")
    # options = whisper.DecodingOptions(language="en", without_timestamps=True)
    result = model.transcribe(mp3_file)
    return result.get("text", "No text found"), result.get("segments", {})
    
    
 
gr.Interface(
    title = 'OpenAI Whisper Transcribe audio files to text', 
    fn=get_text_from_mp3_whisper, 
    inputs=[
        gr.inputs.Audio(type="filepath")
    ],
    outputs=[
        "textbox", "json"
    ],
    live=True).launch()
```

This code uses the whisper and gradio libraries to create an interface for transcribing audio files. The get_text_from_mp3_whisper function uses the whisper library to load a model and transcribe the audio file at the given filepath. The transcription results are returned as text and a JSON object. The gradio library is then used to create an interface that allows users to input an audio file and see the transcription results. The interface also has a live mode, which allows users to see the transcription results as they are being generated.

## References 

This app is hosted on hugging space

See https://huggingface.co/spaces/FriendlyUser/whisper_demo