teleren/devto huggingface dataset:
.then()
Published: 2021-08-26 06:30:17

This is going to be an embarrassingly basic post - basic in that it's about some basics: **promises and callbacks**.

You want to talk about tech debt? My list is a mile long, but somewhere near the bottom (like buried at the bottom) is the world of asynchronous functions and tools/topics like:

 - promises
 - async/await
 - callbacks
 - *and more*

Things move quickly at HR and it's difficult to set aside time for pure study or review. So my understanding of promises, for instance, hasn't progressed beyond the bare minimum. I mean the real minimum - can I throw some code near it to get what I want to happen.

I was debugging a problem with the Help Desk the other day. I was having a hard time redirecting my page after a form submission (the problem ended up being that I wasn't using preventDefault() in the event handler) and we were working on resolving that. Somewhere along that path, my interlocutor paused to point out an anti-pattern in some of the code we were investigating. The code was functional, but deficient.

I had been making http requests using helper functions like this:

```javascript

const helper = (some_param, callback) => {

axios.post('http://url.com')
 .then(res => callback(null, res.data))
 .catch(err=> callback(err, null))

}
```
Yikes.

Why had I been building functions like this? Well, for one, it worked. And that's really the whole list.

Back when I was first getting started with async, I had been making http requests using jQuery's .ajax tools and was getting comfortable using callbacks in that context.

Shortly after - I mean like the next day, if that - promises entered the mix. I never got to sit down with them for some semi-deep study before I joined a team that preferred .axios to .ajax. .axios returns prmoises, and being new to them, I asked a classmate how he'd handle the challenge I was facing converting an ajax call to axios. He suggested the model I demoed in code above. And it worked. So I'd been using it since.

I'm turning this into a long story.

Here's what the Help Desk helper had me do, and I've been using it pretty easily since:

```javascript

const helper = (some_param) => {
  return axios.post('http://url.com')
}
```

and then in the function that calls the helper:

```javascript

reactEventHandler(param) => {
  helper(param)
   .this(res => setStatePerhaps(res.data)
   .catch(err=> callback(err, null))
}
```
This is really surface-level stuff. But I'll call it a small win. And a win is a win.
PE featured in LA WEEKLY 
Published: 2021-08-26 06:24:27

(from the article)

## Try Something New: Perpetual Education Is The Best Online Programming And Design School

One of the more exciting new schools in this space is [Perpetual Education](https://perpetual.education).

Perpetual Education popped in 2021, right here in Los Angeles. They believe that the future will require designers with a broader knowledge and understanding of the entire design process.

Their flagship course, “Design for The Web” (DFTW) is a 6-month online design and programming mentorship. DFTW combines the best parts of a stepped college curriculum, boot camp pace, flexibility of a MOOC, and one-on-one meetings with the instructor.

...

<hr>

Read the whole thing here: https://www.laweekly.com/best-online-programming-and-design-school
JavaScript Promises The Easy Way👨‍🎓🤓.
Published: 2021-08-26 05:55:03

#What is a Promise in JavaScript:

######*Definition by MDN:*

*A Promise is a proxy for a value not necessarily known when the promise is created. It allows you to associate handlers with an asynchronous action's eventual success value or failure reason. This lets asynchronous methods return values like synchronous methods: instead of immediately returning the final value, the asynchronous method returns a promise to supply the value at some point in the future.*

######Source(MDN): [Link Here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)

####Thanks for reading, I hope now you now understand everything.

What, No? Didn't Understand.

No problem that why I am here writing this beautiful article for you.

###The literal meaning of a promise.

*Your parents promised you to buy a new computer, but on a condition that you have to get good grades in school*

In our real life this is a meaning of a Promise, So it highly depends that you could get a new computer or couldn't if you didn't get good grades in school and even if you did well in exams until the results come the promise from your parent will be in a pending state.  

Just like that in JavaScript Programming a Promise has three states:

* Pending:
*You will either get new computer or not.*

* Fulfilled/Resolved:
*You will get a new computer for sure.*

* Rejected:
*Sorry, you will not get a new computer.*

####Now enough for the example lets get started with some coding🤩💻.

![code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ielny44dfj5w2t1cydw7.png)
 
 
So what is happening is this code example is that, I have assigned a boolean value `goodGrades` and also in some real world cases this could be a external fetch request you are making to get some data or any other function for which you are not sure to get a result that's why you use a Promise.

If `goodGrades` is true you the Promise will resolve or otherwise if false the Promise will reject and give the specified Error (reason).

Also you can chain a Promise with `then()` and `catch()` or put in a `try catch` block.

**So this is the most basic way I could found to explain JavaScript Promises.**

###Thanks for reading.
 

This is my first post here, feedbacks are appreciated.

And also about what topic should I write next?
More on JavaScript?
Backend with NodeJs/ExpressJs?
Databases?
Or Anything else.
Python Collections: Hackerrank Question on Counter
Tags: python, codenewbie, collections, programming
Published: 2021-08-26 05:49:09

## The Question 
> https://www.hackerrank.com/challenges/word-order/problem

You are given _n_ words. Some words may repeat. For each word, output its number of occurrences. The output order should correspond with the input order of appearance of the word.

## The Approach
1. store the words as they come in the Counter. 
2. print them.

> 🧾 I hope you remember, `Counter` after python 3.7 internally maintains insertion order.

## Code
```python
from collections import Counter

words = list()

#n -> no of words
n = int(input())
for _ in range(n):
    words.append(input())

c =Counter(words)

print(len(c))
print(*c.values())

```
LetsGrowMore Virtual Internship Experience
Published: 2021-08-26 05:47:32



Hello everyone 👋,

It's all about my Experience at LetsGrowMore Virtual Internship Program 2021.

Earlier this year, I came across this community, LetsGrowMore and got to know about its virtual internship program (LGM-VIP 2021).

LetsGrowMore provides amazing internship opportunities.

I was happy to find this virtual internship program (LGM-VIP 2021), to start learning and exploring.

I applied for Web Development Intern, and was successfully selected. My internship started from 1st Augest, 2021. I was given a number of tasks which I had to complete within a month.

I successfully completed the first 2 tasks — Beginner Level, and Intermediate Level. I learned a lot during my internship period. This gave me an opportunity to create some new elements which I had never created before. I really enjoyed it a lot. 

I was successfully able to complete two tasks.

1️⃣ Beginner Level Task :- Create a Single Page Website using HTML, CSS and JavaScript.

Github Repo — https://github.com/KushagraArora300/LGM-VIP

Linkedin : https://www.linkedin.com/posts/kushagra-arora-688433182_task1-webdevelopment-letsgrowmore-activity-6832375253591748608-KjIG


2️⃣ Intermediate Level Task :- Create a Web Application using create-react-app.

Github Repo — https://github.com/KushagraArora300/LGM-VIP-TASK2-

Linkedin : https://www.linkedin.com/posts/kushagra-arora-688433182_task2-webdevelopment-letsgrowmore-activity-6836173179115909120-8SMd
.
I am 🙂 thankful to Aman Kesarwani sir and LetsGrowMore for giving me the opportunity.
5 VS Code Extensions which I use extensively[2021]🤩
Tags: vscode, webdev, productivity, programming
Published: 2021-08-26 05:35:45


What are the **Extensions** in VScode 🤔? Actually without VScode Extensions life way so boring🥱.Extensions provides you more productivity as a Developer. So see listed Extensions and download it and use it. Thank me latter😁.

##1.Live Server:
   I think this is the most basic extension every web developer must use and most of you already have this extension.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n6fxqj8j1kpfhrf7j2n5.gif)

[Install the Extension by clicking here](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)


##2.Auto Close Tag
   Oh dude it's too boring to add closing tags😣, and sometimes we got stuck in the hierarchy if we don't close tag but now Auto Close Tag Extension is here for us😎
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jg5rxkl2y6qtibppxf0e.gif)

