teleren/devto huggingface dataset:
React JS
Tags: react, frontend, javascript, webdev
Published: 2023-03-30 23:34:52



##  Difference package.json and package-lock.json files?

Q1: why package.lock.json is necessary when you have package.json in your project application?
   
  
ANS: package.lock.json is created for locking the dependency with the installed version. It will install the exact latest version of that package in your application and save it in package.json.

DIFFERENCE IS: 

Without package.lock.json, there might be some differences in installed versions in different environments. To overcome this problem, package.lock.json is created to have the same results in every environment.

[GFG](https://www.geeksforgeeks.org/difference-between-package-json-and-package-lock-json-files/)

---


## useState

Q.1 What is the use of useState() in React Hooks?
    
- It allows to track the state in a functional component in React.



## Props

- React components use props to communicate with each other.
- Props are also how you pass data from one component to another, 
  as parameters.
- In react, the prop stands for "Properties". They are plain 
  JavaScript objects.
- Props are used to store data that can be accessed by the 
  children of a React component.
- React Props are like function arguments in JavaScript.
- Props are also how you pass data from one component to another, 
  as parameters.
- [props](https://www.freecodecamp.org/news/beginners-guide-to-props-in-react/)



## Components
Components are independent and reusable bits of code.
LLMs are problematic for knowledge sharing
Tags: codereviewvillains, programming, productivity, gpt4
Published: 2023-03-30 23:31:54

If LLMs are probabilistic - do you trust the code output to chance, thoroughly inspect it, or look at it as part of the story?

Most engineers will thoroughly inspect it due to its probabilistic nature.

But inspection doesn't yield good knowledge sharing...so now what?
Why we need Data Science
Tags: datascience
Published: 2023-03-17 07:36:03

Data science is the field of extracting insights and knowledge from data using various statistical and computational methods. In today's world, data is generated at an unprecedented scale, and it has become essential for businesses and organizations to analyze this data to gain insights that can help them make better decisions and improve their operations. For details, You can even check in-depth and Upskill yourself Data Science concepts from [Data science course](https://www.edureka.co/executive-programs/advanced-program-data-science-course-iitg). 

**Here are some specific reasons why we need data science:**

Decision-making: Data science can help businesses make better decisions by analyzing large volumes of data to identify patterns and trends. This can help businesses improve their operations, optimize their resources, and make better-informed decisions.

Predictive modeling: Data science can also help businesses predict future trends and behaviors by building predictive models based on historical data. These models can help businesses forecast demand, identify risks, and optimize their resources.

Improved customer experience: Data science can help businesses improve their customer experience by analyzing customer data to identify preferences, habits, and patterns. This can help businesses personalize their products and services, improve customer satisfaction, and increase customer loyalty.

Fraud detection: Data science can help businesses identify fraudulent activities by analyzing large volumes of data to detect unusual patterns and behaviors. This can help businesses prevent fraud, minimize losses, and protect their customers.

Process optimization: Data science can help businesses optimize their processes by analyzing data to identify bottlenecks and inefficiencies. This can help businesses improve their productivity, reduce costs, and improve their overall operations.

Overall, data science is essential for businesses and organizations to make informed decisions, optimize their resources, and improve their operations.
New to git bash!
Tags: webdev, beginners, community, discuss
Published: 2023-03-30 23:12:35

Hi! I am a new-B in Dev-World! I am currently using git bash in school, so I just want to get a general idea about git bash. How often does one use git bash on a daily basis? or does some people use a different system for their work? 

_(_please leave a comment down below, any pointers on git bash will greatly be appreciated___
What are some good practices for writing clean and maintainable code?
Tags: programming, codenewbie, cleancode, beginners
Published: 2023-03-30 23:04:50

As a code newbie, you may be wondering what specific practices you should follow to ensure that your code is clean and maintainable. Some good practices include:

**Write code that is easy to read:**

This means using descriptive variable names, avoiding overly complex logic, and using white space and indentation to make your code more visually appealing.

**Keep your code modular:**

Modular code is easier to read, test, and maintain than monolithic code. By breaking your code into smaller, more manageable modules, you can make it easier to debug and modify in the future.

**Use comments and documentation:**

Writing clear, concise comments and documentation can help other developers understand how your code works and what its purpose is. This can be especially helpful when you are working on a large project with multiple contributors.

**Test your code:**

Testing your code regularly can help you catch errors and bugs before they become major issues. This can also make it easier to track down and fix bugs if they do occur.

**Follow established coding standards:**

Many programming languages have established coding standards that can help you write more maintainable code. These standards typically include guidelines for formatting, naming conventions, and code structure.

## Conclusion

By following these practices and others like them, you can ensure that your code is clean, easy to maintain, and will continue to be useful and relevant for years to come.

Share your experience in the comments below! 👇💬
😤 That feeling when your favorite project too goes in the graveyard...
Tags: discuss, healthydebate, watercooler
Published: 2023-03-30 22:46:20


## 🪦 Killed by Google

It has become a running gag to poke fun at Google and its track record of killing products people rely on. 

> Oh a new product from Google? 
> I wonder how fast they will kill it this time.

According to https://killedbygoogle.com/ it's no less than **285 products 🤯** that have known this fate. 

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



So clearly it's a structural problem that never got adressed and the backslash from their (ex-)customers is well deserved.

It's fun. But also not so fun.

## 😞 The same fate await all of us

We do a curious job and that fate of seeing a beloved project goes to the graveyard await all of us!

We do our best to avoid that. And sometimes we do great things. But often it doesn't matter.

## ☀️ Toxic positivity

> _"Just focus on the bright side and move on. You have learned new things and your next project will only be better ☀️☀️☀️"_.
> -- Joy from Inside Out

Sorry Joy, but sometimes it's your baby, and loosing your baby hurts.
Ever heard of the [stages of grief](https://en.wikipedia.org/wiki/Five_stages_of_grief)?

## 🗣 Sharing stories

Fortunately we are humans and we can create and share stories for fun and self-therapy.

Care to share yours?
Common mistakes in data analysis and how to avoid them
Tags: dataanalysis, avoidingmistakes, dataaccuracy
Published: 2023-03-30 22:27:18

Data analysis can be overwhelming, especially for beginners. Even experts can make mistakes that lead to incorrect insights and bad decisions. To avoid these mistakes, it's important to be aware of the common pitfalls in data analysis. In this blog post, we'll explore the top 5 blunders to avoid in data analysis from a beginner's perspective.

Firstly, relying on incomplete data can lead to biased conclusions that result in expensive mistakes. Make sure you have a complete and representative dataset to avoid this mistake.

Secondly, ignoring outliers can lead to incorrect conclusions. Identify and analyze outliers separately from the rest of the data to avoid this mistake.

Thirdly, overlooking data distribution can also lead to incorrect conclusions. Examine the distribution of the data before analysis to avoid this mistake.

Fourthly, failing to check for confounding variables is a common mistake that can lead to spurious conclusions. Examine the relationships between all variables in the dataset to avoid this mistake.

Lastly, overcomplicating the model can lead to overfitting, which occurs when the model fits the noise in the data rather than the signal. Use the simplest model appropriate for the data and assess the model's performance on new data to avoid this mistake.

By being aware of these common mistakes and taking steps to avoid them, you can ensure that your data analysis conclusions are accurate and reliable.

Read more [here](https://www.thedejijoseph.com/blog/post/data-analysis-mistakes-and-avoidance-tips?utm_source=dev.to&utm_medium=social&utm_campaign=crosspost).
Day 725 : Tomorrow
Tags: hiphop, code, coding, lifelongdev
Published: 2023-03-30 21:53:28

_liner notes_:
- Professional : Not a bad day. Had a couple of meetings in the early morning/afternoon. Then worked on my proof of concept application. Added another feature. I think I only have one more thing to add to get the minimal functionality working. I'll be using another set of Web Components I created to add the final feature. My only worry is that I'm not sure if the server SDK supports a thing I'll need. If not, I'll probably have to make some REST calls. We'll see. That's tomorrow me's problem. haha.

- Personal : Went through some tracks for the radio show. Then I got caught up working on my side project. I got the layout working with images pulled from an API and added some CSS animations. Next thing I know, it was time to go to bed.

![Path made of large gray stones through a field of tall green grass and purple flowers leading up to jagged snow covered mountains](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u4qs6642ar7f7b2dkzjt.jpg)

Thinking I'll pick up some projects off Bandcamp and put together tracks for the radio show and start looking up artists' social media accounts. For my side project, I want to get the View Transitions API integrated into the test app I've been playing with. I think I will need to get it working regularly and then add it in after. We'll see.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube 8lCi58pSiJ8 %}
Creare un componente di input con Formik e Amplify UI
Tags: react, amplify, formik, typescript
Published: 2023-03-30 21:21:45

_Cosa ho imparato oggi?_ [formik](https://formik.org/docs/overview) è un'utile libreria per reactjs per gestire form in varie modalità: attraverso **hooks** per sfruttare le sue potenzialità su form già esistenti oppure con dei **componenti di Formik** utili se stiamo costruendo dei form da zero.

Qualora però dobbiamo usare una libreria UI che dispone già di propri componenti di input, come ad esempio [Amplify UI](https://ui.docs.amplify.aws/?platform=react), oppure vogliamo implementare un nostro particolare input, si possono creare dei componenti wrapper per avere il meglio dei due mondi.
Useremo nel componente wrapper l'hook `useField` il quale restituendo la tupla di tre valori `field`, `meta` ed `helper` ci permette di 
- impostare le prop base di un **input** tramite field (name, value tra i più importanti)
- gestire stato ed **errori** come touched ed error
- ottenere delle funzioni di helper per forzare valori, stato ed errori in modo programmatico

`useField `si inizializza al minimo con una stringa che rappresenta il _name_ che daremo all'input, oppure passando un oggetto con proprietà come _value_ per preimpostare il valore del campo, handler per gestire eventi di _change_ e _blur_, _type_ dell'input e per alcuni tipi anche se da gestirlo come valore multiplo o checked (selezionato)

Vediamo un esempio di text input
```typescript

type AmplifyFormikInputProps = {
  label: string;
  id: string;
  name: string;
  type?: string;
  disabled?: boolean;
  value?: any;
  className?: string;
  min?: number;
  max?: number;
};

const AmplifyFormikTextInput = (props: AmplifyFormikInputProps) => {
  const [field, meta] = useField(props);

  return (
      <TextField hasError={meta.touched && !!meta.error} errorMessage={meta.error} {...props} {...field} />
  );
};

```
Come si può notare useremo l'oggetto _meta_ per visualizzare l'errore quando questo è presente e l'input è stato usato, e _props_ e _field_ per passare gli attributi necessari alla configurazione dell'input e alla sua stilizzazione.

Ora il componente è disponibile per essere utilizzato all'interno di un form gestito con Formik:

```typescript
<Formik onSubmit={handleSubmit} initialValues={currentUser} validate={handleValidation} validateOnChange={true}>
 {(formik) => {
   return (
    <Form>
     <AmplifyFormikTextInput label="First name" id="firstname" name="firstname" />
     <AmplifyFormikTextInput label="Last name" id="lastname" name="lastname" />
...

```
Online editor to create simple drawings
Published: 2023-03-30 21:14:38


This [online editor](https://clearline.com.ua/en/editor/) is a free tool that allows you to create measurement drawings of rooms, apartments, houses and other premises for interior design and construction work.

The editor provides the ability to save drawings to .dxf files. Thanks to this, you can easily import these files into AutoCAD, ArchiCAD, Revit and other professional software for further work and improvement of the project.

Use the editor for free and leave feedback to improve the program.
Introducing new blog on OAuth, OpenID Connect, and IAM Solutions
Tags: security, authentication, authorization
Published: 2023-03-31 10:07:44

---
title: Introducing new blog on OAuth, OpenID Connect, and IAM Solutions
description: I'm excited to announce the launch of a new blog named CerberAuth, where I'll be exploring the world of OAuth, OpenID Connect, and IAM solutions for modern security.
published: true
date: 2023-03-30 21:10:34 UTC
tags:
  - security
  - authentication
  - authorization
canonical_url: https://www.emmanuelgautier.com/blog/cerberauth-new-blog-post
---

I'm excited to announce the launch of a new blog named [CerberAuth](https://www.cerberauth.com/), where I'll be exploring the world of OAuth, OpenID Connect, and IAM solutions for modern security. As a developer and security enthusiast, I've spent countless hours researching and experimenting with various IAM and OpenID Connect providers. With this blog, I hope to share some knowledge and experience with others who are interested in learning more about these topics.

In addition to sharing some thoughts and insights, I'll also be developing tools to make it easier for developers to implement and work with these technologies. I'm particularly excited about a new tool I've been working on that automatically generates secure OAuth2 rules from an OpenAPI contract (available on [Github](https://github.com/cerberauth/openapi-oathkeeper/)).

Whether you're a seasoned security expert or just getting started with these technologies, I hope you'll find the [CerberAuth blog](https://www.cerberauth.com/) informative and helpful. Stay tuned for more posts and updates.
I have a question .
Tags: react, help, javascript, webdev
Published: 2023-03-17 14:35:28

how do i change or remove state value when i click to a link or navigation link and it should render that link page in  react.
if anyone know please tell me..

edit :-

so here is my problem which im asking for help

assume i have basic react app code here like some routes.. 

```
//app.jsx
import from "./components/MainHomePage"
import from "./components/About"
import from "./components/Contact"

import {
  createBrowserRouter,
  createRoutesFromElements,
  Route,
  RouterProvider,
} from "react-router-dom";

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route path="/" element={<RootLayout />}>
      <Route index element={<Navbar />} />
      <Route index element={<MainHomePage />} />
      <Route path="about" element={<About />} />
      <Route path="contact" element={<Contact />} />
      <Route path="blog" element={<Blog />} />
    </Route>
  )
);

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

```

assume i have some content written in each route page
now look into my navbar component

```
//Navbar.jsx
import {useState} from "react"

const Navbar = () => {

const [text, setText] = useState('')

const handleChange = (e) => {
       setText(e.target.value)
}

const handleSubmit = (e) => {
       e.preventDefault() //prevent default page refresh behavior
       setText('') //to empty input box
}
return (
    <nav>
       <ul className="navbar-links">
         <li> 
            <Link to={"/"}> Home </Link>
         </li>
         <li> 
            <Link to={"/contact"}> Contact </Link>
         </li>
         <li> 
            <Link to={"/about"}> About </Link>
         </li>
         <li> 
            <Link to={"/blog"}> Blog </Link>
         </li>
       </ul>

       <div className="navbar-search-box">
         <form onSubmit={handleSubmit}>
             <input type="text" value={text} onChange={handleChange}>
             <button type="submit"> Search </button> 
         </form>
       </div>
    </nav>
)
}
```

here is my root layout component

```
//RootLayout.jsx

import Navbar from "./component/Navbar"
import {Outlet} from "react-router-dom"

const RootLayout = () => {
    return(
     <>
       <Navbar />
       <Outlet />
     </>
)
}
```
so now i want to do when i type in the search  input box and when i click on search button it will set state to that text and render result page or any particular result but when click to any other navlink from navbar my result page whatever we searched it is not changing the state to empty and my new page whichever we clicked from navbar is not rendering becuase of state, it is a bug so how do i solve this after searching and when i want to navigate to other navbar pages i want to remove result page and state should be empty and render new route page..

i hope i explained ...
SwiftUI - Open Deeplink url from your terminal
Tags: xcode, deeplink, ios
Published: 2023-03-30 21:02:26

[Original Post](https://simran.dev/2022/12/17/swiftui-open-deeplink-url-from-terminal/)

For the longest time when I had to test deeplinks, I would send myself an email with the link and open gmail in the iPhone simulator. But thanks for <a href="https://mastodon.social/@StewartLynch@iosdev.space">Stewart Lynch</a> and his Navigation stack video I learnt a way to open deeplink urls from the terminal in my simulator. 

```
xcrun simctl openurl booted <URL Scheme>://PathComponent1/PathComponent2
```

Your `URL Scheme` is defined under `Targets > Info > URL Types` and `PathComponent` can be anything that we want to read in our app to define where we want to go or what data is being sent from the Deep Link
Removing specific fields from a Mongoose returned object
Tags: mongodb, express
Published: 2023-03-30 20:59:42

[Original Post Link...](https://simran.dev/2023/03/30/removing-fields-from-mongoose-response/)


Very often we have the need to only read certain fields from the database. We might just need `username` from a collection that has a bunch of other fields related to a `User` as well or read all the fields except 1 or 2, like we would never want to return `password` to the client when we are sending the `User` object even when it is ecrypted. For such scenerios `Mongoose` gives few different ways to include or exclude fields from the response we read from a `MongoDB` collection. 

### Including a certain field
If we want to include only 1 single field from a collection in the response we can use `.include("<field-name>")` after the mongoose query.

```javascript
await User.find({}).select("username");
```
The above example will only return `username` and `_id` from the User collection. 


### Excluding a certain field
If we want to exclude only 1 single field from a collection in the response we can use `.include("-<field-name>")` after the mongoose query.

```javascript
await User.find({}).select("-username");
```
The above example will exclude `username` from the User collection and return all other fields. 

### Always remove a certain field when Mongoose Schema returns a response
There are situations when we never want to return a field in the results from the `Mongoose` query. In such situations `Mongoose` itself provides us a way to modify its `JSON` object at the schema level and we can modify it the way we want.

```javascript
userSchema.methods.toJSON = function () {
    const user = this;
    const userObject = user.toObject();

    delete userObject.password;

    return userObject;
}
```
Come join me in being judgy about my first project! Welcome to Simpletarot!
Tags: firstpost, beginners, python
Published: 2023-03-30 20:59:16

It means a lot that you would take the time to check out my little python project!

I am in the beginning stages of my coding competency, and I have been tasked with creating a python-based terminal game. I wanted to keep it simple to make sure I could complete the task, but also leave it open enough that I could iterate on it and introduce more user options and more complex code.

For my project I have created a simple tarot reader. This tarot reader contains two tarot decks, each comprised of _only_ the major arcana cards to keep things manageable. The user is given the option to choose between a deck that _does_ consider card orientation and one that doesn't. After choosing the type of deck, the user is then asked to choose either a single card draw (think magic 8-ball), or a three card spread, representing past, present, and future, as well as supplemental information to aid in interpretation.

I scraped a couple different tarot sites to gather the data, did a bit of manual cleaning-up of the data in google tables, and exported each deck to a csv file, both of which are included in the repository. In the script itself I turned the csv files into dictionaries in order to more easily present the data when a card (key) was drawn. To ensure no duplicates might be drawn, I wrote this program to create the deck dictionaries upon initialization, and then modify the dictionaries to remove key/value sets as cards were 'drawn.' This allowed me to keep things incredibly simple and functional, as my goal is to have a fully working product (and a learning experience).

Please feel free to share this, it is pure flattery that anyone might enjoy my work. Please also feel free to offer more elegant solutions as notes, but keep in mind that I am new to this. I may not yet be able to wrap my head around the more esoteric structures.

https://github.com/Oku-Jo/simpletarot

- Also don't judge my readme too harshly. I intend to make it into an actual readme.


- Special thanks to Nova for helping/teaching me the basics of data scraping!