teleren/devto huggingface dataset:
Why are you setting disabled property for each input element?
Tags: html, react, frontend, webdev
Published: 2022-06-09 12:03:18

 ---
title: Why are you setting disabled property for each input element?
published: true
description: 
tags: html, react, frontend, webdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8pw2dfygmqa8otkn8hf1.png
---

If you set a disabled property on the [fieldset](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset) element, there is no need to set disabled on each input element.

Before😅: 

```jsx
<form onSubmit={handleSubmit}>
  <div>
    <label>
      Email:
      <input disabled={loading} type="email" />
    </label>
  </div>
  <div>
    <label>
      Password:
      <input disabled={loading} type="password" />
    </label>
  </div>
  <input disabled={loading} type="submit" value="submit" />
</form>
```

After😎: 

```jsx
<form onSubmit={handleSubmit}>
  <fieldset disabled={loading}>
    <div>
      <label>
        Email:
        <input type="email" />
      </label>
    </div>
    <div>
      <label>
        Password:
        <input type="password" />
      </label>
    </div>
    <input type="submit" value="submit" />
  </fieldset>
</form>
```

![form with fieldset](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fxccrioxs89e49h5z7d3.gif)

---

Bonus: Use [legend](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/legend) element to display caption in the fieldset element


```jsx
<form onSubmit={handleSubmit}>
  <fieldset disabled={loading}>
    <legend>Login</legend>
    <div>
      <label>
        Email:
        <input type="email" />
      </label>
    </div>
    <div>
      <label>
        Password:
        <input type="password" />
      </label>
    </div>
    <input type="submit" value="submit" />
  </fieldset>
</form>
```

![fieldset with legend](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7fvzvk5gt0ziss2y0r4n.png)
Number of Enclaves
Tags: leetcode, dsa, theabbie
Published: 2022-06-09 12:00:48

You are given an `m x n` binary matrix `grid`, where `0` represents a sea cell and `1` represents a land cell.

A **move** consists of walking from one land cell to another adjacent (**4-directionally**) land cell or walking off the boundary of the `grid`.

Return _the number of land cells in_ `grid` _for which we cannot walk off the boundary of the grid in any number of **moves**_.

**Example 1:**

