teleren/devto huggingface dataset:
how to make the buttton "delete", to eliminate just the selected items?
Published: 2022-08-03 09:25:57


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/odohaiaswnz7cvmyb90u.jpg)
`import { Button, Stack } from "react-bootstrap"
import { useShoppingCart } from "../context/ShoppingCartContext"
import storeItems from "../data/items.json"
import { formatCurrency } from "../utilities/formatCurrency"

type SelectedItemsProps = {
  id: number
  quantity: number
}

export function SelectedItems({ id, quantity }: SelectedItemsProps) {
  const { removeFromCart } = useShoppingCart()

  const item = storeItems.find(i => i.id === id)
  if (item == null) return null

  
  return (
    <Stack direction="horizontal" gap={2} className="d-flex align-items-center">
       
        <input
          type="checkbox"
        />

      <img src={item.imgUrl}
        style={{ width: "125px", height: "75px", objectFit: "cover" }}
      />
      <div className="me-auto">
        <div>
          {item.name}{" "}
          {quantity > 1 && (
            <span className="text-muted" style={{ fontSize: ".65rem"}}>
             x{quantity}
             </span>
          )}
        </div>
        <div className="text-muted" style={{ fontSize: ".75rem" }}>
          {formatCurrency(item.price)}
        </div>
      </div>
      <div> {formatCurrency(item.price * quantity)}</div>
      <Button
        variant="outline-danger"
        size="sm"
        onClick={() => removeFromCart(item.id)}
      >
        &times;
      </Button>
        

    </Stack>
  )
}`
How to enable blocked webcam after installation of k7totalsecurity in windows?
Tags: k7totalsecurity, antivirus, windows, camera
Published: 2022-08-03 09:15:06


In this blog we will be discussing on how to enable or disable webcam option in **K7TotalSecurity** anti virus.

To enable **webcam**, open **K7TotalSecurity** and click on the **details** option as shown in the below image circled in red colour.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pofuivblzbdr8y1z6lqw.png)

**PROTECTION** page will be opened in **thek7totalsecurity** application.
Now scroll down you can find Webcam **Protection option** as shown in below image.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8uh95ykmtf39c5kf6917.png)
Now **toggle** switch to off on webcam Protection option.
React Sound sampler - need help
Tags: help, javascript, beginners, react
Published: 2022-08-03 09:12:00

Hi I've just build a Simple sound sampler in React, and it's almost working ;p 

[https://github.com/michalzareba0001/react-sampler](https://github.com/michalzareba0001/react-sampler
)

**But it's slow** - I just started to learn React and I was hoping that it will work much faster. Sound latency is around 1 sec.
**And I can't play few sounds at the same time** - I mean I can try but then latency is even bigger and it's freezes.
Console log: 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ug5lyw9gsrop0mvn90hu.png)

Anybody have some ideas, how to fix it?
How to Run an Angular/React/Vue Build Locally
Tags: angular, react, build, deploy
Published: 2022-08-03 08:54:00

In this article, I will share how to test production build locally with node.js.

- Create a file in main directory and provide any name along with **.js** extension (**Example:run-build.js**)
- Copy below code and paste it in your file.
- Provide build path along with directory name
- Run this command in command prompt `node run-build.js`
- Now your app is running in 9000 port.

