teleren/devto huggingface dataset:
Metal Detector Using 555 Timer with Proteus Simulation
Tags: tutorial, circuit, beginners, electronics
Published: 2021-08-12 12:47:25

Hello Fellows! During this project, we've got designed a straightforward DIY metal Detector Circuit victimization terribly simple parts that may be utilized in our homes and gardens. Let’s begin our tutorial. 
##   Introduction: 
The first industrial sensor was appear within the year 1960 and was utilized for mineral prospecting and other industrial applications. A sensor is Associate in nursing device that features Associate in nursing generator that produces AC that passes through a coil manufacturing Associate in nursing alternating magnetic flux. If a locality of the metal is on the subject of the coil, eddy current are going to be elicited within the metal and this produces a magnetic flux of its own. If another coil is employed to live the magnetic flux, the amendment within the magnetic flux, the amendment within the magnetic flux thanks to the metallic object are often detected. The metal observers are accustomed detect the weapons like guns, knives within the airports, and conjointly utilized in the development trade to observe steel reinforcing bars in wires, concrete, pipes buried in floors and walls. 
 
##  Components Required: 
555 Timers
[Capacitor](https://projectiot123.com/2020/04/01/what-is-a-capacitor/)
[Resistor](https://projectiot123.com/2019/10/29/what-is-a-resistor/)
Inductor
Battery
Speaker
[Relay](https://projectiot123.com/2020/03/28/relay-module-simulation-in-proteus/)
 
##   Circuit connection in Proteus : 
The 555 Timers has total 8 pins. Its 2 pin is attached with capacitor. Pin 1 is connect with GND. Pin 8 is connect with battery 12v. While Pin 6 is connect with capacitor, resistor and inductor. Pin 3 are connected with capacitor and also with speaker.  
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f9wmy0fai43a5u1tdse0.PNG)
##   Working of circuit Simulation: 
The sensor operating is, once the magnetism field is transmitted from the search coil into the world. Metals within the magnetism field can become strong & resend Associate in nursing magnetism of their own. The sensor includes of a probe coil that receives the retransmitted field & alarms the user by generating a response of the metal. Mine lab metal detectors are accomplished by discriminating between dissimilar sorts of targets and might be fastened to ignore unwanted metal objects. Applications:
• This straightforward sensor are often accustomed establish metals like iron, gold, silver etc. 
• Since it's a straightforward project, we will use this in our home to scan for nails, metal scraps etc. that don't seem to be simply spot able by eye. 
Hope this text provides you provided you with temporary data concerning the sensor circuits and its principle of operation.
2 Uses of concat method when working with arrays in JavaScript
Tags: javascript, webdev, programming
Published: 2021-08-12 12:33:02

Let's see two ways in which concat() method can be used while working with arrays in JavaScript. 

### 1) Merging two or more arrays

Let's now see how we can use the concat method to merge two given arrays, array 1 and array 2

```
const array1 = [1,2,3,4];
const array2 = [5,6,7];
// merge array 1 into array 2 and store it in a new variable 
const newMergedArray = [].concat(array1, array2);
console.log(newMergedArray); // [1, 2, 3, 4, 5, 6, 7]
console.log(array1); // [1, 2, 3, 4]
console.log(array2); // [5,6,7]
``` 

> const newMergedArray = [].concat(array1, array2);

In the above line [] creates a new array and the concat methods combine both array1, array2. This can also accept more than 2 arrays for concatenation by just adding them one next to the other

> const newMergedArray = [].concat(array1, array2, array 3, arrayN);

Another alternative for merging two arrays is below

> const newMergedArray = array1.concat(array2, array 3, arrayN);


### 2) Flatten single level nested arrays

Let's assume there is a nested array as below, and we would want to flatten it in such a way that the output is [1,2,3,4,5,6,7,8], this can be achieved by using concat() method with the help of spread operator.


```
const array1 = [1,2,[3,4],[5,6], 7, 8];
const flattened = [].concat(...array1);
console.log(flattened); // [1,2,3,4,5,6,7,8]
``` 
P.S. The above code flattens just a single-level nested array.


### References

-  [concat()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat)  
-  [spread operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) 


### Check out my other blog posts

-  [Getting Started with JavaScript - Ultimate Free Resources](https://dev.to/kritikapattalam/getting-started-with-javascript-ultimate-free-resources-59p6) 
-  [10 Things you can do in Chrome Developer Tools ](https://dev.to/kritikapattalam/10-things-you-can-do-in-chrome-developer-tools-333g) 
-  [2 Simple ways you can truncate text using CSS](https://dev.to/kritikapattalam/2-simple-ways-you-can-truncate-text-using-css-1n18) 

Follow me on  [Twitter](https://twitter.com/KritikaPattalam)  | [LinkedIn](https://www.linkedin.com/in/kritika-p-296739155/) for more web development tips.
Building a simple Markdown with react and vanilla javascript for beginner
Published: 2021-08-12 12:28:13

### Table Of Contents
1.[Javascript Part](#javascript)
2.[React Part](#React Part)


#### Demo of what we are going to build

[![](https://scotch-res.cloudinary.com/video/upload/vs_50,dl_200,e_loop/v1592352061/02_-_markdown_editor_sqfqzz.gif)](https://learn.chrisoncode.io/courses/10-react-apps-series-a/348621-02-markdown-editor/992079-00-markdown-editor-preview)

###1. Javascript Part <a name="javascript"></a>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5y2yotxp4fr0th40jdvb.jpg)
This is build with vanilla javascript, HTML and some style to look better the same styling was use for react app also.

{% codepen https://codepen.io/gobinath24/pen/XWRGWWW %}

---

###2. React Part <a name="react"></a>

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9g20xmdctcwd96tk685a.png)

In React we are using a third party api for using [markdown](https://www.npmjs.com/package/react-markdown)

> you'll learn about useState hooks which is use as a trigger to change the value

The command to be fellow to build this application are
- Select a folder where you want to keep this project.
```npx create-react-app markdown```
```npm i react-markdown```

This is `App.js` part which trigger our value to preview.

```jsx
import React, { useState } from 'react';
import ReactMarkdown from 'react-markdown';
import './App.css';

export default function App() {
  const [markdown, setMarkdown] = useState('# suppppp');

  function handleChange(e) {
    setMarkdown(e.target.value);
  }

  return (
    <div className="app">
      <textarea onChange={handleChange} value={markdown} />

      <ReactMarkdown className="preview" children={markdown} />
    </div>
  );
}

```
---

### Congrats for reading the blog post and thank you for visiting my site
Arduino Based Fingerprint in Proteus
Tags: android, programming, tutorial, arduino
Published: 2021-08-12 12:27:34

During this project, we tend to square measure planning to style a Fingerprint detector based mostly biometric group action System mistreatment Arduino. During this project, we tend to use the fingerprint Module and Arduino to require and keep group action information and records. Fascinating right! Let’s begin our project in Proteus. 
##    Introduction: 
This is a fingerprint detector device with UART interface for straight link to microcontroller UART or to computer by adapter. The user will store the fingerprint information within the module and might put together it for distinctive the person. The Fingerprint device may be straight communicated with any microcontroller also as Arduino. This optical biometric fingerprint reader with nice options and might be embedded into a spread of finish merchandise like access system, group action system, safety lockbox, door protection system. 

##    Components Required:
[Arduino UNO](https://projectiot123.com/2019/04/07/arduino-uno-for-beginners/)
LCD
Fingerprint Sensor
Push button
 
##   Circuit connection with Proteus Simulation
The Arduino pin 4, 5, 6 and 7 are connected with LCD pins 11, 12, 13 and 14 respectively.  While Arduino pin 0 to 2 are connected with Fingerprint sensor pin 1 to 3. 4 Push buttons are connected with Arduino pin 8 to 11. 5v of Arduino is attaching with VCC pin of fingerprint sensor with Proteus Simulation. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cw4nljlh9p3gjrku0lvl.PNG)

##  Working: 
First, the user is needed to register the several fingerprints into the system with the assistance of the provided push buttons. Press the ‘Enroll’ key so enter the ID for the fingerprint into the digital display which can be saved into memory. Next, a user can enter his/her specific ID by mistreatment the ‘Up/Down/ push buttons. When choosing the ID press the ‘Delete/Okay’ button. The digital display can then provoke the user to put his finger over the fingerprint module from wherever the module can take the finger image. The digital display can raise the user to get rid of his finger so place it once more. The module can then store the model of that image within the module’s memory. The user is currently registered and might use methodology} to feed group action through this method. If any keep user ID is to be deleted then merely move to user ID and press ‘Delete/Okay’ key. The digital display can rise to pick out the ID you would like to delete. When we choose ID press ‘Delete/Okay’ and therefore the ID are deleted. A message from the digital display can inform you that the ID is removed.
##  Applications: 
•	Used in industries
•	Used in instructional establishments 
•	Used in ATM for authentication
•	Used in Access dominant 
For any quires leave your message in below section.
Testing STOMP websocket with Postman
Tags: stomp, postman, testing
Published: 2021-08-12 12:23:21

With Postman v8 you can test Websockets - great! But..

When testing [STOMP](https://stomp.github.io/) servers you will encounter a problem: 

> The body is then followed by the NULL octet.

See https://stomp.github.io/stomp-specification-1.2.html#STOMP_Frames

The only way (on windows) to get the NULL octet into the frame is by using the "binary/Base64" encoding (see screenshot below).

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

To easily convert the frame you can use [Notepad++](https://notepad-plus-plus.org/):
1. Activate "Character Panel"
2. Add "NULL" at the end of the frame (after all headers and body) - make sure to actually click on "NULL"
3. Select complete frame and encode it to Base64

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tq4nl7shlweffzqabwwe.png)
 
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bk5n2mc7piishys8nonk.png)
 
 

If you found an easier way, please comment!
Let's Learn Dart!
Tags: dart, flutter
Published: 2021-06-29 19:47:16

&nbsp;&nbsp;&nbsp;&nbsp;Hello everyone! I started getting to Flutter recently and I am now diving deeper into the Dart language. I will share what I've learned and hopefully you will learn a thing or two as well :)
&nbsp;&nbsp;&nbsp;&nbsp;I will be creating a long series of posts covering the language and will do my best to make this as beginner friendly as possible but it would probably be helpful to already have familiar with another programming language. I may create a cheat sheet for JS developer for a quick "comparison" overview between the 2 languages at a later time. Let me know if this is something you'd be interested in!

#Installation
&nbsp;&nbsp;&nbsp;&nbsp;To get started, I suggest proceeding with installing Flutter SDK itself, it will contain Dart as well. Follow the directions here: https://flutter.dev/docs/get-started/install. The docs are great and should be sufficient to get you up and running.

#Environment
&nbsp;&nbsp;&nbsp;&nbsp;I suggest utilizing DartPad to learn and practice with Dart. Check it out here: https://dartpad.dev/dart?null_safety=true. If you want to play around with Dart in a local environment, create a folder to host your dart files. Create a bin folder and inside of it your .dart file. Write out your code (which you will learn more in depth about later) and press f5 or ctrl+f5 (windows) / cmd+f5 (mac) to run the program.

#Documentation
&nbsp;&nbsp;&nbsp;&nbsp;Of course, the thing we all hate to hear, "Go read the docs". But, just in case...here are the official docs: https://dart.dev/guides

#On to Learning!
Follow the table of contents to learn Dart. I recommend going in the order listed.

#Table of Contents (In Progress)
* [Basics of Dart](https://dev.to/danko56666/basics-of-dart-n85)
* [Dart Types](https://dev.to/danko56666/dart-types-17je)
* [Operations in Dart](https://dev.to/danko56666/dart-operators-369)
* Control Flow in Dart
* Strings in Dart
* A lot more to come...(haven't planned the rest out yet)
How to Build an eBay Price Tracker using Python

Published: 2021-08-12 12:04:39

One of the most significant applications of Web Scraping in retail and e-commerce is in monitoring competitor price movements. This, when done well, can mean extra revenue and also will allow the retailer to ensure that they are always in the game and are not taken by surprise by anything the competition is doing.

Here is a simple script that does that. We will use BeautifulSoup to help us extract information, and we will track the prices on eBay.

https://youtu.be/Q4BVYpa5SVE
How to create a collection in MongoDB
Tags: mongodb
Published: 2021-08-12 16:03:47

---
title: How to create a collection in MongoDB
published: true
date: 2021-08-12 12:02:39 UTC
tags: MongoDB
canonical_url: https://donaldfeury.xyz/how-to-create-a-collection-in-mongodb/
series: "Small Bytes of MongoDB"
---

For a full overview of MongoDB and all my posts on it, check out my [overview](https://donaldfeury.xyz/introduction-to-mongodb/).

If you want to explicitly create a new collection in MongoDB rather than letting it be automatically created when an insert operation happens, you can do so using the `createCollection` method.

If you wanted to create a new collection called `podcasts`, do the following:

```
db.createCollection("podcasts")

```

`createCollections` can also take a second argument of a document describing a large number of options that can modify the collection. You can read up on them [here](https://docs.mongodb.com/manual/reference/method/db.createCollection/) but some of the more useful options include:

- Set a TTL for documents to be automatically removed after a set time has passed
- Set a maximum size for the collection
- Create validation rules to control what documents can exist in the collection
Enjoy Programming-Themed Humor? Here's today's daily developer joke!
Tags: jokes, dailydeveloperjokes
Published: 2021-08-12 12:00:22

---
title: "Enjoy Programming-Themed Humor? Here's today's daily developer joke!"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
published: true
tags: #jokes, #dailydeveloperjokes
---

Hi there! Here's today's Daily Developer Joke. We hope you enjoy it; it's a good one.

![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1259869e0aa.png)

---

For more jokes, and to submit your own joke to get featured, check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/). We're also open sourced, so feel free to view [our GitHub Profile](https://github.com/dailydeveloperjokes).

### Leave this post a ❤️ if you liked today's joke, and stay tuned for tomorrow's joke too!

_This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit._

<!--
Joke text:
___Q:___ What kind of computer can hold a musical note?

___A:___ A Dell.
 -->
Sticky header with show/hide on scroll
Tags: development, css, snippet, oxygenbuilder
Published: 2022-09-12 23:27:09

---
title: Sticky header with show/hide on scroll
published: true
date: 2021-08-12 12:00:00 UTC
tags: Development, CSS, Snippet, OxygenBuilder
canonical_url: https://johandejong.dev/blog/sticky-header-with-show-hide-on-scroll
---

This snippet allows you to make (almost) any header sticky on the page which hides itself when you scroll down, but pops-up again when you scroll up. And as a bonus a step-by-step guide on how to implement this in Oxygen Builder.  
  
Read full article at [https://johandejong.dev/blog/sticky-header-with-show-hide-on-scroll](https://johandejong.dev/blog/sticky-header-with-show-hide-on-scroll)
async actions in react-redux
Tags: react, redux, javascript
Published: 2021-08-12 11:50:41

`Redux` is a widely opinionated tool for state management. Although it's not exclusively made for `react` but it's praised by a lot of react developers.

`Redux` uses a big javascript object called the `state` tree to store and preserve the global state of the application. 

Which we can access via dispatching actions to the reducer. 

Reducer is a special function and in a higher-level language, I can say reducer is something that takes the original part of the state that it needs to work on and the action that you want it to do and gives away the result. Like a black box.

Now this is a very beautiful concept but you can not do something like this.
```js
const reducer = async (state = initialState, action) => {
    let { users } = state;
    if (action.type === LOAD_USER) {
        const userData = await loadUser(...);
        users.push(userData)
        return { ...state, loading: true }
    }
}
```


To fetch and update state tree with async data, the traditional way is to use applyMiddleWare or some 3rd partly library like redux-thunk. But I won't be using that.

To bypass all the fuss we'll use a little trick.
Since react takes care of all the visual state of the application we just have to make sure that after our async function completes it should somehow tell redux that "yo! buddy I have done the thing that you asked for" and then redux can simply add/modify that information inside the global state tree.

And here is how we can do that.

## Loading Async Data in reducer

This is a multi-step process

1. First we will pass an action to the reducer which will make an async call. 
2. Then on the callback of that async action we will set up another dispatch that will be called after that async action completes.
3. In the meanwhile we can return that state of the tree with an isLoading label set to true from the original action.
4. The on-completion action will just return the state with the modified values and the loading label to false.

et voila.

### Example Application. 

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

In this application, I have used the same concept to load users asynchronously from [jsonplaceholder. api]().

You can check out the Github repo from here 👇 
{% github atulitanand/redux-users-app %}

### Live Demo

{% codesandbox redux-user-app-9h9kg %}


Thanks for reading.
Hope this may have added a little value, however small that may be.


**Resources**

Cover Image: 
https://medium.com/swlh/handling-asynchronous-actions-with-redux-thunk-86b8d8e0b83e

This article by [Robin Kim](https://medium.com/swlh/handling-asynchronous-actions-with-redux-thunk-86b8d8e0b83e) follows the redux-thunk middleware approach so it's my advice to check it out.

Thanks again! Have a lovely day.
JWTManager object has no attribute token_in_blacklist_loader
Tags: python, flask, showdev, webdev
Published: 2021-08-12 11:48:16

---
title: JWTManager object has no attribute token_in_blacklist_loader
published: true
description: token_in_blacklist_loader isn't a valid function to use now.
tags: python, flask, showdev, webdev
cover_image: https://www.maxpixel.net/static/photo/1x/Digital-Code-Computer-Program-Error-2020-Data-4884540.png
---

If you're using this error:
```shell
AttributeError: 'JWTManager' object has no attribute 'token_in_blacklist_loader'
```

it because you're using `flask-jwt-extended` version `4` and alot changed in version `4`  [you can see here](https://flask-jwt-extended.readthedocs.io/en/stable/v4_upgrade_guide/). the `token_in_blacklist_loader` changed to `token_in_blocklist_loader`

# how to overcome this issue
the recent migration to `flask-jwt-extended` made alot of improving and the following function now takes two arguments `(jwt_header, jwt_payload)`:
```python
@jwt.needs_fresh_token_loader
@jwt.revoked_token_loader
@jwt.user_lookup_loader
@jwt.user_lookup_error_loader
@jwt.expired_token_loader
@jwt.token_in_blocklist_loader
@jwt.token_verification_loader
@jwt.token_verification_failed_loader
```
now you can fix the error and the `jti` is exist in `jwt-payload`:

```python
@jwt.token_in_blocklist_loader
def check_if_token_in_blacklist(jwt_header, jwt_payload):
    jti = jwt_payload['jti']
    token_in_redis = jwt_redis_blacklist.get(jti)
    return token_in_redis is not False
```

Thank you so much for reading!  If you still see any issue, let me know!
GetWidget Marketplace is live
Tags: getwidget, flutter
Published: 2021-08-12 11:29:28

Hey everyone,

Thanks for you all kind of support and valuable suggestions for our GetWidget opensource UI library. 

Since, we have been geeting request to come with some professional Flutter app platform. So here we are. We are not live with our new getwidget marketplace platform. Here we are kept some professional Flutter complete apps and UI as of now.

So, please have a look at https://market.getwidget.dev/ and share your valuable feedback to us. 

Thanks & Regards
GetWidget
Flutter opensource UI Library
B2B testing environment using SFDX and shell scripts.
Published: 2021-08-12 10:44:32

# B2B testing environment using SFDX and shell scripts.
## Step 1:
Install SFDX CLI , Git and VSCode.
## Step 2:
Clone the repo using Vscode by opening the command palette (cmd+shift+p) and choose git clone and paste the repo url ```https://github.com/forcedotcom/b2b-commerce-on-lightning-quickstart.git ```
- open the cloned repo in VSCode and go to sfdx directory and run the script using git.![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z237s8e6ys8lebpozbuk.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x340sxg8xnkirkgtj5ha.png)
- After running script in git successfully open VSCode.
## Step 3:
 Open VSCode and run the following commands in sfdx directory for auth devHub.

> sfdx force:auth:web:login -d

Run the command that creates the scratch org and specify the username for the administrator:

> sfdx force:org:create -f config/project-scratch-def.json username=<YourScratchOrgUsernameInEmailFormat> -s -d <DurationInDays>

e.g: sfdx force:org:create -f config/project-scratch-def.json username=kapasiashivam007@gmail.com -s -d 30

To open the new org:
> sfdx force:org:open

Now scratch org has been created but you need credentials, so to get scratch org credentials Go to terminal >> type

> sfdx force:org:display

Generate scratch org password using command:
> sfdx force:user:password:generate --targetusername "yourUserName"



 **Thanks for visiting.**