teleren/devto huggingface dataset:
Deploying A Next.js App On Vercel
Tags: javascript, webdev, beginners, react
Published: 2022-01-12 14:25:17

![next.js logo](https://assets.vercel.com/image/upload/q_auto/front/assets/design/white-nextjs.png)
vercel is the best platform to deploy and test your next.js application. Let's see how you can deploy there for free.

for this, you'll need to have one account:
- [vercel](https://vercel.com/) (ofc)

first of all, make a git repository with a next.js project
``` bash
npx create-next-app
git init
```

### Now install vercel globally:
``` bash
npm i -g vercel
# or
yarn add -g vercel
```

### deploy !
``` bash
vercel
? Set up and deploy “~/web/my-new-project”? [Y/n] y
? Which scope do you want to deploy to? My Awesome Team
? Link to existing project? [y/N] n
? What’s your project’s name? my-new-project
? In which directory is your code located? my-new-project/
Auto-detected project settings (Next.js):
- Build Command: `next build` or `build` from `package.json`
- Output Directory: Next.js default
- Development Command: next dev --port $PORT
? Want to override the settings? [y/N]


# and for production
vercel --prod
```

### read more [here](https://atordvairn.js.cool/deploying-a-next.js-app-on-vercel)
Understand a confusing piece of code in plain English on any site
Tags: python, javascript, php, webdev
Published: 2022-01-12 14:23:13

I made a Chrome extension to explain code in plain English. It can work well with Python, Javascript, Go, Perl, PHP, Ruby etc.
https://chrome.google.com/webstore/detail/codexplainer-ai-beta/mekadgeckpcgideipfhbcapmenbadejp

Since it is a browser extension, it can explain code straight on your favorite sites: Stackoverflow, Github, Codepen, etc.

It's completely free. I built this app to help learners and aspiring developers.

The app utilizes an AI, so be concise on what you ask. And please consider writing some feedback.
LET'S TALK ABOUT DJANGO CBV AND FBV
Tags: python, django, beginners, webdev
Published: 2022-01-12 14:15:20

##**Introduction**
The Django CBV (Class Based Views) and FBV (Function Based Views) are the methods you can use to handle the MVT or the Model-View-Template workflow in a Django app. From their name itself what differentiates both of them.

###**Django FBV**

_**Pros**_
_**1.Beginner friendly**_
It is easy to study and to code. If you look on someone's FBV source code, you can understand how the job was done under the hood just by reading the lines of their code. In terms of coding it, you can do it just like how you code any python projects.
_**2.Name it anything you want**_
You can name these functions anything you want unlike CBV functions. As long as it does the job

_**Cons**_
_**1.You need to do every piece of your code**_
Bit hassle to do. You need to code all the parts.

####Example of Django FBV
```
def TaskList(request):
	task = Task.objects.all()
	context = {'task':task}
	return render(request, 'base/tasks.html', context)
```

###**Django CBV**

_**Pros**_
_**1.Have so many built-ins**_
Have so many built-ins to use instead of coding all of them unlike the FBV. Let's say you make a view for making tasks and saving it. Instead of getting its object values then save it by calling ".save()", you can simply use the built-in "CreateView", give the Model and fields, and it will automatically saves.
_**2.Built ins have cool features you're not expecting**_
Django CBV built-in like DeleteView already provides delete confirmation, all you need to do is to connect your template on your DeleteView and put some for about it.
_**3.Cleaner code**_
Since you can use many built-ins your code looks better and shorter.

_**Cons**_
_**1.Bit difficult to understand**_
Yes it is. CBV is a bit difficult compare to FBV especially when you're using built-ins and some part may look confusing.
_**2.Class functions should named based on calls**_
Like what I said earlier, you can't name its class functions base on what you want. You should base it in calls like POST, GET, etc.

```
class TaskList(ListView):
	model = Task
	template_name = 'base/tasks.html'
	context_object_name = 'tasks'
```

###**Tip:**
I you're a beginner, it's better if you use the FBV first and be comfortable with it before moving to CBV. A lot of Django built-ins for CBV was built for the simple tasks you do in FBV and if you hop in CBV without understanding why you need them and what it will do, you will get confuse.

###**Conclusion**
None of them are better than another one. They have their own way in doing the job. There's something FBV can do that the CBV can't and also there's something CBV can while FBV can't. You should use what standards and kind of work suits the problem.
AG Grid Community Roundup December 2021
Tags: javascript, react, angular, aggrid
Published: 2022-01-12 14:14:32

---
title: AG Grid Community Roundup December 2021
published: true
description: A collation of news and posts relating to AG Grid from December 2021
tags: javascript, react, angular, aggrid
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tfhwf9e2utn2thkuxmej.png
---

December was a bit of slow month because we were all using up the remainder of our holidays, but now that we are back we can take stock of informational content created.

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

## Webinars

### Angular Nation

[Sean Landsman](https://blog.ag-grid.com/author/sean/) and [Stephen Cooper](https://blog.ag-grid.com/author/stephen/) from the AG Grid development team presented a webinar for [Angular Nation](https://www.angularnation.net/feed) to demonstrate how to quickly get started with Angular and the type safety features.

{% youtube MRy--gvA8kI %}

### Cypress Testing

[Alan Richardson](https://blog.ag-grid.com/author/alan/) interviewed [Kerry McKeever](https://kerrymckeever.com/) to learn about the open source Cypress AG Grid plugin he [open sourced on Github](https://github.com/kpmck/cypress-ag-grid).

Kerry explained and demonstrate the plugin for us, and we recorded the session.

{% youtube lL3e0wRBluM %}



## Content About AG Grid

[Ramya Balasubramanian](https://ramya-bala221190.medium.com/) wrote about using [FormGroups in a custom cell renderer](https://javascript.plainenglish.io/using-formarrays-and-formgroups-in-ag-grid-tables-e02dd7af51f1).

[May Chen](https://medium.com/@mayyyyyyc) created blog posts around:

- a way of [creating columns dynamically](https://medium.com/nexl-engineering/rendering-columns-dynamically-ag-grid-with-react-and-typescript-f35c0feaf67) in AG Grid.
- [rendering d3 charts](https://medium.com/nexl-engineering/rendering-d3-chart-in-ag-grid-cell-ag-grid-with-react-and-typescript-2ed5ee848763)
- [row grouping with cell renderers](https://medium.com/nexl-engineering/row-grouping-when-you-have-cell-renderer-ag-grid-with-react-and-typescript-cabba1722952)

[Chris Rao](https://medium.com/@chris.va.rao) wrote about [custom server side pagination approaches](https://achievers.engineering/server-side-pagination-in-ag-react-data-grid-community-edition-f1c7b5c9a8e)



## Blog Posts From AG Grid

Quick Filter function to filter the entire grid with one filter term can be customised easily. In this blog post Stephen Cooper demonstrates [how to filter only visible columns](https://blog.ag-grid.com/quick-filter-on-only-visible-columns/)

We also wrote up a [summary of the Cypress Testing Webinar with Kerry McKeever](https://blog.ag-grid.com/cypress-plugin-for-ag-grid/).
Paracetamol.js💊| #5: Explica este código JavaScript
Tags: javascript, beginners, webdev, spanish
Published: 2022-01-12 14:11:43

## **¿Puedes explicar este código?**

```js
console.log(false == null); // false
console.log(false == undefined); // false
```
Siendo `null` y `undefined` valores `falsy`, ¿por qué pasa esto?

---

Respuesta en el primer comentario.
How to rename default branch in Git and GitHub
Tags: git, github, webdev, productivity
Published: 2022-01-12 14:11:32

I'm currently [maintaining a GitHub repo](https://github.com/amandeepmittal/react-native-examples) that is grown over the last year. It primarily contains all the example code that I create when working on React Native and Expo articles and tutorials.

Recently, I switched the default branch to main. Here are the steps I took. All of these commands execute inside a terminal window.

Start by moving the default branch locally using the `-m` flag.

```shell
git branch -m master main
```

Set the new branch as the local default on the remote. By default, Git doesn't allow renaming a remote branch.

```shell
git push -u origin main

# output
* [new branch]      main -> main
Branch 'main' set up to track remote branch 'main' from 'origin'.
```

Set the current local HEAD branch to point to the new branch on GitHub.

```shell
git remote set-head origin main
```

Now, go to the GitHub repo. Open Settings > Branches. Under Default Branch, click the edit button to switch to the `main` branch.

![ss1](https://i.imgur.com/T9Mm8g5.png)

Now, go back to the terminal window and run the following command to delete the previous old default branch.

```shell
git push origin --delete master

# output
To https://github.com/account/repo.git
- [deleted]         master
```

That's it!
The {... } is dangerous
Tags: javascript, webdev, programming, performance
Published: 2022-01-12 14:10:52

**Spread syntax (...)** allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected.

I had a serious issue with the {... } operator that made the browser  stop working entirely.

Let me explain:

I have an API that returns an array of objects and I want to reduce these objects to  a single object.

## my implementation wasthis:

``` js
const features = APIResposne.features.reduce(
                (prev, feature) => {
                    return {
                        ...prev,
                        [feature.id]: feature.value
                    };
                },
                {},
            );
```

the problem with this approach is that the I am copying the previous object allover again and creating a new object in each iteration which is - yes you guessed it right - taking an extra **O(N)**

making the reduce **O(N^2)** instead of **O(N)**. 

## The correct solution should be:

```js

const features = APIResposne.features.reduce(
                (prev, feature) => {

                    prev[feature.id] = feature.value;
                    return prev;
                },
                {},
            );

```

## What to learn from this:

- Easy does not mean efficient.
- You should always understand how these cool operators work.
I started to write on english, this is why
Tags: writing, javascript, tutorial
Published: 2022-01-12 13:50:32

When I thought about this topic, I said to myself “Writing in English is hard, because it’s not my native language”

It’s hard but is also an opportunity. I needed to start practicing my English. And guess what was the way?

I said, “Ok I will start to write in English because almost every content I consume online is in English and I have read and watched a lot”

But of course writing is challenging.

So in this article, I teach you what it’s working for me.

## Writing is hard: Thinking in a different language

Of course, I could use the easy way who was to just use translate apps.

But this was enough?

I have been using google translate with my Spanish-based articles. And it worked weird.

It doesn´t have that consistency or as I want to call “soul”.

It seemed like just different words and doesn’t seem to be written by a human.

So another thing that happens to me, was to begin writing in English. 

And maybe I will sound better, you can judge by yourself.

Of course, my grammar is not the best, but anyways here I am. And I will continue to improve.

## More writing equals better writing: Why consistency over time matters

Just focusing on writing. It´s that simple?

Maybe not, but some of the benefits I could say are

- Start thinking in English
- Start creating content (in English ofc)
- Having more articles makes you more confident. Like “I have written so many articles, I know I am good”

As you see, there are many benefits and progress over time.

## In general, it´s cool to learn a new language in this way.

Receiving and giving are both beautiful things to do.

And consuming media in a different language makes it faster to learn it.

Also, It seems that you are giving your knowledge, expertise and somehow improving the way for us.

It´s that simple. 

## Let's connect

Remember you can follow me on Twitter [@fernandocutire](https://twitter.com/fernandocutire), I am getting better at writing in English so we could talk there.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x5ym12tgb443cl6ztalq.jpg)
Navbar Components using HTML CSS
Tags: webdev, javascript, programming, beginners
Published: 2022-01-12 13:49:28

Navigation bar is most important component of your website because it is the center attraction when anyone visit to your website so its important to look attractive.
Here is following code for Navbar in website
###HTML Code

```
<header>
            <nav>
                <div class="ig">
                    <a href="https://github.com/ganeshpatil386386" target="_blank" id="git">
                    <img src="./assets/Logo.png" id="lg" alt="" srcset="">
                    <p style="text-align:left;font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;">ganeshpatil386386</p>
                </a>
                </div>
                <input type="text" name="" id="search-box" placeholder="Explore Projects">
                <ul>
                    <li><a href="#first">Website Dev</a></li>
                    <li><a href="#second">Software Dev</a></li>
                    <li><a href="#Third">Mobile Dev</a></li>

                </ul>
            </nav>
        </header>
```

### CSS Code
Now we need to add interaction and attractive part with CSS to our website component I developed website for GitHub repo showcase you can visit and check on my GitHub profile.
```
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
body{
    background-color: #F05454;
}
header{
    position: fixed;
}
nav{
    display: flex;
    
}
#lg{
    height: 80px;
    align-items: center;
    
}
.ig{
    margin: 10px;
}
#git{
    text-decoration: none;
    
    
}
#search-box{
    width: 25rem;
    height: 2rem;
    border: none;
    border-radius: 6px;
    padding-left: 5px;
    box-shadow: 2px 2px 1px 2px #fff;
    margin: 30px;
    display: flex;
    
}
nav ul{
    display: flex;
    list-style: none;
    margin: 33px;
}
nav a{
    text-decoration: none;
    padding: 6px 10px;
    font-size: 17px;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    
}
nav a:hover{
    border-bottom: 2px solid black;
    transform: 0.5px ease;
}
```
This is simple navigation bar component for our website so its no need JS for completed code visit my GitHub profile and check it out...!!
[GitHub project Link](https://github.com/ganeshpatil386386/Github_Showcase)
don't forget hit like button and follow me GitHub for  web development projects.
also conn with me [Twitter](https://twitter.com/PatilGanesh1010)
Thankyou for reading express your views in comment section...!!
How stupid is Matlab for loop?
Tags: matlab, programming, python, c
Published: 2022-01-11 12:39:55

Before I answer the question in the title, let look at how for loop in Python and C are expressed in human language

## Python
```python
v = [1, 2, 3, 4]
for i in v:
    print(i)
```
Human language: there is a variable `v` assigned a list `[1, 2, 3, 4]`. Then **for** each element **in** `v` (stored in variable `i`) is printed. 

You can see it's very straight forward.

## C
```c
int v[] = {1, 2, 3, 4};
int i = 0;
for(i = 0; i < 4; i++) {
    print("%d", v[i]);
}
//for ( init; condition; increment ) {
//   statement(s);
//}
```
Human language: there is a variable `v` assigned an array `{1, 2, 3, 4}`. Then, a variable `i` stores integer 0. Then **for** `i` starts with 0 (the initial), when is smaller than 4 (the condition), increase `i` by one (the increment) and print the value element of `v` by the index (the statment).

It's longer than Python (of course, C is a low level language). However, the description is still straightforward. It's just added some linking words to ease human mind. 

## Matlab
```matlab
for v = [1 2 3 4]
   disp(v);
end
```

By instinct, when you see `v = [1 2 3 4]`, you will say a variable `v` assigned an array `[1 2 3 4]`. Guess what? it becomes the iterator when being added to a for loop. 

I tried to express this thing in human language that is close to the code but nothing works. 

Try 1: for v is assigned to an array, display element of v

Here you can see it doesn't show that v is an iterator. And v has two meanings. 

Try 2: for each v in `[1 2 3 4]`, display v

But v is assigned to an array?? We all know equal sign and belong sign are two different things.

There isn't a proper human language description for this one. And you have to remember that `=` has two meanings:
- assign when not in a for loop
- in when in a for loop

If MathWork read this blog, please use something different than `=`. You can use `in` or `belongto` or `iterate`. 

Now you see how stupid it is.
Inspecting Disappearing WebElement
Tags: selenium, xpath, locators
Published: 2022-01-12 13:48:53

Inspecting the source of a particular web element is sometimes tricky especially if the element in question disappears once the focus is removed from it, or sometimes even just moving the mouse pointer outside its borders. 

The easiest way to capture these elements is to trigger the debugger of the browser to pause execution after a specified timeout - presumably with enough time have the disappearing element appear.

Just paste the snippet in to the browser's console. Just increase the timeout if 5 seconds is not enough.

```
setTimeout(() => { debugger; }, 5000)
```
Blockchain Connector
Tags: blockchain, web3, javascript, discuss
Published: 2022-01-12 13:42:00

Hello world! 
Im new into the crypto dev world, and Im looking to create a program that would query transactions data from multiple blockchains
i.e. Solana, Ethereum, Polygon etc...

did any1 hear of some library that could help me do that?

talk to me :) any suggestion or lead would help !
How to create Tabs in ReactJs using Hooks ?
Tags: react, customhooks, reacthooks, customtabs
Published: 2022-01-12 13:41:58

Tabs is very useful functionality for switching between two or more views. But sometimes we need add something custom for match our requirements. In this example, I am gone show you how to create tabs from scratch using react hooks. Follow my steps for achieve your requirements :)

**Step 1** : Create a React Application using this command.

`npx create-react-app yourprojectname`

**Step 2** : After executing above command & creating your project folder i.e. yourprojectname, move to project folder using this command.

`cd yourprojectname`

**Step 3** : Start your React application using yarn or npm by following this command.

`npm start or yarn start`

Let's write down interesting code in **App.js** file and create our custom tabs using hooks

```
import React,{useState} from 'react'

const Tab1 = () =>{
  return(
    <div style={{border:'1px solid',margin:'10px',padding:'20px'}}>
      <p>tab1 shows</p>
    </div>
  )
}

const Tab2 = () =>{
  return(
    <div style={{border:'1px solid',margin:'10px',padding:'20px'}}>
      <p>tab2 shows</p>
    </div>
  )
}

export default function App() {

  const [activeTab, setActiveTab] = useState("tab1");

  const handleTab1 = () => {
    setActiveTab("tab1");
  };
  const handleTab2 = () => {
    setActiveTab("tab2");
  };


  return (
    <div className="App">
      <div className="tabs">
      <div className="tab-link" style={{display:'flex'}}>
        <p onClick={handleTab1} 
        className={activeTab === "tab1" ? "active" : ""} 
        style={{cursor:'pointer',padding:'20px',border:'1px solid',margin:'0px 10px'}}
        >
        Tab1
        </p>
        <p 
        onClick={handleTab2} 
        className={activeTab === "tab2" ? "active" : ""} 
        style={{cursor:'pointer',padding:'20px',border:'1px solid',margin:'0px 10px'}}
        >
        Tab2
        </p>
      </div>
      <div className="outlet">
      {activeTab === "tab1" ? <Tab1 /> : <Tab2 />}
      </div>
    </div>
    </div>
  );
}
```
**Output** :  After saving **App.js** file, Now open your browser and go to **http://localhost:3000**, You will the following output


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o91rzvsk4ai8q0w7rmih.png)
DevShop a Mern Ecommerce App MongoDB Submission
Tags: atlashackathon
Published: 2022-01-12 13:41:39

[Instructions]: # (To submit to the MongoDB Atlas Hackathon on DEV, please fill out all sections.)


### Overview of My Submission
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zso6jdb1zb7a0eapv560.png)
[Note]: # (Please make sure the project links to the appropriate GitHub repository, and includes the [Apache-2 permissive license](https://www.apache.org/licenses/LICENSE-2.0)  and README.)

I Have Built an Ecommerce Store using MERN Stack with some basic Functionalities with Login Logout features, and Stripe Payment Gateway
This is Mobile Responsive Too
You can Login Register and make a payment

For Payments use test cards of Stripe

eg: 424242424242..., 
Month: any month, 
Year: Any Further Year,
CVV: any

Here is the Link to the demo app
[demo](https://musing-sinoussi-d56563.netlify.app/)

**Frontend**: Hosted On Netlify
**Backend**: Hosted on Heroku
 

### Submission Category: 
#E-Commerce
[Note]: # (E-Commerce Creation, Prime Time, Action Star, Automation Innovation, or Choose Your Own Adventure)


### Link to Code

[Note]: # (Our markdown editor supports pretty embeds. Try this syntax: `{% github link_to_your_repo %}` to share a GitHub repository)

**Frontend**
{% github https://github.com/Basudev1/ecom-frontend %}

**Backend**
{% github https://github.com/Basudev1/ecom-backend %}

**Admin Panel**
{% github https://github.com/Basudev1/ecom-admin %}


### Additional Resources / Info

Used React JS for Frontend
Mongodb, Nodejs and Express for Backend