teleren/devto huggingface dataset:
Me when I'm not Deving
Tags: discuss, watercooler
Published: 2022-07-21 09:31:00

### Watercooler time!
If you had seen from the cover page, Gaming is one thing I do when I'm not developing (which is pretty rare, considering I'm a student too)
<br>
Here is mine:
- Coding
- Playing the Piano (I have near perfect-pitch and can play any song without looking at the score!)
- Building plastic models
- Doing card tricks
- Yoyo tricks
- Speedcubing
- Playing table tennis
- Playing the Guitar
- Watching 1 hour long ted talks (They are interesting sometimes...)
- Laughing
- Gaming
- Reading (I have more than average reading speed)
- Crocheting

<br>
I am just, obsessed with these. Yeah, just a place to show off what you can do! <br>
Share with me!
React Key Concept #1
Published: 2022-07-21 09:12:08

React is a ONE WAY DATA FLOW, thinking about our react as a function that takes in the state and component as an argument. React creates a virtual dom.  The changes on the state will be updated on the virtual dom, then the a library such as React DOM just like a bot would sync the change on the virtual dom to the real dom.
it makes efficient performance by reducing the operations of re-rendering the whole real DOM.
How to see current branch - Vscode - Linux - Terminal
Published: 2022-07-21 08:55:56

Add the follow code at bashrc 

`export PS1='\u@\h\[\033[01;34m\] \w\[\033[0;32m\]$(__git_ps1 " (%s)")\[\033[01;34m\]$\[\033[00m\] '`

Then, run `source ~/.bashrc`
How to draw a radius on Google Maps
Tags: webdev, html, tutorial
Published: 2022-07-21 08:55:37

I'm sure you saw many times maps like this:

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

On this map we have a radius (circle) with operating range of some company. We have red line around the circle and also this radius is filled by transparent red. So how to make this?

## Step one

First we have to open Google Maps, type the city name in search field. Then we should copy GPS coordinates by right click on the city and click on GPS coordinates:

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

## Step two

