teleren/devto huggingface dataset:
My Experience in LGMVIP
Tags: webdev, lgm, html, intern
Published: 2021-07-25 16:55:19

Hey, Guys how you all are doing I hope you all are doing well. Recently I have enrolled for an intership program at Letsgrowmore.

Basically,LetsGrowMore is a ground-based organization that aims at building the future through nourishing the present. LetsGrowMore believes in making our youth especially the students self-aware and exploring the untouched world of technology and tremendous growth-making fields and our belief finally took us where we are standing today. Today LetsGrowMore is an officially MSME registered start-up with nearly 100+ people working under the same establishment.

So here I would like to share my internship experience at Letsgrowmore. In this internship program, they have given us three tasks out of which we have to do two tasks to get the internship certificate. So, let's go through my tasks.

Task1:- In task one we have to build a single-page application I have introduced all the features in these project like carousels, cards, newsletters, swiping video section, swiping Gallery section contact section, and at last a footer. It was a challenging task because we have to made these pages mobile responsive also and to make it responsive I have used Bootstrap. I really enjoyed making this project I have put all my efforts and skills to make this project.

Task-2:- In this task we have to build a landing page that contains a button (get users) when a user clicks on it, it fetch user data in the form of cards and while the API is fetching data its show loader that indicates that the data is loading.

At last I would like to thank LetsGrowMore for boosting up my skills and I recommend all of you guys to visit VIP-Letsgrowmore and take benefits from these free organization.

Official Websites of LGM:-
- https://letsgrowmore.in/
- https://letsgrowmore.in/vip/

Thank You,
Sai Varshith
[WIP] You Don't Know JavaScript. Glossary.
Tags: javascript
Published: 2021-07-25 16:21:03

