teleren/devto huggingface dataset:
New Gmail layout
Tags: gsuite, gmail, googlecloud
Published: 2022-02-28 23:34:52

**Learn about the new integrated Gmail layout**

Gmail has a new integrated view to organize Mail, Chat, Spaces, and Meet in one place.

![1.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1646090444976/AO2_126L2.png)

With the new layout, you can:
- View Google apps integrated into the Gmail main menu
- View specific app menus in the collapsible panel
- Get notified of new Chat and Space messages through notification bubbles
- Point to each app’s icon to preview what’s going on without switching context

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

**New app menu experience**

All Google apps in Gmail are on the farthest left menu. Click on an app's name to switch between them or point to an icon to see a preview. Each app's main menu displays in a collapsible panel.

You can hide or show the collapsible panel at any time.

To hide or show the collapsible panel, on the top left, click Show or Hide main menu Menu.

**New chat experience**

From the Chat tab, you can access individual or group chat messages.

To open the chat into a small pop-up window at the bottom of your screen, go to the top of any chat or next to the chat message in the side panel and click Open in a pop-up . The window stays in view as you move to other tabs, such as Mail or Spaces. 

**Chat message notification bubbles**

When you get a new chat or space message, the notification appears on the bottom left corner in a bubble. When you point to the bubble, a message preview displays.

Reply to a message shown in a bubble:

- To open the message and reply directly from the chat or spaces tab, click the bubble.
- To open the chat into a small pop-up window at the bottom of your screen and reply, click Open in a pop-up  or Reply.


To turn on notification bubbles:

1. At the top right of your Gmail window, next to your status indicator, click More options Drop down arrow  and then Chat notification settings.
2. In the window that appears, check the boxes next to “Allow Chat notifications” and “Open chat bubbles for new messages.”
3. At the bottom of the window, click Done.

Tips: 

- To turn notification bubbles off, uncheck the box next to “Open chat bubbles for new messages.”
- To open chat bubbles in a pop-up view instead of fullscreen, uncheck the box “Open chat bubbles in full screen.”

**Opt in to the new view**

Important: To use the new view, you must turn on Chat in Gmail and set Chat to the left hand panel. Learn how to turn on Chat in Gmail. 

1. At the top right, click Settings Settings.
2. Under “Quick settings,” click Try out the new Gmail view.
3. In the new window, click Reload.

**Opt out of the new view**

1. At the top right, click Settings Settings.
2. Under “Quick settings,” click Go back to the original Gmail view.
3. In the new window, click Reload.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0hfy6uyhc1w87roskt4b.jpg)
Vue3: setup router for NotFound page
Tags: vue, nginx
Published: 2022-03-01 03:34:36

## Steps

1, Create your own "NotFound.vue" page

2, Add code to `main.ts`:
```typescript
const routes = [
  {
    path: "/",
    name: "home",
    component: Home,
  },
  // ... other paths ...
  {
    path: "/:pathMatch(.*)*",
    name: "not-found",
    component: () => import("@/pages/NotFound.vue"),
  },
]
```

3, Config Nginx:
```nginx
location / {
    try_files $uri $uri/ /index.html;
}
```
AMA with Uttam Singh, Developer Advocate at Polygon
Tags: ama, web3, opensource, podcast
Published: 2022-03-02 11:03:03

Web3 is a revolutionary space which aims to help on building sustainable and incentivized communities. This might be quite fascinating by seeing the enthusiasm around but it is very essential to know the basis of Web3.

Aviyel is introducing brand new series for Web3 enthusiasts to get started with their journey. This includes podcasts, hands on sessions and AMAs with experts.