```js
const express = require('express');
const path = require('path');
const app = express();

/**
 * Instead of build provide your build directory.
 */
app.use(express.static(path.join(__dirname, 'build')));

app.get('/*', function (req, res) {
    res.sendFile(path.join(__dirname, 'build ', 'index.html'));
});

var server = app.listen(9000, () => {
    var port = server.address().port;
    console.log('App listening at http://localhost:' + port);
    require('child_process').exec(`start http://localhost:${server.address().port}`);
});
```
Return in Functions!🔥
Tags: javascript, beginners, gamedev, programming
Published: 2022-08-03 08:48:55

Hello! Avid Programmer here, ever since my introduction to programming I have always wanted to figure out how I would go about figuring if a player was in a certain state and give data for that. I then experimented with a function that checked if the player’s health was above 0 and returned “Alive” and if not then it would return “Dead”. I think this would be useful in player GUI or Text Adventures and I am glad I was able to get this working and wanted to share this with you!

![Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uxbpj1n1vyurw1w6yzxo.png)

(Will)
Wednesday Links - Edition 2022-08-03
Tags: java, jvm, junit, spring
Published: 2022-08-03 08:47:02

Consolidating logging in your Java applications (5 min)🪗
https://filip-prochazka.com/blog/consolidating-logging-in-your-java-applications

Function references (10 min)🫵
https://kt.academy/article/fk-function-references

Comparing Approaches to Durability in Low Latency Messaging Queues (7 min)🧼
https://blog.vanillajava.blog/2022/08/comparing-approaches-to-durability-in.html

Auto-Registering JUnit 5 extensions (1 min)🕷️
https://maciejwalkowiak.com/blog/auto-registering-junit-5-extensions/

Loading classpath resources to String with a custom JUnit extension (3 min)🚚
https://maciejwalkowiak.com/blog/resource-as-string-junit-extension/

A Deep Dive Into Spring Boot Configuration (6 min)🤿
https://piotrminkowski.com/2022/08/02/a-deep-dive-into-spring-boot-configuration

GraalVM Enterprise 22.2—Lower memory, smaller downloads, simpler library usage (4 min)🚀
https://blogs.oracle.com/java/post/graalvm-enterprise-222

Deserialization exploits in Java: why should I care? (46 min)💥
https://www.youtube.com/watch?v=zHZv2L9hDis
FlutterViz for Flutter Developers 😮
Tags: flutter, dart, programming, beginners
Published: 2022-08-03 08:45:28

Free Drag-n-Drop UI Builder for Flutter Apps.
.
.
.
**[Full Preview:](https://www.instagram.com/p/CgwkLoIIF2v/)**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nybj98846cgpxezas1h2.gif)

**Flutterviz** is an excellent tool for beginners and experienced Flutter developers. This Flutter UI Builder is easy to use and saves hours of development time, getting your app to market quickly.

Design beautiful Mobile Apps using Flutter UI Design Tool in Real-time, Export code, and use it in your project.
.
.
.
## ❤️ Easy Drag & Drop Editor:
Kid-friendly Flutter UI Builder to build app screens in no time without coding.

------------------------------ 
                  
## ❤️ 50+ Widgets:
Get all the standard Flutter widgets you’ll need to kick start your project.

------------------------------ 

## ❤️ Customize Anything:
Visually customize your app’s style, colors, spacing, text and more using this Flutter drag and drop UI builder.

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

------------------------------ 

💥 _DEVELOPER FRIENDLY_ 💥

## Design your Next Project in Minutes, not Hours:

Stop coding and start designing Flutter app screens in the most intuitive way using this No code UI builder.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0phlpordrnz67uahs04n.PNG)

------------------------------ 

💥 _PRESET STARTER SCREEN_ 💥

Pre-Made Design Templates
Get multiple fully built screen templates right out of the box for most of the standard screens used in modern-day apps.

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

------------------------------ 

💥 _CLEAN CODE_ 💥

A Delightful Experience for Beginners and Experts
We believe in building for everyone. This developer-friendly Flutter UI design tool is fun to use and speeds screen designing by 10X.


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

------------------------------ 

💥 _START NOW_ 💥

## Build beautiful UI for your Next Project FASTER:
Join FlutterViz and get access to the easiest Flutter UI design tool with ready-use-widget widgets and build your next cool product for FREE.

**[FlutterViz](https://bit.ly/3PfbcGd)**
🗣️ A cartography, management & datascience storytelling
Tags: neo4j, datascience, management, showdev
Published: 2022-08-03 08:45:00

## 👉 About

On July 7, 2022 I had the opportunity to perform a story telling about how we used Neo4J to answer some highly concrete and sensitive questions on Information System cartography.

In this 36' minutes video you'll discover :

- How we defined our problem
- How we did modelize it (and how Dataviz helped)
- How we started to prototype on it
- How fast we got ROI with this solution
- How we developed our Teams around this now solution
- The impact on our culture (especially how people build the system together)
- How we impacted culture around us (putting the solution to scale)
- What we intend to build now
- The high level questions we now want to answer

## 🍿 Showtime

{% youtube EtM2PZYT1cY %}

## 🙏 Acknowledgements

I'm very thankful for my amazing team at [`opt-nc`](https://dev.to/optnc) : 

- [Pipiena](https://dev.to/pluaki)
- [Daniel](https://dev.to/dougniel)
- [Michèle](https://dev.to/mbarre)

Also, I'm thankful to [Ida](https://www.linkedin.com/in/ida-carapelle-goossens-842829b/) who gave me the opportunity to share my passion with others, and [Bas](https://www.linkedin.com/in/johan-sebastiaan-bas-berghoef-2607123/) who shared with us his great conference room at [Pacific Community-SPC](https://www.linkedin.com/company/the-pacific-community/).

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h5r1v7wjf2uljz770e9l.png)
 
## ❔ What's next ?

Now that the foundations are set, we'll put content on a regular basis showing which tools we are using, next challenges and results... so stay tuned 😊
{web3Videos}.map(()=> {} )
Tags: programming, webdev, web3, blockchain
Published: 2022-08-03 08:39:19

In today's story, a single thread to introduce yourself to web3 world. 

**Introduction to metamask** 
The most widely used wallet in all web3 applications. It's like a google login in the web3 application. 

[Watch and learn](https://t.co/JBLGwdqo5h)

**Introduction to moralis** 
Moralis is the firebase for web3, will build the blockchain apps backend for you in less than a minute so you only have to take care of logics, frontend and your idea.

[Click to learn more](https://www.youtube.com/watch?v=VScVYy9ew-s)

**Introduction to hardhat**
Smart contract development framework. 

[Develop fast and secure smart contracts](https://t.co/2qnb8IaWtz)

**Top wallets for your web application.** 
Wallets are important as people might not enter the application if proper options are not provided. wallet contains the digital currency so people will be reluctant to show some trust. 

[Watch to learn](https://t.co/4UVptV7ptr)

**Conclusion**
Until next time, have a good day.

Keep developing!!

Our website [iHateReading](www.ihatereading.in) || [Youtube](https://www.youtube.com/channel/UC6I-Tz6QwYbJpoIK7l0NtXA) || [Twitter](https://twitter.com/treyvijay)
[9/40 things about data]It’s better to master just one database than be bad at two
Tags: database, data
Published: 2022-08-03 08:25:07

It’s tempting to start using another database when you run into a performance problem or the lack of a feature.

There are always ways to make it perform better or solve the problem with a workaround.

You’d be surprised how good your database can perform when you understand the internals. It’s not that bad to do that thing in two steps instead of one.

If you go after the shiny new thing just because you find a small roadblock, you’ll never understand the actual limits of your database and you may never know when there is a real reason to change.
Disable a direct push to GitHub main branch
Tags: github
Published: 2022-08-03 08:21:00

On a development team, you never want to push directly to the main branch. Instead, you want to require changes to be made through pull requests so they can be properly reviewed by other developers.
Some developers, including myself, occasionally forget to stuff their changes into a branch so I like to have an automated check to prevent this mistake. Here are two methods to block direct pushes to the GitHub main branch.

## Pre-commit hook

The pre-commit framework includes a `no-commit-to-branch` hook which blocks direct commits to specific branches. By default, it blocks the `master` and `main` branches.
You can implement this by adding the following `.pre-commit-config.yaml` file to the repository root:

```
repos:
  - repo: https://github.com/pre-commit/pre-commit-hooks
    rev: v4.1.0
    hooks:
      - id: no-commit-to-branch
