teleren/devto huggingface dataset:
Complete Jenkins Tutorial | Learn Jenkins From Scratch In 3 Hours
Tags: jenkins, webdev, beginners, tutorial
Published: 2022-01-21 12:58:49

{% youtube nCKxl7Q_20I %}

This LambdaTest Jenkins Tutorial will help you learn the fundamentals of Jenkins and everything you need to know to get started with Jenkins.

This Jenkins Tutorial for beginners and professionals will help you learn how to use Jenkins, one of the most popular CI/CD tools used in DevOps. In this course, Moss a DevOps engineer, helps you understand how Continuous Integration and Continuous Delivery happens with Jenkins. This video course covers the basics of Jenkins, how Jenkins works, Jenkins architecture, Jenkins and GitHub integration, and Jenkins installation & configuration. During this course, you will also learn a step-wise approach for creating your first Jenkins Pipeline, integrating Maven and Jenkins with Selenium, and performing cross browser testing with Jenkins Plugin. By the end of this video, you will know some of the Jenkins best practices that will help you automate the software development pipeline and get better results with this DevOps tool.

You will learn:
🔸 What is Jenkins? 
🔸 What is Jenkins and why do we use it?
🔸 What are the features of Jenkins?
🔸 How does Jenkins integrate with GitHub?
🔸 What Jenkins is used for?
🔸 How Jenkins works in real-time?
How to edit an existing automatic top-up in Revolut?
Tags: todayilearned, tips, tutorial, revolut
Published: 2022-01-21 12:54:29

---
title: How to edit an existing automatic top-up in Revolut?
published: true
description: is actually not as straightforward as one would expect
tags: todayilearned, tips, tutorial, revolut
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/40gukn577yurj2lf2rqr.PNG
---

Setting up an automatic top-up is simple because it's offered as an option when you, well, top-up. However, editing an existing one is actually not as straightforward as one would expect (yes, Revolut UX team, I'm looking at you 🙂). So, in this very short post, I'll show you how to edit an existing automatic top-up in Revolut.

First, in your `Accounts` tab click on the `Add Money` button:

![Revolut - Add money](https://i.imgur.com/wufsQ7k.png)

Second, click on this small icon on the right-hand side:

![Revolut - edit icon](https://i.imgur.com/NYQmsAY.png)

Third, edit the amounts and hit `Save`:

![](https://i.imgur.com/GWvrOU2.png)

And that's it - hope you found this tip useful 💪
Connect your React App with MetaMask wallet
Tags: blockchain, metamask, web3, react
Published: 2022-01-21 12:44:04

While building any dApps on Ethereum blockchain, we face the task of connecting our web app to the MetaMask wallet. 

What this essentially does is gives us access to the accounts associated with the MetaMask wallet. We need access to the accounts from MetaMask wallet to send any transaction from our dApp. 

I am going to show you how to do this for a React web application.
First I'll show the code snippet and then explain it step by step. 

```
const [walletConnected, setWalletConnected] = useState(false);

 const connectWallet = async () => {
 const accounts = await window.ethereum.request({ method: "eth_requestAccounts" });
  setWalletConnected(true);
  };  
```
On the first line -
 ```const [walletConnected, setWalletConnected] = useState(false);``` We define a state variable to store the status of if wallet is connected. This can be used to display the "connect wallet" button conditionally. 

Then we define a function `connectWallet` to be executed after clicking the "connect wallet" button. We need to pass this function to the `onclick` property like this. 
```<button onClick={connectWallet}>Connect Wallet</button>```

This `connectWallet` function is an async function. Next this line of code ```const accounts = await window.ethereum.request({ method: "eth_requestAccounts" });``` requests MetaMask to be connected to the web app. 

After executing this line of code, user will be prompted to connect on a new dialog box opened by MetaMask extension. 

After the user has connected the account/accounts with the webapp, `accounts` is set to the list of accounts returned. 

The next step is to access the connected accounts for the purpose of interacting with smarts contracts on the blockchain.
 
Usually we take the first account from the accounts array i.e. `accounts[0]` for the purpose of sending transactions. Because the first account is the currently selected account in MetaMask under my accounts settings. 
eg: ```await web3.eth.someMethod().send({from: accounts[0])```

We also set `walletConnected` to true. Which can be used to conditionally render the connected status to the user, if needed. 

* * *

There is another way to do this task of connecting to MetaMask . 
First we import Web3 module from web3 library. 

Web3 takes an argument of a provider to create an instance of Web3 object. 

```const web3 = new Web3(window.ethereum);```

Here we pass the `window.ethereum ` provider as an argument to `Web3`. 

Now with this created instance `web3` we can connect to MetaMask by using this line of code, 
 
```const accounts = await web3.eth.getAccounts();```

And then again, as before we can use `accounts[0]` to access the currently selected account and use it to send transactions.
Thinking Like a Programmer - What Nobody Tells You
Tags: programming, codenewbie, python
Published: 2022-01-21 12:41:42

If you are reading this article, then you are either a programmer or aspiring to become one. But being a developer or programmer isn't exactly an easy feat. As a newbie developer, it is common to feel overwhelmed by the influx of information as everything is new and unfamiliar. Most times you'll find yourself asking yourself - "What the heck am I doing". This feeling is exacerbated by the sight of other programmers who are "good" at solving problems, implementing logic, and building sustainable software.

This feeling is understandable, everyone in the programming sphere is either facing or has faced this problem before. Every efficient programmer/developer today was a beginner/newbie yesterday. 

But what is the best approach to becoming better? What steps should one take to become a skillful programmer? In this article, we'll go through the steps on how to become and feel like a professional developer in your field. This is the No B.S Guide to Thinking Like a Programmer

## Build Problem Solving Skills

Despite one's thoughts or beliefs, every efficient programmer today is only as good as he/she is because of the time and energy such an individual has dedicated to developing problem-solving as a skill. You can only solve problems quickly and efficiently if you have solved/seen the problem before.
Now you're probably thinking "How can I solve every problem out there? That's not possible." This is true, you can never be able to solve every problem in the world (That's a job for superman 😎). What solving problems to become better basically entails, is to deeply understand the solution to the problems you've faced before, so that you can use the ideas to approach and ultimately solve more sophisticated problems.
This is exactly why newbie developers should aspire to learn and have a good grasp of Algorithms and Data Structures. The concept gained from mastery of this skill can be applied to most problems one could face.

## Sort Out Some Way To Solve Any Programming Challenge.

One thing you should keep in mind is that as a programmer, you are bound to face problems. Your passion to code should stem from the desire to effectively solve these problems. Some of these problems will be difficult, and as a beginner these problems will naturally take time to resolve, most newbie programmers give up on programming at this point. Instead of giving up, you should patiently take time to deliberately practice and hone your problem-solving skills. The more you practice, the better you become at approaching and solving problems efficiently.

## Start Programming Like a Pro

Once you've learned the basics of being a programmer, which is the ability to solve problems. You need to start coding. Don't Wait. Your ability to solve problems should propel you to solve more problems as you advance on your journey. Constantly keep learning, don't give up. Whether you are trying to land a developer job or to solve personal tech problems. Thinking like a programmer will help you get there.
Reviews released 0.1.5 on PyPi
Tags: python, codereview, tui, dashboard
Published: 2021-05-08 14:54:35

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

`Reviews` is a terminal UI Dashboard for monitoring requests for code review across several Github repositories and pull requests.

It's been a personal project I've been incrementally adding to over the past few weeks and it's been paying off 10x. In a normal workweek, it can be time-consuming to keep on top of several teams, across several repositories, and track who needs a code review, and which code reviews are complete and ready to ship. 

In the latest release, it's even easier to see which pull requests you have approved, and which have been approved by others.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n12bx0pkqq4zv3do6f9r.png)

If you are interested in using the TUI, want to check it out, or even contribute the source code is freely available on Github (https://github.com/apoclyps/reviews) and it can be installed directly from PyPI.

Want to get started right away? Check out the following snippet:

```bash
export GITHUB_USER="your-github-username"
export GITHUB_TOKEN="your personal github token used for interacting with the API"
export REPOSITORY_CONFIGURATION="apoclyps/reviews"

pip install --upgrade reviews

reviews dashboard --no-reload
```

Release discussion and changelog on Github: https://github.com/apoclyps/reviews/discussions/91
The way I lost my logic
Tags: programming, career, algorithms, learning
Published: 2022-01-21 12:19:58

I remember the old days where I switch on the computer only to use Paint and it was a new experience for me. Later, when I was introduced to programming, I saw only black and white screens. I tried to learn simple things at first. It is a basic rule that, If we are learning something, we must perceive the basics first. So does the programming.

At the school, they spoon-fed the basics of programming, and the first language I learned was SQL. I remember I was only taught the `SELECT`, `INSERT`, `UPDATE`, `DELETE`, and `WHERE` commands. I used this handful of commands to solve the questions in the exams. When I started the 101 of C Language, the `printf`, `scanf` was all about day one. Years passed, I have gone through many of the algorithms like sorting, searching, and more. Every new thing I have learned excites and keeps me motivated. Meanwhile, the technology was getting advanced day by day, also there came new languages, new ways of programming which made the programmers' lives easier. There are one-liners for many of the logical functionalities, there are community answers to many of the logical problems I have. I get used to it and I never had to use the algorithms I have learned. Eventually, the brain began to remove unused resources. Here I'm managing multiple stacks and doing different projects and learning new things, but literally, I'm not challenging my brain as I used to do in my starting days.

As a developer, it is good to have ready-to-use functionalities, it saves our time and gets better results. It is better to challenge our brains with logical questions every once in a while. After all, we should try to keep up with the technology updates every day. For me, It helps while making decisions.
Loading images with Svelte
Tags: svelte, javascript, ux, design
Published: 2022-01-21 12:18:16

Poor network conditions cause images to load slower, sometimes leading to broken layouts. You could exclusively rely on the [alt](https://www.w3schools.com/tags/att_img_alt.asp) attribute, but a more robust solution would handle such cases. Therefore, showing a placeholder or a spinner until displaying a fully loaded image could significantly improve the user experience.

The [Image](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image) web API exposes two methods, `onload` and `onerror` that help managing these situations:

```js
import { onMount } from 'svelte'
export let src;

let loaded = false;
let failed = false;
let loading = false;

onMount(() => {
    const img = new Image();
    img.src = src;
    loading = true;

    img.onload = () => {
        loading = false;
        loaded = true;
    };
    img.onerror = () => {
        loading = false;
        failed = true;
    };
})
```
the above [Svelte](https://svelte.dev/) code is part of an `Image` component with the following template:

```html
{#if loaded}
	<img {src} />
{:else if failed}
	<img src="not_found.jpg" />
{:else if loading}
	<img src="loading.gif" />
{/if}
```

A full working example can be found [here](https://svelte.dev/repl/327aa441312e41d7937b4adcdab86765?version=3.46.2).

Cover photo by <a href="https://unsplash.com/@mike_van_den_bos?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Mike van den Bos</a> on <a href="https://unsplash.com/s/photos/loading?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
Moment stealer
Tags: discuss, personal, improvement, growth
Published: 2022-01-21 11:58:43

---
title: Moment stealer
published: true
description: Put the damn phone away
tags: discuss, personal, improvement, growth
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3roif6zqewkmym31v2l8.jpg
---

_Originally published on [my blog](https://www.nikola-breznjak.com/blog/daily-thoughts/moment-stealer/)._

> Put the damn phone away when you're supposed to be having a conversation with someone in person. Some love talking about conspiracy theories and how 'someone up there' is controlling them. It pains me to see that we (yes, me too, as I'm not some kind of a no-mobile monk) are letting ourselves be controlled by our own devices, and all that to a detriment to our human connections.

---

This is [why I write](https://www.nikola-breznjak.com/blog/daily-thoughts/why-do-i-write-these-daily-thoughts-posts/) these 'daily thoughts' posts.
Ultimate Character Concept for Your Game to Hit the Market Running
Tags: character, concept, art, gamedev
Published: 2022-01-21 11:55:53

We know well that every blockbuster game starts with an ultimate character concept art as a background of an eye-catching game design. Namely, video game concept art contributes to the aesthetic nature of game characters, helping to retain players and keep them engaged in the gameplay.

Character concept art significantly contributes to the entire game development process. Specifically, it depicts a game hero in detail, outlining their features in such a way that everybody can understand and feel their nature. Two people can read the same hero description and imagine different pictures—concept art is about creating a single approach toward the character so that the players equally understand it.

[https://www.innovecsgames.com/blog/character-concept-for-your-game/](https://www.innovecsgames.com/blog/character-concept-for-your-game/)
Email Newsletter template using CSS
Tags: css, tutorial, html, webdev
Published: 2022-01-21 11:32:56

This is the tutorial about how to create Minimalistic Newsletter using CSS.

[Demo](https://codepen.io/iammanojrathod/pen/ZEXdRov)

HTML code: -

```
<div class="container">
  <h1>Subscribe to the Newsletter</h1>
  <div class="mail_box">
  <input type="email" placeholder="Enter your email">
  <button>Submit</button>
  </div>
  <p class="footer">Created with ❤ by <span>Manoj Rathod</span></p>
</div>
```

CSS code: -

```
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  background: #F5EEDC;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.container, .mail_box{
  display: flex;
  justify-content: center;
  align-items: center;
}
.container{
  width: 80%;
  height: 350px;
  padding: 50px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
}
.mail_box{
  position : relative;
  border: 2px solid #0092ff;
  border-radius: 5px;
  width: 400px;
  height: 50px;
  padding: 10px;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3)
}
.mail_box input{
  background: none;
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  font-size: 15px;
  color: #0092ff;
}
input::placeholder{
  font-size: 15px;
}
button{
  position: absolute;
  right: -7px;
  padding: 9px 20px;
  border: 2px solid #0092ff;
  border-radius: 5px;
  outline: none;
  margin-right: 10px;
  background: #0092ff;
  color: #fff;
  cursor: pointer;
}
button:hover{
  background: #0d6efd;
}
.footer{
  position: absolute;
  bottom: 10px;
}
.footer span{
  color: #0d6efd;
}

```
Dasar Python (Programing Langguage) - 1
Tags: python
Published: 2022-01-21 11:11:47

Python adalah salah satu bahasa pemerograman komputasi yang banyak digunakan untuk kalangan umum. terutama digunakan  untuk _data science_ kemudian untuk membuat website. namun tidak hanya itu saja, kegunaan bahasa pemerograman ini besifat umum (_general purpose_). python dapat digunakan untuk membuat apapun. namun tetap terbatas dalam beberapa hal.

Python sendiri sekarang sudah versi 3.10 dengan update terbaru. sedangkan untuk versi 2.7 sudah tidak didukung lagi. untuk penjelasan mengenai catatan update nya, bisa baca di [log release](https://www.python.org/dev/peps/pep-0596). namun saya sangat merekomendasikan untuk mengunakan python versi 3.7 keatas.

saya akan memperkenalkan dasar dari python:  
## Perkenalan Variabel
python mempunyai berbagai macam variabel:
> Note: dalam python variable juga dianggap sebagai objek.

### INTEGER
Number atau integer untuk mendeklarasikan bilangan bulat.
```python
nomor = 1 
```
   penjelasan : dalam kode tersebut diketahui bahwa `1` adalah sebuah variable integer yang di deklarasikan kepada `nomor`. sehingga kita dapat tarik kesimpulan bahwa variabel `nomor` adalah sebuah variabel integer yang berisi nilai `1`.

namun dapat juga dideklarasikan dengan.
```python
nomor = int(1) # dengan mengunakan int()

# atau

nomor = int("1") # "1" adalah string, kemudian di inisialisasi menjadi integer.
```
untuk contoh pertama tidak banyak yang mengunakan membuat variabel dengan code `nomor = int(1)` hal ini sama halnya dengan `nomor = 1`. untuk yang kedua `nomor = int("1")` adalah cara yang cukup umum untuk mendeklarasi atau untuk mengkonversi sebuah variable integer dari variable string.

### FLOAT
float adalah bilangan pecahan.
```python
pecahan = 1.00 # cara mendeklarasikan float

# atau
pecahan = float(1) # hasilnya akan 1.00
```

### COMPLEX
nah untuk tipe Komleks (COMPLEX) ini adalah bilangan real dan imaginari. untuk orang awam seperti saya ini cukup sulit dimengerti. namun ini dapat berguna untuk aktifitas science.
```python
bil_complex = 1+4j
# atau
bil_complex = complex(1,4)
```

### BOOLEAN
untuk Boolean hanya ada dua nilai yaitu `True` atau `False`
```python
benar = True
# atau
salah = bool(False)
```
untuk boolean sendiri bisa dihasilkan oleh operasi .....

### String
String adalah kumpulah dari huruf,nomor ataupun simbol yang membentuk kata.
```python
kata = 'ini' // dapat mengunakan tanda kutip satu
kata = "itu" // atau mengunakan tanda kutip dua
ini_string = '1' // ini string walau berisi nomor 1
ini_integer = 1 // ini adalah integer berisi nilai 1
```

### NONE Type
ini adalah suatu tipe yang dideklarasikan untuk variable yang belum tau akan dideklarasikan dengan tipe apa.
```python
tidak_tahu = None
```
Should I use 402 for methods that allow payment?
Tags: help, restapi, http
Published: 2022-01-21 11:07:48

Ι have the following question:
https://softwareengineering.stackexchange.com/q/436150/249660

And I was thinking if it is good to utilize the 402 despite being expiremental. Is it used despite being an expiremental status code?

The idea was to make an appointment system and if for an appointment needs a beforehand payment to use the 402 status code.
DevTips Daily Update 21/01/22
Tags: javascript, beginners, tutorial
Published: 2022-01-21 10:47:43


So this week's DevTips daily tutorials have been a bit truncated - I was ill at the start of the year with COVID so i'm just catching up with things and starting to feel better!

I did publish a few videos however carrying on with our end to end project, looking at PM2 logs, securing the ports of our Digital Ocean droplet and creating specific Express routing files and finally doing a review of our progress on the project by looking at our User Stories!

Here's a link to each individual tutorial:

[Viewing PM2 Logs](https://youtu.be/N6u3moFt6vk)
{% youtube N6u3moFt6vk %}

[Securing a MongoDB database with Digital Ocean](https://youtu.be/xdOKFJB0ZQ4)
{% youtube xdOKFJB0ZQ4 %}

[Creating Express Routing Files](https://youtu.be/uBwACkIzE6w)
{% youtube uBwACkIzE6w %}

[User Story Review](https://youtu.be/q1zg-a0FluI)
{% youtube q1zg-a0FluI %}


Next week we're going to be carrying on with the project again, starting to make progress on the front end side of things, giving the user something to generate the short URLs.

Thanks for watching 👍
Feature update: tag selector
Tags: meta, product, ux, changelog
Published: 2022-01-21 10:31:16

Hello DEV community!

Just a quick update to let you know about a new feature we've rolled out: a new tag selector for the V2 editor 🎉

## How does it work?

The base functionality of the selector hasn't changed too much - you should be able to click into the tags field, see suggestions of "Top tags" and type to search for the tag you want.

### Adding a tag

You can add a tag to your post by doing one of the following:

- Clicking a tag that appears as a suggestion in the dropdown
- Using the `Up`/`Down` arrow keys to highlight a suggestion and pressing `Enter`
- Typing a `,` or space after your tag name (e.g. typing "javascript,"
- Typing your tag name and simply clicking elsewhere in the page to "move away" from the selector

### Editing or removing a tag

Once your tag is added, it should be clearly reflected in the UI as a set of buttons. Clicking the 'X' will remove the tag, and clicking the tag's text will put it into "edit mode" for you to make any changes.

If you are currently typing a long list of tags, you can also pop your previously added tag into "edit mode" by pressing `Backspace` while you're in the empty text field.

## What problems does it solve?

We've had reports of various issues with the previous tag selector, which we believe this new version resolves. Particularly:

- It wasn't very clear when a tag had been successfully added
- If you added a lot of long tags, the field scrolled horizontally and became hard to read/edit
- The old selector created a "focus trap" on the page - when you used the keyboard to navigate through the form you would get stuck in the tags field
- It didn't provide any feedback to screen reader users, and didn't conform to a lot of accessibility best practices for this kind of component

## Future plans

The new tag selector is built using a new component: `<MultiSelectAutocomplete />` which is designed to be reusable in other areas, including with items other than tags. In the near future you should start to see this component pop up in other places in DEV!

## That's it!

If you'd like to check out the code, have a look at [this epic in GitHub](https://github.com/forem/forem/issues/14845) which links to the incremental PRs that rolled this out. You'll also find the component in [our Storybook](https://storybook.forem.com/), including documentation on how to implement it.

We look forward to hearing how folks find the new tag selection experience, and if you have any feedback or questions please let us know!