teleren/devto huggingface dataset:
How to add an icon inside the button using CSS
Tags: html, css, codenewbie, beginners
Published: 2021-04-10 13:29:12

***Hello, guys In this tutorial we will learn how to add an icon inside the button using CSS.***

###Common Query###
1. How to add icon inside button
2. Button with icon CSS
3. add icon using CSS

**Hello, guys In this tutorial we will try to solve the mentioned query. and also we will learn how to add an icon inside the button using CSS.**

First, we need to create two files **index.html** and **style.css** then we need to do code for it.

###Step:1###

**Add below code inside index.html**
```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>How to add icon inside button using CSS Only</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap" rel="stylesheet">
  </head>
  <body>
    <div class="button-outer">
      <button class="button">
        Book Now
      </button>
    </div>
  </body>
</html>
```

###Step:2###
Then we need to add code for **style.css** which code I provide in the below screen.

```css
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css);

* {
    padding: 0;
    margin: 0;
    font-family: 'IBM Plex Sans', sans-serif;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
.button {
  font-size: 25px;
  padding: 10px 20px;
  background: #3f0069;
  border: unset;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 0 2px #000;
  outline: 0;
  position: relative;
}
.button:before {
  content: "\f017";
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
```

###Add an icon inside the button Video Output:###
{% youtube b086muQeNnI %}

###Add an icon inside the button codepen Output:###
{% codepen https://codepen.io/stack-findover/pen/gOgEReJ %}


###Some JavaScript Tutorial###
> <a href="https://blog.stackfindover.com/how-to-integrate-webcam-using-javascript/">How to Integrate Webcam using JavaScript</a>

> <a href="https://blog.stackfindover.com/best-way-to-use-iframe/">Best way to use iframe on any website</a>

> <a href="https://blog.stackfindover.com/what-is-javascript/">What is JavaScript</a>
Cryptography with Python using Fernet
Tags: python, cryptography
Published: 2021-04-10 13:20:35

Let us look at how to encrypt text and files using Python.
For this we are going to be using [Fernet](https://cryptography.io/en/latest/fernet.html) which is a part of python's cryptography package

So let us get right into it

Ok firstly we need to downloaded the cryptography package using `pip`

On Windows:

```
pip install cryptography
```

On Linux/macOS:

```
pip3 install cryptography
```

After we have executed the command in the terminal, we are ready to start coding.

You might want to use your favourite code editor (vscode, sublime text, atom etc...) or any IDE.

Now let us first import the required library

```python
from cryptography.fernet import Fernet
```

Then we are going to define a function that will write the key to a file

```python
def write_key():
    key = Fernet.generate_key() # Generates the key
    with open("key.key", "wb") as key_file: # Opens the file the key is to be written to
        key_file.write(key) # Writes the key
```

We will also write down a function that will help with reading and loading the key into a variable

```python
def load_key():
    return open("key.key", "rb").read() #Opens the file, reads and returns the key stored in the file
```

Now let us take the message we are going to encode as user input and encode it to bytes because that is how fernet works

```python
message = input("Message: ").encode() # Takes the message as user input and encodes it
```

Now we need to write are top secret key to the key file. We are going to run this only once and then comment the line out because we don't want it to write a new key down every time the code is run. 

```python
write_key() # Writes the key to the key file
```
Now we need to load the key i.e. read the key from the key file and store it in a variable called as `key` though you can name it whatever you want

```python
key = load_key() # Loads the key and stores it in a variable
```

Now we need to initialize the fernet object by passing in the key we just loaded

```python
f = Fernet(key)
```

Now let us get to the main part, encrypting the message
Also let us print it out

```python
encrypted_message = f.encrypt(message)
print(encrypted_message)
```

Output:

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1618045556166/NkVXFrg-7.png)

You see that the encrypted message cannot be understood by anyone so it is safe now and will be the same unless decrypted with the same key

To decrypt, it is a very similar process
```python
decrypted_message = f.decrypt(encrypred_message)
print(decrypted_message)
```

Output:

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1618045676137/GQuPm-UeO.png)
So here, first the message is encrypted and is printed out and then we decrypt it and print it in the next line. If the initial message and the decrypted message are the exact same, our code has worked!!!

