teleren/devto huggingface dataset:
Git errors: cannot checkout branch - error: pathspec 'branch_name' did not match any file(s) known to git
Tags: git
Published: 2021-11-14 13:40:58

Sometimes after repository checkout you can encounter the error trying to switch branches:
```
git checkout branch_name
error: pathspec 'branch_name' did not match any file(s) known to git
```

To fix that you can remove remote origin and link it again.
First, check the remote origin:
```
git remote -v
origin	git@github.com:company/project_name (fetch)
origin	git@github.com:company/project_name (push)
```

Then remove origin:
```
git remote remove origin
```

And add remote origin again with correct path from your repository (copy from GitHub/GitLab/etc.):
```
git remote add origin git@github.com:company/project_name.git
```

After that run:
```
git pull --ff-only
```

And set upstream to origin branch:
```
git branch --set-upstream-to=origin/current_branch
```

After this you should be able to switch between the branches as usual.

This error message indicates that Git was unable to checkout the specified branch because it does not exist. This can happen for a few different reasons, including the following:

- The branch name is misspelled or mistyped.
- The branch has already been deleted or is no longer available.
- The branch exists in a remote repository, but it has not yet been pulled or fetched to the local repository.

To fix this error, you will need to verify that the branch name is correct and that the branch exists in the local repository. If the branch name is correct and the branch still does not exist, you may need to pull or fetch the branch from the remote repository where it exists.

If the branch has already been deleted or is no longer available, you will need to create a new branch with a different name or switch to a different existing branch.

Overall, this error can be resolved by checking the branch name and ensuring that the branch exists in the local repository. If necessary, you can also try pulling or fetching the branch from the remote repository where it exists.
What I learned - Error makes me a better programmer
Published: 2021-11-14 13:18:09

Note: The boot camp that I'm in is in the Republic of Korea (South Korea), and does not offer courses in overseas (unless you can listen lectures in Korean). So this post is not to promote a particular boot camp or any boot camp.

* I think there are some typos and grammatical error in this post. I'll fix them tomorrow. 

It's been 9 weeks since I started learning programming full-time, and I wanted to share some new epiphany I had recently. That is, making error makes me a better programmer. To be more precise, making error and trying to fix them make me a better programmer. 

I have heard that adding lines of code into existing program is excruciating. It may even bring down a whole system. So one must be very careful and thoughtful when writing code.

What I'm trying to convey is that when you're in learning phase, feel free to make many error. A good thing about programming is that the number of error you can make is almost limitless, given that you're practicing your skills, not actually working on applications currently used by users. 

As someone who came from a domain whose number of trials is often limited, it was hard for me to try out code I've written at first. I had to force myself to run things, whether I felt sure about my code or not. 

I realized the more I make error, the more I learned how to make things work. 

For example, when I was learning how to use AWS VPC, RDS, lambda function, and NAT gateway, I had to re-create lambda functions a number of times because of some error. While it felt like I was wasting my time, since it could have been done at first try, my understanding of the relationship between the VPC, RDS, NAT gateway and lambda function deepened, as my number of tries increased. 

Although it's shameful, my initial goal wasn't to understand the VPC and so on (it seemed daunting at first), but to get through the assignment I was given. Unintentionally, because of the error I encountered, I understood how virtual private clouds work. 

I haven't worked on a real production yet, so I can only speak for those who just began to learn programming. And for those who just began to code, don't be afraid to make error. You'll remember and learn more from code that didn't work at first, rather than code that worked the first time.
Best vue 3.x Map Component vue3-openlayers
Tags: javascript, vue
Published: 2021-11-14 13:13:16

vue3-openlayers is components library that brings the powerful OpenLayers API to the Vue3 reactive world. It can display maps with tiled, raster or vector layers loaded from different sources.

github: https://github.com/MelihAltintas/vue3-openlayers
docs and demo: https://vue3openlayers.netlify.app/
Image SEO for Shopify and WordPress
Tags: seo, shopify, wordpress
Published: 2021-11-14 13:06:25


IMAGE Search Engine Optimization Automation – WordPress and Shopify.

Ill write img alt and img title programmatically for  200+ pages

I help with any CMS that offers access to template files (theme) and supports JavaScript too.

More than 20% of Google Organic Traffic comes from image searches

Image SEO optimization should be included in every good strategy! Avoiding keyword stuffing and optimizing your images for SEO can literally skyrocket your organic traffic.