```


Then run `pre-commit install`. Now commits to `main` will result in an error:
```
$ git commit -m "Update again"
don't commit to branch...................................................Failed
- hook id: no-commit-to-branch
- exit code: 1
```

Note, you can work around this check by uninstalling the pre-commit hook so it’s not foolproof.

## Branch protection rule

GitHub has branch protection rules which allow you to enforce workflows for a one or more branches.
To create a branch protection rule, navigate to your repository’s settings. Click Branches and then Add rule under the “Branch protection rules” section.

Enter “main” under **Branch name pattern**. Then check **Require a pull request before merging**.
You’ll notice some additional features pop up. I generally check Require approvals so developers can’t sneak a change through without a proper sign-off.

Lastly, you may want to check **Include administrators** so the rule applies to repository admins. Keep in mind, however, that some git tools, such as Flux, need this access or they won’t work. So be cognizant of the tools you’re using and the privileges they need.

When you’re done, your rule should look like this:
![image](https://www.pixiebrix.com/blog/content/images/2022/07/image.png)

Now direct pushes to `main` will result in an error:

```
$ git push
...
remote: error: GH006: Protected branch update failed for refs/heads/main.
remote: error: Changes must be made through a pull request.
To github.com:johnnymetz/my-repo.git
 ! [remote rejected] main -> main (protected branch hook declined)