[Install the Extension by clicking here](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag)

##3.Prettier Formatter for Visual Studio Code:
Did you ever noticed that your code doesn't have proper hierarchy and for that reason even you yourself don't able to debug the code. Trust me its a very bad nightmare 😖.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/df2t1qcxwywvjuzcojk2.gif)

[Install the Extension by clicking here](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode&ssr=false#overview)

##4.Bracket Pair Colorizer 2:
This is also a good extension for the same hierarchy problem, By using this extension you can colorize your bracket pairs.

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

[Install the Extension by clicking here](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2)

##5.Auto Rename Tag:
 Guys we are at our last extension as the name suggest this extension , If you rename your any one of tag then automatically this tag will rename the other tag also.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4s8wh4jn1lqzkwqskmgm.gif)

[Install the Extension by clicking here](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)
Create a Netflix clone from Scratch: JavaScript PHP + MySQL Day 31
Tags: php, javascript, webdev, tutorial
Published: 2021-08-26 05:32:46

Netflix provides streaming movies and TV shows to over 75 million subscribers across
the globe. Customers can watch as many shows/ movies as they want as long as they are
connected to the internet for a monthly subscription fee of about ten dollars. Netflix produces
original content and also pays for the rights to stream feature films and shows.

In this video,we will be creating category table

