teleren/devto huggingface dataset:
Disabling browser back navigation in Angular
Tags: angular
Published: 2021-12-31 10:14:23

To prevent browse back navigation we make use of `History.pushState()`web api. As soon as the user lands on the component where we want to disable back navigation, we set `history.pushState(null, '')`.

As per [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/History/pushState), `pushState()` has three parameters:
   1. The first parameter passed to `pushState()` is `state` which is an JavaScript object that holds the history details. To prevent using going back to previous state, we set this to `null`.
   2. The second parameter i.e. `title` does not play much role in this functionality and can be set to empty string.
   3. Final parameter is `url` which is optional that allows you to define the new history entry’s URL. It defaults to current document URL if not provided. This is what exactly we want - as soon as user lands on this component, they should kind of stick to current document URL and should not be able to navigate away!

When user navigates to a new state / page, a `popstate` event is fired. Here we take help of RxJs `fromEvent` and listen to `popstate` events whenever user tries to hit browser's back button & we can disable that action accordingly.

> Note: please remember to unsubscribe from the observable once you're done else that will lead to memory leak

Here is code example:

```js
import { fromEvent, Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

private unsubscriber : Subject<void> = new Subject<void>();

ngOnInit(): void {
  history.pushState(null, '');

  fromEvent(window, 'popstate').pipe(
    takeUntil(this.unsubscriber)
  ).subscribe((_) => {
    history.pushState(null, '');
    this.showErrorModal(`You can't make changes or go back at this time.`);
  });
}

ngOnDestroy(): void {
  this.unsubscriber.next();
  this.unsubscriber.complete();
}
```

[Stackbliz Example](https://stackblitz.com/edit/angular-ivy-zxu8hh?file=src/app/app.component.ts)
CRUD Operation
Published: 2021-12-31 10:12:55

CRUD is an acronym that stands for Create, Read, Update, and Delete. These are the four most basic operations that can be performed with most traditional database systems and they are the backbone for interacting with any database. CRUD is a set of operations we get servers to execute. (POST, GET, PUT and DELETE requests respectively).
Let’s check what each operation does:
Create (POST) — Make something
Read (GET)- Get something
Update (PUT) — Change something
Delete (DELETE)- Remove something

C — Create :
When we want to add a new document to our collection, then we use it to create or insert an operation. Here insert operation use for, if the collection doesn’t exist, that will create the collection.
MongoDB provides two methods for creating documents into a collection.
db.collection.insertOne()
db.collection.insertMany()
Here see the image:

R — Read
Read operation to read documents from a collection. If we query in the collection for a specific document. MongoDB provides the document with some logical operations.
MongoDB provides this method for finding or reading documents from the collection.
db.collection.find()

U — Update or PUT
For updating existing documents in a collection, er use the PUT method. But for updating documents, it’s called Update operation.
MongoDB provides the following methods to update documents of a collection:
db.collection.updateOne()
db.collection.updateMany()
db.collection.replaceOne()

D — Delete
We can understand what is the purpose of the Delete operation. Yes, the delete operation removes the document from our collection. There is some method for deleting any document.
db.collection.deleteOne()
db.collection.deleteMany()

Express.js
Express.js, or simply Express, is a back-end web application framework of Node.js. It is published as free and open-source software under the MIT license. Express is designed to create web applications and APIs for development. This is called the de facto standard server framework for Node.js development.
See the code example, By this process, we use Express in the node.js for the backend server.
How to display app version from package.json file in Angular
Tags: angular
Published: 2021-12-31 10:12:20

I had this requirement to display or keep track of application version that we are currently using in our environments. Typically any mid to large scale organization have multiple dedicated environments where we deploy our application. There is chance that different version could have been deployed in one environment then other. Arguably, this isn't any problem, but only way to know which version is deployed to what environment is to check it on the console / dashboard of the deployment tool (like uDeploy or similar...) that we are using!

We thought it would be easy if we have that handy within application itself instead of every time checking that on dashboard of tool. To achieve this, we thought of reading the version number from `package.json` file and storing that as global variable.

**package.json file:** File that has version number that we are interested in
```json
{
   "name": "my-awesome-app",
   "version": "4.1.0-RC3"
}
```

**app.component.ts** Reads value from package file and store this is global variable
```js
declare const require: (path: string) => any;

