teleren/devto huggingface dataset:
Tailwind CSS Drag and Drop File Upload UI
Tags: tailwindcss, css, tutorial, webdev
Published: 2022-06-14 05:22:13

in this section we will create tailwind css drag and drop box ui. 

### Tool Use
**Tailwind CSS 2.x or 3.x**

**Heroicons Icons**
**[view](https://larainfo.com/blogs/tailwind-css-drag-and-drop-file-upload-ui)**



Tailwind CSS Dropbox File upload UI. 
```html
<div class="max-w-xl">
    <label
        class="flex justify-center w-full h-32 px-4 transition bg-white border-2 border-gray-300 border-dashed rounded-md appearance-none cursor-pointer hover:border-gray-400 focus:outline-none">
        <span class="flex items-center space-x-2">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-gray-600" fill="none" viewBox="0 0 24 24"
                stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round"
                    d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
            </svg>
            <span class="font-medium text-gray-600">
                Drop files to Attach, or
                <span class="text-blue-600 underline">browse</span>
            </span>
        </span>
        <input type="file" name="file_upload" class="hidden">
    </label>
</div>
```

![tailwind css drag and drop file upload image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/22rgn0hxirnxqa6n4n4f.png)
The future of coworking, it seems to be bright
Tags: rentadeskhyderabad
Published: 2022-06-14 05:21:43

The rise of [co-working](https://coworkanytime.com/)
The rise of co-working spaces has been nothing short of meteoric. What was once a niche concept has now exploded into a global phenomenon, with co-working spaces popping up in cities all over the world.
There are a number of factors that have contributed to the rise of co-working. First, there is the ever-growing contingent of digital nomads and freelance workers who need a place to set up shop outside of their homes. Second, there is the increasing number of startups and small businesses who don’t need (or can’t afford) their own office space. And last but not least, there are the large corporations who are looking for more flexible and cost-effective office solutions.
Whatever the reasons may be, it’s clear that co-working is here to stay. But what does the future hold for this rapidly growing industry?
One trend that we’re already seeing is the rise of “co-living” spaces, which offer not only workspace but also accommodation – making them ideal for digital nomads and other long-term travelers. Another promising trend is the growth of community-focused co-working spaces, which provide a much needed sense
Cousins in Binary Tree
Tags: leetcode, dsa, theabbie
Published: 2022-06-14 05:00:57

Given the `root` of a binary tree with unique values and the values of two different nodes of the tree `x` and `y`, return `true` _if the nodes corresponding to the values_ `x` _and_ `y` _in the tree are **cousins**, or_ `false` _otherwise._

Two nodes of a binary tree are **cousins** if they have the same depth with different parents.

Note that in a binary tree, the root node is at the depth `0`, and children of each depth `k` node are at the depth `k + 1`.

**Example 1:**

![](https://assets.leetcode.com/uploads/2019/02/12/q1248-01.png)

**Input:** root = \[1,2,3,4\], x = 4, y = 3
**Output:** false

**Example 2:**

![](https://assets.leetcode.com/uploads/2019/02/12/q1248-02.png)

**Input:** root = \[1,2,3,null,4,null,5\], x = 5, y = 4
**Output:** true

**Example 3:**

![](https://assets.leetcode.com/uploads/2019/02/13/q1248-03.png)

**Input:** root = \[1,2,3,null,4\], x = 2, y = 3
**Output:** false

**Constraints:**

*   The number of nodes in the tree is in the range `[2, 100]`.
*   `1 <= Node.val <= 100`
*   Each node has a **unique** value.
*   `x != y`
*   `x` and `y` are exist in the tree.

**SOLUTION:**

    # Definition for a binary tree node.
    # class TreeNode:
    #     def __init__(self, val=0, left=None, right=None):
    #         self.val = val
    #         self.left = left
    #         self.right = right
    class Solution:
        def inorder(self, root, l, x, y, path):
            if root:
                if root.left:
                    self.inorder(root.left, l + 1, x, y, path[-1:] + [root.left.val])
                if root.val == x:
                    self.xnode = (l, path[-2] if len(path) >= 2 else None)
                if root.val == y:
                    self.ynode = (l, path[-2] if len(path) >= 2 else None)
                if root.right:
                    self.inorder(root.right, l + 1, x, y, path[-1:] + [root.right.val])
        
        def isCousins(self, root: Optional[TreeNode], x: int, y: int) -> bool:
            self.inorder(root, 0, x, y, [root.val])
            return self.xnode[0] == self.ynode[0] and self.xnode[1] != self.ynode[1]
BEST PROGRAMMING LANGUAGE TO START CODING.
Published: 2022-06-14 04:49:15

I started my coding by learning c,c++and java.C gave me basic undestanding in how instructions are executed in a program.I learned the basic concepts of loops,arrays,variables,datatypes etc.
Learning java was a wonderful experience for me.In the begining it was difficult for me to catchup the object oriented concept.However,eventually i learned what are classes and how objects are created in java.Now i am in a good shape with java.Learning java helped me to easily catch up new languags with object oreinted concepts.

   

**So, i strongly recomment new commers to the coding field to start with java and c**

[java tutorial](https://www.javatpoint.com/java-tutorial)
[Learn c programming](https://www.javatpoint.com/c-programming-language-tutorial)
OOP in C (data+function+receiver parameter)
Published: 2022-06-14 04:46:56

ในบทความนี้จะยกตัวอย่างว่า object ในภาษาอย่าง Java ถูกอิมพลีเมนต์ยังใงถ้าเขียนด้วย C เราจะพูดแค่ตัวแปร this และการเอา function (method) ไปเป็นส่วนหนึ่งของ object เท่านั้น
หวังว่าจะทำให้น้องๆฝึกงานเข้าใจตัวแปร this ในจาวามากขึ้น
สมมติว่ามีคลาสจาวาแบบนี้
```java
//Java
class Dog{
  int age;
  void setAge(int age){ this.age = age; }
  int getAge(){ return this.age; }
}
```
concept นึงของ OOP คือการเอา data มารวมกับ function เพื่อให้เกิดเป็น object ที่มีพฤติกรรมและเกิด cohesion สูง
ในภาษา C เราสามารถใช้ struct เป็นส่วน data ของออบเจ็คได้และถ้าหากเราเอา function ใส่ไปใน struct เราก็จะได้ data+behavior เหมือนจาวา

```c
#include<stdio.h>
#include<stdlib.h>

// โครงสร้างข้อมูลที่จำลอง class ในจาวา มี age และ setter/getter
struct Dog{
    int age;
    void (*setAge)(struct Dog* this,int age);
    int (*getAge)(struct Dog* this);
};

//อิมพลีเมนเตชั่นของเมธอด setAge 
//สังเกตุว่าจะมีตัวแปร this เป็นพารามิเตอร์ตัวแรกของเมธอด (เราเรียกตัวแปร this ว่า receiver parameter)  
//ซึ่งในจาวาเราไม่ระบุ receiver parameter แต่ว่า compiler จะเพิ่มให้เราเอง
void setAge(struct Dog* this,int age){
    this->age = age;
}
// เหมือน setAge มี receiver parameter
int getAge(struct Dog* this){
    return this->age;
}

//ฟังชั่นที่เอาไว้จำลองการ new Object() ในจาวา เพื่อให้ง่าย จะฟิกค่า new Dog() ไปเลย
struct Dog* new_operator_for_dog(){
   struct Dog* d = (struct Dog*) malloc(sizeof(struct Dog));
    //เอา function มาเป็นเมธอดของ object ด้วย function pointer
    //เรียกว่าการ binding
    d->setAge = setAge;
    d->getAge = getAge;
   return d;
}

int main(){
    //Dog d = new Dog()
    struct Dog* d = new_operator(sizeof(struct Dog));
    // d.setAge(10)
    d->setAge(d,10); //<-- สังเกตว่าเรา explicit receiver parameter เนื่องจากตรงนี้เราจำลองไม่ได้ใน C syntax
    // d.getAge()
    printf("%d\n",d->getAge(d));
    // ใช้เสร็จต้อง free เพราะไม่มี GC
    free(d);
}
```

ตัวอย่างที่ชัดเจนอีกภาษาคือ Python ที่เวลาเรียกจะต้องระบุ reveiver parameter
Number of Islands
Tags: leetcode, dsa, theabbie
Published: 2022-06-14 04:30:41

Given an `m x n` 2D binary grid `grid` which represents a map of `'1'`s (land) and `'0'`s (water), return _the number of islands_.

An **island** is surrounded by water and is formed by connecting adjacent lands horizontally or vertically. You may assume all four edges of the grid are all surrounded by water.

**Example 1:**

**Input:** grid = \[
  \["1","1","1","1","0"\],
  \["1","1","0","1","0"\],
  \["1","1","0","0","0"\],
  \["0","0","0","0","0"\]
\]
**Output:** 1

**Example 2:**

**Input:** grid = \[
  \["1","1","0","0","0"\],
  \["1","1","0","0","0"\],
  \["0","0","1","0","0"\],
  \["0","0","0","1","1"\]
\]
**Output:** 3

**Constraints:**

*   `m == grid.length`
*   `n == grid[i].length`
*   `1 <= m, n <= 300`
*   `grid[i][j]` is `'0'` or `'1'`.

**SOLUTION:**

    class Solution:
        def DFS(self, grid, i, j, m, n):
            if i >= 0 and j >= 0 and i < m and j < n and grid[i][j] == "1":
                grid[i][j] = "0"
                for x, y in [(i - 1, j), (i + 1, j), (i, j - 1), (i, j + 1)]:
                    self.DFS(grid, x, y, m, n)
        
        def numIslands(self, grid: List[List[str]]) -> int:
            m = len(grid)
            n = len(grid[0])
            ctr = 0
            for i in range(m):
                for j in range(n):
                    if grid[i][j] == "1":
                        ctr += 1
                        self.DFS(grid, i, j, m, n)
            return ctr
Install openvpn3 in Fedora 36
Published: 2022-06-14 04:11:41

```
sudo dnf copr enable dsommers/openvpn3
```

```
sudo dnf install openvpn3-client
```

for test connection with openvpn you must have client ovpn file

Example for connect to openvpn server:

```
openvpn3 session-start --config ~/client.ovpn
```
Tailwind CSS v/s Bootstrap: Which is a better framework to use 🚀🔥
Tags: css, tailwindcss, webdev, programming
Published: 2022-06-14 04:07:00

What if we could achieve a responsive UI without being bound by the rules of a UI kit? Is there a way to achieve responsiveness and still keep our custom user interface designs? For developers who value a high degree of customizability Tailwind CSS offers more flexibility than a UI kit such as Bootstrap.

In this guide, we’ll explore the differences between Tailwind CSS and Bootstrap, and review some examples to demonstrate the advantages of using a utility-first CSS framework over a traditional UI kit.

## Difference #1
Tailwind offers predesigned widgets to build a site from scratch with fast UI development.
Bootstrap comes with a set of pre-styled responsive, mobile-first components that possess a definite UI kit.

## Difference #2
Websites created using Tailwind CSS are much more customizable.
Websites created with Bootstrap are known for their responsiveness and flawless design, but the looks are generic and similar.

## Difference #3
Tailwind CSS uses a set of utility classes to create a neat UI with more flexibility and uniqueness.
Sites created using Bootstrap follow the generic pattern that makes them look identical.

## Which one you would be using?
Personally, I prefer Tailwind upon Bootstrap as it uses a utility class approach and its ready made components are like a cherry on a cake.
The "C# Workshop" book review.
Published: 2022-06-14 03:59:51

Hello everyone. I am Ankur Mulasi working as an Acquisition Editor at Packt Publishing. This is regarding a marketing activity that we are doing for our title -"The C# Workshop ".
We are looking for your honest unbiased review on amazon.com for the title "The C# Workshop " which will be published on Amazon in July 2022. We are reaching out to a wider group of free reviewers to seek their genuine feedback on the book. We are contacting people who have the right subject-matter knowledge of the book’s topic to know how useful they find it. As part of this activity, we will be sending a free digital copy of the book to you and for now, the finalized chapters in the word format and seek your unbiased feedback about the book on Amazon.com Please note that to post a review on the book, you will need to own an account on Amazon.com along with the eligibility criteria of a purchase history worth of 50 USD in the last 12 months. Also, we might share the content in the current format (Word) as of now, but we promise to also share the final digital copy of the book with you. Would you like to receive a free copy? Please share your email id or you can drop me a message on my LinkedIn.

Regards,
Ankur Mulasi
Packt | Programming Books, eBooks & Videos for Developers
https://www.linkedin.com/in/ankurmulasi/
Template literals in Javascript
Published: 2022-06-14 03:58:19

A sample template literal
```
const x = `This is template literal`;
console.log(x);
```
Which will print

![Console output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/idi4stgq8kw6c932xwh2.png)

Template literal is mainly used in two ways
- String interpolation
- Tagged functions or Tagged templates

In this blog, we will discuss about String interpolation.

```
const human = {
   age: 28,
   country: 'India'
}
const intro = `My age is ${human.age} and I am from ${human.country}`;
console.log(intro);
```
We are interpolating the name and age property of human object.

If we try to use single quoted(or double quoted) strings we have to write this:
```
const intro = 'My age is '+human.age+' and I am from '+human.country;
```

### We can write any javascript logic between the ${ }.
This enable us to write easily understandable logic.
```
const human = {
   age: 28,
   country: 'India'
}
const intro = `I am ${human.age > 20 ? 'adult' : 'juvenile'}`
console.log(intro);
```
The equivalent of writing this in single quote
```
const human = {
   age: 28,
   country: 'India'
}
const intro = 'I am '+ ( human.age > 20 ? 'adult' : 'juvenile' );
console.log(intro);
``` 

String interpolation can be useful in React JSX when writing conditional  className.
Suppose, we want to apply `btn-highlight` when the button is to be highlighted and `btn` as a normal button. We can take the `btn`as a common word and append `-highlight` as per condition.

{% codesandbox jzog2t %}

---
Callback in Javascript
Tags: javascript, beginners, programming, callback
Published: 2022-06-14 03:47:06

A callback function is a function passed into another function as a argument. The function is invoked in the outer function to complete an action.

Let’s take a simple example of how to use the callback function:

`function callbackFunction(message) {
  console.log("Hello " + message);
}

function outerFunction(callback) {
  let message = prompt("Welcome to The Coding Dev");
  callback(message);
}

outerFunction(callbackFunction); `
VS Code Tip of the Week: Add a gitignore via VS Code
Tags: vscode, git, vscodetips
Published: 2022-06-14 03:44:53

This week's tip of the week is coming from my old coworker @citizen428. On one my streams on [livecoding.ca](https://livecoding.ca), I show you how you can add a gitignore file to a project via `npx gitignore`.

{%embed https://www.youtube.com/watch?v=pSq7bSk3WqU %}

Little did I know this is baked into VS Code!

Press <kbd>CTRL</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd> (<kbd>CMD</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd> on macOS) to open the [command palette](https://code.visualstudio.com/api/ux-guidelines/command-palette).

Type in `Add gitignore` in the command palette.

![Add gitignore typed into VS Code's command palette](https://community.vscodetips.com/uploads/articles/x7gjbm2otlkr0thrm3th.png)
 

You'll be presented with a language to generate the gitignore file for.

![The Add gitignore command in VS Code's command palette prompting the user to select a language to generate the gitignore for](https://community.vscodetips.com/uploads/articles/bcsd2lb7996wve6zyvzf.png)

And there you go! You have a fresh gitgnore file in your repository now!

![gitignore file for node.js generated from the Add gitignore command in VS Code](https://community.vscodetips.com/uploads/articles/nbecy8qw8gl4vzh9j35b.png)
 
Happy VS Coding!
How to Bind Data to the Angular Gantt Chart
Tags: angular, webdev
Published: 2022-06-14 03:39:42

**Angular Gantt Chart - An Intuitive and Easy-to-Use Component**

- A complete project management tool for scheduling and planning projects.
- You can manage and monitor specific tasks and resources in a project.
- Intuitive user interface to manage complex projects on the go.

Learn how easily you can bind local and remote hierarchical data to the Syncfusion [Angular Gantt Chart component](https://www.syncfusion.com/angular-ui-components/angular-gantt-chart). In this video, remote data is bound by assigning service data as an instance of the DataManager to the dataSource property. The Data Manager acts as an interface between the service endpoint and the Gantt Chart component. This video also explains how to bind self-referential data to the Gantt Chart. 

_Product overview_: https://www.syncfusion.com/angular-ui-components/angular-gantt-chart

_Download the example from GitHub_: https://github.com/SyncfusionExamples/how-to-bind-data-to-the-angular-gantt-chart

{% youtube FTdp0r1pPK8 %}
Simple ransomware in Python
Tags: ransomware, python, cybersecurity
Published: 2022-06-14 03:31:02

A ransomware is a piece of code that encrypts files and denies user access. The files can only be decrypted with the key used while encryption.

In this project, Python's `Fernet` module is used to generate keys, encrypt, and decrypt files.

[encrypt.py](https://github.com/chhajedji/ransomware/blob/master/encrypt.py) first generates a _key_ (key.key file).  This is being done by `Fernet.generate_key()`. The key.key file stores the key which will be used to encrypt and further decrypt files. `encrypt.py` recursively iterates and encrypts all the files present in the `root_dir`. During encryption, we need to make sure that we are not encrypting the keys or the script used for encryption, or else that might have not end up well.

[decrypt.py](https://github.com/chhajedji/ransomware/blob/master/decrypt.py) iterates through files similar to encrypt.py. Just the difference is that instead of encrypting, it decrypts all the files using same key which was generated during encryption. Without that key, decryption wouldn't work.

For recursively iterating files during encryption and decryption, [FileLister](https://github.com/chhajedji/simple-snippets/tree/master/Python/filelister) is being used, which is just simple recursive way of listing all the files in a given directory.

## Usage

For encryption, either give no arguments to run throughout  `test_dir` or give specific path:


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

For specific set of files:

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

Decryption:

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

For specific set of files:

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

Project link: https://github.com/chhajedji/ransomware
Deepest Leaves Sum
Tags: leetcode, dsa, theabbie
Published: 2022-06-14 03:30:39

Given the `root` of a binary tree, return _the sum of values of its deepest leaves_.

**Example 1:**

![](https://assets.leetcode.com/uploads/2019/07/31/1483_ex1.png)

**Input:** root = \[1,2,3,4,5,null,6,7,null,null,null,null,8\]
**Output:** 15

**Example 2:**

**Input:** root = \[6,7,8,2,7,1,3,9,null,1,4,null,null,null,5\]
**Output:** 19

**Constraints:**

*   The number of nodes in the tree is in the range `[1, 104]`.
*   `1 <= Node.val <= 100`

**SOLUTION:**

    # Definition for a binary tree node.
    # class TreeNode:
    #     def __init__(self, val=0, left=None, right=None):
    #         self.val = val
    #         self.left = left
    #         self.right = right
    class Solution:
        def inorder(self, root, l):
            if root:
                self.inorder(root.left, l + 1)
                if not root.left and not root.right:
                    if l > self.deepest:
                        self.deepest = l
                        self.deepestsum = root.val
                    elif l == self.deepest:
                        self.deepestsum += root.val
                self.inorder(root.right, l + 1)
        
        def deepestLeavesSum(self, root: Optional[TreeNode]) -> int:
            self.deepest = 0
            self.deepestsum = 0
            self.inorder(root, 0)
            return self.deepestsum
Zen Mood VS Depredator Mood - Dev Advocate Journal #DAJ 3
Tags: motivation, devjournal, daj
Published: 2022-06-14 03:01:39

At the start of this post, I want to share with you that you don't need to be perfect, only do the best you can and push yourself 1% daily, stay calm and be in azen mood; then, I found this youtube video, and I enter in a depredator mood, I want to eat the world.

{% embed https://www.youtube.com/embed/YGZLvKAFeYI %}

Maybe we should take a little bit of both moods 🌅
How to Self-Host a VS code server
Published: 2022-06-14 03:00:59

Hi guys,

So I want to host a code-server(vs code) and exposes a port for me to access the machine on the browser over the internet.

I’m wondering how to do that?

Should I run a Docker image with nginx? 

Please explain to me like I’m 5.

Will tip if you give me your eth address
Fraction Addition and Subtraction
Tags: leetcode, dsa, theabbie
Published: 2022-06-14 03:00:46

Given a string `expression` representing an expression of fraction addition and subtraction, return the calculation result in string format.

The final result should be an [irreducible fraction](https://en.wikipedia.org/wiki/Irreducible_fraction). If your final result is an integer, change it to the format of a fraction that has a denominator `1`. So in this case, `2` should be converted to `2/1`.

**Example 1:**

**Input:** expression = "-1/2+1/2"
**Output:** "0/1"

**Example 2:**

**Input:** expression = "-1/2+1/2+1/3"
**Output:** "1/3"

**Example 3:**

**Input:** expression = "1/3-1/2"
**Output:** "-1/6"

**Constraints:**

*   The input string only contains `'0'` to `'9'`, `'/'`, `'+'` and `'-'`. So does the output.
*   Each fraction (input and output) has the format `±numerator/denominator`. If the first input fraction or the output is positive, then `'+'` will be omitted.
*   The input only contains valid **irreducible fractions**, where the **numerator** and **denominator** of each fraction will always be in the range `[1, 10]`. If the denominator is `1`, it means this fraction is actually an integer in a fraction format defined above.
*   The number of given fractions will be in the range `[1, 10]`.
*   The numerator and denominator of the **final result** are guaranteed to be valid and in the range of **32-bit** int.

**SOLUTION:**

    class Solution:
        def gcd(self, a, b):
            while b:
                a, b = b, a % b
            return a
        
        def lcm(self, arr):
            n = len(arr)
            curr = arr[0]
            for i in range(1, n):
                l = arr[i]
                curr = (curr * l) // self.gcd(curr, l)
            return curr
        
        def fractionAddition(self, expression: str) -> str:
            expression += "x"
            sign = 1
            chunk = ""
            nums = []
            for c in expression:
                if c == "+" or c == "-" or c == "x":
                    if len(chunk) > 0:
                        a, b = chunk.split("/")
                        a, b = int(a), int(b)
                        nums.append([sign * a, b])
                    chunk = ""
                    if c == "+":
                        sign = 1
                    elif c == "-":
                        sign = -1
                else:
                    chunk += c
            mul = self.lcm([num[1] for num in nums])
            ans = sum([num[0] * mul // num[1] for num in nums])
            hcf = self.gcd(ans, mul)
            return "{}/{}".format(ans // hcf, mul // hcf)