teleren/devto huggingface dataset:
AMI=Amazon Machine Image,Custom AMI
Tags: aws, devops, tutorial
Published: 2021-07-03 15:40:33

* AMI is something like preconfigured template with required server configuration. 
* By using this AMI we can quickly create as many instance we want 
**Creating your own custom AMI**
For creating custom AMI you need to have your own instance running.
If you don't know how to create a instance please check this article below
{% link https://dev.to/ramushetty/aws-creating-an-ec2-instance-29fl %}

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3umne4feu6s31r7xrdny.png)

After you have instance go to instances select your instance click on **Actions** and click on **Image and Templates** and select **Create Image** and enter create image

* Enter your image name
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/owh4w7az0290pq2yhesw.png)

* Go to AMI section which is present in the side nav bar
* Here you can find your AMIs
 ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fl2yq8q0mt2j1j96kwdb.png)

* Once the AMI is available go to instances click on launch instance

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6qdhxzhvb8ccab6acovi.png)


* Now here in choose AMI section select **My AMIs**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nrfd3bqzqocxyqcaze23.png)

* You can see your own custom created AMI here 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zgioho30147vue1mhyts.png)

Select it and follow the same instructions that we use for creating instance.

That's it, hope you enjoyed it!
Head First Design Pattern: 4 of 10
Published: 2021-07-03 18:54:08

I just learnt my fourth design from the Head First Design Pattern book. Today, I learnt about the Singleton pattern.

According to Head First Design Patterns, the Singleton pattern is a pattern that is used to ensure a class has only one instance, and provides a global point of access to it.

For example, the singleton pattern can be implemented in Java like this
```java
public class Singleton {
    private static Singleton instance;

    private Singleton() {
    }

    public static Singleton getInstance() {
        if (instance == null) {
            instance = new Singleton();
        }
        return instance;
    }
}
```
In order to ensure the `Singleton` class only has one instance, It's constructor is marked as private. `Singleton` has an API called `getInstance()`. 

The Singleton pattern seems like a very simple pattern but there are some gotchas you need to be aware of when it comes to using the Singleton pattern and multithreading. In a multithreaded code, it is possible to create multiple instances of the class above since multiple thread can have access to the `getInstance` function at the same time.
 There are many ways to fix this:

1: Refactor the code above to use synchronised keyword.
```java
public class Singleton {
    private volatile static Singleton instance;

    private Singleton() {
    }

    public static synchronised Singleton getInstance() {
        if (instance == null) {
            instance = new Singleton();
        }
        return instance;
    }
}
```
By adding the synchronised keyboard to the `getInstance()` we are forcing every thread to wait it's turn before they enter the function. So only one thread can access the `getInstance()` function.

2: Simply use the `Object` keyword from Kotlin. Kotlin has the Singleton pattern built into the language with the `Object` keyword. 
```kotlin
object Singleton {
}
```

If you need to have on instance of a class, for example, loggers, analytics, crash reporting. You should use the Singleton pattern
Vue Academy #1: Scoped style
Tags: vue, javascript, webdev, css
Published: 2021-07-03 18:35:09

Welcome to the first vue academy ! It will be a list of lot of article on vue! I have 2.5 years of experience in this and I can teach a few thing about this ! 

For this course we will focus on `scoped` attribute in CSS.

### A quick example :

```vue
<style>
    .toto {
        color: blue;
    }
</style>

<template>
    <div class='toto'> Hi </div>
</template>
```

### Why it's bad 

It will work but your class can be used in any other component. So if you change `toto` class, it can impact other component style (`side effect`).

If you want to declare general class, you should create a properly file for this.

### Solution

The solution to create a class that can be used by only one component is the attribute `scoped` in `<style>`.

```vue
<style scoped>
    .toto {
        color: blue;
    }
</style>
```

CSS will be applied to the elements of the current component `only`. This is similar to the style encapsulation found in `Shadow DOM`.

### How it's work in deep

When you will compile your code, the code above will be equal to 

```vue
<style>
    .toto[data-v-f3f3eg9] {
        color: blue;
    }
</style>

<template>
    <div class='toto' data-v-f3f3eg9> Hi </div>
</template>
```

As you can see it's very simple & basic but very strong. Vue will **inject** an attribute on the `scoped class` and apply this attribute on each element that include the `scoped class` !.

---

I hope you like this reading!

