teleren/devto huggingface dataset:
Quick CSS : Make infinity loading animation for your next website.
Tags: css, html, beginners, webdev
Published: 2021-07-24 10:20:10

Hello, welcome. Today we'll see a quick CSS tutorial on how to make gradient loading animation. 

#Loading Animation
Wonder, how to make a loading animation ? Let's see how you can make one very easily.

#Video Tutorial

{% youtube 89IFrt_Unj0 %}

#Let's start

So, start with basic HTML structure. And after that, create a `<div>` with class `loading-box` it will contain our loader. And inside that, create another `<div>` with class `loader`.

```HTML
<div class="loading-box">
    <div class="loader"></div>
</div>
```

And for styling first, give basic style.

```CSS
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fefefe;
}

.loading-box{
    position: relative;
    width: 400px;
    height: 50px;
    border-radius: 50px;
    border: 2px solid #ededed;
    overflow: hidden;
}
```
In above CSS, we are using flex box to center our loading box.
######Output
![Capture](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y2pvrgscvegit051bnea.PNG)

Now, style loader.
```CSS
.loader{
    width: 100%;
    height: 100%;
    position: absolute;
    border-radius: 50px;
    background: linear-gradient(45deg, #b6b5ff, #ff9797);
    left: 0%;
}
``` 
######Output
![Capture-2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5m3qxr2dj3sr5u90oe3a.PNG)

You can see we are done with the loader, Now let's animate this. As you can notice, we have `left` property set to `0%` change it to `-100%` and give animation.

```CSS
.loader{
    left: -100%;
    animation: load 3s linear infinite;
}

@keyframes load{
    0%{
        left: -100%;
    }
    100%{
        left: 100%;
    }
}
```

######Output
![Untitled design (2)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u0tksqdo2zzis9afoekn.gif) 

So, it's done. I hope you understood each and everything. If you have doubt or I missed some point let me know in the comments.

