teleren/devto huggingface dataset:
Web development, an exciting path - Kodecamp Internship
Tags: kodecamp
Published: 2021-08-21 11:32:17

We live in a world in which technology plays a key role in every aspects of human lives. As we all know, most of what we deal with today is either a web app or a mobile application. Most of these, from the simplest web app to the most intriguing application on the internet is as a result of painstaking work of a web developer who has spent hours putting several lines of code together so as to solve a problem that faces humans.

An interesting aspect of coding is that, most web developers work not for the pay as some may think but because they love to solve challenges and make the world a better place to live, and task get easier with each deployment phases in  most software we have around us today. 

Therefore it will a good thing for everyone whether young or old to sit back and think of learning a little about coding and software development. Kodecamp is currently giving out such opportunity to learn and I have enrolled to learn. You too can and it promises to be very educative. I have set certain goals for myself during this period of learning which includes:


1- Optimize my HTML CSS and JAVASCRIPT skill

2- Get better at everything related to Frontend development.

3- Learn problem solving skill

4- Improve my Collaboration and team working ability

5- Become a freelance frontend developer who can solve any problem

Kodecamp
Ah-hoc stateful widgets using StatefullBuilder
Tags: flutter
Published: 2021-08-21 11:31:07

---
title: Ah-hoc stateful widgets using StatefullBuilder
published: true
date: 2021-08-21 11:19:44 UTC
tags: Flutter
canonical_url: https://www.rockandnull.com/flutter-stateful-widget/
---

 ![Ah-hoc stateful widgets using StatefullBuilder](https://images.unsplash.com/photo-1570630776089-15148ea480de?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxMTc3M3wwfDF8c2VhcmNofDc3fHxhZC1ob2N8ZW58MHx8fHwxNjI5NTQ0MjMw&ixlib=rb-1.2.1&q=80&w=2000)

Flutter and its declarative paradigm is quite great. The declarative way of building UIs means you only need to "bind" properties to elements.

As long as you update your property's value inside `setState()` of a `StatefulWidget`, the value will magically be reflected in the UI.

But what happens when you have a `Widget` that accepts a `builder` and you need to have something that has a state? Sure, you can just create a new `StatefulWidget` and return that from the `builder`. But this might be too verbose if you want to build something small.

This is where [`StatefulBuilder`](https://api.flutter.dev/flutter/widgets/StatefulBuilder-class.html) comes into play. It's a widget that provides a `StateSetter` to be able to call the familiar `setState()` when building a widget "ad-hoc" (e.g. from a `builder`).

Let me give you an example and explain it line by line. The `showModalBottomSheet` is a convenient method for showing a dialog popping up from the bottom of the screen. This method has a `builder` parameter to build the widget for the content of this dialog.

![Ah-hoc stateful widgets using StatefullBuilder](https://www.rockandnull.com/content/images/2021/08/ezgif-7-d82425617713.gif)

```
void openModal(
        BuildContext context, MyViewModel viewModel) => // 1.
    showModalBottomSheet<void>(
        context: context,
        builder: (BuildContext context) => StatefulBuilder( // 2.
            builder: (BuildContext context, StateSetter setState) => // 3.
              TextButton(
                child: Text(viewModel.counter.toString()),
                onPressed: () => setState(() => viewModel.counter++)))); // 4.
```

1. The approach of using a `StatefulBuilder` described here has the caveat that the state should be stored outside of the `builder` (e.g. in a [ViewModel](https://dev.to/mavris/simple-flutter-app-architecture-the-provider-way-704-temp-slug-8643473)) since the builder will be called every time the `setState()` is called.
2. The `showModalBottomSheet()` method has a `builder` parameter for the content of the modal. Here is where we return our `StatefullBuilder`.
3. The `StatefulBuilder`'s `builder` provides the `StateSetter` we will use it later when we want to update the contents of the modal.
4. In the `onPressed` we don't just update our data. Instead, we update our data inside the familiar `setState()`. The `StatefulBuilder`'s `builder` will be called again and the content of the modal will be updated.

Hopefully, by now it's clear how to return stateful widgets in  `builder`s without creating new `StatefulWidget`s, but by using  the `StatefullBuilder`.

Happy coding!
It feels good to have a productive week 😊
Tags: productivity, webdev, python, machinelearning
Published: 2021-08-21 10:53:11

Some weeks are good, some weeks are bad.

This week was definitely a good one, I was super productive and added a ton of new features to www.namy.ai 🥳

Here's a list of everything new:

- new frontpage with better copy & new domain-section
- filter to hide taken domains
- widget to instantly check if a domain is available
- ability to favorite domains and save them for later viewing
- twitter tab
- api tab
- Plus a lot of restructuring in the backend that's not immediately visible.

NEXT STEPS: New & improved AI model, twitter bot, expanded affiliates.

Onwards!
Best SAP Business one
Tags: sapb1
Published: 2021-08-21 10:49:00

SAP business one is ERP software which is used for small and large business. If you are looking for SAP business one HANA then Zyple software solutions Pvt Ltd is an authorized SAP Business one partner company in India.
Source:- https://www.zyplesoft.com/sap-business-one/
Day 8 : Learning JS fundamentals, Part -3
Tags: javascript, beginners, webdev, 100daysofcode
Published: 2021-08-21 10:42:32


## Closures

Closure is when a function "remembers" the variables outside of it, even if you pass that function elsewhere. 

```
function makeAdder(x) {
  return function(y) {
    return x + y;
  };
}

var add5 = makeAdder(5);
var add10 = makeAdder(10);

console.log(add5(2));  // 7
console.log(add10(2)); // 12
```

The full reference can be found on - [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures)

![Alt Tefxt](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6r6b2ywc2b9y1yed6hu2.png)

In the above example, the variable question will remian alive, even after 100ms of execution of parent function. 


Example - 2

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

Here, the function `holdYourQuestion` will remember the question, even if it is called at an entire different time on an entire differnet place. 


## `this` keyword
It is all about the call, it is not the definition of the function, it is not where the function is, none of that matters, it is only how the function was called that determines where the `this` keyword will be pointing to.


A this-aware function can thus have a different context each time it's called, which makes it more flexible & reusable.

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

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

-----

# DOUBT
## Prototypes in js
Get Everyday Random Data Generated Using This NPM Package
Tags: npm, javascript, randomizers
Published: 2021-08-21 10:32:03

Hello, this is Tripto Afsin, I've made a randomizer library for fun, looking for some feedbacks 😀


# Simple Random Stuff
This package helps you to generate common random data(number, day, month, prime number, dice etc) quickly 😀


<p align="center"><img src="https://github.com/TriptoAfsin/simple-random-stuff/raw/main/getRandom.png" width="256px" alt="Logo"></img></p>

### Features - 
1. 0 Dependencies
1. Simple Number Generator - Ranged, Prime Number
2. Random Day
3. Random Month
4. Coin Toss
5. Dice Roll
6. Hex Colors
7. Rock, Paper, Scissor 😀

### Installation - 

1. NPM - 
```
npm i simple-random-stuff
```


### Usage - 

```javascript
//named import
let {numRandomizer, simpleRandomizer, getDay} = require('simple-random-stuff')
//or whole import
let radomizers = require('simple-random-stuff')
// or you can use import as well(react, vue, angular etc)
import randomizers from 'simple-random-stuff'

//getting ranged random number
console.log(numRandomizer(5,20))  // 7

//getting simple random number, here 100 is the the upper range
console.log(simpleRandomizer(100)) // 57

//getting a random day
console.log(getDay())  // Monday

//getting a random month
console.log(radomizers.getMonth()) // July

//getting a coin toss result
console.log(radomizers.coinToss()) // Head

//getting a dice roll result
console.log(radomizers.diceRoll()) // 5

//getting a hex color
console.log(radomizers.getHexColor()) //#e80e53

//getting a random prime number
console.log(radomizers.getPrimeNumber(50,100, array=false)) // 53

//getting all the random prime numbers in a range
console.log(radomizers.getPrimeNumber(50,100, array=true)) // [53, 67 ....]
```

**[🟢 Github Repo](https://github.com/TriptoAfsin/simple-random-stuff)**
Encrypt and Decrypt in NodeJS
Tags: encryption, decryption, node, javascript
Published: 2021-08-21 10:23:13

## How to encrypt text

Create a file named **encdec.js** and paste:

```js
const crypto = require("crypto")

const encrypt = (plainText, password) => {
  try {
    const iv = crypto.randomBytes(16);
    const key = crypto.createHash('sha256').update(password).digest('base64').substr(0, 32);
    const cipher = crypto.createCipheriv('aes-256-cbc', key, iv);

    let encrypted = cipher.update(plainText);
    encrypted = Buffer.concat([encrypted, cipher.final()])
    return iv.toString('hex') + ':' + encrypted.toString('hex');

  } catch (error) {
    console.log(error);
  }
}
```

Let's test it:

Append these lines:

```js

const encrypt = (plainText, password) => {
  ...
}

const text = "Hello World"
const pass = "secret1234"

const encText = encrypt(text, pass)
console.log('encrypted text', encText);
```

Then run:

```sh
node encdec.js

# Output:
encrypted text af9efafd353a5a7e27f31262dac12d6b:eb1dd75ea6c84e25300d5a244138ab3c
```

## How to decrypt the encrypted text

Add the decryption function:

```js
const decrypt = (encryptedText, password) => {
  try {
    const textParts = encryptedText.split(':');
    const iv = Buffer.from(textParts.shift(), 'hex');

    const encryptedData = Buffer.from(textParts.join(':'), 'hex');
    const key = crypto.createHash('sha256').update(password).digest('base64').substr(0, 32);
    const decipher = crypto.createDecipheriv('aes-256-cbc', key, iv);
    
    const decrypted = decipher.update(encryptedData);
    const decryptedText = Buffer.concat([decrypted, decipher.final()]);
    return decryptedText.toString();
  } catch (error) {
    console.log(error)
  }
}
```

And a test:

```js
const text = "Hello World"
const pass = "secret1234"

const encText = encrypt(text, pass)
console.log('encrypted text', encText);

const decText = decrypt(encText, pass)
console.log('decrypted text', decText);
```

Then run :

```sh
node encdec.js

# Output
encrypted text 71596b9f5a99532f438fc5669b845680:248f6cb24a4ebeb174bbb73953115fd5
decrypted text Hello World
```

Source: https://gist.github.com/vlucas/2bd40f62d20c1d49237a109d491974eb
Is-It-Dash, A simple data validation library
Tags: npm, javascript, validation
Published: 2021-08-21 10:20:51

Hello, I'm Tripto Afsin, I've made a simple data validation library for the sake of learning regex and for personal usage
Hope some of you may find it handy and I would appreciate feedbacks😀
 

# Is-It-Dash
It's is a simple 0 dependency data validation library for Node.js, React, Angular, Vue, Vanilla JS etc

<p align="center"><img src="https://github.com/TriptoAfsin/is-it-dash/raw/main/IsIt_.png" width="256px" alt="Logo"></img></p>

### Features - 
1. Datatype Validations - String, Number, Integer, Float
2. Numeric Validations - Prime Number, Odd, Even Number, Positive, Negative Number
3. Form Type/ Real Life Data Validations - Email, URL, Password, Pass strength, Phone No.
    

### Installation - 

1. NPM - 
```
npm i is-it-dash
```


### Usage - 

```javascript
let validate = require('is-it-dash')
//or
import validate from 'is-it-dash'


//Numeric Validations
console.log(validate.isOdd(4))  //false
console.log(validate.isNum(56.0087))  //true
console.log(validate.isFloat(56.0087))  //true
console.log(validate.isNegativeNum(0)) //false
console.log(validate.isPrime(6)) //false

//URL Validations
console.log(validate.isUrl("www.filehorse.com")) //true

//Email Validations
console.log(validate.isEmail("AfsinTripto@gmail.com")) //true

//Password related validations
console.log(validate.passCheck("66767u$T",passLength=6,sepcialChars=true,numbers=true,upperCase=false)) //true
console.log(validate.passCheck("66767uT",passLength=6,sepcialChars=true,numbers=true,upperCase=false)) //false
console.log(validate.passStrength("abcd1234#")) //68

//Phone No Validations
console.log(validate.isPhone("+88","01936396228",11)) //true


```
**[🟢 Github Repo](https://github.com/TriptoAfsin/is-it-dash)**
⚡ How to skip Chromium download in Puppeteer?
Tags: node, javascript, webdev, puppeteer
Published: 2021-08-21 09:47:15

## Hello again 👋!

If you're a Node.js developer and you've used Puppeteer for web scraping, you might have seen that it downloads Chromium whenever you install `puppeteer`.


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629274490931/ylVdgUI0f.png)

Many of you people don't like to download an external web browser for this. You might have Chrome, Edge, Brave, or any other Chromium-based browser on your system so why not use that?

![1.gif](https://i.giphy.com/media/BpGWitbFZflfSUYuZ9/giphy.gif)

## Step 1 - Set the environment variables

Whenever you install Puppeteer, it will first check for the environment variables listed below:


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629278289686/EcmxpVUpV.png)
> Read more on DevDocs: https://devdocs.io/puppeteer/index#environment-variables

We are interested in `PUPPETEER_SKIP_CHROMIUM_DOWNLOAD` and `PUPPETEER_EXECUTABLE_PATH`.

In your operating system, you have to set these two environment variables to these values 👇

| Key      | Value |
| ----------- | ----------- |
| PUPPETEER_SKIP_CHROMIUM_DOWNLOAD      | true       |
| PUPPETEER_EXECUTABLE_PATH   | {PATH_TO_CHROME_OR_CHROMIUM}        |

## On Windows
Search this term `Edit the system environment variables` in Start Menu and open it

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629278539460/sA6iv6lmx.png)

Click this button on the bottom right:

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629278611843/w-R-M8rlY.png)

Click on the **New** button under **System variables**:

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629278662747/WHH5KilX1.png)

Enter the variable name and value as given below:

| Key      | Value |
| ----------- | ----------- |
| PUPPETEER_SKIP_CHROMIUM_DOWNLOAD      | true       |
| PUPPETEER_EXECUTABLE_PATH   | { PATH_TO_CHROME_OR_CHROMIUM }        |

### Find browser's path

The simplest way to find the path to your browser's executable (on Windows) is to right-click the shortcut on the desktop, and click on **Open file location**.

In my case, I used [Microsoft Edge](https://microsoftedge.com) so this was the path: `C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe`


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629278809164/C8wooA7Fj.png)

It'll take you to the file location and you can copy the path, and paste it into the environment variables.

![2.gif](https://c.tenor.com/oz5lssXIlfkAAAAC/sgn-we-did-it.gif)

Thanks for reading!

I hope you liked it! Comment down your thoughts! There is always room for improvement so let me know your suggestions!

**Connect with me on my [YouTube channel](https://youtube.com/MaxProgramming) and my  [Twitter](https://twitter.com/maxprogramming1) 😉**

Until next time, keeping awesome ✌️!
Asymetric RSA encryption/decryption of your clipboard
Tags: security, clipboard, rsa, encryption
Published: 2021-08-21 09:40:25

---
title: Asymetric RSA encryption/decryption of your clipboard
published: true
description: Do you trust enough your clipboard to copy into it secrets and credentials ? This is how a securely encrypt/decrypt the content of my clipboard.
tags: security, clipboard, rsa, encryption
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/trll5o1vunz89h906al5.jpg
---

Do you trust your clipboard enough to copy secret information like credentials, tokens, etc... into it ?

In fact it's possible for an hacker to watch changement from your clipboard and get all text/elements you're copying/pasting, in this case using `xclip` !
So i was thinking about a solution on hide what am copying so that if the hacker get the content of my clipboard he will not get anything from it !

I did asymmetric clipboard encryption using RSA with bash, you can customize the paths of your public/private keys.

Then I added shortcuts to my system to encrypt the data I'm copying... using `Ctrl+Alt+C` instead of `Ctrl+C` and to paste, 'Ctrl+Alt+V' instead of 'Ctrl+V'...

```bash
#!/bin/bash
# By d4rk3r

# This script can :
#    - generate keys pair (rsa 2048)
#    - rsa encrypt the content of your clipboard/selected element
#    - rsa decrypt the content of your encrypted clipboard storage

# requirements :
# - apt install xclip
# - apt install openssl
# - apt install xdotool

PUBLIC_KEY_PATH="${HOME}/.css/darker.pub"
PRIVATE_KEY_PATH="${HOME}/.css/darker.pri"

# the path where the encrypted data will be saved
SECRET_STORE_PATH="${HOME}/.css/css_secret_store.dat"


_generate_keys(){
    mkdir ${HOME}/.css/

    openssl genrsa -out $PRIVATE_KEY_PATH 2048;
    openssl rsa -in $PRIVATE_KEY_PATH -out $PUBLIC_KEY_PATH -outform PEM -pubout
}

_copy_encrypt(){
    # We get the output of xclip and encrypt it
    echo "$(xclip -o)" | openssl rsautl -encrypt -inkey $PUBLIC_KEY_PATH -pubin -out $SECRET_STORE_PATH

    # We save a custom message to the clipboard
    echo "-css-encrypted-value-" | xclip -i
}

_decrypt_paste(){
    # We decrypt using our private key
    string=`openssl rsautl -decrypt -inkey $PRIVATE_KEY_PATH -in $SECRET_STORE_PATH`;

    # We print to the clipboard de decrypted value
    sleep 0.5;
    xdotool getactivewindow type "$string"

    echo "" | xclip -i
}

_help_commands(){
    echo "./css.sh gen # To generate keys pair"
    echo "./css.sh enc # To encrypt the clipboard selection/saved"
    echo "./css.sh dec # To decrypt the clipboard and put"
}

# The main function
main(){
    if [ "$1" == "generate" ] || [ "$1" == "gen" ]; then
        _generate_keys
    elif [ "$1" == "encrypt" ] || [ "$1" == "enc" ]; then
        _copy_encrypt
    elif [ "$1" == "decrypt" ] || [ "$1" == "dec" ]; then
        _decrypt_paste
    else
        echo "[x] Error: Bad parameter provided..."
        _help_commands
    fi
}

main $1
```

Source code : [github project](https://github.com/Sanix-Darker/css)

Have FUN !
AlgoManiac
Tags: chandigarhuniversity, techinvent, programming, codechef
Published: 2021-08-21 09:30:30

Invitation To AlgoManiac 2021: Code For Future

Hello, Everyone!

We are glad to invite you to the awesome (we've tried our best to make it such) AlgoManiac 2021: Code For Future that will start on Friday, September 03, 2021, at 17:00 IST (UTC + 5.5)

Registration Link: https://www.codechef.com/CDMN2021
Babel vs Webpack -  What are they
Tags: react, javascript, webdev, beginners
Published: 2021-08-21 09:28:33

## Babel

Babel is a transpiler (JS Compiler) that coverts our ES6, TypeScript, JSX code to plain JavaScript.

We need Babel because most of the browsers are not capable of understanding fancy code written in ES6, TS, JSX.

## Webpack

Webpack is a build or bundler tool. This build process consists of multiple tasks.

Tasks may be transpiling, uglify, minimising and bundling of CSS and JS. And also responsible for resolving the dependencies.

We specify these tasks in a configuration file and webpack uses multiple plugins to do these tasks. Babel is one of them.
How does the browser work?
Tags: beginners, codenewbie, webdev
Published: 2021-08-21 09:23:31

The task of the browser is to load and display the page:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pr9fqy9xfznvpz9h1ogu.png)
_**URL (Uniform Resource Locator)** is a pointer to a resource: a website, a document, an image, a video._

# What happens when a user requests a resource?

#### 0. The browser splits the URL into parts:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ip9q6fmm9fue3b5j53f.png)


#### 1. DNS Resolution
Using DNS browser converts habr.com to the IP address:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r9tpevjrrhbqzo6bbxd7.png)
_**DNS (Domain Name System)** is a system that
converts a domain name (google.com, habr.com) to the IP address._

#### 2. TCP connection:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vfgkqbvzuz7h6c0rjysn.png)
Using the IP address the browser establishes a connection with the host to start exchanging traffic.

_**TCP (Transmission Control Protocol)** is a protocol that establishes a reliable connection between two hosts._

#### 3. The browser can request the necessary resource from the server using HTTP:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zal392qdn4rwzuzdmzio.png)
_**HTTP (Hypertext Transfer Protocol)** is a specific format of messages between the client (browser) and the server._

The server receives the request, then sends it to the database to take the requested data from there, forms it in a certain format (HTML, XML, JSON) and gives it to the browser.

Or returns an error:
* **1xx** — informational answer
* **2xx** — successful execution _(200 OK)_
* **3xx** — redirection
* **4xx** — client error _(400 — bad request, 404 — not found)_
* **5xx** — server error
T-SQL: How To Use PARTITION BY and Why
Tags: sql, database, tutorial
Published: 2021-08-21 09:21:08

If we think about functions in mathematics, we'll recall that one function is the division function. If we have 10 apples and we want to divide them equally into 2 containers, there will be 5 apples in each container. If we have 10 apples and 10 containers and we want to divide them equally into the containers, there will be 1 apple per container. In this week's video, we're looking at the PARTITION BY functionality in SQL. Fundamentally, PARTITION BY operates like division - we're dividing a row's values into partitions. In the video, [SQL Basics: How To Use PARTITION BY and Why](https://www.youtube.com/watch?v=h3Jx4CoNgL8&list=PLHHm85xMQAYNScEs-nu9gzi2uoQ9JCCYA&index=15), we see an actual demo of PARTITION BY and where we may use this to solve problems we face.

Some questions that are answered in the video:

- In the examples, we'll notice that we're using a table with mixed values - some completely new in one column and another column with duplicates. These demos are live, so we are using live data.
- What is the difference between partitioning by the column ID and the column Letter?
- What happens when we insert a new record that is duplicate in both ID, Letter, and Val? How does the PARTITION BY with ROW_NUMBER() function here?
- While people tend to think of PARTITION BY as helpful to remove duplicates, how would this functionality possibly help us with scaling horizontally and why?

I recommend that people duplicate the code with the same or different data and experiment with results.

There are numerous applications where we can apply this - provided that we remember that PARTITION BY allows us to slice data in identical categories based on what we specify. The reason we use it with duplicates easily is because when we order duplicates by ROW_NUMBER() and PARTITION the duplicate column (or columns), we'll end up with numbers that are greater than 1, if there is a duplicate. But keep in mind, this is extremely useful in batching data when horizontally scaling ETL operations: we can use PARTITION BY to order a column or set of columns to ensure that we process batches of data over different or identical periods of time.