Next open any KML generator, I usually use this [KML circle generator](https://www.scottmurray.me/kml/circle/index.php) but you can use any. KML means Keyhole Markup Language and it is a file format used to display geographic data in an Earth browser such as Google Earth. Then paste these GPS coordinates into form field and type radius in kilometers, miles etc. You can select color. Finally click `Generate` button and download the KML file.


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

## Step three

Open [Google My Maps](https://mymaps.google.com) sign in, and create a new map. In the new window beside Untitled layer click `Import` and upload a KML file you've created in step one.

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

Next select color and line width.  You can name your map if you want.

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

## Step four

Click on `Share` and enable `Anyone with this link can view`. You can decide if others can see you name and photo on this map. Next click `Close`.

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

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

## Step five

Click on `preview`. 

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

The new tab will open with default view of this map. Click  `Share`  and choose `<> Embed on my site`. Copy the code and paste it in your website code.

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

Example of the code looks like this:

```html
<iframe src="https://www.google.com/maps/d/embed?mid=1AJnVYcE_SzVL3kbu-FRkQLFbKOzB1JE&ehbc=2E312F" width="640" height="480"></iframe>
```

And you have a map with operating range on your site! You can adjust width and height.

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

It would great if you will follow me on Twitter: [Chris Texe](https://twitter.com/TexeChris)
Breadth First Search Traversal of Graph GeeksForGeeks
Published: 2022-07-21 08:47:59

**For traversing only the connected components**:
**Problem**:
Given a directed graph. The task is to do Breadth First Traversal of this graph starting from 0.
**Note**: One can move from node u to node v only if there's an edge from u to v and find the BFS traversal of the graph starting from the 0th vertex, from left to right according to the graph. Also, you should only take nodes directly or indirectly connected from Node 0 in consideration.

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

```
Input: 
Output: 0 1 2 3 4
Explanation: 
0 is connected to 1 , 2 , 3.
2 is connected to 4.
so starting from 0, it will go to 1 then 2
then 3.After this 2 to 4, thus bfs will be
0 1 2 3 4.
```
**Solution**: TC O(n) as we will be visiting atmost n Nodes, and space complexity: O(n)

```java
//in bfs, we tarverse a node and adjacent nodes of the traversed node.
/*          0
      /     |     \
   1         2        3
             |
            4
*/
//bfs : 0-> 1->2->3->4
class Solution {
    // Function to return Breadth First Traversal of given graph.
    public ArrayList<Integer> bfsOfGraph(int V, ArrayList<ArrayList<Integer>> adj) {
        ArrayList<Integer> bfs = new ArrayList<>();
        boolean visited[] = new boolean[V];
        // this is for traversing connected graph only 
            if(!visited[0]){
                Queue<Integer> queue = new LinkedList<>();
                visited[0] = true;
                queue.add(0);
                
                while(!queue.isEmpty()){
                    Integer node = queue.remove();
                    bfs.add(node);
                   
                    for(Integer adjNode : adj.get(node)){
                        if(!visited[adjNode]){
                            visited[adjNode] = true;
                            queue.add(adjNode);
                        }
                    }  
                }
            }
        return bfs;
    }
}
```

**For traversing entire graph including the not connected graph components**

```java
class Solution {
    // Function to return Breadth First Traversal of given graph.
    public ArrayList<Integer> bfsOfGraph(int V, ArrayList<ArrayList<Integer>> adj) {
        ArrayList<Integer> bfs = new ArrayList<>();
       
        boolean visited[] = new boolean[V];
        // for traversing the entire graph
        for(int i =0;i<V;i++){
            if(!visited[i]){
                Queue<Integer> queue = new LinkedList<>();
                visited[i] = true;
                queue.add(i);
                
                while(!queue.isEmpty()){
                    Integer node = queue.remove();
                    bfs.add(node);
                   
                    for(Integer adjNode : adj.get(node)){
                        if(!visited[adjNode]){
                            visited[adjNode] = true;
                            queue.add(adjNode);
                        }
                    }
                }
            }
        }
        return bfs;
    }
}
```
VSCode
Tags: vscode, beginners, productivity, notanad
Published: 2022-07-21 08:30:18

## VSCode is too good.
If you are not using it, I'm telling you that you are missing out ___so___ bad. VSCode is lightweight, and there are so many extensions to choose from. I personally use VSCode for 80% of my projects and I feel that most Microsoft products are not bad. (yes, Microsoft, I see how you are controlling the devs now 😈) 
<br>
### Why do I feel this way?
Well, I have just recently "rediscovered" the full potential if VSCode. I started using an extension I've installed a long time ago, called live server. I have been stupidly wasting all of my time setting up ISS. But instead, just use live server! Just a ___CLICK___. 
<br>
I had to spend hours watching videos on how to set up ISS until I almost gave up. Well, who knew Microsoft already came up with VSCode that had extensions 🤦‍♂️

![VSCode ad](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mkpg27bgaxwfrn32bxnh.png)  
<br>
<br>
### Another aspect, JetBrains editors
These is another popular and great editor. But I personally feel that these Editors are meant for countless of testing, AI, and a lot of other things.
<br>
JetBrains is sort of like the Adobe of Programming. They make a ton of stuff, like for Unity, or Python. Many apps under one company. So the specialized versions of these make them so nice, that you can have one editor for every project you do.

![jETbRAINS Overload](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2teoe8pw39btngowmw6o.png) 

As these are the only editors I've tried out, I can't say if there are any others better. But VSCode is _slightly_ better. For all, I've not been using JetBrains much as it is a ___little___ slow to load, especially if you are using it for one language (like pycharm). But JetBrains, don't worry about this feedback, it can be another new thing to work on.
<br>
<br>
## So...
Install both of them. It is really up to your preference. However, VSCode does have a slight advantage of being preferred by many and is seamless across any programming language. Yup, even BF (don't go searching that up).
<br>
But, this is more of a log on which editor I generally use and prefer, and I feel VSCode just seems homey, personal and convenient. Let me know what other editors you use!
Learn Python #4 - The f-string...
Tags: python, programming, devjournal, webdev
Published: 2022-07-21 08:14:52

Hello everyone today we are going to talk about string manipulation via `f-string`.

Python over the years has provided many features and one of them is to format the string.

## What the `f-strings` is all about?
f-strings is a literal string interpolation ([The way it works in JavaScript -> String literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)).

It provides a convenient way to embed the python expressions with ease.

### Let us look at the examples:-
- If I want to format a string wherein some of the values are received from a variable `employee_name = 'Steve Rogers'` and we have to generate a string `Steve Rogers is one of the greatest Marvel superheroes` then we need to do ->
```
f"{employee_name} is one of the greatest Marvel superheroes"
// Steve Rogers is one of the greatest Marvel superheroes
```

- You can also inject numeric values inside the string
```
quantity_bat = 10
price_bat = 10
f"The total cost of {price_bat} bats is ${quantity_bat*price_bat}"
//The total cost of {price_bat} bats is 100
```

- If you want to show the values with a 2 decimal point limit
```
quantity_bat = 10.99
price_bat = 10.234
f"The total cost of {price_bat} bats is ${quantity_bat*price_bat:,.2f}"
//output -> 'The total cost of 10.234 bats is $112.47'
```
In the above example we can decide up to which decimal points we want to show the number

- You want to use double quotes, yes you can do that as well
```
number_one = 1
f"\"{number_one}\" is a odd number"
// 1 is a odd number
```

## Conclusion
f-strings are easy to understand, use and handy when it comes to string interpolation, so do let me know what you guys think of this article💡.

Thanks in advance for reading this article...🚀

*More than happy to connect with you on*
- [@twitter](https://twitter.com/_nitinreddy3)
- [@LinkedIn](https://www.linkedin.com/in/nitinreddy3/)

*You can also find me on*
- [@Github](https://github.com/nitinreddy3)
- [@DEV](https://dev.to/nitinreddy3)
- [@Medium](https://medium.com/@nitinreddy3)
Only 5% Indie Hackers products make $100k/year
Tags: career, startup, motivation, discuss
Published: 2022-07-21 08:03:24

[Indie Hackers](https://indiehackers.com/) is a wonderful community for founders, a vast ocean of shared knowledge and a place to showcase your product journey. A lot of people are sharing their products there along with the revenue, often verified by Stripe. We analyzed the available data to check how much revenue are those products making and what are the most money making categories!

At the time of our analysis, there were total of 937 products with Stripe verified revenue. The information we gathered to make this analysis are revenue and product's categories.

## Most of the products don't make any revenue at all

A prevalent thinking is that making money as an indie developer is hard and most of the products end up with no revenue at all. Products on Indie Hackers seem to confirm this as more than 54% of the products are not making any revenue at all.


![Revenue pie chart](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8d0llkeqhhxhcu5g3lpk.png)

## Revenue histogram

Let's now take a closer look at those products which actually do make money. Here's how much monthly revenue products are making.


![Revenue histogram](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bp4j5n7atowl8aesma5l.png)

## Conclusion​

It appears that success in the world of indie developers is an outlier business. Only around 5% of the products we analyzed generate a monthly revenue exceeding ~$8,333 (around ~$100k/year) which is not that hard to earn as a software engineer in a full time job. Nevertheless, starting own company around the product provides an excitement and still a lot of people are pulled towards it.

---

Interactive charts available in the original blog post: [https://scrapingfish.com/blog/indie-hackers-revenue](https://scrapingfish.com/blog/indie-hackers-revenue)
How do/should I format my code in a Git commit message?
Tags: cli, git, help, watercooler
Published: 2022-07-21 07:59:54

So, I was trying to make a Git commit for a game I am working on so I could track my progress, and I wanted to include some formatted code.
Particularly, I wanted them to look like **`ðis kind of codeblock`**.

However, in the command line when I tried typing out my message
```
[calin@CalinArchPC RuntDeale]$ git commit -m "Merged `Level`, `LOVE`, and `XP` components into the `Player` component.
Changed the type of LOVE (Level Of ViolencE) from `i32` to `u32`.
Merged the `Layer` into the `Point` component.
Renamed the `Point` component to `Location` to accommodate the new field."
```
when I tried this I got a lot of unexpected errors.
I looked up the issue and immediately found out what was wrong, so instead I wanted to try it from a text editor, one Google search later and I ended up with `git commit --amend`.

So, this opened a file in VSCode, this made me happy, I thought this meant I was getting somewhere.
But nope, even after inserting the backticks via file it still didn't work.
So I looked up how I could possibly escape the character, which led me to [this ServerFault post](https://serverfault.com/questions/286204/how-does-one-escape-the-accent-grave-backtick-in-a-path).
It says you can escape it with three (3) backslashes, so I tried doing a little test by inserting:
```
\\\`test\\\`
```
into my Git message.
The result... Nope. Didn't work.

So, how do I format code in Git?
For now I'll just write it without the backticks, it won't be too huge of a deal for now, but I'd like to know how I can format code for a future reader's reference.

<b><center><b><h1>Thanks for reading!<br/>Cheers!</h1></b></center></b>
[2/40 things about data] There is no “the best data format”
Published: 2022-07-21 07:42:56

We format the data to move it around. It could be hundreds of kilometers or a few nanometers but we always need to encode information somehow. I’ve never found the “El Dorado” of data formats.

Text formats are easy to read by a human but harder and slower to parse.

Binary formats are fast to parse but hard to debug.

XML is a good container but it’s too verbose.

JSON is easy but does not have basic data types.

Serializable formats are not good to keep in memory but specific formats for in-memory operations are not binary compatible with other languages.

The most important thing I learned is: you need to find the right balance between speed, flexibility, compatibility and the human-computer interface.
Certification 4 Exams Advanced Professional self-assessment test.
Published: 2022-07-21 07:30:55

[Certification 4 Exams](https://certification4exams.com/) The Advanced Design Certification 4 Exams NSX-T Data Center  pc exercising test software program application offers brief results that can help you remove VCAP-NV Design  exercising exam education mistakes. Moreover, the Windows-based completely  exercising test teaches you the manner to govern your VCAP Network Virtualization Design  exercising exam time wisely. Assess Your Certification 4 Exams Performance with  Web-Based Practice Test: It is a browser-based completely Advanced Design Certification 4 Exams NSX-T Data Center  exercising exam that is properly applicable with all primary browsers, collectively with Opera, Chrome, Firefox, and Internet Explorer. The VCAP-NV Design  browser-based completely exercising test does now now no longer require a completely unique VCAP-NV Design  real exam simulation software program application. Only an energetic internet connection can be needed to take the [Certification 4 Exams ](https://certification4exams.com/)Advanced Professional  self-assessment test. VCAP  internet-based completely exercising exam can be taken using any running device like Mac, Linux, iOS, Android, and Windows.
Magento: A fantastic choice for the eCommerce Store
Tags: magento, cloud, devops
Published: 2022-07-21 07:28:15

One of the most popular shopping carts for e-commerce websites in Magento. It has been around for a while and has become incredibly well-liked. This article provides information on why it's an excellent option for an online store.

## What is Magento?
On the Zend platform, Magento is an open-source eCommerce system. For small and large online stores, Magento is ideal. It can be altered to reflect your brand. Thanks to its robust admin panel, you have complete control over your store with Magento.

## Why do companies choose Magento?
In terms of open-source eCommerce platforms, Magento is the market leader. It functions as an eBay Enterprise firm and is owned by Magento Inc. It is a platform for building eCommerce sites and services that is adaptable and simple to use. Millions of users favor Magento because of its simplicity, support, and extensive feature set.

## What are the main advantages of choosing Magento over other eCommerce platforms?
One of the most important choices a company can make is selecting the best eCommerce platform. Magento is a feature-rich, free eCommerce platform. It is adaptable, simple to use, and has limitless scalability. Whatever industry you are in, Magento will give you the resources you need to manage your products and operate your business.

Your online business's platform will serve as its backbone and have a significant impact on how quickly you can get started, how well your store does, and how much time and money you will need to invest in the future.

## Conclusion
Due to its extensive toolset, security, scalability, and user-friendly interface, Magento is an excellent platform for creating eCommerce websites.

You must utilize Magento if you want the most excellent platform for your online store. Brands like Macy's, Timberland, and Nordstrom employ it. Magento is a fantastic option if you're seeking a high-quality eCommerce platform.

We highly recommend Magento if you are considering opening an online store but are unsure which platform to employ. You can host your store on a great eCommerce platform by getting reliable [Magento Hosting](https://devrims.com/magento-hosting/) quickly.
AWS Learning Series #2- AWS Accounts
Tags: aws, cloud, career
Published: 2022-07-21 07:28:05

First step in your AWS hands on should start from here. I assume you already created a personal account using your email address.
Account created using email address is called as root user, by default this user has full access to all AWS resources (No restrictions)
 

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

Important considerations for AWS account:

-  An AWS account is a container for identities(users) and resources
- 	Using an email address, you can sign up for AWS account
- 	Personal use of creating AWS account by default it created as free-tier account and some of the services free for 12 months. Check this link for complete details (https://aws.amazon.com/free/?all-free-tier.sort-by=item.additionalFields.SortRank&all-free-tier.sort-order=asc&awsf.Free%20Tier%20Types=tier%2312monthsfree&awsf.Free%20Tier%20Categories=*all)
- 	Create AWS account by simple registration process and anyone who is having valid credit card and check this link for more details (https://aws.amazon.com/premiumsupport/knowledge-center/accepted-payment-methods/)
- 	By linking your credit card AWS account is created and by default root user has full access for all AWS services
- 	Single credit card can be used for many AWS account creation process
- 	AWS account creation process can be the same for all environments (Development, testing, production & DR) using different email addresses
- 	It’s not recommended to use root user for day-to-day operations of using AWS services
- 	Using root account user create new Admin users (with proper roles/policy attached) with Full administrator access (and Billing module access)
- 	With root user login, “Enable IAM User & Role access to billing” 
- 	If you didn’t assign any policy/roles to new user creation, by default user is no access to any of the AWS resources
- 	After Admin user is created, then we can create multiple users based on the role/policy (Developers, testers, DBA’s etc.,,)
- 	Best security policy is to enable MFA (Multi Factor Authentication) for all the users including root user
- 	Recommended best practice is create groups and attach policies/roles to it and users should be mapped to groups (this process makes easier on managing roles/policies for all users)
- 	Pay-as-you-go model is whatever the services you are using it will be charged per min/requests and charges is deducted from your payment method (Credit card)
- 	If the user doesn’t belongs to any group/role/policy by default no access to any of AWS resources
- 	As a best security practice, set password rotation policy for the users
- 	AWS Account IAM user can be assigned always with only one username & one password
- 	An IAM user can have TWO access keys (Active)
o	Access Key ID: SYAWLASKCORSWAACCESS
o	Secret Access Key: SYAWLASKCORaws/5SE5CR5ET5ACC3ESS5kEY