teleren/devto huggingface dataset:
Configure more than one git accounts locally.
Tags: git, github, gitlab, bitbucket
Published: 2021-11-13 08:06:02

After joining my first job they gave me a new mac mini, previously I used to work on my laptop but mac mini feels more convenient now. As you all know new company means you will get your new working email id. then you might need to use it create a new github account. (github is just for an example, this process valid for any git remote provider)

Then the real struggle starts. How to manage personal and work github accounts in the same machine.

### First Step
Generate 2 ssh keys, means you have to have two public keys and two private keys in your .ssh folder
ex:- id_rsa_work id_rsa_personal id_rsa_work.pub id_rsa_personal.pub

```
ssh-keygen -t rsa
```

### Second Step
copy public ssh keys, work ssh goes to work github and personal ssh goes to personal github. so now you have added your public keys respectively.

```
pbcopy < ~/.ssh/id_rsa_work.pub
pbcopy < ~/.ssh/id_rsa_personal.pub
```

### Third Step
Now we have to create another file in .ssh folder called config and paste the code below

```
# Personal GitHub
Host personal
  HostName github.com
  User git
  AddKeysToAgent yes
  UseKeychain yes
  IdentityFile ~/.ssh/id_rsa_personal

# Work GitHub
Host work
  HostName github.com
  User git
  AddKeysToAgent yes
  UseKeychain yes
  IdentityFile ~/.ssh/id_rsa_work

Host *
  IdentitiesOnly yes
```

### Fourth Step
#### Scenario 1 - Cloning a repo
Suppose you want to clone a repo from your working github account.
```
git clone git@github.com:work-account/project.git
```
you have to replace `git@github.com` with `work`. so it will look follows. actully `work` is the name you gave in the config file.

```
git clone work:work-account/project.git
```

#### Scenario 2 - New repo / Existing repo

```
git remote add origin git@github.com:work-account/project.git
```
change to

```
git remote add origin work:work-account/project.git
```

I hope this will make your life easier and happy version controlling. 

cheers!!
Launching my newsletter.
Tags: javascript, webdev, showdev, devjournal
Published: 2021-11-13 08:05:38

I just hit a 1000 followers on Dev.to last week and its been an awesome journey. 

So on this feat, I am launching Abhiraj's Dev-letter, a weekly digest of the top ProductHunt posts, my top blog posts, some tech news and tips & tricks about web development.

Its going to be an all-in-one package.

I will post one issue every Saturday. You can also signup on my Twitter account.

