teleren/devto huggingface dataset:
Fix mistaken commits in Git 🔁!
Tags: git, cli, developer, commits
Published: 2021-09-02 15:11:55

It is common issue that every developer makes code mistakes at any point of time in his career. One such mistake happens with git also.

Let assume that you've committed some code and later realised that 
it is a false commit. Now you want to undo that bad commit. so, how do you do it ?

There are 2 possible ways to undo it: [git reset](#git-reset) and [git revert](#git-revert).

## git reset

`git reset` will move both HEAD ref pointer and current branch ref pointer to specified commit.

You should be careful when resetting as this will change the commit history.

It has 3 main options:
1. _--mixed_: The Staging Index is reset to the state of the specified commit. Any changes that have been undone from the Staging Index are moved to the Working Directory. This is the default option.
2. _--hard_: It will remove all unstaged changes. Most dangerous option.
3. _--soft_: The uncommitted changes or the commits in-front of selected commit will not be removed. It is the most safest option.

**command** » `git reset [ --soft | --mixed | --hard ] <commit-hash>`

## git revert

Unlike `git reset`, `git revert` does not move the ref pointers to that snapshot. This command will uncommit the targeted commit, and that commit can be anywhere in-between the git timeline. A revert command takes user specified commit, inverse the changes of that commit, and finally create a new commit. This newly created commit will be appended at top of the commit timeline.

**command** » `git revert <commit-hash>`

### When to use `reset` & `revert` ?

revert doesn't modify commit history, unlike reset. With revert you can target any particular commit in history, whereas reset only works backword from last commit.

In conclusion, use revert if the changes also exist in remote repository and use reset if the changes exist locally.

-----

Follow me on Twitter: [twitter.com/mastrero_](https://twitter.com/mastrero_)
Github: [github.com/mastrero](https://github.com/mastrero)
LinkedIn: [linkedin.com/in/arunkumar-nadikattu](https://www.linkedin.com/in/arunkumar-nadikattu/)

PS: This is my first post in [dev.to](https://dev.to/)
KAOSS! Fun with Web Audio
Tags: javascript, css, webdev, html
Published: 2021-09-02 15:06:47

I used to carry my “Korg Kaossilator” around with me. For those of you who don't know what that is – it's a small, portable synthesizer, with a large, touch-based XY-controller:

![kaossilator](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n79fwjbcr354szqdh4hk.jpg)
 
This week, I've been working on a generic XY-controller – for both pointer-devices and keyboards:

![xypad](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l1duj4gtc3eyobgbgq13.png)

It was meant to be for a “Color Picker”, but I ended up making **this** instead:

{% codepen https://codepen.io/stoumann/pen/BaZzyWO %}

I'm working on a larger article about XY-controllers, where I **will** showcase the “Color Picker” – but for now, please have fun with the simplified, JavaScript-version of “Kaossilator”!

The XY-controller is still *work-in-progress*, so I haven't added scroll-position-fixes to the script yet. Please [open it in fullscreen-mode on Codepen](https://codepen.io/stoumann/full/BaZzyWO), to avoid scrolling within the iframe.

---

## Keyboard-user?

The XY-Controller can also be operated with a keyboard.

When the point-ring has focus, press `Space` to toggle the sound on or off, and use the `Arrow`-keys to move around. 

Press and hold `Shift` while using the `Arrow`-keys, to move the point-ring with a larger increment.

---

Pick the Sine-wave (first) and “allpass”, if you want to play the theme from “Doctor Who” 😁

Happy jamming!
Create a Netflix clone from Scratch: JavaScript PHP + MySQL Day 38
Tags: php, javascript, webdev, tutorial
Published: 2021-09-02 15:05:13

Netflix provides streaming movies and TV shows to over 75 million subscribers across
the globe. Customers can watch as many shows/ movies as they want as long as they are
connected to the internet for a monthly subscription fee of about ten dollars. Netflix produces
original content and also pays for the rights to stream feature films and shows.

In this video,we will be creating the entity Page

{% youtube qdSJvGF7pag %}


If you like my work, please consider
[![Buy me a coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jm11knj7d8zwcvo150q2.png)](https://www.buymeacoffee.com/cglikpo)
so that I can bring more projects, more articles for you

If you want to learn more about Web Development, feel free to [follow me on Youtube!](https://www.youtube.com/c/ChristopherGlikpo)
What is a Database(DB)?
Tags: mysql, database, sql, programming
Published: 2021-09-02 14:53:23

`This is the article if you want to understand in simple terms about Databases.`

**Database** *is a Collection of related information*, For Example:
* Todo List
* Shopping list
* Phone Book
* Name of your 10 friends
* Twitter User Base

Database can be stored in different ways, For Ex. :-
* On a book
* In a Computer
* In your mind

In computing term, a database is an organized collection of **data** stored and accessed from a computer system.

## What is Data?
*In simple words, data can be facts related to any object in consideration. For example, your name, age, height, weight, etc. are some data related to you. A picture, image, file, pdf, etc. can also be considered data.*

## What is a Database Management System (DBMS)?
It is a special software program that helps users create and maintain a database.
* Makes it easy to Handle Security
* Interacts with software applications
* Backups
* manage large amount of Information
* Import/export Data

*Here is a Diagram showing how a website interact with Database Management System (DBMS) :*
![Twitter Database Diagram](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wq0k6q12r15fr9dbh5kz.jpg)

There are two types of Databases :

**Relational Database (SQL)**: Organize Data into one or more tables
* Each table has rows and columns.
* A unique key identifies each row.

**Non-Relation Database (noSQL/ not just SQL)**: Organize Data can be anything but a traditional table
* A key value is stored
* Documents (Pdf,xml etc)
* Graphs and flexible trees

## What are Database Queries?
Queries are request made to DBMS for a specific information. For example, A google search is a query.

> Follow me because in my next Article I will explain Tables & Keys in DBMS.
Operadores Relacionais: Exemplos (Parte 2)
Tags: javascript, algorithms
Published: 2021-09-02 14:35:06

Vou criar duas variáveis com valores definidos:

```javascript
const A = 5;
```

```javascript
const B = 3;
```

Vou criar algumas relações entre eles:

```javascript
A === B; // false
```

A não é igual a B, portanto o resultado é `false`.

```javascript
A !== B; // true
```

A não é igual a B, portanto o resultado é `true`.

```javascript
A > B; // true
```

A é maior do que B, portanto o resultado é `true`.

```javascript
A < B; // false
```

A não é menor do que B, portanto o resultado é `false`.

```javascript
A >= B; // true
```

A não é igual a B, porém é maior do que B, portanto o resultado é `true`.

```javascript
A <= B; // false
```

A não é igual nem menor do que B, portanto o resultado é `false`.

E aí? Gostaram? Até a próxima anotação! 😊
#100daysofcode [Day - 08]
Tags: javascript, github, webdev
Published: 2021-09-02 14:30:26

Hey guys! today is the eighth day of my 100 days coding challenge and today i tryed to make site using api .
here is the live site : https://lnkd.in/gVZF34cv
and code link is : https://lnkd.in/guFKMxSr
Generate RSA Keypair Using OpenSSL
Tags: rsa, openssl, keypairs, cryptography
Published: 2021-09-02 14:23:42

OpenSSL is a robust, commercial-grade, and full-featured toolkit for the Transport Layer Security (TLS) and Secure Sockets Layer (SSL) protocols. It is also a general-purpose cryptography library. OpenSSL is licensed under an Apache-style license, which basically means that you are free to get and use it for commercial and non-commercial purposes subject to some simple license conditions. OpenSSL can generate several kinds of public/private keypairs. **RSA** is the most common kind of keypair generation.
![Security Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oymnlh9ofjpycqxp91t3.png)
## Generate an RSA keypair with a 2048 bit private key

Execute command: `openssl genpkey -algorithm RSA -out private_key.pem -pkeyopt rsa_keygen_bits:2048` (previously `openssl genrsa -out private_key.pem 2048`)

```bash
openssl genpkey -algorithm RSA -out private_key.pem -pkeyopt rsa_keygen_bits:2048
```

> Make sure to prevent other users from reading your key by executing `chmod go-r private_key.pem` afterward.

## Extracting the public key from an RSA keypair

Execute command: `openssl rsa -pubout -in private_key.pem -out public_key.pem`

```bash
openssl rsa -pubout -in private_key.pem -out public_key.pem
```

A new file is created, `public_key.pem`, with the public key.

##  OpenSSL Commands to Convert SSL Certificates on Your Machine

It is highly recommended that you convert to and from `.pfx` files on your own machine using OpenSSL so you can keep the private key there. Use the following OpenSSL commands to convert SSL certificate to different formats on your own machine:

### OpenSSL Convert PEM

**Convert PEM to DER**

```bash
openssl x509 -outform der -in certificate.pem -out certificate.der
```

**Convert PEM to P7B**

```bash
openssl crl2pkcs7 -nocrl -certfile certificate.cer -out certificate.p7b -certfile CACert.cer
```

**Convert PEM to PFX**

```bash
openssl pkcs12 -export -out certificate.pfx -inkey privateKey.key -in certificate.crt -certfile CACert.crt
```

### OpenSSL Convert DER

**Convert DER to PEM**

```bash
openssl x509 -inform der -in certificate.cer -out certificate.pem
```

### OpenSSL Convert P7B

**Convert P7B to PEM**

```bash
openssl pkcs7 -print_certs -in certificate.p7b -out certificate.cer
```

**Convert P7B to PFX**

```bash
openssl pkcs7 -print_certs -in certificate.p7b -out certificate.cer
openssl pkcs12 -export -in certificate.cer -inkey privateKey.key -out certificate.pfx -certfile CACert.cer
```

### OpenSSL Convert PFX

**Convert PFX to PEM**

```bash
openssl pkcs12 -in certificate.pfx -out certificate.cer -nodes
```
Localization for Apostrophe 3
Tags: github, opensource, showdev, webdev
Published: 2021-09-02 14:09:30

This week we published the release of [Apostrophe 3.3] (https://apostrophecms.com/blog/localization-for-apostrophe-3), which now includes support for fully localized websites. This is the result of weeks of design and development and was influenced heavily by feedback from the community along with some major support and collaboration with our partners at [Michelin] (https://apostrophecms.com/case-studies/michelin-case-study). It's a big release, and the best place to dive in is right in [our new docs for these features] (https://v3.docs.apostrophecms.org/guide/localization). We hope you take a moment to check those out, but for right now here are some notable highlights:

* You can now configure your site so all of your content is editable across multiple locales.
* You can also now localize static templates in your Apostrophe projects, as well as all of Apostrophe's core UI components.
* Everything works without needing to install a new module, simply upgrade to Apostrophe 3.3 and configure the locales for your project.

For a quick example of the content localization features check out this video below.
{% vimeo 595368632 %}

In the days ahead, we will be updating our public demo to show off some specific multi-locale configurations. For now, the best way to try out these tools yourself is to update your project to 3.3 and follow [the documentation] (https://v3.docs.apostrophecms.org/guide/localization) to set up some locales.

This is a huge step forward for A3 and we think it is a big improvement over the experience of localizing content in A2. We are really excited to get this out there, and looking forward to feedback from the community. Please don't hesitate to [open any new issues on GitHub] (https://github.com/apostrophecms/apostrophe/issues) with any specific questions, suggestions, or bug reports. Also, please do reach out to us if you'd like to contribute some translations of the Apostrophe UI.
Revolutions in workplace
Tags: worksplace
Published: 2021-09-02 14:08:49

We have seen three generations of workers in the past few decades. Understanding these will prevent mismatches between the expectations of an employee and employer.

Lets have a look:

<b>Industrial Era:</b>

The first era in which we lived. The focus of the workers was to survive, as their requirement was to solve for the basic necessities. They continued to work at the same place even if their boss was abusive.

In those days, employers expected punctuality and respect from their staff, regardless of whether the same was expected from them.

In the era of industrialization, our grandparents experienced this kind of workplace.

<b>Information Era:</b> 

This is the second era we observed closely. The focus was on improving the standard of living. Survival no longer played a crucial role, instead the focus shifted to meeting advanced needs, such as paying for a car, a home, and sending children to college. When employers didn't offer enough to maintain a standard of living or if they were abusive, employees switched jobs.

In return employers expected good work and the respect flew both ways.

This was the era in which our parents worked.

<b>Digital Era:</b>

This is the era in which we live and work now. The concept began after the 2008 recession and has evolved over time. 

Survival and standard of living are no more the focus points. This generation requires quality of life. 

Information today is free, so anyone can go online for free and learn anything they want. 

Not only do employees expect employers to be respectful, but they also expect them to be friendly. They need a good culture at the workplace.
In return, employers not only expect the work to be done, they expect innovation as well. 

<hr>

To my understanding loyalty was never in the picture. The reason employees switch jobs has changed over time. In today's world, employees and employers both have demands and if they are not met, there is nothing stopping them from switching or terminating.
handleChange VS changeHandler
Tags: react, webdev, programming, javascript
Published: 2021-09-02 14:04:23

**Hello Developers 🤩🤩🤩**

We have a lot of ways to name a function.
But in react, I have seen two major ways of naming functions.
handleChange and changeHandler

I like to name my functions as **changeHandler**, because when I have many functions defined and I want to autocomplete as I type the function name, then **handle** will autocomplete to all the functions that start with **handle** but when I name them as **changeHandler**, **loginHandler**, **updateHandler** and so on then it is easy to autocomplete the function.

After all little time saving can add up to a big thing.

Curious to know your take on this.
Have you ever think like this or its just me.

Closing here 👋👋👋
> This is **Shareef**.
> My recent project [yourounotes](https://yourounotes.vercel.app/)
> My [Portfolio](https://portfolio.shareef.vercel.app/)
> Twitter [ShareefBhai99](https://twitter.com/shareefBhai99)
> [Linkedin](https://www.linkedin.com/in/nadeem-shareef-7a8394182/)
> My [other Blogs](https://dev.to/shareef)
.NET Foundation
Tags: dotnet, csharp
Published: 2021-09-02 14:00:52

*I'm running for the board of the .NET foundation @dotnetfdn.*

[Read about why I think it's important](https://dotnetfoundation.org/about/election/campaign-2021/david-whitney). No time for video content? [There's a transcription here.](https://gist.github.com/davidwhitney/cdc5b6c7123712d34d48b43f39ed5d6c)

**Let's make sure .NET is always in the room** when we're talking about cool and interesting new technology.

Much love for any support. 🖤🖤🖤
The ephemeral miniconf - Tentative planning
Tags: perl, raku
Published: 2021-09-02 13:58:12

# Planning
This is the (tentative) planning of [the ephemeral miniconf](https://thibaultduponchelle.github.io/the-ephemeral-miniconf/), it can change a bit since we are still more than 2 months before the event :grinning:

![The ephemeral miniconf planning](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a1u69gieuwidd609fzsz.png)

(The timezone is Paris, will be UTC+1 at this date)

You can check what time it [will be for you](https://everytimezone.com/s/ec3d1b5c) or look at this:

![Every Time Zone - The ephemeral miniconf](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gxyjrsfgu8p4799nem2v.png)

I hope you like it, I personally love it! :heart:

![Patrick in love](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eq8z0nov3tc29lidwwen.gif)

## Lightning talks
There is still a place for you, I'm looking for lightning talks speakers:

![Lightning talks](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/orc36gfscxu6b0ek2t2d.png)

Come one! Become a speaker!

## Attendees
More infos on the miniconf organization will come soon :smiley: :+1:
Install PWAs in Vivaldi
Tags: pwa, tutorial, vivaldi
Published: 2021-09-02 13:36:29

PWAs are coming to desktop! If you use [Vivaldi](https://vivaldi.com) (like me), then you too can join the PWA gang.

_Update: PWAs are now [fully supported](https://vivaldi.com/blog/vivaldi-gets-more-private-delivers-an-all-new-capture-pwa-support/) and no longer "experimental"; you can skip this first step and go right to the installation._

As of today, you'll need to enable the experimental feature allowing installation by visiting [vivaldi://experiments/](vivaldi://experiments/) and checking the box:

![Box labeled "Menu entries for installing Progressive Web Apps." should be checked](https://cdn.hashnode.com/res/hashnode/image/upload/v1630589211154/p2tEk1MWp.png)

Once that's done, visit the PWA you'd like to install, like [Google meet](https://meet.google.com). Right click the tab and in the context menu there should now be an option like "Install Google Meet...". Click it and congratulations! Welcome to the future built of Progressive Web Apps.

![Screenshot of context menu revealed from right clicking a PWA capable tab in Vivaldi](https://cdn.hashnode.com/res/hashnode/image/upload/v1630589379077/kfEl9tMgk.png)
Building Your Product Backlog
Tags: softwaredevelopment, teamwork
Published: 2021-09-02 13:07:56

---
title: Building Your Product Backlog
published: true
date: 2021-09-02 13:04:49 UTC
tags: softwaredevelopment,teamwork
canonical_url: https://medium.com/chingu/building-your-product-backlog-a5faefb240b
---

#### Sprint 1 — Thursday

![](https://cdn-images-1.medium.com/max/624/1*iGldb2KzNhhNS6Y5W0o5Ag.jpeg)

Sprint 1 is the busiest and most confusing time in your Voyage. There’s a lot to learn and get done. So much so that it can feel like you are “drinking from a firehose”!

A _Project Backlog_ transforms your ideas into a tangible set of features and actions that helps change confusion into clarity.

This backlog is the set of steps the team follows to complete your _minimum viable product_ (MVP). It’s _continually_ _evolving_ because Agile methodology, unlike waterfall methodologies, divides the project into iterable Sprints that are focused on refining, designing, developing, testing, and deploying small units of functionality.

![](https://cdn-images-1.medium.com/max/720/1*SCWMA9XqeJt0Ii_PmK-seQ.png)

Each unit of functionality is built on the functionality deployed in the prior Sprint. Agile lets the team focus on “doing the right thing at the right time”. _Refactoring_ is a byproduct of this since you’ll be continuously adding and improving.

> Reaching your goal depends on treating the backlog as an “evergreen” document you refine as new problems and features are discovered.

### Before you Go!

Chingu helps you to get out of “Tutorial Purgatory” by transforming what you’ve learned into experience. The experience to boost your Developer career and help you get jobs.

You can learn more about **Chingu** & how to join us at [https://chingu.io](https://chingu.io/)

* * *
Adding Google Adsense to Hexo Blog
Tags: blog, hexo, google, webdev
Published: 2021-09-02 13:05:58

**[Hexo](https://hexo.io/)** is a static site generator you can make blog easily.

Suppose you use the **[`landscape`](https://github.com/hexojs/hexo-theme-landscape)** theme.  

### 1. Install Hexo and Create new project

First of all, install the Hexo CLI package.

```bash
npm install -g hexo-cli
```

And create the new project.

```bash
hexo init my-blog
cd my-blog
npm install
```

Please check the [official documentation](https://hexo.io/docs/) for details.

### 2. Add the landscape theme

If you created a new Hexo project, clone the git repository of the [this repository](https://github.com/hexojs/hexo-theme-landscape) in the project root directory.  

```bash
git clone --depth 1 https://github.com/hexojs/hexo-theme-landscape themes/landscape
```

Then you can see that `landscape` directory has been added to the `theme` directory.  

After that, change `theme` in `_config.yml` to **`landscape`**. The config file in the root directory, not the landscape directory.

```yaml
# _config.yml

# ...
theme: landscape
# ...
```

This completes the basic settings.  


### 3. Add the tag of Google Adsense into the landscape theme

Go to the [Google Adsense page](https://www.google.com/adsense/) and register your domain.  

Then you can get the tag like this:

```html
<!-- Google Adsense -->
<script data-ad-client="ca-pub-48....." async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
```

Next, create a new file named `google-analytics.ejs` in `layout/_partial` directory of the `landscape`.

```html
<!-- source/themes/landscape/layout/_partial/google-analytics.ejs -->

<!-- Google Adsense -->
<script data-ad-client="ca-pub-48....." async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
```

Once added, insert this to `layout.ejs`.

```html
<!-- source/themes/landscape/layout/layout.ejs -->

<!DOCTYPE html>
<html>
<%- partial('_partial/head') %>
<body>
  <div id="container">
    <div id="wrap">
      <!-- ... -->
      <%- partial('_partial/google-adsense') %>
      <!-- ... -->
    </div>
    <!-- ... -->
  </div>
</body>
</html>
```

The insert position is arbitrary, but in my case I did it to this position.  

### 4. Check

Start Hexo server to check if it is reflected:

```bash
hexo server
```

Open `http://localhost:4000` in your favorite browser and open **Developer Tools**.

![screenshot](https://blog.hdks.org/images/Adding-Google-Adsense-to-Hexo-Blog/screenshot_1.png)  

you can see that there is `<script>` tags such like this:

```html
<script type="text/javascript" src="https://adservice.google.com/adsid/integrator.js?domain=localhost"></script>
```

This is a dedicated tag for **Google Adsense**.  

After that, let's wait for the Google Adsense exam to pass. Actually, at the time of writing this article, I am waiting for the result, but I have failed several times.
User Role Registration
Published: 2021-09-02 13:03:22

I am creating a fan and celebrity app with Flutter. Once users click any of the button, it takes them to the registration screen. But I want it to save the button selected(fan or celebrity) and send it to the registration endpoint 

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