So that was it for this tiny blog (and it was my first blog ever so leave down some feedback!!!)

# Video Tutorial:
[Link](https://youtu.be/P2k4f1tu-ss)
{% youtube P2k4f1tu-ss %}

%[https://www.youtube.com/watch?v=P2k4f1tu-ss]
Second Monitor: Friend or Foe?
Tags: hardware, display, productivity, code
Published: 2021-04-10 13:07:18

---
title: Second Monitor: Friend or Foe?
published: true
description: Is a vertical computer monitor a good addition to your desk?
tags: hardware, display, productivity, code
//cover_image: https://direct_url_to_image.jpg
---

The perfect computer monitor setup does not exist. I find that often my needs change and my preferences shift, so that I'm rarely happy with my monitor situation for more than a few weeks at a time. 

A normal path people take is to use a single monitor and then to add a second. This will likely cost you under $150 (or will be a hassle-free ask from IT) and will simply mean plugging in just one HDMI or USB-C cord. Now you'll have twice the real estate (if not more).

PC Magazine has some good tips on [improving your second monitor experience](https://www.pcmag.com/how-to/6-ways-to-improve-your-dual-monitor-setup). One thing they fail to mention, and it took me a long time to realize, is that a second widescreen monitor invites the same work habits as the main monitor. The dashboards, email programs, and social media accounts distracting you on Monitor 1 are easily dragged over to Monitor 2... where they still distract you, just not enough to close them out. 

My second monitor was a dumping ground for things I wanted to deal with later (or never) as well as being an all to convenient fit for ever-present emails and sometimes-present Youtube videos, Spotify playlists, and similar diversions. 

For a time I tried a vertical monitor in the second position. This was briefly an improvement because it forced a chance in my behavior -- windows were no longer as easy a fit so I had to think about what I was putting there. Also videos no longer looked as inviting and my email wasn't wide enough to do more than look out for incoming messages. 

I found a vertical monitor could improve productivity with long spreadsheets, long documents (like specifications and contracts), and to be good for text editors where large swathes of code or multiple components could be visible at once. 

Still, the distraction was there. I had used 2020 to construct a nearly distraction-free workplace, complete with a great desk, ergonomic chair, [super quiet fan](https://helpatmyhome.com/quietest-fan/), tangle-free power cords, a wonderful LED desk lamp for working late, and all the other things a mind bent on productivity could come up with. I even had my [pen and paper notes](https://dev.to/toymachine/secret-weapons-pen-and-paper-1nhb) going, right next to my laptop... yet I had this second monitor and I couldn't stop myself from putting weapons-grade distractions on my second monitor. I'd catch myself checking into dashboards and analytics constantly when one or twice a day was sufficient. 

As you have likely guessed. I'm down to a single display and I'd urge you to try the same for a time as well. Don't go too small -- 15" on a laptop or 24-27" on a desktop is great -- but one clean, well-maintained space offers a fraction of the distraction of a multiple displays.
What is Simple way to Recover Lost Quickbooks files?
Tags: quickbooks, quickbooksdata, quickbooksfiles
Published: 2021-04-10 13:03:32

Use this advanced and powerful Quickbooks file recovery software to repair your damaged Quickbooks files. It can quickly restore all missing or deleted Quickbooks files .qbw files with ease. 

This software can quickly correct all of the Quickbooks errors and make them available in your system. It generates a log report for each phase of the recovery process, that can be used to evaluate the recovery process in the future. 

Since it has an improved and responsive user friendly interface, both technical and non-technical users can easily use this dependable software without any technical knowledge. Before you use this tool, I recommend that you try the free demo version and see what features it has. 

Visit here https://www.recoverfilesdownload.com/quickbooks-repair-tool.html to get more information
Monolithic VS Microservice Architecture
Tags: microservices, docker
Published: 2021-04-10 12:29:03

The web is changing... as it always does. But this time, I will tell you how microservices are contributing to that change. To begin, we should first know what the old standard of **_monolithic architecture_** actually is. I found this helpful introduction on [whatis](https://whatis.techtarget.com/):

> Monolithic architecture is the traditional unified model for the design of a software program. Monolithic, in this context, means composed all in one piece. According to the Cambridge dictionary, the adjective monolithic also means both too large and unable to be changed.

-- According to [Ivy Wingmore](https://whatis.techtarget.com/definition/monolithic-architecture)

Let's focus on that last sentence about being unable to be changed. In the case of software projects, this isn't actually the case. However, it does indicate the difficulty of which implementing change can be. Any change to one component has the capability of breaking the entire system.


###Microservices
Microservice architecture is an architectural style that structures an application as a collection of microservices where communication between microservices is often performed using API calls.

This image serves as an excellent example:
![mediamore microservices](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bphcrbm4f6budvwvejqw.png)
-- [Sahiti Kappagantula](https://www.edureka.co/blog/microservices-tutorial-with-example)

Mediamore is an entertainment company, using different microservices to power their app. They break it down into these services:
* most liked
* user info
* video uploading
* most trending
* content
* recommendations

and many more that aren't featured in this graphic.

###Making Changes
Each microservice is likely maintained by its very own team (being a larger company). If the team working on video recommendations makes a change to their service, it only affects that one service. In terms of reliability, this means that a breaking change would only break the video recommendations. Users would still be able to browse videos, upload, comment, and everything else they'd normally do.

While microservices certainly are flexible and resilient, the more you have the tougher it can get to manage all of them.

This can definitely get a little convoluted if the microservices are obnoxiously fragmented or illogically compartmentalized. In a hilariously overexaggerated example:

{% youtube y8OnoxKotPQ %}

###Summary:
Microservices are the new gold standard. They are more reliable and easier to change than typical monolithic projects. However, they aren't necessary in every case. Be sure to think about whether or not they're right for your project.

I made a video walking you through deploying a Node.js To-do app on Docker. I also elaborate a little further on microservice architecture. Be sure to check it out:

{% youtube U_LJWsTo5kg %}
Stress-free Agile Development
Tags: awesomitylab, codeofafrica, agile, stressmanagement
Published: 2021-04-10 12:25:48

Week Six down!
Here's to another successful week done at the Task Force.

This past week was a code-less week unlike most of the previous ones, instead we learned more of the supplementary skills and tools we need as developers to succeed.

## Agile Development
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yivlglpsc9qm3d7dj2gn.jpg)
The first thing I got from this week is a deeper understanding of project development, specifically the Agile project development process. The agile development process focuses on delivering a Minimum Viable Product (MVP) to the client as soon as possible. This means delivering the product in smaller parts which provide a certain amount of value to the client to keep them motivated and happy because of the progress that they see. This is different from the waterfall model where the product is built in a way that it able to provide value only if it is finished (i.e there is a linear sequence of steps and once a step has been gone through there is no going back until all steps are finished).

## Resilience and Stress Management
![Alt Text](https://i.pinimg.com/originals/46/80/84/468084d5dcb55df9332af3f4400f50f4.png)
Something else I learned (and this is essential) is more about Resilience and Stress Management. Simply resilience is the ability of one to recover/deal with difficult situations. This is therefore necessary to deal with stress. Different people deal with stress in different ways, some healthy and others not, some effective and others not but the key to being able to deal with stress is knowing yourself first and what it takes to raise your stress level and also keeping a healthy body and healthy mind through exercise and meditation.

## Conclusion
Closing the week we put our survival instincts to the test with an exercise about what we would prioritize if we were stranded in the middle of the Atlantic ocean. I gotta say enjoyed these last five days partly because there was not much work (obviously) and because of the cool things I learned.
Constructors in C#
Tags: csharp, dotnet, programming, beginners
Published: 2021-04-10 12:19:44

In this video, I have explained different types of constructors in C# with help of an console program example.


More Info:
✔ Blog: https://dotnetcrunch.in​
✔ Instagram: https://instagram.com/dotnetcrunch​
✔ Facebook: https://facebook.com/dotnetcrunch​
✔ Twitter: https://twitter.com/@dotnetcrunchh
Top 5 Angular videos from March, 2021
Tags: angular
Published: 2021-04-10 12:10:20

Hi,

Here's our most recent top 5 Angular video roundup from last month, with topics like migrating from Angular 10 to 11, using advanced Angular patterns, microfrontends, building better apps and making it easier to begin using Angular.

You can either [check it out here](https://blog.meetupfeed.io/top-5-angular-march-21/) or choose your favorites below.

[Migrate from Angular 10 to Angular 11](https://meetupfeed.io/talk/angular-11-migration)

Learn how to migrate Angular applications from version 10 to version 11 and also look what is new in Angular 11 in this video.

[Advanced Angular​ Patterns – ForRoot & ForChild](https://meetupfeed.io/talk/advanced-angular-patterns)

In this video tutorial​ we will have a look at an advanced Angular design pattern – forRoot() / forChild(). We will see what kind of problems it used to solve many years ago and how we can use it today in order to configure Angular modules. Besides this we will have a look at source code of Angular and check how Angular team used this pattern for RouterModule.

[Federated Angular: Micro frontends with module federation](https://meetupfeed.io/talk/angular-microfrontends-module-federation)

We probably don’t have to introduce Manfred Steyer. He recently answered a bunch of interesting questions about micro frontends and module federation with Angular. Check it out!

[Electronify your Angular app!](https://meetupfeed.io/talk/electronify-angular-app)

Aristeidis is a Front End Web Developer that works for Plex-Earth and specializes in the Angular framework. He is a Google Developer Expert for Angular and an Angular Senior Tech Instructor for Code. His presentation will show you how to increase your Angular app’s efficiency.

[Lowering the barrier of entry to Angular with Tracy Lee](https://meetupfeed.io/talk/lowering-angular-barrier)

From time to time, Angular happens to be criticized for having a higher level of entry compared to similar technologies. In her presentation, Tracy Lee explains how to make things much easier for people who are planning to use Angular.

Hope you'll like it.

Regards,
MeetupFeed
Daily Developer Jokes - Saturday, Apr 10, 2021
Tags: jokes, dailydeveloperjokes
Published: 2021-04-10 12:00:22

---
title: "Daily Developer Jokes - Saturday, Apr 10, 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=Saturday%2C%20Apr%2010%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/5e1259b9b89f4.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:___ What do you call optimistic front-end developers?

___A:___ Stack half-full developers.
 -->
My Approach to Learning Programming Concepts - When, Why?
Tags: javascript, beginners, webdev, programming
Published: 2021-04-10 11:50:52

While my coding journey might be young, there are several observations that I have made.   One of these observations surrounds how programming concepts are taught and how we as learners interpret the concepts.

Now, in this day and age there are a million ways and a million sources that facilitates someone learning to code without going to college or a Bootcamp.  Some of the most notable include FreeCodeCamp, YouTube, Udemy and we could go on forever.  But what I think is lost upon students of code, and it happened to me when I just started out, was not asking the right questions in order to cement or clear up our understanding of a concept. 

With that in mind, I am going to briefly explain the approach that I have personally taken to take my understanding of programming concepts to the next level.  

Now, a lot these concepts, no matter the language or framework are taught in abstraction.  You understand the syntax of the language, you know how to create a variable etc. At the moment the instructor or lecturer is teaching you the concept of say, Arrays.  He then gives you some data and tells you to solve the problem and you do because at that moment you are learning Arrays.  

But as a student of code one should not be just following along blindly and copying the code.  As a student of code, one should be actively asking themselves two questions when learning a programming concept, when and why.

###When? 

Since adopting this process in my learning, whenever I am introduced to a new concept the first question I ask myself is, when would I use this?  For example, I am learning about Arrays in JavaScript, when would I use an Array? 

When is an interrogative word and in that vein it leads you to more questions and more questions and by the end of it the concept is cemented.

###Why?

The second question I ask myself is why? Why use this concept over another.  Why use Array.Map() over Array.forEach(). One why will lead to another and then another but I guarantee you that this will enhance you understanding of any concept.

##Conclusion

These are the steps that I have taken in my young coding journey.  They might not work for everyone, however, they  helped me significantly improved my understanding of concepts and simultaneously my confidence in knowing when and where to apply concepts.


*Thanks for the taking the time out to read my post. It is truly appreciated.  If you want to know more about my journey follow me at:*

Twitter: @fikra_dev
 
Github: https://github.com/FikraDev