@Component({...})
export class AppComponent implements OnInit {
  ngOnInit(): void {
    const APP_VERSION = require('../../package.json').version;
    if (APP_VERSION) {
      (window as any).APP_VERSION = APP_VERSION;
    }
  }
}
```

Access this in browser console:
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1637568822757/ZcJxT9HJa.png)
YODH BLOG APP
Tags: atlashackathon
Published: 2021-12-31 10:10:28


### Overview of My Submission

Github Link : (https://github.com/Sumeeth-24/Blog/tree/master#readme)

Apache License : (https://github.com/Sumeeth-24/Blog/blob/master/LICENSE)

 **About the Project**

It is a Full Stack MERN Application where user can register and write articles, like the article, comment on other's article, bookmark your favorite article, update, delete, chat with friends and much more. You can search a particular article using title in search bar and and also using tags.

 **Built with**

- React.js
- Node.js
- Express.js
- Mongodb
- Tailwind.css
- Material-UI
- CK-Editor 5
- Chat-Engine
- Firebase

  **Features**
- Authentication and Authorization (using JSON web token, Formik and Yup for Validation)
- Client Side Routing
- Paginations
- Searching
- Comment and liking functionality
- Chatroom (to make friends and talk with your friends)
- Google OAuth



 **Submission Category **

 Choose Your Own Adventure(Mongodb Atlas)


### Link to Code

(https://github.com/Sumeeth-24/Blog/tree/master)


### Additional Resources / Info

DEMO OF PROJECT

(https://dev-to-uploads.s3.amazonaws.com/uploads/articles/axikfc0yh8cdbtbasbyd.png)

(https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kx4feqttki5rzcvf9nsj.pn)


(https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ms9gwuo2bi41e9l6mz3.png)

LIVE LINK

(https://yodh.netlify.app/posts)
Introducing the first step in  Android Development
Tags: android, beginners, programming, kotlin
Published: 2021-12-31 09:54:28

Along with web development, android development is also streaming fast. Android Development is provoking many aspirants to shake up with their skills. Everyone is making wonderful use of this technology to bring up their companies, work, and innovations. When we want to start a new journey we came up with many questions, so here we are going to put a first baby step in android development. Starting with the word “Android”, it is an operating system and it is intensified for mobile phones. So in simple words, we are going to learn how to build an application for mobile phones(any android device). 
                          "Android Studio" is a platform to develop an application and it consists of all the libraries or packages required in executing apps called APK(Android Package Kit). So you need to download this for coding. There are many languages used in android development like Java, Kotlin,c#, python, etc. and famous frameworks are used for implementing an application that includes languages like React, Native, Flutter, etc. Google mostly supports Java or Kotlin to start the learning in android studio code but many companies are opting for applications using Kotlin and it’s moreover giving an impact on big tech companies. Similarly, If you opt for java then it will be an asset.
            For any language, you choose you must be thoroughly cleaned with the concept of OOPS and DSA so that it gets easy to understand and implement the concept while developing.
How to use Oruga with Nuxt 3
Tags: oruga, nuxt3, nuxt
Published: 2021-12-31 09:50:22

This is for those who would like to use `oruga-next` with `nuxt 3`.

Step 1: Install `oruga-next` in your `nuxt 3` project:
```
npm i @oruga-ui/oruga-next --save
```

Step 2: Create `plugins/oruga.js` files with following code:
```js
import { defineNuxtPlugin } from '#app';
import Oruga from '@oruga-ui/oruga-next';

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.use(Oruga)
})
```

Step 3: Remove `app.vue` from the root  and create a page at `pages/index.vue` with following code to test `oruga` `button` components:
```vue
<template>
  <div>
    <o-button variant="primary">Primary</o-button>
    <o-button variant="success">Success</o-button>
    <o-button variant="danger">Danger</o-button>
    <o-button variant="warning">Warning</o-button>
    <o-button variant="info">Info</o-button>
  </div>
</template>
```

Step 4: Import scss in `nuxt.config.ts`:

```ts
import { defineNuxtConfig } from 'nuxt3'

// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
export default defineNuxtConfig({
    css: [
        // SCSS file in the project
        '@oruga-ui/oruga-next/src/scss/oruga-full-vars.scss',
    ],
})
```

Step 5: Restart `npm run dev`

Now, you're good to go.

---

#### [Bug] [Tested on 2022-02-04]

When you build your Nuxt application using `npm run build` and then `nuxi preview`, it is show following error:

```sh
Invalid value used as weak map key
```

To fix this issue you need to add following code to your `nuxt.config.ts` file:

```js
...
build: {
        transpile: [/oruga/]
    }
...
```

Then run `npm run build` and `nuxi preview`. Now, `oruga` will work fine. 

But this will affect `npm run dev`, so during development you should remove the `transpile`.
My 2021’s life recap
Tags: development, opensource, life
Published: 2022-02-03 12:03:33

---
title: My 2021’s life recap
published: true
date: 2021-12-31 09:12:29 UTC
tags: Development,OpenSource,life
canonical_url: https://daniele.tech/2021/12/my-2021s-life-recap/
---

Another year but it wasn't a long time from my last yearly recap...

The post [My 2021’s life recap](https://daniele.tech/2021/12/my-2021s-life-recap/) appeared first on [Daniele Mte90 Scasciafratte](https://daniele.tech/eng).
114. Flatten Binary Tree to Linked List
Tags: java, algorithms, programming, 100daysofcode
Published: 2021-12-31 09:06:19

# [Description](https://leetcode.com/problems/flatten-binary-tree-to-linked-list/)

Given the `root` of a binary tree, flatten the tree into a "linked list":

- The "linked list" should use the same `TreeNode` class where the `right` child pointer points to the next node in the list and the `left` child pointer is always `null`.
- The "linked list" should be in the same order as a **[pre-order traversal](https://en.wikipedia.org/wiki/Tree_traversal#Pre-order,_NLR)** of the binary tree.

## Example 1:


```
Input: root = [1,2,5,3,4,null,6]
Output: [1,null,2,null,3,null,4,null,5,null,6]
```

## Example 2:

```
Input: root = []
Output: []
```

## Example 3:

```
Input: root = [0]
Output: [0]
```

## Constraints:

- The number of nodes in the tree is in the range `[0, 2000]`.
- `100 <= Node.val <= 100`

---

# Solutions

## Solution 1

### Intuition

### Code

```java
public void flatten(TreeNode root) {
    if (root == null) {
        return;
    }
    Stack<TreeNode> nodes = new Stack<>();
    nodes.push(root);
    while (!nodes.isEmpty()) {
        TreeNode node = nodes.pop();
        if (node.right != null) {
            nodes.push(node.right);
        }
        if (node.left != null) {
            nodes.push(node.left);
        }
        node.left = null;
        if (!nodes.isEmpty()) {
            node.right = nodes.peek();
        }
    }

}
```

### Complexity

- Time: O(n^2)
- Space: O(n)

---

## Solution 2

### Intuition

### Code

```java
public void flatten(TreeNode root) {
    if (root == null) {
        return;
    }
    TreeNode left = root.left, right = root.right;
    root.left = null;
    root.right = left;
    flatten(left);
    flatten(right);

    TreeNode cur = root;
    while (cur.right != null) {
        cur = cur.right;
    }
    cur.right = right;
}
```

### Complexity

- Time: O(N^2)
- Space: O(N)

---

## Solution 3

```java
public void flatten(TreeNode root) {
    TreeNode curr = root;
    while (curr != null) {
        if (curr.left != null) {
            TreeNode prev = curr.left;
            while (prev.right != null) {
                prev = prev.right;
            }
            prev.right = curr.right;
            curr.right = curr.left;
            curr.left = null;
        }
        curr = curr.right;
    }
}
```
Vitejs SSR (Fastify, Vuejs)
Tags: vue, vite, fastify, ssr
Published: 2021-12-31 09:01:02

# Vite SSR (Vue 3 + Vitejs + Fastify)

<p align="center">
  <img src="https://raw.githubusercontent.com/Rezvitsky/vite-ssr-vue/main/preview.png">
  <br>
</p>

<br>

Hey! For this stack, I used:

* [Fastify](https://github.com/fastify/fastify)
* [Fastify Express](https://github.com/fastify/fastify-express)
* [Vitejs](https://vitejs.dev/)
* [Vuejs](https://v3.vuejs.org/)
* [Vite plugin vue layouts](https://github.com/JohnCampionJr/vite-plugin-vue-layouts)
* [Vite plugin pages](https://github.com/hannoeru/vite-plugin-pages)
* [Unplugin auto import](https://github.com/antfu/unplugin-auto-import)
* [Unplugin vue components](https://github.com/antfu/unplugin-vue-components)


Repository: https://github.com/Rezvitsky/vite-ssr-vue
Hello Looking for begginer Work Team 🖤
Published: 2021-12-31 08:48:38

Hi 😊👋🏻 
I'm Jane an I.T student starting through this new path in my life I do have some knowledge but I drop it out for a while and I'm coming back since the bases.

I'm looking forward to make a couple of friends and work and study together come through the journey and make projects together. Work in our portfolio and push up everyone together. 

Starting on HTML CSS And JavaScript by now. 

Anyone who would love be part of this personal Project Don Hesitate contact me I'd be more than happy. 


Good Vibes ☺️🤠 J.
How to do Matrix Multiplication in Python — Codewars
Tags: codewars, python, matrixmultiplication, matrix
Published: 2021-12-31 08:48:27

You may have Multiplied matrix in your linear algebra class but you know how to multiply to the matrix in python. In Today’s post, we will go through the process of How to do Matrix Multiplication in Python from scratch.

To get the Solution visit 
https://hecodesit.com/how-to-do-matrix-multiplication-in-python-codewars/
This tools might be usefull for all...
Tags: webdev, beginners, productivity, help
Published: 2021-12-31 08:28:00

Have you ever heard this sentence "This library is no longer supported"?

I'm a junior developper and i have already make the mistake of download a package how's not supported... (Everyone make mistake :))
and we know that in every project, sometimes, we need to update package if they're not longer supported.

But instead of searching the numbers of downloader's or the day/year of the last commit. I found a great tools that reunited all together and suggest you alternative of package. 

This tools call's [openbase](https://openbase.com/) and i think it will optimise my time searching the right package. 

This site reunited an overview (comment, rating, last commit, number of download), Documentation, Review (FeedBack interesting), Maintenance, Dependencies needed, versions and alternatives.

I hope this tool will help you and feel free to give me your feedback :)
Must-have schema markups to include in an eCommerce website
Tags: webdev, ecommerce, website
Published: 2021-12-31 08:06:39

<p>Irrespective of whether you develop a new e-commerce website for your online business or have an existing one, you should include a few schema markups in your site. But you might be unaware of the term, right? Well, schema markup is nothing but a set of instructions or structured data. You can incorporate these into your site's HTML code to assist Google in understanding what it is and what to do with it. Schema markups also help search engines to comprehend the meaning of the elements of your site.</p>
<h2>Schema Elements for E-commerce Website</h2>
<p>You will find multiple schema elements, and as a result, you should include the best ones that will fit your e-commerce site the most. To determine the best one you&nbsp;can read the below segment to learn about some must-have schema markups.&nbsp;</p>
<h3>Organization Schema</h3>
<p>You should include this schema markup into your site as it will offer you several data helping you to enhance your brand's visibility. The organization schema types include the following-</p>
<ul>
<li>Your name</li>
<li>Your address</li>
<li>Your contact number</li>
<li>Your social media profile</li>
<li>Your company logo</li>
</ul>
<h3>Product Schema</h3>
<p>It is one of the most crucial schema markups for your e-commerce site. A product schema displays your products on the search results. It assists Google in understanding that it is on a product page. A product schema has the below types.</p>
<ul>
<li>Color</li>
<li>Category</li>
<li>Offers</li>
<li>Dimension</li>
<li>Brand</li>
<li>Logo</li>
<li>Description</li>
<li>Image</li>
<li>Product ID</li>
</ul>
<h3><strong>Breadcrumblist Schema</strong></h3>
<p>You can add this schema to your e-commerce website to offer more data regarding your site to search engines and your customers. But the developers of the&nbsp;<a href="https://www.webomindapps.com/ecommerce-website-development-company.html">e-commerce website development company</a><strong>&nbsp;</strong>say that you should give proper attention while incorporating the breadcrumb list on the final page.&nbsp;</p>
<h4>Last Remark</h4>
<p>So, these are some must-have schema markups for your e-commerce website. You can opt with anyone markup schema which you find useful for your online store.</p>
NFT Marketplace Development: Know Its Features & Functionality
Tags: webdev, blockchain
Published: 2021-12-31 07:54:45

An NFT marketplace allows NFT enthusiasts to buy and sell digital assets upon uploading their digital collectibles in the marketplace. As the craze for NFTs went high in recent years, many business people and entrepreneurs are showing interest in plunging into the NFT industry. 

Are you one of the ambitious ones? Forge ahead with NFT marketplace development services. Beforehand, know how the NFT marketplace works with the integration of typical features in this blog.

## How Does An NFT Marketplace Work?

The following are the simple steps that briefly explain how the NFT marketplace works. 

- Irrespective of the buyer or seller, the foremost step they have to take is to sign up with the platform by specifying the required information.
- After the initial setup, a verification process has to be followed, which includes KYC. Once done with the verification, the crypto wallet will be created.
- Henceforth, the users will be able to mint their works and their NFTs will be listed in the marketplace.
- The buyers who have interest in your NFT works would place their bids when works come for auction.
- When the seller is self-satisfied with the bids, the auction will be closed and transactions made. 
- From now, the buyer will have ownership of the NFT works and these will be saved in their wallets.

## Salient Features To Consider During NFT Marketplace Development

So far, you have insights into the workflow of the NFT marketplace. Now, let’s see the significant features defining the marketplace to function this way.

**Wallet** - With the integration of the wallet, the users (buyers and sellers) can save their NFTs. 
Search Option - Through this feature, users will find their favorite digital content creators (artists, musicians, etc) easily. Also, they can search for NFTs listed in the marketplace.

**KYC Verification** - This needs to be carried out once the users complete the initial sign-up or registration process. It is to verify their identity.

**Create Listings** - The sellers who want to sell their NFT works can list these in the marketplace, which others can view.

**In A Nutshell,**

Hope so; you have obtained adequate knowledge of how the NFT marketplace works alongside must-have features. If you intend to step into the NFT industry, move forward with NFT development services. Make your move now! 

 https://www.inoru.com/nft-marketplace-development
How I teach her javascript to a 9 years child
Tags: javascript, beginners, tutorial, programming
Published: 2021-12-31 07:03:57

**Requirements**
- Let it be the child who asks you with curiosity  "What are you doing?"

- If the child see you programming with a big astonished face or a woow expression, try to not finish bad with your ex-girlfriend (her uncle), or you will be feel pretty bad for loose a diamond in the middle of the way. A child that feel passion for programing without scratch or a very visual interface (not the ex-girlfriend obviously)

**"The blender system"**
Based on a trial experience teaching programming, I realized that the easiest way to teach what is a function is to create a blender.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/za9ecz94q5lqqxcb4gt9.png) 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sg9va0cjnr7kxlpot9ys.png)
Once she played with the concept wrote in the keyboard diferent combinations with fruits over water and milk, I explained to him that programming was using these functions created by other people to create your own, like a kitchen that uses the blender and the stove to cook.

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


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


Do you know of a simpler way to explain programming and functions to a child or a non programmer guy?
Event emitters in node js
Published: 2021-12-31 06:54:38

EventEmitter is a class of the event module that can be used to raise and handle custom events. This module facilitates communication between objects in Node and is at the core of asynchronous event-driven architecture. This class has properties like on which is used to bind functions on events and emit which fires events.

## emit() function
this function is used to create an event and it takes one parameter which is the event name.

```
const events = require('events')

const eventEmitter = new events.EventEmitter()
eventEmitter.emit('nameOfEvent')
```

## on() function
This function binds an event with an event handler JavaScript function and it takes two parameters: 

- name of event to bind
- EventHandler Function

```
// we require the module events
const EventEmitter = require('events')

const customEmitter = new EventEmitter()
// the event _myEvent_ is bound to the function parameter
customEmitter.on('myEvent', (name, age ) => {
   console.log(`My name is ${name} and I am ${age} years old`)
})
//myEvent is triggered
customEmitter.emit('myEvent', 'Grace', 22)

```