teleren/devto huggingface dataset:
CSS Hover Effect
Tags: css, webdev, vscode
Published: 2021-07-16 12:06:50

Hello Guy's and Welcome to another topic on CSS.

How many times have seen on any website that whenever you move your cursor on any button the color of button changes or the size of the button increases or decreases. And as you move away your cursor from the button , the button regains it's previous property. 

How Cool is that!!!

This is all done with the help of <b> CSS Hover Effect!!!</b>

Using CSS property you can apply styles on an element on mouse over. 

Today I will be showing you how to use hover effect and will also talk about transition property and will be showing you how to convert a square into a circle on mouse over. 

Let's Start 😎😎

As I will be converting a square into a circle therefore I need to start by creating a square . 

Step : 1 <b>HTML</b>
In your html file inside the body tag create one empty div as shown below. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bmr1v8ikqp1l3axxnh87.PNG)


Step : 2 <b>CSS (Creating Square)</b>
In your stylesheet or style tag write the div element and give it height, width, border, background-color and margin. You can see the snippet of the code below .
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u1di62ubu6fucmjtcavq.PNG)

You might have noticed that along with other properties I've also used a property "transition". 
Basically transition property is used perform some changes smoothly according to the time you have given . You can see that I've given duration for width and height as 8 seconds. This means my width height will require 8 seconds to change to it's new value. So that's was about transition property but we still have lot of work to do.

So now our Square is created and should like:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j8696jsntz6jjc1ut2de.PNG)

Step : 3 <b>CSS (Hover)</b>
Syntax for hover property is element:hover. In our case the element is div . So our code goes as follows: 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4wkvcqfs57g9v9hxny02.PNG)

Now another new property that I've used is border-radius. This property provides us to style corner's of selected element. So by providing border-radius as 50% all the corner's of our square will be styled and it will be converted into circle. 

So that's it with the code and it's time to see our square get converted into circle. 

Let's see the output😎😎 :

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

So I think that you all are clear with the code and also some topic covered. We saw some properties like transition and border-radius properties that are very much helpful in styling.

If you all want to know about the <b>Types of CSS</b> then please have a look on my previous post.

So that's it for Today and will meet you all in next post 😊😊.
Till then Happy Coding 👩‍💻👩‍💻.
Daily Developer Jokes - Friday, Jul 16, 2021
Tags: jokes, dailydeveloperjokes
Published: 2021-07-16 12:00:13

---
title: "Daily Developer Jokes - Friday, Jul 16, 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=Friday%2C%20Jul%2016%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/5e1258bb6df5f.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 did the spider do on the computer?

___A:___ Made a website!
 -->
Best Way to Convert PST to EML File
Tags: psttoemlconverter, convertpsttoeml, psttoemltool
Published: 2021-07-16 11:59:16

This tool converts Outlook PST files into EML format. The original folder structure can be kept. EML files can be used to transfer messages between different email clients or systems.

<h2>Difference Between PST and EML File</h2>

<h3>Outlook PST Data File</h3>

Outlook Data File (.pst) contains all your Outlook items, including email messages, tasks, contacts, and calendars. You will need to convert your email messages from Outlook to Mozilla Thunderbird or Apple Mail to migrate them to Mozilla Thunderbird or Apple Mail.

<h3>EML File Format</h3>

An EML file refers to an email message saved using an email program, such as Apple Mail, Mozilla Thunderbird, or Microsoft Outlook. It may contain the message's content and store additional attachments. EML can only be saved for one message. Most email clients allow you to import messages from EML files but not PST.

<h2>Why the User Need to Convert PST to EML File</h2>

<ol>
<li>EML files are easy to store and access.</li>
<li>It helps transfer single email messages.</li>
<li>Multiple email clients can use it.</li>
<li>It can be used with multiple Operating Systems.</li>
<li>You can open the file in web browsers by changing the file extension in the .mht </li>
</ol>

<h2>Convert PST to EML Online</h2>

Your confidential and essential data is stored in PST files. All of your data, including contacts, tasks, and private messages, will be transferred to another server when you use an online service that converts email from PST into EML. You have no control over the data as it is being processed on an unspecified computer. Only then can you download the EML files.

<h2>Professional utility to convert PST to EML file</h2>

An automated third-party tool is an excellent alternative to having to go through complex processes. Outlook PST to EML can convert multiple PST emails into EML files. The tool was designed with beginners in mind. It is unique because of its user-friendly GUI and self-descriptive features. You can download the demo version of <a href="https://www.convertertools.org/pst/eml/">PST to EML Converter</a> free of charge.

<h2>Wrap UP</h2>

