teleren/devto huggingface dataset:
5 Must Have VS Code Extensions
Tags: vscode, career, productivity, webdev
Published: 2022-03-13 13:28:34

#### TL;DR

1. Clipboard History
1. GitLens
1. Better Comments
1. Todo Tree
1. Code Spell Checker


## [Clipboard History](https://marketplace.visualstudio.com/items?itemName=Anjali.clipboard-history)

This one is first, 'cause it's a life saver.
Have you ever copied one thing and then another but you wanted the first one? This extension is for you!
<kbd>⌘ Cmd</kbd>+<kbd>⇧ Shift</kbd>+<kbd>V</kbd> (<kbd>⌘ Ctrl</kbd>+<kbd>⇧ Shift</kbd>+<kbd>V</kbd> in Windows)

![Clipboard History gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d4kimv8dthedzu49avtm.png)
 

## [GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)

If you and your team is using Git, then GitLens is a must-have.

You can check who made the last (Git Blame).
![Git Blame](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/988f6i4zdhwqyap2n4si.png)

Or you can see all the past commits and the file history on your sidebar.
![Vs code sidebar](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j6gyeqd07wpwcq8jh31k.png)

And much more!



## [Better Comments](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments)

This will help you create more human-friendly comments, that are also colorized by category.
![All Better Comments](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/po7bwecdhz417jb73o1i.png)
 
I always use the `// TODO` comment to see what needs to be done ... and this leads to the next extension 👇

(I also made a custom snippet for `// TODO` which I will show how to do in my next post 🙂 )


## [Todo Tree](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree)

This one highlights all your `// TODO` comments and displays them in a tree view in the sidebar.


![Todo Tree](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fkriva45d83dqoyum6gk.png)
 

## [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)

This one is last but don't let it fool you...it's a lifesaver too!

And as you already guessed, it checks your code for spelling mistakes.

It saved me so many times from misspelled words and functions that the IDE didn't pickup like `.length` or arrays and many more.
 
You just need to access the `Quick Fix` by pressing
Mac: <kbd>⌘ Cmd</kbd>+<kbd>.</kbd>
Windows: <kbd>Ctrl</kbd>+<kbd>.</kbd>

![Code Spell Checker Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ha97pkjykd1rehpucs0z.gif)
 
 

Thank you for taking your time to read!!! 🙏🏼 🔥


![Thank You](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dbl0yi8zj8xlp26povg5.gif)
Preview an image before uploading using jQuery
Tags: webdev, jquery, imageupload, html
Published: 2022-03-13 13:06:02

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c7b0n2lm0btxw6f2mquo.png)
 
To preview or display an image before uploading it to the Server is providing the best user experience.
Here we are going to use HTML, CSS, and jQuery to develop it.

You just need to follow the below simple steps:

1. Define the basic HTML
2. Define the basic CSS for the HTML to apply the style
3. Define the jQuery code to preview the image and reset

## HTML

```
<head>
    <!-- jQuery library script import -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>  
    <h1>Preview an image before uploading using jQuery</h1>  
    <p>Upload an image file (.JPG,.JPEG,.PNG,.GIF) </p>
     
    <!-- input element to choose a file for uploading -->
    <input type="file" accept="image/*" id="image-upload" />
    <br>
    <!-- img element to preview or display the uploading image -->
    <img id="image-container" />
    <br>
    <button id="upload-btn" >Upload</button>
    <button id="cancel-btn" >Cancel</button>
</body>
```

## CSS

```
/* to make everything center aligned */
body{
    text-align:center;
}
 
/* to set specific height and width for image preview */
#image-container{
    margin : 20px;
    height: 200px;
    width: 400px;
    background-color:#eee;
    border: 1px dashed #000;
}
```

## jQuery code

