teleren/devto huggingface dataset:
WebSocket V.S HTTP
Tags: webdev, architecture, beginners
Published: 2022-10-25 11:02:44

## Introduction
 

WebScoket and HTTP both are protocols used to transmit data over network and both of them built upon TCP so what the purpose and when to use each one, and here is the story.

Hence the more popular one is HTTP we will take it first, HTTP mechanism is based on Request/Response strategy so there is must be client (browser/mobile/another back end service) that send the request first and the server process the request and send the response then connection closed (can use keep-alive header to make TCP connection open for a while but mainly HTTP request is finished).


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b0ebu0tcxcdpk8kxda91.png)

So regarding to HTTP Request/Response mechanism which needs the client to ask for data then server response, we needed a way to make the server pushes data to the client (without client asking for it) this is the need for such WebSocket protocol, WebSocket works as this 

First the client needs to start to communication with the server so it sends an HTTP request to server with upgrade request to indicate to server this request need to be converted to another protocol, Then server respond with channel created, then communication established, therefore any of both side now are aware of each other and can accept data from each other so server can now send a data based on current event without request from client itself.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/67wrcm8rbgolu4t5bjtq.png)

Also it's very helpful for making **Asynchronous** calls that the client should not wait for a long request to be done, just release it and when server is finished will send the result to client.

HTTP request starts with http:// but WebSocket start with ws:// or wss:// for secure connection and also HTTP is stateless but off course WebSocket is stateful.

whenever any of both side close the connection the communication channel is closed and need to be open again from client.

## Resources