[You Don't Know Javascript by Kyle Simpson](https://github.com/getify/You-Dont-Know-JS) is a good series of books to deep dive into the language. There are a lot of words that I hear again and again, this is a repository of definitions that I find useful.

- [Coercion](https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/get-started/ch2.md#value-type-determination): `Converting from one value type to another, such as from string to number, is referred to in JS as "coercion."`
- [const](https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/get-started/ch2.md#declaring-and-using-variables): can be re-assigned but not mutated.
- [Function declaration](https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/get-started/ch2.md#functions): `it appears as a statement by itself, not as an expression in another statement. The association between the identifier and the function value happens during the compile phase of the code, before that code is executed.`.
- [Function expression](https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/get-started/ch2.md#functions): `This function is an expression that is assigned to the variable. Different from the function declaration form, a function expression is not associated with its identifier until that statement during runtime.`.
- [Let vs var](https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/get-started/ch2.md#declaring-and-using-variables): `let allows a more limited access to the variable than var. This is called "block scoping" as opposed to regular or function scoping.`
- [Literals](https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/get-started/ch2.md#declaring-and-using-variables): `in JS programs, values can either appear as literal values (as many of the preceding examples illustrate), or they can be held in variables; think of variables as just containers for values.`
- [Primitive values](https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/get-started/ch2.md#values): `string`, `boolean`, `number`, `bigint`, `null`, `undefined` and `symbol`.
- [Values](https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/get-started/ch2.md#values): `most fundamental unit of value. Values are data. They're how the program maintains state. Values come in two forms in JS: primitive and object`. [Primitives are held by value. Objects are held by reference.](https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/get-started/apA.md#values-vs-references).
- [var vs let](https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/get-started/ch2.md#declaring-and-using-variables): `The let keyword has some differences to var, with the most obvious being that let allows a more limited access to the variable than var. This is called "block scoping" as opposed to regular or function scoping. (...) But var is still useful in that it communicates "this variable will be seen by a wider scope (of the whole function)". Both declaration forms can be appropriate in any given part of a program, depending on the circumstances.`
Part 3 : Match and Extract a REGEX with .match() Method
Tags: javascript, webdev, codenewbie, beginners
Published: 2021-07-25 16:04:21

Hello my dear readers!
This is a small part of this series but a very *useful* one.

Previously, we have known that, `.test()` method allows us to *only check* if a pattern exists or not within a string. But we can also *extract* the actual matches we found , with the `.match()` method. 

Let's get started with that! 👇🏻

### Extract Matches from a String using .match() Method

To use the `.match()` method, we need to apply the method on a *string* and pass in the *regex* inside the parentheses.

Before showing the *basic syntax* of `.match()` method, let's look at the syntax of `.test()` method for a moment again.
*Basic syntax* of *.test()* method is: `regex.test(string)`

Now let's look at the *basic syntax* of `.match()` method:
`string.test(regex)`

Did you notice something interesting?! 🧐🤔

######Notice that, the .match() syntax is the exact "opposite" of the .test() method!!

In *.test()* we were passing the `string` inside the parentheses, while in the *.match()* we are passing the `regex` inside the parentheses. 
Let's go through a simple example  of *.match()* method:

```js
let extractStr = "Extract the word coding from this string.";
let codingRegex = /coding/; 
let result = extractStr.match(codingRegex); 
console.log(result);

/* output:
 [
  'coding',
  index: 17,
  input: 'Extract the word coding from this string.',
  groups: undefined
]
*/
```

The above code block shows how the regex *coding* is extracted from the main string. 
The *output* shows an `array` of the regex to be matched: *coding*, the number of the starting index of the word, the main input string and groups which we will discuss later in this blog.

The main difference with *.test()* method is, the *.match()* method not only searches the given string but also returns the *regex pattern* as *output*.

Try it with your own example!! 🤔

#####In the next part, we will see a very important concept of REGEX, which is *Case Sensitivity*.
Encode Decode JWT
Tags: python, jwt, encode, decode
Published: 2021-07-25 15:58:27


JWT stands for JSON Web Tokens.

A simple function to encode the content -

```
'''
Encode the given text with given secret key. The default number of seconds for token validity is 600 seconds.
'''
def encode_token(text, secret_key, validity_seconds = 600):
    import datetime, jwt
    try:
        payload = {
            'exp': datetime.datetime.utcnow() + datetime.timedelta(days=0, seconds=validity_seconds),
            'iat': datetime.datetime.utcnow(),
            'secret': text
        }
        return jwt.encode(
            payload,
            secret_key,
            algorithm='HS256'
        )
    except Exception as e:
        return e
```
And to decode -
```
'''
Decode the encoded token with given secret_key
'''
def decode_token(auth_token, secret_key):
    import jwt
    try:
        payload = jwt.decode(auth_token, secret_key, algorithms='HS256')
        return {'auth': True, 'error': '', 'decoded': payload}
    except jwt.ExpiredSignatureError:
        return {'auth': False, 'error': 'Token expired'}
    except jwt.InvalidTokenError:
        return {'auth': False, 'error': 'Invalid token'}
    return {'auth': False, 'error': 'Some error'}

```

Let's get to work - 

### Define a secret
```
secret = 'This-is-my-super-secret'
```

### Encode the content

```
encoded_data = encode_token('Something to encode', secret)
print(encoded_data)
```

This outputs as - 
```
'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE2MjcyMjY4NDUsImlhdCI6MTYyNzIyNjI0NSwic2VjcmV0IjoiU29tZXRoaW5nIHRvIGVuY29kZSJ9.CombVr-757PXau8yeXtyjCLn54E3pGNntlnpoADnPRI'
```

If You copy this to https://jwt.io you will see - 

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

### Decode the token


To decode the data you need the same secret

```
decoded_data = decode_token(encoded_data, secret)
print(decoded_data['decoded']['secret'])
```

This outputs to -
`'Something to encode'`


If you try to decode using some other secret key, the data won't be decoded correctly

```
decoded_data = decode_token(encoded_data, 'some-other-secret')
print(decoded_data)
```

This output as - 
```
{'auth': False, 'error': 'Invalid token'}
```


Hope these simple functions help you :)

You can follow me on Twitter — @kravigupta . You can also connect on LinkedIn — kravigupta.
How to create a modal with Pure CSS !
Tags: beginners, css, showdev, tutorial
Published: 2021-07-25 15:53:02

Today, In this tutorial I will tell you how to create a modal with pure CSS !

## Markup
Here’s the HTML markup for the code.
```
<a href="#modal" class="modal-btn">Open modal</a>
<div class="modal-overlay" id="modal">
	<div class="modal">
		<h3 class="modal-title">Modal title</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing, elit. Temporibus tempore aperiam deleniti consequatur, earum, consectetur et, possimus dolor laborum quia sint facere asperiores quidem repellat illum obcaecati, saepe a beatae?</p>
		<a href="#" class="modal-btn">Got It</a>
	</div>
</div>
```

## The CSS
```
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  padding: 20px;
  font-family: "Segoe ui", sans-serif;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  transition: all 0.2s ease;
  height: 100%;
  width: 100%;
  background: #0000004a;
}

.modal-overlay:target {
  opacity: 1;
  pointer-events: all;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  max-width: 600px;
  width: 80%;
  transform: translate(-50%, -50%) scale(.8);
  background: white;
  padding: 20px 30px;
  font-family: "segoe ui", sans-serif;
  border-radius: 4px;
  transition: all 2s ease;
  box-shadow: 0px 8px 40px -20px black;
}

.modal-overlay:target .modal {
  transform: translate(-50%, -50%) scale(1);
  transition: all 0.2s ease;
}
```

Keep on [Reading](https://www.tronic247.com/how-to-create-a-modal-with-css/) on Tronic247.
How to install multiple versions of a npm package at the same time/project
Tags: javascript, node, npm, yarn
Published: 2021-07-25 15:41:08

Have you encountered when you are working on a project and you want to upgrade a dependency but you can’t do because you will have to migrate a lot of code or you should test your project with multi-versions of some module(s)?

Personally, I make and maintain a lot of Koa modules. Sometimes, I need to make the modules work with all versions of Koa so this is a real example how i do to solve this problem.

### _I found a solution by use a custom **alias** when installing a package with npm or yarn._

**Alias** allows you to install multiple versions of a same package in the same project.

You can use the alias by following this command:

with npm

```bash
npm i <your-alias>@npm:<package-name>
```

with yarn

```bash
yarn add <your-alias>@npm:<package-name>
```

When you want to install a specific version of the package append the command with `@<package-version>`.

> Read the npm documentation [here](https://docs.npmjs.com/cli/v6/commands/npm-install) and/or yarn [here](https://classic.yarnpkg.com/en/docs/cli/add/#toc-yarn-add-alias) to find more about _`alias`_.

For example, we want to use Koa with release `1.x.x` and the latest one `2.x.x`.

with npm

```bash
npm i koa-v1@npm:koa@1
npm i koa@npm:koa
```

with yarn

```bash
yarn add koa-v1@npm:koa@1
yarn add koa@npm:koa
```

Now, when you import the Koa module using `koa-v1`, it means that you are using `koa@1.x.x`. Otherwise, when importing with `koa`, it means that you are using the latest version of `koa@ 2.x.x`.

<br/>

### Did I miss something? Let me know in the comment section and let’s work on that.

### Thank you for reading. I hope this will help you on your journey! ❤️
How to think while building Web Applications
Tags: beginners, react, javascript, webdev
Published: 2021-07-25 15:38:08

Hello, Dev Friends."How to think while building Applications?"This is the question I didn't know how to approach in the beginning.While creating applications when learning web development we often get confused about what features to add and what not to.So here I will give you an example of one of my perspectives which I learnt:

## 1.You are trying to solving a real problem:
Suppose you want to create an E-commerce/Clothing store application.You have to think about it irrespective of the technology first.Forget about React or JavaScript,imagine your friend wants to have her/his online Clothing store.So here you are trying to solve a real problem and not just build an app.

## 2.Mandatory features:
Now think about the mandatory features required for the app.
You will need:
1.A landing page with the description about the product and its picture
2.User login feature
3.Display page of products
4.Facility to add the products to cart
5.Cart page to increase,decrease amount of products,remove products
6.Online payment facility
7.Physical address of store if available or the concerned address with contact details of store owner/team.
(Add more features if you can think of any)

## 3.More Features:
1.In a landing page you can add featured products,photo gallery of products,services provided,footer with social media contacts.
2.Contact form for the customers or the feature to subscribe to regular newsletters.
3.About page of the clothing store.
4.Detailed product page with customer reviews,stock details,color,size,star ratings and more details about the single product.
5.Facility to search for products.
6.Feature to filter,sort the products.
7.Countdown timer for special sale.
8.Random fashion quotes on product page.

Example project:[Github Repository Link](https://github.com/kritika27/ecommerce-store-reactjs-stripe-oauth2)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ukowkuoxoljwxuar92xh.JPG)

You can add as many features as you can think of.After finalising the features,plan your designs,technical logic,libraries,tools you will need to complete your project.

You can also refer to tutorials for features and then implement in your own application.But think like you are solving a real Business problem instead of thinking that you are building an application in React or JavaScript.

Let me know about your approach in comments section.

Happy Coding :)
You can follow me on [Twitter](https://twitter.com/kritikasri27) and [Github](https://github.com/kritika27).
Setting up Python Development Environment on Apple M1
Tags: python, applem1, conda
Published: 2021-07-25 05:57:07

I recently moved to Apple M1. It was an awesome experience for my NodeJs, Java projects.

But a poor experience for python projects. I could not even install numpy properly.

I did not want to use Rosetta much. So, I had to install numpy using source. But then pandas did not install, then scipy has problems… Tired.

If you’ve reached here, you would have got a lot of articles where people tried to install by source or other ways. In this story, I am jumping straight to the solution which worked for me using miniforge

Install miniforge
```
brew install miniforge
```
Setup conda with your shell(zsh or bash, whatever you use)
```
conda init zsh
```
Create your venv using desired python version
```
conda create -n .venv python=3.9.2
```
This will create a virtual env for python 3.9.2. All the packages you install will go inside this environment.

Now you can just go your python code directory and activate virtual env.
```
cd /path/to/my/python/source/dir
conda activate .venv
```
Install the packages. Few packages I was not able to find in conda so if I install using pip that worked fine.
```
conda install numpy
conda install pandas
```
Or using Pip
```
pip install celery
```
That’s it, now you can simply run your app.

Hope this helps you. :)

You can follow me on Twitter — @kravigupta. You can also connect on LinkedIn — kravigupta.

Cheers!!
Vanilla JS - how to work with modules
Published: 2021-07-25 15:15:58

I am reading [You Don't Know Javascript](https://github.com/getify/You-Dont-Know-JS) and I want to really take time to practise what I have not worked on before. I was reading about `Modules` and since I have never used them on a Vanilla JS project I wanted to see how it works (I always use it in React).

I was following the [MDN guide](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) so I created a `script.js` file and a `module.js`file. The HTML file had the usual `<script src="script.js"></script>` tag.

My HTML file:

```
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button id="but">Click me</button>
    <div id="container"></div>
    <script src="script.js"></script>
  </body>
</html>
```

My `script.js` file:

```
import { text } from "./module.js";

const target = document.getElementById("but");
const container = document.getElementById("container");

target.addEventListener("click", () => {
  container.textContent = text;
});
```

My `module.js` file:

```
const text = "Yay";

export { text };
```

Well, I was getting an error: `Uncaught SyntaxError: Cannot use import statement outside a module`. WTH, I thought.

After a bit of research, I found the solution: you need to add `type=module` in the script tag:

```
<script type="module" src="script.js"></script>
```

It is also explained [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#applying_the_module_to_your_html).
React Native
Notes for Professionals
Published: 2021-07-25 15:10:56

The React Native Notes for Professionals book is compiled from Stack Overflow Documentation, the content is written by the beautiful people at Stack Overflow.
This open book is licensed under a Creative Commons License (CC BY-SA). You can download React Native Notes for Professionals ebook for free in PDF format (1.3 MB).

https://www.dbooks.org/d/5591647427-1627225822-05d2b161549015aa/
Running the stored procedure from NestJs
Tags: nestjs, node, typeorm
Published: 2021-07-25 14:43:40


```
using the repository that was created,
for instance you want to interact with the table users
and say you have the repository UserRepository. 
```

1. dependency inject the user repository into the current service
```javascript
constructor(
@InjectRepository(Users)
private  userRepository:  Repository<UserRepository>
)  {}
```
2. now use the  created userReposotory to run the command to invoke the stored procedure
```javascript
this.userRepository.query("call dev_db.listUsers(?)",[the_input_paramenters_required]);
```

--the above query returns a promise with result of stored Procedure or error
So make sure you add await to  function having the above line
Parallel SCP with LFTP
Published: 2023-01-05 22:47:25

---
title: Parallel SCP with LFTP
published: true
date: 2021-07-25 14:38:43 UTC
tags: 
canonical_url: https://brandonrozek.com/blog/parallel-scp/
---

Segmented file transfer allows you to split up a file into multiple chunks and download them in parallel. There is a program written for Linux called LFTP which can accomplish this task and supports FTP, HTTP, SFTP, BitTorrent, among others. The syntax is a little funky, so I wrote a wrapper I call `pget` which allows for segmented file transfers using SCP.

Usage:

```
pget [user@host] [file] [segments?]

```

where `segments?` is optional.

Example:

```
pget user@127.0.0.1 Documents/todo.txt 3

```

The full script:

```
#!/bin/sh
# set -xv

show_usage() {
    echo "Usage: pget [user@host] [file] [segments?]"
    echo "Example: pget user@127.0.0.1 Documents/todo.txt 3"
    echo "Currently only supports sftp. Segments value are optional."
    exit 1
}

contains_help_flag() {
    if ["$1" = "-h"] || ["$1" = "--help"]; then
        return 0
    fi
    return 1
}

if ["$#" -lt 2] ||
   ["$#" -gt 3] ||
   contains_help_flag "$1" ||
   contains_help_flag "$2" ||
   contains_help_flag "$3" ; then
    show_usage
fi

REMOTE_HOST="$1"
FILE_LOCATION="$2"

if ["$#" -eq 3]; then
    NUM_SEGMENTS="$3"
else
    NUM_SEGMENTS="1"
fi

LFTP_COMMAND="pget -n $NUM_SEGMENTS $FILE_LOCATION;bye"
lftp -e "$LFTP_COMMAND" sftp://"$REMOTE_HOST"

```
Kotlin vs Python
Published: 2021-07-25 14:38:35

Recently I’ve started learning Kotlin. It was not my first time looking into it, But you are aware that you can even forget how to declare a variable in a certain language if you do not use it regularly, that’s my story. In 2019 I learnt Kotlin with Kotlin in Action Book, but never had space to use it until now as my work is asking me to open that book again.
 
If you love Python and use it often as I do, the bad news is, in some case It might not work for you for a certain project. Python is the best dynamic language, but it is worth learning a statistically typed language. Large projects demand the rigour of a statically typed language, Kotlin can provide that rigour with no drawbacks such as verbose syntax.
From the couple days I have been learning Kotlin, I have noticed some difference, from their name to the their extension 😉
 
· Kotlin is a statically programming language while Python is dynamic.
· Python is easier to learn and read than kotlin ( it would depend on your readability. 
· They are all open source tools
· They are all cross platforms – ( compatible with many operating system)
· Var or Val when declaring in kotlin, but no formula to declare a variable in python
· Both don’t bother with semicolon at the end of the syntax
· Kotlin looks familiar with Java while Python is comparable to Ruby
· Both are used in web development ( Django, flask for python, and Spring Boot , javelin for Kotlin )
· Both can be used in Backend development side
· Kotlin has a huge advantage over python in mobile development ( Android )
· Kotlin is Backed up by Google
· Kotlin is faster to compile
· Kotlin provides built-in null safety support
· Kotlin is compatible with all java libraries
· Kotlin user Junit ( 4,5), mocks, Assertion tests while python use unit test or integration test
· They all have many built in functions ( for instance math ).

 
Let’s see how they are different syntax. 
 
 
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r3c2c5oj0ne1gf0hf6x6.png)
 
  
I may conclude by saying, if you want to start coding, python is the best suit to start on as it was not hard for me when i was learning it but Kotlin is like butter over bread. Having Kotlin as an additional language will help us (you ) target more solutions, and you become more valuable on market.