teleren/devto huggingface dataset:
Create a Simple 0-dependency Toast
Tags: javascript, tutorial, css, beginners
Published: 2020-03-29 13:54:22

# What is a Toast?
Toast notification is popup type of message notification that auto expires. It usually carries small amount of information for the user and it can be used for feedback to the user's action.

An example of a Toast is the following:

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

The user clicks on the Copy to Clipboard button and the Toast:
1. informs the user that the text was copied to his/her clipboard
2. disappears after a short amount of time (e.g. 2 seconds)

# How to create it
Sneak peek:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1fvx73lc067uv4bnxhz1.gif)

I will begin with the structure of the `toast`
```html
<div id="toast"></div>
```

Next step is to add some css to make it beautiful
```css
#toast {
  position: fixed;
  bottom: 20px;
  width: 100%;
  max-width: 300px;
  background-color: #213cfd;
  background-image: linear-gradient(19deg, #213cfd 0%, #b421ff 100%);
  color: #fff;
  font-size: 16px;
  padding: 10px;
  user-select: none;
}
```

How it looks now:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9qyfhmpdqbbja2t6gt04.png)


## Slide animation
```css
#toast {
  bottom: -50px;
  -webkit-transition: bottom 350ms;
  -moz-transition: bottom 350ms;
  -o-transition: bottom 350ms;
  -ms-transition: bottom 350ms;
  transition: bottom 350ms;
}

#toast.active {
  bottom: 20px;
}
```
The above css code accomplishes the slide animation. The trick is to use the `transition` css property on the `bottom` and animate the change for 350ms.

Now I will add a little Javascript code to toggle the `.active` class on the `#toast` element.

```javascript
document.addEventListener("DOMContentLoaded", () => {
  let hasTime = null;
  /* When the user clicks on a button => show the Toast */
  document.querySelector('#btn-show-toast').addEventListener('click', (e) => {
    const toaster = document.querySelector('#toast');
    /* Add text to the Toast */
    toaster.innerText = "✔️ This is a toast! 👏";
    /* 
    by adding the .active class the Toast 
    will slide up to the user's screen 
    */
    toaster.classList.add('active');
    if(hasTime != null) {
      clearTimeout(hasTime);
    }
    /* After two seconds, close the Toast (slide-down) */
    hasTime = setTimeout(function() {
      toaster.classList.remove('active');
    }, 2000);
  });
});
```

In order for the slide animation to be usable in this demo, I will need to insert a button in the html code, before the Toast `div`.

```html
  <button id="btn-show-toast" type="button">👀 Show Toast</button>
  <div id="toast"></div>
```

Final result:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1fvx73lc067uv4bnxhz1.gif)

