teleren/devto huggingface dataset:
Show Off Your Comment Streak with Community Wellness Badges
Tags: meta
Published: 2022-05-18 18:08:39

---
title: Show Off Your Comment Streak with Community Wellness Badges
published: true
description: 
tags: meta
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w75oqliannbz1dh8fnja.png
---

Hey DEV Community! I'm here to share an exciting announcement with you 🗣️

## Introducing...Community Wellness Badges!

We're excited to roll out a new badge for your DEV profile that we grant in exchange for constructive feedback left for your fellow community members in the comments of their posts.

## Cool! How do I earn it?

You can earn your first of six possible Community Wellness badges by contributing two or more constructive comments to posts on DEV in one week. We didn’t want this to be a grind, and we deemed two constructive comments per week to be a healthy number that didn’t ask too much of folks in order to earn the prize.

For each week that follows, as long as you comment constructively on other community members' posts two or more times per week, **you'll get another badge at the 2, 4, 8, 16, and 32-week marks. You'll max out at a 32-week streak.**

_PS — [click here](https://dev.to/badge/1-week-community-wellness-streak) to take a look at the first Community Wellness badge you can receive for leaving at least two constructive comments in one week on DEV._

If you go a week without two or more constructive comments...oops! Time to start over! ⏲

A comment is assumed to be constructive unless it is flagged by a mod. Moderators may _make mistakes_, so you may want to err on the side of leaving a few extra good comments in order to qualify.

## Why is this a thing?

We believe that the wellness of a community hinges on the health of its dialogue. We want to encourage everyone to understand the impact of their role in cultivating constructive discussions, and be rewarded with a bit of profile SWAG. 😄

### Ok, but what are “healthy discussions”?
Healthy discussions are…

* In-line with our [code of conduct](https://dev.to/code-of-conduct)
* Engaged
* Constructive
* Psychologically safe and culturally competent
* Well-moderated
* Happening every day in the comments on DEV!

Since it's key to our mission, we want to reward you for your participation in healthy discussions here on DEV.

And, as a reminder:

### Healthy discussions are not...

* One-word answers
* Condescending, demeaning, or dogmatic
* Humorous at the expense of someone's feelings
* Full of shameless self-promotion
* Able to be automated using your favorite tech stack 😜

So get commenting! We can't wait to find out what you share, learn, and contribute along the way. 🌱✨
Dialogbox made simple !
Tags: html, javascript, tutorial, beginners
Published: 2022-05-18 17:39:37

Simple way to handle alerts in your website! 

> What is dialog box ? ;
_HTML &#9001; dialog&#x3009; tag is used to create a new popup dialog on a web page. This tag represents a dialog box or other interactive component like window.
The <dialog> element uses a boolean attribute called open that activate element and facilitate user to interact with it.
HTML dialog is a new tag introduced in HTML5._

here i have just created some demo that what can you do using this, other you can style create your best. 

_index.html_
## HTML Code 

```
 <body>
        <div class="main">
            <h2>Dialog Tutorial</h2>
            <!-- button for opening dialog -->
            <button id="open">Did you know ?</button>
            <p>
                Add your lorem
            </p>

            <div class="container">
                 add your whatever !
            </div>
        </div>

        <dialog class="modal">
            <h2>This alert is created using dialogbox !</h2>
            <p id="dontselect">
                browser support for dialog is not that best, but 
                still the best
                You can style what ever you like for this dialog !
            </p>
            <button id="close">close</button>
        </dialog>
    </body>
```


**Here i just created the simple styling i have not focused on it **
_index.css_

```
.modal {
	max-width: 30em;
}

.container {
	text-align: justify;
	background: #333;
	color: white;
	padding: 3rem;
	aspect-ratio: 1/1;
	min-height: 10em;
	min-width: 10em;
	max-width: 40em;
	max-height: 20em;
	width: min(100% - 2em, 100px);
	margin-inline: auto;
	resize: both;
	border: 2px solid #000000;
	overflow: auto;
}

.modal::backdrop {
	background: #2c272e;
	opacity: 0.5;
}

.noscroll {
	/* background: red; */
	overflow: hidden;
}

```

This is your javascript file ! 
> app.js 

```
const btnopen = document.getElementById('open');
const close = document.getElementById('close');
const dialog = document.querySelector('dialog');
const body = document.querySelector('body');

btnopen.onclick = function () {
	dialog.showModal();
	body.classList.add('noscroll');
};

close.onclick = function () {
	dialog.close();
	body.classList.remove('noscroll');
};

```

Styling and others part i haven't focused i just showed how can you work with dialog in javascript. Browser support is not 100% best but best than a lot and you can start implementing this. 

Check my portfolio : [neeswebservices](https://neeswebservices.netlify.app/)
My youtube : [neeswebservices](https://www.youtube.com/channel/UCP013FdEq1ti7fz1y78v1eg)

> Thanks for Reading !!
Whatsapp Clone for Android & IOS using Flutter & Python - Part 3 (Complete Tutorial)
Tags: flutter, python, firebase, beginners
Published: 2022-05-18 17:57:35


Hey fellas I am Yash Makan back with another article. Today we are going to continue our journey where you and I are going to create a complete whatsapp applicaion from scratch. Yup, from very start till the end. This is the part 3 of the series so If you have missed the part 1 and part 2 yet then I will highly suggest you to check the [playlist](https://www.youtube.com/playlist?list=PLm8trMDxkTIlIJJqIHK12PiT36C8RpQCs) to understand better. If you don’t know about whatsapp application then basically it’s a social media messaging application where user can send messages to their friends & family. It also has features like video calling, status sharing and much more. And if you are thinking, are we going to develop all these features?? then the answer is yes my friend... Also If you are tired of reading and want me to get out of your mind then I’ve got a video covering all this just watch the youtube video below.

{% youtube IH-7u1oOZ2I %}


## Source code

Source Code is Available in the description box below in the video. So do check it out...

## Subscribe For More

[![YouTube](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lvjpg9zn6xfcdkfxhl0x.png)](https://www.youtube.com/channel/UCLO_mjF4nvD4wYnTYRlYXsA?sub_confirmation=1)

## Contact Me

Website: [yashmakan.co.in](http://yashmakan.co.in)

Twitter: [@Yash_Makan](https://twitter.com/Yash_Makan)

## Contribute

buymeacoffee: [@Here](https://www.buymeacoffee.com/yashmakan) 

## Other Interesting Articles

- [21 must-read books for kids, beginner, advanced & interview with PDF 🐍](https://dev.to/yash_makan/21-must-read-books-for-kids-begineer-advanced-interview-with-pdf-56c7)
- [Improve your workflow using Automation in Python](https://dev.to/yash_makan/everything-about-automation-in-python-pc-mobile-web-raspberry-pi-4cgh)
- [4 ways to create modern GUI in python in the easiest way possible](https://dev.to/yash_makan/4-ways-to-create-modern-gui-in-python-in-easiest-way-possible-5e0e)
- [4 Free hosting platforms for python web app with step-by-step process](https://dev.to/yash_makan/4-best-python-web-app-hosting-services-for-freewith-complete-process-57nb)
- [18 Python one-liners that will speed up your coding process.](https://dev.to/yash_makan/18-python-one-liners-that-will-speed-up-your-coding-process-21md)
- [AI bot that could answer your questions](https://dev.to/yash_makan/ai-bot-that-could-answer-any-questions-asked-gmn)
- [Generate your own favourite TV episode using python](https://dev.to/yash_makan/generate-your-own-favourite-tv-episode-using-python-1pb3)
Meta(Facebook) University Grad (Full Time) Interview Experience — Off Campus
Published: 2022-05-18 17:55:00

Hi all 🙋🏻‍♂️

I am back with another interview experience. This time it’s Meta London  and Meta USA (Melon Park, Washington ,2 more locations) for 2 profiles — Frontend Engineer Role and Production Engineering.

Selection Status : Rejected(Meta Freeze hiring 😒I  don't no what it happening at Meta(Facebook))

Offer Accepted : ❌

Interview Experience : 💚💚💚💚


My Profile while applying
* 4rd Year student pursuing BTech. in CSE from THDC Institute of HydroPower Engineering and Technology.
* Google Summer of code and other opensource contributions.
* Founder of Soution#Hub 100+ installs at Google play store.
* Past internship experience with Mindtree, TheHouseMonk and LearnForCause and ColouredCow .
* Problem Solver

#### How I applied ?
Recruiter herself approached me via mail I didn't apply for Frontend Engineer Role and In Production engineer , I and my 2 close friends has attended their event of production engineering ,then we gave cold mail to recruiter.
Within 1 days, I received response from a recruiter that my process of interview has started by her and she send me some Linux exercise of MCQs.The exercise contained a combination of 20 MCQ. Each question had one correct answer. We had a maximum of 18 minutes to complete the exercise. . I solved it within 2 days , next day I got congratulation mail for moving ahead. 

#### Interviews:-
Now within 14 days my 2 interviews scheduled + mock interview with meta engineer.
Let's start with meta mock interview , it was good and my feedback was shared with me by recruiter I got 4.5/5 stars ,just 2 questions of DSA asked by interviewer.
Now my college is also creating issues do assignments, viva useless stuff in between. Anyhow my college didn't supported me , I have to manage now, I did possible prep in between collage issues. Now interview came 
1. System Interview:- All about Linux + Operating system questions kind of Viva (I did it well except 1 question I don't know ).
2. Coding Interview :- 2 questions of DSA (I did both correctly) because same questions came while I was practicing. It all went very well. 

Now Meta Freeze Hiring Seen raised , I really don't now what to do in  that condition , my recruiter is also out for vacations.
find the processes which are listening to a port on MacOS
Tags: linux, alias, cli
Published: 2022-05-18 17:46:52

---
title: find the processes which are listening to a port on MacOS
published: true
description: Tip for finding the processes which are listing on special port on MacOS
tags: linux, alias, cli,
//cover_image: https://direct_url_to_image.jpg
---

Sometimes, we couldn't start a docker service, because the configured port was used by another process. To find out which process is using this port. 
We can simply create an (zsh) `alias` as following:

```bash
# ~/.zshrc
alias port='lsof -i -P | grep LISTEN | grep $1'
```

Then just use this alias `port <number>` to find the running process on port `8080`:
```bash
➜  ~
❯ port 8080
node      10126 zhouxun   25u  IPv4 0x83e36c82e2c8dccb      0t0  TCP *:8080 (LISTEN)
```
> We found the process with PID `10126` and it was a node process.

Then we can kill the process by using(if needed, use `sudo`):
```bash
➜  ~
❯ kill -9 10126
```
What to do when you are a newbie dev?
Tags: beginners, programming
Published: 2022-05-18 17:39:36

I'm kind of new to development and I've been thinking about how to update my skills, so even though people work in a variety of ways, I see a good cycle for me to do this: coding, sharing my knowledge, and repeating it. And that's what I'm willing to do from now on.

Here I've summarized some tips that I truly believe work for me when I'm willing to take on new work and contribute as much as I can to a team. Hope you can take advantage of the tips and maybe adopt for yourself.

Let's look at these five tips:

**1. Offer to do something despite not dominating.**
This tip sounds crazy, but it's really nice to practice something instead of waiting to become a master. This will not happen overnight. You need to practice it.

Let's imagine a runner athlete. He will never become a good runner if he doesn't run again and again.

Offering to do something you haven't mastered is a great opportunity to practice and, even better, get feedback from others.

Try this! 🤓

**2. Talk about what you're doing.**
This post is an example of that. I'm trying to master so-called valuable development skills, so in addition to learning how to code better, I'd love to share my knowledge with anyone interested.

No matter what point in your career you are at, be prepared to share your knowledge kindly. Please try your best to explain to colleagues in an easy to understand way.

You may not find your audience easily, so writing in places like here (dev.to) is a great place to share what you're doing, what you've learned, how your code works.

Keep writing - code and texts 🤓

**3. Start a blog and public items regularly.**
In addition to talking about what you're doing, writing a blog seems like a good idea to document your efforts. Trust me, sometimes you will be helping yourself more by doing this than others.

The key to blogging is to pay attention to the details, to the way you communicate your ideas and knowledge.

This sounds like a repeated tip, but writing a blog is a whole new tool for your studies, it's a whole new way to document studies and worry about who possibly reads your stuff.

**4. Make time to do daily tasks for yourself.**
Sometimes we can go crazy learning new technologies and forget about little things like having lunch. Please don't do this to yourself.

Always make time for lunch, working out, showering, and other simple tasks that we might forget about or put off for a long time.

Be kind to your learning path and your body 😛

**5. If you're experiencing a problem, take a break.**

Learning is not easy sometimes. And if you keep trying hard to solve the problem, sometimes you won't clear your mind in one miraculous minute. If you feel stuck in a logic problem, feel free to take a break and come back later.

Sometimes giving your mind a break is better than pushing on. But don't forget to come back and don't give up.

Development is not as easy as many people would like us to believe 🥸
How-to Get Free API Security Testing Report
Tags: api, security, cloud, mobile
Published: 2022-05-18 17:38:40

I'm a security researcher. I deal with a lot of APIs. When it comes to security testing APIs, there aren't many tools for the job.

Most tools were built for web applications, especially for checking security flaws from legacy application server configurations, browser, session, account login, etc. But API has none of these issues.

When it comes to API security testing, a different tool is needed that can go deep into APIs, OAuth 2.0, and business-logic flaws rather than the legacy approach.

We came up with this simple tool that automatically security tests APIs. Please try this tool and get a free API security testing report for your public, mobile, and web APIs.

Here is the URL:
https://apisec-inc.github.io/pentest/
🚀 JUST FOR DEVS: Best Productivity App to find your Flow State 🌊
Tags: productivity, codenewbie, tooling, showdev
Published: 2022-05-18 17:22:47

Seriously, distractions are everywhere.

Submitting PR and squashing bugs go so much faster when you’re in your Flow State.

When you’re in the zone...you’re undistractable.  

**You’re the 10x version of you.**

Centered is the FREE app that gets you there.

**Crush your work**, faster and free of distractions, with:

✅ An AI Coach to keep you on track
✅ 150+ hours of science-backed Focus Music
✅ Fun Co-working Groups run by Kent C. Dodds, Cassidy Williams, Lenny Rachitsky and others
✅ A Distraction Blocker, Deep Analytics and so much more!

Want to try Centered Premium to get all customization features?  Upgrade with Stripe Code **SAMMISFRIENDS** for 3 free months of Premium.

Reach out to me on Twitter @sammigeraciyee and I’ll see you in Flow.

—> www.centered.app
Testing a React App with React Testing Library
Tags: react, nextjs
Published: 2022-05-18 17:20:01

A step by step guide on how to test a React App (made in Next.js in this case) with React Testing Library.

I created a very simple Next.js app to demonstrate how to test the whole functionality of it and approach different blockers when writing unit tests.

In this post I cover:

- Testing component’s behavior and emulating user events to assess for the expected result.
- Mocking API calls with msw library.
- Mocking custom and node_modules components imports in case they should not be included in our tests.
- Accessing to env variables in our tests.
- Troubleshooting some common errors we discovered while testing.

[Link to the blogpost](https://medium.com/white-prompt-blog/testing-a-react-app-with-react-testing-library-rtl-a782b8409fb)

Hope you enjoy it! If you have any doubts you can reach me at
[LinkedIn](https://www.linkedin.com/in/lucas-quinteiro-81421678/)
CREATE FILTERS FOR VIDEO RECORDING (Android)
Published: 2022-05-18 17:18:29

Hello everyone, 
I am relatively new here and I need some help I am open to exploring other possibilities within the community. 
I am looking for some open source for Filters video recording that I could use for our MVP on Android or OPENGL source.  
The only one found the quality of the filters is really not that good. Looking to see if someone might have other options and any recommendations. HIGHLY APPRECIATE!
Thank you! HAPPY WEDNESDAY! A.
RepoMetaScore: evaluate supply chain risks of open-source projects
Tags: opensource, security, github, analytics
Published: 2022-05-18 17:08:27

> Open-source software saves time on development but should be taken carefully, as the code is in the hands of maintainers and contributors you know nothing about. 

**🚩The threat of intentionally weaponizing open-source tools by criminals is growing every year.** Recently, novel risks have emerged: developers living in oppressed countries are being pushed into introducing backdoors involuntarily.

⚠️ Backdoors and vulnerabilities introduced into OSS can cause **ruinous aftermaths.** 

One of the ways to prevent them is to employ vulnerability scanners for analyzing third-parties libraries your project uses, but, unfortunately, sometimes they alert too late. 

Another option entails identifying and quantifying security risks linked to third-party libraries before adding them to your product.

## 🔎 RepoMetaScore

To help developers avoid risks associated with weaponizing OSS, our security engineers have built a [RepoMetaScore](https://www.cossacklabs.com/blog/introducing-repometascore/). It’s a tool that **collects information about the project and its contributors, analyzes it, and calculates risk ratings by several criteria**: GitHub and Twitter profiles, location, commit history, email domain, etc.  

> 💡 Note, that RepoMetaScore (📥 [GitHub] (https://github.com/cossacklabs/repometascore)) should not be used as the only tool for assessing open-source repositories’ credibility. Use it wisely as an additional tool for mitigating current threats in open source.

### 🔨 How RepoMetaScore works
Repometascore uses public information disclosed by contributors themselves. [RepoMetaScore](https://github.com/cossacklabs/repometascore) collects such info through the APIs and calculates results as a risk rating. It can be **the first tool in a series of security checkup** developers go through when deciding whether to add a certain project or not. 

> 💡 To use [RepoMetaScore](https://github.com/cossacklabs/repometascore), follow its [Readme](https://github.com/cossacklabs/repometascore#readme). It’s a simple python package that should work on any Unix and Mac. 

Provide [RepoMetaScore](https://github.com/cossacklabs/repometascore) with a link to a repository-in-question—and get the risk rating results and general information about repository contributors.
React component for Bank Nue Font text
Tags: react, html, fonts, styledcomponents
Published: 2022-05-18 16:52:00

**What:** A fun little component to showcase the Bank Nue Font, which has been designed as a multi-colour display font, especially for bigger sizes. The component displays a given text as in the picture above, by superposing two styles.

The [Bank Nue Font](https://dafontfile.com/bank-nue-font/) page says: _This font comes in two styles, which can be combined and layered to create a dynamic and striking appearance._

**Using:** React, typescript, and styled-components.

**In your React app, create (or add to) the files as follows:**

STEP 1. From the Bank Nue Font page given above, download the following files into "src/fonts" folder:
* banknue-lined-webfont.woff
* banknue-lined-webfont.woff2
* banknue-sectioned-webfont.woff
* banknue-sectioned-webfont.woff2

STEP 2. Add to "src/index.css":
```js
@font-face {
  font-family: 'banknuelined';
  src: url('./fonts/banknue-lined-webfont.woff2') format('woff2'),
       url('./fonts/banknue-lined-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'banknuesectioned';
  src: url('./fonts/banknue-sectioned-webfont.woff2') format('woff2'),
       url('./fonts/banknue-sectioned-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
```

STEP 3. Our new component "src/components/BankNueFontText.tsx":
```js
import styled from "styled-components";

type StyleProps = {
  size: 1 | 2 | 3 | 4 | 5 | 6;
};

const Container = styled.div<StyleProps>`
  position: relative;
  font-size: ${({ size }) => size * 30}px;
`;

const Stripes = styled.div`
  font-family: banknuelined;
`;

const Shadow = styled.div`
  position: absolute;
  font-family: banknuesectioned;
  mix-blend-mode: multiply;
  /* mix-blend-mode: luminosity; */
`;

const ShadowBlue = styled(Shadow)<StyleProps>`
  color: #00cef1;
  top: ${({ size }) => size}px;
`;

const ShadowRed = styled(Shadow)<StyleProps>`
  color: #fa0007;
  top: ${({ size }) => size * 2}px;
  left: -${({ size }) => size}px;
`;

type Props = {
  size?: 1 | 2 | 3 | 4 | 5 | 6;
  text: string;
};

// See: https://dafontfile.com/bank-nue-font/
const BankNueFontText = ({ size = 3, text }: Props) => {
  return (
    <Container size={size}>
      <Stripes>{text}</Stripes>
      <ShadowBlue size={size}>{text}</ShadowBlue>
      <ShadowRed size={size}>{text}</ShadowRed>
    </Container>
  );
};

export default BankNueFontText;
```

STEP 4. In any of your components or pages, add:
```js
const text = "bank";
...
return (
...
  <BankNueFontText size={4} text={text} />
...);
```

Suggestions/questions are welcome.
Getting Started with Appwrite on YouTube! 🎥
Tags: appwrite, opensource, tutorial
Published: 2022-05-18 16:30:50

[Appwrite](https://appwrite.io) has always been about providing developers with a core set of functionality needed to build any application with any stack. From database interactions to authentication, real-time updates, and more. Developers are only limited by their imagination on what they can build. To provide another way for developers looking to use Appwrite, we are adding videos to our YouTube channel to provide overviews of Appwrite’s main features!

In the first **Appwrite 101** video, we walk through getting started and installing with Appwrite and an overview of the Appwrite Console.

{% youtube aO4mw8smXkI %}

We have more videos planned that will be coming soon! Visit our YouTube channel and subscribe to get notified when new videos are published!

[https://youtube.com/appwrite](https://youtube.com/appwrite?sub_confirmation=1)

## Learn More

🚀 [Getting Started Tutorial](https://appwrite.io/docs/getting-started-for-web)
🚀 [Appwrite GitHub](https://github.com/appwrite/appwrite)
📜 [Appwrite Docs](https://appwrite.io/docs)
💬 [Discord Community](https://appwrite.io/discord)

If you liked this, click the ❤️  so other people will see it. Follow [Brandon Roberts](https://twitter.com/brandontroberts) and [Appwrite](https://twitter.com/appwrite) on Twitter for more updates!