teleren/devto huggingface dataset:
How to create an orphan branch in git
Tags: todayilearned, git, checkout, orphan
Published: 2021-01-18 17:37:56

---
title: How to create an orphan branch in git
published: true
description: 
tags: todayilearned, git, checkout, orphan
//cover_image: https://direct_url_to_image.jpg
---
Sometimes you may need to create a brand new branch on a git project that doesn't contain anything present on the other branches nor shares an history with them, called _orphan branch_.

This snippet describes how to do it:

```sh
BRANCH_NAME=$1
git checkout --orphan $BRANCH_NAME
git rm -rf .
rm .gitignore
echo "# $BRANCH_NAME" > README.md
git add README.md
git commit -m "Initial commit for branch $BRANCH_NAME"
git push origin $BRANCH_NAME
```

This snippet can be used as a sequence of commands, replacing `$1` with any value for the branch name, or in a bash script, for example naming it orphan_branch.sh and running it with `sh ./orphan_branch.sh new_branch_name`.

More information can be found in the git reference guide at the [git checkout](https://git-scm.com/docs/git-checkout#Documentation/git-checkout.txt---orphanltnewbranchgt) documentation.
Nuxt link prefetch
Tags: javascript, vue, performance, devjournal
Published: 2021-01-18 17:18:51

Since a month ago, i could afford [Mastery Nuxt](https://masteringnuxt.com/)

Here they're explaining how attribute `prefetch` works in `<nuxt-link>` tag.

Nuxt use `nuxt-link` that allows to navigate in our webapp, one of the features about this, is by **default** prefetch the pages that are **linked** in the **viewport**.

If your app is already pretty busy on first pageview, like if you have a lot of javascript or network traffic, you may want to disable this feature. Don’t worry you have plenty options.

## Locally disabling

If you want to disable prefetching for a given link just add `no-prefetch` on it. 
i.e.
```js
<nuxt-link :to="`/home/${home.objectID}`" no-prefetch>
  <home-card :home="home"/>
</nuxt-link>
```

## Globally disabling

In the `nuxt.config.js` in add a property call `router` which is an object and add `prefetchLinks` to set it false, like this.

```js
router: {
  prefetchLinks: false
}
```

Now you can pick and choose which links to prefetch, this is really handy when it comes to perfomance optimizations
Mental Health is Important
Tags: mentalhealth, womenintech
Published: 2021-01-18 17:10:48


Taking care of yourself mentally is really important especially in the times we are in now. I think that it is easy to push the way we are feeling off as something we can deal with later, but by doing this it just accumulates.

It does not help that society has put a stigma on mental illness, but I am glad to say that it is changing. You see more and more people talking about it which is great! Mental illness is a disease that can be treated! And there is no reason to be ashamed of it!

I have been a mental health tech for the last 5 years and over my time span I have picked up on signs of mental state. A few that I have noticed are:
1.  anxiety
2. unable to sleep
3. depression
4. high and lows

I am by no means a license professional, but working in the field has showed me some of the signs. My word of advice is that you never know what someone is going through something, so be kind.

That brings me to tech. We have to be cautious of how we are feeling. Taking sometime to step away from the computer to take a walk or just get some fresh air is important. Now that  a lot of people are working from home and there is not a lot of human interaction I think inviting your co-worker or virtual buddy to a virtual coffee, just to talk about anything other than code or work would be a good way to ease some tension. And just a good way to check in with someone to see how they are doing.

We should also check in with ourselves to see how we are doing on a daily basis maybe add something like morning pages, which is a tool I recently got introduced to. Morning pages is essentially writing three pages of whatever comes to your mind. It allows for you to get the clutter out of your mind and on to paper, which frees up your mind for the day.  Another good tool is a gratitude journal, which is a classic. 

With all of that said have a wonderful day! Happy coding!
Logging in...
Published: 2021-01-18 17:10:32

Hi, I'm Alex!

I am a midlife career changer, learning as much as I can in my free time so I can eventually leave my current job and begin a career in tech.

I gave a short go at blogging about my efforts last fall, while working on and in AWS. For multiple reasons, I took down that WordPress blog hosted in my AWS account. (Mostly because the architecture was a little scary and not at all based on Infrastructure as Code, something I have come to greatly appreciate since then.) I'm going to try to keep up with this one, though!

I am already AWS certified (Solutions Architect Associate), and am currently working on learning Python and Networking+. I plan to get back into the AWS space soon as I pursue the Developer and SysOps Admin Associate-level certifications.

You can find my Python projects on Repl.it and GitHub, and I'm trying to stay active on Twitter to build connections.

Onward and upward!
The easiest way to internationalize your NextJS application! 🌎
Tags: react, javascript, nextjs, tutorial
Published: 2021-01-18 17:09:03

From version **10**, **Next.js** has built-in support for internationalized routing. This feature allows you to support multilanguage versions of your application just by providing a list of locales. 

Start with changing your **Next.js** configuration, which is inside **next.config.js**:

```js
module.exports = {
  i18n: {
    /**
     * Provide the locales you want to support in your application
     */
    locales: ['en-US', "pl"],
    /**
     * This is the default locale you want to be used when visiting
     * a non-locale prefixed path e.g. `/hello`
     */
    defaultLocale: "pl"
  },
}
```


## Accessing the locale information

After configuring the supported locales, you can access the locale information with the **Next.js** built-in router. The router has the following properties inside:

* `locale`, which contains the currently active locale,
* `locales`, which includes all configured locales,
* `defaultLocale`, which provides for the configured default locale.


Router is accessible from the functional components by the `useRouter` hook:


```js
const { locale, locales, defaultLocale } = useRouter()
```


When doing **SSR** with `getStaticProps` or **SSG** with `getServerSideProps`, the locale information is provided in the function's context.


## Transition between locales

You can use the built-in `Link` component along with the `useRouter` hook to transition between locales:

```jsx
import Link from "next/link";

/**
 * Inside your component
 */
const { asPath, locale } = useRouter();

return (
  <>
    <Link active={locale === "pl"} href={asPath} locale="pl">
      PL
    </Link>

    <Link active={locale === "en-US"} href={asPath} locale="en-US">
      ENG
    </Link>
  </>
);
```


## Presenting multilanguage data


Now you can define an object in which we will store multi-language data for our components. After reading the current `locale` value, we can get translated texts just by accessing the property on an object:


```js
/**
 * Define your multi-language data
 */
const data = {
  pl: {
    title: "Cześć!",
  },
  "en-US": {
    title: "Hello!",
  },
};

/**
 * Inside your component
 */
const { locale } = useRouter();
const title = data[locale].title;

```


## What about type safety?

When reading the value of `locale` from the `useRouter` hook, you may notice that your IDE identifies the type of the `locale` as a string. Unfortunately, at this moment, **Next.js** does not provide typescript support for locales. 

If you want to get full type safety, you may want to introduce your own custom hook for reading the value from of `locale`

{% twitter 1346865579349716992 %}

After defining your own type for supported locales and reading the current locale's value from the router, let's return this value with a simple `as` type assignment.

Thanks for reading! If you are interested in the latest tech news, you can follow my account since I plan to post here regularly. I also tweet on a regular basis so that you can follow [My Twitter account](https://twitter.com/SkonecznyJakub) as well!
Kubernetes and Pods ...
Tags: kubernetes, docker, javascript, python
Published: 2021-01-18 17:08:26

Let me tell you about Kubernetes ..

Kubernetes : a tool for managing and automating containerized workloads in the cloud.

Imagine you have an orchestra (containers ) , think of each individual musician as a docker container , to create beautiful music we need a conductor to manage musicians and set the tempo.

Now imagine the conductor as Kubernetes and the orchestra as an app like robinhood , when the markets are closed , an app like robinhood is not doing much and when they open it needs to fulfill millions of trades for overpriced stocks like shopify, alibaba and tesla.

Kubernetes is the tool that orchestrates the infrastructure to handle the changing workload , it can scale containers across multiple machines and if one fails it knows how to replace it with a new one.

A system deployed on Kubernetes is known as a cluster, the brain of the operation is known as the control plane: it exposes an API server that can handle both internal and external requests to manage the cluster, it also contains its own Key:Value database called ETCD, used to store important information about running a cluster.

What it's managing is one or more worker machines called "NODES".
When you hear "node" think of a machine, and each node is running something called "KUBELET" which is a tiny application that runs on the machine to communicate back with the main control plane.

Inside of each "node" we have multiple "pods" which is the smallest deployable unit in "Kubernetes".

When you hear "pod", think of a pot of wales or containers running together.

As the workload increases, "Kubernetes" can automatically scale horizontally by adding more nodes to the cluster.
In the process, it takes care of complicated things like networking, secret management and so on.

It's designed for high availability and one way it achieves that is by maintain a replica set, which is just a set of running pods ready to go at any given time.

As a developer, you define objects in yaml that describe the desired state of your cluster, for example, we might have an nginx deployment that has a replica set with three pods; in the spec field we can define exactly how it should behave like its containers, volumes, ports and so on.

You can take this configuration and use it to provision and scale containers automatically and ensure that they're always up and running and healthy.
Run Code Tours without leaving Github
Tags: news, chrome, firefox, extension
Published: 2021-01-18 16:23:53

tl;dr: I made this: https://github.com/doctolib/code-tours-github

## Code tours

[Code tours](https://marketplace.visualstudio.com/items?itemName=vsls-contrib.codetour) are an amazing tool to help people discover your codebase. It's simple and brilliant!

Basically, you will be able to walk people through the code, highlighting specific parts of the code with your explication. It's great to explain how a feature work, or how you apply certain patterns.

Here is what a Code Tour looks like:

![What Code Tour looks like](https://dev-to-uploads.s3.amazonaws.com/i/1nb2tev6wb8vvyrb5emp.gif)

## Only in VSCode?

Unfortunately, this extension is built for VSCode. They recently added support for CodeSpace as well, but that's basically it. Since I'm not using VSCode, I felt like I had to do something about it!

## Introducing the Code Tours Github extension

So I decided to reimplement part of the features directly in the Browser. This way, Code Tours are available to everyone!

Here is what a tour looks like:

![Code Tour using the Browser Extension](https://dev-to-uploads.s3.amazonaws.com/i/k5bw9q8lkfjtk0bisgca.gif)

Of course there is still a lot to do to have as many features as the original extension, but I'll keep working on it.

You can check the repository [here](https://github.com/doctolib/code-tours-github), and install the extension for [Chrome](https://chrome.google.com/webstore/detail/code-tours-github/emmipndjppboloecpfgnckbkcehhhpkc/) or [Firefox](https://addons.mozilla.org/en-US/firefox/addon/code-tours-github/).

Let me know what you think!
Front End Devs, What do you like the most about your job
Tags: career, discuss
Published: 2021-01-18 17:06:34

---
title: Front End Devs, What do you like the most about your job
published: true
description: It's Monday and I figured this discussion might be a good one to start the week with, so do share yours
tags: career, discussion
---

# Why ask? you ask?
I know if you've been working for a while you might have been too focused on work to even remember what that one thing you like the most about your work, let us know in the comments
Destructuring `array`
Tags: javascript, webdev, codenewbie, beginners
Published: 2021-01-18 17:00:53

```js
const data = { name: "Test", skills: ["javascript", "css", "react", "node"] };

// Extract 1st item
const [firstSkill] = data.skills;
console.log(firstSkill); // javascript

// Extract 3rd item (Skip 1st & 2nd)
const [, , thirdSkill] = data.skills;
console.log(thirdSkill); // react

// Nested destructuring (Direct from object)
const {
  skills: [firstSkillAgain],
} = data;
console.log(firstSkillAgain); // javascript

// Assign default value if nested array not found
const { tags: [firstTag] = ["Custom Value 1", "Custom Value 2"] } = data;
console.log(firstTag); // Custom Value 1
```

---

**Thanks for reading 💙**  
Follow **@codedrops.tech** for daily posts.  
[Instagram](https://www.instagram.com/codedrops.tech/) ● [Twitter](https://twitter.com/codedrops_tech) ● [Facebook](https://www.facebook.com/codedrops.tech/)

Micro-Learning ● Web Development ● Javascript ● MERN stack ● Javascript  
**[codedrops.tech](https://www.codedrops.tech/)**
Lets get this party started!!! #NOOB
Tags: javascript, beginners, codenewbie, firstpost
Published: 2021-01-18 16:50:11

# Davoris Cowell

### About Me

Hi! I'm from Georgia. I've been coding for four years now but there's never too much knowledge!

_Dublin, GA 31021._

**28 years old**

**_Hobbies include music, basketball, coding, and video games._**

**Now learning:**

- HTML
- CSS
- JavaScript

## Perks of Me

1. Very Motivated
2. Dedicated
3. Passionate 
4. Punctual 
5. High-Energy
6. **READY TO SUCCEED!!**

---

## Week 1

Our first week wasn't bad. We went over the fundamentals of basic JS, GIT, and Github. The coding itself can prove to be difficult and I've seen myself getting stuck multiple times. I'm glad we have mentor to talk to and other people who are also in the cohort to help if there's ever a problem. I will be explaining the three topics we've covered so far.

**JavaScript** is the scripting language that we use to create dynamic functionality on the web. It is a text-based programming language that allows you to make web pages interactive. Where HTML and CSS are languages that give structure and style to what you see on web pages, such as words, colorization, and some images, JavaScript gives web pages interactive elements that engage a user, and runs the background work. JS can be used in both client-side and server-side.

**Git** is a _version control system_ (VCS) that helps with tracking files in what is called a _repository_. This is helpful because when you edit a file, git can help you determine exactly what changed, who changed it, and why! WHen multiple people are on a project, Git can be used to help keep track of changes and tracking progress. This can be done with a _command-line interface_ (CLI), a _graphical user interface_ (GUI or gooey), or by using **Github** itself!

[Check this out!](https://repl.it/~)
[![happy black guy with dreads](https://cdn.tinybuddha.com/wp-content/uploads/2016/01/Happy-Guy.jpg)](https://www.bitcoin.com/)
package-lock.json - in GIT or not?
Published: 2021-01-18 15:48:56

## tl;dr
1. Put it in GIT
2. Commit it every-time it changes
3. Never delete it

## What is version locking and why we need it?
You write your software, commit it, push it, test it and if everything works well - deploy it to production.

But how do you know that what you tested locally is the same code that is tested on the CI, and is the same code that is being deployed to production?

Your code is inside GIT (or some other version control). If you pull the repository at the exact same commit, you will have the same code.

But your application does not consist only of your own code. It uses external packages as well. One solution for this problem is to commit the node_modules folder to GIT, which includes all of the code your application uses. This creates a problem by itself because then every npm install will create thousands and more changes, and will make it impossible to maintain your repository.

BUT, you don't really need the entire code of the packages you are using, only their versions. Every time you pull the same version from NPM repository you will get the same code.

So, a lock file keeps the version of all our dependencies, and whenever someone runs `npm install`, they will get the exact same version of your application, including external dependencies.

## Why not just keep exact versions in package.json?
Your package.json only points to the versions of your direct dependencies. If they have dependencies too (and they do), these versions won't be locked.

## Why not delete package-lock.json?
Think about it, if you delete package-lock and re-install, you are forcing the latest versions of all packages in the dependency tree. Meaning, you are changing the behavior of (potentially) the entire application.

What are you really trying to do? If you have some weird npm-related problem, simply remove node_modules and run `npm install` again. Removing package-lock.json is never the solution.

## Why commit package-lock.json?
If you don't commit it, then the version of the application everyone else will get is different than what you are running locally. This means that things might work for you, but break on the CI/production/other local machines


Hope it helps to understand. And if you are still not certain about the explanation, just follow the 3 rules in the tl;dr section blindly. That's better than nothing
Saisie semi-automatique /suggestions d'entrées avec seulement du HTML5 | balise datalist
Published: 2021-01-18 16:49:54

Parfois, vous souhaitez suggérer des options à un utilisateur lorsqu'il saisit quelque chose dans une entrée. Il existe peut-être des catégories de recherche ou des balises populaires que les gens recherchent. Vous pouvez, bien sûr, implémenter une fonctionnalité basée sur l'API, ou si vous souhaitez obtenir un moyen rapide pour qu'elle soit opérationnelle, pourquoi ne pas simplement utiliser la balise datalist?


> L'élément HTML `datalist` contient un ensemble d'éléments `option` qui représentent les options autorisées ou recommandées disponibles au choix dans d'autres contrôles. - MDN

Datalist agit comme un hybride entre une entrée normale et un champ de sélection où il permet aux utilisateurs de choisir une option suggérée, d'afficher des suggestions au fur et à mesure de la saisie ou d'ajouter leur propre option.

## Alors, comment ça marche?

Voyons comment ajouter la balise datalist à un ancien `input type = "text"` normal à titre d'exemple simple (et probablement le plus courant que vous utiliserez). datalist fonctionnera presque de la même manière qu'une balise de sélection prenant des options internes.

```
<input type="text" id="programming_language" list="languages"/>
<datalist id="languages">
 <option value="JavaScript"></option>
 <option value="Python"></option>
 <option value="Java"></option>
 <option value="HTML">stop being a troll</option>
</datalist>

```
La chose importante que vous verrez ici est que notre entrée prend une liste comme une option qui dirige vers l'id du datalist que vous souhaitez utiliser pour remplir l'entrée.


![giphy.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1610908712469/XxJ5ku6nN.gif)

Vous pouvez également ajouter des notes internes, donc dans cet exemple, vous verrez si quelqu'un commence à taper «Html» comme langage de programmation préféré, nous pouvons afficher une petite note lui disant d'arrêter de nous troller…

L'autre chose vraiment cool à propos de datalist est que ce n'est pas uniquement pour les entrées avec un type de texte. Vous pouvez l'utiliser pour ajouter des suggestions à pratiquement toutes les balises, y compris les balises de date et de couleur.

Voici un exemple d’utilisation avec un sélecteur de couleurs:

```
<label for="pick_color">Pick a color</label>
<input type="color" id="pick_color" list="colors"/>
<datalist id="colors">
 <option value="#155AF0"></option>
 <option value="#F107BA"></option>
 <option value="#2B2B2B"></option>
</datalist>
```


![giphy (1).gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1610908847406/1ZRSorx9e.gif)

Je suis un grand fan de l'apprentissage par le piratage, alors lancez-vous directement dans ce CodePen pour l'essayer par vous-même:

https://codepen.io/lawalalao/pen/QWKYjRB

Exemple de balises datalist en action Quand l'utiliser? Étant donné que cela ajoutera des éléments DOM, je suggérerais de l'utiliser lorsque vous ne disposez pas d'une base de données complète de suggestions (peut-être moins de 50 ou plus est une bonne règle de base pour moi).

Merci d'avoir lu.