**[Uttam Singh](https://twitter.com/singhk_uttam)** is a Developer Advocate at Polygon. Uttam has exceptional experience with crypto and blockchain. He helps various organizations to build their community around web3 & blockchain. He worked on implementing a new Network (Bor Mainnet) to the Matic BOR chain. Uttam has also performed User Interface testing of various Polygon products like Web Wallet, Bridge, Swap. Uttam is also an open-source contributor and has made numerous contributions to projects like Numpy, Ethereum, Edamontology and also was part of GSSOC 2021.

**Feel free to ask any questions you have in the discussion thread below!**

And don't forget to RSVP to attend the live session on **Unlocking Web3 101 with Uttam Singh** on [Aviyel](https://aviyel.com/events/315/unlocking-web3-101-with-uttam-singh).

#### What will you learn in this session?

Uttam will share his experience in Web3, Tips to get started, followed by AMA.

**Topics to be discussed**

* Uttam's journey into Web3
* Introduction to Decentralization
* Tips to get started with Blockchain, Web3, and Crypto.
* Panel Discussion

See you at the Live Event 💜
iOS vs Android gaming: development issues and platforms comparison for better game development performance
Tags: gamedev, android, ios
Published: 2022-03-03 17:08:20

No operating system is totally better than the other one. Both iOS and Android have advantages and limitations.

The topic of which one is better for gaming has a variety of opinions. Most of them are largely subjective. That is why, in this blog, you can find facts and figures supported by the opinions of the developers about iOS vs Android gaming development issues.
[https://innovecsgaming.com/blog/ios-vs-android-gaming-development/](https://innovecsgaming.com/blog/ios-vs-android-gaming-development/)
Writing a business plan for a startup or app solution.
Tags: businessplan, tutorial, development, strategicplanning
Published: 2022-03-04 05:00:44

> ## A business plan is fundamental for business success. 

Just like you need goals and direction to succeed in life, you need a game plan to succeed in business, and it’s not as simple as it might initially sound. 

It’s not just about setting goals of what you want to achieve, you actually have to back up all your claims with real data and statistics, strategize for the future and predict eventual crisis as accurately as possible. 

Usually, a business plan is presented to banks and investors to convince them to invest. For example, let’s imagine that you want to launch a start-up. You plan to create an app that Fashion Designers can use to organize their orders, receive payments, and manage customers. 

There are many ways to go about this: 

- You could, get a bank loan 
- Give equity in exchange for money 
- Join a start-up incubator or accelerator and so on.

Whichever you choose, you need to sell people your vision. First of all, no one is going to give you money for free. If you’re looking for investors, they are probably going to ask you for equity. If you’re going to talk with a bank, they are going to give you an interest rate, and so on. And, obviously, they definitely aren’t going to give you their money if you don’t have a good idea and a strategy. So, you need a business plan for your Fashion App in order to sell it to potential investors, banks, and so on.

We are going to go through developing a strategic business plan, helps you achieve your business goals and also aid to show people that you know what you’re doing, because at the end of the day, a plan that is backed up by research and facts is very compelling.

## Step One: Define your vision with precision

Your vision is what generates all the goals and strategies. To develop a game plan, you need to know exactly what you want. So, let's look at the App for restaurants example. Your vision is pretty simple. You want to create an app that will be ...

### [Download full ebook here:
](https://mega.nz/file/jo9iDTaB#342-Ib-neJ2CgezGrKBbiXhqFjEGSSrC9Kytpl4PVFI)
Day:37 Training at Ryaz          : Mongoose-modeling relationship b/w connected data
Tags: webdev, beginners, node, programming
Published: 2022-03-04 16:26:36

- Date:4/02/2022
- Day:Friday

Today I started at about 10:30 am as I was finished with seventh module so, I started with eighth module as it was about mongoose: modeling relationships between connected data so, I started with it firstly the instructor taught about  model relationships between connected data, we can either reference a document or embed it in another document.so, we have these two options but,When referencing a document, there is really no relationship between these two documents. So, it is possible to reference a non-existing document.Referencing documents  is a good approach when we want to enforce data consistency. Because there will be a single instance of an object in the database. But this approach has a negative impact on the performance of your queries because in MongoDB we cannot JOIN documents as we do in relational databases. So, to get a complete representation of a document with its related documents, we need to send multiple queries to the database.But Embedding documents solves this issue.And after this instructor taught about how to reference document and also discussed about implementations transaction with fawn. so, this way my day ended up and I got to learn many new things which enhanced my knowledge.
Mastering Bash arguments with getopts
Tags: bash, linux, arg, getopts
Published: 2022-03-06 10:48:34

> In this article, I show you how to mastering the Bash arguments with getopts to have a software who run with professional arguments like 
<pre>
mysoft.bsh -f [arg1] -g [arg2]
</pre>
I also show you how to add a default value if the argument is not given.

Here's an example of code :

<pre>
f=10  
g=5  
while getopts ":f:g:" option; do  
    case "${option}" in  
        f)  
            f=${OPTARG}  
            ((f == 15 || f == 75)) || usage  
            ;;  
        g)  
            g=${OPTARG}  
            ;;  
        *)  
            usage
            ;;
    esac  
