teleren/devto huggingface dataset:
CrowdSec v.1.0 is out: introduction of the local API
Tags: security, opensource, linux, devops
Published: 2020-12-08 14:44:40

The team is happy to announce the official release of [CrowdSec v.1.0] (https://github.com/crowdsecurity/crowdsec/releases/tag/v1.0.0) which introduces several improvements to the [previous version] (https://dev.to/jeand/crowdsec-an-open-source-modernized-collaborative-fail2ban-371i), including a major architectural change: the introduction of a local REST API.

This local API allows all components to communicate together in a more efficient way, supporting more complex architectures, while keeping it simple for mono-machines users. It also makes the creation of bouncers (the remediation component) much simpler and renders them more resilient to upcoming changes, limiting the necessary maintenance time.

**New architecture**

In the new 1.0 release, the CrowdSec architecture has been deeply remodeled:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/63wko8gyjx8htz1uihfe.png)

All CrowdSec components (the agent reading logs, cscli for humans, and bouncers to deter the bad guys) can now communicate together via a REST API, instead of reading or writing directly in the database. With this new version, only the local API service will interact with the database (supports SQLite, PostgreSQL and MySQL).

**What it brings to the table**

The benefits of having a REST API for bouncers are major:
* Bouncers become truly stateless, making it possible to build new ones for serverless/lambda environments
* Future changes in DB schemas won’t impact bouncers, and API versioning ensures smooth control over this 
* Bouncer implementation becomes really quick and easy: just one HTTP GET request with an API token is needed

