teleren/devto huggingface dataset:
A Beginners Guide to MERN Stack!
Published: 2022-08-24 12:07:00

## What is a Tech Stack?

A Stack is a combination of all frameworks and libraries using which you can create an entire application from Frontend to Backend and Database.

## MERN Stack

- A variation of Full Stack Web Development.
- MERN Stack is a Tech Stack used in building an End to End Full Stack Web Application.
- We have a client made up of React, Node and Express for API and the backend and MongoDB as the Database.

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

## MongoDB

- MongoDB is a NoSQL Document Based Database.
- Data is stored in the form of documents.
- It does not follow any schema like SQL databases do.

## Express

- Express is a backend framework for creating Web Applications on Node.js.
- Express lets you build a server that runs on Node. 
-  A Server receives requests from the client and returns back a response. 
- It is responsible for interacting with the Database.

## Node

- Node is a open source Cross platform Runtime Environment for running JavaScript Applications. 
- Since JavaScript can only run inside the browser, Node sets up an environment where we can run JavaScript on the server as well.

## React

- React is a JS library for creating interactive Frontend for your Web Application. 
- React uses Virtual DOM which updates fast on changed then a Regular DOM.

## How does MERN Stack work?

1. A User interacts with the Frontend/Client side of the application built using React.

2. The User click a button which requests a specific data.

3. This request is sent by the Client/Frontend to the Server/Backend in the form of a HTTP request.

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

4. The Server then analyzes the request. Depending on the nature and context of the request the Server interacts with MongoDB database. The Server can add, retrieve, update and delete data from the Database.

5. The Server interacts with the Database on behalf of the user. If the interaction is a success, the Server sends a response back with the requested data to the Client.

6. The Client then renders this data on the UI so that the User can read and interact with it.

## Roadmap for MERN Stack Development

1. Fundamentals of Web
2. HTML
3. CSS
4. CSS Frameworks like Bootstrap and Tailwind
5. JavaScript
6. JavaScript ES6
7. React
8. Node
9. Express
10. MongoDB
11. Git and GitHub

## Resources for MERN stack

YouTube courses:

1-[youtu.be/98BzS5Oz5E4
](youtu.be/98BzS5Oz5E4
)

2-[youtu.be/-0exw-9YJBo
](youtu.be/-0exw-9YJBo
)

3-[youtu.be/ktjafK4SgWM
](youtu.be/ktjafK4SgWM)

4-[youtu.be/H-9l-gTq-C4
](youtu.be/H-9l-gTq-C4
)
> Thank you for reading. ❤️
Cors policy error
Published: 2022-08-24 11:57:22

hi everyone,
I try to send a request from React to spring boot but I still get this error.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yfwy9r9hpof9ykxeiq3e.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tjmazseayzxigsca4h0r.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0f465hlx1rks1uvil8h2.png)
Scrum Vs Agile - what's the difference
Tags: beginners, tutorial, productivity, writing
Published: 2022-08-24 11:52:00


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

Scrum is a framework that helps teams to work together. This makes people in the team learn based on the experiences they gain.

But agile is a mindset. It's a set of rules and principles.
Scrum is about shipping value to customers.
All members of a team can use scrum like developers, HR, marketing, designing, and so on.

Scrum embraces changes. It is the best option for these types of things that change a lot. For example, in software engineering, when you divide big or complex tasks into smaller tasks, your goals change quickly.

In scrum, there are terms such as sprint, which means a short, time-boxed period to complete a work or task and move it to the done section.