```
/* This function will call when page loaded successfully */    
$(document).ready(function(){
     
    /* This function will call when onchange event fired */        
    $("#image-upload").on("change",function(){
 
      /* Current this object refer to input element */         
      var $input = $(this);
      var reader = new FileReader(); 
      reader.onload = function(){
            $("#image-container").attr("src", reader.result);
      } 
      reader.readAsDataURL($input[0].files[0]);
    });
     
     
    /* This function will call when upload button clicked */       
    $("#upload-btn").on("click",function(){
        /* file validation logic goes here if required */     
        /* image uploading logic goes here */
        alert("Upload logic need to be write here...");
 
    });
     
    /* This function will call when cancel button clicked */       
    $("#cancel-btn").on("click",function(){
        /* Reset input element */
        $('#image-upload').val("");
 
        /* Clear image preview container */
        $('#image-container').attr("src","");
    });
     
  });
```

**Learn detailed explaination in article here:** [Preview an image before uploading using jQuery](https://javacodepoint.com/preview-an-image-before-uploading-using-jquery/)
All in one mail app using chrome Custom tabs instead of webview
Tags: android, kotlin, beginners, java
Published: 2022-03-13 12:52:23

I have implemented chrome custom tabs instead of webview to launch the website from my app, since webview does not support advance features. The website load inside the app not in the chrome but u can use chrome features. The custom tabs more features than webview it supports proton mail service which is not supported in webview.


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

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t3kjcpm4u78pkurlwkmz.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vf9ineammgf5tfi6p78t.png)
DeepSubtitles - generates subtitles and renders them onto the video. [Build]
Tags: hackwithdg, python, showdev
Published: 2022-03-13 12:48:21

### Overview of My Submission
It is a python script that takes a Video, and Renders subtitles onto it. Transcriptions are fetched from Deepgram


### Submission Category: Accessibility Advocates

### Link to Code on GitHub