Much more details about this new release benefits can be found in the [product announcement here] (https://crowdsec.net/2020/12/07/crowdsec-v-1-0-is-out/). 

We would love to hear your feedback about this latest release. If you are interested in testing the software or would like to get in touch with the team, here are a few useful links:
* [Download CrowdSec v.1.0] (https://github.com/crowdsecurity/crowdsec/releases/tag/v1.0.0)
* [our website] (https://crowdsec.net/)
* [Twitter] (https://twitter.com/Crowd_Security)
* [GitHub] (https://github.com/crowdsecurity/crowdsec)
* [Gitter] (https://gitter.im/crowdsec-project/community#)

Hope to hear from you soon!

The CrowdSec team
Toolbox, a Nuxtjs boilerplate with atomic-design in mind
Tags: nuxt, frontend, webdev, productivity
Published: 2020-12-08 14:41:08

Hello all ! 

In an attempt to boost my productivity while staying lazy, I started to create a boilerplate for future personal, pro and school projects. And so I present to you (in its early stage) toolbox ! 

## What is it ?

Toolbox is a project based on Nuxtjs that aims to give frontend developers all the basic HTML structures and elements to bootstrap a project. Forms, menus, tables, you name it. So whenever you need to build a new website, all you would need to do is to gather theses ready-to-use elements and add your custom style according to your graphical chart.

It is based on the concepts of atomic design and component driven development.

### Why atomic design ?

I discovered atomic design only recently. In my opinion, this is a really powerful way to build frontend. The fact that it abstracts "complex" HTML structures like tables, modales, forms, menu into a simple ready-to-use component pleases me a lot. To me, these are the benefits of atomic design : 

 * code is less redundant
 * CSS style scope is reduced and more precise
 * customisation is way easier
 * putting everything together to form a complete and complex page is faster

To know more about atomic design and component driven development, you can check out this [article](https://itnext.io/a-guide-to-component-driven-development-cdd-1516f65d8b55)

### Why Nuxtjs ?

Mostly because I have a great time using Nuxtjs for building websites. It is fast and well organized. And with its system of `layout`, `page` and `component`, it already has a foot in atomic design in a way. And most of all, it comes with a lot of useful features like Typescript, Axios for API request and PWA support.

## For who ?

At this moment, only for tinkerers. The project is yet at its early stage and can't do much. So if you want something to play around, or if you don't have high expectations, you can use it right now.

But eventually of course, this will be used for serious personal projects and why not for a company or a client.

## Want to know more ?

You can check the github repo [here](https://github.com/deozza/toolbox) to know more about toolbox. How to use it and what's coming next.
Taking photo from camera
Tags: html, media, photo
Published: 2020-12-08 14:39:41

I wanted to take a photo from my camera and modify the name of the input file button

You can test it here : [Photo] (https://flems.io/#0=N4IgzgpgNhDGAuEAmIBcIB0ALeBbKIANCAGYCWMYaA2qAHYCGuEamO+RIsA9nYn6wA8SMgDcABGHgBPGAF4AOiADuZJPCyoAzAFYADAAcAHgG5xuBgCcA5mTqo94hgFd43MxZt2AtG4Op9YxNEI3hvBigya3tYCD4ISxMlAD4FOnFxQTsDV0kZeSURMAMoBmlUOl4IJJBxGQMIRVIKCCVxNSaDLG43NvgyeALatoZYWIN4JrILawgAegAqNtgGCedLRqUV5ksGNoyDw6PxXlgsBjpZpvgGAGsIAAVutwAKCFE4+ABKNrnUujSGUEACNXG50ic6LBIrBbk0kNxYM5mHwMLN4ABRGAo+AAIWkAEkkC8AORdHrcElfDDQsiwl4-ED-A4AFTuECc4nJbnEL145m4wJaXxOlnEAGFutxIJzyDBeUgIGBbn4fhDBHNQfBwf9AZkRBIpLJNiBPLY6L5uP5xIFTCk9VlcNZ2kgmtxXDl4G1VOosE0tAAmPRtLAQKI4f1BpR-B1zA3-DXxtLJ+DiNKCMCwSxkCbM8QwVMXazyuTiPRJCF6kjOKH9fmWHoMRAM8TAPUZIvygDUpYAnOX2+JRFZ2k7xKWEUicWiIJjsZ98UTSe74J6qRXDtNrBhIPAAILa7NaiCko0wEmEcQAA3guzoYBI3EsuFQDZuzYAJMBOxAAL6K6wvivL4N3EX89SrGsEDIfkbnuJ4KTeEU2whDJhzFFdPXHcRJ2RT4ZznCAcUXYkSUw1x10Hcj4B3SxYGwgBVAAlAAZGkNibCAAHlgQAKzgeBmJYt4PlRG4bFnDA5SVag9AAXRAqiPVcDAGCQJAMVE+AWLIKQ4gSF4thhW4lEvFs5GScQ304hk1QycC6A1TNs1zZMIU4SAYGg3gqHQABGPyHBAX9CHoJgWHQDBeKoYgeHiAR0GC0KQEYZhWBpMAYq4Xh+HgVgtXBVtAWBUZbmsBsayQVA6jvYorE+DdgSfRVLGqgd0hK2FyvdOgqpwqxbifItqkBHgoCfarlCwAYRvSAw1JES5qr8ww7Q65qEm8XYRGcMBqp0IJAUfPhvGUMNrBwaqmqgJAN2OsIwDIAAvCBloDQ70iRSwwAmrluDsRBEjSX8POgASYPvVhe1QPyAHZgrk38gA)

```html
<div style="width:350px; 
 margin:0 auto; margin-top:50px;text-align:center;">

  <input style="display:none" type="file" id="photo" title="" 
 accept="image/*" capture="camera" onchange="takePhoto(event)" />

  <button  onclick="document.getElementById('photo').click()">
   Take a photo (on mobile) or Choose a file (desktop)
  </button>

  <div style="margin-top: 50px;">
  <img id="output" width="320" height="320"/>
  </div>
</div>

	 
<script>
  let angle = 0;
  
  function rotate() {
    angle += 90;
    var img = document.getElementById('output');
    img.setAttribute('style', `transform:rotate(${angle}deg)`);
  }
  
  function takePhoto(e) {
    var output = document.getElementById('output');
    output.src = URL.createObjectURL(event.target.files[0]);
    output.addEventListener("click", () => rotate())
  }
</script>
```
Making Regular Expressions Readable in JavaScript
Tags: opensource, javascript, npm, regex
Published: 2020-12-08 14:38:01

---
title: Making Regular Expressions Readable in JavaScript
published: true
description: My first foray into Open Source development.
series: Open-Source
tags: opensource, javascript, npm, regex
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/0aqfgmj36mhbdpmuoh00.png
---
# Reggie-Docs

> "My first foray into Open Source development."

Now, this is not the first time I've contributed to open-source software. It is the first time I have submitted my own project to [npmjs](https://www.npmjs.com/~bfornal).

## The Project: Reggie Docs

Regular Expressions are complicated to write.

They are even more difficult to reason about; especially if you have to read someone else's code.

About a year ago, I wrote an article about an experiment I was working with (see it [HERE](https://dev.to/rfornal/regular-expressions-and-template-literals-45f9)). I've actually used this pattern several times since writing the article and working through the code.

Then, someone said, "this should be an open-source library."

And ... something in my brain clicked.

And ... I started reworking the codebase I had into something more functional.

## The Open-Source Project

The project is here: [reggie-docs](https://www.npmjs.com/package/reggie-docs).

This project will allow a developer to use a Template Literal to build a regex, with comments to make it more readable.

```javascript
const code0001 = `
  /* Matches text avoiding additional spaces
  */
  ^       // Beginning of line
  [\\s]*  // Zero or more whitespace
  (.*?)   // Any characters, zero to unlimited,
          //   lazy (as few times as possible, expanding as needed)
  [\\s]*  // Zero or more whitespace
  $       // End of line
`;
```

... rather than ...

```javascript
const code0001regex = /^[\s]*(.*?)[\s]*$/;
```

Here's a pattern for use of the `code0001` above ...

```javascript
const Reggie = require('reggie-docs');
const reggie = new Reggie();
 
let results = {};
 
const patternCheck0001 = '  Test Spaces Before and After   ';
 
results.code0001 = reggie.create(code0001);
const code0001Exp = reggie.generate(code0001);
results.code0001Test = code0001Exp.exec(patternCheck0001)[1];
```

## Conclusion

The whole concept of this project is to make Regular Expressions easier to understand and reason about. In doing this, the process should be simple and easy to work with.
Why did I move abroad?
Tags: work, moving, abroad
Published: 2021-01-16 02:04:57

---
title: Why did I move abroad?
published: true
date: 2020-12-07 00:00:00 UTC
tags: work, moving, abroad
canonical_url: https://www.manuelobregozo.com/thoughts/move-abroad
---

Have you ever felt stuck, like nothing was worth it anymore, lacking motivation? Well, that was me a few years ago.

I am not really sure why, but that was when one afternoon, after having a horrible day at work, I had my “f\*\*\* this” event (like MJ Demarco would say) and I decided to start looking for a change that later evolved to find a job abroad.

Far from being a hater of my own country, I just wanted to explore the world and feel forced to expose myself in an international environment and learn from different cultures (something that I still find fascinating). Other things that encouraged me to take that decision were, the challenge in itself, the variety of conferences and the networking that comes with them, and the possibility to work in countries where the tech scene was booming.

It did not happened from one day to the other, it took me some time to achieved it. I had to level my English (until it was decent enough to have a fluent conversation), and improve my interviewing skills and technical aspects. It was not easy, but my girlfriend was always there for me when I was struggling with my insecurities.

Few things that helped me back then (and just in case this is useful for anyone) were:

- A portfolio with side projects, with a good documentation of the main take-aways from a technology and non-technology point of view
- Being active on social media such as Twitter or LinkedIn, specially on topics about my expertise
- Having a cover letter explaining who I am and what I was looking for
- Have one or two job-posting portals to follow daily. In my case I used Linkedin and Stackoverflow (In case you are interested on this specific topic I have created this repository about it in [here](https://github.com/mobregozo/job-finder)) 

And last but not least, to whoever is going through the same situation, during the process there were _haters_ and _motivators_, but after sometime I have learned to focus only on those people who were (and still are) encouraging me to go for it. Because leaving the comfort zone is never easy.

I am not trying to sell this neither to convince anyone that moving abroad is the key to achieve anything in life, just sharing my story to prove that the possibility is there if you want to.
Typescript에서 객체의 프로퍼티를 programatically 참조하는 방법
Tags: typescript, javascript, object
Published: 2020-12-08 14:20:51

## 이슈
Javascript에서는 객체의 프로퍼티를 programatically 접근하기 위하여 대괄호 표기법 `object['propertyName']`을 흔히 사용한다. 다음 예제는 `sample` 객체의 각 프로퍼티를 `sample['taMin' + i]`으로 참조하는 예제이다.

```javascript
const sample = {
  taMin0: 355,
  taMin1: 455,
  taMin2: 555,
  taMin3: 655,
}

for (let i=0; i<4; i++) {
  console.log( sample['taMin' + i] )
}
```
내가 짠 Javascript 프로그램에서는 이런 예가 정말 많다. Typescript 에서는 아래와 같이 `IAbc` 라는 인터페이스 타입을 정의하고 `sample` 객체를 초기화하면 될 줄 알았다.

```javascript
interface IAbc {
  taMin0: number;
  taMin1: number;
  taMin2: number;
  taMin3: number;
}

const sample: IAbc = {
  taMin0: 355,
  taMin1: 455,
  taMin2: 555,
  taMin3: 655,
}

for (let i=0; i<4; i++) {
  console.log( sample['taMin' + i.toString()] )
}
```

그러나 `tsc`를 실행해보면 `for` 문 안의 `sample['taMin' + i.toString()]` 에서 다음과 같은 오류가 발생한다.

`Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'IAbc'. No index signature with a parameter of type 'string' was found on type 'IAbc'.`

해석하자면 sample 객체의 인덱스로 준 `'taMin' + i.toString()`은 `string` 타입인데, 이 타입은 `IAbc`의 인덱스(키) 타입과 다르다는 것이다. 

&nbsp;

## type assertion

구글링을 통해 힌트를 얻은 곳은 Stackoverflow의 다음 글에 있는 답변이다.

{% stackoverflow 52856496 %}

&nbsp;

> 요지는 `type assertion`을 사용해야 한다는 것.

​
위 Stackoverflow 의 답변대로 `keyof typeof` 를 이용하여 아래와 같이 해결할 수 있다. 좌측의 상수 `key` 의 타입도 지정하고 오른쪽의 값도 동일한 타입으로 지정한다.

```javascript
for (let i=0; i<4; i++) {
  const key: keyof typeof sample = 
    ('taMin' + i.toString()) as keyof typeof sample;
  sample[key];
}
```

`const key` 에 마우스 커서를 올려보면(vscode에서) `key`는 다음과 같은 값을 가질 수 있는 타입이 된 것을 알 수 있다

`const key = "taMin0" | "taMin1" | "taMin2" | "taMin3"`

&nbsp;

## `keyof`와 `typeof` 2 개 모두 꼭 필요한가? 

이런 경우 `keyof typeof object` 인 경우이고, object 대신 type을 활용한다면 `keyof type` 으로 약간 더 간소화할 수 있다.

```javascript
  const key2: keyof IAbc = 
    ('taMin' + i.toString()) as keyof IAbc;
  sample[key2];
```

위의 예제에서 `for` 문 대신 `map` 을 사용해도 동일한 오류가 발생한다

```javascript
Object.keys(sample).map((key, i) => {
  sample[key]
})
```

역시 `type assertion`을 해줘야 한다.

```javascript
Object.keys(sample).map((key, i) => {
  const specialKey: keyof IAbc = 
    key as keyof IAbc;
  sample[specialKey];
})
```

Typescript에서 오류가 발생하지 않는 정상적인 전체 소스코드 예는 다음과 같다.

```javascript
interface IAbc {
  taMin0: number;
  taMin1: number;
  taMin2: number;
  taMin3: number;
}

const sample: IAbc = {
  taMin0: 355,
  taMin1: 455,
  taMin2: 555,
  taMin3: 655,
}

for (let i=0; i<4; i++) {
  const key2: keyof IAbc = 
    ('taMin' + i.toString()) as keyof IAbc;
  console.log(sample[key2])
}

Object.keys(sample).map((key, i) => {
  const specialKey: keyof IAbc = key as keyof IAbc;
  console.log(sample[specialKey])
})
```

소시적 C 언어 프로그래밍을 많이 했기 때문에 정적 타입 언어는 금방 적응하겠지 싶었으나, Typescript는 그리 만만치가 않다. 

<span>Photo by <a href="https://unsplash.com/@ohleighann?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Leighann Blackwood</a> on <a href="https://unsplash.com/s/photos/type-script?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>
Learn to say :not()
Tags: css, selector, workflow
Published: 2020-12-08 14:20:40

Hi everyone, **Enzo** here !

The **:not()** selector can be really handy, but there is not much documentation about it.

Here are some useful **cases.**

##1.The border trick

Let's say you have an horizontal grid, and you want to separate each cell with a **border-right.**

```css
.item-grid{
    border-right: 2px solid #000;
}
```
![border](https://dev-to-uploads.s3.amazonaws.com/i/bq9y5juivzr20oh0bt2g.png)

Each cell has a border-right, great, but since the overall grid has borders too, you end up with 2 borders combined on the **last cell** !

Here is the trick with :not() :

```css
/* :last-child or :last-of-type work */

.item-grid:not(:last-of-type) {
    border-right: 1px solid #000;
}

```
Hocus pocus ! Now it's **clean.**

![border clean](https://dev-to-uploads.s3.amazonaws.com/i/10kk961yh7jzjwi1u71o.png)


##2.Multiple :not()

We can go crazy by **chaining** them, like this : 

```css
.item-grid:not(:nth-child(1)):not(:nth-child(3)){
    background: #000;
}
```

It permits us to remove some square from the selection, instead of rewriting multiple selectors :
 
![Multiple square](https://dev-to-uploads.s3.amazonaws.com/i/farenuq8ty8rs181ir1s.png)


But chaining :not() can looks ugly and being hard to understand, so be careful with that one.


##3.The article.

Let say you have a container, with a lot of elements inside, like an article.

```html
 <article>
     <h2>Lorem ipsum dolor sit amet.</h2>
     <hr>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet consectetur veritatis recusandae vitae voluptates sunt est, magni harum ex obcaecati.</p>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut magni fuga eum eius, natus iure.</p>
     <a href="#">Lorem, ipsum dolor.</a>
 </article>
```
We often need to apply properties to multiple elements inside a container, but with some **exceptions.**
We can do it with :not().

Applying padding to everything but the HR :
```css
article *:not(hr){
    padding: 10px 0;
}
```

Font-family to all the text except the link :

```css
article *:not(a){
    font-family: Arial, Helvetica, sans-serif;
}
```

---

That's all folks !

You can find me on **YouTube,** talking about web development(warning, it's in French!🥖🥐🍷 ).
I plan to start an **English** channel too, I just need few weeks to work on my bloody accent.

YT : https://www.youtube.com/c/TheWebSchool

*Take care, and see you next time. ✒️*
Props
Tags: react, javascript
Published: 2020-12-08 14:19:01

## mengirim data dari parent(induk) ke child(anak)

props itu mirip sebuah parameter yang dapat diteruskan dari component parent ke component child lainnya.

Contoh:

```javascript
function Welcome(props) {
  return <h1>Halo, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}
```
Dari contoh diatas di function app menurunkan props name yang valuenya Sara dan di passing di component welcome
New Course on LinkedIn Learning: SQL Analysis for Data Developers
Published: 2020-12-08 14:15:35

---
title: New Course on LinkedIn Learning: SQL Analysis for Data Developers
published: true
description: My very first course is available now on LinkedIn Learning
tags: 
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/1wdvxde1oc7h7hmxwq6v.png
---

I am so excited that my very first course in SQL was published yesterday on LinkedIn Learning! I've been working with SQL since I graduated from college in 2002. I always liked working with SQL and I use it everyday in my work. It made sense to grab some of the things that I learned over the years and pass it on, hopefully, to help someone else in their journey. 

**[SQL Analysis for Data Developers](https://www.linkedin.com/learning/sql-analysis-for-data-developers)**

Teaching helps me to reinforce things that I learned. It challenges me to really understand those things that I have been doing for years.

This is a basic course in relational databases and SQL concepts. It's from my point of view as someone who has worked as both an analyst and a developer. I hope it can be helpful to some people out there. If you enjoy it let me know. I look forward to making more.

Catch me on **[Twitter](https://twitter.com/nikiya_simpson)** and **[LinkedIn](https://www.linkedin.com/in/nikiya-simpson/)**
Track your Bandwidth & Storage limits with our Quota API
Tags: cloudsmith, quotas
Published: 2020-12-08 14:14:26

---
title: Track your Bandwidth & Storage limits with our Quota API
published: true
description: We have added the ability to check via our API how much storage and bandwidth you are currently using out of your allocated amount.  Get more visibility and control over your usage. 
canonical_url: https://cloudsmith.com/blog/track-your-bandwidth-storage-limits-with-our-quota-api/
tags: cloudsmith, quotas
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/t7qaqimdn5d4plfjgw43.png
---

At Cloudsmith, helping fledgeling startups grow from a single person operation to enterprise-level organisations is a constant joy! In those early stages, startups need all the help they can get to survive, and even veteran organisations experience similar challenges when scaling up rapidly.

Cloudsmith can help with our self-service approach to managing and defining storage and bandwidth limits to keep costs under control while allowing you to scale when needed. After all, no one wants to be caught between an unexpected bill for overages or any interruption to their business, no matter how minor.

The fantastic news is that now you have a new tool in your arsenal, as you can track your bandwidth and storage programmatically via the Quota API. It's easy to miss an email when your busy or a prompt within the Cloudsmith UI (if you haven't needed to log in recently); but you will always want to know if you're near/over a limit or even if you're over-provisioned.

Now you can automate a solution that works for you using either our API or CLI to always stay on top of your storage and bandwidth limits.

##Getting started quickly
Using the Cloudsmith CLI, you can quickly and easily view the usage, limits, and maximum allocation of bandwidth and storage for your plan.

```bash
cloudsmith quota limits ORG-NAME
```

![Quota Limits CLI](https://dev-to-uploads.s3.amazonaws.com/i/wiq59gybuvm2l5mb8sy7.png)

Alternatively, if you want to view the entire history for your organisation:

```bash
cloudsmith quota history ORG-NAME
```

![Quota history](https://dev-to-uploads.s3.amazonaws.com/i/npv7wdkmvityqohdflg1.png)

Finally, to view the OSS usage for an organisation, you can add the `-oss` flag to any command to view only OSS limits and history.

```bash 
cloudsmith quota limits ORG-NAME -oss
cloudsmith quota history ORG-NAME -oss
```

If you identify a limit that is over-provisioned or quickly approaching a threshold, then you can quickly and easily [adjust your limits](https://help.cloudsmith.io/docs/organisations?#usage-limits) at any time within the Cloudsmith UI.

![Organization Limits UI](https://dev-to-uploads.s3.amazonaws.com/i/6mrgdfzo38nnhcnhetv9.png)

Additionally, if you wish to automate a solution, you can also check out the Quota API or the Cloudsmith API Bindings (available in multiple languages) and connect it to your favourite CI/CD or monitoring service to alert internally within your organisation.
Component
Tags: react, javascript
Published: 2020-12-08 14:01:19

Class atau function di React itu adalah bagian dari UI.

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

Contoh: Navbar, Sidebar, dsb.

Component component ini bisa dipecah lagi.
JAVASCRIPT, why do they say “it’s easy to learn”
Tags: javascript, frameworks, style, help
Published: 2020-12-08 13:55:27

I’ve been running into that, JS is tough at times, you have to do a arrow or no arrow function, once you create a function, to implement something you made into it... or replug what you made up above? Things like Nodes or Attributes at times .... I mess up what’s being referenced and it messes it up. Allot, ALLOT of tutorials will just create objects, but don’t use ANYTHING in a proper real world example.
Pageclip
Tags: pageclip, html, css, form
Published: 2020-12-08 13:53:10

Hello, Dev's😎
Recently, When I creating my portfolio website's contact form. I thought about how to manage the data of the contact form. Then I know about **Pageclip** (which is a server for HTML forms). It is a great server to manage HTML Forms. It has many features and easy to install and handle.  I am using this service on my website to manage my forms data.

**📌 Tip:-** If you have a [**Github Student Developers pack**](https://education.github.com/pack) you can avail of 20,000 form submissions for free.

To know more go through the below link.👇
<hr>**Pageclip website link:-** https://pageclip.co/
**Thankyou 🙏**