teleren/devto huggingface dataset:
git cherry-pick: How to pick commit(s) from other branches?
Tags: git, devops, beginners
Published: 2022-03-12 10:10:02

We tag a commit in `main` and push it to the remote, this is what our team does when deploying.
Recently, something went wrong with our service.

|Branch|main|dev|
|------|----|---|
|     ^| A1 | C1|
|    ~2| A2 | C2|
|    ~3| A3 (tagged as v0.1 and deployed) | C3|
|    ~4| A4 | A1|
|    ~5| A5 | A2|

I will use this to explain.
`A3` is a stable version. we tagged `A3` with `v0.1` and deployed it. Within a few hours we found that `A4` had some problems. I recreated a feature of `A4` in `C1` and `C2` commits. I had to remove `A4` from the server and add `C1` and `C2` commits.

I searched online how to solve this problem and I had found 
 the command `cherry-pick`.

```properties
git cherry-pick [commit]
```

I will produce the situation and show you how to fix it step by step.

---

**Git Log**

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

1\. Make a new branch named 'bug-fix'

```properties
git checkout -b bug-fix
```

![make_branch](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dzhxp7wtul6mqnkcikky.png)
 
 
2\. Reset with an option `--hard` to A5

```properties
git reset --hard [commit]
```
![reset_branch](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zri6jmcosrcglpq29hx1.png)


3\. Pick commits

```properties
git cherry-pick [...commits]
```

![cherry-pick-example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4k4u141i2zxmqbhl5uen.png)
 
Now, `A4` has gone and `C1`, `C2` are there.

---

