teleren/devto huggingface dataset:
The 7 Most Popular DEV Posts from the Past Week
Tags: top7
Published: 2021-06-08 17:43:47

---
title: The 7 Most Popular DEV Posts from the Past Week
published: true
description: A round up of the most-read and most-loved contributions from the community this past week.
tags: icymi
cover_image: https://thepracticaldev.s3.amazonaws.com/i/sfwcvweirpf2qka2lg2b.png
---
_Every Tuesday we round up the previous week's top posts based on traffic, engagement, and a hint of editorial curation. The typical week starts on Monday and ends on Sunday, but don't worry, we take into account posts that are published later in the week._ 


## The 4 most important hooks you need to know in React

A simple and to-the-point post on the most important React hooks you need to know — as advertised, @ishakmohmed!

{% link https://dev.to/ishakmohmed/react-hooks-usecontext-useeffect-usestate-useref-summarized-like-crazy-short-concise-article-254k %}

## Lights, camera, code 🎬

Kudos to @hieptl for sharing this incredibly thorough tutorial on... building Netflix to learn React?! 🤯 Impressive stuff.  
 

{% link https://dev.to/hieptl/learn-react-by-building-netflix-1127 %}

## Coding through the obstacles

Thank you to @resourcefulmind for providing this follow-up on your [last article](https://dev.to/resourcefulmind/a-beginner-s-journey-into-software-development-in-nigeria-86b) about how internet access is a major barrier for coders in Nigeria. Really glad you are finding some solutions that work for you. freeCodeCamp is awesome!


{% link https://dev.to/resourcefulmind/learn-to-code-using-freecodecamp-especially-if-you-do-not-have-24-7-internet-access-101e %}

## Vanilla JS Swirl 🍦 

@ivavay built a Chrome extension that gives you a random Chinese idiom every time you open a new tab. They break down the process to help you learn how to make your own extension with JS

{% link https://dev.to/ivavay/how-to-make-a-chrome-extension-with-javascript-5157 %}


## A safer and more secure Git

@mishmanners is here to save you from needing to authenticate Git so you don't have to type a password with every action. These ideas are SO helpful — and much more secure! 

{% link https://dev.to/github/how-to-never-type-passwords-when-using-git-18bb %}


##  Soft skills, hard covers

@espoir has rounded up a mini library of books that will help your expand upon your soft skills as a developer. Do you have any titles to share? 

{% link https://dev.to/espoir/my-books-recommendations-to-enhance-your-soft-skills-as-a-developer-4k3o %}

## De-mystifying the mystical ✨ 

Thanks to @endingwithali for this terrific look under the hood of web servers. 

Want to read more of Ali's work? Head over to [TheRelicans.com](https://www.therelicans.com/endingwithali)! It's a community created by New Relic for all levels of software developers — and it's built on Forem 🌱 

{% link https://dev.to/endingwithali/how-do-web-servers-work-54ci %}


_That's it for our weekly wrap up! Keep an eye on dev.to this week for daily content and discussions...and if you miss anything, we'll be sure to recap it next Tuesday!_
Activation Failure / 504 Gateway Timeout in Atlassian Jira
Tags: jira, atlassian
Published: 2021-06-08 17:39:40


While deploying Jira in Kubernetes or Docker you might have faced `Activation Failure / 504 Gateway Timeout` issues while working with plugins load. There can be other root causes but most prominent one is that your Jira Universal Plugin Manager is trying to connect to Marketplace. We can disable the same in Jira to avoid these errors.

### `Switching UPM to offline mode in Jira`


> https://marketplace.atlassian.com
> https://marketplace-cdn.atlassian.com

To fix that you can disable it via system property

```
# Set the system property upm.pac.disable to true. When this property is set to true, UPM does not try to access the Atlassian Marketplace. Example:
-Dupm.pac.disable=true
```

or Login in application and follow the steps below :-

1. From the top navigation bar in your application, choose  > Add-ons or Manage apps
2. Click the Settings link at the bottom of the page.
3. Uncheck the Connect to the Atlassian Marketplace checkbox. This option is enabled by default.
4. Click Apply


### `References: `
https://confluence.atlassian.com/upm/disabling-and-enabling-apps-273875716.html

https://confluence.atlassian.com/upm/problems-connecting-to-the-atlassian-marketplace-273875718.html

https://confluence.atlassian.com/upm/configuring-marketplace-connectivity-306350947.html
Manage Multiple Git Accounts on a Computer
Tags: github, git
Published: 2021-06-08 17:21:53

Want to use a Git account for work and one for personal projects? Here's how.

I recently started working for a company that uses GitHub Enterprise for their Git solution. I set my work laptop and it's terminal to use that GitHub account and git credentials to manage git on my computer.
I also wanted to work on my personal projects which I have maintained on my GitHub account. The process to maintain multiple Git accounts on a single machine was straightforward but I wasn't aware of the how-tos.

I looked up upon it a little and got it to work. If you're looking for the same, follow the steps:

*(The commands and directories are according to a Mac computer. Things might change on a Linux or a Windows, but the job to be done remains the same, please look uiip for the right commands in that case.)*
<h3>1. Generate separate SSH Keys for both (or more?) accounts</h3>
head to your `.ssh` directory and generate sets of SSH keys for both the accounts. This can be ignored for the accounts which already have a pair generated. This was true for my case as I had already set up my work account.
To generate a pair of ssg keys, run `ssh-keygen -t rsa`
Follow the instructions that ask for a file location, name, etc. For the name, I prefer setting something like `id_rsa_work` and `id_rsa_personal` as it is easier to identify (in case I need to someday).

<h3>2. Manage ssh config file</h3>
There should be a file named `config` in the `.ssh` folder. If not, we need to create one by running `touch config`.
Edit the config and add the following lines into it:
```
#work account
Host github<-identifier>.com
   HostName <enterprice github host>
   User git
   IdentityFile ~/.ssh/id_rsa_work
   IdentitiesOnly yes

#personal account
Host github<-identifier>.com
   HostName github.com
   User git
   IdentityFile ~/.ssh/id_rsa_personal
   IdentitiesOnly yes
```

Example config:
```
#pradipta-sarma account
Host github.com
   HostName xyz.github.com
   User git
   IdentityFile ~/.ssh/id_rsa_work
   IdentitiesOnly yes

#pradipta account
Host github-personal.com
   HostName github.com
   User git
   IdentityFile ~/.ssh/id_rsa_personal
   IdentitiesOnly yes
```
And save the file.

<h3>3. Register the SSH keys on the respective GitHub accounts</h3>
This step is to let GitHub identify our machine and authorize it, to avoid typing in the id and password everytime.
Follow the steps [here](https://docs.github.com/en/github/authenticating-to-github/connecting-to-github-with-ssh/adding-a-new-ssh-key-to-your-github-account) to add the keys to the respective accounts.

To avoid using the work account on a clone for a personal repo, you can change a clone from:
`git clone git@github.com:user/repo.git` to `git clone git@github-personal.com:user/repo.git`

With this, you're good to go. Let me know if there's an issue or if I have missed something.

Originally posted [here](https://pradipta.github.io/multiple-git-accounts/)
Day 105
Tags: 100daysofcode, programming
Published: 2021-06-08 17:11:05

Day 105/200 of #200DaysOfCode #100DaysOfCode #100daysofcodechallenge 

- Solved two problems on Codewars.

1 - Even Binary Sorting (6 kyu)
2 - Reverse the bits in an integer (7 kyu)
What's New in Python 3.10?
Tags: python, programming, datascience, machinelearning
Published: 2021-06-08 16:47:10

The Python 3.10 release has several new features like structural pattern matching, a new typing Union operator, and parenthesized context managers!

Python 3.10 development has stabilized and we can finally test out all of the new features that will be included in the final release.

We'll cover some of the most interesting additions to Python - structural pattern matching, parenthesized context managers, more typing, and the new and improved error messages.

{% medium https://towardsdatascience.com/whats-new-in-python-3-10-a757c6c69342 %}

[Free link](https://towardsdatascience.com/whats-new-in-python-3-10-a757c6c69342?sk=648ae12c1025a83affba4eecec0d46c6)
Popular case types in programming
Tags: webdev, codenewbie, programming, codequality
Published: 2021-06-08 16:21:09

- snake_case
- kebab-case
- camelCase (JS variables, functions)
- PascalCase (JS Classes)
- SCREAMING_SNAKE_CASE (JS constants)

---

**Thanks for reading 💙**  
Follow **@codedrops.tech** for more.  
[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  
**[codedrops.tech](https://www.codedrops.tech/)**

---
**Projects**  
[File Ops](https://marketplace.visualstudio.com/items?itemName=mehullakhanpal.file-ops) - A VS Code extension to easily tag/alias files & quick switch between files
Adding jQuery Mask to Laravel (The Laravel-Mix Way)
Tags: jquery, laravel, webpack, javascript
Published: 2021-06-08 15:55:24

If you developing an app that has currency input, you may think of how to make it 'prettier' with thousand separator. Developing thousand separator by your own may be hard. Or if you found scripts on a site like Stackoverflow, you may be unsure if it works well or buggy. So, the last options is to find a library for it. I found one and it looks promising but I have bad news, it needs jQuery. But the old ways still worth to use these days, as long as you don't use legacy version of it. Anyway, let's implement it in our beloved framework Laravel and its Mix.

## Prerequisites to code along

Have your own Laravel app to follow along, you already installed jQuery with Laravel-Mix and make sure the jQuery is working for your web.

## 

## Installing jQuery Mask Plugin

The library works as a plugin for jQuery. To install jQuery mask, here is the npm command:

```
npm install jquery-mask-plugin --save-dev
```

## The Currency Component

The component to use later is simple, we use `<input>` element with `text` type (not `number` type) and has `rupiah` class in it:

```html
<input class="rupiah" type="text" name="price" id="price">
```

## Applying jQuery Mask

As usual, you may have similar entrypoint javascript like this:

```js
window._ = require('lodash');

try {

    window.$ = window.jQuery = require('jquery');

} catch (error) {
    console.log(error);
}
```

By the way, I live in Indonesia and the nation's currency is Rupiah (IDR). The example format is `Rp15,000,000`, it uses comma to separate the thousands. So the masking for this is `0,000,000,000` and we limit it to billion with maximum up to `9,999,999,999`. Let's import the jquery mask plugin below the jquery object assignation and the masking to the `rupiah` class:

```js
window._ = require('lodash');

try {

    window.$ = window.jQuery = require('jquery');

    require('jquery-mask-plugin');
    $('.rupiah').mask('0,000,000,000', {reverse: true});

} catch (error) {
    console.log(error);
}
```

## Build and Test!

Run `npm run development` for development-mode assets or `npm run production` for production-ready assets. The masking for the component should be working, let me know if it doesn't 🎃.

## Unmasking Upon Form Submit

If the component is used for a form input and you masked it, the submitted value will be the masked value and to store it in the database of course we need the raw value. To handle this, you can bootstrap any form submission and unmasked the value like this:

```js
  $('form').on('submit', function(){
    $('.rupiah').unmask();
  });
```

__________________

```
version used:

node v14.16.0
npm 6.14.11
laravel-mix 6.0
```
The Importance of Research
Tags: watercooler, discuss
Published: 2021-06-08 15:55:13

I hate to admit it but I actually did no research when writing my JavaScript v TypeScript article 😥.
{% link javacode7/javascript-v-typescript-3i1g %}
While I try not to live in regret, I do not want to do this again. That is why I am writing this article.<br>
Research is important ❗. Without it, although you may have *some* correct information, other info you put in may be inaccurate. This is not good to put in any blog post, article, tutorial or video.

Research can be done through the web 🌐, through reading 📖 and other ways as well. Always try to do research *before* you make any content to make sure that any information there is correct.

I think I'll end it here today and I just want to apologise to those people who read my JS v TS article with false information in it. It is my fault 😔.
Building Better Games With Cloud - Lessons In Innovation From Gaming
Tags: gamedev, cloudskills, microservices, deeplearning
Published: 2021-06-08 15:51:44

Hey,

Join a Gaming webinar “AHEAD IN THE CLOUDS”, which will be focused on uncovering the value of cloud technologies for organizations from other industries on the example of gaming. Fearless and disruptive, global studios break the rules and introduce new patterns. Why can’t others do the same to succeed?

We are going to discuss the following:

- Gaming as a service.
- Microservices and containers.
- LiveOps and DEM (digital experience monitoring).
- Continuous innovation and updates.
- Digital twins.
- Edge streaming or cloud game streaming.
- Deep learning, and many more.

Speakers:
1/ Will McKeon-White, Researcher at Forrester.
2/ Lauren Nelson, VP, Research Director at Forrester.
3/ Mathieu Duperre, CEO, Founder at Edgegap.
4/ Billy Le Voir-Barry, recent CTO IBM Esports and Video Games

Moderator:
Doug Dyer, VP of Gaming & Entertainment at Innovecs.

For the gaming industry – innovation is a key differentiator and it’s worth investing in. Our speakers will uncover this topic in detail and provide many insights soon.

Please join us at the event to make it more diversity with your questions.

Register for free here: https://bit.ly/3v30wzY
Adding Markdown to your Rails application
Tags: rails, markdown, ruby, webdev
Published: 2021-06-08 15:33:10

In this guide I will show you how to add markdown to your rails application. We will use [redcarpet](https://github.com/vmg/redcarpet) gem and I assume that you have created your rails application that we will work on.

## Install redcarpet
To install redcarpet gem go to your **Gemfile** and add:
```ruby
# Gemfile 
gem "redcarpet"
``` 
then run the following command:
```
$ bundle install
```
## Generating a resource
After we successfully installed our gem, we need a recourse to work with and test our work, so we will create Post scaffold to work with.

To create the Post scaffold run the following commands:
```
$ rails generate scaffold Post title:string body:text
```
```
$ rails db:migrate
```
## Extracting logic to a helper
After we successfully installed redcarpet gem and created our scaffold it's the time to add markdown to our application.

In order to be DRY (don't repeat yourself) we will create a helper method to use whenever we want to add markdown. So in our `application_helper.rb` we will add the following code:

```ruby
def markdown(text)
    options = %i[
      hard_wrap autolink no_intra_emphasis tables fenced_code_blocks
      disable_indented_code_blocks strikethrough lax_spacing space_after_headers
      quote footnotes highlight underline
    ]
    Markdown.new(text, *options).to_html.html_safe
  end
```
This method titled `markdown` will take a text as an argument and will be the output of Post `body` field. Notice the `options` variable defined with an array of settings you can pass to Redcarpet. These dictate what you do and don't want when it comes to rendering markdown within your app.

Now let's use this helper in our views

```ruby
<p id="notice"><%= notice %></p>

<p>
  <strong>Title:</strong>
  <%= @post.title %>
</p>

<p>
  <strong>Body:</strong>
  <%= markdown(@post.body) %>
</p>

<%= link_to 'Edit', edit_post_path(@post) %> |
<%= link_to 'Back', posts_path %>
```
And congratulation you have added markdown to your application.
How to change GitHub Actions run_number
Tags: github, git
Published: 2021-06-08 15:31:57

---
title: How to change GitHub Actions run_number
published: true
description: Recently we faced a challenge to set an offset for different types of build (e.g. production/test builds). Searching over the internet had a lack of answers to the question of how to change `run_number` or how to increment it. After a good bit of time spent on documentation investigation, we came up with a solution.
tags: github, git
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6ebz4mk1wq7bmmhojvpo.png
---

Hello everyone!

## What we have

We use the well-known schema for versioning the product builds:

`major.minor[.build[.revision]]`

For example: `3.2.1234.0`.

We use GitHub Actions for CI/CD needs. We use GitHub's `run_number` value as a `build` number.

## The challenge

Recently we faced a challenge to set an offset for different types of build (e.g. production/test builds).

Searching over the internet had a lack of answers to the question of how to change `run_number` or how to increment it.

## The solution

After a good bit of time spent on documentation investigation, we came up with a solution. Assume `run_number` is `1000`. And we want the build number to be `5000`. And the final product version we want to have `3.2.5000.0` We can do the following as separate step in the workflow:

```yml
    steps:  
    - name: Set version number
      run: |
        $version = "3.2."+(4000+$($Env:GITHUB_RUN_NUMBER))+".0"
        echo $version
        echo "VERSION_NUMBER=$version" | Out-File -FilePath $Env:GITHUB_ENV -Encoding utf-8 -Append
```

That's it. Now the variable `VERSION_NUMBER` contains the value `3.2.5000.0`.

And we can use that value across the workflow like this (e.g. we construct installer package name that containing the version):

`MyProduct.${{ env.VERSION_NUMBER }}.msi`.

Hope this would be helpful for you.

Cheers!
Voici le top 6 de mes youtubers dev francophone préférés
Tags: french, beginners, tutorial
Published: 2021-06-08 15:21:28

---
title: Voici le top 6 de mes youtubers dev francophone préférés
published: true
description: 
tags: #french, beginner, tutorial
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/43yt436x4b2p0l3smqir.jpeg
---
Si vous désirez plus de contenu francophone comme celui-ci, cliquer <strong>Follow<string> ou <a href="https://twitter.com/EricLeCodeur" class="twitter-follow-button">suivez-moi sur Twitter</a>
<hr>

### Voici le top 6 de mes youtubers francophone préférés:

1. Grafikart (La référence!) :
https://www.youtube.com/user/grafikarttv

2. Lior Chamla : Un gars plein de charisme!
https://www.youtube.com/channel/UCS71mal_TkTW_PpZR9YLpIA

3. Les Teachers du Net: Prend le temps de bien expliquer les concepts! Mamamia!
https://www.youtube.com/user/hounwanou1993

4. Docstring: Un gars avec un soucis du détail examplaire!
https://www.youtube.com/channel/UCo2zkK2d_frGSXctIkftALw

5. Jeremy Mouzin: Un chic type, qui met beaucoup d'effort dans ce qu'il fait.
https://www.youtube.com/channel/UCMzJVrWeaKUotLPWTdx6HuQ

6. Yoan Dev: Une chaine avec moins d'abonné (pour le moment) mais avec une certaine pureté que l<on ne retrouve plus chez les vétérans...
https://www.youtube.com/channel/UCRlsJWh1XwmNGxZPFgJ0Zlw


Merci à tous ces excellents youtubers pour leur contenu francophone!
My first NPM package for react-native
Tags: javascript, npm, reactnative, react
Published: 2021-06-08 15:16:29

After started working on javascript, I have used many npm resources to achieve the required results. Now, this is time to give back to the community. My first npm package created for react-native developers.
I hope it will help many developers.

[NPM package]https://www.npmjs.com/package/rn-searchable-textinput
Discussing the Cloud with Chris GitHub Actions Usage
Tags: devops, github, githubactions, azure
Published: 2021-06-08 14:55:47

**This post was originally published on Mon, Jun 7, 2021 at [cloudwithchris.com](https://www.cloudwithchris.com/episode/discussing-cloud-with-chris-github-action-usage).**

In this session, Chris is joined by Karl Cooke - Implementation Specialist at Action Point Technology Group, Blogger at [https://irishtechie.com](https://irishtechie.com). Chris and Karl talk all about how CloudWithChris.com, diving deep into GitHub actions and some of the considerations that were made along the way.

{% youtube fxhnlNlLqcM %}
37 - Your Career and Your Mental Health
Tags: mentalhealth, health, wellbeing, career
Published: 2021-06-08 14:54:02

**This post was originally published on Fri, Jun 4, 2021 at [cloudwithchris.com](https://www.cloudwithchris.com/episode/your-career-and-your-mental-health).**

People often talk about work life balance, how its not working for them, and how they feel pushed over the limit. Lets dig into it a little, look at how it can be managed, and address some difficult truths as well.

{% youtube WVJbpcSaly8 %}
CGN5 - Cloud Gaming Notes Episode 5 - Building a game remotely
Tags: architecture, gaming, gamedev, cloud
Published: 2021-06-08 14:52:25

**This post was originally published on Wed, Jun 2, 2021 at [cloudwithchris.com](https://www.cloudwithchris.com/episode/building-a-game-remotely).**

Over the last year, our world has changed. Many of us have had to work from home due to the ongoing Coronavirus pandemic. In this session, we'll focus on the Gaming Industry and some of the types of cloud tools/technologies that may have been used to continue their internal collaboration and ultimately deliver games to gamers!

{% youtube a7u5zb4F_c4 %}
Tales from the real world with Matt Bradley
Tags: cloud, azure, people, community
Published: 2021-06-08 14:50:43

**This post was originally published on Fri 28, May, 2021 at [cloudwithchris.com](https://www.cloudwithchris.com/episode/tales-from-real-world-matthew-bradley).**

In this episode, Chris is joined by Matt Bradley! Matt helped start the Public Cloud Division at UKFast. While UKFast works with both AWS and Azure, Matt's focus is on the Azure side, dealing with architecting and building solutions. Matt has delivered several talks within the community, including 'The Azure Storage Minefield'. Join Chris and Matt as they talk through some of Matt's learnings along the way and observations as he has been on his own journey with Azure and public Cloud!

{% youtube qpkK_aMVXc4 %}