teleren/devto huggingface dataset:
"Props and States in React JS"
Tags: react, props, hooks, programming
Published: 2023-10-07 03:28:02

React is a JavaScript library that we can use to build User Interfaces and separate the structure of the app into components. When working with React, we have different ways to pass data between parent and child components: **Props and state.**

## What is a component?
A component is basically a function that takes data (props) as an argument and returns JSX. Components are dynamic and enable us to think about each piece in isolation, helping us keep our code organized.

## Props (Properties):

Props are pieces of information passed from a parent component to a child component as objects that store the values of attributes of a tag. They can hold any kind of data, such as strings, numbers, objects, and even functions. They can be accessed in the child component as parameters of the component function.


![Image of porps](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dwqc4v6zpcwqhqnlyf0q.png)

## State:
A state is essentially a variable used to contain information about the component that can change over the time as users interact with the application. State provides us with a way to maintain and update information within a component without requiring its parent to send the new information. The "change in the state" can happen as a response to user actions or system events. To use state, first, we need to import a hook from React called **"useState**." The **useState** hook will return an array with two variables inside of it: a reference to the current value and a set function so we can update that value."


![Image of useState](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/87gz2d8ed40pgetu8h6s.png)

In this example, we have a Counter component that uses state to  Increment the value when the  button is clicked, the state changes, and the component re-renders every time the we updated count.

In conclusion, props can pass data from parent to child components, while states can manage dynamic data within a component, allowing the user to update it while interacting.
2023 Hacktoberfest #1
Published: 2023-10-06 18:28:17