It was one of usages of `cherry-pick`, the command has more options([documentation](https://git-scm.com/docs/git-cherry-pick)). I fetched commits from other branches in this post however it's also possible with the same branch.
I hope it will be helpful for someone.
Good coding!
Best DevOps Blogs
Tags: devops
Published: 2022-03-12 10:06:56

Below is the list of top DevOps blogs to get more insights into key DevOps trends.

**1. Dzone DevOps**

The  [Dzone DevOps](https://dzone.com/devops-tutorials-tools-news) group contains great content articles and weblog articles from various business specialists and weblogs. In this area, you could find theoretical in order to practical implementations associated with tools and methods from different business verticals. Moreover, brand new articles and weblog posts are additional each day to maintain you updated along with the industry styles.

**2. Devops.com**

[Devops.com](https://devops.com/) is totally about DevOps. That publishes news on strategies, insights, rules, case studies, situations, and much more, which would interest every DevOps fan. Also, it is somewhat more focused on the enterprise and business side of DevOps.

**3.DevOps on Quora**

[Quora](https://www.quora.com/topic/DevOps) is another exciting location to discuss and even get more data on DevOps. In this article you can inquire from questions and even answer other people’s queries.

**4. Medium DevOps Publications**

Throughout [medium devops category](https://medium.com/search/publications?q=devops), you can bunch of articles via medium publications similar to DevOps. Nearly all of the articles or blog posts are from typically the DevOps community together with organizations concentrating on DevOps methodologies.

**5. DevOps Sub-Reddit**

The [DevOps page in Reddit](https://www.reddit.com/r/devops/)  lists information and happenings in the DevOps website. It also provides pure tech courses on DevOps tools for developers and sysadmins to follow DevOps culture.

In Reddit platform , you have to be really careful about what you ask and what your post is about.

The list ends here. I really hope these resources assist you with understanding  DevOps, evolving methodologies, in addition to tools around this.
How to Create Charts in ReactJS
Tags: react, reactnative, charts, beginners
Published: 2022-03-12 09:57:23

Chart is a graphical representation of data. Charts allows us to analyze, understand and predict the data based on values and outcomes on the chart. In this tutorial we will learn how to create charts in ReactJS.

## We can create different types of Charts in ReactJS:

- PieChart
- TreeMap
- SankeyDiagram
- XY charts
- AreaBarChart
- AreaChart
- AreaHeatmap
- BarChart
- ColorHeatmap
- FunnelChart
- Histogram
- LineChart
- MarkerLineChart
- RangeBarChart
- ScatterPlot

## Here we will use the ReactoChart
ReactoChart is a library of React components for creating charts and graphs in ReactJS. We can use these Components to create line chart, bar chart, area chart, heat maps, scatterplot, histogram, pie chart, sankey diagram, and tree map. Here is an [original author of ReactoChart](https://github.com/spotify/reactochart) and this [docs website](https://spotify.github.io/reactochart/docs/build/#/quick-start).

## Quick Start
First Install ReactoChart using npm
```ssh
npm install --save reactochart
```

## Import the Chart Components
```typescript
import XYPlot from 'reactochart/XYPlot';
import XAxis from 'reactochart/XAxis';
import YAxis from 'reactochart/YAxis';
import LineChart from 'reactochart/LineChart';
```
If you prefer, you can import all of Reactochart at once, though this may hinder some optimizations, such as webpack tree-shaking:
```typescript
import {XYPlot, XAxis, YAxis, LineChart} from 'reactochart';
// or 
import * as Reactochart from 'reactochart';
```

## Create Line Chart in ReactJS
```typescript
import XYPlot from 'reactochart/XYPlot';
import XAxis from 'reactochart/XAxis';
import YAxis from 'reactochart/YAxis';
import LineChart from 'reactochart/LineChart';
import 'reactochart/styles.css';

const MyFirstLineChart = (props) => (
  <XYPlot>
    <XAxis title="Phase" />
    <YAxis title="Intensity" />
    <LineChart
      data={Array(100)
        .fill()
        .map((e, i) => i + 1)}
      x={d => d}
      y={d => Math.sin(d * 0.1)}
    />
  </XYPlot>
);
```
Similarly We can create different types of Charts or Graphs in ReactJS using ReactoChart. Different Types of ReactJS Charts Examples are given on their website, [click here](https://spotify.github.io/reactochart/docs/build/#/xy-plots).

---
Please like share and give positive feedback to motivate me to write more.

For more tutorials [visit my website](https://www.w3courses.org/tutorials/).

Thanks:)
Happy Coding:)
How to appear your custom hostname in iTerm + p10k + oh-my-zsh
Published: 2022-03-12 09:12:55

Recently, I re-learned about VIM, So I want to customize my terminal.
 
Actually, I already used a terminal `iTerm` with `Oh-My-Zsh`
But when I installed and set `powerlevel10k`, and something occurred.


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

HostName is missing.... :(

So I decided to bring missing hostname again.

## Step 1 : Edit `~/.p10k.zsh`
I used Vim for edit.
You can easily find `POWERLEVEL9K_LEFT_PROMPT_ELEMENTS`
Just insert `host` in `POWERLEVEL9K_LEFT_PROMPT_ELEMENTS` where you want.

```zsh
vim ~/.p10k.zsh

# in .p10k.zsh
typeset -g POWERLEVEL9K_LEFT_PROMPT_ELEMENTS=(
    os_icon                 # os identifier
    host                    # hostname
    dir                     # current directory
    vcs                     # git status
    prompt_char             # prompt symbol
  )

```

## Step2 : customize hostname.
#### Note : Customize hostname may cause unexpected side effects.

```zsh
scutil --set HostName
HostName: #input hostname you want
```

## Step3 : Confirm result
```zsh
source ~/.p10k.zsh
```

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

I successfully done.


I think is silly problem, but It really bother me..
I hope it will help people who wander like me.

Thank you for reading.
Build an INSANELY easy Vue/Nuxt 3 UI library published on NPM in 3 minutes 🚀
Tags: nuxt3, nuxt, ui
Published: 2022-03-12 09:52:38

---
title: Build an INSANELY easy Vue/Nuxt 3 UI library published on NPM in 3 minutes 🚀
published: true
description: Example of how easy it is to build and distribute Nuxt 3 components that could potentially be full-fledged UI libraries!
tags: Nuxt3, Nuxtjs, UI
cover_image: https://img.youtube.com/vi/5BcJ2WUTltU/maxresdefault.jpg
---
{% embed https://www.youtube.com/watch?v=5BcJ2WUTltU %}
Slightly beyond the basics
Tags: beginners, webdev, career
Published: 2022-03-12 09:35:28

## WebDev content in 2022 is skewed for beginners. 

Once you slightly understand the basics of HTML, CSS, Javascript or even Python, it hits you how much of the web content is designed for beginners.
Almost all new web development YouTube videos are targeted to beginners. 
Could it be, that, beginners are the majority of web development and computer programming content consumers? If that hypothesis is true, what are experienced developers doing apart from creating content for beginners? 
What cool thing should people just beyond the basics be learning?
Detox LinkedIn Feed :)
Tags: javascript, tutorial
Published: 2022-03-12 09:23:30

Problem
  wen you add new connection in LinkedIn you automatically start follow person (nobody asks if you want to). And then you have feed full of unwanted posts.

  It's not comfortable to go and unfollow each time and there is no button unfollow all.

Solution

1. open page where you have a list of contacts you follow ([here](https://www.linkedin.com/feed/following/))

2. open browser developer tools console and paste below script there :)

```
(() => {
    const selectors = {
        followingButton: "button.is-following",
        followName: ".follows-recommendation-card__name",
    };

    const waitAround = (timeout = 100) =>
        new Promise((resolve) => {
            const randomTimeout =
                Math.random() * (timeout - timeout / 2) + timeout / 2;

            setTimeout(resolve, randomTimeout);
        });

    const getAllFollowingButtons = () =>
        Array.from(document.querySelectorAll(selectors.followingButton));

    const getPendingUnfollowAll = async () => {
        const buttons = getAllFollowingButtons();

        for (const button of buttons) {
            const name = button.parentElement.querySelector(
                selectors.followName
            ).innerText;

            console.log(`Unfollow ${name}`);

            window.scrollTo(0, button.offsetTop - 260);

            button.click();
            await waitAround(300);
        }
    };

    const start = async () => {
        await getPendingUnfollowAll();

        window.scrollTo(0, document.body.scrollHeight);

        await waitAround(500);

        const buttons = getAllFollowingButtons();

        if (buttons.length) {
            await start();
        }
    };

    start().then(() => {
        console.log("unfollow all done !");
    });
})();
```

hit enter and enjoy clean feed line :)
Git Basic Commands
Published: 2022-03-12 09:15:30

- Clear the terminal

```javascript
clear
```
---
- Present directory

```javascript
pwd
```
---
- Lists the current directory contents

```javascript
ls
```
---
- Change directory

```javascript
cd file/folderName
``` 
> cd er por, file/folderName ordhek likhe tab press korlei baki ta refer korbe

---

- Image add on readme.md file

`LEFT TRIANGLE pattern image`
```javascript
<p align='center'>
  <img src="./images/leftTriangle.PNG" width="500" title="LEFT TRIANGLE pattern">
</p>
``` 
---
Create generic methods in TypeScript
Tags: typescript, webdev, tutorial, javascript
Published: 2022-03-12 08:58:22

Have you ever have to create methods where the return type is not predefined or is based on some input we give.
Consider the below:

```typescript
  public getFirstItem(items: string[]): string {
    return items[0];
  }

  public logicX(): void {
    const item = this.getFirstItem(['alpha', 'beta', 'gama']);
    console.log(item) // 'alpha';
  }
```
The above will return a string which will be assigned to items variable which is string.

What if you want to get first data of number array instead of string array. Like :

```typescript
  public logicY(): void {
    const item = this.getFirstItem([1,2,3,4,5]);
    console.log(item);
  }
// You will get the below error
Type 'number' is not assignable to type 'string'.
```
So what to do then.
The initial logic is to use union `|` symbol like:

```typescript
public getFirstItem(items: string[] | number[]): string|number {
    return items[0];
  }
```
This might solve your problem now but what if I want the first element from Boolean array. There will be again a modification needed to accommodate the Boolean parameter.
```typescript
public getFirstItem(items: string[] | number[] | boolean[]): string|number|boolean {
    return items[0];
  }
```
And the logic will go on and on 💤💤

Now there comes the generic method creation 😊. It will help us to decide the datatype while calling the method.
```typescript
  public getFirstItem<T>(items: Array<T>): T {
    return items[0];
  }

  public logicX(): void {
    const item = this.getFirstItem(['alpha', 'beta', 'gama']);
    console.log(item) // 'alpha';
  }

  public logicY(): void {
    const item = this.getFirstItem([1,2,3,4,5]);
    console.log(item); // 1
  }

OR 
  public logicX(): void {
    const item = this.getFirstItem<string>(['alpha', 'beta', 'gama']);
    console.log(item) // 'alpha';
  }

  public logicY(): void {
    const item = this.getFirstItem<number>([1,2,3,4,5]);
    console.log(item); // 1
  }
```

So now you can call the method and the Type will be automatically added or you can add the type whenever you are calling the method.


You can more than one Type and get the result like below: 

```typescript
  public getStringFromTwoArray<T, T1>(item1: Array<T>, item2: Array<T1>): string {
    return item1[0] + ' ' + item2[0];
  }
```
Now in the above there will be to array whose datatype will be defined while calling.

---

Get to know about different array types
{% link https://dev.to/rahulrajrd/array-vs-type-vs-type-in-typescript-5g1h %}

If you like the post follow me for more
{% user rahulrajrd%}
replace the last comma to period in string
Tags: javascript, beginners
Published: 2022-03-12 08:37:11

To slightly modify a string, like replacing its first character to capital or last character from comma to period, there are two ways to achieve.

### use [`replace()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace) with regex
There are two things worth notice:
- without using regular expression, only the first-matched substring will be replaced.
- `replace()` function returns a new string and left the old string unchanged.

```javascript
// replace the last comma to period
let names = "anne, ben, carol, dennis, evans,";
names = names.replace(/,$/, '.');
// anne, ben, carol, dennis, evans.
```

### use [`slice()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/slice) and append

```javascript
// replace the last comma to period
let names = "anne, ben, carol, dennis, evans,";
names = names.slice(0, -1) + '.';
// anne, ben, carol, dennis, evans.
```

`slice(indexStart, indexEnd)` and [`substring(indexStart, indexEnd)`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/substring) are almost identical with some slight differences:
- `indexEnd` is optional in both functions, if not specified it would extract to the end of the string. Otherwise, it is the first character to *exclude*.
- If value is less than 0 or `NaN`, `substring()` would consider 0. `slice()` would consider `NaN` 0, and negative values count backwards from the end.
- If value is greater than `stringName.length`, it would consider `stringName.length` in both functions.
- `substring()` swap the arguements if `indexStart` is greater than `indexEnd`, `slice()` returns an empty string.
Semantic-UI The Crutch I Need To Style
Published: 2022-03-09 15:18:52

Semantic-Ui is a css framework built in 2013 by Jack Lukic. Jack was able to create this framework by utilizing HTML and Javascript allowing for easy integration for your projects. Semantic-UI can be used alongside other frameworks and libraries such as React, Meteor, Ember, Angular. Semantic works well with almost every popular internet bowser including Safari IOS, Chrome for Android, and Microsoft edge to name a few. 

## A Huge Toolbox
Semantic-UI's main appeal (at least to me) is that it comes with a plethora of tools a developer can utilize. The framework uses html style of coding which makes it easy to follow and understand. Some of the tools Semantic-Ui comes with are a button element, input element, a card elements, and etc... Some of these may sound familiar which they are! These are similar to html tags but Semantic-UI comes with a basic templet for each element and component that can be customized with ease. 

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

Semantic allows the developer to write more human friendly code as it becomes easier to read. It also allows the dev to write less code. As mentioned before Semantic comes with a card component as well. The card component allows the dev to insert a card on the page that can hold info, images, buttons, and allows for customization. Semantic-Ui comes with a plethora of these tools that makes styling your projects frontend even easier.

## Picking Semantic Over Other Frameworks
Semantic-Ui isn't the most popular frontend framework out there. The most popular right is Bootstrap. Although Bootstrap and Semantic-Ui do share some similarities like both allow the dev to customize their frontend and both have a lot of theme options. Although these frameworks have some similarities the differences shine brighter for example Bootstrap is even more compatible going as far back as IE 7, Bootstrap has a huge activity community as Semantic-UI is relatively small, and  Semantic-UI is easier to get started in. Both have their pros and cons and really comes down to what the dev is looking for. 

Semantic-UI has allowed me to really explore the possibilities of styling. Semantic-UI helped me reach new heights of web designing as the easy implementation did not hold me back.
FREE HTML Template sites for Developers
Tags: html, career, beginners, productivity
Published: 2022-03-12 08:17:15

## [HTML5UP](https://html5up.net/)

HTML5 UP is a collection of amazing free templates, that are fully responsive, built on intelligent html5 and css3, and are fully customizable.


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

---

## [Graygrids](https://graygrids.com/)

Biggest Source of Free HTML Website Templates & Bootstrap Themes for Business, Landing Page, Admin Dashboards, and Resume & Portfolio Websites. 400+ Ready to Use Templates and Themes to Ease Your Web Development Process.



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

---

## [Nicepage](https://nicepage.com/)

Nicepage is a free website-building tool that requires no coding skills. This includes the WordPress, Mac OS, web app infrastructure, With a mobile-friendly interface and a responsive design, the websites look great on all modern devices.



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

---

## [Free-CSS](https://www.free-css.com/)

It provides 3305 free website templates,  all templates are free. All of the templates have been built using CSS & HTML.



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

---

## [Templatemo](https://templatemo.com/)

Download 565+ free HTML CSS website templates that included 140+ responsive Bootstrap themes from templatemo and use them for your sites.



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lsztmcxkhtynysfzya7c.png)
When programming books are wrong
Tags: beginners, programming, books
Published: 2022-03-12 08:15:06

***- I read a programming book on your [list](https://www.programmingbooks.dev), and I think the author is wrong.***

Reading programming books should challenge your thinking and understanding. Disagreeing with the author is not wrong. But try to look at what they are saying from their perspective and ask yourself why you disagree.

The point of reading a programming book is to learn. Disregarding an author’s opinion without reflection will yield little reward. However, there are often lessons to be learned even if you disagree.

Look at the programming book [Clean Code](https://amzn.to/3uLSY8d) by *Uncle Bob*. A popular programming book from 2008 that uses Java, often a target of criticism like it is dated and not relevant anymore. Does that make it a poor book to learn principles and practices? Not at all! One only needs to consider the context surrounding the statement. Here is a sentence from the third chapter about functions.

> The ideal number of arguments for a function is zero (niladic).

This statement makes no sense in Haskell (or lambda calculus) since all functions take one argument, and functions with zero arguments are illegal. Does that mean that the ideal function can not exist in Haskell?

No, this is an unfair judgment. Uncle Bob wrote this book with an OOP (Object-Oriented Programming) perspective with examples in Java. The point is that many arguments can be complicated to use and understand. It can also be a smell of too many dependencies. 

Always try to see where the author is coming from and what lesson they are trying to teach. For example, the first chapter of [Clean Code](https://amzn.to/3uLSY8d) says something important:

> Books on art don’t promise to make you an artist. All they can do is give you some of the tools, techniques, and thought processes that other artists have used. So too this book cannot promise to make you a good programmer. It cannot promise to give you “code-sense.” All it can do is show you the thought processes of good programmers and the tricks, techniques, and tools that they use.

***- The examples contain bad and ugly code.***

Programmers usually jump to code examples because we want to see how it works. 

One should not blatantly copy code examples. Examples are there to illustrate an idea. It is about showing you what the text is discussing.

A great example of this is in the programming book [Design Patterns](https://amzn.to/3h2oNlb) by *GoF* (Gang of Four). I have seen people transcribe the examples in this book from C++ to their language of choice, and what they usually end up with is a more complex solution than is needed.

The irony is that the definition of a design pattern stated earlier in the book (which is a quote from another book) says this:


> Each pattern describes a problem which occurs over and over again in our environment, and then describes the core of the solution to that problem, in such a way that you can use this solution a million times over, without ever doing it the same way twice
Sudoku Solver using SolidJS & Tailwind
Tags: javascript, webdev, react, algorithms
Published: 2022-03-12 08:14:37

Hello folks,

I have developed "Sudoku Solver" using SolidJS and TailwindCSS. It tries to solve the given input board using backtracking to get a solution.

![Sudoku Solver demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/byoxpk02mxi2lmtya4l7.gif)

Link: https://sadanandpai.github.io/sudoku-solver/dist/
Repo: https://github.com/sadanandpai/sudoku-solver

It is written in a simple way for anyone understand and build similar things.