teleren/devto huggingface dataset:
Social Media App Using MERN Stack
Tags: react, node, mern, javascript
Published: 2021-05-25 19:58:21

If you want to be a full-stack web developer and stuck at just beginner projects, here is the chance to improve your skills and create something real. I decided to share my 9 hours tutorial series on YouTube for free.

We are going to create a social media application from scratch. And this project is not going to include just a basic couple of methods and an unpleasant design, it's going to include a complete web API, impressive React components, and chat functionality.

Let's dive into it!

# Creating Node.js Rest API

In this section, we are going to create an Express server and the MongoDB connection. You are going to learn how to create Models and Routes. And after the section, you will be able to create your own web API, login and register operations, and CRUD for users and posts.

{% youtube ldGl6L4Vktk %}

# Designing React Components

In this section, we are going to design Facebook like website using reusable React components and React Hooks.

{% youtube zM93yZ_8SvE %}

# Creating MERN Stack Social Media App

In this 3rd section, we are going to combine our Rest API and React UI design. You are going to learn real-world usage of a MERN application.

{% youtube pFHyZvVxce0 %}

# Realtime Chat App Using Socket.io

I separated this part.
⚡️ [Go to the messenger part](https://dev.to/safak/react-instant-chat-app-using-node-js-and-socket-io-5c7k)

I hope it was useful. If you want to learn more about web development and practice with real-world projects, you can check my channel out.

📹 [Full Stack Youtube Clone (5 Hours free tutorial)](https://dev.to/safak/full-stack-youtube-clone-5-hours-free-tutorial-2kfg)
🛍️ [Full Stack E-Commerce App (+8 Hours free tutorial)](https://dev.to/safak/full-stack-e-commerce-app-8-hours-free-tutorial-10pb)
📺 [Full Stack Netflix App (+7 Hours free tutorial)](https://dev.to/safak/full-stack-netflix-app-7-hours-free-tutorial-1o6l)

🔥 [Lama Dev Youtube Channel](https://www.youtube.com/c/lamadev)
⚡️ [Lama Dev Facebook](https://www.facebook.com/lamaWebDev)
👾 [Source Code](https://github.com/safak/youtube/tree/mern-social-app)
React Icon Library
Published: 2021-05-25 19:48:36

I'm currently working on an app that has a list of products. I wanted to add an (up to) 5 star rating under each product.  So after much research online I found the React Icon Library!

To install the icon library go to your terminal and type: npm install react-icons --save

In your browser go to https://react-icons.github.io/react-icons

You can see all of your icon options in the browser. 

Create a new class component (mine is called 'Rating.js'), and make sure to import the names of the icons you want to use. For example:

import { IoIosStar, IoIosStarOutline } from 'react-icons/io'

I love finding new things to add to my apps! Hopefully this will help you in the future!
Shopping Cart JavaScript 😍
Tags: javascript, html, css, 100daysofcode
Published: 2021-05-25 19:46:48

Shopping Cart Using HTML5, CSS3 & JS 😎

Demo : https://shopping-cartjs.netlify.app/

Code : https://github.com/saidMounaim/100DaysOfCode/tree/main/Day17


My #100DaysOfCode Challenge :
https://github.com/saidMounaim/100DaysOfCode/
Parent & Child Data transfer
Tags: vue
Published: 2021-04-30 10:58:44

list.vue
```vue
<template>
    <div style="border: #00b7ee solid 4px;padding: 20px">
      <h1>This is the tcl test page.</h1>
      <h1>{{this.people}}</h1>
      <ckt :property_test="this.people"></ckt>
      <button @click="demo_method">list.vue组件中的按钮</button>
    </div>
</template>
 
<script>
import Ckt from '@/views/modules/aaadir/form'
export default {
  name: 'list',
  components: {
    Ckt
  },
  data () {
    return {
      people: {
        name: 'tcl',
        age: 40,
        property: 'company'
      }
    }
  },
  methods: {
    demo_method () {
    //  子组件中的值，由父组件通过property方式传递给子组件，父组件中源数据变化，子组件中的值也会跟着变动
      this.people.age = ++this.people.age
    }
  }
}
</script>
 
<style scoped>
 
</style>
```
form.vue
```vue
<template>
    <div style="border: #00b7ee solid 4px; margin: 10px">
      <br><br>
      <h1 style="color: #00b3a4">这是form.vue中的第一行</h1>
      <button @click="demo_method">这是form.vue中的按钮</button>
      <h1 style="color: #00b3a4">这是form.vue中的第二行</h1>
      <h1>{{this.property_test}}</h1>
      <h1>名字为：{{this.property_test.name}}</h1>
      <h1>年龄：{{this.property_test.age}}</h1>
      <h1>类型：{{this.property_test.property}}</h1>
    </div>
</template>
 
<script>
 
export default {
  name: 'Ckt',
  // 在子组件定义部分，需要把父组件传递过来的 property_test属性，先在props数组中定义一下（代表这个属性是由父组件传递过来的），这样，才能使用这个数据
  props: ['property_test'],
  watch: {
    property_test: function (newVal, oldVal) {
      console.log(`newVal为:${newVal}`)
      console.log(`oldVal为:${oldVal}`)
    }
  },
  methods: {
    demo_method () {
      console.log('test one.')
      // 下面两种方式可以修改父组件中的值，但是这种随意的修改父组件中的值，会让代码变得难以维护，建议采用显示的 $emit方式。
      // 详情参考：https://jithilmt.medium.com/vue-js-2-two-way-data-binding-in-parent-and-child-components-1cd271c501ba
      // 和下面的方式一样，子组件中值得变化，父组件中变量也会跟着变动。
      // this.property_test.age = this.property_test.age + 1
      // 和上面的方式一样，子组件中值的变化，父组件中变量值也跟着变动。
      this.$set(this.property_test, 'age', ++this.property_test.age)
    }
  }
}
</script>
 
<style scoped>
 
</style>
```
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cpw2o1xwg3mk3udg3mjw.png)
Counting the Internet
Published: 2021-05-25 19:17:27

It is a struggle even to know your limitations, much less engineer systems bigger than you can imagine, but that is your own problem. The size of the Internet isn't constrained by understanding.

How many packets are received in a second? You can count them - not easy, but not impossible - but you can't imagine the number. Now picture the number of packets in an hour, day, year, decade. 

What does a decade's worth of packets look like? It's an immense flow, and it's only a small part of the total. 

The first packets were exchanged in 1973, 48 years ago at this writing. What is the size of the Internet? One way to answer that is to count all the packets since 1973 to your present moment.

The beauty of this method is that it fits in a neat mental package. If you can think it, if your machinery can handle it at all, that is a victory.
Learn React JS - Creating a React App- Part 2 (Series)
Tags: webdev, react, html, javascript
Published: 2021-05-25 19:14:47

Hello everyone 👋,

In the previous article, we learned about the basic concepts of React which covered JSX, React Element, Rendering the element, etc.

In the 2nd part of the **Learn React JS** series, we will cover on Creating a React App with `Create React App` tool.

## Creating a React App with Create React App

In the 1st part of this series, we have created the React App by adding React & React DOM CDN URL directly in the `<script>` tag. The reason to use **Create React App** tool over the above method is, it helps with tasks like

1. Scaling to many files and components.
2. Using third-party libraries from npm.
3. Detecting common mistakes early.
4. Live-editing CSS and JS in development.
5. Optimizing the output for production.

Without further delay, let's create an app with Create React App tool.

* Run the below command in terminal to install the Create React App package.
```
npm install -g create-react-app
```
* The below command creates a new app. So, please make sure to update the 2nd argument. It is the application name.
```
create-react-app first-app
```
* Once its successfully created the app, you can able to see the below screen. 
    ![New App](https://i.ibb.co/3h0XcdR/Screenshot-2021-05-26-at-12-07-04-AM.png)
* Then, go to the project folder and run the app.
```
cd first-app
yarn start
```
* The command `yarn start` will automatically start a server and listen it on port `3000`. This will be the first screen you will see in `http://localhost:3000/`.
![Initial output](https://i.ibb.co/tHVVNBD/Screenshot-2021-05-26-at-12-13-19-AM.png)

To modify the content, open `App.js` file under `src/` folder and start updating the code inside the `return` block. I've updated the code to keep only `h1` tag to show as First app. Save the file and automatically the new changes will be reflected in the UI.

**Original Content**

```jsx
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;
```


**Modified Content**

```jsx
import './App.css';

function App() {
  return (
    <div className="App">
      <h1>First App</h1>
    </div>
  );
}

export default App;
```

The output with modified content:

![](https://i.ibb.co/vx7Fk9T/Screenshot-2021-05-26-at-12-30-02-AM.png)

Here's my github repo where you can find the files in the **part-2** branch. We will keep updating this repo for every part. So, please bookmark it.

 {% github yuvgeek/learn-react no-readme %} 

In the next article, we will learn how to create components & the difference between Functional and Class Components.

Thanks for reading the article!
Day 92
Tags: 100daysofcode, programming
Published: 2021-05-25 19:09:48

Day 92/200 of #200DaysOfCode #100DaysOfCode

- Solved three problems on Codewars.

1 - [Cancer cells](https://www.codewars.com/kata/5931614bb2f657c18c0001c3) (6 kyu) || [MySolution](https://github.com/Rb-wahid/My-Coding-Experience/blob/master/src/Codewars/6%20kyu/CancerCells.js)
2 - [Evil Autocorrect Prank](https://www.codewars.com/kata/538ae2eb7a4ba8c99b000439) (6 kyu) || [MySolution](https://github.com/Rb-wahid/My-Coding-Experience/blob/master/src/Codewars/6%20kyu/EvilAutocorrectPrank.js)
3 - [Trim a String](https://www.codewars.com/kata/526e8de0512511429e000006) (6 kyu) || [MySolution](https://github.com/Rb-wahid/My-Coding-Experience/blob/master/src/Codewars/6%20kyu/TrimAString.js)







[Become Code Warriors](www.codewars.com/r/YECsUA)
String obj:
Tags: beginners, javascript
Published: 2021-05-25 19:04:18

#string Objects#
in js strings are objects.
The String object lets you work with a series of characters; it wraps Javascript's string primitive data type with a number of helper methods.
Use the following syntax to create a String object :
let value = new String(string);

**string property**

length Returns the length of the string.
e.g.
*let  human = " john pepper";
human.length;
let length = human.lenght;
console.log(human.length);*

##String Methods##
###CharAt():###
return the character at specified index.
*let  human = " john pepper";
console.log(human.charAt(1))  // o*

###indexOf():###
Returns the index within the calling String object of the first occurrence of the specified value, or -1 if not found.
*let  human = " john pepper";
console.log(human.indexOf(e));  // 6*

###toLowerCase():###
Returns the calling string value converted to lower case.
*let  human = " John Pepper";
console.log(human.toLowerCase());  //john pepper

###toUpperCase():###
Returns the calling string value converted to upperCase.
*let  human = " John Pepper";
console.log(human.toUpperCase()); //JOHN PEPPER*

### slice()###
Extracts a section of a string and returns a new string.
*let  human = " John Pepper";
console.log(human.slice(1,4)); //OHN*

This is all for now I'll share more in my upcoming posts.
FFmpeg the Easy Way
Tags: ffmpeg, javascript, vue, webdev
Published: 2021-05-25 18:55:00

[FFmpeg](https://www.ffmpeg.org/) has many [simple](https://ffmpeg.org/ffmpeg.html) and [complex options](https://ffmpeg.org/ffmpeg-filters.html), which can be intimidating at first. So I wanted to create a simple, web-based interface for generating common encoding operations for video and audio, inspired by [HandBrake](https://handbrake.fr/).

[ffmpeg-commander](https://alfg.github.io/ffmpeg-commander/) is a web-based FFmpeg command generator written in JavaScript using the [Vue Framework](https://vuejs.org/). It is [open source](https://github.com/alfg/ffmpeg-commander) and hosted on GitHub Pages.

https://alfg.github.io/ffmpeg-commander/

![ffmpeg-commander](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0ixx1ap4j9htbejgp10i.PNG)
 
`ffmpeg-commander` supports generating most of the common operations for encoding video, such as the container, codec, video & audio settings, some basic filters and more.

Once the command is generated, you can easily copy the output to your clipboard or save it to the browser's local storage. A few presets are also available as an example.

I'm looking to expand on more general options and filters in the future.

## `ffmpegd`
[ffmpegd](https://github.com/alfg/ffmpegd) is an optional companion application that connects `ffmpeg-commander` to ffmpeg by providing a [websocket](https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API) server to send encode tasks and receive realtime progress updates back to the browser. This allows using `ffmpeg-commander` as a GUI for ffmpeg.

The goal is to provide a simple interface for sending FFmpeg tasks from the browser (and other supported clients in the future) to your local machine.

https://github.com/alfg/ffmpegd

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

`ffmpegd` is written in [Go](https://golang.org/) and implements the [Gorilla Websockets](https://github.com/gorilla/websocket) library.

Please note, this is still considered experimental and a work-in-progress. Feel free to report any bugs at https://github.com/alfg/ffmpegd.

Hopefully you find these tools helpful for working with FFmpeg. ☺️

## Thanks for reading!
Find me on GitHub at: https://github.com/alfg for more video-related projects!
What is the best industry practices when it come to conditionally loading website data?
Tags: webdev, help, feedback
Published: 2021-05-25 18:50:04

---
title: What is the best industry practices when it come to conditionally loading website data?
published: true
description: Best practices for conditionally loading website data
tags: #webdev #help #feedback
cover_image: https://res.cloudinary.com/babyhulk/image/upload/v1621356630/og/Life_Inspirational_Quote_Desktop_Wallpaper.png
---


Hello everyone,

I need some advice on the best industry practices when it comes to loading data to ensure that my website is performant.

I am currently working on a Travel blog that has a video in the Hero section. I only want this to load for large screens (desktop) and individuals with a fast internet connection. I want to make sure that the site experience can be accessible and enjoyable for  everyone, no matter what internet speed they have.

Here is the blog - https://mtwblog.vercel.app/

Tech Stack
NextJS
Sanity CMS

What is the best solution to achieve this? 

Any advice will be greatly appreciated.

Cheers! 

Kenny ✌🏽 + ❤️
MongoDB, find() e findOne()
Tags: mongodb, nosql, node, braziliandevs
Published: 2021-05-25 18:45:07


###Métodos
Para fazer uma busca por documento no MongoDB utilizamos os métodos find() e findOne(), que recebem dois tipos de parâmetro: a query, que irá fazer a busca no nosso banco de dados e o segundo parâmetro, que dizemos o que será retornado.

*Nosso Documento*
```js
{
    "name": "Emanuel",
    "password": "123456",
    "email": "emanuel@gmail.com"
}
```

*Exemplo do Comando*
```js
const query = { name: "Emanuel"}
const retorno = { name: 1, email: 1, password: 1}
const users = await db.users.find(query, retorno)
```


##Método find
O Método find retorna uma array com todos os documentos que foram encontrados utilizando o campo `name`. 

*Query*
```js
const users = await db.users.find({ name: Emanuel })
```

*Retorno*
```js
[{ "_id": 12345678, "name": "Emanuel", "password": "123456", "email": "emanuel@gmail.com"}]
```


##Método findOne
O Método findOne retorna o primeiro documento que ele encontrar na collection que corresponda com o campo name.

*Query*
```js
const users = await db.users.findOne({ name: "Emanuel" });
```

*Retorno*
```js
{ "_id": 12345678, "name": "Emanuel", "password": "123456", "email": "emanuel@gmail.com"}
```

## Como retornar campos específicos?
No MongoDB, quando desejamos retornar dados específicos de um documento, usamos um segundo parâmetro que é um objeto passando o nome do campo como chave e o valor sendo 0 ou 1.

Para cada campo que você deseja retornar do seu documento, você utiliza o dígito 1.

Após utilizar o dígito 1 você não pode utilizar o digito 0, que remove algum campo do retorno e vice-versa.


#### Exemplo com Dígito 1
*Query*
```js
const users = await db.users.findOne({ name: "Emanuel" }, { name: 1, email: 1 });
```

*Retorno*
```js
{"name" : "Emanuel", "email": "emanuel@gmail.com"}
```

#### Exemplo com Dígito 0
*Query*
```js
const users = await db.users.findOne({ name: "Emanuel" }, { name: 0 });
```

*Retorno*
```js
{"email": "emanuel@gmail.com", "password": "123456"}
```

## Como buscar em campos aninhados?
Vamos supor que o seu documento siga o padrão abaixo:
```js
{
    "interests": {
       "id": { type: String },
       "name": { type: String }
    }
}
```

Para acessar o campo id ou o campo name você pode utilizar:

*Exemplo*
```js
const users = await db.users.findOne({ 'interests.name': "Emanuel" });

//Disponível apenas na versão 4.4 do MongoDB
const users = await db.users.findOne({ interests: { name: "Emanuel" }});
```

*Retorno*
```js
{"name": "Emanuel", "email": "emanuel@gmail.com", "password": "123456"}
```

###Conclusão
Então, utilizamos o método find quando desejamos retornar mais de um resultado e método findOne quando desejamos retornar somente um resultado. Assim, melhorando até a perfomance da query.

Linkedin: [Emanuel Ferreira](https://www.linkedin.com/in/emanuelcferreira/)
Email: contatoferreirads@gmail.com

Revisão do Texto: [Ana Julia Lima](https://www.linkedin.com/in/ana-julia-lima-6222b1210/)
VSCode Shortcuts✂️ - Toggle Terminal: Redefined
Tags: vscode, programming
Published: 2021-05-25 18:34:42

I always hated the shortcut that VSCode gives you to toggle your integrated terminal:

```
ctrl + `
```

Feels uncomfortable on the left hand. I have found myself moving my hands away many times from the home row keys. And even worse: Looking down at the keyboard to make sure I don't miss any of these keys (ctrl + `).

```
Home row keys
Left hand: A, S, D
Right hand: J, K, L
```

The integrated terminal happen to be one of the most useful tools that and Text Editor for programming can offer. It's an essential need.

So, instead of using such uncomfortable shortcut that clutters your fingers to toggle your terminal you'd better consider using from now on:

```
cmd + j
```

It gives me such a pleasure to toggle my integrated terminal with this shortcut. It just feels natural. Like a breeze.
The way it should be considering that it's probably an `day-to-day-every-five-minute` shortcut that you'd use.

> _Note that this shortcut `(cmd + j)` isn't covered by the VSCode documentation `(at least I couldn't find it)`, neither appears in the `View` dropdown menu in your VSCode._

Well... Hope that this little shortcut helps you in your day to day development life.

Do you have any cool shortcuts you want to share with me? Drop out your shortcuts on *Twitter!* [@dev_astador](https://twitter.com/dev_astador)
Operators in Java
Tags: java, motivation, goal, beginners
Published: 2021-05-25 18:29:39

Hello readers it's day seven of my learning Java journey and today I will share with you my learning of Operators in java.

As we have symbols in mathematics to perform certain calculation say the plus '+' for addition and so on similarly we have operators in Java to perform either a mathematical or logical  manipulation

+ Java has four types of operators:-
  i. Mathematical
  ii. Logical
  iii. Relational
  iv. Bitwise

# Mathematical Operators - 
  + it contains all the symbols that are used in mathematical computation only just be a bit careful with the use of **/** and **%**.

| Symbol        | Function  |
| ------------- |:-------------:|
| +     | addition |
| -      | subtraction |
| * | multiplication      |
| / | integer division (returns quotient)  |
| % | modulus (returns remainder) | 
| ++| increment |
| -- | decrement |

  + the increment (++) and decrement (--) operators increase or decrease the value of operands by one.
  + it can be used in two ways either prefix or postfix.

# Relational  and Logical Operators - 
  + relational and logical operators are used to show decide or compare two operands and they produce result as of type **Boolean** that is either true or false.
  + in case of logiacal operators the operands must be in form of **boolean** values.

+ Relational Operataors:-


| Symbol        | Function  |
| ------------- |:-------------:|
| >     | greater than |
| <      | less than |
| >= | greater than equal to      |
| <= | less  than equal to |
| == | equal to | 
| !=| not equal to|

  + Logical Operators:-

| Symbol        | Function  |
| ------------- |:-------------:|
|&  | AND |
| | | OR |
| ^ | XOR      |
| || | SHORT-CIRCUIT OR|
| && | SHORT-CIRCUIT AND| 
| !| NOT |

+ **the difference between normal and short-circuit logical operators is that normal ones evaluate each operand but in case of short-circuit they only evaluate the second condition of necessary**
+ <u>the short-circuit operators are also known as conditional-and </u> and <u>conditional-or operators.</u>

# Assignment Operator -
  + it is used for assigning values to variables.
  + it is represented by normal '=' sign and should not be confused with '==' of relational operators.
  + java also allows you to make a chain of assignments that is to make them get a common value.
    ```
     int a, b, c;
     a = b = c =1;
    ```
# Shorthand Assignment - 
  + it is used to simplify the coding convention and save some time.
for example-
```
  x = x + 10;
can be re-written as 
  x += 10;
```
Popup Message(Modal), in 10 lines of Javascript;
Tags: javascript, tutorial, css
Published: 2021-05-25 18:29:14

<a href="https://www.buymeacoffee.com/areeburrub" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" alt="Buy Me A Coffee" style="height: 41px !important;width: 174px !important;box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;-webkit-box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;" ></a>

So you might have seen popup message on some website, here is a simplest way to make that

{% codepen https://codepen.io/areeburrub/pen/wvJeeOK %}

So to make this I have created a div with id Modal-1, using position property in css fixed the position at the center and then set the display to none so that it's hidden by default.

I have changed the background and given the modal a frost glass effect.

> You can try the frost glass effect, check this out : [Frost Glass Effect](https://dev.to/areeburrub/have-the-frost-glass-effect-on-your-website-see-how-hok)

Now, using javascript I have added a event listener to both the click button and close button you can initialize the popup in whatever way you want.

To Make the popup visible I changed the elements style display to block this will make the modal visible, to make the close button work again change the style.display to none.