[Sign up here](https://www.getrevue.co/profile/abhiraj)

I would just like to thank everyone who has followed, liked and read my blog posts. It would never have been possible without you.

***

Until next time
[Abhiraj](https://abhiraj.glitch.me)
Realworld Redwood Firebase PostgreSQL Example
Tags: fullstack, redwoodjs, firebase, postgres
Published: 2021-11-13 08:03:36

Zero config fullstack apps with Redwood.js. In this project, show how to build fullstack apps with Redwood.js combined with Firebase for authentication and PostgreSQL DB. Check this source [https://github.com/natserract/postfirewood](https://github.com/natserract/postfirewood)
Digital Ocean the Best Cloud hosting?
Tags: digitalocean, deploy, programming
Published: 2021-11-13 07:37:27

## TL;DR
 Use this link and signup to digitalocean and get $100 credits for 60 days: [https://m.do.co/c/270b2fa5ab05](https://m.do.co/c/270b2fa5ab05)

[![DigitalOcean Referral Badge](https://web-platforms.sfo2.digitaloceanspaces.com/WWW/Badge%202.svg)](https://www.digitalocean.com/?refcode=270b2fa5ab05&utm_campaign=Referral_Invite&utm_medium=Referral_Program&utm_source=badge)

## What is Digital Ocean?
<a href="https://m.do.co/c/270b2fa5ab05">Digital Ocean</a> is cloud hosting company that provides completely unmanaged VMs and if you are a developer you will just love it.

The setup is easy as they have plenty of documentation for setting up the server, managing the server etc etc.

I am using Digital Ocean for more than 6 months now and I have not face any performance issue till now. 

P.S: I have hosted my website <a href="https://codewithbishal.com">Code With Bishal</a> on Digital Ocean.

## Ease of use
<a href="https://m.do.co/c/270b2fa5ab05">Digital Ocean</a> offers droplets of various OS such as Ubuntu, Debian, Cent OS, Rocky Linux, FreeBSD, Fedora which you can choose while creating the droplet or VM.

## Pricing
Here comes the most important part of this article, the pricing. Digital Ocean provides a variety of pricing options starting from $5/month. You can choose your droplet based on your usage.

[![DigitalOcean Pricing](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ay5yoibupzrf0vbdmskb.jpg)](https://www.digitalocean.com/?refcode=270b2fa5ab05&utm_campaign=Referral_Invite&utm_medium=Referral_Program&utm_source=badge)

Thanks for reading this article, you can comment down below if you have any questions. If you want to checkout programming blogs you can checkout & <a href="https://codewithbishal.com/signup-user/?next=/">signup</a> to my website <a  href="https://codewithbishal.com">Code With Bishal</a>
My first HacktoberFest
Tags: hacktoberfest, opensource, programming, github
Published: 2021-11-13 07:48:03

**[HacktoberFest 2021](https://hacktoberfest.digitalocean.com)** was my first **Hacktoberfest**. I was learning programming and practising DSA for the past couple of months so I felt it would be great to contribute some of the best solutions that I was able to find out, so that other learners will also be able to learn from it. After all it's all about learning in public.

HactoberFest has got certain rules to be followed to complete the event successfully. We have to make 4 Pull Requests(PR) within the month of October and all the 4 PR's should get successfully merged by the corresponding repo-maintainers.
Thankfully I was able to make 5 PR's and all 5 of them got merged successfully.

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

Contributions can be made even without HacktoberFest. The event is just to promote open-source. 
>
***So why are you waiting start contributing to open-source, don't wait for next HacktoberFest to arrive. Start today, contribute to open-source.***

Happy Coding
My first Hacktoberfest experience 2021 !!!
Tags: hacktoberfest, beginners, opensource, git
Published: 2021-11-13 07:16:55

It was 2020 and everyone is posting their hacktoberfest swags on Linkedin, That's how I came to know about hacktoberfest and open source contribution. I started learning Git & Github and participated in some open-source programs. But I always wanted to participate in hacktoberfest and it comes. 

### The First Pull-Request

The one thing I hate about hacktoberfest is there is a lot of excluded spam repositories. I never knew that. I was so excited that my first pr is merged but in the end, it's an excluded project 😂. So finding the right repository is challenging too.

![PR's](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/br2cs0m6k8snzjtdgwii.png)

### Learnings

Finally, I was able to complete 4+2 Pull requests in 15 days and it took 15 days to get accepted by hacktoberfest. 

I spent most of my extra time contributing and finding good projects. I learnt many things not only coding but also how to write good commit messages 😂
 
The best and fun part is working in the command prompt as I feel like a hacker 😁

### Conclusion

It was a very good start and was fun contributing to open source. Coming to the swags, It is going to be my first swag in my tech life and hactoberfest introduce me to DEV community and I am posting my experience here because of hactoberfest. 

Grateful 🌻

I never wrote a blog before, This is my first blog too. (Please ignore my mistakes🥺🤞) Feedbacks are always welcomed 😊

Bubye!! See you in the next post. Happy November ❤❤
Building a Web3 App - Crypto Gas Tracker
Tags: react, webdev, javascript, web3
Published: 2021-11-13 06:57:59

---
title: Building a Web3 App - Crypto Gas Tracker
published: true
description: Hello fellow humanoids. In this post we will build a Crypto Gas Tracker in React and Next Js. 
tags: React, webdev, javascript, web3
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kd3apnv62jyw8ck6aumt.jpg
---

## What is this post about ?
Hello fellow humanoids. Blockchain has made it way one way or another in your life, if you have already dug deep in rabbit hole then you might know how expensive transaction fees can become on certain chains E.g: Ethereum.
Check out the app here : [Crypto gas tracker](https://crypto-gas-tracker.vercel.app/)

![Crypto Gas tracker](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/en6fkk8lwgbo7nsfj28m.png)

## Content
* Setup NextJS 
* Get address from metamask
* Fetch transaction details
* Calculate Gas Fee

Lets go deep dive into each one and explore how it was implemented.

## Setup NextJS
Next JS is a framework (built on-top of React JS) that allows us to create pre-rendered React websites. Follow this [link](https://nextjs.org/docs/getting-started) to get yourself started on the setup  

## Get address from metamask
For this case we would be using metamask as our wallet. You can choose any as per your preference. Using Web3 apis we can connect to metamask and fetch the current network address of the user.

{% gist https://gist.github.com/vigneshiyergithub/7b063e74c0dc33f2dcb60b25937c33bd %}

## Fetch transaction details
For fetching transactions we would be using [Etherscan API](https://docs.etherscan.io/) to fetch the transaction details for the given address

{% gist https://gist.github.com/vigneshiyergithub/5c10a7c56036a3ae058433ec71afa752 %}

## Calculate Gas Fee
As per the API response the fields *gasUsed* and *gasPrice* are used to get the total eth spent. 
```
gasFee = gasUsed * gasPrice
```
Since **ETHUSD** pair price is very volatile, we would fetch the **ETHUSD** on the date of the transaction using [Coingecko api](https://www.coingecko.com/en/api/documentation)

{% gist https://gist.github.com/vigneshiyergithub/e3172d6332f4567b0338ec7b9bfa7c5b %}

## Conclusion
This app was made as part of learning Web3 apps. There might be bugs and enhancements on the way. Please feel free to provide feedback. 
Stay safe and lend a hand to another :) 

* [Crypto Gas Tracker](https://crypto-gas-tracker.vercel.app/)
* [Vignesh Iyer](https://vigneshiyer.netlify.app/)
Modal Popup using HTML CSS & JavaScript | Modal Popup Tutorial
Tags: html, css, javascript, beginners
Published: 2021-11-13 06:50:18

<b>A Modal Popup window</b> is a child window that requires users to interact with it before they can return to operating the parent application. 

This video walk through you step step about how Create Modal using HTML, CSS and JavaScript. As part of this video
Timeline :
-----------------------------------------------------
01:33 Create Markup using HTML
04:22 Style Modal Popup using CSS
12:10 JavaScript Starts 
16:35 Adding Blur effect

{%youtube MdNUhQOFeBg%}
Measuring mutex, channel and waitGroup performance
Tags: benchmark, go, datarace, concurrency
Published: 2021-11-13 06:45:06

|function|concurrency|
|--|--|
|getText| no |
|getTextWithChannel| yes |
|getTextWithWaitGroup| yes |
|getTextWithMutex| yes|

Source code:
```go
package main

import (
	"fmt"
	"sync"
	"time"
)

func getText() string {
	i := "hi"

	func() {
		i = "hello"
	}()

	return i
}

func getTextWithWaitGroup() string {
	t := "hi"
	var waitgroup sync.WaitGroup
	waitgroup.Add(1)

	go func() {
		t = "hello"
		waitgroup.Done()
	}()

	waitgroup.Wait()
	return t

}

func getTextWithChannel() string {
	t := "hi"
	done := make(chan bool)

	go func() {
		t = "hello"
		done <- true
	}()

	<-done
	return t
}

func getTextWithMutex() string {
	i := text{txt: "hi"}
	go func() {
		i.Set("hello")
	}()
	return i.Get()
}

type text struct {
	txt   string
	mutex sync.Mutex
}

func (t *text) Set(txt string) {
	t.mutex.Lock()
	defer t.mutex.Unlock()
	t.txt = txt
}

func (t *text) Get() string {
	t.mutex.Lock()
	defer t.mutex.Unlock()
	return t.txt
}

```

Benchmark test:
```go
package main

import "testing"

func BenchmarkGetText(b *testing.B) {
	for i := 0; i < b.N; i++ {
		getText()
	}
}

func BenchmarkGetTextWithChannel(b *testing.B) {
	for i := 0; i < b.N; i++ {
		getTextWithChannel()
	}
}

func BenchmarkGetTextWithWaitGroup(b *testing.B) {
	for i := 0; i < b.N; i++ {
		getTextWithWaitGroup()
	}
}

func BenchmarkGetTextWithMutex(b *testing.B) {
	for i := 0; i < b.N; i++ {
		getTextWithMutex()
	}
}

```
Result:
```
Running tool: /usr/local/go/bin/go test -benchmem -run=^$ -coverprofile=/var/folders/43/sjvtz21j0kq56_7vc9nchb400000gq/T/vscode-goeIm86z/go-code-cover -bench . github.com/ynwd/monorepo/Documents/apps/cms/cmd

goos: darwin
goarch: amd64
pkg: github.com/ynwd/monorepo/Documents/apps/cms/cmd
cpu: Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz
BenchmarkGetText-8                	1000000000	         0.5197 ns/op	       0 B/op	       0 allocs/op
BenchmarkGetTextWithChannel-8     	 1826163	       644.4 ns/op	     136 B/op	       3 allocs/op
BenchmarkGetTextWithWaitGroup-8   	 1780219	       670.9 ns/op	      56 B/op	       3 allocs/op
BenchmarkGetTextWithMutex-8       	 3833086	       311.2 ns/op	      40 B/op	       2 allocs/op
PASS
coverage: 100.0% of statements
ok  	github.com/ynwd/monorepo/Documents/apps/cms/cmd	6.332s
```
Video as Text background using CSS
Tags: css, webdev, tutorial, beginners
Published: 2021-11-13 06:39:03

In this article, we will use any video as the background of the text. As you may have already know you cannot use directly video as the text background, so well take the little help of css to make it work. First things first let's see what are building -

![preview](https://i.imgur.com/mp1uZmU.gif)

Now you have seen what we are up to so let's get hands into the code -

**HTML**

```html
<div class="container">
  <video class="bg-video" autoplay loop>
    <source src="https://imgur.com/2cSaKIt.mp4" type="video/mp4" />
  </video>
  <p class="text">AWESOME TEXT</p>
</div>
```

In the HTML code, the `container` class is the main container to hold the video and tex. It has two children one is video and text.

Now let's style it with CSS -

**CSS**

```css
* {
  margin: 0;
  padding: 0;
}

/* Container should be full height and full width */
.container {
  position: relative;
  width: 100vw;
  height: 100vh;
}

.container > .bg-video {
  width: 100%;
  height: 100%;
}

/* background-color and color should be the same as the below otherwise it won't work */
.container > .text {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background-color: #000;
  color: #fff;
  font-weight: 900;
  font-size: 100px;
  font-family: sans-serif;
  /* Mix Blend Mode does the all magic */
  mix-blend-mode: multiply;
  user-select: none;
}
```

### Codepen is Here

<iframe height="600" style="width: 100%;" scrolling="no" title="video-as-text-background" src="https://codepen.io/j471n/embed/WNEgRQe?default-tab=result&theme-id=dark" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/j471n/pen/WNEgRQe">video-as-text-background</a> by Jatin <a href="https://codepen.io/j471n">@j471n</a> on <a href="https://codepen.io">CodePen</a>.
</iframe>


<blockquote>
<p>You can now extend your support by buying me a Coffee.😊👇</p>
</blockquote>
<a href="https://www.buymeacoffee.com/j471n"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" loading="lazy" width="545" height="153"></a>

- [10 CSS Resources that you should bookmark](https://dev.to/j471n/10-css-resources-that-you-should-bookmark-46l6)
- [Fully functional google search with next.js](https://dev.to/j471n/fully-functional-google-clone-with-nextjs-223o)
- [How to share anything from your website by Web Share API](https://dev.to/j471n/how-to-share-anything-from-your-website-by-web-share-api-1h5g)
Blog posts beat Twitter threads
Tags: watercooler
Published: 2021-11-13 05:54:28

Hey everyone! 
Tech Twitter is a goldmine of information, spaces, and super valuable threads about fantastic topics!

However, they get lost.
And they get lost quickly.

The one minute you see a cool thread, the other minute you'/re like, ok, where did I see this fantastic piece of content again.

And it's a shame. Some people choose only ever to publish these nuggets on Twitter.

But it's not sustainable. It only shows up to a select audience the algorithm chooses, and then it kind of dies out.

## Why blogposts rock

On the other hand, blog posts can be used as evergreen material, meaning they live on your website forever.

And people can find them forever.

Heck, some of my most popular articles are still seen by hundreds of people every single day.

Another thing blog posts can have as an advantage is that they provide way more data. You can elaborate more on specific aspects of what you are explaining than you can in the short tweet threads.

## So, stop writing Twitter threads?

No, please don't!

Instead, try this:

Publish on a blog, and if you don't have one [create a free one on Hashnode](https://hashnode.com/@dailydevtips/joinme).
Now turn those articles into short Twitter threads for optimal engagement.

That, to me, is an optional flow, your content will live on your blog forever, and you still get the fantastic nuggets on Twitter that showcase what you learned shortly and concisely.

What are some of your favorite threads?
Let me know on Twitter.

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
OS themed profile
Tags: javascript, linux, mac, windows
Published: 2021-11-13 05:53:38

Hey there, m up with one of my other mini project, making an OS clone for my profile. It has its own UI, CLI, formats etc. I feel this may have endless possibilities for its usage, also may come up with something creative. I would also like if any one can collaborate for the same. Currently it has all the data static, but arrangements have been made to make it dynamic using a backend. So, lets get in touch...

https://yashdatir.github.io/profile-os/
Manual Testing Training in Gurgaon | Manual Testing Course in Gurgaon 
Tags: machinelearning, programming, python
Published: 2021-11-13 05:53:07

Testing is an integral part of any software development life cycle. Testing makes your project more robust and error-free. It can be done through various techniques like-

Manual Testing
Selenium Testing
Cucumber Testing
Microservices Testing
Performance Testing

Here are a few reasons why Software Testing is so important-
Testing secures your data
Error-free projects keep customers happy
Timely fixing of bugs always saves a lot of money

What is right for you? Read here…
For freshers, manual, performance testing, selenium testing learning is recommended. As most of the service-based companies still rely on manual and selenium tools, it is important to build expertise in both the testing tools. Easy to GET JOB.
For professionals already working in testing, cucumber, and microservice testing, API testing is recommended. It is the future of the testing industry.

Placement
Testing job is recession-free. Every company will always be dependent on testers with good updated skills. Don’t worry!! You are choosing the right career

Training Duration
Testing learning will take approx. 3-4 months of the time period. Within a month of course completion, you can get a job.

Faculty
iClass Gyansetu has a good team of faculties working. It’s always advisable to learn testing from trainers working in corporates, they share their industry experience that is very important to crack interviews.

Contact
Phone No- +91-8130799520/ 9999201478
Website- www.gyansetu.in
Data Races di Golang: Fixing with Mutex
Tags: datarace, go, bahasa
Published: 2021-11-13 05:39:05

Sebelumnya, kita telah membahas [data race di golang dan channel](https://dev.to/ynwd/data-races-di-golang-fixing-with-channels-4ign). Sekarang kita akan mencoba memperbaiki data races dengan mutex.

Tapi sebelumnya, kita akan menambahkan sebuah struct `text` serta *getter-setter*-nya dan mengubah fungsi `getText()`, menjadi seperti ini:

```go
package main

import (
	"fmt"
)

func getText() string {
	i := text{txt: "hi"}
	go func() {
		i.Set("hello")
	}()
	return i.Get()
}

type text struct {
	txt string
}

func (t *text) Set(txt string) {
	t.txt = txt
}

func (t *text) Get() string {
	return t.txt
}

func main() {
	fmt.Println(getText())
}
 
```

Kalau dilihat secara sequence diagram, ia mirip dengan [kode sebelumnya](https://dev.to/ynwd/data-races-di-golang-5b90).

- Go routine #1 : `main()`
- Go routine #2 : fungsi di mana `i.Set()` dipanggil.

![data races](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pilulew1v953glnxn5kc.png)

Dan jika kita jalankan dengan `-race`:
```
go run -race main.go  
```

Maka ia juga akan menghasilkan warning:
```
hi
==================
WARNING: DATA RACE
Write at 0x00c000012230 by goroutine 7:
  main.(*text).Set()
      /Users/pro/Documents/apps/cms/cmd/main.go:20 +0x33
  main.getText.func1()
      /Users/pro/Documents/apps/cms/cmd/main.go:10 +0x2e

Previous read at 0x00c000012230 by main goroutine:
  main.(*text).Get()
      /Users/pro/Documents/apps/cms/cmd/main.go:24 +0xda
  main.getText()
      /Users/pro/Documents/apps/cms/cmd/main.go:12 +0xf1
  main.main()
      /Users/pro/Documents/apps/cms/cmd/main.go:28 +0x24

Goroutine 7 (running) created at:
  main.getText()
      /Users/pro/Documents/apps/cms/cmd/main.go:9 +0xd0
  main.main()
      /Users/pro/Documents/apps/cms/cmd/main.go:28 +0x24
==================
Found 1 data race(s)
exit status 66
```
## Solusi dengan mutex

Mutex gunanya untuk mencegah agar sebuah variabel tidak diakses secara bersamaan.

Implementasinya sangat mudah. Kita tinggal menempatkan saja method `Lock` dan `Unlock` di variabel yang terkena data races.

```go
package main

import (
	"fmt"
	"sync"
)

func getText() string {
	i := text{txt: "hi"}
	go func() {
		i.Set("hello")
	}()
	return i.Get()
}

type text struct {
	txt   string
	mutex sync.Mutex
}

func (t *text) Set(txt string) {
	t.mutex.Lock()
	defer t.mutex.Unlock()
	t.txt = txt
}

func (t *text) Get() string {
	t.mutex.Lock()
	defer t.mutex.Unlock()
	return t.txt
}

func main() {
	fmt.Println(getText())
}

```

Jika kita jalankan dengan `-race`, hasilnya:
```
$ go run -race main.go                                                     main*
hi
```
![mutex prevent datarace](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n3ifoilykk9s9cgu9fsf.png)

Yang menjadi pertanyaan: mengapa hasilnya tetap `hi`?

Jawabannya adalah: karena go routine #1 (main), selesainya lebih dulu dan langsung exit. 

Walaupun go routine ke-2 sedang berjalan, karena go routine #1 sudah exit duluan, ya sudah, program selesai. 

![Diagram data races](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r2olhrvpmdfdr49llmme.png)