- [WebSocket crash course](https://www.youtube.com/watch?v=2Nt-ZrNP22A)

- [Why is so hard to cancel HTTP request](https://youtu.be/WmPKzFYKijM)

IF YOU LIKED THE POST, THEN YOU CAN SUPPPORT SUCH CONTENT WITH A CUP OF COFFEE, THANKS IN ADVANCE.

<a href="https://www.buymeacoffee.com/samehmuh95" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="41" width="174"></a>
Step-by-step PhantomJS web scraping guide
Tags: javascript, node, beginners, webscraper
Published: 2022-10-25 10:41:03

An very nice example of how to use PhantomJS in a NodeJS environment.
**Bonus** code for retrieving the HTML content from a given URL.
https://levelup.gitconnected.com/how-to-scrape-websites-with-phantomjs-66c2296547b0
It took me 3 years to understand Destructuring in JS
Tags: javascript, destructuring, beginners
Published: 2022-10-25 10:35:50

Hi,

my name is Madina and I'm trying to transition into junior developer role. 
I started my journey long time ago. I paused, took breaks, questioned my life choices and current state is that I'm doing an online bootcamp (65% done) ✅ 

I did all the courses on JS, which you can only imagine, any format: YouTube tutorials, blogs, courses paid & free...

It took me 3 years to grasp on the concept of Destructuring in JS. I just couldn’t get it. Now I can tell that I finally understood it)

Given an object

```
let person = {
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}
```
I don’t  want the whole object, just some parts of it:

```
const { userId, title } = person;

```

So, Destructuring is a way of cutting pieces of a cake 🎂  🍰 

```
let cake = { 🎂 }
```
Results in
```
let { 🍰 } = 🎂
```

I hope it could help someone out there!
football
Tags: python, beginners, programming, tutorial
Published: 2022-10-25 10:21:27

[8:22 PM, 10/24/2022] Dantechdevs: COURSEWORK 1
To complete this coursework, you will design the behaviour of simple programs involving the fundamental programming
constructs - variables, expressions, assignments, I/O, and control constructs. Time in class will be provided for
coursework feedback. Advice will be given in class on how to improve your work. Final mark and rubric feedback will be
discussed on a short 1-1 demo after submission.
A prestigious football club has hired our Software Development company. As we know, football's players transfer from
one club to another every year. There are several aspects to estimating their salary, such as their skills, performance in
the previous seasons, age, improvement, personality etc. The manager of the club wishes to estimate the salary o…
[8:22 PM, 10/24/2022] Dantechdevs: From the dataset above, I the ove
12:37
If the overall rate less than 30, the salary output be 400.
If the overall rate between 60 and 45, the output should be 700 500.
You can find out more about player's ratings and estimating salary at:
speed-card
https://www.fourfourtwo.com/features/fifa-22-player-ratings-explained-chemistry-fut-ultimate-team-pace-passing-
Oo, the output should be 1000
https://www.researchgate.net/publication/318655683 Computational Estimation of Football Player Wages
http://eightyfivepoints.blogspot.com/2019/05/from-sessegnon-to-sanchez-how-to.html
https://www.capology.com/uk/premier-league/salaries/
There are three tasks you need to complete for this coursework:
Task 1. Write the pseudocode OR draw a flowchart that you will use for you…
My flutter course is approved
Tags: webdev, beginners, programming, flutter
Published: 2022-10-25 10:17:49

Hello house, my long awaiting flutter course is approved, check the intro video

{% embed https://www.youtube.com/watch?v=54_UD3KlijQ %}

Course: [Course: https://www.aqskill.com/courses/complete-android-and-ios-application-development-using-flutter-3-0/?r=176](https://www.aqskill.com/courses/complete-android-and-ios-application-development-using-flutter-3-0/?r=176)
Transitioning from NoSQL to also implementing SQL
Tags: mysql, sql, tutorial, programming
Published: 2022-10-25 10:11:55

Transitioning from NoSQL to also implementing SQL has been a great leap in my career as a developer.

Here are a few important tips that I have learned and are helping me in implementing SQL properly in projects.

1. The MySQL workbench

The MySQL Workbench is an alternative to the MySQL command line. It enables the creation of schemas and tables using the GUI and also generates query codes that can be run on the command line. It is a great tool when working with structured data.

2. Communicating from NodeJS to MYSQL Database

I experienced difficulties here due to the fatal authentication error I received after installing the MySQL node package. The solution that I had for this was to rather install mysql2 in place of the MySQL, import as MySQL, and use it in my server.js.

Thanks to this [resource on stackoverflow](https://lnkd.in/dWY_cakG) for helping with this solution.
 

I'm Paul Ishaili C., and I share interesting thoughts and processes for solving problems and truly understanding programming.


#developer #programming #nodejs #mysql #database #sql #projects #career #nosql
Join my Telegram Channel 👉 https://t.me/devpacademy for more.
Tools and Web Site helpful for Java folks
Tags: java, aws
Published: 2022-10-25 10:09:18

#### Websites

1. [json2csharp.com](https://json2csharp.com/code-converters/json-to-pojo ) - this website  helps to convert JSON string to Java Classes
2. [yamllint](http://www.yamllint.com/) - now a days Yml/Yaml is used across java projects as config tool, it's really hard to validate yml file structure as a single space can make yml corrupted, yaml lint helps to validate formatting of yml file

#### InteliJ Idea Plugins

1. [GitLink ](https://plugins.jetbrains.com/plugin/8183-gitlink)- Gitlink Plugin Integrates most of the popular Git Based platform (GitLab, Bitbucket etc) to InteliJ Idea so Developers can open Web console directly from IDE
2. [AWS toolkit](https://aws.amazon.com/intellij/) - Rather than logging into aws console dev's can Trigger lambda, ecs tasks directly from IDE using this plugin

#### Tools

NotePad++ - NotePad++ Regulars expression Search/Replace functionality and Column Mode (Alt+select) helped me to improve my productivity significantly

Along with these tools using various shortcut's in InteliJ helped me to improve my productivity and speed of the development

more suggestion please ?
10 Tips to Secure Your MetaMask Wallet
Tags: blockchain, web3, cybersecurity, beginners
Published: 2022-10-25 10:03:16

It's no secret that cryptocurrency wallets can be hacked. In fact, it's happened to some of the biggest exchanges and wallets out there. So it's important to take extra precautions when it comes to securing your MetaMask wallet.

**Here are some tips on how to do just that:**

## 1. Use a strong password

This may seem like an obvious one, but it's worth repeating. Your MetaMask password should be strong, unique, and not used for any other online account.

## 2. Enable 2FA

Two-factor authentication (2FA) adds an extra layer of security to your MetaMask account. We recommend using an app like Authy or Google Authenticator for this.

## 3. Use a hardware wallet

A hardware wallet is a physical device that stores your MetaMask private keys. This is the most secure way to store your MetaMask keys, as they're not stored on a computer or online.

## 4. Use a paper wallet

A paper wallet is another offline option for storing your MetaMask keys. This involves printing out your MetaMask seed phrase and private key on a piece of paper.

## 5. Keep your MetaMask software up to date

MetaMask regularly releases updates to their software. Be sure to keep your MetaMask software up to date to ensure you have the latest security features and fixes.

## 6. Don't share your MetaMask seed phrase

Your MetaMask seed phrase is your backup for your MetaMask account. It should be kept safe and secure, and never shared with anyone.

## 7. Review MetaMask's security features

MetaMask has a number of security features to help keep your account safe. Be sure to familiarize yourself with these features and how to use them.

## 8. Use a secure connection

When logging in to your MetaMask account, be sure to use a secure connection. You can do this by ensuring that the URL begins with "https://" and has a green padlock icon next to it.

## 9. Avoid phishing scams

Phishing scams are a common way for hackers to try and gain access to your MetaMask account. Be sure to avoid clicking on any links or attachments from unknown senders.

## 10. Report any suspicious activity

If you see any suspicious activity on your MetaMask account, be sure to report it to MetaMask immediately.
Audio node processing diagrams
Tags: javascript, react, audio, api
Published: 2022-10-25 10:02:52

https://calinalexandru.github.io/audio-diagrams/
![audio nodes processing diagram](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9md8r2ie1aleff1zw5kr.png)

Drag & drop any node from the right panel (Speaker output cannot be removed).

Currently you can use: Oscillator, Analyser, Biquad Filter, Delay, Panner, Gain, Buffer, Microphone.

Audio nodes are based on the modern Web Audio API.

Let me know what you think - contributions are welcome!
Higher Order Functions
Tags: javascript, webdev, beginners, map
Published: 2022-10-25 10:00:10

So, what are higher-order functions?

Functions that operate on other functions, either by taking them as arguments or by returning them, are called higher-order functions.

Example-Map, Filter, and Reduce

**Map**- It creates a new array by calling a function for every array element. It calls a function once for each element in an array. It does not execute the function for empty elements and does not change the original array.

Example-

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ei5s0faz38nlstdgb9yn.jpg)

Output-

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5f4b406p7d9fsi4o3dgt.jpg)

The above example shows how easily we can get the desired result using the map function.

**Filter**-It creates a new array filled with elements that pass a test provided by a function.

Example-

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rtmdxfraz3g3mez3plgg.jpg)

Output-

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8jubtls84hyvxwnmw01c.jpg)

**Reduce**- It executes a reducer function for the array element. It returns a single value and the function's accumulated result.

Example-  for explaining this I will first show you how to get the result without reduce the function and then I will show you how you can get the same result with reduce function. Then will compare the two approaches.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eljiuz6b4jx1ftj6j5eo.jpg)

output-

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/me8c60xujzhrlvnae376.jpg)

In line number 5, I used a normal approach and in line number 17 I used reduce function to get the same result.

In line number 17 you can see that I have used 'acc' it is used to accumulate the value and it serves the same purpose as 'sum' in line number 8. 
Then 'curr' is in line 17. It is the current value that we are getting while iterating over the array. It has the same purpose as what 'arr[i]' is providing us in line number 8.

We can also user **Map and filter** functions at the same time.

Example-

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m2r4cfaoyrnyk6s1t9h6.jpg)
Output-

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9s2m63nsqtdmuzw0jkzh.jpg)