{% youtube R43b4pHBHfk %}


If you like my work, please consider
[![Buy me a coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jm11knj7d8zwcvo150q2.png)](https://www.buymeacoffee.com/cglikpo)
so that I can bring more projects, more articles for you

If you want to learn more about Web Development, feel free to [follow me on Youtube!](https://www.youtube.com/c/ChristopherGlikpo)
Using Prettier with Prisma.io (pre-commit config)
Tags: node, javascript
Published: 2021-08-26 05:06:27

<sub>Cover photo by <a href="https://unsplash.com/@bradanton?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Anton Ivanov</a> on <a href="https://unsplash.com/t/experimental?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a></sub>
<br>
If you're not familiar with [prisma.io](https://www.prisma.io), it's an awesome ORM for Node.js. And in case if you don't know what an ORM (aka object-relational mapping) is, check out [this stackoverflow thread](https://stackoverflow.com/questions/1279613/what-is-an-orm-how-does-it-work-and-how-should-i-use-one) for a comprehensive answer 😉.

## Get started

Ok, let's get started. In one project of mine, I used node.js to develop a backend application for my app. I also used postgresql (which was why [this article](https://dev.to/rinsama77/easy-setup-postgresql-on-macos-37ii) was created). In order for my app to communicate with the database, I used prima as an ORM.

Now, the problem was that I want the pre-commit config to check the format of `**.prisma` file(s). Luckily, someone made [a prettier plugin](https://github.com/umidbekk/prettier-plugin-prisma) for us.

- First, add a dependency to your project 
```bash
yarn add -D prettier-plugin-prisma
```

- To format the `**.prisma` file using CLI, run
```bash
yarn prettier --write "**/*.prisma"
```

- If you use vscode, you can edit the setting in `settings.json` to format the `**.prisma` on save
```json
"editor.formatOnSave": true, 
"[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[prisma]": {
    "editor.defaultFormatter": "Prisma.prisma"
},
```

- Lastly, here's how my `.pre-commit-config.yaml` file looks like:
```yaml
- repo: https://github.com/pre-commit/mirrors-prettier
  rev: v2.3.2 # Use the sha or tag you want to point at
  hooks:
    - id: prettier
      additional_dependencies:
        - prettier@2.1.2
        - 'prettier-plugin-prisma@2.29.1'

- repo: https://github.com/pre-commit/pre-commit-hooks
  rev: v3.4.0
  hooks:
  - id: trailing-whitespace
  - id: check-merge-conflict
  - id: check-yaml
  - id: end-of-file-fixer
  - id: no-commit-to-branch
    args: [-b, main, -b, production, -b, staging]
```
List All Files in a Directory Using Rust
Tags: rust
Published: 2021-08-26 05:01:23

Rust has a very useful built-in [file system module](https://doc.rust-lang.org/std/fs/index.html). The following code uses it to print each file in a given directory:

```rs
use std::fs;

fn main() {
    for file in fs::read_dir("./change_this_path").unwrap() {
        println!("{}", file.unwrap().path().display());
    }
}
```


## Recursively crawling directories

But for solutions that are a little more advanced, I recommend using a lightweight crate called [walkdir](https://docs.rs/walkdir/2.3.2/walkdir/).

First, you'll need to add the following two lines to your `Cargo.toml`:

```toml
[dependencies]
walkdir = "2"
```

Then, you'll need to install it with the following command:

```sh
cargo install --path .
```

We can use walkdir to *recursively* crawl all the files in a directory.

In other words, we can list all the files in a directory, all the files in each subdirectory, all the files in each subdirectory's subdirectory, and so on:

```rs
extern crate walkdir;
use walkdir::WalkDir;

fn main() {
    for file in WalkDir::new("./change_this_path").into_iter().filter_map(|file| file.ok()) {
        println!("{}", file.path().display());
    }
}
```

However, folders are still included in the list.

## Listing files but not folders

Here's an example of walkdir in action with a script that has the same functionality as before, except folders are *excluded*:

```rs
extern crate walkdir;
use walkdir::WalkDir;

fn main() {
    for file in WalkDir::new("./change_this_path").into_iter().filter_map(|file| file.ok()) {
        if file.metadata().unwrap().is_file() {
            println!("{}", file.path().display());
        }
    }
}
```

## Counting the files in a directory

And if you just want to count the number of files in a directory, the `count()` method is your friend:

```rs
use std::fs;
extern crate walkdir;
use walkdir::WalkDir;

fn main() {
    // Count all files and folders in directory:
    println!("{}", fs::read_dir("./change_this_path").unwrap().count());
    // Recursively count all files and folders in directory and subdirectories:
    println!("{}", WalkDir::new("./change_this_path").into_iter().count());
}
```

## Conclusion

Working with files in Rust can be easy and fun, especially when using a handy crate like walkdir.

And when dealing with larger file systems, Rust's incredible performance really starts to shine.

I hope you enjoyed these snippets! This is my first Rust tutorial on this blog, but I look forward to writing more.
Simple Customization for Windows Terminal
Tags: tutorial, windows, terminal, customization
Published: 2021-08-26 04:36:24

An easy step-by-step to customize your windows terminal
1. Install Windows Terminal from windows Store

2. Install GIT (if you need it) from https://git-scm.com/downloads

3. Install a nerd font from https://www.nerdfonts.com/font-downloads, I choose UbuntuMono NF
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7un40vxjbptv5y1uxfw4.png)

4. Open PowerShell and paste these:
`Install-Module posh-git -Scope CurrentUser
Install-Module oh-my-posh -Scope CurrentUser`
Confirm any message using `Y` and `A`

5. Update/Create PROFILE: open windows terminal and paste this
`notepad $PROFILE`
accept to create one if it asked, then paste this:
`Import-Module posh-git
Import-Module oh-my-posh
Set-PoshPrompt -Theme Paradox`
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2tc37lsa7xubaumtln5h.png)
Save it
> Paradox is the name of the theme
> Get all themes' name by using: `Get-PoshThemes`

6. Set font `UbuntuMono NF` of any terminal you would like to use like: Window Terminal, VS Code. 
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dhz5j239i5huc5vu1dbj.png)
 
7. Result
> In windows terminal
![Customize-windows-terminal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uzu7yhjkc8uppz0jsalc.png)

> With GIT
![Customize-windows-terminal-background](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fwt0x6uysd13048l81ns.png)
🦄 What does The Unicorn Emoji in This Site Mean 🦄 ? 
Published: 2021-08-26 04:26:47

So, I have been using dev.to for about 8 months. I am really amazed by one of the "8th Wonder" around the world : **The unicorn emoji 🦄🦄**. I did some research and I have many explanations. 

Here are some of my personal opinion:

* ( Generally in Chatting ) Sometimes Unicorn Emoji means that someone is trying desperate to convince you that something that is fake is actually REAL.
![arth is flat](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5va4bdobfbvbcumd1tfo.png)
* Unicorns are often describes as freedom, magic, purity, innocence and healing. But this doesn't make any sense for a dev blog sites primary emoji.

* A Unicorn developer/designer is a person who can design and code. Like a full-stack developer.

![Unicorn Developer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/22taiu6a08o2nmtgqgow.jpg)


* Some people often use it as a super-like / rare / unique button.
It leads people giving both heart and the unicorn emoji.


* (Killer Point) : A developer who can do the full job is called a unicorn 🦄 Developer. So, in dev.to, a blog explaining about a topic from A-Z with decent explanation should deserve a 🦄.


So, does this blog deserve a unicorn ?? :3 :3
How to implement a robots.txt file in a Nuxt Js project
Tags: nuxt, nuxtrobots, nuxtcomment, vue
Published: 2021-08-26 22:59:20

---
title: How to implement a robots.txt file in a Nuxt Js project
published: true
date: 2021-08-26 04:00:00 UTC
tags: nuxtjs, nuxtrobots, nuxtcomment, vue
canonical_url: https://postsrc.com/posts/how-to-implement-robots-txt-file-in-a-nuxt-js-project
---

![How to implement a robots.txt file in a Nuxt Js project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wi0y02qgmg3w20p160fu.jpg)

Having a robots.txt file is very important as it helps control Google and other search engines such as Bing to index website content. This is because the first thing crawler check when visiting the website is if robots.txt exists, hence it determine when content should be crawled or not.

  
There are several ways to add robots.txt and it's as easy as writing down manually in the "statics" folder. But for this tutorial, we'll be using [**nuxtjs/robots**](https://github.com/nuxt-community/robots-module) as it's more flexible and the content of the robots.txt can be easily manipulated.  
  
**1 - Install nuxtjs/robots Package**  
First thing first, install the robots package and define it in the modules array of the nuxt.config.js

```
yarn add @nuxtjs/robots
```

  
To define the robots config we can pass an object, array, or function where each method has its own use cases.

```
export default {
  modules: [
    '@nuxtjs/robots'
  ],
  robots: {
    /* module options */
  }
}
```

  
**2 - Simple configuration**  
In this case, define the code as following and it will allow all user agents (bot) to crawl the site. In contrast, if the value of DIsallow is "/" then we are not allowing it to crawl any of the pages.

```
export default {
  robots: {
    UserAgent: '*',
    Disallow: ''
  }
}
```

  
**Multiple user agents configuration**  
If you want to specify a configuration for a different user agent, do pass the array of objects as the robots value and it will behave as defined.

```
export default {
  robots: [
    {
      UserAgent: 'Googlebot',
      Disallow: '/user',
    },
    {
      UserAgent: '*',
      Disallow: '/admin',
    },
  ]
}
```

  
**Function configuration**  
You can also pass in a function as the robot's value and in this case define logic or conditionally define the value of the robot you want it to be.

```
export default {
  robots: () => {
    if (someLogicHere) {
      return {
        UserAgent: '*',
        Disallow: '/'
      }
    }
  }
```

  
**3 - yarn dev / npm run dev**  
Finally, run "yarn dev" and now you can visit /robots.txt to see the value of the robots.txt that you have defined.

```
User-agent: Googlebot
Disallow: /users
User-agent: Bingbot
Disallow: /admin
```

[This post was originally published at PostSrc 🔥🔥🔥](https://postsrc.com/). If you like this kind of tutorial, I would really appreciate it if you give it a visit.
Little TV Series Survey using pure HTML, CSS and Javascript for practicing those technologies.
Tags: html, css, javascript, webdev
Published: 2021-08-26 03:52:53

**Hello everybody!** I feel so happy because I have just
created my second web page using pure **HTML**, **CSS** and **Javascript**,
and I loved the result.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/csy2hmdksu0isewnoq8a.png)
This web page, was created to practice the mentioned technologies.
It let you choose a series from *'The Big Bang Theory'*, *'Mr. Robot'*
and *'Game of Thrones'*(Some of my favorite series). When you choose
the series, the web page will show you some data about it, and it
will let you choose your favorite character from that series. Then
you have to leave a comment about why did you like about that series.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n80i9iiz93n3qqud2hu7.png)
When you click *'submit'*, a thankful message will appear.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/arxffsun68ebm2ish1qg.png)
It also validate that you are selecting a series and leaving a comment.

The repository of this little project is:
https://github.com/R0land013/TV-Series-Survey

Leave a comment showing what do you think about this practice.