[Issue](https://github.com/eduardconstantin/storybook-gpt/issues/8)
[PR](https://github.com/eduardconstantin/storybook-gpt/pull/9)

In the beginning, I was struggling to find a real open-source project as there were some meaningless repo for `Hacktoberfest`. Fortunately, I found [Storybook-GPT](https://github.com/eduardconstantin/storybook-gpt) project which is web application that can be used to convert React components into Storybook stories. I can't say this is a big and popular open-source project, but he's also looking for a contributor and I was sure that I could give him a hand. 

The issue was to add `Prettier` to the project, so first I forked the repo and cloned it to my local machine and created my own branch to add a new feature. After I installed `Prettier` in the project, also added two scripts to package.json: 

` "format": "npx prettier --write .",
    "check-format": "npx prettier . --check"`

And I used `npm run format` command to apply `Prettier` to all files. Furthermore, I installed `Husky` and `Pretty-quick` to automatically format files when `git commit` is created. This is pretty handy because people don't need to type `npm run format` every time, `Prettier` is automatically triggered when the files are committed. 

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

After I created the first PR for the issue, he left a comment that he wanted a shorter `Tab Width` and I changed the `Tab Width` from `4` to `2` and he was satisfied with the output.

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

His response was pretty quick and we could easily communicate and sort out the issue quickly. Even though his project is not huge and on the beginning step, I was really glad to help him out and I got confident in the open-source project, it gave me a sense of achievement. Next week, I'd like to contribute to the bigger project and more tricky issues.
privacy policy
Published: 2023-10-07 02:18:37

Introducing the "MuYu" App by Heo!
Experience a sound effect tapping app where you can activate desired sound effects through screen taps, shakes, or auto-taps. Your on-the-go sound effect hub.

---

Certainly, here's a revised version of the app store copy:

Introducing the "Knock on MuYu" App by Heo!
Experience a sound effect tapping app where you can activate desired sound effects through screen taps, shakes, or auto-taps. Your on-the-go sound effect hub.

Highlighted Feature: Music Mode
A sound effect pack offers a diverse range of sounds. Discover a new auditory surprise with every tap. Engage with rich sound effects that keep you coming back for more.

Highlighted Feature: Sound Effect Mixer
Combine multiple sound effects to fit your preference. Adjust the frequency and volume for auto-taps and share your unique sound sequences with friends.

Highlighted Feature: Custom Sound Workshop
Craft your own sound effects using high-fidelity recording or by importing audio files. Transform any desired sound into an electronic MuYu tone.

Highlighted Feature: Motion-Activated Sounds
Our innovative shaking algorithm works across devices - from phones to watches to tablets. Bring your sounds to life by moving your device. Whether you're simulating a gunshot, playing a ping pong sound, or activating rhythm clappers, sync the effects with your motions.

Highlighted Feature: Backing Track Support (Lv.10)
Some sounds come with complementary background music, enhancing the overall auditory experience and making you think, "That's the perfect touch!"

Sound Highlights:

MuYu: Experience tranquility and relaxation.
Water Drop: The perseverance of water shaping stone.
Temple Bell: Feel empowered and energized.
Bell: Revel in pure, resonating tones.
Kiss: Double your motivation with a caring touch.
Cat & Dog: Embrace the warmth and comfort of our furry friends.
Crow: A playful sound effect for friendly pranks.
Chicken: A sound that stands out just as you do.
... and many more!

Universal Access with a One-Time Purchase!
AppStore's top recommendation. Compatible with iOS/iPadOS/Desktop Widgets, iOS Dynamic Features, Lock Screen Widgets, watchOS, macOS, and more.
Using Tomlib
Published: 2023-10-07 01:50:49

## TOML Config
For this week I continued contributing to my classmate's project. The new [feature](https://github.com/Namatuzio/tiller/issues/19) that I worked on was designed to allow the user to include all their optional arguments in a TOML config file and run the program with those configurations when transforming a text or a markdown file into HTML. Since the code-base for the project was in Python I found the [tomlib](https://docs.python.org/3/library/tomllib.html) module to use for reading and parsing a Toml file.

## Process
- I created an issue to explain the changes and the goal of the feature.
- I created a new branch for the feature after I got the approval from the owner and started working on the implementation.
- I wrote the code for the program to accept -c or --config as an optional argument when running the program, so that the user can provide the path to a TOML config file in addition to the path of the file(s) they want to convert to html.
- I went over the documentation for the tomlib module and understood how it worked. After reading a TOML file, the tomlib module returns a dictionary of key value pairs from the config file. So I used the keys that the program supported to retrieve their values, which were lang/l for custom language input and output/o for a custom output directory. I also made sure that if there were no values for those two keys in the TOML file, the default values were used.
- I coded the error handling and made sure that the program exited with a proper error message and code.
- After I finished implementing the feature, I tested all the possible scenarios and made sure that the feature functioned correctly and that it didn't break all the existing functionalities.
- Since the changes and the code added were small I only made a single commit and pushed the changes to the branch.
- I created a [pull request](https://github.com/Namatuzio/tiller/pull/20) where I explained the changes and how they functioned.
- I received feedback about the changes I had made from the owner. He was satisfied with the changes and asked me to update the help message and the README to reflect the new TOML support and also fix a bug that was causing issues when checking for file extensions.
- I made all the changes that were raised in the feedback and pushed them to update the pull request.
- The project owner accepted the pull request after reviewing it and merged the changes.

## Problems
I didn't run into any issues working on this feature. The only thing is that, I need to remember to update the documentation (README), whenever I add new features to a project. I also missed out on a bug during my testing, but fortunately the project owner caught it and asked me to fix it in his feedback.

## What I learned
I've never used a TOML configuration file before, so it was cool to experience that for the first time and learn about how all the configurations can be grouped together. I also learned how to work with the tomlib module to read and parse a TOML file in Python.
Amazon RDS
Tags: rds, aws, rdbms, db
Published: 2023-10-07 01:47:45

Amazon Relational Database Service (Amazon RDS) is a collection of managed services that makes it simple to set up, operate, and scale databases in the cloud.

Amazon Relational Database Service (Amazon RDS) is a web service that makes it easier to set up, operate, and scale a relational database in the AWS Cloud. It provides cost-efficient, resizable capacity for an industry-standard relational database and manages common database administration tasks.

Amazon RDS is a managed database service. It's responsible for most management tasks. By eliminating tedious manual tasks, Amazon RDS frees you to focus on your application and your users. 


Choose from seven popular engines:

1. Amazon Aurora with MySQL compatibility.
2. Amazon Aurora with PostgreSQL compatibility.
3. MySQL
4. MariaDB
5. PostgreSQL
6. Oracle
7. SQL Server


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nuhc8x27dw5521ldr8wz.png)
JavaScript Magic Tricks: Mutable Eval
Published: 2023-10-07 01:47:08

In JavaScript development, Eval is often used in dark areas to execute some code that is not intended to be seen by others.

However, Eval has distinct characteristics and no matter what function it implements, it can be easily observed directly, causing people to be alert.
However, Eval can also have mutated forms, such as the following line, which is also Eval, but can you identify it as such?

Mutated Eval:

`window[(14).toString(32)+(31).toString(32)+(10).toString(32)+(21).toString(32)]`
Execute:

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

How could such a strange string be Eval? Let's take a look at the technical principle of mutated Eval:

> 1.Eval() equals to window.eval().
> 2.Window.eval() equals to window["eval"].
> 3."eval" can be decomposed into: window["e"+"v"+"a"+"l"].
> 4."e"+"v"+"a"+"l" can be written as: (14).toString(32)+(31).toString(32)+(10).toString(32)+(21).toString(32).
> 5.How do we get the characters in 4? It's like this:
> parseInt("e",36) = 14;
> parseInt("v",36) = 31;
> parseInt("a",36) = 10;
> parseInt("l",36) = 21;
> 6.Finally, Eval is transformed into:
> window[(14).toString(36)+(31).toString(36)+(10).toString(36)+(21).toString(36)];

Can it still be used normally? Yes, of course.
Here are two examples:

Example 1:

`window[(14).toString(32)+(31).toString(32)+(10).toString(32)+(21).toString(32)]("console.log('test');");`

Example 2:

`window[(14).toString(32)+(31).toString(32)+(10).toString(32)+(21).toString(32)]("var a=1;var b=2;var c=3;console.log(a+b+c);");`
Exexute:

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

Further mutation: 
If the above JS code is obfuscated by JShaman JavaScript Obfuscator, more complex forms can be obtained.

`window[(748953 ^ 748951)['\x74\x6f\x53\x74\x72\x69\x6e\x67'](239241 ^ 239273) + (151757 ^ 151762)['\x74\x6f\x53\x74\x72\x69\x6e\x67'](430630 ^ 430598) + (671610 ^ 671600)['\x74\x6f\x53\x74\x72\x69\x6e\x67'](930617 ^ 930585) + (944302 ^ 944315)['\x74\x6f\x53\x74\x72\x69\x6e\x67'](186206 ^ 186238)](";)c+b+a(gol.elosnoc;3=c rav;2=b rav;1=a rav"['\x73\x70\x6c\x69\x74']("")['\x72\x65\x76\x65\x72\x73\x65']()['\x6a\x6f\x69\x6e'](""));`


At this point, who would have guessed that this was an eval?
Replace Embedded Tomcat Server with Jetty or Undertow in Spring Boot3
Tags: springboot, jetty, undertow, springboot3
Published: 2023-10-07 01:06:27

---
title: Replace Embedded Tomcat Server with Jetty or Undertow in Spring Boot3
published: true
tags: springboot, jetty, undertow, springboot3
canonical_url: https://stacktips.com/articles/replace-tomcat-with-jetty-or-undertow-in-spring-boot
---

One of the key features of the Spring Boot framework is the built-in support for embedded servers. It includes support for embedded Tomcat, Jetty, and Undertow servers. This means you don’t need any external web servers and no need to deploy WAR files anymore.

The embedded Tomcat server is available through the `spring-boot-starter-web` dependency.

However, if you want Jetty or Undertow servers then you can include `spring-boot-starter-jetty` or `spring-boot-starter-undertow` dependencies.

This video tutorial explains how to replace the default embedded Tomcat with Jetty or Undertow servers in your Maven or Gradle project.

{% embed https://youtu.be/1gEoiMVULt4 %}

Happy Learning!
Moving a Square with CSS Grid and Minimal JavaScript
Tags: react, css, grid, javascript
Published: 2023-10-07 01:00:36

In a recent technical interview, I was tasked with a problem where a square had to be moved within a grid using buttons. The solution I initially thought of required more complex logic and JavaScript, but I realized I could use CSS Grid to handle most of the heavy lifting. In this post, I'll explain how I used grid properties to solve the problem with minimal JavaScript.

## Example

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

## The Problem

I had to move a square within a grid with the help of four buttons: up, down, left, and right. The grid and buttons are defined as follows:

```css
.grid {
  display: grid;
  grid-template-columns: repeat(11, 20px);
  grid-template-rows: repeat(17, 20px);
}

.square {
  grid-column-start: 6;
  grid-row-start: 9;
  background-color: red;
}

.btn {
  display: grid;
  width: 100%;
  height: 100%;
}

.btn-up {
  grid-column-start: 2;
  grid-column-end: 11;
}

.btn-down {
  grid-column-start: 2;
  grid-column-end: 11;
  grid-row-start: 17;
}

.btn-right {
  grid-column-start: 11;
  grid-row-end: 17;
  grid-row-start: 2;
}

.btn-left {
  grid-column-start: 1;
  grid-row-end: 17;
  grid-row-start: 2;
}
```

## The JavaScript Solution with React

Instead of manually moving the square's position in the DOM, I used CSS grid properties combined with React's state to determine the square's position on the grid.

Here's the JavaScript code:

```js
import React, { useState } from "react";

const Board = () => {
  const [axisX, setAxisX] = useState(6);
  const [axisY, setAxisY] = useState(9);

  const handleMoveSquare = (direction) => {
    switch (direction) {
      case "up":
        if (axisY > 2) setAxisY(prevY => prevY - 1);
        break;
      case "down":
        if (axisY < 16) setAxisY(prevY => prevY + 1);
        break;
      case "right":
        if (axisX < 10) setAxisX(prevX => prevX + 1);
        break;
      default:
        if (axisX > 2) setAxisX(prevX => prevX - 1);
        break;
    }
  };

  return (
    <div className="grid">
      <div className="btn btn-up">
        <button onClick={() => handleMoveSquare("up")} />
      </div>
      {/* ...other buttons... */}
      <div className="square" style={{ gridColumnStart: axisX, gridRowStart: axisY }}></div>
    </div>
  );
};
```

## Demo

{% embed https://codesandbox.io/embed/square-direction-pv28wm?fontsize=14&hidenavigation=1&theme=dark %}

## Conclusion

CSS Grid properties combined with React's state management provide a powerful way to create dynamic interfaces without much manipulation of the DOM. By setting the grid properties dynamically based on React's state, we can create fluid interfaces that react to user interactions.

Would love to hear your thoughts on other creative uses of CSS Grid!
A Personal Portfolio Website Build In React
Tags: portfoliopage
Published: 2023-10-27 06:38:25

---
title: A Personal Portfolio Website Build In React
published: true
date: 2023-10-07 00:45:00 UTC
tags: PortfolioPage
canonical_url: https://reactjsexample.com/a-personal-portfolio-website-build-in-react/
---

# Prasad Chavan’s Personal Portfolio and Blog
 ![A Personal Portfolio Website Build In React](https://reactjsexample.com/content/images/2023/10/Code_2023-10_20-40-41.jpg)

Link to live site: [https://prasadchavan.vercel.app/](https://prasadchavan.vercel.app/)

## Features

- Responsive design for various screen sizes and devices.
- Sections for displaying personal information, resume, projects, and contact details.
- Dynamic routing and SEO optimization with Next.js.

## Technology Used:

- React JS
- Next JS
- MarkDown
- HTML/ CSS/ JS
- Tailwind CSS
- Node JS

## Contributing

Contributions are welcome! If you have suggestions, bug reports, or feature requests, please open an issue or submit a pull request.

## Copyrights

[© Prasad Chavan](https://github.com/prasad-chavan1) 2023

## GitHub

[View Github](https://github.com/prasad-chavan1/portfolio?ref=reactjsexample.com)
A blazing-fast React.js code editor with real-time HTML, CSS, and JS preview.
Tags: editor
Published: 2023-10-27 06:38:18

---
title: A blazing-fast React.js code editor with real-time HTML, CSS, and JS preview.
published: true
date: 2023-10-07 00:39:00 UTC
tags: Editor
canonical_url: https://reactjsexample.com/a-blazing-fast-react-js-code-editor-with-real-time-html-css-and-js-preview/
---

# React Code Editor
 ![A blazing-fast React.js code editor with real-time HTML, CSS, and JS preview.](https://reactjsexample.com/content/images/2023/10/Code_2023-10_11-34-25.jpg)

Welcome to the React Code Editor! This is a web-based code editor built using React.js that allows users to write and run HTML, CSS, and JavaScript code.

## Features

✏️ Write and edit HTML, CSS, and JavaScript code in real-time.

🚀 Run and preview your code instantly in the browser.

💡 Syntax highlighting for code clarity.

📦 Easy setup and integration with React projects.

## Live Demo

Check out [here](https://code-editor-k5dw.onrender.com/).

## Getting Started

### Prerequisites

Before you begin, ensure you have the following prerequisites:

- [Node.js](https://nodejs.org/) installed on your machine.
- [npm](https://www.npmjs.com/) (Node Package Manager) or [yarn](https://yarnpkg.com/) installed.

## Screenshots

![A blazing-fast React.js code editor with real-time HTML, CSS, and JS preview.](https://user-images.githubusercontent.com/85897297/272524631-40191dbf-fb1a-490b-9351-03575f68cda3.png)

### Installation

1. Clone this repository to your local machine:

## GitHub

[View Github](https://github.com/pitabasdev/code-editor?ref=reactjsexample.com)
Dependabot alerts triaging in GitHub
Published: 2023-12-20 09:08:49

---
title: Dependabot alerts triaging in GitHub
published: true
date: 2023-10-07 00:00:00 UTC
tags: 
canonical_url: https://devopsjournal.io/blog/2023/10/07/Dependabot-alert-triaging
---

The GitHub UI displays a couple of helpful tips to use in triaging your Dependabot alerts which are super helpful. Unfortunately the User Interface does not show these filters in the filter bar yet, so I wanted to have a better overview of the filters I could use. I’ve listed them below:

## Only show alerts where your code is using the vulnerable calls of the dependency

This is very helpful in triaging the open alerts. Currently in limited preview for certain languages and certain package ecosystems. I hope they will expand this to more languages and package ecosystems.

Instead of wading through all the open alerts where your code might (currently!) not call into the vulnerable part of the dependency code, you can filter down the list of alerts to the things you **are** calling. Use this filter:

- `is:open has:vulnerable-calls`

## Filter on Dependabot auto dismissal

Dependabot now has new functionality to auto dismiss alerts that have low or medium severity. This is a great way to reduce the noise in your alerts list so you can filter on the important issues. You can filter on these alerts with this filter:

- `is:closed resolution:auto-dismissed `

## Filter on only runtime dependencies

This is a great way to filter out the development dependencies from the runtime dependencies. This is the case for example when you use NPM as a package manager. You can use this filter to only show the runtime dependencies:

- `is:open scope:runtime`Do make sure that you are not accidentally publishing to production with development dependencies. This is a common mistake that can lead to security issues, as the files are then still on disk, and could be used as an attack vector.

## Filter on vulnerable dependencies where a patch is available

This is helpful to focus on quick wins. Since there is a patch available that fixes the vulnerability, getting these dependencies upgraded can lead to fast results. You can use this filter to only show the alerts where a patch is available:

- `is:open has:patch`
What you learning about this weekend?
Tags: codenewbie, discuss, learning, beginners
Published: 2023-10-07 00:00:00

---
published_at : 2023-10-07 00:00 +0000
---
Hey y'all!

What ya learning on this weekend?

Whether you're sharpening your [JS](https://dev.to/t/javascript) skills, making PRs to [your OSS repo of choice](https://github.com/forem/forem) 😉, sprucing up your portfolio, or [writing a new post](https://dev.to/new) here on DEV, we'd like to hear about it.

Wishing ya the best on your work... remember to take breaks and enjoy yourself!

![A cute little gerbil dressed as a human, frantically looks up from it's miniature pencil and pad of paper](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pf4hkltnutky6t1kaaay.gif)
What Kind Act Will You Do for Yourself Today?
Tags: discuss, codenewbie, beginner
Published: 2023-10-07 00:00:00

---
published_at : 2023-10-07 00:00 +0000
---
Let's encourage each other to practice self-kindness by sharing one positive action you plan to take for yourself today.

Follow the [CodeNewbie Org](https://dev.to/codenewbieteam) and [#codenewbie](https://dev.to/t/codenewbie) for more discussions and online camaraderie!

*{% embed* https://dev.to/codenewbieteam *%}*