teleren/devto huggingface dataset:
Basic HTTP authentication in Traefik 2
Tags: traefik, docker, linux, devops
Published: 2021-05-31 12:21:38

In order to secure your website with Basic HTTP authentication in Traefik do the following.

### 1. Download `apache2-utils`
```yaml
sudo apt install apache2-utils
```
### 2. Generate password and copy its output
```yaml
htpasswd -nB adam
```
The `n` option will display the hash in stdout and the `B` option will use more secure encryption.

`devto` password's hash is shown below:
```yaml
adam:$2y$05$h9OxLeY20/5uiXjfPgdRxuFlrfqBf2QifYDgrwsR6rAEgX3/dpOGq
```

### 3. Replace $ with $$
```yaml
adam:$$2y$$05$$h9OxLeY20/5uiXjfPgdRxuFlrfqBf2QifYDgrwsR6rAEgX3/dpOGq
```
### 4. Create a new middleware in Traefik for HTTP basic auth for your HTTPS entrypoint.
```yaml
  labels:
    - "traefik.http.middlewares.yourservice-basicauth.basicauth.users=adam:$$2y$$05$$h9OxLeY20/5uiXjfPgdRxuFlrfqBf2QifYDgrwsR6rAEgX3/dpOGq"
```
Remember to use the escaped double `$`.
### 5. Create a new chain for your HTTPS connection.

You may have existing rules for your HTTPS route, e.g. compressing, etc.

So create a new chain where you'll combine your existing middlewars and the newly created `yoursite-basicauth`.

In your `docker-compose.yml` file:
```yaml
  labels:
    - "traefik.http.middlewares.yourservice-https-chain.chain.middlewares=yourservice-basicauth,yourservice-other-middleware-remove-or-replace-with-yours"
    - "traefik.http.routers.yourservice-https.middlewares=yourservice-https-chain"
```

![Basic HTTP auth in Traefik](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qbaxl30gdbbdogfrhs9f.png)

Restart your service and your website will now prompt browsers for username and password.
Menu / Sidebar toggle functionality with pure CSS and no JavaScript.
Tags: css, html, javascript, ux
Published: 2021-05-31 12:11:39

In this post we will explore how we can create a toggle functionality for Menu / SideBar with pure CSS and no JavaScript.

Toggle functionality is often built with JavaScript because it requires handling the click event.

But it can be built with pure CSS and no JavaScript.

Here is how.

## 1 - The Markup
Let's start with a simple <aside> tag for the sidebar.

HTML
```html
<aside class="aside-wrapper">
  <h1 class="logo-text"><span>Qpay</span>
    <i class="fas fa-bars sidebar-toggle"></i>
  </h1>

  <ul>
    <li><i class="fas fa-home"></i> Home</li>
    <li><i class="fas fa-building"></i> Company</li>
    <li><i class="fas fa-dollar-sign"></i> Perks</li>
    <li><i class="fas fa-file-contract"></i> Legal</li>
    <li><i class="fas fa-credit-card"></i> Payments</li>
  </ul>

  <ul>
    <li><i class="fas fa-headset"></i> Get Help</li>
    <li><i class="fas fa-comment"></i> Chat With Us</li>
  </ul>
</aside>
```

## 2 - Add input type checkbox
Just above the aside tag add an input type checkbox.

HTML
```html
<input type="checkbox" id="toggler" checked />
<aside class="aside-wrapper">
  <h1 class="logo-text"><span>Qpay</span>
    <i class="fas fa-bars sidebar-toggle"></i>
  </h1>

  ...
</aside>
```

## 3 - Toggle Sidebar
Now based on the checked / Unchecked state of the input, we can show and hide the sidebar in CSS.

The below code snippet says: If the input is checked, move the sidebar to the left by 250px. (250px is the width of the sidebar.)

CSS
```css
/* Toggler Functionality */
input:checked ~ aside {
  left: -250px;
}
```
Now toggling the checkbox will show and hide the sidebar.

## 4 - Hamburger Menu
But we want this to work when we click on the hamburger, not on the checkbox.

1. Hide the input. (display: none)
2. Wrap the hamburger menu in a label tag with the "for" attribute.

**`Id`** of input checkbox and **`for`** attribute for the label should be the same. (This will trigger the checkbox when we click on hamburger icon.)

