teleren/devto huggingface dataset:
Using SweetAlerts2
Tags: javascript, react
Published: 2022-05-12 17:58:05

While working on my most recent project, I decided to incorporate a few pop ups for different features. A quick pop up for signing in or adding a new item to a list is a good way to let users know their clicks are working, but the standard alert is not very appealing. Enter SweetAlerts2. 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fxozwjdtaaeusbjov0xh.png)

vs


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5vgyccmv9eb973chz7i4.png)

The SweetAlerts2 documentation is very helpful(https://sweetalert2.github.io/) for further details. Here is a quick setup guide. My project is built using React, so these steps are assuming you have the component built where you want to show your alert. 

1) install sweetalerts2. 
$ npm install sweetalerts2
2) Create a variable using sweetalerts in your function.
 `const Swal = require('sweetalert2')`
3) Call your constant in the function where you want it.

```
Swal.fire({
          title: 'Added!',
          // text: 'Do you want to continue',
          icon: 'success',
          timer: 1500,
          // confirmButtonText: 'Cool',
          showConfirmButton: false
        }).then(
          function () {},
          // handling the promise rejection
          function (dismiss) {
            if (dismiss === 'timer') {
            }
          }
        )
```
I did not want any text added to my alert so I commented that out.
I also did not want any click button for users to close out the alert, I wanted it to disappear after a few seconds. To do this, I added in the timer line, shown in milliseconds. And showConfirmationButton needs to be set to: false. I also have the confirmationButtonText commented out since I am not using it. 

In addition to the added alert, I also included a "success" alert when the user logged in. The steps are the same as listed above but with some minor adjustments. 

1) set your constant:

```
const Swal = require('sweetalert2')
```

2) set the Toast constant for the popup:
```
const Toast = Swal.mixin({
        toast: true,
        position: 'top-end',
        showConfirmButton: false,
        timer: 3000,
        timerProgressBar: true,
        didOpen: (toast) => {
          toast.addEventListener('mouseenter', Swal.stopTimer)
          toast.addEventListener('mouseleave', Swal.resumeTimer)
        }
      })
```
 3) Include it in your function:

```
Toast.fire({
                icon: 'success',
                title: 'Signed in successfully'
              })
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5cxw1yrxt1hn7bq57435.png)

There are 5 different alert icons included in the SweetAlert2 docs: success, error, info, warning, and question. As you can see, I used the success icon for both of my alerts. 

I hope this article was helpful in getting started with SweetAlerts2. Please feel free to leave your thoughts or questions below.
Rename and Shame
Tags: sre, devops, technicalpoetry, productivity
Published: 2022-05-12 17:55:06

```
You just made a role change. 
Or a job change. 
Or an environmental change. 
The name has changed. 
But the problems remain. 
The problem may be your practice. Your culture. 
Don't be a victim of rename and shame.

Renaming is a responsible step to change
Rename those variables and functions.
And shame the need for comments.
A good change that is.
Who is going to write those comments or documentation anyway?
The team named LEAN?

Rename that bug to a known issue.
Rename that known issue to a non-issue.
Isn't that what it is anyway?
Since the Devs are saying the issue is from not being code-first,
While the business says it is not being product-first,
And the men in the middle ask, are we not all humans first?

Rename and shame the bug,
Make it a test case that must be passed,
Shame it for what it is worth,
Before it ever gets to production,
Before it is up,
As a downtime means the ups are down,
means an all-nighter- the Devs are up, 
Low morale - the Ops are down,
Should call it something else, if that would get the Devs Up,
Call it SRE, if you may, call it DevOps.

Refactor it if you want, but first, rename it,
Replatform, repurchase, rehost, retire it if you want, but first rename it,
Rename it because the culture is in the name,
The culture is not in the technicalities or the technology,
The culture is in the theme, the purpose,
And that's what the name is all about.

