teleren/devto huggingface dataset:
How to test Restful API with curl
Published: 2021-08-22 10:53:55

GET请求，获取列表
```
curl http://localhost:3000/posts
```

POST请求，新增一条记录
```
curl --header "Content-Type: application/json; charset=UTF-8" \
--request POST \
--data '{"title":"xyzzzz", "content":"xyzxxxxxx"}' \
http://localhost:3000/posts
```

DELETE请求，删除一条记录
```
curl --request DELETE http://localhost:3000/posts/234
```

PATCH请求，更新一条记录
```
curl --header "Content-Type: application/json; charset=UTF-8" \
--request PATCH \
--data '{"title": "xyzzzz"}' \
http://localhost:3000/posts/602396e1e6b7a60502ce1e79
```

### References
* https://stackoverflow.com/questions/7172784/how-do-i-post-json-data-with-curl
How to deploy local mongoDB based on Docker
Published: 2021-08-22 10:53:34

基于Docker在本地部署mongoDB数据库

下载mongoDB镜像

```
docker pull mongo
```

也可以下载特定版本，TODO：如何看到所有的版本列表？

```
docker pull mongo:4.0.4
```

这时候就可以直接启动mongoDB了，``mongo``是镜像的名字，mongodb是container的名字，但这个时候运行是前台运行。

```
docker run --name mongodb mongo
```

按ctrl+C退出以后，container就停止运行了，如果要找到这个container，需要``-a``参数：

```
docker ps -a
```

关闭并删除，这里应该已经关闭了，只要删除就好

```
docker stop mongodb
docker rm mongodb
```

重新在后台运行，并设置版本号

```
docker run -d -p 27017-27019:27017-27019 --name mongodb mongo
```

这个时候应该可以看到运行的进程

```
docker ps
```

登录到对应的服务器

```
docker exec -it mongodb bash
```

进入到mongoDB命令行

```
mongo
```

显示数据库列表

```
show dbs
```

选择一个数据库，比如``abc``，如果这个数据库不存在，貌似就直接创建

```
use abc
```

在people表中插入一条记录

```
db.people.save({ firstName: "Mingda", lastName: "Cui" })
db.people.save({ firstName: "Shanshan", lastName: "Jin" })
```

查询所有记录

```
db.people.find()
```

查询特定记录

```
db.people.find({ lastName: "Jin" })
```
How to connect mongoDB server with useUnifiedTopology
Published: 2021-08-22 10:53:05

基本指令就是``connect``命令
```
const mongoose = require('mongoose')
const mongoDB = 'mongodb://localhost:27017/learn'
mongoose.connect(mongoDB)
```

遇到的第一个警告
```
DeprecationWarning: current URL string parser is deprecated, and will be removed in a future version. To use the new parser, pass option { useNewUrlParser: true } to MongoClient.connect.
```

遇到的第二个警告
```
DeprecationWarning: current Server Discovery and Monitoring engine is deprecated, and will be removed in a future version. To use the new Server Discover and Monitoring engine, pass option { useUnifiedTopology: true } to the MongoClient constructor.
```

上面两个警告，提示中已经给出了明确的解决方案，但是当设置了``{ useUnifiedTopology: true }``以后，会发现连接失败的时候，比如docker没有启动，也不会报异常。

原来``useUnifiedTopology``这个模式，会设置一个30秒的搜寻服务器的超时时间，就算服务器无法连接，也要等到超时以后才报错。解决方案就是通过设置``serverSelectionTimeoutMS``参数来解决。

最后的方案
```
mongoose.connect(mongoDB, {
  useNewUrlParser: true,
  serverSelectionTimeoutMS: 3000,
  useUnifiedTopology: true
}).then(() => {
  console.log('connect succeed')
}).catch((error) => {
  if (error.constructor.name === 'MongooseServerSelectionError') {
    console.error('Can not connect mongoDB server.')
  } else {
    console.log(error)
  }
})
```
JS13K: My First Day (Day 8/9 😊)
Tags: javascript, devjournal, challenge, gamedev
Published: 2021-08-22 10:38:17