🎁 You can get my new book `Underrated skills in javascript, make the difference` for FREE if you follow me on [Twitter](https://twitter.com/code__oz) and MP me 😁

Or get it [HERE](https://codeoz.gumroad.com/l/RXLYp)

🎁 [MY NEWSLETTER](https://www.getrevue.co/profile/code__oz)

☕️ You can [SUPPORT MY WORKS](https://www.buymeacoffee.com/CodeoZ) 🙏

🏃‍♂️ You can follow me on 👇

🕊 Twitter : [https://twitter.com/code__oz](https://twitter.com/code__oz)

👨‍💻 Github: https://github.com/Code-Oz

And you can mark 🔖 this article!
Excel Formulas to Calculate the Percentage of Goal ~ Useful Guide!!
Tags: excelformula, excelformulas
Published: 2021-07-08 08:21:38

---
title: Excel Formulas to Calculate the Percentage of Goal ~ Useful Guide!!
published: true
date: 2021-07-03 17:58:35 UTC
tags: ExcelFormula,Excelformulas
canonical_url: https://geekexcel.com/excel-formulas-to-calculate-the-percentage-of-goal/
---

Have you ever tried to **calculate the percentage of a goal attained in Excel?** In this blog post, we will show the simple tricks to solve this problem. Let’s get them below!! Get an official version of ** MS Excel**  from the following link: [https://www.microsoft.com/en-in/microsoft-365/excel](https://www.microsoft.com/en-in/microsoft-365/excel)

[![Get Percentage of goal](https://geekexcel.com/wp-content/uploads/2021/07/Get-Percentage-of-goal.png)](https://geekexcel.com/excel-formulas-to-calculate-the-percentage-of-goal/get-percentage-of-goal/#main)<figcaption id="caption-attachment-48472">Get Percentage of goal</figcaption>

## Generic Formula:

- If you want to calculate the percentage of the goal you can use the below formula.

**=actual/goal**

## Syntax Explanations:

- **Actual** – It represents the actual goal point.
- **Goal** – It specifies the attained goal point.
- **Division (/)** – It is used for dividing values or numbers.

## Practical Example:

Refer to the below example image.

- First, we will enter the input values in **Column B** , and **Column C**.
- Here we are going to find the percentage of goals attained.

![Input Ranges](https://geekexcel.com/wp-content/uploads/2021/07/Input-Ranges-15.png)<figcaption id="caption-attachment-48473">Input Ranges</figcaption>

- Select any cell and type the above-given formula.

![Enter the formula](https://geekexcel.com/wp-content/uploads/2021/07/Enter-the-formula-13.png)<figcaption id="caption-attachment-48471">Enter the formula</figcaption>

- Finally, press the ** ENTER**  key, you can get the result as shown below.

![Result](https://geekexcel.com/wp-content/uploads/2021/07/Result-14.png)<figcaption id="caption-attachment-48474">Result</figcaption>

## Verdict:

From this tutorial, you can get some clarification on how to **find out the percentage of goals in Excel**. Hope you like it. Let me know if you have any **doubts** regarding this article or any other Excel/VBA topic.

Thank you so much for visiting  **[Geek Excel](https://geekexcel.com/)!! **If you want to learn more helpful formulas, check out [**Excel Formulas**](https://geekexcel.com/excel-formula/) **!! **

### Read Ahead:

- **[Excel Formulas to Get the Profit Margin Percentage ~ Quickly!!](https://geekexcel.com/excel-formulas-to-get-the-profit-margin-percentage/)**
- **[How to Insert a Date or Formatted Date in Excel Office 365?](https://geekexcel.com/how-to-insert-a-date-or-formatted-date-in-excel-office-365/)**
- **[Excel Formulas to Calculate the Surface Area of a Cone ~ Easy Tricks!!](https://geekexcel.com/excel-formulas-to-calculate-the-surface-area-of-a-cone/)**
- **[Excel Formulas to Get the Percentage Discount ~ Useful Tricks!!](https://geekexcel.com/excel-formulas-to-get-the-percentage-discount/)**
Pulling down somebody's fork with Git.
Tags: git, bash, aliases, functions
Published: 2021-07-03 17:54:40

## Purpose

To provide an easy to use way to pull down somebodys fork on your project.

## The long way

To pull down somebody's fork on your github project is kind of annoying. Its one of those things you dont do often, and when you do, you usually consult StackOverflow which is what I did here.

https://stackoverflow.com/questions/9153598/how-do-i-fetch-a-branch-on-someone-elses-fork-on-github

Accepted answer:

```bash
git remote add theirusername git@github.com:theirusername/reponame.git
git fetch theirusername
git checkout -b mynamefortheirbranch theirusername/theirbranch
```

Wow....thats annoying. The fact I have to specify their name 3 times is a hassle. So what I like to do for obscure annoying commands is turn them into a Bash function. 


## Writing the function

I called it `git-fork-pull` im sure there are 1000 other things I  could've called it, but naming is hard.

The next step is to write how I want the function to work. I imagine I want to do something like the following:

```bash
git-fork-pull reponame theirname theirbranch mybranch
```

Seems pretty straightforward to me. 4 positional arguments. I usually like keyword arguments, but theyre a little more tedious in Bash since they require an option parser like this https://unix.stackexchange.com/questions/129391/passing-named-arguments-to-shell-scripts . 

Besides, this is only going to be used by me so im fine with it.

To make use of these 4 positional arguments, our function would look like this:

```bash
git-fork-pull() {
  reponame="$1"
  theirname="$2"
  theirbranch="$3"
  mybranch="$4"
}
```

## Creating functionality

With the arguments in place, its not important to look at functionality. The functionality is fairly straightforward. We add the remote, fetch it, and then create a new branch based on their branch. To do this in our function, we'd continue on like this:


```bash
git-fork-pull() {
  reponame="$1"
  theirname="$2"
  theirbranch="$3"
  mybranch="$4"

  git remote add "$theirname" "git@github.com:$theirname/$reponame.git"
git fetch "$theirname"
git checkout -b "$mybranch" "$theirname/$theirbranch"
}
```

Now obviously this implementation is github specific, so you may have to look into supporting other sites like Gitlab or Bitbucket, but I'll leave this as an exercise for the reader.

## Additional notes

If youre curious on how to autoload bash functions, heres what I do in my `.zshrc` to load all bash functions.

I have a `.zsh/functions` directory full of files like `git-fork-pull` . So heres what a minimal source script looks like in your `.bashrc` or `.zshrc` to source all your custom functions.

```bash
# .zshrc

CUSTOM_FUNCTIONS="$HOME/.zsh/functions"

for function in "$CUSTOM_FUNCTIONS"/*; do
  source $function
done
```

this will interate over all files in your `~/.zsh/functions` directory and source them for use by zsh. This could look identical in a `.bashrc` as well and using `~/.bash/functions`.
Semi-Supervised Learning
Published: 2021-07-03 17:11:27

In some cases, in machine learning, you will run into times when semi-supervised learning is necessary. For example, let's say that you want to use supervised learning to run a classification model on your data, but you have no labels. In order for the model to be built, you need data with labels assigned to properly train the model. Semi-supervised learning provides a pathway to do that, even when you start out with unlabeled data.

## Semi-Supervised Learning (vs. Supervised/Unsupervised)
The main difference between supervised and unsupervised learning is whether we know the output labels. Supervised learning, as the name suggests, needs labels in order to train a model, whereas unsupervised learning does not require labels. For example, a classification model requires supervised learning as it needs each data point to indicate which class that point belongs to as a prerequisite. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y6uxjex42pwv5lp78fv8.png)
Here, we need each data point to tell us whether it belongs to red (disease) or blue (healthy) in order for us to accurately produce a model to separate the two groups. 

For unsupervised learning, we can use the example of clustering.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lo5m13zsowi8c7uwyprd.png)

Unlike the previous example, we don't know which group each data point belongs to before we run the model. For example, in k-means clustering, the model will identify centroids (centers for each group) and assign other data points to the closest centroid. 

Semi-supervised learning can entail different methods. For example, I recently created a model to classify NBA players into specific playstyles. Obviously a player's playstyle isn't something objective as determining that is up to personal opinion. Even determining how many playstyles exist is up to opinion as well. 

One method that I used was to predetermine which playstyles "existed" in this model and, for a small subset of the players, I would determine a playstyle for them. What this gave me was labeled data that I could use in supervised learning. Once that model was created, I ran the rest of the unlabeled data through it to give me playstyle predictions for everyone else. Then, I used supervised learning again on the fully-labeled data. 

Another method, which took less manual work, was to first use unsupervised data to separate players into clusters. Then, using the average stats of each cluster, I could get a sense of what type of playstyle each cluster represented. Using the labels from the clusters, I was able to use supervised learning on the newly-labeled data.

So when you are faced with unlabeled data, but want to do a supervised learning task, don't be discouraged as there are available methods to work around it, such as semi-supervised learning.
Why GitHub Copilot is not a Threat to your Job
Tags: programming, codenewbie, githubcopilot, webdev
Published: 2021-07-03 15:40:38

> TL;DR: If you are a good software designer Copilot will not help you very much.

# What is GitHub Copilot?

GitHub Copilot is an AI pair programmer.
It was trained with a huge coding database of common small routines.
It also can recognize bad comments and create imperative code from them.

{% post https://dev.to/mcsee/code-smell-05-comment-abusers-2ba5 %}

GitHub copilot is a text transformer similar to GPT-3.

It was developed by the same company: OpenAI.

{% post https://dev.to/mcsee/i-ve-recently-learned-about-gpt3-this-is-my-journey-2kik %}

# How does it work?

The OpenAI Codex engine powers GitHub Copilot.
It was trained with a lot of source code and also natural language.

To use it, we must apply to their [waiting list](https://copilot.github.com/). The approval process is fast.

We add it as a Visual Studio Code Extension that interacts in real-time with GitHub.

# Benefits(?)

## Autofill

Copilot can predict anemic structures once we describe their accidental data.

{% post https://dev.to/mcsee/code-smell-70-anemic-model-generators-1jpl %}

They are suitable for implementative and anemic code generation.

{% post https://dev.to/mcsee/code-smell-01-anemic-models-4dg2 %}

Code wizards are a present problem. Copilot is a brand new one.

{% post https://dev.to/mcsee/laziness-ii-code-wizards-56p0 %}

## Bad comments to code

It converts bad comments (those that should never be present in our code) to straightforward algorithms.

We can assume that the training set was filled with bad implementative commented code.
We shouldn't rely much on the algorithm's declarative.

## Structural tests

CodePilot can generate tests on setters. These tests are coupled to implementation and fragile.

{% post https://dev.to/mcsee/code-smell-52-fragile-tests-18o6 %}

They test our getters, so they don't add much value to validating our system's behavior.

{% post https://dev.to/mcsee/code-smell-68-getters-o12 %}

More insights [here](https://goldedem.hashnode.dev/github-co-pilot-in-a-nutshell).

# Should we worry about it?

Not now.

If you read the benefits above, most of the Copilot code belongs to the [code smell area](https://dev.to/mcsee/how-to-find-the-stinky-parts-of-your-code-1dbc).

Very [soon](https://maximilianocontieri.com/most-programmers-are-losing-our-jobs-very-soon), transformers like Copilot will replace lazy and implementative programmers.

# What should be doing right now?

We need to be cleverer than it.

We need to create great behavioral models far from implementative structural data

{% post https://dev.to/mcsee/the-one-and-only-software-design-principle-3086 %}

The problem copilot is solving right now tackles software main mistakes. Thinking of programming as just dealing with data instead of behavior.

{% post https://dev.to/mcsee/what-is-wrong-with-software-5pa %}

Once we decide to grow up and build serious software instead of dealing with strings and dates, we will push our jobs a few years away from this fancy robot.

Please do write me a line below with your thoughts on this.
Add a "Copy Link to Clipboard" button to your website in 10 lines of code
Tags: javascript, webdev, react, gatsby
Published: 2021-07-03 14:55:09

Providing your users an easy way to share your blog posts is an SEO no brainer. Using the default [Navigator api](https://developer.mozilla.org/en-US/docs/Web/API/Navigator) `[navigator.clipboard.writeText]` is a common approach, but lacks mobile support.

The best way to copy selected text to the clipboard is by creating a hidden textarea. Luckily, all you need to do is copy the following code:

### HTML/JSX:
```
<Button
  variant="contained"
  size="large"
  onClick={() => {
    CopyToClipboard(window.location.href)
  }}
>
  Copy Link to Clipboard
</Button>
```
### Javascript:
```
const CopyToClipboard = toCopy => {
  const el = document.createElement(`textarea`)
  el.value = toCopy
  el.setAttribute(`readonly`, ``)
  el.style.position = `absolute`
  el.style.left = `-9999px`
  document.body.appendChild(el)
  el.select()
  document.execCommand(`copy`)
  document.body.removeChild(el)
}
```

## Demo:

{% codesandbox copy-link-to-clipboard-button-8zlrs %}

You can easily extend this by displaying an alert to give users success feedback. An example of how this could be done in Material-UI is with a Snackbar and a piece of state to control the snackbar.
Check out the [full post](https://snappywebdesign.net/blog/how-to-code-a-copy-link-to-clipboard-button) on https://snappywebdesign.net to see how.

---

### Did you find this article helpful?

If you did, would you take a second to share the article? It helps our cause immensely!
Make sure to also click the follow button to get notified when new posts go live 🔔
Why I created Developers Hangout podcast.
Tags: developers, podcast, thoughts
Published: 2021-07-03 14:36:47

---
title: Why I created Developers Hangout podcast.
published: true
description: Why I created Developers Hangout podcast.
tags: developers, podcast, thoughts
canonical_url: https://jamesperkins.hashnode.dev/why-i-created-developers-hangout-podcast
---

Last month I created a new podcast / livestream called Developers Hangout which is a weekly livestreamed podcast where I hangout with guests and chat for 90 minutes. I thought now would be the time to how this ended up happening and why.

## Developers are humans.

I have been in the industry for 12 almost 13 years, and one thing I've noticed working in multiple segments of our industry is almost everything we talk about is code or code related. Don't believe me? Just go on Twitter, Tech-tok , Discord, LinkedIn or around your office and see what everyone is chatting about.

We are humans and this often gets lost when talking to people in the space, it's always what's the latest framework fad or cool new innovation ( I am looking at you GitHub copilot). We have hobbies outside of coding, none of us are coding from the minute our eyes open to the minute they close. We might workout, game, make fancy coffee or dinners, so why aren't we talking about it?

## Developers Hangout was born

I reached out to a bunch of different developers, some I knew and some I had never talked to outside of a twitter interaction and said "Wanna hangout for 90 minutes and just chat? I am thinking of doing a livestreamed podcast where we can talk about a small amount of tech but then I wanna know about hobbies, shows, things you are doing that aren't tech". The reactions were extremely positive, people were dying to talk about things that weren't related to the latest package, role, or content they are created. 

So far in the 4 episodes we've talked about interesting topics such as : 

- Lifting a truck
- Rock Climbing
- Tik Tok
- Top 3 Anime shows
- Worst jobs we've had
- Marriage, Immigration, kids
- Buying a house
and so much more. 

When I fire up the stream on Thursdays its a breath of fresh air where I get to become just a regular guy with a camera and a microphone talking to someone about everything.

### Where and how can you watch / listen?

Developers Hangout is on any  [podcast provider](https://anchor.fm/developershangout)  you want, just search "Developers Hangout". If you want to join live, you can catch it on  [https://twitch.tv/jamesperkins](https://twitch.tv/jamesperkins)  every Thursday at 3.30pm EST and if you want to watch but can't catch it live, check it out on my  [YouTube channel](https://youtube.com/c/learntocodewithjames)
Day 130
Tags: 100daysofcode, programming
Published: 2021-07-03 14:11:03

Day 130/200 of #200DaysOfCode #100DaysOfCode 

- Solved two problems on Codewars.

1 -  Higher-Order Functions Series - Create usernames (6 kyu)
2 -  Higher-Order Functions Series - Find the first Python developer (7 kyu)
🎬Music Player | JavaScript✨
Tags: html, css, webdev, javascript
Published: 2021-07-03 14:05:00

Hey Devs, in this episode we are going to create a working Music Player App using JavaScript, you’ll be able to click to play the music and pause it, and it has previous and next button to play next song.

---
{% youtube lM0g-oNwI48 %}

---

⏱️ Chapters:
00:00 -> Project Intro 
05:19 -> Music Container & Rotate Animation 
17:58 -> Load, Play & Pause Song 
26:06 -> Next, Prev Song & Progress

---

🏆 **Recommended Projects** 🏆

🎬 Neumorphism Login Form | HTML & CSS 
➤https://youtu.be/QWh0S-3D7uY
🎬 Animated Sidebar Menu with HTML & CSS 
➤ Watch: https://youtu.be/QPZrQ_xPVs4 
🎬 Amazing Social Media Buttons Hover Effects | HTML & CSS 
➤ https://youtu.be/P9pi4hq7BBA 
🎬 Animated Login Form | HTML, CSS & JavaScript 
➤ Watch: https://youtu.be/ogNwc45qHKo 
🎬 Slider Sign In / Sign Up Form | HTML CSS Vanilla JS 
➤ Watch: https://youtu.be/Wz5THk0-Y1s 

---