![](https://assets.leetcode.com/uploads/2021/02/18/enclaves1.jpg)

**Input:** grid = \[\[0,0,0,0\],\[1,0,1,0\],\[0,1,1,0\],\[0,0,0,0\]\]
**Output:** 3
**Explanation:** There are three 1s that are enclosed by 0s, and one 1 that is not enclosed because its on the boundary.

**Example 2:**

![](https://assets.leetcode.com/uploads/2021/02/18/enclaves2.jpg)

**Input:** grid = \[\[0,1,1,0\],\[0,0,1,0\],\[0,0,1,0\],\[0,0,0,0\]\]
**Output:** 0
**Explanation:** All 1s are either on the boundary or can reach the boundary.

**Constraints:**

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

**SOLUTION:**

    class Solution:
        def dfs(self, grid, i, j, m, n, visited):
            visited.add((i, j))
            grid[i][j] = 0
            for x, y in [(i - 1, j), (i + 1, j), (i, j - 1), (i, j + 1)]:
                if 0 <= x < m and 0 <= y < n and grid[x][y] == 1 and (x, y) not in visited:
                    self.dfs(grid, x, y, m, n, visited)
        
        def numEnclaves(self, grid: List[List[int]]) -> int:
            m = len(grid)
            n = len(grid[0])
            boundary = set()
            for i in range(m):
                boundary.add((i, 0))
                boundary.add((i, n - 1))
            for i in range(n):
                boundary.add((0, i))
                boundary.add((m - 1, i))
            globalvisited = set()
            ctr = 0
            for i in range(m):
                for j in range(n):
                    if grid[i][j] == 1:
                        currvisited = set()
                        self.dfs(grid, i, j, m, n, currvisited)
                        if len(set.intersection(currvisited, boundary)) == 0:
                            ctr += len(currvisited)
            return ctr
Sunsetting Atom... what is your next Editor?
Published: 2022-06-09 11:52:00

---
title: Sunsetting Atom... what is your next Editor?
published: true
description: for people who doesn't use VSCode
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xzm03bt7781n72ie42xl.png
tags: 
---

 
I've been using Atom for very long time. To me, it has all I need to write Ruby on Rails, NuxtJS, NextJS, and react-native.

Now that Atom is going to be archived on December 15, 2022. I'm moving back to Sublime Text. I used to use Sublime Text a lot but I don't really like the color scheme. It's going to take some time to get used to new color scheme.

Are there anyone moving to Sublime Text instead of VSCode like me?
Angular 13. What's new
Tags: angular, webdev
Published: 2022-06-09 11:42:03

What's new in angular 13.

{% embed https://youtu.be/FckCcN_VM04 %}
_See this and many other articles at [lucaspaganini.com](lucaspaganini.com)_

Angular 13 was recently released, let me tell you what I consider to be the most relevant changes.

## Build Cache

You can now cache your builds, so if a module hasn't changed, Angular doesn't have to rebuild it. That alone will improve your build speed by around 68%.

```ts
{
  "cli": {
    "cache": {
      "enabled": true,
      "path": ".angular/cache",
      "environment": "all"
    }
  }
}
```

## TestBed Destroy After Each

Tests are now faster because Angular does a better job of tearing down after each test. That introduced some race conditions in my codebase, so I had to turn that off. I'd say it needs a few weeks to become stable.

```ts
getTestBed().initTestEnvironment(
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting(),
  { teardown: { destroyAfterEach: false } }
);
```

## Dropped Support for Internet Explorer 11

Finally, we're dropping support for Internet Explorer 11, which allows Angular to leverage modern browser features, such as CSS variables.

## Dependency Updates

TypeScript 4.4 and RxJS 7.4 are now supported! I made a video on RxJS 7, the link is in the description.

## Dynamically create components

If you create components dynamically, good news, you don't need the component factory anymore, just use `ViewContainerRef.createComponent`

```ts
const componentFactory =
  componentFactoryResolver.resolveComponentFactory(Component);

const componentRef = componentFactory.create(injector);

viewContainer.insert(componentRef.hostView);

const componentRef = viewContainer.createComponent(Component);
```

## Conclusion

<p>References are below. <app-newsletter-modal-trigger>Subscribe</app-newsletter-modal-trigger> if you're into web development, and have a great day.</p>

## References

1. [Angular v13 is now available](https://blog.angular.io/angular-v13-is-now-available-cce66f7bc296)
2. [Internet Explorer 11 support deprecation and removal](https://github.com/angular/angular/issues/41840)
3. [Advantages of Dropping Support for Internet Explorer 11](https://github.com/angular/components/issues/7374)
GitHub login page clone
Tags: webdev, programming, tutorial, css
Published: 2022-06-09 11:41:03

📃Source Code: [Codepen](https://codepen.io/deepakydv9315/pen/zYRmaEE) || [GitHub](https://github.com/deepakydv9315/github-login-page)
🌍Live Preview [Click here](https://deepakydv9315.github.io/github-login-page/#)
🤝 Follow me on [Instagram](https://www.instagram.com/syco_coders/) || [GitHub](https://github.com/deepakydv9315)

GitHub login page using HTML and CSS. 

{% codepen https://codepen.io/deepakydv9315/pen/zYRmaEE %}


Hope you enjoy ;)
Happy coding.
CNAME Between cPanel and CyberPanel throught CloudFlare
Tags: webdev, discuss, showdev, tutorial
Published: 2022-06-09 11:38:19

While using CyberPanel there were some obstacles that I faced, but that's where the fun lies.

After so long I wanted to link subdomain from old server hosting (cPanel) to my new new hosting (CyberPanel) finally answered. It took me a long time to realize my own stupidity in this case.

## cPanel - Shared Hosting

Main Domain: `www.cpanel-domain.com`

I want to create a new subdomain in cPanel that integrates with CloudFlare. So I went to the CloudFlare Dashboard to add a new subdomain to DNS Management.

New subdomain: `new.cpanel-domain.com`

So what I do is:
1. Login to CloudFlare Dashboard
2. Add a new record
3. Fill with `CNAME` `new.cpanel-domain.com` = `app.cyber-panel.com`

## CyberPanel - VPS

Main Domain: `www.cyber-panel.com`

Where is my new application here, because it can only run on a VPS and I want to use a subdomain that is on cPanel.

What I did was:
1. I created a new website with the name `app.cyber-panel.com`
2. Go to `https://cyber-panel.com:8090/websites/app.cyber-panel.com`
3. Then select the "Domain Alias" menu or `https://cyber-panel.com:8090/websites/app.cyber-panel.com/domainAlias`
4. Select "Create Alias"
5. Fill in the alias for the website in CyberPanel with the subdomain in cPanel.
Maximum Number of Weeks for Which You Can Work
Tags: leetcode, dsa, theabbie
Published: 2022-06-09 11:30:37

There are `n` projects numbered from `0` to `n - 1`. You are given an integer array `milestones` where each `milestones[i]` denotes the number of milestones the `ith` project has.

You can work on the projects following these two rules:

*   Every week, you will finish **exactly one** milestone of **one** project. You **must** work every week.
*   You **cannot** work on two milestones from the same project for two **consecutive** weeks.

Once all the milestones of all the projects are finished, or if the only milestones that you can work on will cause you to violate the above rules, you will **stop working**. Note that you may not be able to finish every project's milestones due to these constraints.

Return _the **maximum** number of weeks you would be able to work on the projects without violating the rules mentioned above_.

**Example 1:**

**Input:** milestones = \[1,2,3\]
**Output:** 6
**Explanation:** One possible scenario is:
​​​​- During the 1st week, you will work on a milestone of project 0.
- During the 2nd week, you will work on a milestone of project 2.
- During the 3rd week, you will work on a milestone of project 1.
- During the 4th week, you will work on a milestone of project 2.
- During the 5th week, you will work on a milestone of project 1.
- During the 6th week, you will work on a milestone of project 2.
The total number of weeks is 6.

**Example 2:**

**Input:** milestones = \[5,2,1\]
**Output:** 7
**Explanation:** One possible scenario is:
- During the 1st week, you will work on a milestone of project 0.
- During the 2nd week, you will work on a milestone of project 1.
- During the 3rd week, you will work on a milestone of project 0.
- During the 4th week, you will work on a milestone of project 1.
- During the 5th week, you will work on a milestone of project 0.
- During the 6th week, you will work on a milestone of project 2.
- During the 7th week, you will work on a milestone of project 0.
The total number of weeks is 7.
Note that you cannot work on the last milestone of project 0 on 8th week because it would violate the rules.
Thus, one milestone in project 0 will remain unfinished.

**Constraints:**

*   `n == milestones.length`
*   `1 <= n <= 105`
*   `1 <= milestones[i] <= 109`

**SOLUTION:**

    class Solution:
        def numberOfWeeks(self, milestones: List[int]) -> int:
            total = 0
            maxval = float('-inf')
            for m in milestones:
                total += m
                maxval = max(maxval, m)
            total -= maxval
            return min(2 * total + 1, total + maxval)
Java 19 - Agonizing Anticipation
Published: 2022-06-09 11:20:03

---
title: Java 19 - Agonizing Anticipation
published: true
description: We look into the new Java version 19 and all the different features we could expect in this latest revision.
tags:
cover_image: https://i.ytimg.com/vi/0_YIn1hlnaI/maxresdefault.jpg
---

{% youtube 0_YIn1hlnaI %}

We look into the new Java version 19 and all the different features we could expect in this latest revision.
🥁 Just shipped the first alpha release of our API 🎉
Tags: api, startup
Published: 2022-06-09 11:10:43

Our free API allows you to authenticate students, researchers and educators with the SSO service of their institution.

A successful authentication provides the user's unique identifier, institution, institution country and affiliation (e.g. faculty, staff, student, employee) to their institution.

To better understand how we can improve Studid, I'd appreciate any feedback or advice you can offer.

Try Studid out https://studid.io
How Many Numbers Are Smaller Than the Current Number
Tags: leetcode, dsa, theabbie
Published: 2022-06-09 11:00:48

Given the array `nums`, for each `nums[i]` find out how many numbers in the array are smaller than it. That is, for each `nums[i]` you have to count the number of valid `j's` such that `j != i` **and** `nums[j] < nums[i]`.

Return the answer in an array.

**Example 1:**

**Input:** nums = \[8,1,2,2,3\]
**Output:** \[4,0,1,1,3\]
**Explanation:** 
For nums\[0\]=8 there exist four smaller numbers than it (1, 2, 2 and 3). 
For nums\[1\]=1 does not exist any smaller number than it.
For nums\[2\]=2 there exist one smaller number than it (1). 
For nums\[3\]=2 there exist one smaller number than it (1). 
For nums\[4\]=3 there exist three smaller numbers than it (1, 2 and 2).

**Example 2:**

**Input:** nums = \[6,5,4,8\]
**Output:** \[2,1,0,3\]

**Example 3:**

**Input:** nums = \[7,7,7,7\]
**Output:** \[0,0,0,0\]

**Constraints:**

*   `2 <= nums.length <= 500`
*   `0 <= nums[i] <= 100`

**SOLUTION:**

    import bisect
    
    class Solution:
        def smallerNumbersThanCurrent(self, nums: List[int]) -> List[int]:
            n = len(nums)
            ans = [0] * n
            order = sorted([(num, i) for i, num in enumerate(nums)])
            for i in range(n):
                pos = bisect.bisect_left(order, (order[i][0], float('-inf')))
                ans[order[i][1]] = i - max(i - pos, 0)
            return ans
How to save model object using only foreign keys id in django-rest-framework
Tags: django, djangorestframework, restapi, python
Published: 2022-06-09 10:31:51

If you want save some data like me in a model which has foreign key field and want to save only by id in foreign key field. Then this method is for you 🐎

`models.py`
Here is the foreign key field where I want to save this object just passing foreign key id.
![model](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j1cvcrr6cjas1em7y3i2.png)

In `serializers.py` we have to put `serializers.PrimaryKeyRelatedField` on foreign key field name like this - 

```py
unit = serializers.PrimaryKeyRelatedField(queryset= Unit.objects.all(),many=False)
```
![serializers](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zlddvmdpmp15o3351fb3.png)
Populating Next Right Pointers in Each Node
Tags: leetcode, dsa, theabbie
Published: 2022-06-09 10:30:38

You are given a **perfect binary tree** where all leaves are on the same level, and every parent has two children. The binary tree has the following definition:

struct Node {
  int val;
  Node \*left;
  Node \*right;
  Node \*next;
}

Populate each next pointer to point to its next right node. If there is no next right node, the next pointer should be set to `NULL`.

Initially, all next pointers are set to `NULL`.

**Example 1:**

![](https://assets.leetcode.com/uploads/2019/02/14/116_sample.png)

**Input:** root = \[1,2,3,4,5,6,7\]
**Output:** \[1,#,2,3,#,4,5,6,7,#\]
**Explanation:** Given the above perfect binary tree (Figure A), your function should populate each next pointer to point to its next right node, just like in Figure B. The serialized output is in level order as connected by the next pointers, with '#' signifying the end of each level.

**Example 2:**

**Input:** root = \[\]
**Output:** \[\]

**Constraints:**

*   The number of nodes in the tree is in the range `[0, 212 - 1]`.
*   `-1000 <= Node.val <= 1000`

**Follow-up:**

*   You may only use constant extra space.
*   The recursive approach is fine. You may assume implicit stack space does not count as extra space for this problem.

**SOLUTION:**

    """
    # Definition for a Node.
    class Node:
        def __init__(self, val: int = 0, left: 'Node' = None, right: 'Node' = None, next: 'Node' = None):
            self.val = val
            self.left = left
            self.right = right
            self.next = next
    """
    
    class Solution:
        def connect(self, root: 'Optional[Node]') -> 'Optional[Node]':
            paths = [(root, 0)]
            i = 0
            latest = (0, -1)
            while i < len(paths):
                curr, level = paths[i]
                if curr:
                    if level == latest[1]:
                        curr.next = latest[0]
                    latest = paths[i]
                    paths.append((curr.right, level + 1))
                    paths.append((curr.left, level + 1))
                i += 1
            return root
                
    # class Solution:
    #     def connect(self, root: 'Optional[Node]') -> 'Optional[Node]':
    #         if root and root.left and root.right:
    #             root.left.next = root.right
    #             root.left = self.connect(root.left)
    #             root.right = self.connect(root.right)
    #         return root
Sum of All Odd Length Subarrays O(N) Leetcode #1588.
Tags: javascript, programming, beginners, discuss
Published: 2022-06-09 10:23:46

Given an array of positive integers `arr`, return the sum of all possible odd-length subarrays of `arr`.

> A subarray is a contiguous subsequence of the array.

**Follow up:**

Could you solve this problem in `O(n)` time complexity?

Below are the three approaches from brute force method to Best Case Runtime.

#### 1. O(N^2 * log n)
```javascript
var sumOddLengthSubarrays = function(arr) {
    let result = 0;
    for(let i = 0; i < arr.length; i++){
        result += arr[i]
    }
    
    for(let i = 0; i < arr.length; i++){
        for(let j = i + 2; j < arr.length; j += 2){
            for(let t = i; t <= j; t++){
                result += arr[t];
            }
        }
    }
    
    return result;
};

```

#### 2. O(N^2)
```javascript
var sumOddLengthSubarrays = function(arr) {
    let result = 0;
    let lastWindowSum = 0;
    for(let i = 0; i < arr.length; i++){
        result += arr[i]
    }
    
    for(let i = 0; i < arr.length; i++){
        for(let j = i + 2; j < arr.length; j += 2){
            
            // if this is the first time then add current start index to window sum.
            if(lastWindowSum === 0) lastWindowSum = arr[i];
            
            // memoized sum + next newly added elements only.
            result += lastWindowSum + arr[j] + arr[j - 1];
            
            // memoize the previous window sum
            lastWindowSum += arr[j] + arr[j - 1];
        }
        // reset last window when new window starts [the position of subarray starts change]
        lastWindowSum = 0;
    }
    
    return result;
};
```

#### 3. O(N)
*To solve this problem in `O(N)` time we have to calculate how many sub arrays from an index can be made, after that we devide it by 2 and get the odd sub arrays.*

Once we have the number of odd sub arrays for an Index we can multiply this index witht the number of sub arrays to get final result of current index' sum.

> To check how many times a number can appear in a subarray or that how many subarrays can be created with this current number we apply this below formulla.

```javascript
total occurrances = (currentIndex + 1) * (arrayLength - currentIndex) + 1);
```

```javascript
occurrances in only odd array = (currentIndex + 1) * (arrayLength - currentIndex) + 1) / 2
```

> And to get the sum from the odd arrays we multiply the occurrance with current number.

```javascript
sum in odd array = (currentIndex + 1) * (arrayLength - currentIndex) + 1) / 2 * currentNumber.
```

> For JavaScript we have to parseInt - `parseInt(((i + 1) * (arr.length - i) + 1) / 2) * arr[i]`


```javascript
var sumOddLengthSubarrays = function(arr) {
    let result = 0;
   
    for(let i = 0; i < arr.length; ++i) {
        result += parseInt(((i + 1) * (arr.length - i) + 1) / 2) * arr[i];
    }
    
    return result;
};
```
&nbsp;
> Thanks for reading. 🙋‍
Define a .root method for your gems
Tags: ruby, gems, basics
Published: 2022-06-09 10:23:20

---
title: Define a .root method for your gems
published: true
tags: Ruby, Gems, Basics
---

```rb
# my_gem/
#   lib/
#     my_gem.rb

module MyGem
  # @return [Pathname] # similar to Rails.root
  def self.root
    Pathname.new(File.expand_path("..", __dir__))
  end
end
```
Find Lucky Integer in an Array
Tags: leetcode, dsa, theabbie
Published: 2022-06-09 10:00:47

Given an array of integers `arr`, a **lucky integer** is an integer that has a frequency in the array equal to its value.

Return _the largest **lucky integer** in the array_. If there is no **lucky integer** return `-1`.

**Example 1:**

**Input:** arr = \[2,2,3,4\]
**Output:** 2
**Explanation:** The only lucky number in the array is 2 because frequency\[2\] == 2.

**Example 2:**

**Input:** arr = \[1,2,2,3,3,3\]
**Output:** 3
**Explanation:** 1, 2 and 3 are all lucky numbers, return the largest of them.

**Example 3:**

**Input:** arr = \[2,2,2,3,3\]
**Output:** -1
**Explanation:** There are no lucky numbers in the array.

**Constraints:**

*   `1 <= arr.length <= 500`
*   `1 <= arr[i] <= 500`

**SOLUTION:**

    from collections import Counter
    
    class Solution:
        def findLucky(self, arr: List[int]) -> int:
            ctr = Counter(arr)
            return max([k for k, v in ctr.items() if k == v] + [-1])
Question,Help, React local Storage
Tags: javascript, webdev, react, help
Published: 2022-06-09 09:56:05

Hello dev community,

How do you create a react and **`local-storage`** session that accepts multiple inputs, stores them, retrieves the data when needed, functionality to edit a field and update the field.

In brief how do you create a CRUD operation with react and local storage?

**Key functionality** => Use multiple input field and perform **CRUD**

Give references if any available.
Thanks,