But with the name comes a newfound responsibility,
A responsibility that the brain is not used to,
And at least memories may help us not to forget that,
that is what the name is all about.
And when we are used to the newfound culture, we don't dwell,
Because that is what shame is all about.
So....rename it.
But don't be a victim of rename and shame.
```
Simple Drive App using Appwrite and Flutter
Tags: appwritehack, flutter
Published: 2022-05-12 17:53:39

### Overview of My Submission
This is the simple flutter app where users can upload there document on cloud. App has the login and signup feature. 

### Project setup
- Install appwrite in your computer. Follow instruction for your respective operating system. I use Ubuntu OS. 
https://appwrite.io/docs/installation. 

- After installation and setup you can able to access the appwrite dashboard. As you can see in the below image I have created two projects. Similarly create project name it anything you want. I had named it simpledrive. 

![project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1u61earax59tqorqrwh0.png)

- Add the flutter platfrom. As you can see in below image, I will skip rest of the platfrom setting and filled up detail for Android only. 
![platfrom setup](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hw5jidvqutepzl402sx6.png)
![platfrom setup](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ioqhu1u12kym5196ha4l.png)
![platfrom setup](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6qw2uluwddea1xhqq7s7.png) 
![platfrom setup](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u02bisiuc42drh6fodaj.png)
  
- create storage bucket, with permission settings given in image below
![bucket](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k8soamdn19v9z5q0td0h.png)
![bucket settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/viaf39adp21dfilsotfq.png)
  

- create database to store the relation of the userid, corresponding documentid.
![database](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y5ii7sab2yer8u2fdfzp.png)
with attributes
![bucket attributes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cv39g1vq930t0e93xxuj.png)

- Setup the config file in the flutter project according to your setup
![flutter config file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vb55h3v2qiynxe86vz34.png)

- Now run flutter and witness magic with your own eyes. 






### Submission Category: 

Mobile Moguls


### Link to Code

{% embed https://github.com/binary-ibex/simple_drive %}




### Screenshots
![login image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fynmquitcag544v0jrua.png)
![register image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uawqmgbuppcf6192k0bj.png)
![Home page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/svbfbdsuyz2empur1rn1.png)

Image if the uploaded files
![Uploaded files](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3vouilkjta6i09a0xyyd.png)

Image of the database entries

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yuuozb0h24owfigv4c4z.png)
Merge Two Sorted Lists Problem
Tags: javascript, beginners
Published: 2022-05-12 17:44:33

Trying to solve Leetcode problem 21 - Merge 2 sorted lists. Heres the problem below and my own attempt which dosen't work. If anyone can help explain to me the flaw in my logic because it dosen't work :(. 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/43i9f1cjrg43mshum4y1.jpg)

`var mergeTwoLists = function(list1, list2) {
    const final = [];
    
    for (let i=0; i<list1.length; i++) {
        for (let j=0; j<list2.length; j++) {
           if (list2[j] > list1[i]) {
               final.push(list1[i]);
           } else if (list1[i] > list2[j]) {
               final.push(list2[j]);
           } else if (list1[i] == list2[j]) {
               final.push(list1[i], list2[j]);
           }
        }
    }
    return final;
};`
Call to action for all VS Code users!
Tags: forem, vscode, webdev
Published: 2022-05-12 17:40:11

Earlier today, I was noodling around on [VSCodeTips](https://community.vscodetips.com/) _(— a Forem community dedicated to sharing tips & tricks on how to best leverage VS Code)_ and realized it was high time I amplified it here on DEV so the rest of you can explore this relevant and practical community. VSCodeTips is managed by @nickytonline — a longtime DEV member, contributor to Forem, and former Forem core team member.

{% embed https://community.vscodetips.com/ %}

In addition to keeping up with all things VS Code on DEV, I encourage you to head over and join this space which will enable you to explore sub-categories like extensions, themes, shortcuts, etc.

### 👉 [Join VSCodeTips now](https://community.vscodetips.com/enter).



Happy VSCoding! 🎉

***

_One last thing. You’ll notice **"Sign up with Forem"** as an option on these Forems. This is a service we now offer to most seamlessly navigate the ecosystem and manage your identity. We want you to be able to **bring your full self without having to bring your full data**, so making this distributed ecosystem as straightforward as possible in the long run is really important. Create a [Forem account](https://account.forem.com/) and connect it with your DEV account [via your settings](https://dev.to/settings)._ 🙂
portfolio website
Tags: appwritehack
Published: 2022-05-12 17:37:22


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wlkbe5ubloc93zugnsrn.png)[Instructions]: # (To submit to the Appwrite Hackathon on DEV, please fill out all sections.)


### Overview of My Submission
I have made a portfolio website ,that describes every academic details ,skills etc. In this project I have used following technologies as HTML ,CSS,BOOTSTRAP .By this website all the professionals can make a chart of their experiences.It will help for getting selection in jobs.

### Submission Category: 

Wacky Wildcards


### Link to Code
https://github.com/naman5825/portfolio


### Additional Resources / Info

[Github:] # https://naman5825.github.io./portfolio/
Plotwist - Appwrite Hackathon
Tags: appwritehack, web2
Published: 2022-05-12 17:27:17


## **Overview of My Submission:**


Confused by the name  **Plotwist**  ? What is Plotwist ? Why Plotwist?  Well , let me tell about it more. **Plot** - main story of a literary and **Wist** - to know/gain knowledge about it. Yes, that is what we mean in Plotwist.Being a book lover myself , I always wanted an app which gives the plot/summary and reviews of a novel before skimming into the book and most importantly connecting with my favourite author.

Plotwist is a web application that allows bibliophile users to read and know more about their favourite books which is indeed written by their favourite authors/writers/novelist. The app connects the users with the book authors and one can read the plot or summary of a book and can continue reading the whole book either from the Ebook or by buying the book of the author from the shared link. The verified author gets to post their plot , share their book link to buy and give spoilers of their book in this app while the users can customize their feed with their favourite genres , authors , poets. The users can read their top favourite book picks , write/comment to the book authors and review their books. 

## Features:

- User Registration
- User Login
- Customized Feed According to User's Preferences
- Plot/Summary Of Book/Poems
- Profiles for Authors and Users
- Can Review books , Connect with the authors.


## Tech Stack:

1. ReactJS - Frontend 

2. Appwrite Web SDK - Backend 

3. Material UI , Bootstrap , Scss - Style Components





## Submission Category: 

Web2 Wizards


## Link to Code

 {% embed https://github.com/crispinr/plotwist-fe %}



## Additional Resources / Info :

 Screenshots :
  

!['Image description'](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3dvfv9ktaexg6s2z1a2l.png)


!['Image description'](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xheeqax2kipgna8yt89y.png)


Teammates :

 Crispin R : {% user crispin_r %}
 Regis Raymond : {% user regisray %}
 Alwin Jebastine : {% user alwinjebastine %}
 Abarna S: {% user abarna453 %}
Starting to learn Android Development
Published: 2022-05-12 14:14:33

Hello Everyone!
Sophomore year of my college has ended and summer vacations have started. My goal is simple: to learn Android Development and start freelancing/internships/remote work to become financially independent by the end of this year. I know it is not going to be easy, and there is a chance of failing, but I think it is worth giving a shot.

Till now, I know Java. I have solved several leetcode questions in Java to get an idea of various data structures and algorithms. I also know a little bit of HTML, CSS and Javascript (I know these are not useful in Android Development). Since the beginning of May, I tried learning Kotlin, and now I am pretty comfortable coding in Kotlin. 

I will be sharing my daily progress here on dev.to. My goal is to get comfortable with the basics by the end of May and start learning advanced concepts & building portfolio of applications in June.

Right now I am following this playlist I found on YouTube:
https://www.youtube.com/playlist?list=PLEPZdzLLJH94Jk_Jz-cTUXYFoObPBH7KB

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/21v9didezkfqslguf5ml.png)

Please tell me if you know any better resources(free, as I cannot afford any paid resources right now as my financial condition is also not good). I mostly prefer video resources but document based resources are also fine.

Thanks for Reading!!!
Modern React Avatar 😎
Tags: javascript, react, css, avatar
Published: 2022-05-12 16:53:27

##Newest modern Lightweight Avatar Generator for React :wave:

####Install

Open your terminal and let's install modern-react-avatar.
```json
npm install --save modern-react-avatar
```

####Usage
1. Import Custom Element:
```js
import { Avatar } from 'modern-react-avatar'
import 'modern-react-avatar/dist/index.css'
```
2. Start using it!
```js
<Avatar name="Fathy" />
```

#####Some examples:
```js
<Avatar name="Fathy" shape="square" />
<Avatar name="Fathy" randomColor="true" />
<Avatar name="Fathy" size="large" />
<Avatar icon="true" size="large" alt="alt text" />
<Avatar src="https://via.placeholder.com/150" alt="alt text" />