done  
shift $((OPTIND-1))  
if [ -z "${v}" ] || [ -z "${g}" ]; then  
    echo "info"  
fi  
echo "f = ${f}"  
echo "g = ${g}"
</pre>


Now we can look at the code more closely :

Here we declare a default value to the variable -v and -g
<pre>
f=10  
g=5
</pre>

Here we use getopts with the arguments -f -g. If the user write, software.bsh -f value1 and/or -g value 2.

<pre>
while getopts ":f:g:" option; do  
    case "${option}" in  
        f)  
            f=${OPTARG}  
            ((f == 15 || f == 75)) || usage  
            ;;  
        g)  
            g=${OPTARG}  
            ;;  
        *)  
            usage
            ;;
    esac  
done
</pre>

That makes the arguments in Bash more professional.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wdlosftc320v94zw46x2.jpg)
Terminal Comand
Tags: programming, terminal, cpp, uzbek
Published: 2022-03-07 11:42:24

### Bugun Terminal komandalirini organdik 
# `ls`
- hozirgi papkadagi barcha narsalarni chop etadi
- `-a` tanlovi orqali yashirin fayl va papkalar ham chop etiladi

### `pwd`
-hozirgi biz turgan papka manzilini chop etadi
- `~` manzili `$HOME` manzilga teng

###`cd` (current directory)
- joriy papkani ozgartiradi, ya'ni sizni boshqa manzilga olib boradi

```
~ # cd Documents //
```
Difference between web2 and web3
Tags: zuri, blockchain, blockgames, web3
Published: 2022-03-07 15:23:10


In this article I’ll be explaining the difference between the trending technologies we’ve been seeing recently which is the web 2 and web 3 technologies.

To make us understand the difference we first have to know the meaning and the similarities between each of them and the meaning of each and everyone of the the technologies.

## Web2

Web 2 describes the current state of the internet, the version that we currently use that involves user generated content and is controlled by corporations. It involves sending data via various apis storing them on centralized storage platforms or cloud platforms . It really shaped up the type of mainstream communication today because most social media apps are built on it. The major difference between web 2 and web 3 is the users identity… while web 2 uses the user’s name, his date of birth and other sensitive information to identify users web 3 uses a generated address or token as a means of identification. This makes the user identity less exposed and can reduce identity theft. 
Web 2 has it’s advantages has it has helped bring media and communications to a higher level and it has generated lots of revenue for the administrators.

## Web3
Now web 3, web 3 is the 3rd version of the internet in which the internet process information in through machine learning and decentralized technology. Both users and machine will have access to the data for this to happen the data context and concept must be understood.
It has been known to us that web 3 will be built on decentralization, the block chain and it will use this in combination with artificial intelligence to interact with the real world. This will help the technology to deliver a faster and personalized user experience. Unlike web 2 interacting with the web 3 could earn you some money. This includes the usage of tokens on the blockchain, play to earn games, decentralized automated organizations and non fungible tokens. 

Web 3 is a trustless, open, permissionlees and ubiquitous platform.

## The major difference between web 2.0 and web 3.0includes 

1. Decentralization: Information is free and cannot be controlled and censored because it’s decentralized. 

2. Web 3.0 does not require personal data or information to make payments or purchase anything 

3. Web2 servers could crash while web3 uses decentralized storage systems which replicates several nodes

I hope I’ve explained perfectly the difference between web2 and web3 in this article. Thank you for your time. Drop your questions below if you have any

