teleren/devto huggingface dataset:
用 OneDev 在本機架 Git Server 功能
Tags: git, tutorial, webdev, programming
Published: 2022-11-26 06:41:26

## 本篇要解決的問題

有時候，我們的版本控管不會使用既有的 GitHub 或 GitLab 等服務，對，不要問為什麼，就是有人說是公司資產所以不能放，這個時候我們就會需要一些可以架在公司自有主機上的 Git 功能。

August 爬了一下 Google 也試了幾種，最好安裝的，用一行命令就能安裝的，就是本篇推薦的 [OneDev](https://github.com/theonedev/onedev)。

本篇算是一個紀錄，未來等真的需要使用本機 Git 服務時，就可以推薦公司使用這套，安裝快，網路上寫的也幾乎都是好評。

---

## 安裝 OneDev 的三種方式

[OneDev 官方文件](https://code.onedev.io/projects/162/files/main/pages/installation-guide.md) 上，提供的安裝方式有三種，本篇用的是最最最簡單的那種：Docker。

這邊先附上官方提供的三種安裝方式連結：

- [Run as Docker Container](https://code.onedev.io/projects/162/files/main/pages/run-as-docker-container.md)
- [Deploy into Kubernetes Cluster](https://code.onedev.io/projects/162/files/main/pages/deploy-into-k8s.md)
- [Install on Virtual Machine/Bare Metal Machine](https://code.onedev.io/projects/162/files/main/pages/run-on-bare-metal-machine.md)

如果你對 Docker 不熟也不用緊張，因為 August 目前也是半生不熟，OneDev 很貼心的提供了命令，基本上執行一行命令就可以順利安裝了。

---

## 安裝 Docker

因為是安裝在 Docker 上，所以要先安裝 [Docker Desktop](https://www.docker.com/products/docker-desktop/)。

進到連結頁面後點擊下載，然後就當作安裝遊戲一樣的一直按下一步就可以安裝完成。

---

## Docker 安裝 OneDev

安裝並執行 Docker 後，開啟終端機，複製貼上以下命令，再按下 Enter 就會開使執行安裝：

```
$ docker run --name onedev -d --restart always -v /var/run/docker.sock:/var/run/docker.sock -v <data dir>:/opt/onedev -p 6610:6610 -p 6611:6611 1dev/server
```

先等等，貼上前有一個地方要改，就是用角括號包起來的 `<data dir>`，這個是我們想要把 OneDev 產生的資料存在哪個資料夾中，比方我們想要存取的資料夾叫「LetsWrite」，那就把上面那行命令改成：

```
docker run --name onedev -d --restart always -v /var/run/docker.sock:/var/run/docker.sock -v LetsWrite:/opt/onedev -p 6610:6610 -p 6611:6611 1dev/server
```

按下 Enter 後就會開始安裝 OneDev，第一次安裝會先下載需要的 Image，整個時間也不會太久，August 用的是 MacBook Pro，安裝起來不用一分鐘。

![用 Docker 安裝 OneDev](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ul19wbm853jvfovy498i.png)

看到終端機回應 ok，代表安裝 OneDev 完成，打開 Docker 的 Dashboard 就可以看到有一個 Container 正在運作：

![OneDev 安裝成功，Docker Containers 列表上會看到](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wms3m6vt8qn0ka7xjwqs.png)

點擊 PORTS 裡的 6610:6610，就會用瀏覽器打開頁面：

![成功開啟 OneDev](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3yxcphal6rfxeyxuklks.png)

接著就是照著頁面裡的步驟，從建立一個 Admin 的帳號開始，建立完後就可以開始使用。

Docker Dashboard 上點擊側邊的 Volumes，就可以看見我們剛剛命名的 LetsWrite，資料就是存在這邊：

![資料存在我們命名的 LetsWrite](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hc2rcqabe8ethlgqvqnj.png)

以上，就是用 Docker 安裝 OneDev 的流程，是不是很意外、很開心，就是這麼的簡單這麼的愉快。
First Actual Program: A miniature, turn-based battle
Tags: newbie, beginners
Published: 2022-11-26 06:38:33

This is just a little game I made to test out how to use classes in Python. A very basic turn based battle system, while it is fairly modular, I couldn't figure out how to get the speed stat to really work without just having the same block of code twice but slightly rearranged. That didn't seem like the right way to go about doing that, so I left it as is for now until I figure out a better method.

https://github.com/asmuppet/portfolio/blob/main/minijrpg.py

I'm fairly satisfied with it, as this seems like it a good start.
How to remove a specific item from an array in JavaScript
Tags: javascript
Published: 2022-11-26 05:58:48

There are multiple ways in which an item from an array can be removed.

## Using splice method

If you don't want the empty slot in the array and want the items on the right of the item to be removed to shift to the left, you can use the splice method.

```js
const fruits = ["apple 🍎", "banana 🍌", "orange 🍊", "grapes 🍇"]
fruits.splice(2, 1) //first parameter is the index of the item to be removed. The second one is the number of items to be removed
console.log(fruits) // 👉 ['apple 🍎', 'banana 🍌', 'grapes 🍇']
```

If you want to find an item and then delete it, you can use the following code:

```js
const numbers = [1, 2, 3, 4, 5]
const index = numbers.indexOf(3)

if (index > -1) {
  numbers.splice(index, 1)
}
console.log(numbers) // 👉 [1, 2, 4, 5]
```

If you want to remove all the occurrences of an item from the array, you can loop the array as shown below:

```js
const numbers = [1, 2, 2, 3, 4, 2, 5]

for (i = numbers.length - 1; i >= 0; i--) {
  if (numbers[i] === 2) {
    numbers.splice(i, 1)
  }
}

console.log(numbers) //[1, 3, 4, 5]
```

> We are looping the array in reverse from the right as the array length reduces and items shift toward the left. If we loop from the left, there are chances that we will miss the items.

## Using delete keyword

If you want to leave the slot which was holding the item, then you can use the delete keyword.

```js
const numbers = [1, 2, 3, 4, 5]
delete numbers[2]
console.log(numbers) // [1, 2, empty, 4, 5]
```

You could also assign undefined to remove the item and leave the slot.

```js
const numbers = [1, 2, 3, 4, 5]
numbers[2] = undefined
console.log(numbers) // [1, 2, undefined, 4, 5]
```
1235. Leetcode Solution in cpp
Tags: cpp
Published: 2022-11-26 05:58:15

```cpp
struct Job {
  int startTime;
  int endTime;
  int profit;
  Job(int startTime, int endTime, int profit)
      : startTime(startTime), endTime(endTime), profit(profit) {}
};

class Solution {
 public:
  int jobScheduling(vector<int>& startTime, vector<int>& endTime,
                    vector<int>& profit) {
    const int n = startTime.size();
    // dp[i] := max profit to schedule jobs[i:]
    dp.resize(n + 1);
    vector<Job> jobs;

    for (int i = 0; i < n; ++i)
      jobs.emplace_back(startTime[i], endTime[i], profit[i]);

    sort(begin(jobs), end(jobs), [](const auto& a, const auto& b) {
      return a.startTime < b.startTime;
    });

    // will use binary search to find the first available startTime
    for (int i = 0; i < n; ++i)
      startTime[i] = jobs[i].startTime;

    return jobScheduling(jobs, startTime, 0);
  }

 private:
  vector<int> dp;

  int jobScheduling(const vector<Job>& jobs, const vector<int>& startTime,
                    int i) {
    if (i == jobs.size())
      return 0;
    if (dp[i] > 0)
      return dp[i];

    const int j = firstGreaterEqual(startTime, i + 1, jobs[i].endTime);
    const int choose = jobs[i].profit + jobScheduling(jobs, startTime, j);
    const int skip = jobScheduling(jobs, startTime, i + 1);
    return dp[i] = max(choose, skip);
  }

  int firstGreaterEqual(const vector<int>& A, int startFrom, int target) {
    return lower_bound(begin(A) + startFrom, end(A), target) - begin(A);
  }
};
```
#leetcode
#challenge 
Here is the link for the problem:
https://leetcode.com/problems/maximum-profit-in-job-scheduling/
Top mistakes developer should avoid while learning programming
Tags: webdev, programming, tutorial, javascript
Published: 2022-11-26 05:22:33

In my experience many learners make one or more of the following mistakes:

1. They underestimate how hard it is to learn to code
2. They underestimate how long it will take and how much they need to learn
3. They fail to prioritize their learning, especially in terms of how much time they will need per day
4. They don’t connect with a network of other learners
5. They give up too soon

Here are my suggested solutions for each mistake, in turn.

1. Learning how to code is challenging. Many people will undoubtedly find it to be the most difficult academic assignment they have ever attempted. All students should internalize the concept that they WILL run into difficulties, get frustrated, question their intelligence, and finally need help. A lot. This process will be performed again for several months.

2. It will take a new developer at least a year to become an employable junior developer with four hours a day of training and practice. Longer may be needed. You have a LOT to learn; it goes beyond simple syntax. You also need to become familiar with git, databases, fundamental networking ideas, debugging, a set of programming tools, a mechanism to distribute your apps, and perhaps a lot more auxiliary technologies. Particularly in web development, this is a thing.

3. Learning to code isn’t a thing you’re doing, it is the thing you’re doing for the next year. Everyone has to know this. You have to prioritize it over friends, your favorite TV shows, sports, exercise, self-care time, etc. It requires sacrifice, especially in the beginning. Even family time needs to be sacrificed to an extent. I’m not saying don’t talk to your spouse or play with your kids, but you have to set up a schedule and stick to it. If that means leaving the house at the agreed upon times, then do it. Getting your spouse behind you while you do this is a must. Have the conversation and make a firm agreement to prioritize what you’re trying to do. It is in the nature of spouses to try to steal some of their time back from your coding. Stay strong and remind your loved one that while you still care for them deeply, you are doing this for your family and your future.

4. Don’t learn to code alone! Find a local meetup group for coders. If there isn’t one, start one. Also, find online groups like the one at FreeCodeCamp.Ask for help and offer it to others when they ask. This is critical. You need to start taking steps into the world of software development.

5. Quitting is a guaranteed path to failure. Please see point #1, up above. When the coding gets hard the best answer is not to give up but to persevere. Tenacity is talent.


Connect me on [facebook](https://web.facebook.com/profile.php?id=100083195016286) and [LinkedIn](https://www.linkedin.com/in/christopherglikpo/)
First Angular Project for Beginners
Tags: angular, angularbegginers
Published: 2022-11-26 05:04:30


Hello Everyone, If you want to learn the Angular and create your first simple project so these article for you.




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

Here We create a simple Website for Routing Step By Step


## Step 1: Create a New Project
In Angular to create a new project use following command.

```
ng new routing-project
```

After Run Following command install Angular Routing and accept default CSS Like These

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

Then Go to the project

```
cd routing-project
```


## Step 2: Create Components
Components is peace of code Here components means different screens or URLs.

Write following for Create components

```
ng g c Home
ng g c About-Us
ng g c Contact-Us
```

Here “g” stand for “generate”, “c” stand for “component” It is shortcut In angular.

It will create Files Like These


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


## Step 3: Register Components

Go to the “src\app\app-routing.module.ts” and add following code

src\app\app-routing.module.ts

```
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutUsComponent } from './about-us/about-us.component';
import { ContactUsComponent } from './contact-us/contact-us.component';

const routes: Routes = [
  {
    path:'home',
    component:HomeComponent,
  },
  {
    path:'about-us',
    component:AboutUsComponent,
  },
  {
    path:'contact-us',
    component:ContactUsComponent,
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
```



## Step 4: Create Home Page and add Routing

Go to the “src\app\app.component.html” and Remove all code and  add following code

src\app\app.component.html

```
<h1>SolvedMyCode.com</h1>

<ul class="nav">
  <li><a routerLink="home">Home</a></li>
  <li><a routerLink="about-us">About Us</a></li>
  <li><a routerLink="contact-us">Contact Us</a></li>
</ul>
<router-outlet></router-outlet>
```


## Step 5: Add CSS(Optional)

Go to the “src\app\app.component.css” and  add following code

src\app\app.component.css

```
ul.nav {
	margin:0;
	padding:0;
	list-style:none;
	height:36px; line-height:36px;
	background:#0d7963; /* you can change the backgorund color here. */
	font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
}
ul.nav li {
	border-right:1px solid #189b80; /* you can change the border color matching to your background color */
	float:left;
}
ul.nav a {
	display:block;
	padding:0 28px;
	color:#ccece6;
	text-decoration:none;
}
ul.nav a:hover,
ul.nav li.current a {
	background:#086754;
}
```


Preview:

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


I hope It helps you….


Visit My Website to Learn More [Click Here](https://solvedmycode.com/)
Beautiful UI animation on scroll with React
Tags: webdev, react, css, uiweekly
Published: 2022-11-26 04:58:07

#Want to create beautiful UI animation for your website? Here's 5 easy steps to accomplish that.
&nbsp;
Here are few easy steps to follow to create beautiful scroll animations.
&nbsp;
###1. Install `react-intersection-observer` from [Github](https://github.com/thebuilder/react-intersection-observer)
&nbsp;
###2. Next step is to add `useInView` function to your component that you want to animate, or to a component you want to control the animation with.
&nbsp;
#### Create the `useInView` function in your component and pass the `ref` to element you wish to animate.
```
// Function 
const { ref: elRef, inView: elVisible } = useInView()

// Element
<div ref={elRef}></div>
```
&nbsp;
Where `ref` parameter is responsible for tracking the element, and `inView` is responsible to let you know when the element is visible on the screen. `inView` is either `true` or `false`.
&nbsp;
Now that you have the state for when the element is visible on the screen, you can use that state to add dynamic `className` or `style`. You can pass it as prop to children elements to animate them, or use it directly in that component.
&nbsp;
###3. Use `inView` state to add dynamic `className` or `style`.
```
// This is an example of passing the `inView` state as a prop to child component.

// Parent Component
<div ref={elRef}>
   <ChildComponent isVisible={refVisible} />
</div>

// Child Component
const Component = ({ isVisible }) => {
  return (
    <section className={`${s.el} ${isVisible ? s.animate : ""}`}></section>
  );
};
```
&nbsp;
Once you added the class for animation you can go to your `styles.css` and add some styles.
&nbsp;
###4. Add animation styles.
```
/* Animation */
.el.animate {
  animation: slideUp 1s ease 0s alternate forwards;
}

/* Keyframes */
@keyframes slideUp {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0%);
  }
}

```
&nbsp;
You can also pass additional options to the `useInView` to have more control over the element you wish to animate.
&nbsp;
###5.(OPTIONAL) Customise animation trigger event.
```
 const { ref: elRef, inView: elVisible } = useInView({
    triggerOnce: true,
    threshold: 0.5,
  });
```
&nbsp;
This particular options are `triggerOnce` - which essentially if set to `true` triggers the animation only once, the first time you scroll the page, or if set to `false` it will trigger each time the element is visible on the screen, like scrolling past the element and then back to it, will trigger the animation again.
&nbsp;
Second options is `threshold` - which is a value between `0` and `1`, which are responsible for triggering the animation when a certain percentage of the element is visible on the screen, where `1` is 100% visible and `0` is 0% visible (which basically means when more than 0% of the element is visible - **start the animation**).
&nbsp;

###6. Enjoy 🔥

&nbsp;
&nbsp;
**Thanks for the read. Like, Share, Follow** 🙌
Can You Bring An Electric Toothbrush On A Plane? 2022
Tags: webdev, plan, shaver, toothbrush
Published: 2022-11-26 04:53:24

<!-- wp:paragraph -->
<p><strong>Electric toothbrushes</strong> are great for keeping your teeth clean. But what happens if you need to journey by plane? We look at Can You Bring An Electric Toothbrush On A Plane? </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Bringing an electric toothbrush on a plane can be tricky. Though, it can be done if you do it with the correct method. This blog will explain how to bring an electric toothbrush on a plane.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Even though we'll soon be seeing many of these styles of <strong>blogs</strong>, there will always be a few people who don't know the answer to this question. So that's why we're writing this blog.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>But don't worry, we'll give you the <strong>information </strong>you need to know so that you don't get into trouble when you <strong>travel </strong>with your <strong>electric toothbrush</strong>.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Can You Bring An Electric Toothbrush On A Plane?</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>According to <strong><a href="https://www.tsa.gov/" data-type="URL" data-id="https://www.tsa.gov/" target="_blank" rel="noreferrer noopener">TSA </a></strong>policies, you can bring an electric toothbrush on a plane in your carry-on luggage and your checked <strong>bags</strong>. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>However, if your travel toothbrush contains a lithium-ion battery, it would be best if you packed it in your<strong> carry-on baggage.</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>You know you can bring your <strong>electric toothbrush </strong>on the plane, but have you ever thought about what time of day is best to carry it onto the plane or how often they check bags? What if your flight isn't going to the same place as your luggage? </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>It would be best to consider these things before bringing an <strong>electric toothbrush </strong>on a plane.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Checked Luggage:</h3>
<!-- /wp:heading -->

<!-- wp:image {"align":"center","id":1463,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image aligncenter size-full"><img src="http://checkshavers.com/wp-content/uploads/2022/06/gabrielle-henderson-lT_uN_5atEw-unsplash.jpg" alt="" class="wp-image-1463"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Bringing your electric toothbrush on an airplane is fine but make sure it's turned off and packed in your carry-on bag.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>This is because the <strong>toothbrush's </strong>battery is usually built into the device.</p>
<!-- /wp:paragraph -->
[Read More](https://checkshavers.com/can-you-bring-an-electric-toothbrush-on-a-plane)
The Negative Effects Of Shaving - Itching, Burning Etc
Published: 2022-11-26 04:51:01

<!-- wp:paragraph -->
<p>Many People are Worried about the Negative effects of shaving. People should be Removed Unwanted Hair. There are two High ways Waxing and shaving. These Two ways are the Most Popular ways Of Removing Unwanted Hair. But These Ways Often Gives Negative Effects.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>So, we will Be Disscused on The Negative Effects Of shaving. It is To Read And Learn.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Let's Be known!</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>The Negative Effects Of Shaving?</h2>
<!-- /wp:heading -->

<!-- wp:heading {"level":3} -->
<h3>Itching:</h3>
<!-- /wp:heading -->

<!-- wp:image {"align":"center","id":4482,"width":657,"height":344,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image aligncenter size-large is-resized"><img src="https://checkshavers.com/wp-content/uploads/2022/11/The-Negative-Effects-Of-Shaving-1-1024x536.jpg" alt="The Negative Effects Of Shaving" class="wp-image-4482" width="657" height="344"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>This Says That Waxing or <strong><a href="https://dermnetnz.org/topics/shaving" target="_blank" data-type="URL" data-id="https://dermnetnz.org/topics/shaving" rel="noreferrer noopener">shaving </a></strong>could Often cause Of Itching. This Itching Cause Could also be Charming. Therefore, when we  Take shaved and wax, and Then After, The Itching starts at 1-5 Days and begins to grow back.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>If You Continuous Itching The Itching Area, This Could also Lead To scaring.</p>
<!-- /wp:paragraph -->

[Read More](https://checkshavers.com/the-negative-effects-of-shaving)
Publishing Go package
Tags: opensource, go, ssgo
Published: 2022-11-26 04:36:00

Hey there! Thanks for checking in. Today, I finally released SSGo 1.0 and published it to Go registry so it's available to anyone! Let me tell you some more.

## Publishing

Go actually uses git tags in order to publish your module for everyone. Since my project, just like most of them, have module name as GitHub repo, Go uses module name to fetch a certain tag. You can try it yourself by doing `go install github.com/devils2ndself/SSGo@latest`.

And since there aren't any more requirements, I didn't have to change my code at all! (Except for silly version strings mistakes...)

And while it sounds easy, another thing is putting your package onto Go package discovery site pkg.go.dev.

## Appearing on pkg.go.dev 

It took me a while to understand how to get a webpage for my module. The documentation only briefly mentions it and it is easy to miss it. 

What you need to do, is to make someone fetch your package via `go get` or `go install`. Some time might pass before it eventually appears, but it should be there in the end.

I asked a friend of mine who has never dealt with Go to install my package, and I am very thankful to him! Now he, too, can try my tool on practice.

And, after a bit of confusion on my part and some waiting, you can visit my package at https://pkg.go.dev/github.com/devils2ndself/SSGo
Stripe PaymentIntent status is success, but it never show on my Dashboard charges
Published: 2022-11-26 04:11:43

`I'm using Stripe PaymentIntent to charge the customer's one of the payment methods like below:

intent = Stripe::PaymentIntent.create({

payment_method: 'pm_1M8Ax8AG...',

customer: my stripe customer id...,

amount: 8765,

currency: 'usd',

confirmation_method: 'automatic',

confirm: true,

})`


I can see the intent.status is success, but I could never see it on my dashboard under: https://dashboard.stripe.com/test/payments, there is no $87.65 transaction appears, can anyone tell me why? or I should look at other pages? Thanks.
NodeJs server side basic data flow diagram
Tags: node, beginners, api, webdev
Published: 2022-11-26 03:51:31

Through the little working experience of server-side by nodejs, draw a basic data flow diagram, that represent a bird view of over all working system... 

as a beginner point of view at 1st time learning + implementation of server side at nodejs with express framework & graphs that basic is becoming hard...

so i try to convert that basic setup as this diagram... hope its will helpful at future reference...

short info:-

**index.js** ==> 
[file] all basic config for server...

**routers** ==> 
[folder] allocate all API's endpoint...

**middlewares** ==> 
[folder] protected API's calling by auth checking...

**controllers** ==> 
[folder] API's endpoint logical function call...

**models** ==> 
[folder] MongoDB data schema...

You can also quickly draw this kind of basic diagram at this website ==> [Dojoit](www.dojoit.com)

![Nodejs server side data flow | dojoit](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/124ydrx3g4wozyvadeyt.png)