HTML
```html
<!-- Input checkbox "ID" = "toggler" -->
<input type="checkbox" id="toggler" checked />
<aside class="aside-wrapper">
  <h1 class="logo-text"><span>Qpay</span>
    <!-- Label "FOR" = "toggler" -->
    <label for="toggler">
      <i class="fas fa-bars sidebar-toggle"></i>
    </label>
  </h1>

  ...
</aside>
```

-------------------------

And that's it. We created a toggle functionality without JavaScript.

Here is a complete live demo with the codebase: https://codepen.io/swastikyadav/pen/zYZPyrN

If you enjoyed this post you will surely love the **[my weekly NewsLetter](https://swastikyadav.com/subscribe)**

Thanks a lot for reading.
Cours : Débuter avec le Langage Java
Published: 2021-05-31 12:08:48

---
title: Cours : Débuter avec le Langage Java
published: true
description: 
tags: 
cover_image: https://res.cloudinary.com/practicaldev/image/fetch/s--LjSv5ztc--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://alovps.com/wp-content/uploads/2019/10/livre-java.jpeg
---
À la fin de ce tutoriel, vous aurez les premières bases nécessaire pour débuter la programmation avec Java et d'écrire vos premiers programmes en Java.

Chapitre 1 : [Introduction à Java](https://dev.to/tonux_samb/introduction-a-java-1jc7)
Chapitre 2 : [Variables et type de données](https://dev.to/tonux_samb/les-variables-et-type-de-donnees-en-java-5274)
Chapitre 3 : [Récupérer les informations saisies au clavier](https://dev.to/tonux_samb/recuperer-les-informations-saisies-au-clavier-343m)
Chapitre 4 : [les conditions](https://dev.to/tonux_samb/les-conditions-h8)
Chapitre 5 : [Les instructions répétitives 1/2](https://dev.to/tonux_samb/les-instructions-repetitives-avec-for-3jlj)

------ A venir ----------
Chapitre 6 : [Les instructions répétitives 2/2]()
Chapitre 7 : [Les tableaux]()
Chapitre 8 : [Les tableaux à plusieurs dimension]()
Chapitre 9 : [Les Fonctions/Méthodes]()
Chapitre 10: [Conclusion]()
Daily Developer Jokes - Monday, May 31, 2021
Tags: jokes, dailydeveloperjokes
Published: 2021-05-31 12:00:01

---
title: "Daily Developer Jokes - Monday, May 31, 2021"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Monday%2C%20May%2031%2C%202021"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1258dc381cf.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ How do programming shepherds count their flock?

___A:___ With lambda functions
 -->
Creating a Telegram sticker pack for brand advertising
Tags: design, news, showdev, mobile
Published: 2021-05-31 11:56:49

Our specialists are often invited to speak at major technology conferences. We not only speak and perform at them, but we also present our services at advertising stands, and, in order to leave a lasting, positive impression of our company, we hold contests and quizzes with different prizes and gifts.

One such prize is Evrone Stickers, a set of colorful stickers with jokes and sayings about the digital sphere, which we designed as a coding community promotion. Due to its offline popularity, we decided to digitize the pack for Telegram so that people could use it outside of events.

Read [a case study](https://evrone.com/stickers) & [download](https://stickers.evrone.com/) the sticker pack.
Flutter vs. React Native — What to сhoose in 2021?
Tags: flutter, reactnative, javascript, mobile
Published: 2021-05-31 11:54:41

If you want to develop cross-platform apps faster and more affordably, you’re probably wondering which framework will be the best fit. So, we’ve developed this guide to help you understand the differences between [Flutter and React Native](https://evrone.com/flutter-vs-react-native), the two leading technologies, and determine which is the best cross-platform framework for your app.
Why should small businesses outsource software development? [2021 and beyond]
Tags: startup, discuss, webdev, programming
Published: 2021-05-31 11:44:51

Every small business owners get excited when they are about to start their own online business. 

I'm damn sure you'll be too. 

But sometimes, they tend to do everything by themselves and get demotivated if something goes wrong. 

That's perfectly alright for a normal human. 

But think about this. 

You have a team of developers who will be taking care of the technical part of your online business. 

And you can take care of other business activities like finances, business planning, marketing, etc. 

This team of developers will be working with you even if you don't have a fancy office, a whole bunch of leadership teams, etc. 

Yes, they exist. 

And they are called the [outsourced software development](https://www.rentallscript.com/blog/7-reasons-to-outsource-software-development-for-your-small-business/) team. 

Now, you know what is outsourcing software development is. 

### Let's get into the benefits of outsourcing, 

- Cut down the development costs.
- Get 24/7 tech support.
- Get more external expertise. 

## Some other reasons why you should outsource software development are, 

### 1. Low cost

Recruiting in-house software development professionals will cost you more when compared to outsourcing. 

You have to take care of the overhead cost like office infrastructure and employee salaries. 

### 2. Scalability 

With outsourcing software development, you can scale your business quickly. You don't have to wait for hiring a perfect candidate. 

### 3. Exclusive service

When you outsource a software development team to work for you, you'll have their undivided attention. 

### 4. Expertise

ALERT!! 

Expertise is the most important benefit of outsourcing software development, as you can get access to a global team of skilled experts. 

They'll have the experience of working with so many clients like you. And have complete knowledge of what they do. 

### 5. Faster time to market

Your business can launch into the market faster when you choose to outsource your development team. 

Why do I say this? As we already discussed, the outsourced team has their undivided attention towards your project. 

And they will provide the final product within the timeframe. 

All these benefits are only applicable if you choose to collaborate with the best company. 

Need help with creating an online marketplace like Uber or UberEats? 

[Check out our website here](https://www.rentallscript.com/). 

P.S: You can count on us. Let's get your startup up and running.
why jamstack, explain like I am 5?
Tags: explainlikeimfive
Published: 2021-05-31 11:39:03

---
title: why jamstack, explain like I am 5?
published: true
description: 
tags: #explainlikeimfive
//cover_image: https://direct_url_to_image.jpg
---

Why choose jamstack if I am thinking of developing a website (webapp) for my e-commerce website for selling clothes. 

Limitation: I am learning front-end. previously UI/UX designer trainee.
I made a TicTacToe game with difficulty levels
Tags: python, firstyearincode, gamedev, firstpost
Published: 2021-05-31 11:35:35

I have just began learning python but I wanted to get into action so I made this without completing the lessons. I’d like to get feedback and see what you think about it.

https://drive.google.com/file/d/1KQcLwRkDWP-Ghw-U8tG5h_mpnkGcGCto/view?usp=sharing
Create and publish visually stunning web pages in minutes and remove adobe branding for free
Tags: adobespark, staticpages, webpage
Published: 2021-05-31 11:26:20

### Background 

Creating a visually stunning web page is not easier. Not only it requires technical skills but most importantly it eats up TIME to build something spectacular.
With [Adobe Spark] (https://www.adobe.com/express/create/website-page) one can transform words, images and videos into dynamic web stories in minutes. And the results are absolutely amazing, in no time one can publish a static web page that stands out of its own. Adobe Spark Page is ideal for projects that don’t require more than one page, such as portfolios, resumes, presentations, blog posts, and photo galleries.

> Webpage build using Adobe Spark Page free plan includes
> Adobe branding and you have to upgrade to paid plan the to 
> remove it

## How to remove Adobe branding in free plan
There is a utility that I created, which can remove Adobe brandings without upgrading to paid plan. Isn’t this amazing?

Let’s see what I mean- Below is the comparison of a page created using Spark free plan before and after using the utility.

[Before](https://spark.adobe.com/page/Hpt55/) | ✨ [After](https://www.adobe-spark-page-branding-removal.vagoel.com)
------------ | -------------
![Before](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ezdw7o4lkaccsjgcpkl8.gif)| ![After](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/am89df3ewsnh4w1ficc4.gif) 

> Checkout this repo on GitHub for details -
> {% github vagoel/adobe-spark-page-branding-removal no-readme %} 

### Cheers :beers: !!!
Mitigate Salesforce issues with a custom internal tool
Tags: webdev, salesforce, productivity, technology
Published: 2021-05-31 11:22:18

Never-ending issues with customization, third-party integration, irrelevant reports, insufficient support, and huge additional fees... 

[Eliminate these and other #Salesforce shortcomings](https://uibakery.io/post/simplify-and-improve-salesforce-operations-with-ui-bakery?utm_campaign=ui_bakery%20-%20article%20-%20blog%20-%20cacq%20-%20salesforce%20-%20views&utm_source=devto&utm_medium=webdev&utm_content=article_release) with a custom internal tool created with UI Bakery.
Website lesson 4: HTML + CSS
Tags: html, css, tutorial, beginners
Published: 2021-05-31 11:21:20

Welcome back!

Hopefully you tried everything what was mentioned in the previous [lesson](https://dev.to/filatovv/website-lesson-3-moving-to-css-45pj), checked CSS libraries and it is easy for you to find any tag and use it.

##Sum up
- Before moving to CSS, fill your website with the content (HTML)
- The hardest thing and the first thing - structure. Assign the right position to every object.

###Lifehacks:
- The order of objects goes from left to right, from top to bottom. Follow the order.
- If margin doesn't work, try padding. Usually the problem is: you write _top_, but you need _bottom_
- Float to choose the orientation.
- Check the position (x;y) with your template

##Conitnue on CSS working

No need to mention, how the tags work. Otherwise what for do I write? Remember, every thing is free available on the Internet. You don't need me or anybody else to learn all tags and where to write them. I would like to mention things needed in your website:
- Evry text should have color (use [colorpicker](https://www.google.com/search?client=opera&q=colorpicker&sourceid=opera&ie=UTF-8&oe=UTF-8)), align and font. Try to avoid bright colors that are not comfortable for eyes. Avoid usual colors, like for example, a lot of websites have black background nowadays. Be creative. Avoid simple fonts (friendly fonts), google for something creative.
- Images. Good optimized images are usually the same size. Or choose two sizes (example: 300x300 and 600x400). Better not to make every image different size

### Hover
Do you like your text or images to be bare?
The answer to this problems is _hover_. 

####Initialization
Hover effects
If we have a.`<text>` and b.`<h1 class="text">`, then we initialize:
a. `text:hover { ... }`
b. `.text:hover { ... }`
Learn more about [hover opportunities](https://freefrontend.com/css-hover-effects/)

####Result
Now you add all needed tags for style and add animation to make your website more attractive. If you use images, make a slideshow. To make the links more visible add some text effect. To catch someone's eye on some phrase, add some color change to the text. Make your website look, like you are a full-fledged designer.

Btw, here is my [CSS code](https://codeshare.io/2Bz1JO) for home page.

The next lesson will be dedicated to some base of communication. See you in 4 days.

Check my website for more information
Good luck in your job!
Object.keys ( ), values ( ), entries( )
Tags: beginners, javascript
Published: 2021-05-30 14:17:30

As the title suggests in this post we will try to understand these static functions in the ** Object ** Class. These functions will likely save you a lot of time in future. Let's take a look at each of them.

We will use the following object in all the code examples further

```
let myObj = {email: "srockwell0@exblog.jp",
first_name: "Siusan",
gender: "Bigender",
id: 1,
ip_address: "86.247.200.113",
last_name: "Rockwell"}
```


# Object.keys()

According to MDN, 
*The Object.keys() method returns an array of a given object's own enumerable property names, iterated in the same order that a normal loop would. *

Let's break this down, this method takes an object as an argument and return an array consisting of all the property names(keys) of that object. 
If we pass our `myObj` as argument then we will get the following array

```
console.log(Object.keys(myObj));

// output: Array ["email", "first_name", "gender", "id", "ip_address", "last_name"]
```

# Object.values()

According to MDN,
*The Object.values() method returns an array of a given object's own enumerable property values, in the same order as that provided by a for...in loop. *

Let's break this down, this method takes an object as an argument and return an array consisting of all the values associated with the keys of that object. 
If we pass our `myObj` as argument then we will get the following array

```
console.log(Object.values(myObj));

// output: Array(6) ["srockwell0@exblog.jp", "Siusan", "Bigender", 1, "86.247.200.113", "Rockwell"]
```

# Object.entries()
According to MDN,
*The Object.entries() method returns an array of a given object's own enumerable string-keyed property [key, value] pairs, in the same order as that provided by a for...in loop. *

This one looks scary, but fear not, help is here. This function same as others takes up an object but returns an array of arrays. The inner arrays at index 0  have the key and at index 1 the value associated with it.

```
console.log(Object.entries(myObj));

// output: (6) [Array(2), Array(2), Array(2), Array(2), Array(2), Array(2)]


0: (2) ["email", "srockwell0@exblog.jp"]
1: (2) ["first_name", "Siusan"]
2: (2) ["gender", "Bigender"]
3: (2) ["id", 1]
4: (2) ["ip_address", "86.247.200.113"]
5: (2) ["last_name", "Rockwell"]
```
 
I hope we were able to clear some doubts together.
 Thank you for your time and see you in the next one.
Récupérer les informations saisies au clavier
Tags: java
Published: 2021-05-31 11:10:12

---
title: Récupérer les informations saisies au clavier
published: true
description: 
tags: java
cover_image: https://int64software.com/blog/wp-content/uploads/2018/12/ws-user-input.jpg
---

Dans ce tutoriel, nous allons voir comment accepter les entrées de l'utilisateur. Nous utilisons la classe Scanner pour obtenir l'entrée. Dans l'exemple ci-dessous, nous recevons une entrée de type String, integer et float. Pour cela, nous utilisons les méthodes suivantes :

- 1) public String nextLine() : Pour obtenir l'entrée String
- 2) public int nextInt() : Pour l'entrée d'un nombre entier
- 3) public float nextFloat() : Pour l'entrée des flottants

```java
import java.util.Scanner;

class GetInputData
{
  public static void main(String args[])
  {
     int num;
     float fnum;
     String str;
 
     Scanner in = new Scanner(System.in);
 
     //Obtenir la chaîne d'entrée
     System.out.println("Saisir une chaine: ");
     str = in.nextLine();
     System.out.println("La chaine saisie est: "+str);
 
     //Get input Integer
     System.out.println("Saisir un entier: ");
     num = in.nextInt();
     System.out.println("L'entier saisi est: "+num);
 
     //Get input float number
     System.out.println("Entrez un numéro de flottant: ");
     fnum = in.nextFloat();
     System.out.println("Le numéro de flottant est : "+fnum); 
  }
}
```

Sortie sur la console.
```console
Saisir une chaine: 
Astou
La chaine saisie est: Astou
Saisir un entier: 
313
L'entier saisi est: 313
Entrez un numéro de flottant: 
12.56
Le numéro de flottant est: 12.56
```

Sans plus tardé, on va maintenant voir comment faire des conditions avec Java. 

prochain chapitre: [les conditions](https://dev.to/tonux_samb/les-conditions-h8)
Use of Github
Published: 2021-05-31 11:05:43

**Important Terms**
1 Local repository- directory within ones machine.
2.Remote repository- directory on Github servers.
-they are two types of remotes : 
   a)Origin - Within ones personal github account.
   b)Upstream- repository which someone forked from.
**working on a Repository**
step 1: On github navigate to repositories,then click the green button on the right "New" 

step 2: Go to your terminal/gitbash/cmd  change to the directory you would like to clone the repository to e,g cd Desktop/

step 3: type " **git clone** 'URL of cloned repository'
step 4:After cloning , **cd** 'directory created for the new repository'
step 5:After making changes,cloned repository,**git add .**
step 6: **git commit -m "initial commit"**
step 7: **git push origin 'branch name'**
Why I Switched to vi/vim
Tags: linux, vim
Published: 2021-05-31 10:58:53

When I started writing code, I used Notepad and Notepad++. When I switched to OS X. In my first computer science class in high school we used Visual Studio.

 When I finally migrated to Linux, I started using vi/vim after using nano for a while. Unlike nano, vim is a lot more powerful but is harder to learn.

How did I go from never using [vim](http://www.vim.org/) to using it all the time? How does one make a complete switch? I'll walk you through how I got here and share some tips along the way.

## Reasons to learn vim

If you are trying to learn Vim, or you are on the fence about it, here are my top 5 reasons why I love this keyboard-centered editor:

* The more I used it, the faster I became, and the faster I became the more productive I was.

* It's everywhere. [Linux](https://bsdnerds.org/what-is-linux-shell/), OpenBSD, FreeBSD, Mac OS X and every other operating system supports Vi/Vim. 

* I don't like to use my mouse. I never did anything in Sublime Text without the help of my mouse. This is a annoying, easier to keep hands on the keyboard

* It can be used over the network using ssh. Login to any box and use it.

* I use it for almost everything: programming, writing, blogging, etc.

![vim editor](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a8ht6ydevzn0dpr7u0bb.png)

## Why You Should Switch:

Switching is up to you, but here are my reasons.

Why would somebody use ancient tools like vi/vim when there are so many modern ones out there? 

One day I had to answer this question for my friend. He asked, “Why don’t you use Sublime Text like me?” I explain to him that sometimes it’s better to use older/simpler tools than more complex ones.

Here are my reasons:

1. Learn how to use the best editor ever made.
2. Never get lost in a sea of menus and toolbars that you never use (just like vim does not have any).
3. Have an excuse to use powerful, built-in commands that are available in no other editor (and are faster than anything you can do with a GUI).
4. Work fast using commands

To practice vim, you can use this [site](https://vim.is/)