We can also get the same result using  **Reduce ** function also.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/np0v4r9tr18zt2lkhy3i.jpg)

Output-

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pma8zswt4p87b8lt6r0s.jpg)

This was all about Map, filter, and reduce functions. I have learned all this from the [Namaste JavaScript](https://www.youtube.com/playlist?list=PLlasXeu85E9cQ32gLCvAvr9vNaUccPVNP) series by [Akshay Saini](https://twitter.com/akshaymarch7). If you want to fall in love with JavaScript then you should learn from this.
Java script solution
Tags: javascript, programming
Published: 2022-10-25 09:53:04


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qop81szdjb79jv6xgcl0.jpg)
For web developers and other programmers interested in using JavaScript, this bestselling book provides the most comprehensive JavaScript material on the market. The seventh edition represents a significant update, with new information for ECMAScript 2020 and new language-specific feature chapters. JavaScript: The Definitive Guide is ideal for experienced programmers who want to learn the programming language of the web, and for current JavaScript programmers who want to master it."--Descriptive page summary

You can get the book for a small price [here](https://payhip.com/b/J16os)
B29 - Cổng Game Quốc Tế - Tải Game B29.bet
Published: 2022-10-25 09:29:40

https://b29.mobi B29 - Cổng game quốc tế uy tín đông đảo người chơi nhất✔️ Tải game B29.bet để trải nghiệm nhiều game đình đám✔️ uy tín nhất hiện nay✔️✔️✔️
b29mobi@gmail.comhttps://app.bountysource.com/people/108441-b29-mobi
https://matters.news/@b29mobi
https://matters.news/@b29mobi
https://penzu.com/public/7d934098
https://peatix.com/user/14185652
nestjs command by name not working
Tags: nestjs
Published: 2022-10-25 09:25:43

Hello!

I have built commands with nestjs and  declared them like this

```
@Command({
  name: 'lemlist-campaign-update',
  options: { isDefault: false },
})
```

And in my package.json

```
  "scripts": {
    "cmd": "nest build commands && nest start commands",
}
```

When I run `yarn cmd command_name` nothing happens
When I set a default true on one command and I run `yarn cmd` this default command is run

How can I run a specific command without having to change the default option?

Thanks a lot :)
Token vs Session Based Authentication
Tags: jwt, auth, token, beginners
Published: 2022-10-25 09:11:41