This article is written on behalf of [blockgames](https://blockgames.gg/), [nestcoin](https://nestcoin.com/) and [zuri](https://zuri.team/)
Reactjs Explore
Published: 2022-03-07 16:24:34

Component Lifecycle: React web apps are actually a collection of independent components
that run according to the interactions made with them. Every React Component has a
lifecycle of its own; lifecycle of a component can be defined as the series of methods that
are invoked in different stages of the component’s existence. Mainly React component
lifecycle are 3 stages. They are Initialization, mounting, updating, unmounting.
Initialization: This is the stage where the component is constructed with the given Props
and default state. This is done in the constructor of a Component Class.
Mounting: Mounting is the stage of rendering the JSX returned by the render method itself.
Updating: Updating is the stage when the state of a component is updated and the
application is repainted.
Unmounting: As the name suggests Unmounting is the final step of the component
lifecycle where the component is removed from the page.
context API: Context API is a way to produce global variables that can be passed around.
Context API moving props from grandparent to child, child to parent. Context API works
effectively. Mainly Context API returns a consumer and provider. Provider is a component
and it suggests provides the state to its children. To create context API need to write
createContext()
Custom Hook: Custom hook is a JavaScript function which created by ourselves, when
share logic between other JavaScript functions. It allows to reuse some piece of code in
several parts of app.
Virtual Dom: Virtual DOM is a copy of the original DOM kept in the memory and synced with
the real DOM. Virtual DOM has the same properties that the real DOM. but virtual DOM lacks
the power to directly change the content. Differences between virtual and real dom: real
DOM just to get things straight forward. Virtual DOM is just a copy of real DOM.
Difference between web3 and web2
Tags: blockchain, web3, web2
Published: 2022-03-07 21:54:34

Web2 is the Internet as we know it today, whereas Web3 refers to the evolution and next generation of the Internet. 

Web2 is based on a server-client structure, meaning that a corporation or entity controls and owns your personal data in exchange for their service. In web3, anyone can participate without having to share their personal data. No single Entity controls or owns data as it stored on the blockchain.

In web2 there is a single point of failure: malicious actors may be able to take down the network by targeting the central authority while this is not possible in web3 since it is distributed. 

https://blockgames.gg/, https://nestcoin.com/, https://zuri.team/
Cara menggunakan Environment Variables di NextJS
Tags: nextjs, indonesia, pemula
Published: 2022-03-08 02:00:43

Pertama-tama buat lah sebuah file di root project dengan nama .env

```
MY_NAME=AWAN;
```

Setelah itu kita bisa memanggil environment variable di codingan dengan cara

```
const name = process.env.MY_NAME;
console.log(name);
```
Dan hasilnya akan keluar seperti ini

![Hasil di terminal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1u148mlbi95qgtstzroe.png)

Cara diatas hanya akan bisa diakses oleh V8 atau nodejs nya saja, ketika kita ingin akses variable tersebut di browser akan undefined seperti ini

![Hasil di browser](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3npdsh39egy80j2p92gh.png)

Oleh karna itu, ada cara lain dalam mendefine environment variable yang dibutuhkan supaya browser juga bisa membacanya dengan cara menambahkan NEXT_PUBLIC_ atau seperti ini

```
NEXT_PUBLIC_MY_NAME=AWAN PUBLIC
```

Cara memanggil environment variable di codingan sama aja seperti ini

```
const name_public = process.env.NEXT_PUBLIC_MY_NAME;
console.log(name_public);
```

Dan hasilnya akan keluar seperti ini


![ENV Public di terminal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lqyxcbzmjt7zqkaolkbx.png)

Ketika dilihat di browser akan seperti ini

![ENV Public di browser](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i888sx1eq39k2hnadfgz.png)

> Dalam penggunaan environment variables terkadang ada data private yang browser tidak boleh tau sehingga kita bisa menggunakan metode pertama dalam define variable dan ada kalanya kita butuh data yang browser harus tau dengan cara metode 2.

Untuk contoh projectnya saya sudah upload di github: https://github.com/awanz/nextjs-env
Assign Roles and Permissions to Users | Spatie Laravel Permission | Laravel 9 Tutorial
Tags: laravel, php, beginners, tutorial
Published: 2022-03-08 07:48:15

{% embed https://youtu.be/Bze4dd4WWYU %}
Hello Friends, in this video we are going to assign roles and permissions to users.

Laravel Admin Panel.
Laravel Tutorial.
Laravel 9 Tutorial.
Spatie role and permission.
Laravel permission.
Github Repo: https://github.com/laraveller/laravel-permission

Support me: 
https://www.patreon.com/Laraveller
https://paypal.me/TonyXhepa

Follow me:
Twitter: https://twitter.com/Laravellercom
Facebook Page: https://www.facebook.com/1laravellercom
Instagram: https://www.instagram.com/laravellercom/
Github: https://github.com/laraveller
Website: https://laraveller.com/

Playlists:
Laravel Testing For Beginners: https://bit.ly/3t1gNq4
Laravel Roles and Permissions: https://bit.ly/3gOhM7d
LARAVEL INERTIA MOVIE APP: https://bit.ly/3FVMp4Q
Laravel Livewire Movie App: https://bit.ly/3s8D6v1
Laravel Classified Website - https://bit.ly/3nsFRnb
Livewire Employees - https://bit.ly/2ZtIpZY
Laravel Employees Management - https://bit.ly/3Gglt14
Laravel admin panel - https://bit.ly/3CcX75M
Lava lamps securing the Web?🤷‍♂️
Tags: cryptography, security, hashing, python
Published: 2022-03-08 12:37:22

computer generates random number to be used for encryption key, The more random they are the more secure.computer are made to provide predictable output based on given inputs so it isn't suitable for generating encryption key.Nowadays computers have secure lib that provide **CSPRNG**(Cryptographically-secure pseudorandom number generator) So it's suitable for using as key.

computers can also be fed with real word random data because events in the physical world are unpredictable and one of the sources of randomness cloudflare uses is **Lava Lamps**. 
![lava lamps encrypt the web](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rxjo3jongpnl4sdy83kq.png)

Cloudflare have about 100 lava lamps with camera pointed to them and at regular interval they take pictures and send them to cloudflare servers. Images are stored as series of numbers with each pixel having its value ,So each images becomes a string of **total random numbers** .This becomes their base to encrypt the internet. 

**Cryptographic seed** - the data that a CSPRNG program starts with for generating random data. 

**CSPRNG **needs **seed **(cryptographic seed) as a starting point from which to produce more random data.Clouflare uses a CSPRNG to generate random key with data collected from lava lamps as the seed.

that's it for this blog , see you next time with more interesting stuff...
Emojicode😎 (Variables)
Tags: programming, tutorial, beginners, codenewbie
Published: 2022-03-09 09:52:06

_Part 2 of the Series on Emojicode._

Let's dive deep into coding with emojis.
In this part, I'll try to introduce you to what variables are and how are they implemented in Emojicode 💪.

#### Variable 🙄❓
A variable is simply a name that represents a particular piece of your computer’s memory that has been set aside for you to store, retrieve, and use data.
Variable store data types. We had a small introduction to strings in the last part - which is a _data type_!
Data types are just to tell computer what type of data it is.

#### Declaring and Assigning Variables:
Emojicode lets you declare two types of variables:

![types](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4adh4c3pp5shk50f953l.png)

**Declaring a constant variable:**

```
🔤Earth🔤 ➡️ planet
💭🔜 planet is variable, ➡️ is assigning operator,  Earth is a string and is the value of planet variable 🔚💭

```

**Declaring a mutable variable:**

```
6 ➡️ 🖍🆕 coins
💭🔜 coin is a variable, ➡️ is assigning operator,  6 is an integer and is the value of coin variable, 🖍🆕 means mutable 🔚💭

💭 Mutable variables *need* to be mutated or emojicode will smash an error on you.

```

#### String Interpolation (printing your variable):
Just declaring variable is boring 🥱, we need to print them out.
To print variables, we need to wrap them around 🧲.

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

#### Arithmetic Operations:
| Emoji        | Operation           | Example  |
| ------------- |:-------------:| -----:|
|➕| addition| 2 ➕ 2 ➡️ number     💭 number is 4
|➖| subtraction| 2 ➖ 2 ➡️ number     💭 number is 0
|✖️| multiplication| 2 ✖️ 2 ➡️ number     💭 number is 4
|➗| division| 2 ➗ 2 ➡️ number     💭 number is 1
|🚮| modulo| 2 🚮 2 ➡️ number     💭 number is 0

#### Mutate the mutables 😎! Operator Assignments.
In Emojicode, operator assignment provides a short-hand method for modifying the value of variables.

Suppose we have a variable like this:

```
2 ➡️ 🖍🆕 mutate   💭 mutate is 0
```

| Emoji        | Operation           | Example  |
| ------------- |:-------------:| -----:|
|⬅️➕| addition assignment| mutate ⬅️➕ 1     💭 mutate is now 3
|⬅️➖| subtraction assignment| mutate ⬅️➖ 1     💭 mutate is now 2
|⬅️✖️| multiplication assignment| mutate ⬅️✖️ 2     💭 mutate is 4
|⬅️➗| division assignment| mutate ⬅️➗ 2     💭 mutate is now 2
|🚮| modulo assignment| 

#### Let's code a program 💻

![gif](https://c.tenor.com/ekdXKJ7tpNkAAAAM/code.gif)

_This is a very basic program. Pardon me if you are **hecker** 😁_

![program](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dpsegapujde61d4ur108.png)
 
## See you in next part! Stay tuned :)