I am trying to make a rhythm game based on one line of notes. The music will be minimal since I have only 13 KB for doing the game, most of them will be autogenerated by the notes you will click. Now I'll learn more about Web Audio API and creating a music for testing the idea.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5a3c6ezmx94nxu08297z.gif)
<figcaption>The game is improving!</figcaption>
The IBAN API
Tags: banking, fintech
Published: 2021-08-22 09:52:42

I wanted to share my latest product with the community, which is the IBAN validation API.

This product offers a way of validating the IBAN and getting the bank metadata from it, such as Bank Name, Branch, address and BIC, ...

The product is growing daily by the usage of its customer whereas of today it covers more than 100 countries around the world.

I would like to share the product with the community where it will benefit you if you are in the Fintech, e-commerce, accounting, or any related sector and you require your customer IBAN where this API will boost and enhance your user experience and your system acceptance rate.

The [IBAN API](https://ibanapi.com) can be accessed through this URL.

Please let me know your thoughts and suggestions.
Use Babel to parse Vue.js SFC
Published: 2021-08-22 09:11:31

## [Github Repo: vue-template-babel-compiler](https://github.com/JuniorTour/vue-template-babel-compiler)
Enable `Optional Chaining(?.)`, `Nullish Coalescing(??)` and many new ES syntax for [Vue.js SFC](https://vuejs.org/v2/guide/single-file-components.html) based on [Babel](https://babeljs.io/).

<p align="center">
  <a href="https://www.npmjs.com/package/vue-template-babel-compiler">
    <img
    src="https://img.shields.io/npm/dt/vue-template-babel-compiler"
    alt="Downloads">
  </a>
  <a href="https://www.npmjs.com/package/vue-template-babel-compiler">
    <img
    src="https://img.shields.io/npm/v/vue-template-babel-compiler.svg?sanitize=true"
    alt="Version">
  </a>
  <a href="https://github.com/JuniorTour/vue-template-babel-compiler">
    <img
    src="https://img.shields.io/github/last-commit/JuniorTour/vue-template-babel-compiler?sanitize=true"
    alt="LastCommit">
  </a>
</p>

## DEMO
![DEMO](https://user-images.githubusercontent.com/14243906/127761300-076db45a-cdce-4fda-bd02-1f4fa96de6d8.png)

## Features
- All features of [vue-template-compiler](https://github.com/vuejs/vue/tree/dev/packages/vue-template-compiler#readme) && [vue-template-es2015-compiler](https://github.com/vuejs/vue-template-es2015-compiler)
- new ES syntax: `Optional Chaining`, `Bigint`, `Nullish Coalescing` and more
- Customization syntax, babel plugin...

## Usage
### 1. Install
``` bash
npm install vue-template-babel-compiler --save-dev
```

### 2. Config
#### 1. [Vue-CLI](https://cli.vuejs.org/guide/webpack.html#modifying-options-of-a-loader)
[DEMO project for Vue-CLI](https://github.com/JuniorTour/vue-template-babel-compiler-vue-cli-project)
``` js
// vue.config.js
module.exports = {
    chainWebpack: config => {
        config.module
            .rule('vue')
            .use('vue-loader')
            .tap(options => {
                options.compiler = require('vue-template-babel-compiler')
                return options
            })
    }
}
```

#### 2. [Nuxt.js](https://nuxtjs.org/docs/2.x/features/configuration#extend-webpack-to-load-audio-files)
[DEMO project for Nuxt.js](https://github.com/JuniorTour/vue-template-babel-compiler-nuxt-project)
``` js
// nuxt.config.js
export default {
  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
    loaders: {
      vue: {
        compiler: require('vue-template-babel-compiler')
      }
    },
  },
  // ...
}
```

#### 3. [Webpack](https://cli.vuejs.org/guide/webpack.html#modifying-options-of-a-loader)
``` js
// your webpack.config.js where config vue-loader
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
            compiler: require('vue-template-babel-compiler')
        }
      }
    ]
  }
}
```

## [API](https://github.com/JuniorTour/vue-template-babel-compiler/blob/main/doc/API.md)


### Welcome for Issues && PR.
Google Tag Manager with Next.js (TypeScript/Bangla)
Published: 2021-08-22 09:39:41

এই ব্লগটিতে আমরা শিখব কিভাবে *Next.js* প্রোজেক্টে গুগল ট্যাগ ম্যানেজার ইমপ্লিমেন্ট করতে হয়।

এজন্য আমাদের প্রয়োজন হবে,
- *Next.js* প্রোজেক্ট
- গুগল ট্যাগ ম্যানেজার অ্যাকাউন্ট

#### ধাপসমূহ
১/ *.env* ফাইলে গুগল ট্যাগ ম্যানেজার আইডি ডিফাইন করা
২/ *pages* ফোল্ডার এর মধ্যে *_document.tsx* ফাইল তৈরি করা
৩/ *lib/gtm/index.tsx* ফাইল তৈরি করে প্রয়োজনীয় ফাংশন ডিফাইন করা
৪/ *_app.tsx* ফাইলে রাউট পরিবর্তন ট্র্যাক করা

#### ১ম ধাপঃ
রুট ডিরেক্টরিতে *.env* ফাইলর মধ্যে আপনার প্রোজেক্টের গুগল ট্যাগ ম্যানেজার আইডি অ্যাড করুন।

{% gist https://gist.github.com/muhidhossain/673faae460277a317cdf56e8b3335340 %}
GTM-XXXXXXX এর স্থলে আপানর গুগল ট্যাগ ম্যানেজার আইডি লিখুন।

#### ২য় ধাপঃ
*pages* ফোল্ডারের মধ্যে *_document.tsx* ফাইল তৈরি করে গুগল ট্যাগ ম্যানেজার কনফিগার করুন।

*_document.tsx* সম্পর্কে বিস্তারিত জানতে *[Next.js documentation](https://nextjs.org/docs/advanced-features/custom-document)* পড়তে পারেন।
{% gist https://gist.github.com/muhidhossain/96645bce5f64e02dae0984c798912e96 %}

#### সমস্যাঃ
গুগল ট্যাগ ম্যানেজার শুধুমাত্র পেইজ রিলোড করলে ট্যাগ ফায়ার করে। যেহেতু *React/Next.js* এরমতো সিঙ্গেল পেইজ অ্যাপ্লিকেশানে রাউট পরিবর্তন হলেও পেইজ রিলোড হয় না। ফলে প্রথমবার ওয়েবসাইটে ঢুকলে ট্যাগ ফায়ার হয় পরবর্তীতে রাউট পরিবর্তন করলেও ট্যাগ ফায়ার হয় না।
#### সমাধানঃ
এই সমস্যার থেকে পরিত্রান পাওয়ার জন্য আমাদেরকে ম্যানুয়াল ভাবে প্রতিবার রাউট পরিবর্তন হলে নিম্নউক্ত *pageview* ফাংশন কল করতে হবে এবং গুগল ট্যাগে হিস্টরি চেইঞ্জ ট্রিগার অ্যাড করতে হবে।
##### হিস্টরি চেইঞ্জে ট্রিগারঃ *[documentation](https://support.google.com/tagmanager/answer/7679322?hl=en)*

#### ৩য় ধাপঃ
রুট ডিরেক্টরিতে *lib/gtm* ফোল্ডার তৈরি করে তার মধ্যে *index.tsx* ফাইল তৈরি করুন এবং *pageviews* এবং *events* ট্রাক করার জন্য কাস্টমে ফাংশন লিখুন।

{% gist https://gist.github.com/muhidhossain/d39c199348f6f21c88a06be640e22882 %}

#### ৪য় ধাপঃ
এখন রাউট পরিবর্তনে pageview ফাংশন কল করার জন্য _app.tsx ফাইলে useEffect হুক ব্যবহার করুন।

{% gist https://gist.github.com/muhidhossain/ba91d8cd82fc7364c3208c00cefc2c9b %}
ব্যাস হয়ে গেলো ইমপ্লিমেন্টেশন।
I built a new tool for teams. Time To Estimate, a fun, simple way for teams to remotely estimate tasks together.
Tags: react, webdev, tooling, showdev
Published: 2021-08-22 09:39:03

**Free to use and no sign up required to use it.**

Want to skip the blurb? [Here's the link.](https://www.timetoestimate.com)

Have you been in an awkward situation, such as on a zoom call, where developers are trying to estimate using hands? Video call's background removal features cut people's hands off, there's lag and it's general pain in the butt. Or, you're shaking your fists rock-paper-scissors style to your scrum lead's countdown only for everyone to estimate at the wrong time.

Time To Estimate - it's new, it's shiny and it's fun to use. I built it with agile teams in mind. It simplifies your estimation and comes with some cool features to make your remote planning session that bit quicker.

My arms are wide open for feedback (feedback button on desktop is middle right of the screen), including any issues or bugs you might encounter.

Check it out at [timetoestimate.com](https://www.timetoestimate.com).


<a href="https://www.producthunt.com/posts/time-to-estimate?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-time-to-estimate" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=309332&theme=light" alt="Time To Estimate - A fun, simple way for agile teams to remotely estimate tasks | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
Why passwordless authentication is the future
Tags: passwordless, nopassword
Published: 2022-11-01 06:29:15

---
title: Why passwordless authentication is the future
published: true
date: 2021-08-22 09:11:23 UTC
tags: passwordless, nopassword
canonical_url: https://mojoauth.com/blog/passwordless-is-future/
---

When we talk about application security, the humble combination of a username and password comes to our mind. This model has helped us to secure our access to information since the start of IT. But as time passes by, we have seen that today’s method of allowing people to prove ‘they are who they say they are’ through a username and password does more harm than good. What is Passwordless Authentication?

[Read On](https://mojoauth.com/blog/passwordless-is-future/)
DevOps should not be spending valuable time on maintaining WordPress
Tags: wordpress, jamstack, headless
Published: 2021-08-22 08:51:10

For many companies, their WordPress site is their window to the world and is an important marketing, sales and branding tool that directly impacts their bottom line.

But that site needs TLC and attention in terms of server management, maintenance, updates, etc.; tasks that some might call WebOps, or I've even seen the term WPOps used for this.

So guess who often ends up being tasked with these responsibilities within a company? DevOps.

And guess how much they love that? Not so much.

Being responsible for the health of the company WP site means it takes valuable DevOps resources away from their real job, and also it tends to need their attention at very inconvenient times, like at 2 am or on weekends when they're not by their desks.

And managing WP is not their area of expertise. There's a prevalent perception that WP is "just" a CMS so anyone with some tech chops should be fine "just" managing it on the side. It quickly becomes apparent that dealing with WP needs experience and expertise. Also, "just" spinning up an EC2 instance to host WP tends to not work out well either. It's not so simple.

That's why many of [Strattic's](https://www.strattic.com) champions within companies are DevOps. They often come to Strattic to resolve security or performance issues, but then report that the peace of mind they get from Strattic is a wonderful added value - once the site is on Strattic, it no longer needs constant attention. The static production site on Strattic is stable and resilient, scales effortlessly as needed and can even withstand DDoS attempts, and if there are issues on the original WP site, those can be fixed calmly and patiently rather than in a panic under emergency circumstances since the site is completely decoupled from the production static replica.
2 Important! Array methods you should know.
Tags: javascript, codenewbie
Published: 2021-08-22 08:35:09

# Hey everyone 👋
Today's article is about two interesting (*also important*) array methods:  
1. `.flat()`   
2. `.flatMap()`  

## Let's get started 🚀
### 1. `.flat()`:
`.flat()` method recusively flattens the elements which are array into the original array and returns a new array.  
 #### Examples 👇
```js
const array = [1,2,[3,4]];
const newArray = array.flat();
console.log(newArray);
// [1,2,3,4]
```
👉 `.flat()` receives an optional argument `depth` (1 by default).

```js
const arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]

const arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]
```
👉 The `.flat()` method removes empty slots in arrays:
```js
const arr5 = [1, 2, , 4, 5];
arr5.flat();
// [1, 2, 4, 5]
```
<hr />
### 2. `.flatMap()`:  
`.flatMap()` is identical to a `.map()` followed by a `.flat()` of depth 1.  

 #### Examples 👇
```js
let arr1 = [1, 2, 3, 4];

arr1.map(x => [x * 2]);
// [[2], [4], [6], [8]]

arr1.flatMap(x => [x * 2]);
// [2, 4, 6, 8]
```
👉 `.flatMap()` only flattens the array up to depth 1.  
```js
let arr1 = ["it's Sunny in", "", "California"];

arr1.map(x => x.split(" "));
// [["it's","Sunny","in"],[""],["California"]]

arr1.flatMap(x => x.split(" "));
// ["it's","Sunny","in", "", "California"]
```

👉 As you know `.map` always works *one-to-one*, but `flatMap` can be used to modify the number of items during `map`.

A nice example I found on MDN 👇
```js
// Let's say we want to remove all the negative numbers
// and split the odd numbers into an even number and a 1
let a = [5, 4, -3, 20, 17, -33, -4, 18]
//       |\  \  x   |  | \   x   x   |
//      [4,1, 4,   20, 16, 1,       18]

a.flatMap( (n) =>
  (n < 0) ?      [] :
  (n % 2 == 0) ? [n] :
                 [n-1, 1]
)

// [4, 1, 4, 20, 16, 1, 18]
```

That's it for this article, I hope you found it useful. 😊  
Take a look on my article on [array methods](https://sidmirza.hashnode.dev/array-methods-in-javascript-when-to-use-which).  
Please leave a like and follow me on [twitter](https://www.twitter.com/sidmirza4).  
#### Thanks for reading. 💚  
#### Happy coding.
EditorConfig on the fly
Tags: editorconfig, github, lessismore, keepitclean
Published: 2021-08-22 08:32:04

One of the things that doesn't favor a project's popularity on GitHub is too many files in the project root. Often in fact to get to the `README.md` you have to scroll through a long list of files, obviously always useful but, I think being able to streamline it is very useful.
In this sense I thought that removing the `.editorconfig` file and downloading it only when needed, ie at the beginning of a development or debugging session.
With this purpose I have created this repository I hope it will be useful for all of you.

- https://github.com/javanile/editorconfig
Improve SEO with Microdata on your Gatsby MDX Blog
Tags: seo, microdata, gatsby, howto
Published: 2021-08-22 07:53:30

---
title: Improve SEO with Microdata on your Gatsby MDX Blog
published: true
tags: SEO, microdata, gatsby, howto
canonical_url: https://cesarvarela.com/blog/add-microdata-to-your-gastby-mdx-blog
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/irar77kfrsnk16zgmgzk.png
---

  

Microdata is an essential part of improving the SEO of your blog, and if you are new to it, it might get a bit confusing. I'll try to make it a bit easier for you to get Microdata working on your blog in this post.

Thankfully, a couple of packages make creating the proper structure of the microdata for our pages more straightforward, especially if you are using typescript:

```sh
npm i schema-dts react-schemaorg
```
or
```sh
yarn add schema-dts react-schemaorg
```
Next, we have to add a new prop to our `<Seo />` component (that comes already created with almost all Gatsby starters) to handle our new Microdata structure. I'll add it in a parameter called `script`:

```jsx
...

export default function Seo({ title, script = [] }) {

...

return <Helmet
      title={title}
      titleTemplate={`%s | ${site.siteMetadata.title}`}
      
      //this is the key line
      script={[].concat(script)}
    />
}
```
Then when can start adding each microdata structure to our pages and templates. For example, in my post templates, first, I'll import the `helmetJsonLdProp` helper and the schema type that most reflects a blog post:

```jsx
import { helmetJsonLdProp } from "react-schemaorg";
import { BlogPosting } from "schema-dts";
```
*It's important to use the `helmetJsonLdProp` helper because it plays nicely with `react-helmet`*

Then we define the actual Microdata content in the post template render, and send it to our `<Seo>` component:

```jsx
const Post = (props) => {

  const { mdx: { body, frontmatter, parent, timeToRead, slug } } = props.data

  const jsonLd = helmetJsonLdProp<BlogPosting>({
    "@context": "https://schema.org",
    "@type": "BlogPosting",
    "headline": frontmatter.title,
    "datePublished": frontmatter.date,
    "dateModified": parent.modifiedTime,
    "author": [{
      "@type": "Person",
      "name": "Cesar Varela",
      "url": `https://cesarvarela.com/blog/${slug}`
    }]
  })

  return <Layout content={<LayoutLink to="/blog">Blog</LayoutLink>}>

    // pass the jsonLd data to our Seo component
    <Seo title={frontmatter.title} script={jsonLd} />

	/* my custom post template jsx goes here, yours will vary obsviously  */
 </Layout>
```

Done! If everything worked nicely, you should see your new Microdata [here](https://validator.schema.org/). And you can read more about it [here](https://schema.org/docs/gs.html#microdata_how)

Working example [here](https://github.com/cesarvarela/cesarvarela.com/blob/master/src/templates/post.tsx)
Remove all console.log() from your project in less than a minute
Tags: javascript, react, svelte
Published: 2021-08-22 07:40:35

### Introduction
console.log() is a debugging tool that can assist you to figure out what your code is doing. You may follow along as your code executes by displaying a message that contains either descriptive text that tells you what's going on or the values of certain variables.

Removing all console.log() from your project before production can be very difficult, Here is how to remove all console.log() from your project in less than a minute. 

#### Step 1
Open your project in VS Code ( Since we are using Regex, It is easier to use it in VS Code )
#### Step 2
Click on the search icon on VS Code sidebar. It will open the search option


![screely-1629616174912.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629616183162/Fgyrdj09S.png)
#### Step 3
In search placeholder type **console.log.*$** and select *Use Regex* option which can be found on the upper right corner of the search panel that’s designated by the icon .*


![screely-1629615942100.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629615946510/4Y5GzqNq0.png)

### Step 4
Once you searched for all the console.log(), Click on replace to remove all console.log()
and BOOM 💥 Now you don't have any console.log() in your project

### Conclusion ⌛

I hope you found this short helpful. If you need any help please let me know in the comment section. 

Let's connect on  [Twitter](https://twitter.com/suhailkakar)  and  [LinkedIn](https://www.linkedin.com/in/suhailkakar/)  

👋 Thanks for reading, See you next time
3 Ways to restore your deleted files
Tags: windows, hacks, backup, restore
Published: 2021-08-22 07:34:19

### Accidentally Deleted Something?

We're talking about accidentally deleting important files using the **`Shift + Delete`** shortcut in Windows, which removes the possibility to simply recover them from the Recycle Bin.

#### Don't lose hope...

Let me tell you three different ways to recover the permanently deleted files on Windows 10.

1. Restore using CMD
2. Restore using older backup
3. Restore using Third Party App

#### Let's start recovering data...

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

### Restore using CMD

**Step 1:** Open the Start Menu.

**Step 2:** Type **`cmd`**, right-click on the top match and select **`Run as administrator`**.

**Step 3:** Type **`chkdsk X: /f`** and hit **`Enter`** on your keyboard. Replace **`X`** with the letter of your hard drive.

**Step 4:** Type **`ATTRIB -H -R -S /S /D X:*.*`** and hit **`Enter`**. Again, replace **`X`** with the letter of your hard drive.

What do these parameters in **`ATTRIB`** command mean?

**`-H`**: it gives the Hidden attribute to the files specified.
**`-R`**: it refers to the read-only attribute (files can be read but cannot be changed).
**`-S`**: it gives the System attribute to the files specified.
**`/S`**: it tells the system to search the specified path (including subfolders).
**`/D`**: it consists of process folders.

![recover-files-using-cmd-2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n08200n8ijvw7ywr9yuk.png) 

The recovery process may take a while to finish, so be patient and don't interrupt it.

### Restore using older backup

To restore files from a file backup that was created after the system image backup was created, follow these steps.

**Step 1:** Open the Start Menu.

**Step 2:** Search **`backup`**.

**Step 3:** Select the **`Go to Backup and Restore`** option under **`Looking for an older backup?`**.

**Step 4:** Click on the **`Select another backup to restore files from`** option and choose your backup.

**Step 5:** Click **`Next`** and follow the instructions to complete the recovery process.

![Screenshot (104)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t8befzw3rkzn2qv3yapm.png) 

### Restore using Third Party App

**Step 1:** Download and Install **[Disk Drill](https://www.cleverfiles.com/data-recovery-software.html)** just like you would any other Windows application.

**Step 2:** Launch Disk Drill and click the **`Search for lost data`** button next to the hard drive which you want to recover permanently deleted files.

**Step 3:** From the list of results, select which files you want to recover.

**Step 4:** Click the **`Recover`** button to begin the recovery process.

![MainScreenDiskDrill-1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vt93p7w3sy45835p2pjp.jpg) 


Do you know more methods to recover our deleted data, please comment down below 👇🏻👇🏻