teleren/devto huggingface dataset:
Expense Chart - Frontend Mentor
Tags: javascript, frontend, css, tutorial
Published: 2023-08-29 19:49:32



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

<h3>The Prerequisites</h3>

1. [Chart.js](https://www.chartjs.org/docs/4.4.0/)
2. [CSS Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
3. [JavaScript Object Constructor](https://www.w3schools.com/js/js_object_constructors.asp)

<h3>Creating the Expense Chart</h3>

<h4>HTML5 and CSS</h4>

<p>The first container with the balance and SVG should be within a "div" element, which can be styled with Flexbox.</p>

```html
<div class="balance">
        <div class="bal-section">
          <h2>My balance</h2>
          <p class="monthly-balance">$921.48</p>
        </div>
        <div class="svg">
          <i class="uil uil-adjust-circle"></i>
        </div>
      </div>
```

```css
.balance {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  background-color: var(--primary-color);
  width: 450px;
  height: 100px;
  border: none;
  border-radius: 20px;
  box-sizing: border-box;
  margin-top: 20px;
}
```

<p>The second container will reference the chart along with the monthly total. The "canvas" element is a container for the expense chart, which will be created via JavaScript.</p>

```html
 <div class="chart-div">
        <h1>Spending - Last 7 days</h1>
        <div class="js-chart">
          <canvas id="myChart" style="width:100%;max-width:700px"></canvas>
        </div>
        <hr />
        <div class="bottom-data">
          <div class="left">
            <h3>Total this month</h3>
            <p class="monthly-total">$478.33</p>
          </div>
          <div class="right">
            <h4>+2.4%</h4>
            <p class="per">from last month</p>
          </div>
        </div>
      </div>
```
<h4>JavaScript</h4>

<p>You should create three variables for the labels, data, and the background colors for each of the bars. These variable will be used in the expense chart object.</p>

```javascript
const weekday = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
const expenseValue = [17.45, 34.91, 52.36, 37.07, 23.79, 43.28, 25.48];
const barColors = ["#f4ceb8", "#e2cbd9", "#c2a2c2", "#bfd1d0", "#e9a7b8", "#a4d4dc", "#dfefc6"];
```

<p>By using the "new" keyword, you can create an instance of the "chart" object. You must reference the "id" from the "canvas" element to acquire the chart, which will allow you to add all the values to the properties.</p>

```javascript
new Chart("myChart", { 
  type: "bar",
  data: {
    labels: weekday,
    datasets: [{
      backgroundColor: barColors,
      data: expenseValue
    }]
  },
  options: {
    scales: {
        x: {
            grid: {
               display: false
            }
         },
         y: {
            grid: {
               display: false
            }
         }
   },
   plugins: {
    legend: {display: false}
  }}
});
```

I hope you enjoyed this tutorial!
What is JavaScript XML?
Tags: webdev, javascript, react, programming
Published: 2023-08-29 19:45:06

Imagine you're a chef creating a recipe card for a delicious cake using two different languages: JavaScript and HTML.

**JavaScript:** This is the language you use to define the logic and behavior of your recipe. It's like the ingredients and instructions for your cake. But, just like a recipe, it's not very visually appealing on its own.

```
const ingredients = ["flour", "sugar", "eggs", "butter", "vanilla"];

function mixIngredients(ingredients) {
    // Mixing logic here
}
```

**HTML:** This is the language you use to describe how your cake should look. It's like the decoration and presentation instructions. This is where you make your cake visually appealing.

```
<div class="cake">
    <h1>Delicious Cake</h1>
    <ul>
        <li>Flour</li>
        <li>Sugar</li>
        <li>Eggs</li>
        <li>Butter</li>
        <li>Vanilla</li>
    </ul>
</div>
```

Now, JSX combines the best of both worlds. It lets you write the visual structure of your UI elements using HTML-like syntax directly within your JavaScript code. This is like having your recipe and decoration instructions in the same language.

```
function Cake() {
    const ingredients = ["flour", "sugar", "eggs", "butter", "vanilla"];
    return (
        <div className="cake">
            <h1>Delicious Cake</h1>
            <ul>
                {ingredients.map(ingredient => (
                    <li>{ingredient}</li>
                ))}
            </ul>
        </div>
    );
}
```

In the JSX example, we define a Cake component using JSX syntax. It looks almost like HTML but is embedded within the JavaScript code. The {} curly braces are used to embed JavaScript expressions within JSX, enabling dynamic content.
Muse AI (Beta) Launching on Product Hunt Today!!!
Tags: producthunt
Published: 2023-08-29 19:42:59

When was the last time, your creativity truly soared? When you crafted something, that left a mark, that resonated, that moved hearts and minds? What if, you could unlock a new realm of design, where limitations fade, and your imagination, reigns supreme?

I’m excited to share Muse AI (Beta) with you on Product Hunt. Do support us here - https://www.producthunt.com/posts/muse-ai-beta

At Creatosaurus AI, we stand united, driven by the conviction that everyone deserves the power to breathe life into their wildest ideas and we firmly believe that the future of content creation is all about storytelling.

That's why we built Muse AI, our new generation text-to-design AI photo editing tool that can generate, customize, and create designs with AI. With Muse AI as your companion, you can blend your creativity with artificial intelligence to craft mesmerizing designs.

Whether you're a designer, marketer, artist, maker, or creator, Muse AI, reshapes the landscape of your possibilities. It's not just a design tool; it's your passport, to a world where ideas, transform into reality.

The Future of Design, Starts Here.

I'm eagerly looking forward to hearing your feedback, suggestions, or opinions on Muse AI, our pro AI graphic design editor in the comment section.

Join the waitlist now - https://www.creatosaurus.io/apps/muse
Thank you to the Contributors of Before I Die Code week # 2
Tags: beginners, opensource
Published: 2023-08-29 19:26:58

{% embed https://youtu.be/B2R5mjCQrs4 %}

Hello everyone! 👋 Xander Clemens here, and I am thrilled to thank all the contributors to my open source project, Before I Die Code 🚀, in video format after the second week of being live. Before I Die Code is a React ⚛️ open-source project where developers share what they want to do before they die.

👉 [Before I Die Code GitHub Repository](https://github.com/BeforeIDieCode/BeforeIDieAchievements)

I would like to thank the following contributors from week two:

👨‍💻 Alandis Ayupov 🇺🇸 from Edison, New Jersey, USA wants to play airsoft before he dies.

👨‍💻 Chu Seng Yong 🇲🇾 from Sarawak, Malaysia wants to retire in New Zealand with his love.

👨‍💻 Kenneth Quiggins 🇺🇸 from Louisville, Kentucky, USA wants to become a remote Software Developer to support his family.

👨‍💻 João Guilherme Camarota 🇧🇷 from Goiânia, Brazil wants to go skydiving.

👨‍💻 Luciano Sanchez Juarez 🇲🇽 from Puebla, Mexico wants to visit as many countries as possible.

This week, we had 5 merge requests from 4 continents sharing dreams! 🌎 In addition, issues solved by:

👨‍💻 Ranjeet Jena 🇮🇳 from Odisha, India (UI enhancement)

👨‍💻 Chu Seng Yong 🇲🇾 from Sarawak, Malaysia (UI and mobile responsiveness)

👨‍💻 Viktorius Suwandi 🇮🇩 from Banten, Indonesia (README updates)

👨‍💻 Shivesh Vijay 🇮🇳 from Rajasthan, India (Hindi translation)

👨‍💻 Luciano Sanchez Juarez 🇲🇽 from Puebla, Mexico (Spanish translation & docs)

Thank you all for helping Before I Die Code 🚀 grow this week! Together we can share dreams 💭 and help developers contribute to open source.

We welcome contributions to improve UI, tech stack, and value for developers. A goal is translating docs into top 6 languages (English ✅, Mandarin, Hindi, Spanish ✅, French, Arabic).

Star ⭐️ the repo and fork 🍴 to get involved in open source! Let's keep sharing dreams 🌅. Thanks for watching and have a great week! 😊

👉 [Before I Die Code GitHub Repository](https://github.com/BeforeIDieCode/BeforeIDieAchievements)
Cheerful Modal Window
Published: 2023-08-29 18:51:37


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

This project showcases a modal window component designed to uplift and encourage users when they're feeling down. It features three different modal windows, each with a unique message of positivity and hope.
This project was inspired by the desire to spread positivity and encouragement to those who might be feeling down. It's a small gesture with the hope of brightening someone's day.
Creating Customized Offline Captcha in Angular 🔥✌
Tags: captcha, angular, tutorial, typescript
Published: 2023-08-29 18:45:38

## Hola Folks!!
**We are going to develop our offline captcha with typescript in just 5 minutes.**


Only 5 steps we are going to follow:

- create function for random string

- initialize a variable array to store random string

- Generate captcha of your desired length i.e. 4 or 5 and so on.

- call that random string with a background image in template file

- validate and refresh captcha

## Let's start

**Step 1**

```
 makeRandom(lengthOfCode: number, possible: string)
{
    let text = "";
    for(let i = 0; i< lengthOfCode; i++)
    {
      text += possible.charAt(Math.floor(Math.random() * possible.length));
  }
    return text;
}
```
above is the function for generating random string. now lets go further. 

**Step 2**

Initializing variables as follows:

```
  captchaText: any =[]
  captchaEntered: String = ""

```
now so variable has been initialized, lets call makeRandom function to generate desired captcha.

**Step 3**

```
generateCaptcha()
{
  let possible= "ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890"
  const lengthOfCode = 1

  for (let i=0; i< 5; i++)
  {
    let captchaChar = this.makeRandom (lengthOfCode, possible)
    this.captchaText[i] = captchaChar
  }
}

```
generateCaptcha function can be used on refresh button as well to regenerate captcha.

**step 4**
So now captcha has been generated, we are now calling it on our browser page.

```
<div style="background-image: url('./assets/captcha.jpg');">
  <div *ngFor="let captcha of captchaText">
    <b>{{captcha}}</b>
  </div>
</div>

<div>
  <input type="text" [(ngModel)]="this.captchaEntered" maxlength="5">
</div>
```
you can use any image suitable to you as a captcha background.
secondly you can validate or refresh captcha on your desired submit button.

**step 5**
So the last one we are validating the captcha end user entered:

```

validateCaptcha ()
{
  let i=0
  this.captchaEntered = this.captchaEntered.toLocaleUpperCase()
  for (i; i<5; i++)
  {
    if (this.captchaEntered.charAt(i) != this.captchaText[i])
    {
      alert('wrong captcha entered')
      return
    }
  }

  //captcha verified your further code here

}

```

_here you go enjoy!!!!! _
Rustacean Hangout Thread
Tags: rust, discuss, watercooler
Published: 2023-08-29 18:17:21

Hello everyone, this is a hangout thread for Rust.

This is an area for <b>Rustaceans to discuss <i>*Rust*</i></b>.
Feel free to share anything Rust-related that you think is interesting.

What's the latest?

<b><center><b>Thanks for participating!<br/>Cheers!</b></center></b>
Validación de nulos con el operador ?? en C#
Published: 2023-08-29 18:03:37

En nuestro día a día como programadores, nos encontramos de esas situaciones en las que tenemos que validar si una variable es nula y, si lo es, asignarle un valor por defecto. 

En el mundo de la programación cada lenguaje tiene sus operadores y símbolos que hacen que esta tarea sea más fácil y eficiente. 

En C# tenemos al **operador ??(Coalescencia nula)** uno de los varios operadores que tiene este lenguaje de programación, este operador se encuentra dentro de los operadores de comparación simplificados.

En este artículo aprenderemos que es, como utilizar este operador y como puede ayudarnos a simplificar nuestro código en los proyectos en los que trabajemos. Vamos a ello.

**¿Qué es el operador de coalescencia nula (??)?**
_Veamos la definición técnica:_
El operador de coalescencia nula (??) es un operador de C# que permite asignar un valor predeterminado a una variable si su valor actual es nulo. Proporciona una forma concisa de manejar valores nulos sin tener que escribir varias líneas de código condicional.

_Y ahora la definición menos técnica:_
El operador ?? valida si un valor es nulo y nos ayuda a asignarle un valor en caso de serlo, vamos a entenderlo mejor con un ejemplo.

**CASO DE USO**
Tenemos una aplicación donde los usuarios pueden ingresar su nombre. Si no ingresan nada (nulo) vamos a mostrar la palabra "Invitado".

_Código tradicional_
``` csharp
string nombreUsuario = ObtenerNombreUsuario();

string mensaje;

if (nombreUsuario != null)
{
    mensaje = nombreUsuario;
}
else
{
    mensaje = "Invitado";
}
```
Como ves esto nos lleva a una serie de comprobaciones y asignaciones.

_Ahora veámoslo con el operador ??_
``` csharp
string nombreUsuario = ObtenerNombreUsuario();
string mensaje = nombreUsuario ?? "Invitado";
```

¿Un cambio radical verdad? En lugar de varios bloques if-else para manejar valores nulos, ahora solo necesitamos una línea.
Si nombreUsuario no es nulo, ¡tendrás su nombre! Y si es nulo, no hay problema, "Invitado" es tu plan B.

**Veamos unos ejemplos más:**

Aquí tenemos una variable del precio de un producto, en lugar de que recibir un valor vacío vamos a asignarle un valor por defecto.
```csharp
double precioProducto = ObtenerPrecioProducto();
double precioMostrar = precioProducto ?? 0.00;
```

**Escapando de las Excepciones**
También debes haber enfrentado el desafío de las excepciones cuando intentas acceder a un objeto nulo. Aquí nuevamente, el operador ?? viene a tu rescate:

```csharp
string mensajeBienvenida = ObtenerMensajeBienvenida();
string mensajeMostrar = mensajeBienvenida ?? "¡Bienvenido a bordo!";
```

**O Enviar una excepción personalizada.**

```csharp
Usuario usuario = ObtenerUsuario() ?? throw new NotFoundException("Usuario no encontrado");
```


Ahora ya sabes como validar valores nulos con nuestro super operador ??,  ya no tienes que perder tiempo en verificaciones tediosas ni enfrentarte a excepciones inesperadas.

Nos vemos en [Twitter](https://twitter.com/veronicaguamann)

¡Hasta la próxima línea de código y que tus códigos siempre estén libres de nulos! 🚀
Get to know New Relic Grok, the industry’s first GenAI o11y assistant on 8/30
Tags: ai, devops, monitoring
Published: 2023-08-29 17:54:07

Hi, devs!

You have questions, we have answers! Join our product, engineering, and machine learning team members on August 30 to learn more about generative AI and New Relic Grok, the industry's first generative AI assistant for observability.

Set a reminder: https://twitter.com/i/spaces/1djGXlVmYmoGZ

-Daniel
Enhance Your Plugin's Performance with WordPress Plugin Rank Checker
Tags: webdev, wordpress, developer
Published: 2023-08-29 17:44:12

In the ever-evolving landscape of WordPress plugins, ensuring your creation stands out is crucial. That's where "WordPress Plugin Rank Checker" comes into play, and at Acowebs we're here to guide you through its transformative power.

## Unveiling WordPress Plugin Rank Checker

When it comes to managing your WordPress plugins, tracking their performance in search results is a game-changer. "WordPress Plugin Rank Checker" is an innovative tool designed to help you monitor the visibility and ranking of your plugins in the WordPress plugin repository. This powerful Chrome extension provides insights into how well your plugins are performing, allowing you to make data-driven decisions for optimization.

## Why Choose WordPress Plugin Rank Checker from Acowebs?

At [Acowebs](https://acowebs.com/chrome-extension), we're no strangers to crafting solutions that revolutionize the e-commerce experience. With our deep expertise in WordPress and Shopify, we understand the importance of staying ahead. Our track record speaks for itself, as we've introduced game-changing plugins like WooCommerce Custom Product Add-ons, WooCommerce Deposits & Partial Payments, and WooCommerce PDF Invoices.

Now, we're excited to introduce you to "WordPress Plugin Rank Checker." This tool isn't just about tracking rankings; it's about unlocking insights that can propel your plugins to new heights. By using the data provided by our extension, you can optimize your plugin's metadata, keywords, and content to enhance its discoverability and increase its installations.

### Empowering Your Plugin's Success

Creating a stellar WordPress plugin is just the first step; ensuring it reaches its intended audience is where success truly lies. "WordPress Plugin Rank Checker" empowers you to:

Monitor Performance: Keep a close eye on how your plugin is ranking in search results over time. Identify trends, spikes, or drops in visibility.

Optimize Strategically: Utilize the insights gained to refine your plugin's description, keywords, and other elements, increasing its chances of being discovered by the right users.

Stay Ahead of Competitors: Stay competitive by tracking how similar plugins are performing and adapting your strategies accordingly.

Data-Driven Decisions: Base your decisions on concrete data rather than assumptions, allowing you to allocate resources effectively.

#### Join the Acowebs Revolution

At Acowebs, we're committed to driving innovation and excellence in the WordPress ecosystem. "WordPress Plugin Rank Checker" is another testament to our dedication to helping you succeed. By combining our expertise with this powerful tool, you'll have everything you need to propel your plugins to the top.

Elevate your plugin's performance with "WordPress Plugin Rank Checker" from Acowebs. Experience the transformative power today and witness your creations soar in the competitive world of WordPress plugins.
From TSV to CSV: How GitHub Copilot Chat Made Data Conversion a Breeze!
Tags: ai, python, githubcopilot, tutorial
Published: 2023-08-29 17:44:01

I recently discovered that GitHub projects has TSV exports! 💃🏼

![projects-export-tsv](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zcv27hrrz6k4hy1neuvx.gif)

I was super excited about this but it also made me realize that some folks may want/prefer csv files and so, I asked by bestie - GitHub Copilot Chat - to help me convert a TSV file to a CSV file in Python. 
Now, I'm not a Python Developer, so I wasn't sure how I would do this in Python, and while I could use an npm module like [PapaParse](https://github.com/mholt/PapaParse) to accomplish this, I wanted to try another language. 

Honestly, it was pretty seamless! 

**Here's how I did it:**

**Step 1:**  Download your TSV file and add it to a folder, then open said folder in VSCode (or your preferred editor). 

**Step 2:** Create a new Python file, I called mine `tsv_to_csv.py`. 

**Step 3:** Navigate to GitHub Copilot Chat and ask "how do I convert a tsv file to csv with python?" 
I was provided with the following code:

```Python
import csv

with open('ruby-study-guide.tsv', 'r') as tsvfile:
    reader = csv.reader(tsvfile, delimiter='\t')
    with open('ruby-study-guide.csv', 'w', newline='') as csvfile:
        writer = csv.writer(csvfile)
        for row in reader:
            writer.writerow(row)
    print("Conversion complete!")
```

> If you're not familiar with GitHub Copilot Chat, read this blog post to learn [how to get started with it](https://dev.to/github/getting-started-with-github-copilot-chat-in-vscode-174m). 


**Step 4:** Paste the code into your file by clicking the "Insert at Cursor" icon.
![insert at cursor icon GitHub Copilot Chat interface](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5yqa1253zuj30dwtlwq9.png)

**Step 5:** Save your file, run the code with `python <<name of your file here>>`, for example `python tsv_to_csv.py`, and enjoy your csv file!


Here's a video/gif on the steps I did above:

![convert tsv to csv with Github copilot chat](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ps4nl5lj2qe2619ipcwf.gif)

----
Now that you know that GitHub Projects has TSV exports, learn more tidbits that you possibly didn't know by reading this blog post I wrote on [10 things you didn't know you could do with GitHub Projects](https://github.blog/2023-08-28-10-things-you-didnt-know-you-could-do-with-github-projects/).

Let me know if you have any questions about GitHub Copilot or GitHub Projects below!
BewareNote!
Tags: javascript, beginners, programming
Published: 2023-08-29 17:42:10

## Avoid using arrow functions for object methods
 If you need to access the object's properties or methods inside a function, using an arrow function might lead to unexpected behavior due to the this binding. Regular functions are often preferred for methods within objects
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pwn84li62h8g18lgn4gz.gif)


Global context: In arrow functions, this retains the value from the surrounding context. This means that in a global context, this inside an arrow function will refer to the global object (window in browsers), which might not always be the desired behavior.

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


Binding: If you want to bind a specific context to an arrow function, you can't use .bind() like you can with regular functions. Instead, you might need to create a closure that captures the desired context.

tata bbye!!!🚀😉