It makes projects more manageable and for example, if you make a bad decision, unlike [waterfall](https://dev.to/iw4p/development-methodologies-waterfall-272p), it allows you to fix it faster. Because it's based on iterations.
Short iterations decrease risk and cost and help the team to stay focused.

People and teams still make mistakes about agile and scrum, but the fact is they're not the same.
Scrum is a framework, but agile is not. It is a mindset.
In scrum, we have a scrum master. Big companies hire scrum masters to go through the development stages of the project in the best condition and at a low cost.

The scrum master helps to facilitate scrum to the larger team by ensuring the scrum framework is followed. He/she is committed to the scrum values and practices, but should also remain flexible and open to opportunities for the team to improve their workflow.

He has the duty to organize the scrum stand-ups.
Stand-up is a daily meeting that involves the core team: product owners, developers, and the scrum master.
Scrum stand-ups are 15-minute daily meetings that occur each day of the sprint to discuss progress and quickly note any issues.

During the stand-up, everyone answers these three questions:
1 - What did you do last day (last task)?
2 - What are you going to do today?
3 - Is there any problem or obstacle?

I hope this post helped you to understand the differences between agile and scrum.

Also, if you like to know about other development methodologies, read the [waterfall method](https://dev.to/iw4p/development-methodologies-waterfall-272p) from here.
Creating an Accordion using vanilla Javascript
Tags: javascript, html, css, accordion
Published: 2022-08-24 11:40:05

Let's create a Facts Accordion using HTML, CSS and Vanilla Javascript

Firstly we will create an HTML skeleton of the accordion. There will be 4 Facts card. So the HTML will look like the below :

```
    <div class="container">
      <h2 class="accordion-title">Facts About Mars!</h2>
      <div class="faq-container grid">

        <div class="faq-item">
          <header class="faq-header">
            <i class="ri-add-line"></i>
            <h4 class="faq-header-title">Also known as the Red Planet</h4>
          </header>
          <div class="faq-desp">
            <p class="faq-desp-content">
              This is because Mars is covered in soil, rock, and dust made from
              iron oxide which gives the surface a red rusty colour
            </p>
          </div>
        </div>
 
     </div>
    </div>

```
There will be 3 more facts card [_div with a class of faq-item_] inside the [_div with a class of faq-container_]. We will use CSS grid to structure the facts cards:
`.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}`

Our goal is to show/hide the Facts card description [_div tag with a class of faq-desp_] by clicking on the card header [_header tag with a class of faq-header_]

Firstly we will hide the Facts card description using the CSS property height: 0px and overflow: hidden like below:
`.faq-desp {
  overflow: hidden;
  height: 0px;
}`

Now the exciting part is to toggle (show/hide) the description using Javascript. Code snippet below:

```
const faqItems = document.querySelectorAll(".faq-item");

faqItems.forEach((faq) => {
  const faqHeader = faq.querySelector(".faq-header");

  faqHeader.addEventListener("click", () => {
    const openFaq = document.querySelector(".faq-open");

    toogleFaq(faq);

    if (openFaq && openFaq !== faq) {
      toogleFaq(openFaq);
    }
  });
});

const toogleFaq = (faq) => {
  const faqDescription = faq.querySelector(".faq-desp");

  if (faq.classList.contains("faq-open")) {
    faqDescription.removeAttribute("style");
    faq.classList.remove("faq-open");
  } else {
    faqDescription.style.height = faqDescription.scrollHeight + "px";
    faq.classList.add("faq-open");
  }
};
```
Steps to achieve the goal:

1. Select all Facts cards using querySelectorAll
2. Loop over each card using forEach and select the card header
3. Add a click event listener on the header and call the toggle function (it shows/hide the fact card description) with the card as an argument in the callback function of the event listener
4. The toggle function selects the card description and adds an inline style of height which is equal to the scrollHeight. [_The scrollHeight property returns the height of an element including padding, but excluding borders, scrollbars, or margins_]
5. We have achieved our goal. Rest I have added additional styles to make the accordion look presentable

Please find the complete code in the codesandbox here: [Code Sandbox](https://codesandbox.io/s/javascript-accordion-7hemqb)
11 besten WooCommerce Plugins für deinen E-Commerce Shop
Tags: wordpress, besten, woocommerce, wordpressplugins
Published: 2022-08-24 13:24:05

---
title: 11 besten WooCommerce Plugins für deinen E-Commerce Shop
published: true
date: 2022-08-24 11:26:38 UTC
tags: WordPress,besten,WooCommerce,WordPressPlugins
canonical_url: https://bloggerpilot.com/best-woocommerce-plugins/
---

![11 besten WooCommerce Plugins für deinen E-Commerce Shop](https://bloggerpilot.com/wp-content/uploads/2022/08/besten-woocommerce-plugins.png)

Meine Liste der 11 besten WooCommerce-Plugins! Glaubst du, dass du...

Der Original-Artikel erschien auf [11 besten WooCommerce Plugins für deinen E-Commerce Shop](https://bloggerpilot.com/best-woocommerce-plugins/).
7 most useful GitHub repositories for developers
Tags: github, webdev, api, productivity
Published: 2022-08-24 11:00:00

We often find some amazing resources in our [Code Quality Community](https://community.codacy.com/) - a forum created to openly discuss code reviews, code quality and any coding best practices.

Below is a list created by one of our users, you can check out the original post [here](https://community.codacy.com/t/useful-github-repos/871).

Here’s a list of great GitHub repositories, with lots of useful resources for anyone in the software development world.

- 
**30 seconds of code 5** - A set of repos with a collection of code snippets for all your development needs in JavaScript, CSS, React, Python, among others.

- 
**Awesome Cheatsheets 3** - Cheatsheets for popular programming languages, frameworks, and development tools. They include everything you should know in one single file.

- 
**Awesome Software and Architectural Design Patterns 4** - A curated list of software and architecture-related design patterns for different programming languages and architectures.

- 
**Public APIs 1** - A collective list of free APIs for you to use in your software and web development.

- 
**Build your own x**- Learn how to build your own virtual machine, operating system, programming language, text editor, and many more.

- 
**Coding Interview University 1** - A complete computer science study plan to become a software engineer.

- 
**Tech Interview Handbook 2** - Curated technical interview preparation for busy engineers.

Feel free to steal this list and share the repos you love and use the most 👇
How to implement a 404 redirect in react router v6
Tags: javascript, react, tutorial, webdev
Published: 2022-08-24 10:38:10

Page redirection in the new React router v6 can be tricky.

Let's say you have the following routes

```jsx
<Router>
  <Routes>
    <Route path="home" element={<Home />} />
    <Route path="profile" element={<Profile />} />
  </Routes>
</Router>
```

However, that means that if we navigate to `/home` or `/todo`, none of the routes will be rendered.

This is a classic use case example for a 404 page.

## Adding a 404 page 

```jsx
<Router>
  <Routes>
    <Route path="home" element={<Home />} />
    <Route path="profile" element={<Profile />} />
    <Route path="*" element={<Page404 />} />
  </Routes>
</Router>
```

In this example react router will fallback to the 404 page if the user attemps to enter an invalid url.

The "*" will catch all the paths that have not been caught by previous routes. 

**The 404 page should thus be the last route to be rendered.**

## Adding a page redirect 
We can improve the code further by adding a redirect for the default home directory. 

This way the user can access the home page by either navigating to **/home** or to **/** (which would redirect him to home).

```jsx
<Router>
  <Routes>
    <Route path="home" element={<Home />} />
    <Route path="profile" element={<Profile />} />
    <Route index element={<Navigate to="/home" />} />
    <Route path="*" element={<Page404 />} />
  </Routes>
</Router>
```

If you liked this tutorial consider visiting my website [Code with Vlad](https://www.codewithvlad.com/) where I provide high quality programming courses.
Path to become Java Developer
Tags: java, 100daysofcode, beginners, programming
Published: 2022-08-24 10:13:07

**

## Path to become Java Developer
**

Hello, Devs, my name is Kevin Brian, I am currently working as a ReactJS Developer, but I decided to broaden my knowledge by learning Java. So I decided that while I'm learning Java, I'll share what I learned here on my Blog, because I use a methodology called .

> you want to master something, teach and explain to others, then you're going to dominate it.

So leave here in comments any resources that can help me to master Java and I will continue to update you guys.
Game Jams
Tags: gamedev, beginners, todayisearched
Published: 2022-08-24 10:06:00

So, what IS a Game Jam?
<hr>
Game Jams are a type of programming contest for game creators. Every Game Jam MUST have a time limit to make a game. However, a theme is optional but there would mostly be one to keep judging organized. 
<br>
Just like a hackathon (such as DEV's Redis hackathon), there would be prizes to win. A game jam, however, can be done alone. In hackathons, most people do it in groups. And in Game Jams, most people do it alone.
<br>
### I've been living under a rock but I know how to make games...
<hr>
Then participate in ___THE GMTK GAME JAM___. Yes. It is THE most popular game jam in the history of game jams and started in 2017 (or I think). The Game Maker's Toolkit is created by Mark Brown and surprisingly he did this BIG game jam.
<br>
From what I searched, GMTK can be in any language and any engine. However, I tried using scratch blocks and from what I read I can't really upload it to itch.io so Oh well. However, you can convert scratch games to HTML and JS alone with some plugins which IS supported on itch so we little 5-year-olds might have a chance after all :). 
<br>
Don't worry, there are still other game jams for you to participate and you can find most of the more popular ones [here](https://itch.io/jams) if you don't really like it (but you should)
<br>
### I want to host one...
<hr>
Well, you can! There are many platforms to host them. Itch.io is the most popular. I am not sure what other else there is but yep. 
<br>
And, if you are a five-year-old just like me you can check out [my profile](https://scratch.mit.edu/Wjplatformer) or just the scratch community in general where game jams sometimes happen and you create games using kiddy blocks.
DeclarationError: Identifier not found or not unique. --> contracts/uj.sol:16:23:
Tags: solidarity, javascript, beginners, programming
Published: 2022-08-24 10:04:05

 **how can i solve this**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zruj0gfc3rebftmtj6ae.png)
WebPack 5: Using named exports from JSON modules
Tags: webpack5, javascript, json
Published: 2022-08-24 10:00:35

If you work with JavaScript, or you've ever interacted with a JavaScript project, Node.js or a frontend project, you surely met the `package.json` file.

In the **JavaScript** application under package.json file, you can see the one property called version. We can use this version while deploying to indicate the different versions of the application.

in WebPack 4 the version can be accessed in our application by simply importing this file as below:

```
import { version } from '../../package';
```

After migration to WebPack 5 The version can be accessed in our application by simply importing this file as below:

```
import packageInfo from 'package.json';

export default packageInfo.version;
```
Elevator's Pitch
Tags: startup, linkedinpost, tweetpost
Published: 2022-08-24 18:41:29

---
title: Elevator's Pitch
published: true
date: 2022-08-24 09:50:01 UTC
tags: startup,linkedinpost,tweetpost
canonical_url: https://lucas-schiavini.com/elevators-pitch/
---

 ![Elevator's Pitch](https://images.unsplash.com/photo-1624342057927-64d60f69b94d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxMTc3M3wwfDF8c2VhcmNofDZ8fGVsZXZhdG9yfGVufDB8fHx8MTY2MDg2MTkwMA&ixlib=rb-1.2.1&q=80&w=2000)

You are a young, ambitious startup founder, and you are on your way to a meeting with some big-shot Venture Capitalist. The only problem is, only you know you intend to meet. He doesn't know you and is not interested in you or your big fancy ideas.

You know it's risky to go to the office of the investment fund, but heck you are desperate.

You mainly wait in the lobby trying to look important and then you see him!

So you follow him to the elevator acting as if you are going to the same floor.

The doors close, it's just you and him. It's show time.

You start talking about your idea in a way you've practiced a thousand times already, and because you've practiced, it doesn't come off as desperate but just a curious investment opportunity.

He is impressed, you exchange cards, and you got your first VC contact. Congratulations.

Well, not exactly, I'm convinced these types of approaches must go wrong all of the time, but what you just did was amazing and I'm gonna say why.

## Elevator's Pitch

Startup lingo on making pitches for investors in Silicon Valley by the time it takes for the elevator to go up 7 floors, or 40 seconds.

And why should you do it? And why was it so awesome?

## Benefits of the Elevator Pitch

It forces you to narrow down your pitch and focus way more clearly on the main ideas you want to come across.

If you practice enough times, you start seeing the idea more clearly and start to come off as more confident.

* * *

Now, why was it amazing? By practicing a reduced version of your pitch, you just made the idea clearer inside your head, and you've started to prioritize things, cleaning off the message.

And that is useful even when you are doing longer form pitches because you stay centered on the main key points.

That is it for today and I hope you have a great day!

😁🍵💗

---

## 😗 Enjoy my writing?
Forward to a friend and let them know where they can subscribe (hint: it’s [here](https://lucas-schiavini.com/#/portal)).

Anything else? Just say hello in the comments :).

Join an Exclusive Tech Friendly Community! Connect with like-minded people who are interested in tech, design, startups, and growing online — apply [here](https://yv4sdz1j7rv.typeform.com/to/lMJ2yhuJ).
Easily record microphone on all devices
Tags: javascript, html, mediarecorder, microphone
Published: 2022-08-24 09:40:00

I have had an array of issues with mediaRecorder:
1. Audio doesnt play on all devices or browsers
2. Audio isnt in a standard format
3. Audio is blank on some devices like ios

This package saved my life! No data chunks, no converting of files or types, it does it for you:
https://github.com/closeio/mic-recorder-to-mp3

Simple code example:
```javascript
const MicRecorder = require('mic-recorder-to-mp3');

// New instance
const recorder = new MicRecorder({
  bitRate: 128
});

// Start recording. Browser will request permission to use your microphone.
recorder.start().then(() => {
  // update ui or whatever
}).catch((e) => {
  console.error(e);
});

// Once you are done singing your best song, stop and get the mp3.
recorder.stop().getMp3().then(([buffer, blob]) => {
  // do what ever you want with buffer and blob
  // Example: Create a mp3 file and play
  const file = new File(buffer, 'me-at-thevoice.mp3', {
    type: blob.type,
    lastModified: Date.now()
  });

  const player = new Audio(URL.createObjectURL(file));
  player.play();

}).catch((e) => {
  alert('We could not retrieve your message');
  console.log(e);
});
```

Beats working with mediaRecorder directly. Thanks closeio, you make us devs look like we know what we are doing.
SSL with Apache Solr
Tags: apache, solr, tutorial
Published: 2022-08-24 09:27:00

# Setting up SSL

As I am highly dependent on official documentation, I found that Apache Solr maintain an awesome documentation from which I learned a lot. Setting up SSL can be found [here](https://solr.apache.org/guide/solr/latest/deployment-guide/enabling-ssl.html). I am writing this for easier step by step setup.

Happy Searching!

# Generate certificate & key

From the official documentation, you can generate a self-signed certificate to test your setup. But for the trusted authority, generate a certificate and convert it to `.pfx` format, which is type `PKCS12`.

And before starting Solr, we need to configure zookeeper.

# Configure Zookeeper

We must configure Solr cluster properties in Zookeeper so that Solr nodes know to communicate via SSL. After creating, setting up and starting Zookeeper, we need to setup `urlScheme` cluster-wide property to `https` before any Solr nodes start up.

For *Unix*, go to `$solr_home` and run,

```bash
server/scripts/cloud-scripts/zkcli.sh -zkhost server1:2181,server2:2181,server3:2181 -cmd clusterprop -name urlScheme -val https
```

For existing collections, we can update cluster properties by using the Collections API (*CLUSTERPROP*):

```bash
http://IP:8983/solr/admin/collections?action=CLUSTERPROP&name=urlScheme&val=https
```

This command only needs to be run on one node of the cluster, the change will apply to all nodes.

# Configure Solr

At this point, I think we all have set up zookeeper properly, have certificates and key at hand and didn't start Solr. Now, let's set up system properties of Solr in `$solr_home/bin/solr.in.sh` or, `/etc/default/solr.in.sh`:

```bash
SOLR_SSL_ENABLED=true
SOLR_SSL_KEY_STORE=/etc/solr-ssl.keystore.p12    # define your store path
SOLR_SSL_KEY_STORE_PASSWORD=secret    # use your store password
SOLR_SSL_TRUST_STORE=/etc/solr-ssl.keystore.p12    # define your store path
SOLR_SSL_TRUST_STORE_PASSWORD=secret    # use your store password
SOLR_SSL_NEED_CLIENT_AUTH=false
SOLR_SSL_WANT_CLIENT_AUTH=false
SOLR_SSL_CHECK_PEER_NAME=true
```

Now, start Solr and it's working.

If you use curl, see the official documentation section on how to use curl in case of SSL.