This blog will explain how to convert PST files into EML manually. We hope you now have the answers to how to export PST files to EML. <b>ConverterTools.org</b> PST to EML Converter is a great tool to convert your PST file into an EML file quickly. Thank you for reading this post.
How to set up `git bro` command with git alias
Tags: git, tips, devtips
Published: 2021-07-16 11:49:38

---
title: How to set up `git bro` command with git alias
published: true
description: learn about git aliases
tags: git, tips, devtips
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tn5ec8r8wvcmdkidyekx.png
---

Have you seen people use the `git bro` command in terminal and always wondered how they do it?

It's actually very easy and I'm going to teach you now. Moreover, after mastering this technique you'll be able to use any command your imagination comes up with, like `git cmon` or `git brunch`.

I'll also share my own commands config in the end (quite conservative tbh).

## You have git set up

First of all, you need git. I assume you already have it, if not, [check this out](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git).

## Add the command

All you need to add a command is to define an alias, like this

```
git config --global alias.bro `branch`
```

## Manage the aliases


To see all the aliases run

```
git config --list
```

To remove one run

```
git config --global --unset alias.bro
```

## My aliases

As I promised, in the end I share my setup

```
alias.co=checkout
alias.cm=commit
alias.st=status
alias.bro=branch
alias.br=checkout -b
alias.pushit=push -u origin HEAD
```

## Thanks for tuning in

That's it, now you can update your CV stating that you are bros with `git`!

👋
Which programming language should I learn first?
Tags: career, beginners, codenewbie
Published: 2021-07-16 11:36:10

There are so many programming languages, so many platforms and so many ways to learn. Even knowing how to get started can be stressful.

“What if I choose the wrong language?”

“What if it doesn’t do what I need it to?”

The truth is there is no wrong first language. You will hear strong voices in favour or against every language under the digital sun, most of them will have valid points however, all of them will miss one key thing. 

Learning to program is different from learning a programming language.

Programming languages are a tool that enable you to learn how to write code and solve problems. Most languages share similar underlying concepts, so concepts learned with one will apply to most of the others.

You don’t want to hear me waffle on about ideological aspects of programming vs programming languages though, you want an answer!

**Learn Javascript first.**

It’s the only language that is natively supported in web browsers, it can run on servers, it can run locally on your computer and you can even build mobile applications for iOS and Android with it. At this point, Javascript is the universal language. So, as a starting point, it’s perfect.

Once you have a good understanding of Javascript you can then move on to other languages that are more specific, if you want.

Your first language is not your last language, no language is wrong but Javascript has the broadest application.
AWS Copilot and another 6 ways to easily deploy apps to AWS
Tags: aws, amazon, cloud, githubcopilot
Published: 2021-07-16 11:34:26

---
title: AWS Copilot and another 6 ways to easily deploy apps to AWS
published: true
description: Making a Product: Transcripto, ep. 8
tags: aws, amazon, cloud, copilot
cover_image: https://assets.mkdev.me/posts/covers/000/000/012/original/mkdev_article.png
---
'Making a Product: Transcripto' is an mkdev.originals web series that will see a small team of two making a working product step by step, from conception to designing and coding to the release! Join Kirill and Leo on the journey of creation of TRANSCRIPTO, a small but useful service for transcribing audio into text.

In ep. 8 there are just the final step left: deploying Transcripto to the world. Kirill Shirinkin evaluates all the different options to build and deploy the infrastructure for the new app, and goes through a crazy amount of ways to do so in AWS:

{% youtube 0lxcfJ20TwA %}

***

