teleren/devto huggingface dataset:
Difference between scrum master and product owner
Tags: scrum
Published: 2022-09-04 14:17:03

This article is a translation of [スクラムマスターとプロダクトオーナーの違いについて](https://bmf-tech.com/posts/%e3%82%b9%e3%82%af%e3%83%a9%e3%83%a0%e3%83%9e%e3%82%b9%e3%82%bf%e3%83%bc%e3%81%a8%e3%83%97%e3%83%ad%e3%83%80%e3%82%af%e3%83%88%e3%82%aa%e3%83%bc%e3%83%8a%e3%83%bc%e3%81%ae%e9%81%95%e3%81%84%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6).

# Overview
Discuss the difference between a Scrum Master and a Product Owner.

# What is a Scrum Master?
## Responsibility
- Responsible for the establishment and effectiveness of Scrum
  - Help the Scrum Team understand Scrum theory and processes so that Scrum can be practiced correctly
  - Enable Scrum teams to improve processes based on the Scrum framework

## Role
- Improve team performance
  - improve processes
  - remove the fault (interrupt)
- Facilitate Scrum events
- Visualize your work
- Achieve goals
- not a manager or administrator

# What is a Product Owner?
## Responsibility
- Responsible for maximizing product value
- Responsible for managing the Product Backlog

## Role
- Clarify your product vision
- Set product goals
- Establish a release plan
- Manage your budget
- Create product backlog
- Has authority over product backlog item priorities
- Check if the product backlog is complete
- Collaboration with stakeholders

# Difference between Scrum Master and Product Owner
The Scrum Master is concerned with the process (≒How), while the Product Owner is concerned with the value and vision of the product (What and Why).

In practicing Scrum, the Scrum Master is the person who understands Scrum, propagates it to the team, and improves the process, while the Product Owner makes decisions to maximize the value of the product.

# Reference
- [2020-Scrum-Guide-English](https://scrumguides.org/docs/scrumguide/v2020/2020-Scrum-Guide-English.pdf)
- [SCRUM BOOT CAMP THE BOOK](https://amzn.to/3ehxidP)
Escaping the Tutorial Hell - Share your thoughts
Tags: beginners, tutorial, productivity, discuss
Published: 2022-09-04 13:33:32

Hello everyone!

I'm writing the script for a new article (and video for my [YouTube Channel](https://www.youtube.com/channel/UC-KqnO3ez7vF-kyIQ_22rdA)) where I talk about Open Source and Web Development.

A topic I really feel connected about is the so-called **Tutorial Hell**. In short, it's that situation where you can get the result by strictly following tutorials, but as soon as you try to do something slightly different you're stuck.

I'd like to hear from you if you've ever been in a similar situation and how you escaped, or if you have suggestions for other developers just starting out, to avoid this blocker and maximizing the acquired knowledge from tutorials.


I'll include the most interesting stories and advices in the video if you want.
Thanks for sharing! :)
Responsive Petshop eCommerce Website Using HTML CSS JavaScript
Tags: css, javascript, beginners, tutorial
Published: 2022-09-04 13:26:43

{% youtube xOCeFuhDocA %}

Responsive Petshop eCommerce Website Using HTML CSS JavaScript

This video will show you how to build a responsive petshop website using html css javascript

[Github Repo](https://github.com/codewithsadee/kitter)

---

HI 👋
I'm Sadee (webdev)
In this channel I make videos about Complete Responsive website.
You can checkout my channel 👇

📺 My Channel : [codewithsadee](https://www.youtube.com/channel/UC1PZHWV6VvICTL1LgFUZq6g)
🔔 Subscribe : [subscribe now](https://www.youtube.com/channel/UC1PZHWV6VvICTL1LgFUZq6g?sub_confirmation=1)

---

🔗 Essential links
-----------------------------
[Download the starter file to practice](https://drive.google.com/file/d/11GrNL9cUjG8XpIdL9DvaafZD6Z5c2fLK/view?usp=sharing)

---

⏱️ Timestamps
-----------------------------
0:00 - Demo
5:13 - File structure
5:44 - Project initial
11:37 - Header
27:16 - Hero section
32:37 - Category section
40:43 - Offers section
44:52 - Product section
54:15 - Service section
58:07 - CTA section
1:02:04 - Brand section
1:04:55 - Footer
1:18:47 - Media queries

---

[![Become a patreon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fnjl14kdm5qf08hu5lop.png)](https://www.patreon.com/bePatron?u=62535867)
Java Input and Arithmetic
Tags: java, beginners, programming, tutorial
Published: 2022-09-04 13:21:22

This tutorial is a simple Java program that asks the user for two numbers, adds them together, and outputs the result.

1. Create a [new Java project](https://dev.to/realedwintorres/tutorial-visual-studio-code-and-java-icm) in VS Code.
1. Create a new Java file named `AddExample.java`, where you will type the code below.
1. Import the `Scanner` class. This built-in Java class lets you accept input from the user.

    ```java
    import java.util.Scanner;
    ```

1. Start the class definition. It must match the filename. The curly bracket indicates the start of the program.

    ```java
    public class AddExample {
    ```

1. Inside the class definition, declare a main method. This method is the first method that the Java interpreter calls.

    ```java
      public static void main(String[] args) {
    ```

1. Inside the main method definition, create a Scanner object named `s`. This object will accept input from the user.

    ```java
        Scanner s = new Scanner(System.in);
    ```

1. Output a line that asks the user to enter two numbers.

    ```java
        System.out.print("Please enter two numbers: ");
    ```

1. Use the Scanner object to read in two integers and store them in two integer variables `x` and `y`.

    ```java
        int x = s.nextInt();
        int y = s.nextInt();
    ```

1. Use arithmetic to add `x` and `y` and store the result in an integer variable `z`.

    ```java
        int z = x + y;
    ```

1. Output the result.

    ```java
        System.out.println("The sum is " + z);
    ```

1. Close the main method definition with the ending curly brace.

    ```java    
      }
    ```

1. Close the class definition with the ending curly brace.

    ```java
    }
    ```

1. Now run your program to see the result.

_Congratulations!_

You have written a Java program to accept two numbers from the user, add them, and output the result.

Thanks for reading. 😃

*Follow me on Twitter [`@realEdwinTorres`](https://twitter.com/realEdwinTorres) for more programming tips and help.*
How to Set Admin Approval on User Registration
Tags: wordpress, plugin, programming, webdev
Published: 2022-09-04 13:05:48

Interested in setting up [admin approval for registrations](https://user-meta.com/)? In this video, we'll show you how to do it step-by-step.

By following this guide, you'll be able to easily set up admin approval for registrations, ensuring that users have to wait for admin approval after registration. Besides, it will protect your website from unauthorized/ invalid users as admin will let them in after verification. 

https://www.youtube.com/watch?v=VrGX0FM4b-Y
Display Dummy API JSON data to a table in React JS
Tags: react, api, javascript, json
Published: 2022-09-04 13:03:14

Hello There In order to Display Dummy API data in table form using react js you have knowledge about HTML **<table>** 

_tags like tboday, tr, th, td. For get the data from API we are using Fetch API using_ 
**REST API**

After Fetching data using REST API we have to display json data in tabular form in our Web Browser 

So In the task We are going Display Data in table form using html and css

**Below are the steps mentionedn to complete the task**

**Step:-1**  Create new react app using ```
npx create-react-app apidataintableform
```
**Step:-2** HTTP Request & Response
data from the JSON placeholder site which gives us a demo API. If you want to call your own API then that is also ok. Just you need to make some changes according to your response.
The fetch() function is as shown below

`const fetchData = () => {
    fetch(URL)
      .then((res) =>
        res.json())
      .then((response) => {
        console.log(response);
        getData(response);
      })
  }`

**Step:-3** Now Store data in UI elements 

```
<tbody>
             <tr>
                    <th>User Id</th>
                    <th>Id</th>
                    <th>Title</th>
                    <th>Description</th>
                </tr>
                {data.map((item, i) => (
                    <tr key={i}>
                        <td>{item.userId}</td>
                        <td>{item.id}</td>
                        <td>{item.title}</td>
                        <td>{item.body}</td>
                    </tr>
                ))}
            </tbody>
```

**Step:-4** complete code 


```
import logo from "./logo.svg";
import "./App.css";
import "./table.css";
import { useEffect, useState } from "react";

function App() {
  const [data, getData] = useState([]);
  const URL = "https://jsonplaceholder.typicode.com/posts";

  useEffect(() => {
    fetchData();
  }, []);`

  const fetchData = () => {
    fetch(URL)
      .then((res) => res.json())

      .then((response) => {
        console.log(response);
        getData(response);
      });
  };
  `return (
    <div>
      <h1>How Display API data in Table in React JS</h1>
      <tbody>
        <tr>
          <th>User ID</th>
          <th>ID</th>
          <th>Title</th>
          <th>Descripation</th>
        </tr>
        {data.map((item, i) => (
          <tr key={i}>
            <td>{item.userId}</td>
            <td>{item.id}</td>
            <td>{item.title}</td>
            <td>{item.body}</td>
          </tr>
        ))}
      </tbody>
    </div>
  );
}

export default App;
```



code repo [Link](https://github.com/roshan100kar/json-data-in-table-form)
Project hosted url [LINK](https://helpful-semolina-0c8516.netlify.app/)
Python CRUD function
Published: 2022-09-04 12:56:03

So I am currently learning how to use Python with MongoDB + Flask. 

Been playing with the DB bunch of GET request, POST etc. 
Thanks to my previous exposure to CRUD with Node.js, I was able to get the grasp of the concept rather quickly, and noticed that Python is really more straightforward in a sense. 

Anyways, still need to learn more about linking the AJAX call with front and back. 

Beside from CRUD function, I am also trying to learn some Java, and today I learned about 8 primitive data types and String data type of Java. 

> Integer, Double, Float, Boolean, Long, Byte, Char and Short.

Feels like I am only going to use some of them, but still it was quite interesting to see the data types I was not familiar with.
System Design: Scalability
Tags: distributedsystems, architecture, tutorial
Published: 2022-09-04 12:55:52


Scalability is the measure of how well a system responds to changes by adding or removing resources to meet demands.

![scalability](https://raw.githubusercontent.com/karanpratapsingh/portfolio/master/public/static/courses/system-design/chapter-I/scalability/scalability.png)

Let's discuss different types of scaling:

## Vertical scaling

Vertical scaling (also known as scaling up) expands a system's scalability by adding more power to an existing machine. In other words, vertical scaling refers to improving an application's capability via increasing hardware capacity.

### Advantages

- Simple to implement
- Easier to manage
- Data consistent

### Disadvantages

- Risk of high downtime
- Harder to upgrade
- Can be a single point of failure

## Horizontal scaling

Horizontal scaling (also known as scaling out) expands a system's scale by adding more machines. It improves the performance of the server by adding more instances to the existing pool of servers, allowing the load to be distributed more evenly.

### Advantages

- Increased redundancy
- Better fault tolerance
- Flexible and efficient
- Easier to upgrade

### Disadvantages

- Increases complexity
- Data inconsistency
- Increased load on downstream services


---

_This article is part of my open source [System Design Course](https://github.com/karanpratapsingh/system-design) available on Github._

{% github karanpratapsingh/system-design %}
Introduction to ReactJS
Tags: react, javascript, intro, html
Published: 2022-09-04 12:48:58

## What is React?
React is a JavaScript library for building user-interfaces. It is the view layer of web applications. React was created by _Jordan Ealke_, a software engineer at Facebook and open sourced it to the world by Facebook & Instagram. Broadly speaking, to write React applications, we write React components that correspond to various interface elements.

## System Configuration
To install _create-reacte-app_, follow the below steps.
1. Install **node.js** with version 14+ from node.js office site. Check the node version installed in your machine by
```
node -v
```
2. Install create-react-app by running this command
```
npm install -g create-react-app
```
3. Once the installation is done, create a React app using
```
npx create-react-app my-app
```
Here, _my-app_ will be your application's name.


## Forder Structure Description
- **node_modules**: All the modules dependencies are created in this folder
- **public**: Contains the public static assets of the application
- **public/index.html**: First page loaded, when you run the application
- **src**: All application related files are created in this folder
- **src/index.js**: Entry point of the application
## Features of React
- React is a small library
- React covers only the rendering and event handling part.
- Presentation code in JavaScript powered by **_JSX_**
- Code size is smaller hence it is faster than Angular etc.
- Flexible
- Virtual DOM
Introduction to Jotai. Derived atoms. Data validation
Tags: javascript, react, beginners, tutorial
Published: 2022-09-04 12:47:52

*Read [first part](https://dev.to/fricze/introduction-to-jotai-from-react-hooks-to-jotai-atoms-3nmd) to know what's going on here.*

You created first atom to hold your input text value. Then you created a derived atom that holds text length. Based on this code let’s create registration form, with basic validation.

First, let’s add label to your text input, so users know to put their name in there.

```javascript
const nameAtom = atom("hello");

const Input = () => {
  const [text, setText] = useAtom(nameAtom);
  return (
    <div>
      <label>Name: </label>
      <input value={text} onChange={(e) => setText(e.target.value)} />
    </div>
  );
};

```


Then take `Input` component and put it in `Form` component. `Form` component has a title and one input. Later we’ll add `Error` component there to show validation results.

```javascript
const Form = () => {
  return (
    <form>
      <h1>Registration form</h1>
      <Input />
    </form>
  );
};
```

Now create new, derived atom. Based on `nameLengthAtom` you check that name has at least 3 chars. If length is bigger, or equal, to 3, name is valid. Otherwise, it’s not.

```javascript
const isNameValid = atom((get) => get(nameLengthAtom) >= 3);
```

Use this new atom in `Error` component to show user whether name he typed in is valid. If name is valid don’t show anything. If name is invalid inform user that name has to be longer.

```javascript
const Error = () => {
  const isValid = useAtomValue(isNameValid);
  return isValid ? 
	  null : 
	  <div style={{ color: "red" }}>Name is too short</div>;
};
```

In this component you only read value from `isNameValid` atom, so you can use `useAtomValue` function, instead of `useAtom`. This is a more specialised version of `useAtom`. It gives access to value of atom, without exposing the ability to change atoms’ value. Using specialised API makes your code easier to understand, and more maintainable. `const isValid = useAtomValue(isNameValid);` is equal to `const [isValid] = useAtom(isNameValid);`

Now you’re ready to add `Error` component to `Form` component. This `Form` component can be used in your application.

```javascript
const Form = () => {
  return (
    <form>
      <h1>Registration form</h1>
      <Input />
      <Error />
    </form>
  );
};

const App = () => (
  <Provider>
    <Container>
      <Form />
    </Container>
  </Provider>
);
```

Check out this [code live](https://codesandbox.io/s/cool-leaf-5c59bk?file=/src/App.tsx).

Check out [Jotai website](https://jotai.org/) for docs and more examples of Jotai code.
lume land code highlight setting
Tags: javascript, webdev, deno
Published: 2022-09-04 12:38:22

[lume.land](https://lume.land) is my most favorite static site generator, but I was not able to figure out how to use code_highlight plugin.

Since there was no document, I will write it here.

`_config.js`:

```javascript
import lume from "lume/mod.ts";
import code_highlight from "lume/plugins/code_highlight.ts";

// import your favorite language
import lang_javascript from "https://unpkg.com/@highlightjs/cdn-assets@11.6.0/es/languages/javascript.min.js";
import lang_bash from "https://unpkg.com/@highlightjs/cdn-assets@11.6.0/es/languages/bash.min.js";

const site = lume();

// download your favorite theme
site.remoteFile(
  "_includes/css/code.css",
  "https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.6.0/build/styles/github.min.css"
);
site.use(
  code_highlight({
    languages: {
      javascript: lang_javascript,
      bash: lang_bash,
    },
  })
);

export default site;
```

Because you got `_includes/css/code.css`, you need to load this file in `style.css` (which is loaded in a HTML file):

```css
@import "css/code.css";
```
How Can You Create A Backend In Few Minutes Using PocketBase
Tags: devops, pocketbase, beginners, tutorial
Published: 2022-09-04 12:29:02

This post will teach you how to create a powerful backend for your SaaS app using [Pocketbase](https://pocketbase.io/) in just a few minutes. Yet, this backend is powerful and can scale up as your business grows. 

## Introduction To Pocketbase
Pocketbase](https://pocketbase.io/) is an Open Source backend for your  SaaS and Mobile app which is available in a single file. As of today, it has around 9.5k+ stars on GitHub. It includes some of the essential services such as
- Realtime Database
- Authentication
- File Storage

## Getting Started
In order to get started, I assume you already have a Linux server running Ubuntu or Debian. [Vultr](https://www.vultr.com/?ref=9086643-8H) is an excellent hosting choice if you're looking for one & If you sign up using the above link, you'll receive $100 in free credits

1. SSH onto your server and run the following commands to install the required utilities and to make sure that you have the latest piece of software 
```bash
sudo apt install unzip nginx -y
sudo apt update 
sudo apt upgrade -y
```
2. Making our app directory and downloading pocket base from GitHub 
```bash
mkdir app
cd app
wget  https://github.com/pocketbase/pocketbase/releases/download/v0.6.0/pocketbase_0.6.0_linux_amd64.zip
unzip pocketbase_0.6.0_linux_amd64.zip
```
3. To make sure that our apps never go down, we create a systemd file which should be located at `/lib/systemd/system/pocketbase.service` We can open up the file by running `nano /lib/systemd/system/pocketbase.service`
```
[Unit]
Description = pocketbase

[Service]
Type           = simple
User           = YOUR_USER
Group          = YOUR_GROUP
LimitNOFILE    = 4096
Restart        = always
RestartSec     = 5s
StandardOutput = append:/your/path/to/logs/errors.log
StandardError  = append:/your/path/to/logs/errors.log
ExecStart      = /your/path/to/pocketbase serve --http="yourdomain.com:80" --https="yourdomain.com:443"

[Install]
WantedBy = multi-user.target
```

3. To start and run the application run these commands
```bash
systemctl enable pocketbase.service
systemctl start pocketbase
```
Note: the service name should match the name given in the configuration    

## Conclusion
- The only thing I felt odd about using this is the fact that it can only be used with SQLite database and can't be connected to any other database ( If there is an update on this kindly let me know in the comment section below)
Netlify 404 Page Not Found error solved
Published: 2022-09-04 12:18:58

While in the course of working on building an app using netlify, I encountered below error message: 
Page Not Found. 

> issue
: This was due to not referencing the exact build folder in netlify. 

> solution
: after running ng build, the app generated a dist folder and in that dist folder, you will find the name of your app. 

So, on netlify (https://app.netlify.com/sites/app-name-goes-here/settings/deploys) 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ft3xxc0xz5r7hc5tcm31.PNG)
Click on edit settings and add the app name to the dist folder just like the above attachement and your build should work just 
fine. 

step-by-step-video: {% embed https://www.youtube.com/watch?v=0Tv23NPt1MM&t=55s %}
What is the difference between absolute and relative URLs?
Tags: absoluteurl, relativeurl, url, html
Published: 2022-09-04 12:07:56

## What is a URL?
URL is the mechanism to fetch resources over the internet. The browsers use this to fetch the data to the user.

URL is the abbreviation of a uniform resource locator. It is commonly known as a web address or internet address of any resource on the web. The resource may be the HTML document, image, audio, video, pdf file, CSS document, etc. In some cases, it may be the possibility the URL is being pointed to a resource that does not exist.

## What are the types of URLs?
As I have explained above, any URL is the link of a webpage or files like an image, pdf, audio, or video.

These links have two types

- [Relative URL](https://gitdemy.com/what-is-difference-between-absolute-and-relative-urls-127)
- [Absolute URL](https://gitdemy.com/what-is-difference-between-absolute-and-relative-urls-127)

## What are relative URLs?
Relative URLs are only paths without a domain name. Relative defines “in relation to” which means the path is related to the current webpage domain name. We can say that relative paths are the reference of the file that is located on the same web address/domain.

Look at the different relative URLs.
`<img src="gitdemy-logo.png">
<img src="./gitdemy-logo.png">`
The above relative links mean the browser will search the file from the current directory.

## What are absolute URLs?
Absolute URL contains both domain name and path. It is the complete information of a file or webpage. These URLs start with any protocol https:// or https://.

The syntax of absolute URL
protocal:://domain-name/path
Absolute URLs are written in the address bar of web browsers. It is the full link of any resources that existed on the webserver.

**Examples**

`https://gitdemy.com
https://gitdemy.com/aritcles
https://gitdemy.com/articles/html
https://gitdemy.com/what-are-hyperlinks-in-html-126`

If you want to read full article, click the following
[Relative vs Absolute URL](https://gitdemy.com/what-is-difference-between-absolute-and-relative-urls-127)