### What You Get with this Gig

- Image alt tag
- Image title tag

### Why Image SEO?
- Accessible
- Increase traffic
- Increase Sales
- How do I do it?

I use JavaScript to update image alt and image title only if img alt or img title is/are blank. I use image file name to make every image has unique alt and title on every page/article/product/collection page.


## img alt and img title tags
[Image SEO – img alt and img title tags](https://tubemint.com/product/img-alt-title-tags/)
How to preserve the data types when writing pandas DataFrame to Excel?
Tags: help, python, beginners, programming
Published: 2021-11-14 12:43:43

I'm having an issue with how pandas could not preserve the data types of my table after writing process.

This is my table in which I read the data from SQL Server with my query.

![Initial](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8x5mohjvnqgucnki1b4r.png)

And I simply code this line to write a new one hoping that it will yield the same result when I read it later.

```python
df.to_excel('new2.xlsx', index=False, engine='xlsxwriter')
df2 = pd.read_excel('new2.xlsx')
```

And I ended up with this.

![After writing process](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3xyroewtguy5wg23yr2i.png)

I'm having a hard time finding the right keywords and solutions on Stack Overflow. I've already read the pandas documentation but nothing covers my case.

[Let's be friend 👋](https://beacons.ai/ranggakd)
Debug "Resource not accessible by integration" error when working with github's graphql endpoint
Tags: github, graphql
Published: 2021-11-14 11:12:41

When working with [Github's graphql explorer](https://docs.github.com/en/graphql/overview/explorer), you will find that all your queries work seamlessly - but when you try to run the same queries in your application, you could run into permission issues.

While the explorer requests a very wide range of permissions, your application would probably be restrictive in the type of permissions it requests from your users to execute the graphql queries against their account.

In such a scenario, debugging which permission is needed could be difficult - here's an example query and the error thrown for that query to github's graphql endpoint:

The query:

```graphql
{
  user(login: "callmekatootie") {
    repositories(first: 10) {
      nodes {
        collaborators(first: 10) {
          totalCount
        }
      }
    }
  }
}
```

and the error:
```json
{
  "type": "FORBIDDEN",
  "path": [
      "user",
      "repositories",
      "nodes",
      0,
      "collaborators",
      "totalCount"
  ],
  "extensions": {
      "saml_failure": false
  },
  "locations": [
      {
          "line": 4,
          "column": 9
      }
  ],
  "message": "Resource not accessible by integration"
}
```

One gets the error `Resource not accessible by integration`. When one google's this error, there aren't quality results that can help you out.

This error basically talks about a permission issue. When working with Github apps, you may not have set the necessary permission to access the resource you need. Hence the `Resource not accessible by integration` error.

So - how would one go about finding out which permission is needed in this case?

The graphql documentation does not talk about this - weirdly, one first needs to instead go to their REST api documentation. In our case, since we are interested in the count of the collaborators on a repository, we would look for the REST api that fetches the collaborators for a repository. That would be the [list repository collaborators endpoint](https://docs.github.com/en/rest/reference/repos#list-repository-collaborators):

```url
GET /repos/{owner}/{repo}/collaborators
```

Now that we know the endpoint path, we then head over to the [permissions required for Github Apps](https://docs.github.com/en/rest/reference/permissions-required-for-github-apps) page and proceed to locate this endpoint (Do a `Ctrl / Cmd + F` in your browser and search for the endpoint you need).

We find the above endpoint under the `Collaborators` permission list:

![Collaborators Permission List](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aacw2qrb6m8wni79ttxg.png)

which, if you scroll up, falls under the **Metadata** permissions. Boom! There you go! Head over to your Github App and under Repository permissions, provide read-only access for the Metadata permissions:

![Github App Repository Permissions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/isyhtiuarnqmdozrm4zn.png)

That should resolve your "Resource not accessible by integration" issue.
Automatic release new version, and notify your followers about it, using Github workflows
Tags: actionshackathon21, github, telegram, javascript
Published: 2021-11-14 11:06:22

### Automatic release new version on tag workflow
Managing an open source project really takes a lot of efforts. There are many repeated tasks which wastes your time everywhere: Testing, Building, Releasing, ... and sometimes, you'd also want to update your followers with the new released version.

Fortunately, Github actions & workflows came to rescue! With tons of available actions, we can automate many repeated & boring tasks, and keep our time to focus on code.

Today I'd like to share with you a GitHub worklow to build and release your application into a Github release, then notify your followers about this new release.

![Workflow result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f4ussvgjdduko0hjefgm.png)

![Telegram announcement](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fp01lnxv08xav8jj42ho.png)

With this worklow, we automate all the testing, building steps and releasing steps, everytime you push a new release tag (example: v0.0.1, v0.0.2,...). Then send a new message about the newly released version to a Telegram channel.


### Submission Category: DIY Deployments

### Yaml File or Link to Code

{% github https://github.com/ActionsHackathon21/release-on-tag %}

- README: [https://github.com/ActionsHackathon21/release-on-tag/blob/main/README.md](https://github.com/ActionsHackathon21/release-on-tag/blob/main/README.md)
- Workflow file: [https://github.com/ActionsHackathon21/release-on-tag/blob/main/.github/workflows/release-on-tag.yml](https://github.com/ActionsHackathon21/release-on-tag/blob/main/.github/workflows/release-on-tag.yml)
- License: [https://github.com/ActionsHackathon21/release-on-tag/blob/main/COPYING](https://github.com/ActionsHackathon21/release-on-tag/blob/main/COPYING)

In the repository, there is a sample NextJS project, however you can change a bit on the workflow file to match your project.

## Configurations
- You can config the release tag prefix, with `on.push.tags` key.
- To send announcement to Telegram, you need to configure the workflow using following steps:
    - Talk with Telegram's [@BotFather](https://t.me/BotFather) to create a new bot if you don't have one. We will use this bot to send messages to the Telegram channel. He will give you the **token access the HTTP API**.
    - On your Telegram channel, grant admin permissions to the bot.
    - Set the `TELEGRAM_CHANNEL` variable.
    - Add the `TELEGRAM_BOT_TOKEN` secret (using the token access above) into your repository secret (**Settings** > **Secrets** > **New repository secret**)

## Pre-release
There is also a pre-release workflow ([prerelease-on-push.yml](https://github.com/ActionsHackathon21/release-on-tag/blob/main/.github/workflows/prerelease-on-push.yml)), which will build and create a pre-release version of your application, on every push to `main` branch.

![Pre-release version](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bp6kb7z1zr6j88dluvye.png)
Negociação salarial para devs - dicas e truques
Tags: video, career
Published: 2022-02-16 21:41:37

---
title: Negociação salarial para devs - dicas e truques
published: true
date: 2021-11-14 11:03:48 UTC
tags: video,career
canonical_url: https://blog.lsantos.dev/negociacao-salarial-para-devs-o-que-eu-queria-saber/
cover_image: https://raw.githubusercontent.com/khaosdoctor/blog-assets/master/images/2021/11/A2D6FBC6-71E5-4D6E-93AD-2850B366FE4B.jpeg
---

{% embed https://www.youtube.com/watch?v=svOxx46innw %}

Fala pessoal! Saiu mais um vídeo la no canal!

Dessa vez a gente vai trocar uma ideia mais aprofundada sobre carreira e falar de negociação salarial para devs! Nesse vídeo vou dar algumas dicas que eu gostaria de ter recebido quando eu comecei a minha carreira.

Esse artigo é baseado em um outro artigo que eu escrevi há um tempo, além dele, eu também estou colocando alguns outros recursos que podem ajudar vocês a encontrar seu emprego ideal!

## Links comentados

- [Artigo que escrevi sobre negociação salarial](https://dev.to/khaosdoctor/basicos-da-negociacao-salarial-para-devs-no-brasil-100l)
- [Planilha de comparação salarial para PJ e CLT](https://docs.google.com/spreadsheets/d/10serfJYrV6MTVvUlEjaamo4bhVWz5nEONVC-xxikEj8/edit?usp=sharing)

> A planilha está no modo de leitura, se você quiser usá-la é só fazer uma cópia para seu drive pessoal. Além disso, ela é apenas uma base, se você tiver dicas e melhorias para ela, coloca la nos comentários do video ou aqui no blog (não esquece de me marcar nas [redes sociais](http://lsantos.dev)) para ajudar mais pessoas que forem usar!
A cool way of Coloring in UI Design
Tags: design, programming, uiweekly, ux
Published: 2021-11-14 10:56:16

Well, applying color to our interfaces can become a very complicated task. In this post, I am sharing some quick tips to learn how you can make an easy (beautifully) by applying the 60-30-10 technique.

_Let's Start..._

## Step 1: Set your main color!
Create a new shape and select the color of your preference. It can be the main color of your product. Here, let's say, Hex Color Value: #4864E6.

## Step 2: Let's set a secondary!
Duplicate the main color and change mode to HSB in your picker. Wondering how? Easy. Set the S (Saturation) value between 5-10 points and B (Brightness) value between 95-100 points and set.
So if your primary color's HSB values are 230:69:90, let's make 'em 230:5:100.

![Step 2's visual representation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0fexfaujvzuq9dabu4js.png) 

## Step 3: Now let's set an accent!
Duplicate again the main color. Increase or decrease the H (Hue) value by 30-40 points and increase the B (Brightness) value by 5-10 points. So if your primary color's HSB Values are 230:69:90m let's make 'em 190:69:95.

![Step 3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bf4hwnnivrk1prwn4vo7.png) 

## Step 4: Now we have a cool three-color scheme!
Let's apply them based on the 60/30.10 rule (from interior design), distribute the percentage for each color. So, if we talk in numbers, you can distribute the colors in the following distributions:
* Main/Primary Color: 60%
* Secondary Color: 30%
* Accent: 10%

![Step 4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6eoqypx26ht47cx9g8c4.png) 

## Step 5: Distribute the colors in your layout. Here, I am sharing the almost best way to distribute these colors among your layout elements. You can refer to the following few lines:
* 60% of your primary/main color: Backgrounds, main elements
* 30% of your secondary color: For 2nd level elements, i.e. texts, icons, etc.
* 10% of your accent color: For CTAs (Call To Actions) and access touches.

![Step 5](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5k38v6xm4hqglw1lpr5v.png) 

## Step 6: Now since you have a perfect balance, you can play around with the variations using the same colors. And believe me, it will work perfectly fine. 😍😍😍

![Step 6](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8hvm1tre3rliv5yh9813.png) 

With this scheme, you can create analogous color palettes, along with a tint of greater harmony. This way your designs will look soft and fresh (and without horrible colors)
WebPack Loader vs Plugin
Tags: webpack, javascript, es6, devtool
Published: 2021-11-14 10:54:46

---
title: WebPack Loader vs Plugin
published: true
description: The purpose of loader and plugin.
tags: webpack, javascript, es6, devtool
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d4pusxz9gj5uf5cmx07r.jpg
---

## WebPack : Loader VS Plugin
- Though there are couple of bundler available for javascript, Webpack steals the heart of most javascript developers.
- The reason is obviously due to its vast ecosystem of loaders and plugins, which extend its core bundling functionality.
- Even senior developers get confused between the purpose of loader and plugin. **This article is for you if you dont want to be one of them.**

[CLICK HERE TO READ MORE](https://kamesh.xyz/posts/webpack-plugin-vs-loader/)
GitHub Actions Hackathon 2021 - Reusable workflows to automate tokens
Tags: actionshackathon21, githubactions, devsecops, github
Published: 2021-11-14 10:48:59

---
title: GitHub Actions Hackathon 2021 - Reusable workflows to automate tokens
published: true
description: GitHub Actions Hackathon 2021 Submission 02
tags: 'actionshackathon21, githubactions, DevSecOps, github'
cover_image: ''
canonical_url: null
id: 897750
series: Hackathons
date: '2021-11-14T10:48:59Z'
---

## :bulb: Automate Azure Service Bus SAS tokens with reusable GitHub Action Workflows

I decided to submit a second github Actions hack for this years **ActionsHackathon21** contest.  
In my post I demonstrate how we can implement and automate/generate short lived temporary Azure Service bus SAS tokens using github actions. The post also covers a new github actions workflow feature announced at github universe 2021 recently, the ability to create reusable/callable GitHub workflows as a job. In my demo I use such a **reusable** workflow to handle temporary SAS token generation.

Here is the link to the post in which my github actions are documented and explained, enjoy!

{% link <https://dev.to/pwd9000/automate-azure-service-bus-sas-tokens-with-github-37ok> %}

## Submission Category: Wacky Wildcards

😳💥🔥 I know... ITSec Ops workflows are totally WACKY! 🔥💥😳

## Yaml File or Link to Code

{% github <https://github.com/Pwd9000-ML/Azure-Service-Bus-SAS-Management> %}

- [README](https://github.com/Pwd9000-ML/Azure-Service-Bus-SAS-Management/blob/master/README.md)
- [WORKFLOWS](https://github.com/Pwd9000-ML/Azure-Service-Bus-SAS-Management/tree/master/.github/workflows)
- [LICENSE](https://github.com/Pwd9000-ML/Azure-Service-Bus-SAS-Management/blob/master/LICENSE)

### _Author_

Like, share, follow me on: :octopus: [GitHub](https://github.com/Pwd9000-ML) | :penguin: [Twitter](https://twitter.com/pwd9000) | :space_invader: [LinkedIn](https://www.linkedin.com/in/marcel-l-61b0a96b/)

{% user pwd9000 %}

<a href="https://www.buymeacoffee.com/pwd9000"><img src="https://img.buymeacoffee.com/button-api/?text=Buy me a coffee&emoji=&slug=pwd9000&button_colour=FFDD00&font_colour=000000&font_family=Cookie&outline_colour=000000&coffee_colour=ffffff"></a>
Next.JS + Tailwind CSS Boilerplate for Marketplace / commerce 
Tags: nextjs, tailwindcss, react, javascript
Published: 2021-11-14 10:39:02

Let's make it clear, it's more than a boilerplate :) As this is the same kit used for few our clients as well. This code is a growing codebase, so every few days you will get new features update. 

You can use this for booking based event marketplaces. And also commenting out the SELLER/SUPPLY side by using ONLY as a B2C Event booking site. 


## Highlights
- [Content served from Tradly Headless API for marketplace/commerce](https://tradly.app)
- NextJS latest Version 12
- Tailwind, Mobile Responsive
- SEO Packed
- One click deployment for Vercel and Netlify
- Due to [Tradly JS sdk](https://www.npmjs.com/package/tradly) used, design are properly componentized. 
- Production Ready 

Next Tasks
- Lighthouse Performance improvement
- Rich schema implementation for product pages, Reviews
- Different layouts to choose
Design pattern in golang: builder
Tags: bahasa, go, designpattern, creational
Published: 2021-11-14 10:25:42

*Builder pattern* dipakai untuk membuat sebuah *instance* dari sebuah `struct` -- beserta dengan semua propertinya.

Perhatikan `struct` berikut:
```go
package main

type User struct {
	name        string
	email       string
	address     string
	dateOfBirth DateOfBirth
}
```

```go
package main

type DateOfBirth struct {
	year  int
	month int
	day   int
}
```
## Implementasi pattern

```go
package main

import (
	"fmt"
	"strconv"
	"strings"
)

func newUserBuilder() *User {
	return &User{}
}

func (u *User) Build() (User, error) {
	return User{
		name:        u.name,
		email:       u.email,
		address:     u.address,
		dateOfBirth: u.dateOfBirth,
	}, nil
}

func (u *User) SetName(name string) {
	u.name = name
}

func (u *User) SetEmail(email string) {
	u.email = email
}

func (u *User) SetAddress(address string) {
	u.address = address
}

func (u *User) SetDateOfBirth(dob string) {
	splitted := strings.Split(dob, "/")

	day, err := strconv.Atoi(splitted[0])
	if err != nil {
		u.dateOfBirth = DateOfBirth{}
	}

	month, err := strconv.Atoi(splitted[1])
	if err != nil {
		u.dateOfBirth = DateOfBirth{}
	}

	year, err := strconv.Atoi(splitted[2])
	if err != nil {
		u.dateOfBirth = DateOfBirth{}
	}

	u.dateOfBirth = DateOfBirth{day, month, year}
}

```
Bahkan, kalau mau, kamu dapat menambahkan validasi pada setiap variabel yang akan menjadi input -- sebelum ia dipakai oleh setiap properti dari sebuah `struct`.


## Cara penggunaan
```go
package main

func main() {
	builder := newUserBuilder()
	builder.SetName("agus")
	builder.SetAddress("cirebon")
	builder.SetEmail("agus@email.com")
	builder.SetDateOfBirth("01/01/2020")
	user, err := builder.Build()
	if err != nil {
		fmt.Println(err)
		return
	}
	fmt.Println(user)
}
```
## Kesimpulan
Dengan `builder pattern` kita dapat membuat instance dari sebuah struct dan menambahkan validasi pada variabel-variabel yang akan menjadi *input*-nya.

## Source code

[https://play.golang.org/p/7nBzfPFT8ix](https://play.golang.org/p/7nBzfPFT8ix)