teleren/devto huggingface dataset:
SPO600 - Lab 1
Tags: opensource
Published: 2021-12-12 18:13:57

## Instruction
This blog post is about exploring the code review processes used in open source projects. I am expected to 
   * Find any two open source software packages that have different licenses.
   * Research the procedure used by those projects to accept code ("patches") from contributors
   * Identify one software change ("patch") successfully submitted in each community, and observe the entire review process from start to finish.

## Process

### Chronium

Chronium open source project can be found [here](https://github.com/chromium/chromium).

Google's Chromium project is a free and open-source web browser. Chromium and Chromium OS are part of this project. It uses a BSD license (Berkeley Software Distribution license), which allows users to modify, distribute, and commercialize it, but they are not allowed to use the trademark or hold it liable. Chronium currently has 8 branches, *1,072,142* commits, and *22,187* releases. It gets the issues through a [website](https://bugs.chromium.org/p/chromium/issues/list). Your issue will be reviewed by the Chromium team, and if it needs to be fixed, they will approve the patch. Chromium strives to respond within 24 hours of receiving your message. When they accept the issue, the code will be reviewed by one of 44 committers. The benefit of this issue is that it is simple to use. They can create a new issue if they have a Google account. To add a new issue, they don't need any technical knowledge. People who do not want to create a Google account, however, will be unable to add an issue. Furthermore, this webpage does not have a "Resolved" status. This page's users are unaware of previous patches.

### Mozilla Firefox

The main page of Mozilla can be found [here](https://wiki.mozilla.org/GitHub).

The Mozilla Foundation and its subsidiary, Mozilla Corporation, developed Mozilla Firefox, a free and open-source web browser. It is licensed under the MPL 2.0 (Mozilla Public License 2.0), which allows users to modify, distribute, and commercialize it. They can also include a warranty and make patent claims. They cannot, however, use the trademark without being held liable. Copyright, license, and original must all be included. In addition, they must reveal the source. Mozilla accepts patches from contributors through [Bugzilla] (https://bugzilla.mozilla.org/home). All changes are documented in detail on this website, and a specific patch is attached to each bug report. Mozilla spends months or years preparing reviewers to contribute by having them test the patch's actual functionality as well as inspect the code for quality. Following the code review, four leaders of the Bugzilla project review the code and decide whether or not to grant the patches. It typically takes 1 to 7 months to close a bug. The efficiency of use is a benefit of this method. All bug reports, including previous patches and recent issues, are available to users. However, at first glance, it appears to be difficult to use.
Form Lib 1.9 released
Tags: javascript, dom, node, form
Published: 2021-12-12 18:00:18

---
title: Form Lib 1.9 released
published: true
description: Monsterjs Form Lib Release Note
tags: javascript, dom, nodejs, form
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yz2tau83qx2u3rxwred9.png
series: Form Lib Release
---

Today we have released the latest edition of our Form Lib. Our library offers us the possibility to link forms with data. In addition, we have programmed here various controls that are not available in the standard. 

Only the highlights are described here. The full functionality can be found in the [documentation](https://monsterjs.org/en/doc/components/form/1.9.0/).

This release builds on [Monster 1.28](https://monsterjs.org) and contains minor improvements in the handling of data sources. 

## Tree Select

{% twitter 1470100260601180162 %}

```javascript
const node = document.createElement('monster-treeselect');
node.setOption('url', 'data.json');
document.getElementById('container').appendChild(s);
``` 

or 

```javascript
<monster-treeselect data-monster-url="data.json">
</monster-treeselect>
```

## Breaking Changes

We try to minimize breaking changes, but some changes are needed to improve workflows, performance, scalability, and more.

* The new names for the templates of Select and Treeselect are now called `labelTemplate` and `valueTemplate`


_hope you enjoy it!_



## References

* [https://dev.to/schukai/monster-128-released-e4b](Monster 1.28 released)
* [Forms, nothing but forms](https://dev.to/schukai/manage-forms-with-monster-4nf5)
* [documentation](https://monsterjs.org/en/doc/components/form/1.9.0/)
* [project home](https://monsterjs.org)
* [form example](https://monsterjs.org/en/doc/1.25.0/tutorial-form-example.html)
* [we are hiring](https://about.schukai.com/de/jobs/)
Vite 與環境變數
Tags: vite, javascript
Published: 2021-12-12 17:50:01

[Vite](https://cn.vitejs.dev/) 是 Vue.js 作者尤雨溪開發的「下一代前端開發與構建工具」，它也是新興的前端框架 [SvelteKit](https://kit.svelte.dev/) 預設的構建工具。

在程式專案上，我們往往會把某些重要的資訊（例如後端的 URL、第三方服務的 API 端點等）放在獨立的檔案內做管理，這個檔案習慣上會命名為 .env，再利用某些機制把 .env 內的參數載入到程式中成為可調用的變數，這些變數我們稱為「環境變數」。

## 環境變數

這些環境變數往往伴隨著專案的運行環境而變，在 Vite 的設計上，已經為我們預留了 development 環境（開發環境）與 production 環境（生產環境），兩者以檔名做區分，依照 Vite 的規範，開發環境的檔名是 .env.development，下面是一個最陽春的例子：

```ini
# .env.development

VITE_BACKEND_HOST=http://localhost:5000/
```

而在生產環境也有這個變數，但是值是不一樣的，依照 Vite 的規範，生產環境的檔名是 .env.production，內容如下：

```ini
# .env.production

VITE_BACKEND_HOST=https://c.herokuapp.com/
```

只要把這兩個檔案置於專案的根目錄下，Vite 就會自動載入，要注意的是，必須像上面的範例一樣，在變數前方有 `VITE_` 的前綴 Vite 才會載入，否則會無情的忽略。

當執行 `vite dev` 時，會載入 .evn.development；當執行 `vite build` 或 `vite preview` 時，則會載入 .env.production。

## 調用環境變數

延續上面的例子，在程式中，我們用 `import.meta.env.VITE_BACKEND_HOST` 就可調用該環境變數，超級簡單。

除了我們自行定義的環境變數，Vite 還有內建四個它設定的環境變數讓我們運用：

- `import.meta.env.MODE`：应用运行的模式。
- `import.meta.env.BASE_URL`：部署应用时的基本 URL。它由 `base` 配置项决定。
- `import.meta.env.PROD`：应用是否运行在生产环境。
- `import.meta.env.DEV`：应用是否运行在开发环境（永远与 `import.meta.env.PROD` 相反）。

以上抄錄自《Vite 官方中文文档》。

實際用起來的範例：

```js
console.log(import.meta.env.VITE_BACKEND_HOST);
```

如果是在 SvelteKit 元件內則是：

```html
<p>{import.meta.env.VITE_BACKEND_HOST}</p>
```

其他前端框架應該也是類似的用法。

## 安全事項

前端專案意味著運行的環境是在用戶的瀏覽器，也意味著所有程式內的參數是用戶可見的（即便有混淆過），所以不適合放任何的連線帳密等私密資料，這些私密的串接，建議放到後端去做，方為上策。

## 參考資料

- 《[Vite 官方中文文档](https://cn.vitejs.dev/)》
- 〈[Using environment variables in SvelteKit (and Vite)](https://dev.to/danawoodman/storing-environment-variables-in-sveltekit-2of3)〉
- 〈[Environment variables with SvelteKit](https://timdeschryver.dev/blog/environment-variables-with-sveltekit)〉
Building a Singly Linked List in JavaScript
Tags: javascript, programming
Published: 2021-12-12 17:38:06

Linked Lists are a linear collection of data elements whose order is not given by their physical placement in memory. Instead, it is a collection of nodes each one pointing to the next one which together represent a sequence. Each node consists of a pointer to the next node and a value that it contains. This value could be any type of data type. A singly linked list is unidirectional. The first node is called the head and the last node is called the tail and it points to null. Linked Lists represent a time saving over arrays in that with an array after the previously set size is reached an area of double the size is established in memory. In addition, when inserting or deleting items anywhere but at the end, all of the indices from the insertion point and onward must be changed. Both of these steps are time consuming for an array. Linked lists have an advantage over hash tables in that linked lists are ordered. A disadvantage that Linked Lists have compared to arrays is that the data is scattered in different memory locations and takes up more memory due to the pointers. Another disadvantage is that without indices, the nodes must be accessed sequentially. 

In building the Linked List, it has nodes, the first one being the head and the last one being the tail. Each node has a value and a pointer which in the case of the tail points to null. We first create a class with a constructor that has a value as its parameter and has this.head containing a value which equals the argument value and the pointer (called “next”) equaling null since at the outset the head is also the tail. The length is initialized as 1.  In order to be able to add a node, the append method is created. This method creates a variable called newNode which represents the new node and has a value of the argument value and next (the pointer) with a value of null (since this is the new tail). The tail is now updated to be the new node, and the length of the Linked List is increased by 1.

To demonstrate this, a new Linked List will be built with node values of 30, 18, and 22. If one wants to further build the Linked List, then it would involve additional methods which should be covered in a future posting.

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

The results in the terminal are as follows: 

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

Thanks for reading!
Complete Road map and free Resources for Data science
Tags: datascience, python, machinelearning, programming
Published: 2021-12-12 17:32:30

``` 
 Data science is all about cleaning and analysing the data which can be available in tabular form, JSON or may be in csv format using statistics and different methodologies to derive insights which help a company or organisation to take business driven decisions.

For this purpose one can use pre-built softwares such as Microsoft Excel but it is not an efficient and professional way to do so,If you want to be a Data scientist I would highly recommend you to learn programming languages and databases.



Link to Join channel -[](https://t.me/ccodelikepro)

   instagram :- [](https://instagram.com/code.like_proutm_medium=copy_link )

Here is a roadmap to get started 

→Beginner

    Programming language for data science
    1)Python (recommended)
    2)Jullia     
    3)R language
    4)Database (Mysql)
    5)What is CSV formatted data

→ After the basics of these languages learn libraries for
   1)Dataframes
   2)Data visualisation
   3) Connectivity with databases
   4) Statistics and maths

→Intermediate
   1)Machine learning algorithms
   2)Do Projects
   3) Internships
 
→In Advance level you can explore these topics or can work on complex topics.
   1)Big data
   2)hadoop 

To get started there are some resources that I strongly recommend

Python → [](https://youtu.be/WGJJIrtnfpk)

Data science course (with certificate for free on compilation) 
 → Data Science Beginner's Course: Free Data Science Online

For Projects 
[](https://towardsdatascience.com/top-10-data-science-projects-for-beginners-a2feb5e2153e)

For free Internships visit this site (search for quantum in tech section)
→ [](https://www.theforage.com/ )

Blog to read
→[](https://towardsdatascience.com/you-need-to-learn-this-one-skill-as-a-data-scientist-or-machine-learning-practitioner-e15291bfed70
)
→[](https://bigdata-madesimple.com/6-of-my-favorite-case-studies-in-data-science/)


This will make you ready to do paid internships in the field of 
→Data analyst
→Data visualisation expert
→Assistant Data scientist

Note :- To get a high paying job in this field or to get expertise you need real world working experience.









```
Globe
Tags: codepen
Published: 2021-12-12 17:27:48

<p>An example from blog post: <a href="http://hop.ie/blog/balls" target="_blank">http://hop.ie/blog/balls</a></p>

<p>THANK YOU to Sidoruk Sergey ‏@Sidoruk_SV for upgrading this globe! Looks really good!</p>

<p>His original is here: <a href="http://codepen.io/anon/pen/ctKrk" target="_blank">http://codepen.io/anon/pen/ctKrk</a></p>

{% codepen https://codepen.io/donovanh/pen/GBIiv %}
Three.js dancing Tree (for Xmas)
Tags: codepen
Published: 2021-12-12 17:18:22

<p>A three.js experiment. That's how I learned some more about instanced geometry (instanced mesh should do the job as well - I just had no time to try it). Anyway, that took me some time to make things work but I kind of like the final result. Merry Xmas </p>

{% codepen https://codepen.io/pehaa/pen/KKXMKMN %}
Interface In JAVA & Multiple Inheritance
Tags: java, oop, programming
Published: 2021-12-12 17:13:24

## MULTIPLE INHERITANCE
**Lets Understand what multiple inheritance is **<br> *Multiple inheritance is a feature of some object-oriented computer programming languages in which an object or class can inherit features from more than one parent object or parent class.*
![Inheritance-sm.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1639325732806/u5VziWUu2.jpeg)

*as shown in  above figure in multiple inheritance child class can have 2 or more base class to achieve this we need INTERFACE.*

## INTERFACE 
*An interface in Java is a blueprint of a class. It has static constants and abstract methods.*
i.e. An Interface can only contain abstract methods() and variables, it cannot have body of a method.
It cannot be instantiated just like the abstract class.


- 
So where do we declare the body of these methods??
> The body of method is declared inside a class where the method is needed according to the programmer's requirement.


- How to declare and interface?
> Interface is declared using *interface* keyword <br> **Syntax :**<br> interface interface_name{ abstract methods}

- Note 
> To use declared interface in class we need to use *implements* keyword

### Implementation
First we will create a interface "print" and inside it we will create a abstract method print();
```
interface printgib{
void print();
}
```
Now we got our interface ready to be used by classes so lets create classes abc and gk and implement interface  in it.
```

public class abc implements printgib{
public void print(){                     //1st implementation of print 
System.out.println("I love you 3000"); 
}
public static void main(String[] args){
abc obj = new abc();
gk obj1 = new gk();
obj.print();
obj1.print();
}
}

class gk implements printgib{
public void print(){                   //2nd implementation of print 
System.out.println("I am Gk");
}
}
```
as shown in above code we achieved multiple inheritance and implemented interface.
- Now to run the code save the file and 
```
javac file_name.java
``` 
```
java abc
``` 

### Output:-

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1639330486384/FuAwp58rW.png)
Clubhouse Clone using Flutter with Video SDK
Published: 2021-12-12 16:53:19

{% youtube g-S6rQR8GyI %}


##Build clubhouse clone from scratch using flutter

###1 [Sign up for free account and Generate API Key](https://app.videosdk.live)

Go to Dashboard, navigate to [Settings > API](https://app.videosdk.live/settings/api-keys) Keys and click on ADD NEW button.

![Clubhouse Clone](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n3g7v1oayno47zre1yom.png)
 
###2 [Server Setup](https://docs.videosdk.live/docs/guide/video-and-audio-calling-api-sdk/server-setup)

Token based authentication allow users to verify their identity by providing generated API key and secrets.

###3 [Getting Started - Flutter SDK](https://docs.videosdk.live/docs/guide/video-and-audio-calling-api-sdk/flutter-sdk)

Flutter SDK is natively written SDK using Dart. It is compatible with both IOS and Android.

#### Here is the package manager link of the flutter meeting SDK integration

https://pub.dev/packages/videosdk

![Clubhouse Clone](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sitcz2o9i0t3bv5z0uqe.png)
 

{% github https://github.com/videosdk-live/videosdk-rtc-flutter-sdk-example %}

{% twitter 1469556881462947842 %}



![Clubhouse Clone](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vyg69dmyf6icuy231553.png)
Baloonza IT newsletters weekly digest #15
Tags: javascript, webdev, react, graphql
Published: 2021-12-12 16:39:03

IT-related newsletters of the past week:

### css, frontend, web development, javascript, react

- [CSS Animation Weekly #278](https://app.baloonza.com/issues/10205) `CSS Animation Weekly`
- [📝 [CSS-Tricks] 280: One Thing](https://app.baloonza.com/issues/10229) `CSS-Tricks`
- [Issue #484: Web Almanac, Defensive CSS](https://app.baloonza.com/issues/10316) `CSS Weekly`
- [It's time your site had a carbon budget](https://app.baloonza.com/issues/10318) `Frontend Focus`
- [💻 Issue 208 - 10 Must-Have React Developer Tools to Write Clean Code💻🔥](https://app.baloonza.com/issues/10393) `Awesome React Newsletter`
- [💻 Issue 290 - What people in tech had to say about JavaScript when it debuted in 1995](https://app.baloonza.com/issues/10390) `Awesome Javascript Newsletter`
- [Hacker Newsletter #582](https://app.baloonza.com/issues/10417) `Hacker Newsletter`
- [Frontend Weekly - Issue 283](https://app.baloonza.com/issues/10311) `Frontend Weekly`

### graphql
- [GraphQL Weekly - Issue 260](https://app.baloonza.com/issues/10435) `GraphQL Weekly`

### startup
- [Robots for makers](https://app.baloonza.com/issues/10212) `Product Hunt Daily`
- [The price IS right](https://app.baloonza.com/issues/10288) `Product Hunt Daily`
- [Currently watching…](https://app.baloonza.com/issues/10310) `Product Hunt Daily`
- [Zoom out](https://app.baloonza.com/issues/10363) `Product Hunt Daily`
- [Gift smarter](https://app.baloonza.com/issues/10425) `Product Hunt Daily`


### marketing
- [🎓 High referral rewards = worse customers](https://app.baloonza.com/issues/10243) `Ariyh`

### data science
- [Data Science Weekly - Issue 420](https://app.baloonza.com/issues/10404) `Data Science Weekly Newsletter `

***
HTML & CSS Smiley Face.
Tags: html, beginners, css, webdev
Published: 2021-12-12 16:27:32

```I decided to give myself a challenge and create a smiley face using only HTML and CSS. First I used HTML to create 6 divs. Then I used CSS to create the shapes and positions of the divs. The circles and ovals where made using the border radius property. All the positioning was done using margins and position properties. The most difficult part was creating the curve for the mouth, my solution was to use two overlapping circles and moving one slightly higher and changing the color to yellow to blend in with the face circle.
 Below is the code I used to accomplish this. 

HTML
<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>SMILE</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
       
       <h1>Smile!</h1> 

       <div class="grid">
            <div class="face">
           <div class="left"></div>
           <div  class="right"></div>
        </div>
       
           <div class="mouth"></div>
           <div class="mouth2"></div>
        
     
    </body>
</html>

```
CSS
* {
    margin: 0;
    padding: 0;
}

box {
    display: flex;
    justify-content: center;
    justify-items: center;
    width: 1024px;
    height: 768px;
}

body {
    background-image: url("images/bomb-g3fdef4030_1280.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
   max-height: 1000px;
   flex-shrink: 1;
}
h1 {
    margin: 0 auto;
    text-align: center;
    font-size: 150px;
    color: white;
    flex-shrink: 1;
}


.face {
    background-color: yellow;
    height: 600px;
    width: 600px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
   margin-top: 80px;
   margin-left: 30%;
   flex-shrink: 1;
}

.left{
    background-color: black;
    height: 100px;
    width: 50px;
    border-radius: 50%;
    margin-top: 25%;
    margin-left: 25%;
    margin-right: auto;
   z-index: 100;
   flex-shrink: 1;
}
 
.right{
    background-color: black;
    height: 100px;
    width: 50px;
    border-radius: 50%;
    margin-top: 25%;
    margin-right: 25%;
    z-index: 100;
}

.mouth { 
   height: 450px;
   width: 450px;
   background-color: black;
   border-radius: 100%;
   position:relative; top: -550px; left: 495px
}

.mouth2 { 
    z-index: 5;
    height: 455px;
    width: 455px;
    background-color: yellow;
    border-radius: 100%;
    position:relative; top: -1050px; left: 495px
 }
```
```
Flutter Installation Problem on Windows 
Tags: flutter, mobile, programming, beginners
Published: 2021-12-12 16:23:03

**Hello guys, i’ve just started learning flutter and in the installation phase , i faced a problem i extracted the flutter sdk folder in my C:/Users (didn’t put it in the program file folder) i set my environment variable in the path , but when i run any flutter command like (flutter doctor or flutter) nothing happened no output literally nothing it keeps hanging , i tried the same thing inside the bin folder i run the flutter Batch file and still the same issue , Any help please !!!**
Operator overloading in python
Tags: python
Published: 2021-12-12 15:33:35

Hi everyone, 
In this post I want to explain the concept of operator overloading in python. 

#What is operator overloading? 
In simple terms, it allows you to define what an operator does depending on it's argument. 

#Implementing it in python

Let's say that you are implementing a library to perform matrix operation. Instead of implementing a function to add 2 matrix you can overload a ``+`` operator instead. This will make your library much easier to use. 

**The code**
```python
class matrix:
    def __init__(self,value):
        self.value=value
    def __add__(self,other):
        result =[[0 for i in range(len(self.value[0]))] for x in range(len(self.value))]
        # iterate through rows
        for i in range(len(self.value)):   
            # iterate through columns
            for j in range(len(self.value[0])):
                result[i][j] = self.value[i][j] + other.value[i][j]
        return result

x = [[1,2,3],

    [4 ,5,6],

    [7 ,8,9]]

y = [[9,8,7],

    [6,5,4],

    [3,2,1]]        
print(matrix(x)+matrix(y))
```
**Breaking it down**
``__init__``- It initializes the object. Nothing special
``__add__``-This is where the overloading of the ``+`` operator occurs. Within this function you have to implement how to add those numbers and that's it. It is how you overload operator in python.

**Operator that can be overloaded**
Binary Operators:
``+ `` = ``__add__(self, other)``
``–`` = ``__sub__(self, other)``
``*`` = ``__mul__(self, other)``
``/`` = ``__truediv__(self, other)``
``//`` = ``__floordiv__(self, other)``
``%`` = ``__mod__(self, other)``
``**`` = ``__pow__(self, other)``
``>>`` = ``__rshift__(self, other)``
``<<`` = ``__lshift__(self, other)``
``&`` = ``__and__(self, other)``
``|`` = ``__or__(self, other)``
``^`` = ``__xor__(self, other)``

Comparison Operators :

``<`` = ``__lt__(self, other)``
``>`` = ``__gt__(self, other)``
``<=`` = ``__le__(self, other)``
``>=`` = ``__ge__(self, other)``
``==`` = ``__eq__(self, other)``
``!=`` = ``__ne__(self, other)``

Assignment Operators :

``-=`` = ``__isub__(self, other)``
``+=`` = ``__iadd__(self, other)``
``*=`` = ``__imul__(self, other)``
``/=`` = ``__idiv__(self, other)``
``//=`` = ``__ifloordev__(self, other)``
``%=`` = ``__imod__(self, other)``
``**=`` = ``__ipow__(self, other)``
``>>=`` = ``__irshift__(self, other)``
``<<=`` = ``__ilshift__(self, other)``
``&=`` = ``__iand__(self, other)``
``|=`` = ``__ior__(self, other)``
``^=`` = ``__ixor__(self, other)``

Unary Operators:
``–`` = ``__neg__(self, other)``
``+`` = ``__pos__(self, other)``
``~`` = ``__invert__(self, other)`` 
This is the list of operators you can overload in python along with the name of the method you have to use
##Conclusion
Operator overloading is a powerful feature of python and can be very useful however you should not misuse it because it can create confusing code that is hard to read. I hope you learned something new. If you have enjoyed this one, make sure to read my [previous post](https://dev.to/saptakbhoumik/peregrine-update-the-python-like-language-thats-as-fast-as-c-43pb)
Thanks for reading <3