teleren/devto huggingface dataset:
Updates in Ubuntu 21.10
Tags: linux, ubuntu, opensource
Published: 2021-12-01 07:27:12

#### In this blog, we shall be discussing the updates and improvements in Ubuntu 21.10. Please note that this version is **NOT** an LTS (Long-term support) version.  
  

![Ubuntu 21.10](https://github.com/AbhJ/abhj/raw/master/image/ubuntu-21.04.png)  

Finally installed Ubuntu 21.10 after the long wait!

### The Horizontal Workspaces:

  
The most iconic one being the introduction of horizontal workspaces!

### A new Gnome Version:

  
Ubuntu 21.10 comes with a customized Gnome 40 desktop instead of Gnome 36 (default on Ubuntu 21.04).

### Gestures:

  
Multitouch gestures have been improved over the last few releases.

### Ubuntu Dock:

  
A lot of people have been using Dash to Dock extension instead of the standard Gnome Ubuntu Dock.  
  
Gnome 40 has really improved the default Gnome Ubuntu Dock and added separators between favourite and running applications.

### Software Updates:

  
Alongside the new additions to the OS, Ubuntu 21.10 is obviously shipped with loads of software updates.
HTML tags | template
Tags: html, tags, template
Published: 2021-12-01 07:26:13

It is used as **a container to hold some HTML content hidden from the user** when the page loads, but may be rendered later using JavaScript.

Think of a template as a **content fragment that is being stored for subsequent use in the document**. While the parser does process the contents of the `<template>` element while loading the page, it does so only to ensure that those contents are valid; the element's contents are not rendered, however.

You can use it if you have some HTML code you want to use over and over again, but not until you ask for it. To do this without the `<template>` tag, you have to create the HTML code with JavaScript to prevent the browser from rendering the code.

- Type: *-*
- Self-closing: *No*
- Semantic value: *No*

[Definition and example](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template) | [Support](https://caniuse.com/template)
Dashing through the Web - origin of PHP
Tags: php, webdev
Published: 2021-12-01 07:25:47

>**Just the Gist**  
>In the early Web, a recent graduate from University of Waterloo wanted to track number of visitors to his online resume. To do this he wrote a script-parser in the C language. Eventually this evolved into PHP: Hypertext Processor, *PHP* as we know it today. Now there are now many contributors to the language but it started with Rasmus Lerdorf.

## The story
It was the early days of the Web. From CERN a computer scientist had spent time developing a method of using the Internet to share files and documents through standards that have stood the test of time. We've got HTML, URIs and HTTP and it all was written by Sir Tim Berners-Lee and published in 1990. In 1994 he founded the World Wide Web Consortium (W3C) to develop a standard for the Internet. But this is not about Sir Tim, but the technologies he helped to create paved the way for so many people. One of these people were Rasmus Lerdorf.  
  
In 1993 Rasmus had graduated with a *Bachelor of Applied Science* in *Systems Design Engineering*. He applied his know-how to track the number of visitors his online resume was getting. But at the time there were no handy tools for him to do so. Instead he wrote a set of tools in the C programming language - which he came to call "Personal Home Page Tools", or **"PHP Tools"**. These were scripts he could use interspersed in HTML. *PHP Tools* were first being used in 1994 and came to the open source world in 1995. It took another iteration upon this to add a database layer. By the 3rd iteration, PHP became recognizable as the language we are now using to build websites. This iteration was driven by the need to support eCommerce websites, not only personal home pages. A small group of people (Rasmus included) started the total rewrite of the language, and it was released in 1998 in it's fourth version. The language was now renamed to PHP: Hypertext Preprocessor (PHP).  
  
From 1998 and onward, the development of PHP has been a global collaborative effort. It may all have started with one person, but we are now a community of people who are working together to make it better. 

## What's next?
We have many days to go to Christmas, and in the days leading up to it, we are going to see many different sides to the PHP language. We have just glimpsed the origins of PHP, but there is so much more. We will see the open source nature of the language, some interesting projects, and perhaps the Christmas spirit. 🤶🎅🎄🎁🎉🐘
  
Are there any particular subject you hope to see in this series? If so, please comment below ✍


## Further Reading
* The early days of the Web: https://webfoundation.org/about/vision/history-of-the-web/
* PHP official history: https://www.php.net/manual/en/history.php.php
* Rasmus Lerdorf history: https://en.wikipedia.org/wiki/Rasmus_Lerdorf
Need help on React js sending state as props
Published: 2021-12-01 07:24:36


I am new to React js... I need your help as I got stuck in the below code; 

-- I want to pass the 'clicked' State to Playmovie.js component, which is a state component --?? What are the options in react to pass the state of the component to children component. (Note: I don't want to pass it under component return, like <PlayMovie clicked = {clicked.title}/> because, I do not want to render it on this component. 


In below code, Movie.js component, I used axios and made a network call to get the data from server and stored the data in the "movies" using useState and render it using map method. 

In the rendered component (Movie.js) I have added onClick function to get the "ID" of the object I got through mapping and using filtered method I have stored that clicked Div ID in "clicked" State. 


import React, {useEffect, useState} from 'react'
import './card.css'
import axios from '../Axios'
import {imageURL} from '../constant/Constants'
import PlayMovie from './PlayMovie'


function Movie(props) {
    const [movies, setMovies] = useState([])
    const [clicked, setClicked] = useState('');
 

    useEffect(() => {
        axios.get(props.url).then((response)=>{
           
            setMovies(response.data.results)
            console.log(movies)
           
        }).catch((err)=>console.log(err))
       
    }, [])


    const movieClicked = (index)=>{
        const moviePlay = movies.filter((e)=>{
            return e.id == index
        })
        setClicked(moviePlay)
    }

    // useEffect(() => {
    //     {<PlayMovie clicked = {clicked.title}/>}
    // }, [clicked])

   
    return (
        <>
       
        <div className='posters'>
            {movies.map((e)=>{
            return(
                   
            <div key={e.id}  onClick = {()=>movieClicked(e.id)}>
                <img alt='serverImage' src={`${imageURL+e.backdrop_path}`}></img>
                <h1>{e.title}</h1>
               
            </div>
           
            ) }
            ) }
       
        </div>
        </>
    ) }

export default Movie
Languages of the Future
Tags: java, javascript, python, cpp
Published: 2021-12-01 07:23:00

Some languages which I don't see going out of demand (until 2030 hopefully) are definitely:

*   **Java**:

      
    Most companies in tech use Java to build their backend applications. Java is very fast as a language, is mainly based on OOPS (which makes code modular and clean to read), and most importantly is independent of platform (all you need to run it is the JVM - Java Virtual Machine). One of the best features I love about Java is its efficient exception handling and precise (compared to C++) error messages. Since Android is so popular these days, the only language that may replace Java would be Kotlin.
*   **Swift**:
    
      
    Well who doesn't love Apple? Even Apple haters seem to love its clean and snappy UI. Though I don't have personal experience with Swift till now, its memory management is of high repute. As long as Apple is the world's most valuable company, Swift isn't going anywhere. Swift's ease of coding UI stuff will keep it in demand.
*   **Javascript**:
    
      
    Though Javascript may be annoying at times, there's no denying of the fact that it is one of the select few languages that are extensively used in backend and frontend, server side and client side, and has extensive well designed libraries and frameworks for most industrial use cases. An application written in Javascript is almost certainly faster than a "similar" one in Python. Also, Node JS (written partly in C++) is super fast and its asynchronous multi-threaded I/O model improve the performance even more. Javascript is definitely going to stay for time in the future.
*   **C++**:
    
      
    A great place to learn about this amazing language would be from the [author of C++ himself](https://youtu.be/uTxRF5ag27A). Whenever a developer looks for speed in backend, C++ is generally the way to go. C++ is blazingly fast, supports OOPS, and also is under constant development. I have spent most of my programming journey in C++.
*   **Python**:
    
      
    One of the reasons Python is so popular despite being much slower compared to the others in this list must be the huge ocean of libraries and frameworks available for it. Also, code in Python looks more like pseudo code than most other languages. That makes Python code very easy to understand. Also, the learning curve in Python is much easier for newcomers in the world of software.
Xmas Card Generator
Tags: christmas, python, pillow, xmas
Published: 2021-12-01 07:20:23

Jingle Bells !! 
YaY Christmas is on the way !!.

Today i have made an interesting automation with python ..

YES ! Its a Christmas card generator where you can make Christmas cards for friends , relatives etc as you wish .. 
There are lots of customizable options here !

{% github httpanand/Xmas-Card-Generator no-readme %}
⭐ Please star my repo if you like !

<h3> Available Options </h3>

<ul>
<li>Text Color</li>
<li>Canvas Color</li>
<li>Canvas Border Color</li>
<li>Receiver Name</li>
<li>Author Name</li>
<li>Header Icons</li>
<li>Footer Icons</li>
<li>File name </li>
</ul>

<h3> Header Icon Options </h3>

<ul>
<li>Santa Hat</li>
<li>Xmas Tree</li>
<li>Xmas Bell</li>
<li>Xmas Boy</li>
<li>Xmas Girl</li>
<li>Xmas Gift</li>
</ul>

<h5><b>You can select header icons by inputting corresponding serial number</b></h5>

<h3> Footer Icon Options </h3>

<ul>
<li>Xmas Train</li>
<li>Xmas Sledge</li>
</ul>

<h5><b>You can select footer icons by inputting corresponding serial number</b></h5>

<h3> Preview </h3>

<img src="https://raw.githubusercontent.com/httpanand/Xmas-Card-Generator/main/preview.png"> 

Merry Christmas to all Dev Folks 🎅
Comment down your review . !</p>
Planning for a new feature
Tags: opensource, osd600
Published: 2021-12-01 07:05:15

For the next two weeks, I will be implementing a new feature for [FreeTube](https://github.com/FreeTubeApp/FreeTube). FreeTube is a desktop Youtube player with lots of features that I find useful for myself. I've been interested in this repo but haven't got the chance to contribute to it. 

There are a lot of feature requests from users and I found 1 feature that was requested twice ([request 1](https://github.com/FreeTubeApp/FreeTube/issues/1615), [request 2](https://github.com/FreeTubeApp/FreeTube/issues/568)) but unfortunately hasn't been implemented. With this feature, users will be able to quickly add the subscriptions to profile without switching. This would be very useful especially when users want to add to multiple profiles.

In week 2, I will look into the codebase to understand the structure of the project. I also need to get myself familiar with the coding styles, naming conventions, etc. After that, I will start the actual implementation and try to create a pull request with the first version of the new feature. Implementation of this feature will include the following tasks:

- Create a dropdown to display the list of profiles
- Add tooltip to profile so that when user hovers over, they can see the full name of the profile (the dropdown only shows the initials)
- Modify the current behavior of `Subscribe` button. Right now, user will add the subscription to  the active profile on clicking the button. I'll need to make some changes so that clicking the button will open/close the dropdown
- Add click event on each profile in the dropdown to handle the actual subscription
- Add logic to prevent adding a subscription to a profile twice

For week 3, I will wait for the maintainers' reviews, discuss any issues that arise and try to resolve them until we are all satisfied with the code. In week 3, I'll also look closely at the new feature to find any aspects that might be affected by it.
Introduction to Git & GitHub for Beginners
Tags: github, git, webdev, opensource
Published: 2021-12-01 06:55:13

When I have first started coding I used to hear about Git and GitHub. What I did not know is that **Git** and **GitHub** are two different things. 

Let's say if Git is **coffee** then GitHub is a **coffee shop**.

Web Developers to App Developers everyone should/must use **Git & GitHub**. So, let's deep dive into the topic.

## What is Git?



![Git-Logo-1788C.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1638102287505/knLr90Fna.png)


Git is useful to anyone who writes code or tracks changes to files. It is the most commonly used Version Control System (VCS). Git also makes collaboration easier allowing changes by multiple people to all to be merged into one source. **Git is responsible for everything GitHub-related that happens locally on your computer.**

Git runs locally (On your machine), history of your files is stored on a computer. By using Git you can change your own code and download others' code and you can collaborate with them. Simply visit this page to download and install  [Git](https://git-scm.com/downloads)  to your machine.

## What is GitHub?


![Octocat.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1638100559257/NHhYitiDT.jpeg)


GitHub is a place where you host your codes online. GitHub stores a copy of your local files and their revision history. It lets you and others work together on projects from anywhere. To complete this tutorial, you need a  [GitHub](https://github.com/)  account and Internet access. You don't need to know how to code, use the command line, or install Git (the version control software that GitHub is built on).



> **Thanks for reading this post. Stay tuned for more.**
> **You can find me on  [these platforms](https://bio.link/syedsohan)  also.**

<a href="https://www.buymeacoffee.com/syedsohan" target="_blank"><center><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;"></center></a>
In Ubuntu 20 OS - is it possible to listen multi casting UDP in more than one interface?
Tags: ubuntu, udp
Published: 2021-12-01 06:54:09



**route add -net 224.0.0.0/4 dev eth0**

**route add -net 224.0.0.0/4 dev eth1**

but data not receiving in two interfaces

when I am mentioning the subnet range as eth0 as 224.0.0.0/4 and eth1 as 234.0.0.0/8 then only i am receiving the UDP in eth1 in the range of 234.x.x.x

But i need the two interfaces eth0 and eth1 both have to receive all the UDP range .How can i achieve this ?

Thanks in Advance
VSCode REST Client Extension
Tags: vscode
Published: 2021-12-01 06:53:05

Extension Link "https://marketplace.visualstudio.com/items?itemName=humao.rest-client"

REST Client allows you to send HTTP request and view the response in Visual Studio Code directly.

**Usage**

In editor, type an HTTP request as simple as below:

GET https://jsonplaceholder.typicode.com/posts 

**Result**

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

POST https://example.com/comments HTTP/1.1
content-type: application/json

{
    "name": "sample",
    "time": "Wed, 21 Oct 2015 18:27:50 GMT"
}
Study with Free Online study resources
Tags: programming, tutorial, python, opensource
Published: 2021-12-01 06:39:52

November 30, 2021
Do you know when I first started to study with free resources, I was not sure that whether I can do this or not?  It takes a lot of time and passion to build consistency for the first time. But when you start doing so regularly. It can be easy. The strategy I think really helped me, I feel happy to share with you.

Here are some steps which will help you :

1. Choose your field of study

2. Take a syllabus from online sources: This will help you to maintain your flow and not get distracted.

3. Do your research on topics:  According to your syllabus and topics try to collect as much as relevant information.

4. Search for free blogs and resources: You can find free resources on y
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1kbacnzb7o1fvmyb9v1r.jpg)outube and Google mostly.

5. Then start studying.

If you want to look out for free resources, I can suggest free websites and blogs for you.

1. [IBM Cognitive Class.ai](https://cognitiveclass.ai/courses)

2. [Intellipaat Free Blogs](https://intellipaat.com/blog/)

3. [Google Digital Garage](https://learndigital.withgoogle.com/digitalgarage) 

4. [AWS Free Training by Amazon](https://aws.amazon.com/training/
)
These are some of the technology websites which helped me a lot when I was studying Data Science with Python. 

Please let us know if there are any other free resources.
Harga Patch Rubber /Label Karet Custom
Published: 2021-12-01 06:12:19


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bvn7y5t6mfzu3qln7lc9.png)
Patch Rubber ataupun emblem karet merupakan pernak- pernik label karet yang lengkapi dengan velcro ataupun perekat dengan metode dijahit serta dapat dilepas pasang. Buat hasil jahitan velcro yang apik serta kokoh, penjahitan velcro wajib dicoba oleh penjahit yang berpengalaman sebab tidak seluruh penjahit dapat melaksanakannya.

Patch rubber yang kami penciptaan banyak dipesan serta digunakan oleh komunitas berolahraga airsofter sebegai pernak- pernik kostum peralatan baju mereka.

Dengan tangan- tangan terampil serta berpengalaman para pengrajin karet yang kami miliki, ditambah bahan karet yang bermutu menjadikan patch rubber buatan kami apik serta kokoh, tidak gampang mengelupas walaupun kerap dilepas pasang, dan tidak gampang robek apabila bila terjalin benturan.

Harga:

Harga patch rubber sangat bervariatif, bergantung dimensi, model desain, serta jumlah pesanan. Harga standar:

- Dimensi 5×7@ Rp. 10. 000/ pcs, minimun 50pcs
- Dimensi 7×9@ Rp. 12. 500/ pcs, minimun 50pcs

Matres/ moulding/ cetakan Rp. 250. 000 per jenis desain standar. Buat pemesanan selanjutnya( repeat order), hingga tidak terdapat bayaran bonus lagi).

Buat harga dengan desain yang lebih rumit, model desain 3D, model warna glow in the dark, ataupun jumlah pesanan serta dimensi di dasar standar, hingga kami wajib verifikasi terlebih dulu.

Kami sediakan velcro buat patch rubber ataupun emblem karet dengan mutu import, kamu cuma meningkatkan 2000/ pcs dari harga di atas hingga kamu hendak memperoleh patch rubber dengan perekat yang sangat kokoh melekat di baju ataupun topi tactical yang kamu pakai.

Bila kamu cuma mempunyai cerminan mentah menimpa desain patch rubber yang hendak dipesan, hingga regu desain kami siap menolong tanpa terdapat bayaran bonus lagi dalam nilai transaksi( free).

Kabar lebih lengkap silahkan tiba ke tempat kami ataupun mendatangi situs web kami [Label Karet](https://bit.ly/labelkaret)
Variable declarations in JS
Tags: javascript, beginners, webdev
Published: 2021-12-01 05:52:40

there are 3 explicit ways a variable can be declared in javascript. 

1. var
2. let
3. const

## var
`var` is the grandfather of declarations in js. important points to know about var:

- `var` is hoisted(declaration is brought to the top of function).
in below example b is available in line#3(albeit `undefined`) even though it gets declared in line#4
    ```js
    function myfn() {
        var a =20;
        console.log(a, b); // 20, undefined
        var b= 10;
        console.log(a, b); // 20, 10 ​
    }
    ```
- `var` variables are bound to enclosing function scope(or global). 

### tricky case
take a look at following case
```js
function fn1() {
    function inner(b) {
      var i=2;
      console.log(b+i);
    }
    for(var i=0; i<10; i++) {
       inner(i);
    }
}
```
putting your declarations closest to the usage makes sence. but here reusing `i` will make the `for` loop run infinitely. 

a simple fix would be to declare `i` insinde `inner` with `var`(as this time it will be scoped to inner and will not spoil enclosing `fn1`s scope)

```js
function inner(b) {
    var i=2;
    console.log(b+i);
}
```


## let & const
in `es6`  both `let` and `const` were introduced to add block scoping to js.

- `let` introduces a new block scope in whichever block(`if`, `for` or `explicit {}` it is declared.
    
    * if
        ```js
        function myfn() {
            if(true) {
                let a =20;
            }
            console.log(a); // reference error
        }
        ```
    * for
        ```js
        function myfn() {
            for(let i=0; i<5; i++) {
            ....
            }
            console.log(i); // reference error
        }
        ```
    * explicit block `{}`
        ```js
        function myfn() {
            
            { 
                let b= 10;
                ....
            }
            console.log(b); // reference error
        }

        ```
* all above logic is also applicable for `const`. main difference is with assignment. 
    
    * what this means is that, once a variable is declared as `const` you can not change it.
        ```js
        const a = 1;
        a = 2; // error
        ```
    * that does not mean that variables themselves can not be updated. if variable type is of `array` or `object` you can change the properties.. but can't update the variable assignment.
        ```js
        const a = [];
        a.push(1); // valid
        a = 1; // invalid. error.

        const b = {};
        b.val1 = 1; 
        b.val2 = 2; 
        b = {} //invalid. error
        ```
### conclusion
- when using var in `for` loops with `closures` and can lead to unexpected(weired) behaviors. that in iteself is a subject for another post. 
* `let`/`const` are not replacement for `var`. all have their usecases and one should be aware about when to use which.