* [Episodes 0 & 1](https://dev.to/mkdev/the-road-to-mvp-planning-first-steps-and-brainstorming-the-product-features-in-miro-kb9): Introduction & The Road To MVP.
* [Episode 2](https://dev.to/mkdev/how-to-design-a-logo-for-your-startup-with-the-help-of-an-artificial-intelligence-40l5): How to design a logo with the help of an AI.
* [Episode 3](https://dev.to/mkdev/how-to-build-a-transcription-service-prototype-in-90-minutes-with-ruby-on-rails-and-aws-3884): How to build a service prototype in 90 minutes.
* [Episode 4](https://dev.to/mkdev/making-website-design-for-a-transcription-service-in-2-days-3m4): Making website design in 2 days.
* [Episode 5](https://dev.to/mkdev/the-impostor-syndrome-episode-adding-features-with-ruby-on-rails-and-having-fun-with-figma-and-css-2f4m): The Impostor Syndrome.
* [Episode 6](https://dev.to/mkdev/how-to-calculate-aws-stripe-costs-define-the-price-for-your-product-and-make-a-profit-on-the-way-1f8d): How to calculate AWS & Stripe costs.
* [Episode 7](https://dev.to/mkdev/is-there-a-place-for-a-small-startup-launch-without-a-big-promotional-budget-202n): Startup Launch.
* [Episode 8](https://dev.to/mkdev/aws-copilot-and-another-6-ways-to-easily-deploy-apps-to-aws-1njb): AWS Copilot.
* [Episode 9](https://dev.to/mkdev/you-ve-launched-a-new-product-now-what-4dkm): Now what?
Platform similar to Pub.dev to React Native
Published: 2021-07-16 11:29:55

I'm a flutter developer and sometimes, I use React Native for some projects , one of my main problems with React native is that it doesn't have a  similar site to pub.dev, with all libs grouped in one place, I know that we have GitHub and most parts of the libs are there, but it would be great to have a place similar, just to search and have an easy way to find libs. That is something that I miss in React native.

During my research, I founded react resources, which is a site focused to bring something similar, but most of the libs that are there, are for React js, maybe someday the community could make or publish something only focused on React Native. As I said, I hardly ever use react native, so, if it does exist something similar, I would like to know about it.
5 Must-Have Features to Make Your Real Estate App Successful in 2021
Tags: android, ios, mobile, devops
Published: 2021-07-16 10:56:23

The use of the mobile application has increased from shopping, buying different products to hiring services. According to the research data of Statista, the number of mobile applications downloaded has increased from 140.7 billion by 2016 to 218 billion in 2020. According to another research, every 1 in 4 people use a real estate app to search, compare or buy and sell properties online. The Real estate applications have made the distance negligible and the properties from our desired location just one click away.

The real estate business is one of the most trending and profitable businesses globally and, with the Real estate app solutions, it has become more profitable due to the increased amount of user engagement. The availability of Real estate app has also

increased cut-throat competition in the market.

According to the latest research, at least 95% of real estate agencies have their web portals and application featuring their properties. To sustain in this competitive market, it is important and advisable to build a website and mobile app. The website and mobile app should be standing out in the digitally competitive market.

[Real estate Mobile app development](https://www.suriainternational.com/real-estate-app-development-transforms-the-sector-digitally/) can bring many clients and businesses by dealing with customers directly. Real estate app development can bring many benefits to both users and agencies

and, it also serves as a viable option for enhancing brand visibility and the development [cost of real estate app](https://www.suriainternational.com/challenges-of-real-estate-app-development/) is not much

as compared to the beneficial outcomes in business due to its presence. The brand of your company serves as a reminder about your services and develops trust towards you and serves as brand enrichment.

How to increase effectiveness of Real Estate Application?

User engagement and brand promotion of applications and agencies with integrated social media mobile app is the latest market trend. Most of the industries are using social media integrated mobile apps to encourage the user, by using this feature user upload pictures and videos, and by doing so they promote the products.

Read More: https://www.suriainternational.com/must-have-real-estate-app-features/
Types of Machine Learning: Reinforcement Learning
Tags: article
Published: 2021-07-16 17:57:38

---
title: Types of Machine Learning: Reinforcement Learning
published: true
date: 2021-07-16 10:40:06 UTC
tags: Article
canonical_url: https://reinforcement-learning4.fun/2021/07/16/types-of-machine-learning-reinforcement-learning/
---

In the reinforcement learning paradigm, the learning process is a loop in which the agent reads the state of the environment and then executes an action.

Then the environment returns its new state and a reward signal, indicating if the action was correct or not.

The process continues until the environment reaches a terminal condition … [Continue reading Types of Machine Learning: Reinforcement Learning →](https://reinforcement-learning4.fun/2021/07/16/types-of-machine-learning-reinforcement-learning/)
Deep neural networks: How does regularisation prevent overfitting? 
Tags: datascience, ai, neuralnetworks, algorithms
Published: 2021-07-16 10:20:41

What really is overfitting? Overfitting is a very dangerous game many of us have played. It means that you get a low training dataset error and a high test set error.

Now, if you suspect that you might have a high variance problem, you can add more training data. However, it'll only work if you have more reliable data and can be expensive.

Another way is to apply regularisation. It can prevent overfitting and reduce errors in your neural network. So what types of regularisation do we have?

First and foremost, we can use the Euclidean norm L2. It's the most common type of regularisation. It will penalise the coefficients, and the slope of the line will be closer, but never equal to, zero. 

Secondly, we can use the L1 regularisation, also called the Lasso Regression. By adjusting the slope, smaller weights will eventually fade away and become 0. This means that L1 regularisation helps us select the features that are important and turns the rest of them into zeros. So it is very useful for feature selection, if we have a huge number of features. 

So how do we apply these to neural networks? Let's take a very simple NN as an example. If we set the weights to be close to zero, we will zero out the impact of a lot of the hidden units. And if that’s the case, our simple neural network can become much, much smaller. So the intuition of completely zeroing out of a bunch of hidden units isn't quite right.

If your regularisation parameter is large then your parameters will be relatively small, because they are being penalised. 
So it's as if every layer will be roughly linear. As if it is just linear regression. If every layer is linear then your whole network is just a linear network. And so even a very deep network, with a deep network with a linear activation function is at the end they are only able to compute a linear function. 

Consequently, your whole neural network will be computing something like a big linear function which is able to do  much simpler tasks than a very complex non-linear function. Therefore, it is also much less able to overfit.
Showing an offline screen for your React-Native app using NetInfo package.
Tags: reactnative, android, javascript
Published: 2021-07-16 09:45:47

So you want to check internet connection and show an offline screen if you are disconnected?

Here are simple steps to create one:

1) Install **netinfo** package from npm: 
   `npm install --save @react-native-community/netinfo`

2) Import it in your js file wherever you want it to be, declare a variable and set it's value to null:
`let NetInfoSubscription = null;`
 
3) Initialize a state and set the default value to false:
`const [connectionStatus, setConnectionStatus] = useState(false);`

4) Create a function that changes the value of the **connectionStatus** based on if the internet is connected or not:
```
const handleConnectionChange = (state) => {
    setConnectionStatus(state.isConnected);
  }; 
```

5) Inside useEffect hook reassign the value of **NetInfoSubscription** and add this piece of code: 
```
NetInfoSubscription = NetInfo.addEventListener(handleConnectionChange);
    return () => {
      NetInfoSubscription;
    };
```

6) Now just use a ternary operator to show the main contents if the connection is there or show the offline screen if the connection is disconnected.
example: 
```
connectionStatus ? <MainContent /> : <OfflineScreen />
```
That is it now if the internet is disconnected offline screen will be rendered.

Let me know if you have some questions or want to see how I created my Offline Screen :)
Stateful architecture Vs stateless architecture
Tags: webdev, design, architecture, beginners
Published: 2021-07-16 09:44:18

Let's say we have developed an application. For the sake of simplicity, let's assume that we have only two pages, login page and user profile page.

We should display the profile of the user only when they are logged in. Let's see how stateful application and stateless application handles this. 

##Stateful:

If we choose to use stateful architecture, we will have to store the state of the user(s) somehow. Usually the state is stored in the server itself. 

But what if the server goes down? Since we store the state in the memory of the server, we could possibly lose all the stored states. It's hard to restore the state.

On the upside, we don't have to query the database everytime we receive a request, to check if the user is logged in or not.

What if we decide to have more than one server?, Let's say the user logs in by sending a request to server-1 and the state is stored in server-1. Now the user is trying to access their profile page, due to high traffic the request is directed to server-2. Remember, the state is stored in the memory of server-1 only, so according to server-2, the user is not logged in. This might lead to inconsistency. Hence, stateful application might not go well with [horizontal scaling](https://dev.to/saran_chakravarthi/horizontal-vs-vertical-scaling-2h1h).

###Advantages:

No need to query the database.

It is quick, as we don't have to query the database everytime.

###Disadvantages:

If the server goes down, it will be hard to recover.

We can't scale up horizontally.

##Stateless:

In case of a stateless architecture, a token is sent back to the client, when the user logs in. This token is stored in client's storage. Then this token is sent along with every request the user makes.

Inorder to make sure that the request is coming from an authenticated user, we check the token sent along with the request, against the data we stored in the database.

Since the token is stored in client's storage, we can easily recover if the server goes down. And horizontal scaling is much easier in stateless architecture.

But the catch here is, we have to query the database everytime we get a request.

###Advantages:

* Horizontal scaling is easy.

* We can easily recover if our sever goes down.

###Disadvantages:

* We have to query our database, for every request.

* Slower than stateful architecture.

I hope this article helped you. Want to connect with me? my DM is open on dev.to, you can connect with me on [twitter](https://twitter.com/SaranChakravar3)
Python 3.10 Feature
Published: 2021-07-16 09:41:51

#1. Current Problem
With the current Python version, if you want to use type hints for 
function that has a parameter which can recive value of different
types, you had to use Union type.                
     Something like this:

def some_funcion(flexible_parameter: Union[int, string]) -> Union[int, string]: return flexible_parameter

#2. Solution Python 3.10 Feature
   It introduces new union operand – |. What this operand says is that certain parameter can be either Type 1 either Type 2.
Now, the previous function can be written like this:

def some_funcion(flexible_parameter: int | string) -> int |
 string:  return flexible_parameter