#Articles you may found Useful
1. [CSS Positions](https://dev.to/kunaal438/css-position-everything-you-need-for-good-developer-pfh)
2. [CSS Media Query](https://dev.to/kunaal438/media-query-everything-you-need-for-responsive-design-b8g)
3. [CSS flex box](https://dev.to/kunaal438/display-flex-complete-guide-on-css-flex-box-2021-5bi2)

If you like, you can subscribe my youtube channel. I create awesome web contents. [Subscribe](https://www.youtube.com/c/modern_web?sub_confirmation=1)

Thanks For reading.
Common Design Patterns in Android
Published: 2021-07-24 10:14:08

A design pattern provides a general reusable solution for the common problems that occur in software design. The pattern typically shows relationships and interactions between classes or objects. The idea is to speed up the development process by providing well tested, proven development/design paradigms. Design patterns are programming language independent strategies for solving a common problem. That means a design pattern represents an idea, not a particular implementation. By using design patterns, you can make your code more flexible, reusable, and maintainable.

###Types of Design Patterns
There are mainly three types of design patterns: 

* **Creational patterns**: How you create objects.
* **Structural patterns**: How you compose objects.
* **Behavioral patterns**: How you coordinate object interactions.

It’s not mandatory to always implement design patterns in your project. Design patterns are not meant for project development. Design patterns are meant for common problem-solving. Whenever there is a need, you have to implement a suitable pattern to avoid such problems in the future. To find out which pattern to use, you just have to try to understand the design patterns and their purposes. Only by doing that, you will be able to pick the right one.

###Creational Patterns :
These design patterns are all about class instantiation or object creation. These patterns can be further categorized into Class-creational patterns and object-creational patterns.

Common Creational design patterns in Android are:
    * **Builder :** Separates object construction from its representation 
    * **Singleton :** A class of which only a single instance can exist 
    * **Factory Method :** Creates an instance of several derived classes

###Structural Patterns :
These design patterns are about organizing different classes and objects to form larger structures and provide new functionality

Common Structural design patterns in Android are:
* **Adapter :** Match interfaces of different classes 
* **Facade :** A single class that represents an entire subsystem 
* **Decorator :** Add responsibilities to objects dynamically
* **Composite :** A tree structure of simple and composite objects 

###Behavioral Patterns : 
Behavioral patterns are about identifying common communication patterns between objects and realizing these patterns. 

Common Behavioral patterns in Android are :
* **Command :** Encapsulate a command request as an object
* **Observer :** A way of notifying change to a number of classes 
* **Strategy :** Encapsulates an algorithm inside a class 
* **State :** Alter an object's behavior when its state changes
Connect 4 Recreated in Python with NumPy
Tags: python, gamedev
Published: 2021-07-24 10:09:12

Connect 4 has recently been released on Github. It has been recreated with Python, in line with the module NumPy. Thanks to Keith Galli, we have worked together to create one of the best strategy games on Python. You can now play with Artificial Intelligence or multiplayer with your friends. Check it out!
Securing Your Comment Form From XSS Attack.
Tags: webdev, security, watercooler, xss
Published: 2021-07-24 10:07:38

XSS, a simple attack, but can ruin your web easily. To perform this attack, simply just type `<script>alert('XSS')</script>` at your fictim's comment form. If you find this notification: 

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

Congrats, you found a vulnerable site, and you officially become a bug hunter. XD. 

Back to securing the form. There are 3 methods that i know to securing your input form form XSS:

### Check the input before add it to the database
Simple one. Check the input if the input not contain something suspicious. If you find it, you can reject the input.  

### Remove all HTML tags from input
For do this in PHP, you can use `strip_tags`. Here is the example: 
```php
<?php
$input = '<script src = "http://evil.com/some/evil/source"></script> Some comments';

echo strip_tags($input);
?>
```

And, here is the result: 
```js
Some comments
```

### Sanitaze your input
You can sanitaze the input using a simple replace function. Simply, just replace `<` with  `&#60;` (unicode symbol for `<`). If you display `<` as the unicode, the XSS syntax will'nt run, and printed as normal string.

Yeah, that's my tips, Do you have any tips that i don't write here, you can add it down in the comment 👇.

Thanks for read, and bye! 👋.
jQuery : Adding Event Listeners to HTML elements even before they are rendered
Tags: javascript, jquery, events
Published: 2021-07-24 10:03:49

---
title: jQuery : Adding Event Listeners to HTML elements even before they are rendered
published: true
description: Setting up event listeners for dynamic elements using JQuery
tags: javascript,jquery,events
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bktyrkddc24cwfed3wlf.png
 
---

## Intro

This article will help you setup event listeners for dynamic elements on the webpage using JQuery.

## Pre-requisites

Basic knowledge of JQuery Selectors, Basic event handling in Javascript

## Lets Start

- Create a basic html with our jQuery dependency
```html
<html>
  <head>
    <!-- add jquery dependency -->
    <script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"></script>
  </head>
  <body>
    <div class="main">
      <!-- button will appear here -->
    </div>
    <script>
      let buttonHtml = `<button class="btn">Click to turn me RED</button>`
      // add a button 1 second after document is loaded
      $(document).ready(function () {
        setTimeout(() => {
          $(".main").append(buttonHtml);
        }, 1000)
      })
      
      
    </script>
  </body>
</html>
```

This code just adds a button with class `btn` inside our main div.

### Wrong Approach
- Let's start with what I was doing wrong earlier.
- Adding more lines to our script that should add a click listener to my button

```javascript
// on click of our selector, turn our button RED
$(".btn").on('click', function(){
  $(this).css('background','red');
})

```

Well, See in action

![Wrong Approach GIF](https://res.cloudinary.com/copsbehindme/image/upload/v1627119124/click-for-nothing.gif)

### Correct Approach
- I checked for jQuery documentation and found that there is also an event-delegation approach

// Taken from https://api.jquery.com/on/

> Delegated event handlers have the advantage that they can process events from descendant elements that are added to the document at a later time.

So, all I had to do was add another parameter to our method and change the selector.

So Basically,
> Tell our browser, that whenever there is a click event on our `.main` class element, check if it was made on the `.btn` specifically.

So I replaced my previous code with this.

```javascript
$('.main').on('click','.btn', function(){
  $(this).css('background','red');
})
```


**That was it. Boom!**

![Correction GIF](https://res.cloudinary.com/copsbehindme/image/upload/v1627119125/click-for-kaboom.gif)


### Thank you note.

Thanks for reading. Like and follow for more such articles.
Happy to engage in healthy discussion in comments.
Suggested Youtube Channels that can Help You learn more in Web Development
Tags: beginners, webdev, codenewbie
Published: 2021-07-24 10:01:11

## Introduction
Hi, I am Snail, just join this community recently. And here I am going to share about the Youtube Channels I would like to recommend for learning programming and web development.

## 1. Fireship
The very first channel I would like to share about is Fireship. The duration of its videos usually ranged around 2-1X minutes, therefore it is short and easy to understand.

Link: https://youtube.com/c/Fireship

## 2. WebDevSimplified
Here goes another Youtuber, who is aim to simplify the web development as much as possible to others. Through its videos, you will learn from the basic of web programming and the latest and most popular techologies used in web development, as well as tutorials of practical project just as blog and interviews about the career of web development.

Link: https://youtube.com/c/WebDevSimplified

## 3. freeCodeCamp.org
It is an organization which its target is to help people learn to code for free. And it gives out certifications if you can finish its programmes, while the programmes are all free. While the duration of its videos can be last for several hours, the channel has divided the videos into sections for you to follow.

Link:https://youtube.com/c/Freecodecamp

## Final Thoughts
That's all about the Youtube channels I would like to recommend for now. If you have others Youtube channels you find useful for learning web programming and development, please feel free to share it below. Hope this post can help :)
Boost Conversions By Tracking These Top 10 Website Metrics
Tags: beginners, help
Published: 2021-07-24 09:40:34

If you are wondering how effective your CRO strategies are, tracking website metrics is the best way to find out. As we live in an age of data-driven analytics, monitoring these metrics is more crucial than ever. It helps you identify and choose the right strategies so you won’t waste your marketing resources on ineffective ones.

Furthermore, website metrics show you which areas of your website need improvement to increase conversions.

You might be overwhelmed by the vast number of website metrics. So, in this blog post, we will discuss the most important ones and see how each can help you optimize your conversion rate. We will also introduce a great tool for tracking metrics at the end of this post.
for reading full article: https://watchthem.live/website-metrics/
Flex Tips: Adding Gaps
Tags: css, flexbox, tips, webdev
Published: 2021-07-24 09:38:21

Sometimes you need some gaps for your flex, right? But, flex doesn't support gaps, likes grid.

Here is how to make it: 
```css
.parent {
    display: flex;
    width: 100%;
    border: 1px solid black;
} 

.child {
    border: 1px solid black;
    height: 50px;
    width: fit-content;
}

.child:not(:first-child) {
    margin-left: 8px;  */ Gaps size / 2 */
}

.child:not(:last-child) {
    margin-right: 8px; */ Gaps size / 2 */
}
```

And here's the result:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2y1s7uti0o3y737wi367.png)
Convert python 2 to python 3 [In 1 Single Click]
Tags: python, programming, tutorial, tooling
Published: 2021-07-24 07:46:04

After 1 January 2020 many companies and individuals are worried about their Python 2 code because Python’s organization stops support for Python 2, and the new development era was moving to python3 to solve this problem. There. They are few packages developed over time, one of them is official and extremely powerful.

## Three Library that is used to convert your Python 2 code to Python 3 code.

1. 2to3 (Offical, recommended)
2. Python Future + Futurize
3. Six + Modernize

Now at this point, you definitely thinking well, what’s the difference between, 2to3, Python Future + Futurize, and Six + Modernize.

Here’s your answer!
## What’s the difference between

Automated tools for PY2 to PY3 conversion/compatibility?

![2to3, Python Future + Futurize, and Six + Modernize](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hp4o1qrnf22mwnmqld1e.jpg)

## How to convert Python 2 to Python 3
This can be very easy if you use any of the above libraries (do not forget to make sure the compatibility)
There are two approaches for converting Python 2 to python 3.
### Method #1: Convert Python 2 to python 3 using web-tool.
There is a simple tool for converting python 2 to python 3.
#### you can use a [web application to convert python 2 to 3](https://360techexplorer.com/tools/python-2-to-3-converter/).

This tool is:
1. **100% FREE**
2. **Compatible with All versions of Python**
3. Actively maintained

### Method #2: Convert Python 2 to python 3 using a python library.
We can convert Python2 scripts to Python3 scripts by using the 2to3 module. It changes Python2 syntax to Python3 syntax. We can change all the files in a particular folder from python2 to python3.
#### Step 1: Open your terminal and navigate to your File
Open your terminal or CMD depend on whatever you are using Windows or Linux.

Navigate to the directory where your python file(s) is/are located. (of course, using the “cd” command)
#### Step 2: Install the library
As usable, use pip to install 2to3, use can use any other library as well, I like 2to3

Commnd: pip install 2to3
#### Step 3: Convert the files

Excute: 2to3 [file or folder] -w
ClearCut Fullstack Developer Roadmap 2021 with 300+ Resources 🤩🚀
Published: 2021-07-24 09:07:56


## Frontend Developer + Backend Developer = Full Stack Developer.🤩😍🚀


## ⭕ Frontend Developer Roadmap 2021

## 1. Internet
###  - Free learning Resources from Youtube, Website
## 2. HTML
###  - Free learning Resources from Youtube, Website, Twitter Thread.
## 3. CSS
###  - Free learning Resources from Youtube, Website, Twitter Thread.
###  - Paid Courses to Learn HTML and CSS.
###  - Improve CSS Skills By Playing GAMES.
###  - Build Projects Using HTML and CSS for PRACTICE.
###  - Websites to Practice front end Skills.
## 4. JavaScript
###  - Free learning Resources from Youtube, Website, Twitter Thread.
### - Paid Courses to Master JavaScript
### - Build Projects Using JavaScript.
## 5. Git
###  - Free learning Resources from Youtube, Website.
### - Git Cheat sheets
## 6. CSS Frameworks.
## 6.1. Tailwind CSS.
###  - Free learning Resources from Youtube, Website.
### - Projects to Practice Tailwind CSS.
## 6.2. Bootstrap.
###  - Free learning Resources from Youtube, Website.
### - Projects to practice Bootstrap.
## 6.3. Bulma CSS Framework.
###  - Free learning Resources from Youtube, Website.
### - Projects to Practice BULMA CSS.
## 7. JavaScript Frameworks.
## 7.1. REACTJs
### - Paid courses to learn React Js
### - Build Projects to Practice ReactJs.
## 7.2. Vue Js.
### - Paid Courses for Vue.js
### - Projects to Practice VueJs
## 7.3 Angular
### - Paid Courses to Learn Angular.
### - Projects to Practice Angular.
## 7.4. Svelte
### - Paid Course to Learn Svelte Js.
### - Projects to Practice Svelte Js.


##  ⭕Backend Developer Roadmap 2021


### Learn basics of HTML CSS & Javascript
### Learn Git & Github
## 1. APIs
### - Free Learning Resources.
### - Projects to Practise API
## 2. NodeJS
### - Free Learning Resources.
### - Projects to Practice NodeJS
## 3. ExpressJs
### - Free Learning Resources.
### - Projects to Practice ExpressJS
## 4. SQL Vs NoSQL
## 5. SQL 
### - Free Learning Resources.
## 6. PostgreSQL
## 7. NoSQL
### - Free Learning Resources.
## 8. MongoDB
### - Free Learning Resources.
### - Projects to Practice MongoDB
## 9. Firebase
### - Free Learning Resources.
### - Projects for Practice Firebase
### - Paid Courses for Above Technologies
## 10. Docker
### - Free Learning Resources.
## 11. CI/CD
### - Free Learning Resources.
## 12. DevOps
### - Free Learning Resources.
### - DevOps Projects

## Above Mentioned Resources at One Place..🤩❤️
## Grab Your Copy Now Now Now👇👇
 [Full Stack Developer Roadmap 2021](https://mdjunaidap.gumroad.com/l/fullstack-dev-roadmap)
My Experience with Ngrok on Windows
Tags: ngrok, django, serverless
Published: 2021-07-24 09:02:39

I am user used to Ubuntu. Since I started my career as a developer I have been using Ubuntu. Ubuntu is a great OS that I enjoy so much. But I have to stop using Ubuntu because my Laptop could not handle it anymore. The Laptop is kind of old and I need to get a new one. 
For the main time I have to change my OS to Windows. To get my environment setup was kind of hard for me to do. I am a Python Developer specialized in Django web development. As a developer you might need something apart from local server port 80: ngrok has been a big help in this aspect.
When I switched to window I found it hard to use Ngrok because they environment had change.

But here are what I did:
Download Ngrok. That come in zip file
Unzip the file, you will get ngrok.exe file
Copy ngrok.exe file into a location you can easily find it
Anytime you want to use it, go to that location and launch it.
Then you are good to go.

This is not like Ubuntu when you can launch it from the terminal.
I welcome comments, if you know of any way I can use this, let me know.

Photo by <a href="https://unsplash.com/@jordanharrison?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Jordan Harrison</a> on <a href="https://unsplash.com/s/photos/server?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
Game clocks 1,000 FPS on Potato Computer is Simple "Revolutionary"
Tags: programming, python, gamedev
Published: 2021-07-24 08:13:00

This could be the future of gaming right here, ladies and gentlemen. We finally have a game that has meaning but still runs on a potato PC. You can welcome the Breakout. Thanks to Coding with Russ (check out his YouTube channel), we have a new game created with PyGame. It is called Breakout and runs at incredibly smooth and quick speeds. My potato laptop from 2011 with Windows 7 managed to run the game very smoothly at 985.68 FPS. "Revolutionary" is the word for this occasion. Although it is a 2D game, it's design is simply amazing. Attractive, yet clean. Simple, yet addictive. Classic, yet modern. Check it out now:
https://github.com/MatthewTamYT/Breakout
HTML  TUTORIAL FOR BEGINNERS PART 4
Tags: html, webdev, programming
Published: 2021-07-24 07:50:40

a (anchor) elements can also be used to create internal links to jump to different sections within a webpage.

To create an internal link, you assign a link's href attribute to a hash symbol # plus the value of the id attribute for the element that you want to internally link to, usually further down the page. You then need to add the same id attribute to the element you are linking to. An id is an attribute that uniquely describes an element.

Below is an example of an internal anchor link and its target element:
```
<a href="#contacts-header">Contacts</a>
...
<h2 id="contacts-header">Contacts</h2>
```
When users click the Contacts link, they'll be taken to the section of the webpage with the Contacts header element.
### Demo
https://codepen.io/ahmadullah1919/pen/QWvOmVE
TCP Pros and Cons with working example
Tags: backendessentials, webdev, udp, tcp
Published: 2021-07-24 07:40:30

# Backend Essentials-2 [TCP]
***
### 1. Overview

> This article covers the basics of TCP(Transmission Control Protocol) in terms of its pros and cons. This article also provides the working example of TCP.

### 2. TCP

> TCP is a transport protocol that is used on top of IP to ensure reliable transmission of packets. TCP includes mechanisms to solve many of the problems that arise from packet-based messaging, such as lost packets, out of order packets, duplicate packets, and corrupted packets.

> ##### Pros:
1. Acknowledgement: To ensure that data is received successfully this header is used. After sending the data sender starts a timer and if receiver doesn't sends back the acknowledgement after the timer ends sender sends the packet again. This ensures no data loss.
2. Guaranteed delivery.
3. Connection Based: Client and server needs to establish a unique connection.
4. Congestion Control: Data waits(if network is busy) and sent when network can handle it.
5. Ordered Packets: TCP connections can detect out of order packets by using the sequence and acknowledgement numbers.

> ##### Cons:
1. Larger Packets: Because of all the above features.
2. Slower than UDP.
3. Stateful.
4. Server Memory(DOS): Because of statfullness server needs to store the connection information. *If some low level client keeps on sending request to the server without doing any acknowledgement, than server keeps waiting and the data is stored in memory(until timeout) so server can eventually die if many of these clients sends request.*

### 3. Code Example

> **Requirements: nodejs, code editor, telnet**

```javascript
const net = require("net");

const server = net.createServer(socket=>{
    socket.write("Hello\n");

    socket.on("data", data=>{
        console.log(data.toString())
    })
})

server.listen(8080);

```
Run the script by executing following command
```
node <filename>.js
```
Next step is to connect to the TCP server, for this execute the following command in a terminal
```
telnet localhost 8080
```
and now a "Hello" message will be printed on terminal screen, type any message in terminal and it will be printed on server's console screen.

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

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

***
<p> [1]: <a href="https://youtu.be/qqRYkcta6IE">TCP vs UDP Crash Course[Hussein Nasser]</a></p>

<p> [2]: <a href="https://www.khanacademy.org/computing/computers-and-internet/xcae6f4a7ff015e7d:the-internet/xcae6f4a7ff015e7d:transporting-packets/a/transmission-control-protocol--tcp#:~:text=The%20Transmission%20Control%20Protocol%20(TCP,duplicate%20packets%2C%20and%20corrupted%20packets.">Transmission Control Protocol[Khan Academy]</a></p>

***