# Session based authentication
* In session based authentication server stores the user information and each users has a corresponding session ID to validate them.
* Session based or token based authentication is a process that allows the server to handle multiple requests from the same user without asking the user to login again
* When user log out server ends the session or invalidate the token and revokes the authentication

> Most of the time this session ID and Token is shared to browser in form of HTTP cookie. For each request this cookie is included for validating the user

# Token based Authentication
* Token-based authentication system stores this info directly in some sort of token.
* Using token server decodes it for user identity and it reduces the process of storing the session ID's 

## Token auth flow

* Users login with their credentials.
* Those credentials are provided to server for validation and if those are valid a signed token will be given to user
* For each request and response this signed token is included for user identity 
* This token can be included in headers or cookies
* Every time server upon validating the token shares the resources for user

# Token security

* Integrity of token is protected by signing the token and verifying its signature each time when it arrives at server
* Server uses secret key to generate the special string for signing the token. If any user or third party tampers the token signature will be not valid 

Check for JSON Web Tokens [here](https://dev.to/ramushetty/json-web-tokens-4l7g)
JSON Web Tokens
Tags: token, json, auth
Published: 2022-10-25 09:11:18

JSON web token is one of the most commonly used type of authentication tokens. 
* It consists of three components 

> Header, Payload, signature

* All this 3 are separated by '.' 

> Header.payload.signature

`eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c`

* This is base64url-encoded string 

## Header

`eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9` - is a header consists of algorithm used to generate the signature.

```{
  "alg": "HS256",
  "typ": "JWT"
}```

## Payload 

`eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ` - This contains the user meta data 

```
{
  "sub": "1234567890",
  "name": "John Doe",
  "iat": 1516239022
}
```

## Signature

`SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c` - It helps to validate the token that no one is tampered with it 

> Token's signatures need to be verified at server end compulsory.

> Token need to restricted with 'alg' field in backend with some algorithm it should not left to 'none'

# HMAC and RSA 
* HMAC requires the token to be signed with a key and then later verified with the same key(secret key)
* RSA token first creates with private key and it is verified with public key later

Thanks for reading 

Read my [article](https://dev.to/ramushetty/token-vs-session-based-authentication-3bhi) about token based authentication
Hacktoberfest Week 3: Text Output
Tags: hacktoberfest, beginners, opensource, javascript
Published: 2022-10-22 03:13:08

## The Issue

This week's issue is about adding [a new feature](https://github.com/makoteq/metaxa/issues/17) to a [text reader](https://github.com/makoteq/metaxa) that output each individual word from a file to the screen for fast reading. The new feature would allow the user to instead input the text into the CLI instead. The pull request is [here](https://github.com/makoteq/metaxa/pull/25).

With the current design, the user would be able to add text into the shell for the tool to read, as long as the text is in "" or ''.

Usage:
`metaxa read <text> <delay>`

Example:
`metaxa read "Hello, my name is John. How are you?" 40`

## Change


**Code Snippet**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/929dzkegat72sk38g32l.png)

In index.js, a new option 'read' is added, keeping almost the same code as start option, minus the code for reading a file from a path.


## Process
It ended up being a lot more simple than I thought initially.
I studied the code and realized I can easily convert the default code for reading a text file for this feature. All I had to do was to place the same code under a new option and get rid of the codes relevant for reading a file. Instead, the code skip to processing the text.

The repo owner is nice. I did tried to ask for another issue as well, but there's no reply for that one. Maybe they wont to assign me one at a time, or they simply missed it. I'm not sure.

## Learning

It feels good to find a solution without having to do a lot of changes, and it's entirely consistent with existing code, but it also made me feel I was not putting enough effort just because it took little time to actually write the code itself. Maybe sometimes elegant solutions feel easy, and the hard part is really coming up with it. 

I even thought about making it more advanced, but I stopped myself, since it might not be what the repo owner is looking for, as the program seems to be about outputting simple text.

It pays to really understand the code before working on your solution. Sometimes, the answer is right there in the code.
Passing className to components in React
Tags: react, beginners
Published: 2022-10-25 08:40:30

In React, we are familiar with the concepts of a `className` on components. It's the way React adds the class attribute to an element.
It looks like this:

```html
<div className="bg-red-200"></div>
```

However, what happens if we want to make our custom components have the option to allow dynamic classNames?

To give you an example, let's say we have a `CustomComponent` that can take a className from wherever it's imported.

```jsx
<CustomComponent className='bg-red-200` />
```

If we ran this in React, we would get shown an error as the CustomComponent doesn't know what a `className` is.
So let's fix that.

## Passing Classnames as props in React

In all honesty, I probably made it sounds like it was going to be very complicated, right?

Well, fear not, it's not that scary, as we can pass the `className` as a prop!

So in your child component, we would structure its receiving end like this.

```js
export default Child = ({ className }) => {
  return (
    <div className={className}>
      <h2>I'm the child component</h2>
    </div>
  );
};
```

And now, we can use this component like this.

```js
<Child className='bg-red' />
```

And that's it. Our component will now render this classname on its main div.

## Mixing classes

I also wanted to take a second to look at what happens if your child component always has certain classes and you want to add extra classes.

In that case, the props stay the same. However, we can dynamically render them like this.

```js
<div className={`existing-class ${className}`}>
```

Our component will always render `existing-class` as a class but add whatever we set on it.

So if we use it like this:

```js
<Child className='bg-red' />
```

Our result will be a div like this.

```html
<div class="existing-class bg-red"></div>
```

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
Source
Published: 2022-10-25 08:37:21

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fhserggv5o82h44xnn8m.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ngotys4rt8oq6utwlfen.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ic6b9vry23icaei451rd.png)