error: failed to push some refs to 'github.com:johnnymetz/my-repo.git'
```

I prefer the second method because it’s foolproof and includes additional features.
Django: Understanding the concept of a Django app
Tags: django, programming, webdev
Published: 2022-08-03 08:15:51

**Django project**
A Django project is composed of a collection of different settings, configurations, and apps. We can have one or multiple apps in a single project. 

---
**Django app**
An app or application is used to serve a unique purpose. Each app that is created in Django consists of URLs, views, models, and templates. For simpler projects, we may only need to create one app... Which may be applicable to a blog.  

_The following illustration depicts the concept of Django apps:_

---

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

- **Black** represents our Django project.

- **Green** represents the apps that we have created ourselves - "internal apps".

- **Orange** represents the apps that have been created by others. These apps have been installed through PIP (**grey**). Otherwise known as "external apps".

---

**Let's say that we want to create a simple blog website then...**

We would only really need to create one Django app ourselves, that houses the functionalities that we need to develop our blog.


As a web application gets more complex, there will be a further need to create more Django apps, but for a simple web application, a single Django app is more than sufficient.


_The following illustration shows a single app (perfect for a blog site):_


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


**A final note…**
For those that are interested in learning Django from scratch, feel free to check out my latest course:

[Python Django: Ultimate Beginners Course - 2022](https://www.udemy.com/course/python-django-ultimate-beginners-course-2022/?referralCode=5061D095C530D13CFA6C)
Django: How to implement Python Decouple
Tags: django, programming, webdev
Published: 2022-08-03 08:12:40

## Why do we need Python Decouple?
As we continue to build our Django web application, we will eventually come to a realization that there is a lot of sensitive information that is stored in our settings.py file. Upon realizing this, you will think, how can I keep everything separate and safe.

**Enter - python-decouple.**

---

**Step 1:**
To install python-decouple in your application, open up your terminal and type in the following command:

```
pip install python-decouple
```

---

**Step 2:**
Create a .env file in your repository’s root directory.

---

**Step 3:**
As a test, we will store some important data, such as debug and our secret key. So, simply copy + paste your debug and secret key from settings.py as-is into your .env file.

```
DEBUG=False
SECRET_KEY='my_secret_key'
```

---

**Step 4:**
If you happen to be using Git be sure to .gitignore your .env file for security purposes.


**Step 5:**
Next, you need to import the decouple library:

```
# settings.py

from decouple import config
```

**Step 6:**
Now we want to get our parameters.
Decouple will always return our data as a string. To solve this problem, we need to cast it to a bool if we are expecting a Boolean or to an int if we are expecting an integer. Go back to your settings.py and modify your existing debug and secret key values with the following:

```
# settings.py