# Demo with all the code
{% codepen https://codepen.io/tsanak/pen/JjdxPqq %}

# Wrapping up

![](https://media.giphy.com/media/l3vR9zT3ySDv5MKeQ/source.gif)

🎉 Thank you for reading through all the post! 🎉

I hope you found something useful in it. 

If you have any questions or feedback, let me know in the comments 🗨.
Change your autoPauseDelay settings with Azure Automation
Tags: azure, powershell
Published: 2020-03-29 13:53:28


Here is the Powershell script i use to change from a SQL Database using Serverless hosting option with auto pause disable, to an enable one.

It goes through all database of a server and change all of them except master, and one specified by name (a demo database in my case).

I host it on an Azure Automation Account on a Powershell runbook.
You will have to add first the following Powershell modules (in the order) by going to Modules > Browse Gallery:
- Az.Accounts
- Az.Automation
- Az.SQL

Hope this helps !

You can find the documentation for the main command [set-azsqldatabase](https://docs.microsoft.com/fr-fr/powershell/module/az.sql/set-azsqldatabase?view=azps-3.6.1) if you want to modify the option.

```powershell
Import-Module Az.Accounts
Import-Module Az.Automation

$connectionName = "AzureRunAsConnection"
$resourceGroupName = "myResourceGroupName"
$sqlServerName = "mySQLServerName"
$databaseNameNotAffected = "prodDatabaseName"
$maxSizeDatabaseInBytes = 10737418240 
$AutoPauseDelayInMinutes = 60
try
{
    # Get the connection "AzureRunAsConnection "
    $servicePrincipalConnection = Get-AutomationConnection -Name $connectionName       
    "Logging in to Azure..."
    Connect-AzAccount `
        -ServicePrincipal `
        -TenantId $servicePrincipalConnection.TenantId `
        -ApplicationId $servicePrincipalConnection.ApplicationId `
        -CertificateThumbprint $servicePrincipalConnection.CertificateThumbprint 
}
catch {
    if (!$servicePrincipalConnection)
    {
        $ErrorMessage = "Connection $connectionName not found."
        throw $ErrorMessage
    } else{
        Write-Error -Message $_.Exception
        throw $_.Exception
    }
}
Get-AzSqlDatabase -ResourceGroupName resourceGroupName -ServerName $sqlServerName  | forEach-Object { if($_.DatabaseName -ne $databaseNameNotAffected -And $_.DatabaseName -ne "master") { Set-AzSqlDatabase -DatabaseName $_.DatabaseName -MaxSizeBytes $maxSizeDatabaseInBytes -Edition GeneralPurpose -ComputeModel Serverless -Vcore 1 -ComputeGeneration "Gen5" -ResourceGroupName $_.ResourceGroupName -ServerName $_.ServerName -AutoPauseDelayInMinutes $AutoPauseDelayInMinutes } }
```
Linux Test Session: Mounting media disk with $mount [unedited]
Published: 2020-03-29 13:34:14

*Disk space statistics is an important thing to know*

#Mounting
The linux file system combines all media disks into a single virtual directory.
Which means, if a new media disk is to be used, it should be placed in the virtual directory, which is called mounting.
In newer version of Linux, thijcls mounting process occurs automatically.

##The $mount command
###$mount
The **$mount** lists media devices currently mounted to the system.

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

*From above image*

- **device_filename** on /**mount_point** type **filesystem_type** (**access_status**)

So basically, the **$mount** command provides 4 pieces of information:
- The device filename of the media
- The mount point in the virtual directory
- The filesystem type
- The access status of the mounted media

#/dev/sda2 on / type ext4 (rw,relatime,errors=remount-ro)

This shows that device file **sda2** is mounted on root directory **/** which has a **ext4** file type with access status inside braces.

#Mounting a device
*$mount -t type device directory*
This mounts a given device of given type to the given directory
Here:
- type 
The filesystem type under which the device was formatted
Eg. vfat for windows, ntfs for later windows, iso9880 for cd-rom filesystem etc

- device
the location of the media device

- directory
the location in the virtual directory (mount point)


Eg. to manually mount the USB memory stick at device */dev/sbd1* at location */media/disk*, the command would be:
*$mount -t vfat /dev/sbd1 /media/disk

After it is mounted, the root user has full access to it.

Some additional option:
$-o
The *-o* option allows mounting file system with comma separated list of addional option such as;
- ro : Read only
- rw : Read / write
- user: allows ordinary user to mount
- check = none : mount without performing integrity test
- loop : mounts a file


##Unmounting a file
*$umount*
The *$umount* command unmounts a file
*$umount [direcotry|device]
Eg. $ umount /home/rich/mnt

Also check:
https://unix.stackexchange.com/questions/3247/understanding-mount-as-a-concept-in-the-os
Recreating the Twitter Heart Animation with Vue
Tags: vue, css, javascript
Published: 2020-03-29 13:25:33

I recently had to add the Twitter "fave" animation to a project. 


![Twitter Fave Animation](https://dev-to-uploads.s3.amazonaws.com/i/hn08md8cef5754crxv2q.gif)

There are quite a few articles out [there](https://css-tricks.com/recreating-the-twitter-heart-animation) (and [there](https://blog.prototypr.io/twitter-s-heart-animation-in-full-css-b1c00ca5b774) and [there](https://cssanimation.rocks/twitter-fave/)) that describe how the animation works and how to replicate it. You can read one of those articles to understand better how the animation is implemented, but the gist of it - is uses a *sprite* and `animation-timing-function: steps`.

The original sprite looked like this:

![Initial animation sprite](https://dev-to-uploads.s3.amazonaws.com/i/5ubgnbc26awpatbk7uhn.png)

As you can see, the heart is actually contained in the sprite. This was an issue in my case, as I had the requirement to use the **existing SVG heart icon** I was using across the project. 

The good news is that Twitter updated their implementation and removed the heart from the sprite. They now use an SVG icon for the heart, and only the particles are in the sprite. Their new sprite looks like this:

![New animation sprite](https://dev-to-uploads.s3.amazonaws.com/i/hsf9caaqly09454nh3ks.png)

## Result
Using the new sprite and my custom icon, I ended up with something like this:

{% codesandbox vue-twitter-heart-animation-ri16f %}

#### Some notes on re-using the component:

* You need to use a *red-ish* color for the icon unless you update the sprite
* You can replace the `FavoriteIcon` SVG with any other icon e.g., a star
* You can update the size by changing the `font-size` on `.toggle-favorite`
* You might want to preload the sprite to avoid the animation looking a bit slug-ish on the first click
Linux Test Session with $top [unedited]
Published: 2020-03-29 13:06:45

###$top
-Shows live processes currently running
-Only shows processes for a certain period of time (Like a drawback)
-The **$ps** command fails to show trend of processes that are being swapped in and out of memory; thus **$top** command
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1do502zst62sz6onwiin.png)

#First Line:
Shows general system information
-Current time
-How long the system has been up
-The number of users logged in
-The load average

*more about the load average:
The load average is displayed in three different time marks:
- 1-minute
- 5-minute
- 15-minute

It's not uncommon for the 1 minute mark to be high, but if the 15 minute mark is high then system is in ***trouble***
Mobile First Web Design Tutorial
Tags: webdev, beginners, tutorial, html
Published: 2020-03-29 12:45:39

Creating for the mobile device is not something I often do. While the vast majority of websites these days are viewed on the mobile phone, most often they are designed for the web first.

In this video, I decided to take a different approach and actually create the mobile version first.
{% youtube NeThtWARdnY %}<center>https://youtu.be/NeThtWARdnY</center>
What I go over in this video includes:
* Using Figma to export components for the mobile design
* Developing mobile-first basic HTML
* Styling the design using CSS and SCSS

The design was originally created by Hachibur Rahman, his profile can be found below:
https://dribbble.com/Hachib

This is part of <a href="https://twitter.com/florinpop1705">Florin Pops</a> recent <strong>#7Days7Websites</strong>. You can find out more about it here:
https://dev.to/florinpop17/the-7days7websites-coding-challenge-3o3g

## Follow and support me: 
Special thanks if you subscribe to my channel :)
* [🎞️ Youtube](https://www.youtube.com/channel/UCvM5YYWwfLwpcQgbRr68JLQ?sub_confirmation=1)
* [🐦 Twitter](https://twitter.com/adrian_twarog)
* [💬 Discord](https://discord.gg/nGdThpE)
* [💸 Patreon](https://www.patreon.com/adriantwarog)

## Want to see more:
I will try to post new great content every day. Here are the latest items:
* [Adobe XD to Fully Responsive WordPress Site](https://dev.to/adriantwarog/adobe-xd-to-fully-responsive-wordpress-site-16e0)
* [Adobe XD to HTML Full Process](https://dev.to/adriantwarog/adobe-xd-to-html-full-process-ao6)
* [Full Tutorial on how to use SASS to improve your CSS](https://dev.to/adriantwarog/full-tutorial-on-how-to-use-sass-to-improve-your-css-57on)
* [Creating a Mobile Design and Developing it](https://dev.to/adriantwarog/creating-a-mobile-design-and-developing-it-5c4o)
UX via the assistance of selective design
Tags: html, css, design, ux
Published: 2020-03-29 12:40:48

As a developer, I frequently find myself in the position where I am accountable not just for the front end behavior, but also the front end interface design. Now to be straight forward, I'm not a professional designer, but in my own opinion, I believe I've managed to get a knack for clean and efficient design. To be fair though, I can't solely be held responsible for this success, in my toolbelt I have accrued an assortment of wonderful purpose-made utilities that I regularly weave into my designs through the power of selective design.  

<h1>Lets get to business</h1>
Ok, so hopefully that hook wasn't too drawn out for your liking, I promise from now on to get straight to the point.

Personally, I understand that I generally have an idea for what I want whilst also not understanding the specifics. To put it bluntly, I don't know what I want till I see it. 

Now, It can be safely assumed selective design is the process of (you guessed it) 'selecting' design elements based on suggestions to be implemented into your UX, which can ultimately save you time and effort in the process, but the ultimate problem is then finding tools that will achieve this goal. Luckily enough I'm more than happy to share with you my absolute favorite tools of this specific functional genre. With all of these lovely options, It becomes a much easier process of breaking into UX design.

<h2>Colour Schemes</h2>
http://colormind.io/ - My choice
http://khroma.co/
https://www.schemecolor.com/bright-bot.php


<h2>Fonts</h2>
https://fontjoy.com/ - My choice
https://fontpair.co/
https://www.canva.com/font-combinations/

<h2>Design emphasiers</h2>

<h3>Gradient</h3>
https://mycolor.space/gradient

<h3>Vector</h3>
https://www.toptal.com/designers/subtlepatterns/
https://www.heropatterns.com/
http://thepatternlibrary.com/
https://getwaves.io/

<h1>Now you have the tools</h1>
Let me be clear, these tools will assist you in the process of design but they cannot do all the work for you. For instance, many times I've found that a color palette that I've selected simply does not create the feeling that I initially intended in the conceptualization. Thus, iteration and design processes still apply.

Anyway, I hope you find as much use in these tools as they have given me, happy coding everyone.
Learning React
Tags: help, react
Published: 2020-03-29 12:33:47

---
title: Learning React
published: true
description: 
tags: help, react
---

I have some experience with Vue and would like to learn some React to compare them and generally broaden my understanding. I have attempted to go their docs, but it was a struggle I went through the tutorial and learnt very little from it. It uses classes to extend component, but most tutorials I've read say to use function components (which make more sense to me) so why use the extend component method? I don't understand why you would if you have the option to use function components unless of course you're working with older versions of React. 

I'm currently working on a personal project with Gatsby I found the docs much clearer and easier to understand, but I figured its a good idea to have at least a basic understanding of React. There are so many posts/tutorials out there it's all bit overwhelming anyone have any good resources to start with the basics?
Daily Developer Jokes - Sunday, Mar 29, 2020
Tags: jokes, dailydeveloperjokes
Published: 2020-03-29 12:00:21

---
title: "Daily Developer Jokes - Sunday, Mar 29, 2020"
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=Sunday%2C%20Mar%2029%2C%202020"
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/5e12594523a5e.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 process say after working in an infinite loop all day?

___A:___ I need a break.
 -->
tsParticles v1.11.1 released
Tags: javascript, typescript, showdev, react
Published: 2020-03-29 11:13:00

# New tsParticles version released, 1.11.1.

## Release notes

- Fixed critical bug on image shape used with other shape types
- Multiple different polygon shapes are now permitted
- Revisited default values, now a little config can be used without any unexpected behavior
- Added shadow options to particles and link lines, use with caution, shadows in canvas don't have good performance
- Fixed particles container destruction, now if it's destroyed won't be retrieved from libraries methods (`dom()` and `domItem()`)
- Fixed touch events
- All color properties now are the same type, so you can use same value type
- Reduced library output file size
- Added some presets, for simpler configs. The presets are `basic`, `backgroundMask`, `fontAwesome`, `snow`, `bouncing`, `stars`. The presets don't specify particles number. Presets are loaded **BEFORE** your config, so you can override any property.
- React.js ready

---

## Want to integrate in React.js?

I've forked the react-particles-js repository and added the tsParticles support.

You can checkout the fork here: <https://github.com/matteobruni/react-particles-js>

And the sample demo here: <https://github.com/matteobruni/react-particles-js-demo>

Hope this will be merged in the main repository.

---

## Useful links

Checkout the demo here: <https://particles.matteobruni.it>

Do you want to replace the old, outdated and abandoned particles.js?
You're in the right place!

---

## GitHub repo
<https://github.com/matteobruni/tsparticles>

##npm
<https://www.npmjs.com/package/tsparticles>

##yarn
<https://yarnpkg.com/package/tsparticles>

##jsDelivr
<https://www.jsdelivr.com/package/npm/tsparticles>

## CDNJS
<https://cdnjs.com/libraries/tsparticles>

---

Feel free to contribute to the project!

---

## Demos

Here are some demos!

### Characters as particles

{% codepen https://codepen.io/matteobruni/pen/xxGdyjd %}

#### FontAwesome characters as particles:

{% codepen https://codepen.io/matteobruni/pen/QWbrLoK %}

---

### Mouse hover connections

{% codepen https://codepen.io/matteobruni/pen/GRJMgBp %}

---

### Polygon mask

{% codepen https://codepen.io/matteobruni/pen/yLNpgKW %}

---

### Background Mask particles

{% codepen https://codepen.io/matteobruni/pen/WNvYKgW %}

---

### COVID-19 SARS-CoV-2 particles

{% codepen https://codepen.io/matteobruni/pen/dyoZbMb %}

**Don't click! DON'T CLICK! OH NO IT'S SPREADING!!!!**

*COVID-19 is not funny. It's a serious world problem and we should prevent its spreading. If you are in a risky area please STAY AT HOME*
Takeaways from reading Software Architecture Patterns
Tags: reading, books, architecture, patterns
Published: 2020-03-29 10:39:01

I recently finished reading the book "Software Architecture Patterns" by Mark Richards, published by O'Reilly. 

Usually, on my free time, I occasionally like to code and take a more hands-on approach to things, and I still think that such a way works best for me in terms of learning and grasping technical concepts. However, from time to time I like to read technical books, especially general-purpose books, because they help me put my own knowledge in perspective and see how far I've come, or how much more I still can learn and improve.

Here are a few of my own personal takeaways from the book:

- Architecture patterns are the foundation upon which applications will be built and are somewhat neglected as most shops simply "accept" things as they are;

- Your shop's culture *can* and will affect the way your architecture (and as a consequence, your application and code) will be shaped. Corporate environment is linked to architectural technical decisions, more than some of us (devepolers!) might think. This is known as [Conway's law](https://en.wikipedia.org/wiki/Conway%27s_law);

- Patterns can be combined where sensible to do so, as there's rarely a "one-size-fits-all" type of solution;

- Some of the patterns can be derived by yourself, while you are working on your own side-projects;

- Patterns change and follow industry trends and/or new solutions to "old problems";

What I really liked about this short book as also the way the author enumerated several technologies and/or technical artifacts to really **realize** the abstractions inherent to each pattern in practice: your service layer in a certain micro-services architecture can be a Spring service class. This abstraction can be a JavaBean, etc. I think it's always great to put it into practice, and personally, I think this shows how experienced the author probably is (despite the book being very high level), since these kind of almost 1-to-1 mappings between pattern abstractions and concrete, actionable code implementations is very hard to get right.

Review: 3.5/5 - enjoyable read.

I definitely liked reading this and get a good overview of some of the most common architecture patterns, and I even got familiar with some new concepts.
Covid19 live tracker
Tags: webscraping, python, webdev
Published: 2020-03-29 10:32:55

{% github aletisunil/Covid19_liveTracker no-readme %}

Requirements for scraping a site
* **Requests** - Used to send all kinds of HTTP requests
* **BeautifulSoup**   - Used for pulling data out of HTML and XML files
* **lxml**            - Which allows easy handling of HTML and XML files

In this article, we will see how we scraped [worldometers.info](https://www.worldometers.info/coronavirus/)

1) First, you need to install all required modules for scraping a site
2) Open your favourite text editor, In my case I used VSCODE
3) Now let's code, First import *requests*, and *bs4 modules* by using import keyword 
```python
import requests
import bs4
country_name=input("Enter the Country name: ")
def covid19(country):
    res = requests.get("https://www.worldometers.info/coronavirus/#countries")
    soup = bs4.BeautifulSoup(res.text, 'lxml')
    index = -1
    data=soup.select('tr td')
    for i in range(len(data)):
        if data[i].text.lower()==country.lower():
            index=i
            break
    
    for i in range(7):
        if i == 0:
            print("\nCountry name: "+str(data[i+index].text))
        elif i == 1:
            print("Total cases: "+str(data[i+index].text))
        elif i == 2:
            if data[i+index].text == '':
                print("New cases: 0")
            else:
                print("New cases: "+str(data[i+index].text))
        elif i == 3:
            print("Total deaths: "+str(data[i+index].text))
        elif i == 4:
            if data[i+index].text == '':
                print("New deaths: 0")
            else:
                print("New deaths: "+str(data[i+index].text))
        elif i == 5:
            print("Total Recovered: "+str(data[i+index].text))
        elif i == 6:
            print("Active cases: "+str(data[i+index].text),end='\n\n')
covid19(country_name)
```
4) Now save this code, in my case i saved it with "Covid19_liveTracker.py"
5) Now you can execute this python script by typing 
<code>python Covid19_liveTracker.py</code>

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9qv4mdqm1kayl0ah1g51.png)

 

let me know, if you face any errors or problems, Happy Quarantine 
Stay Home, Stay Safe.
Hope this problem gets resolves very soon :)