{% github https://github.com/Dhravya/DeepSubtitles %}


### Additional Resources / Info

Here's a small demo. 
(You can also check the MP4 version of this with audio [here](https://github.com/Dhravya/DeepSubtitles/blob/b566b453713173b7eebf47c00ce5e7eade71d933/assets/demo.mp4))
![Here's a demo](https://j.gifs.com/57wQ8v.gif)
The Basic of Content Delivery Network(CDN)
Tags: 100wordsaday, inkedin, beginners, cloud
Published: 2022-03-13 04:35:10

To keep it simple, at it core a DND basically stand for a group of server distributed or placed around the word at keys location, they all work together and delivers you with fast internet content. Many of the websites you use today use CDN to deliver content to you quickly. Some of these are Meta or Facebook, Netflix, Amazon, & GitHub.

CDNs allow today's modern web server to transfers files like HTML, JS, Stylesheets, Images, and Videos quick and fast between each others, as these files are needed to build a web pages. 

**A CDN IS NOT A WEB HOSTING SERVICE, AND WILL NOT REPLACE THE NEED FOR A PROPER HOSTING SERVER.**

A CDN Cache the Website content at the network edge, this mean that the main landing pages for websites, so files like HTML and CSS and a some JavaScript, are kept at the CDN servers. 


> - A CDN helps to improve Load Time of Websites.
> - Help Reduce the Cost of Network Bandwidth costs while hosting. 
> - Helps to Improve Websites Security.
> - The Content Availability increased as well as the redundancy. 

**At its core, a CDN is a network of servers linked together with the goal of delivering content as quickly, cheaply, reliably, and securely as possible. In order to improve speed and connectivity, a CDN will place servers at the exchange points between different networks, [Reference this Article](https://www.cloudflare.com/learning/cdn/).**
> - [MS AZURE CDN](https://docs.microsoft.com/en-us/azure/cdn/cdn-overview)
> - **Please DYOR(DO Your Own Research) in anything you read or see, it's always good to have multiples perspectives.** 


> - **NOTE: This is one of 30 blogs that I would be attempting to write over the next 30 days to improve my writing skills.**
Hardest hello world program of Python lol
Tags: python, shriekdj, github, programming
Published: 2022-03-13 12:31:16

So This is just for fun.

Most People said to me because I Started Using Python Mostly in my projects.

And They Tell Me That Python is not a `Real` programming language or Python is For Kids because it is too easy to write.

So for just fun.

I created a repo with various ways of writing Hello World Program In Python.

For Starters It Started Like this.

### Program for Beginners
```python
print('Hello World!')
```

### Difficulty Level 0 : Program With Shebang
```python
#!/usr/bin/env python3
print('Hello World!')
```

### Difficulty Level 1 : Program With variable
```python
#!/usr/bin/env python3

message = 'Hello World!'

print(message)
```

### Difficulty Level 2 : Program With Main Condition
```python
#!/usr/bin/env python3

message = 'Hello World!'

if __name__ == '__main__':
    print(message)
```

### Difficulty Level 3 : Program With external function.
```python
#!/usr/bin/env python3

msg = "Hello World!"

def display_msg(message):
    print(message)

if __name__ == '__main__':
    display_msg(message)
```

### Difficulty Level 4 : Program With `.env` file and running process
```python
#!/usr/bin/env python3
import os
from dotenv import load_dotenv

load_dotenv()  # take environment variables from .env file

msg = os.getenv('MESSAGE')

def display_msg(message):
    print(message)

if __name__ == '__main__':
    display_msg(msg)
```
running proces at https://github.com/shriekdj/hello-world-py/tree/main/hello_by_legends/legend_hello_4

Repo Is At
{% github shriekdj/hello-world-py %}

It Will Become more difficult by time just wait for it.
UnsafePHPCodeTester
Tags: webdev, productivity, php, programming
Published: 2022-03-13 12:21:53

My mentor is a php nerd and has created some great staff over the years. I got chance to try his creation dubbed "unsafephpcodetester." I have been using it for a while and I thought why not share it with Dev community.

Let's get started

**Introduction**

The unsafephpcodester is an amatuer-ish tool intended for personal use only. I would not advice you to publish it in your public server, but your local server will do. You can improve it to suit your needs. It is purely experimental.

**Installation**

**Note:** you can just grab the index.php and process_code.php, and run it however you run your php filesprovided the two files remain in the same folder. 

If your are running windows, place it in your wamp sever

```

C:\wamp\www\unsafephpcodetester

```

If running ubuntu, you can follow the following 7 steps to access it.

**1.** Extract the unsafephpcodetester.zip to get a folder named unsafephpcodetester

**2.** Place the unsafephpcodetester folder in root directory of your server.

**3.** Set up your virtual hosts file so that it points to this new local website.

```
/etc/apache2/sistes-available/unsafephpcodetester.conf
```
and

```
<VirtualHost \*:80>
ServerName unsafephpcodetester.com
ServerAlias www.unsafephpcodetester.com

        ServerAdmin webmaster@localhost
        DocumentRoot /var/www/unsafephpcodetester

        ErrorLog ${APACHE_LOG_DIR}/error.log
        CustomLog ${APACHE_LOG_DIR}/access.log combined

</VirtualHost>

```

**4.** Restart apache2 to update the changes by running the command

```
$sudo service apache2 restart
```
**5.**  Create a simlink to it, in the sites-enabled folder, using the command

```
\$sudo ln -s /etc/apache2/sistes available/unsafephpcodetester.conf /etc/apache2/sistes-enabled/unsafephpcodetester.conf
```
**6.** Add the following two lines to /etc/hosts

```
127.0.0.1 unsafephpcodetester.com
127.0.0.1 www.unsafephpcodetester.com
```
**7.** Then run the url in your browser

```
http://unsafephpcodetester.com
```

**Final out put**


![An image showing the output for Unsafephpcodetester](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/twhz1hois6vs4q6o177f.PNG)


_Get the files here; https://bitbucket.org/lawrencekm04/phpcodetester_


Credit to **@wezadata**
Network identifiers
Tags: network, computerscience, beginners, programming
Published: 2022-03-13 12:17:52

Want to know your Hostname, IP address and much more about your system and that too from COMMAND LINE !!!

# Host name: 

Each device in the network is associated with a unique device name known as Hostname. 
Type “hostname” in the command prompt(Administrator Mode) and press ‘Enter’, this displays the hostname of your machine. 

# IP Address:

To identify each device in the world-wide-web, the Internet Assigned Numbers Authority (IANA) assigns an IPV4 (Version 4) address as a unique identifier to each device on the Internet. 

The length of an IPv4 address is 32-bits, hence, we have 232 IP addresses available. The length of an IPv6 address is 128-bits.

**Type “ipconfig”** in the command prompt and press ‘Enter’, this 
gives us the IP address of the device. 

# MAC Address (Media Access Control address): 

Also known as physical address, the MAC Address is the unique identifier of each host and is associated with its NIC (Network Interface Card). 

A MAC address is assigned to the NIC at the time of manufacturing. 
The length of the MAC address is : 12-nibble/ 6 bytes/ 48 bits 
**Type “ipconfig/all”** in the command prompt and press ‘Enter’, this gives us the MAC address. 

# Port: 

A port can be referred to as a logical channel through which data can be sent/received to an application. 

Any host may have multiple applications running, and each of these applications is identified using the port number on which they are running. 

A port number is a 16-bit integer, hence, we have 216 ports available.

Well known Ports	0 – 1023
Registered Ports	1024 – 49151
Ephemeral Ports	49152 – 65535

**Type “netstat -a”** in the command prompt and press ‘Enter’, this lists all the ports being used. 

# Socket: 

The unique combination of IP address and Port number together are termed as Socket. 


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

# DNS Server: 

DNS stands for Domain Name system. 

DNS is basically a server which translates web addresses or URLs (ex: www.google.com) into their corresponding IP addresses. We don’t have to remember all the IP addresses of each and every website. 

**The command ‘nslookup’** gives you the IP address of the domain you are looking for. This also provides the information of our DNS Server. 

`nslookup www.google.com`

# ARP:
 
ARP stands for Address Resolution Protocol. 
It is used to convert an IP address to its corresponding physical address(i.e., MAC Address). 
ARP is used by the Data Link Layer to identify the MAC address of the Receiver’s machine. 

# RARP: 

RARP stands for Reverse Address Resolution Protocol. 
As the name suggests, it provides the IP address of the device given a physical address as input. But RARP has become obsolete since the time DHCP has come into the picture. 

Thanks for reading <3
Getting Started with 11ty
Published: 2022-02-28 23:30:35

11ty is a simple static site generator that uses the files found in the current working directory. You can use many different filetypes such as markdown, html, JavaScript, etc. There are many different ways to go about creating your first 11ty site. 

## **Basic 11ty Site**
To easily get started with 11ty, go to your command line and in the directory you want, run this command: 

```
echo '# Page header' > README.md
npx @11ty/eleventy
```
This will create a blank site in the current directory. To start up the web server, you can run this command: `npx @11ty/eleventy --serve`. After that, you can open `http://localhost:8080/README/` in your web browser to see your local page. You can edit its contents in a code editing program such as VSCode. Then you'll want to create a .eleventy.js file so that you can configure Eleventy to your site's needs. You can edit the files in the directory such as the readme.md and index.html. Here is what my basic site looks like: 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aiqavveawofjd2br0cr0.png)
You can view my GitHub code [here].(https://github.com/briangan123/11ty)

## **11ty Blog Template**
Another way to utilize 11ty is by using prebuilt templates. For this example, I used [this](https://github.com/11ty/eleventy-base-blog) template from GitHub. To use this as a template, click the green button that says "use this template". It will prompt you to create a repo name and then you can create your own version. ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9qe41ss9jvtratdpdhmv.png)
After you created your template on GitHub, you can use your command line to keep track of changes so that you can upload it to GitHub. Again, you can edit the contents by changing some files in VSCode. Here is what my blog looks like:

Homepage
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3jj5o3n1g6qduhxa48rs.png)
Archive page
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n072znuwh3y695apxat7.png)
First Blog Post
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ixdtrvn5qwf7sujmwu4j.png)
You can push your changes to GitHub to keep track of changes to your files as you add more to your site. Here is my Github [repo](https://github.com/briangan123/11tyLab).

## **Another Template**
Another template I used was [this](https://github.com/trey/resume-template). 
Following the same procedures to use the template, I created my own resume site and edited the files and page content to fit my needs. Here is what it looks like: 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/otqay0x4z7cfhr9pag0y.png)
You can see the edits I made in my GitHub repo [here](https://github.com/briangan123/resume11ty).

## **Conclusion**
11ty is a powerful tool to create a static site and there are many ways to go about it. Using a template will get you up and running faster, but if you want full customizability, then you can build your site from the ground up.
Build a Messenger Clone with MERN Stack (MongoDB, Express, React, Node JS) + Socket.io (Day 8)
Tags: javascript, react, webdev, tutorial
Published: 2022-03-13 11:29:00

In this Facebook Messenger   Clone  Tutorial series, we will learn to build an Awesome Full Stack  Facebook Messenger Project with realtime messaging functionality with socket.io . We have one on one chat as well as group chatting functionality in this app.

In this video, we will be Creating Send Email functionalities


{% youtube oFpcPlLR0Vo %}
How to Get Notified When Your Python Script Has Finished Executing
Tags: python, tutorial, machinelearning, ai
Published: 2022-03-13 11:24:18

Often when it comes to tasks such as AI/ML, Web Scraping, Data Mining, Web Automation and more with Python, they can take a lot of time to execute, making you check if it has finished executing every couple of minutes. 

Today, I'll show how you can make your Python script notify you when it has finished executing and if it returned an error or executed successfully.

##Plyer

For this to work, you'll need to install plyer using `pip3 install plyer`. Then import "notification" from plyer at the beginning of your Python script along with sys and time:
```Python
import sys
import time
from plyer import notification
```

##The Notification Function

Here's the notification function that will notify you when your code has finished executing:
```Python
if __name__ == "__main__":
    while True:
        time.sleep(3)
        notification.notify(
            title = "Finished executing "+sys.argv[0],
            message = "Successful",
        )
        time.sleep(5)
        break
```

I know the `if __name__ == "__main__":` and `while True:` might seem unnecessary, but the `notification.notify` function can't work unless nested in these. Also, for those wondering, `sys.argv[0]` gets the name of your script. 

##Implementation

Here's a sample code that implements this method by running for 30 seconds then notifying you once it has finished executing.
```Python
import sys
import time
from plyer import notification

if __name__ == "__main__":
    print("Doing stuff...")
    time.sleep(30)
    while True:
        time.sleep(3)
        notification.notify(
            title = "Finished executing "+sys.argv[0],
            message = "Successful",
        )
        time.sleep(5)
        break
        
```

Here's how the notification will look like:
![Notification](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bbjt59fvn33k7n8lreil.png)

**What if it didn't execute successfully?**

If your script returns an error, we can simply use try/except like so:
```Python
import sys
import time
from plyer import notification

if __name__ == "__main__":
    try:
        print("Doing stuff...")
        time.sleep(5)
        while True:
            time.sleep(3)
            notification.notify(
                title = "Finished executing "+sys.argv[0],
                message = "Successful",
            )
            time.sleep(5)
            break
        
    except:
        while True:
            time.sleep(3)
            notification.notify(
                title = "Finished executing "+sys.argv[0],
                message = "Failed",
            )
            time.sleep(5)
            break

```
![Notification 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e93oikyw2dhmlepcjh9z.png)

##Conclusion

Hopefully using this method you can now peacefully browse memes while your Python code is executing without checking it every 5 minutes ;)

Byeeee👋
How to Make Money As a Front End Developer
Published: 2022-03-13 11:18:49

So then, there are many ways to start making money. As well as, we have given you lists of the popular methods for making money. Generally, I am telling you I am working since 2015 as a front end developer and make money online.

Thus, I know many best right trustable ways of earning working as a front developer. Also, I explain about web developer I am working on it right now these ways.

Now, the main points of as a developer there are lists to working on these platforms any skill you should be used online.