DEBUG = config('DEBUG', cast=bool)SECRET_KEY = config('SECRET_KEY')
```

**A final note…**
For those that are interested in learning Django from scratch, feel free to check out my latest course:

[Python Django: Ultimate Beginners Course - 2022](https://www.udemy.com/course/python-django-ultimate-beginners-course-2022/?referralCode=5061D095C530D13CFA6C)
Let’s play OpenZeppelin Ethernaut CTF — learning Solidity security while playing!
Tags: ethereum, blockchain, smartcontract, web3
Published: 2022-08-03 08:10:27

[The Ethernaut](https://ethernaut.openzeppelin.com/) is a Web3/Solidity based war game created by [OpenZeppelin](https://openzeppelin.com/).

Each level is a smart contract that needs to be ‘hacked’. The game acts both as a tool for those interested in learning Ethereum, and as a way to catalog historical hacks in levels. Levels can be infinite, and the game does not require to be played in any particular order.

## How to play

If you want to play it by your own, just go to the [Ethernaut](https://ethernaut.openzeppelin.com/) website and start solving the challenges.

Otherwise, you could clone my own [personal repository](https://github.com/StErMi/foundry-ethernaut), remove the solutions in the `test` folder and build your own! I have explained in the README file how to do it, and it should be pretty easy.

## Solutions to each puzzle

Each day I will publish the solution to a new challenge, so stay tuned.

- [The Ethernaut Challenge #1 Solution — Fallback](https://stermi.xyz/blog/ethernaut-challenge-1-solution-fallback)
- [The Ethernaut Challenge #2 Solution — Fallout](https://stermi.xyz/blog/ethernaut-challenge-2-solution-fallout)
- [The Ethernaut Challenge #3 Solution — Coin Flip](https://stermi.xyz/blog/ethernaut-challenge-3-solution-coin-flip)
- [The Ethernaut Challenge #4 Solution — Telephone](https://stermi.xyz/blog/ethernaut-challenge-4-solution-telephone)
- [The Ethernaut Challenge #5 Solution — Token](https://stermi.xyz/blog/ethernaut-challenge-5-solution-token)
- [The Ethernaut Challenge #6 Solution — Delegation](https://stermi.xyz/blog/ethernaut-challenge-6-solution-delegation)
- [The Ethernaut Challenge #7 Solution — Force](https://stermi.xyz/blog/ethernaut-challenge-7-solution-force)
- [The Ethernaut Challenge #8 Solution — Vault](https://stermi.xyz/blog/ethernaut-challenge-8-solution-vault)
- [The Ethernaut Challenge #9 Solution — King](https://stermi.xyz/blog/ethernaut-challenge-9-solution-king)
- [The Ethernaut Challenge #10 Solution — Re-entrancy](https://stermi.xyz/blog/ethernaut-challenge-10-solution-reentrancy)
- [The Ethernaut Challenge #11 Solution — Elevator](https://stermi.xyz/blog/ethernaut-challenge-11-solution-elevator)
- [The Ethernaut Challenge #12 Solution — Privacy](https://stermi.xyz/blog/ethernaut-challenge-12-solution-privacy)
- [The Ethernaut Challenge #13 Solution — Gatekeeper One](https://stermi.xyz/blog/ethernaut-challenge-13-solution-gatekeeper-one)
- [The Ethernaut Challenge #14 Solution — Gatekeeper Two](https://stermi.xyz/blog/ethernaut-challenge-14-solution-gatekeeper-two)
- [The Ethernaut Challenge #15 Solution — Naught Coin](https://stermi.xyz/blog/ethernaut-challenge-15-solution-naught-coin)
- [The Ethernaut Challenge #16 Solution — Preservation](https://stermi.xyz/blog/ethernaut-challenge-16-solution-preservation)
- More to come…
Super Mario
Tags: javascript, programming, html, css
Published: 2022-08-03 07:37:24

Who doesn't like the Super Mario game here? It's one of my favorites that I loved playing during my childhood. To cherish the moment, I tried building the game using plain HTML, Javascript, and CSS. 

![Game](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gaow24ryeyyoqe4c5c82.png)

**Spoiler Alert** It's very basic one.<span> &#128513;</span>   

I have embedded the sound effects to retain the feel too. And [hosted it on Github](https://pages.github.com/).


Here is the game
{% embed https://pradeepradyumna.github.io/SuperMario/ %} 

My highest score was 17. What is yours? Do let me know in the comments.
THE BEST TWO WAYS TO SECURED YOUR WEB APP
Published: 2022-08-03 07:37:00



**[THE BEST TWO WAYS TO SECURED YOUR WEB APP:](linkedin.com/in/arowolo-ebine-97105483)**


**Validate User Inputs:**

_Accordingly, Injection-based attacks can come in so many ways; XSS, SQL injections, host header injection, and OS command injection are a few examples of these attacks._

Therefore, Injection-based attacks have over the years made their way into the OWASP (Open Web Application Security Project) and SANS Top 25 CWE (Common Weakness Enumeration) many times.

So, in the web development, we need to validate all inputs before the application processes the data to mitigate injection-based attacks.

E.g., the phone number field, Password field, Name field, they must only accept an acceptable format with specific numeric and special characters.

---

**Managing Application Secrets:**
This is another crucial way to securitized the web app secret credentials by managing sensitive secrets such as database connection strings, API keys, and credentials is mandatory in any application.
Therefore, we should stop keeping these secrets in the codebase at all costs and follow standard rules and methods to store them.

for example, You can use environment variables within the operating system to store this sensitive information, and we can use Node.js to call these environment variables.

However, there are instances where the application would require more than one variable instantiated. At this juncture, the only best way to manage secrets is to use the `dotenv` package.

so, you can easily install it using npm or Yarn as follows:
#### NPM
> npm install dotenv

#### Yarn
> yarn add dotenv

Then, create a `.env` file at the project root and define all the secrets in that file.

```sql
NODE_ENV= develpment,
MONGODB_URL = "mongodb_url:uerbsf@kgeyfdop_jhf"
PORT = 3000
USERNAME=secret123
PASSWORD=secret123@
```

Finally, you can require and use these secrets in the application like below:

```javascript
require('dotenv').config();

mongoose.connect({
host: process.env.PORT,
username: process.env.MONGODB_URL,
password: process.env.PASSWORD
})
```


Most importantly, make sure to include .env files in the .gitignore file to prevent them from being pushed to the Git repository.