```

Well done! :clap:

Thanks for reading!  Say Hallo! [Twitter](https://twitter.com/Pxuee)
Top 7 JavaScript Animation Libraries that you must know 🤓🤓
Tags: javascript, webdev, tutorial, programming
Published: 2022-05-12 16:50:16

Today I will give you suggestion on JavaScript animation libraries

three.js

Three.js is a WebGL based 3d animation library. This library allows you to create a scene with a camera and animate objects within it. Three.js is the most popular 3d animation library available for the web

GSAP

The gsap library is a great way to create high performance animations that work in all major browsers. It allows you to animate CSS, SVGs and generic objects

Anime.js

anime.js a lightweight javascript animation library with a straightforward but powerful api with highly customizable animation effects. it is one of the best all in one animation javascript libraries to use

Mo.js

mo.js is a retina ready javascript motion graphics library with simple declarative APIs that will help you master your motion project quickly you don't worry about large file size overheads as it's modular

Typed.js

Typed.js is a fantastic typing animation library that includes useful customization features such as bulk typing, smart backspacing and type pausing. you can make any set of strings type out smoothly

Vivus.js

vivus.js is a lightweight javascript animation library that is specifically designed for svg drawing animations. you can select from a variety of animation types or write your own custopm scripts

Proton

proton is an excellent particle animation library that allows you to quickly create a wide range of particle effects with a variety of renderers you can create flames, fireworks, bullets, and even explosions

Scroll Reveal

Scroll revel is a javascript library with no dependencies that you can use to animate your web elements as they scroll into view. Scroll reveal uses the singleton pattern we can call from anywhere

this is it for today post on JavaScript Animation Libraries

Read More

[**7 killer JavaScript one-liners you must know**
](https://dev.to/ashishdonga/7-killer-javascript-one-liners-you-must-know-nhm)

[**12 javascript pro snippet codes for everyday problems**
](https://dev.to/ashishdonga/12-javascript-pro-snippet-codes-for-everyday-problems-hfn)
Data types of javascript
Published: 2022-05-12 16:42:34

* loops                          
* Array Methods
* string Methods
* Arrow Funtions
* Strict Mode
* Difrents between == and === 
* NaN
* call back In JavaScript
* call back hell
*promise.all
*promice.race
* async=-await
* array destructuring
*  object destructuring
* object destructuring
* Rest
* Spread
* Call
* apply
* bind
Cloudways mit Cloudflare Enterprise Add-on für 5 Dollar - Mit Anleitung
Tags: wordpress, cloudflare, hosting, performance
Published: 2022-05-12 14:07:56

---
title: Cloudways mit Cloudflare Enterprise Add-on für 5 Dollar - Mit Anleitung
published: true
date: 2022-05-12 13:53:55 UTC
tags: WordPress,cloudflare,hosting,performance
canonical_url: https://bloggerpilot.com/cloudways-cloudflare-enterprise/
---

![Cloudways mit Cloudflare Enterprise Add-on für 5 Dollar - Mit Anleitung](https://bloggerpilot.com/wp-content/uploads/2022/05/cloudways-cloudflare.png)

Mit der Kombination von Cloudways mit Cloudflare Enterprise Add-on holst...

Der Original-Artikel erschien auf [Cloudways mit Cloudflare Enterprise Add-on für 5 Dollar - Mit Anleitung](https://bloggerpilot.com/cloudways-cloudflare-enterprise/).

Cloudways macht es dir leicht, Cloud-Server einzurichten und zu verwalten. Mit der intuitiven Benutzeroberfläche kannst du WordPress, Magento und viele andere Skripte mit nur wenigen Klicks installieren. Du kannst deine eigene Domain einbinden oder eine Domain aus ihrem Marktplatz auswählen. Cloudways hat alles, was du brauchst, um einen Server in der Cloud einzurichten.

Um das CloudFlare Enterprise Add-on zu aktivieren, wählst du beim Erstellen eines neuen DNS-Eintrags einfach eine Domain aus der Dropdown-Liste von CloudFlare aus.

Das CloudFlare Enterprise Add-on ist für alle zahlenden Kunden verfügbar.

Cloudflare Enterprise ist ein Dienst, der von Cloudflare angeboten wird. Cloudflare Enterprise ist ein Cloud-Service, der eine verwaltete, mandantenfähige Edge-Plattform bietet. Er ist für große Organisationen gedacht und ermöglicht ihnen die einfache Implementierung einer Infrastruktur, die das Internet sättigt. Er hilft beim Aufbau einer robusten und skalierbaren Lösung, die einen hohen Webverkehr bewältigen kann.

Enterprise bringt viele neue Funktionen mit sich. Eine dieser Funktionen ist die Benutzerfreundlichkeit. Enterprise ist sehr einfach zu bedienen, so dass jeder nach einer kurzen Einarbeitungszeit mit der Anwendung beginnen kann. Auch die Benutzeroberfläche ist sehr kompakt und intuitiv. Die Benutzer/innen finden das, was sie brauchen, wann sie es brauchen, denn Enterprise ist sehr intuitiv. Enterprise ist auch sehr effektiv für den Nutzer, weil es im Grunde alles für den Nutzer erledigt. Es ist praktisch eine Oberfläche, auf die der Nutzer verzichten kann.

Zusammenfassend lässt sich sagen, dass Cloudflare Enterprise (CE) eine nützliche Lösung für Unternehmen mit stark frequentierten Websites ist. Die Funktionen von Cloudflare Enterprise sind wichtig, um eine hohe Sicherheit der Website zu gewährleisten. Die Funktionen von Cloudflare Enterprise (CE) gewährleisten außerdem einen geschäftsgerechten Support. CE verfügt über fortschrittliche Funktionen wie Firewall-Regeln, Authentifizierung, IP-Management, Lastverteilung und Routing.
Release Notes 22.05.12 - Aesthetic and Functional Updates
Tags: devops, networking, sdn, release
Published: 2022-05-12 16:36:47

We're excited to present you with the latest release of Syntropy Stack. Our team has been tailoring the product to better align with upcoming features, and we hope these aesthetic and functional updates will also improve your Syntropy Stack experience today.

As we progress our technology and grow the ecosystem, we listen closely to our community to build tools that matter. If you have any feedback or ideas, let’s talk on [Discord](https://discord.gg/UYDyHwk5gN).

> **Syntropy Stack** is free to use.
> **[Access the platform here!](https://platform.syntropystack.com/?utm_source=devto&utm_medium=devto&utm_campaign=release0921)**

---

# New Features & Improvements

- Added more events to be tracked in the Audit log
- New implementation of a notification microservice
- Full coverage service coverage with health checks
- Rewritten the date selector for global improvements
- Migrated to TimescaleDB for more resilient Analytics
- Applied multiple visual improvements for the Dark theme
- Implemented multiple SDN Path calculation optimizations
- Added support to automatically select the platform theme based on the user system settings

## Redesigned the "Services" dropdown to appear in a better location in the "Connections" table

![Redesigned endpoint services screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p1g7568l1wc14218uchs.png)


## Implemented an ability to set up a non-expiring agent token

![Non expiring agent token screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zy4l03ao4377b9g5bl7h.png)


# Fixes

- Fixed Audit log date ranges issue
- Audit log is now receiving live data
- Fixed too restrictive User search in the Audit log
- Fixed Audit log results refresh issue after the filters are closed
- Fixed service count numbers are stuck after services are disabled
- Access tokens do not require a description anymore
- Fixed active service reporting on the endpoint level
- Fixed IP address cropping in the tooltip


---

# Get Started
Get started with Syntropy Stack with our three-minute [quick start video](https://vimeo.com/499558754), or follow the [documentation](https://docs.syntropystack.com) for more details. Use Syntropy Stack to streamline your container and multi-cloud deployments and automate network orchestration.

# Get Involved
Our community helps us identify the right problems to solve for our users, whether you're an active user of one of our products or just getting started [join our community on Discord](https://discord.gg/UYDyHwk5gN)! We love to foster communication among developers. Also, don't hesitate to send us a message if you have feedback or need assistance. We're happy to help!
Day-86 Training At Ryaz
Tags: javascript, webdev, beginners, programming
Published: 2022-05-12 16:32:20

Date:12/05/2022
Day:Thursday

Today, I started at about 10:20 am as I was in progress to compleate the java script course and the biding project so, today I started at about while changing the basic design of my biding project so, basically I did some basic changes and after this I started with as I wanted to integrate the secure password in this as presently it include only simple password but not the secure password i.e it doesn't Create the strong password so, I searched for it and  tomorrow I would try to integrate it and after this I tried to integrate the mail confirmation as once the user have registered so, he gets a confirmation mail as he have registered successfully so, as today I kept searching the changes need to be done in my project so, today I didn't dis the course modules so, this way my day ended up and I got to learn many new things.