teleren/devto huggingface dataset:
Top 7 Ways to Become A Better Coder
Tags: javascript, codenewbie, programming, productivity
Published: 2022-06-10 17:24:49

You'd better be very, very hardworking if you want to have a successful career in software development. You'd better never stop learning in your career. The technical world changes a lot every day, you have to keep up to date and keep your mind active.


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

1. Remind Yourself How Much You Have To Learn.

There is so much you can learn about programming that you might think you already know, but yes, you have to show patience and try to learn so many things and apply them to yourself in a daily basis. It's amazing what you can learn just every day.

2. Stop Presenting Yourself as The Right One To become a great programmer, you need to learn from the experience of other people. Find a good mentor who can provide you with the training you need for the upcoming future, and then hold on to your patience as you work hard.

3. Write It Three Times

• As soon as you have developed the software for the first time and demonstrated yourself as a client person who is building a website for someone else, don't expect any other appreciation for the product you developed for yourself, reward yourself for it • The second time you make it work • The third time you make it work right

4. Read Code as Much As Possible.

Imagine how you admire other's people's coding and how you can learn to do this faster by challenging yourself and learning new code each day, because when you know how to program, you become aware of how you can do it. • What would I have to write the code, and what would I have to observe before writing the code differently? • What have I discovered and how can I apply it to do this sort of thing in coding • There are many options you can research and apply to how you can improve the code, so many things that can be done.

5. Write Code, And Not Just as Assignments 
Therefore, there are quite a few chances to learn tech skills. If you work on your project and practice the code as you learn it then you can apply it to your project once you do the consistent work, then you can market yourself more effectively to market yourself.

6. Work One-To-One with Other Developers Any Way You Can 
When you connect to one another you learn about their experiences, what they are doing, and how they might be able to help you on your project as well, both of you can learn from each other through this. You can work on a great project and learn from others along your journey.

7. Learn Techniques, Not Tools 
Programming language tools will come and go, but you must learn the basics and then just imagine it in your head. The code is not where you end, it's where you begin it. When you learn the basics, you will have the code in your head.
Tomar capturas de pantalla facilmente en i3wm
Tags: i3wm, linux, arch, screenshot
Published: 2022-06-10 17:16:21

Hola, hoy les quiero compartir un script que uso diariamente para tomar capturas de pantalla en mi arch linux con escritorio i3wm.

Este no es de mi autoría, es de Rui F Ribeiro, usuario de stackexchange, este script funciona con los paquetes xclip e imagemagick, los cuales nos permitirán capturar la pantalla de nuestro escritorio y además poder seleccionar la región que queramos.

Comenzamos instalando los paquetes xclip e imagemagick

```
sudo pacman -S xclip imagemagick
```

Crearemos un archivo y añadiremos lo siguiente (puedes usar tu editor favorito ya sea code, vim, etc)

```
#!/usr/bin/env bash

# screenshots stuff
# TODO: docs

function help_and_exit {
    if [ -n "${1}" ]; then
        echo "${1}"
    fi
    cat <<-EOF
    Usage: scregcp [-h|-s] [<screenshots_base_folder>]

    Take screenshot of a whole screen or a specified region,
    save it to a specified folder (current folder is default)
    and copy it to a clipboard. 

       -h   - print help and exit
       -s   - take a screenshot of a screen region
EOF
    if [ -n "${1}" ]; then
        exit 1
    fi
    exit 0
}

if [ "${1}" == '-h'  ]; then
    help_and_exit
elif [ "${1:0:1}" == '-' ]; then
    if [ "${1}" != '-s' ]; then
        help_and_exit "error: unknown option ${1}"  
    fi
    base_folder="${2}"
else
    base_folder="${1}"
    params="-window root"
fi  

file_path=${base_folder}$( date '+%Y-%m-%d_%H-%M-%S' )_screenshot.png
import ${params} ${file_path}
xclip -selection clipboard -target image/png -i < ${file_path}
```

Guardamos nuestro archivo como scregcp y le damos permisos de ejecución

```
chmod +x scregcp
```

Moveremos nuestro archivo a /usr/bin/ 

```
sudo mv scregcp /usr/bin/
```

Para finalizar editaremos el archivo .config/i3/config para configurar los nuevos shortcuts

```
bindsym --release Shift+Print exec "scregcp -s $HOME/Pictures/Screenshots/"
bindsym --release Print exec "scregcp $HOME/Pictures/Screenshots/"
```

Ahora refrescamos la configuración de i3wm y tendremos todo listo, en mi caso las capturas se guardaran en Pictures/Screenshots/ de igual manera se copiaran en nuestro clipboard.

Saludos.
Invert Binary Tree
Tags: leetcode, dsa, theabbie
Published: 2022-06-10 17:00:47

Given the `root` of a binary tree, invert the tree, and return _its root_.

**Example 1:**

![](https://assets.leetcode.com/uploads/2021/03/14/invert1-tree.jpg)

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

**Example 2:**

![](https://assets.leetcode.com/uploads/2021/03/14/invert2-tree.jpg)

**Input:** root = \[2,1,3\]
**Output:** \[2,3,1\]

**Example 3:**

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

**Constraints:**

*   The number of nodes in the tree is in the range `[0, 100]`.
*   `-100 <= 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 invertTree(self, root: Optional[TreeNode]) -> Optional[TreeNode]:
            if root:
                root.left, root.right = root.right, root.left
                self.invertTree(root.left)
                self.invertTree(root.right)
            return root
How to Build a .NET Report from JSON Data Sources
Tags: webdev, tutorial, dotnet, devops
Published: 2022-06-10 16:49:00

---
canonical_url: https://www.grapecity.com/blogs/how-to-build-net-report-from-json-data-sources
description: Learn how to build a .NET report from JSON data sources using ComponentOne FlexReport & DataConnectors. See more here today.
---

In ComponentOne, we introduced the C1JsonDataConnector. It enables quick connections to JSON data using ADO.NET or Entity Framework Core. The ComponentOne 22v1 release enhances it further by adding integration of C1JsonDataConnector with FlexReportDesigner. To make it user-friendly, the FlexReportDesigner now supports a direct connection with JSON data sources through the data connection wizard.

In this blog, we will see how we can connect to a JSON data source in FlexReportDesigner and create a C1FlexReport with a JSON Data Source. Let’s open the FlexReportDesigner and create a new empty FlexReport and then follow the sections defined below.

![FlexReportDesigner](https://files.grapecity.com/gc-website-media/tucofvbm/01-json.png?width=500&height=271.1323763955343)

### Creating Connection with the JSON Data Source

The first step is to create a connection to the JSON data source as follows:

*   Go to the “Data” tab
*   Right Click on the “Main” data source and choose “Edit” from the context menu
*   The “Data Sources” dialog will open
*   Open the “Data provider” dropdown and choose “C1.AdoNet.Json”
*   Click on the ellipsis button ( “…” ) in front of the Connection String Field
*   “Data Link Properties” dialog will open
*   Set the connection properties like URI, Document Model, JsonPath, etc. Since we will be using a JSON file, we only need to set the Uri, Document Model, and the JsonPath properties. For more information on JsonDataConnection properties, you can refer to the [C1JsonDataConnector Documentation](https://www.grapecity.com/componentone/docs/services/online-dataconnector/jsongettingstarted.html)
*   Choose the Table from the DataSource tab
*   Click OK. If the connection is successful, you will see all the Fields under the Main Data Source

Please refer to the gif below for the above steps.

![Creating Connection with the JSON Data Source](https://files.grapecity.com/gc-website-media/zx5htlyx/02-json.gif?width=500&height=256.27615062761504)

And just like that, by performing a few steps, we have connected to our JSON Data Source; for this example, we have used the Customers data from [northwind.netcore.io](https://northwind.netcore.io/customers.json).

### Creating and Previewing the FlexReport

Now that we have connected to our JSON data source, we can create the layout of our FlexReport as we want. The final report will look similar to the following screenshot showing the data from our JSON data source.

![Customers Final FlexReport](https://files.grapecity.com/gc-website-media/rbwloga4/03-json.png?width=500&height=444.5364238410596)
Detect Capital
Tags: leetcode, dsa, theabbie
Published: 2022-06-10 16:30:36

We define the usage of capitals in a word to be right when one of the following cases holds:

*   All letters in this word are capitals, like `"USA"`.
*   All letters in this word are not capitals, like `"leetcode"`.
*   Only the first letter in this word is capital, like `"Google"`.

Given a string `word`, return `true` if the usage of capitals in it is right.

**Example 1:**

**Input:** word = "USA"
**Output:** true

**Example 2:**

**Input:** word = "FlaG"
**Output:** false

**Constraints:**

*   `1 <= word.length <= 100`
*   `word` consists of lowercase and uppercase English letters.

**SOLUTION:**

    class Solution:
        def detectCapitalUse(self, word: str) -> bool:
            n = len(word)
            caps = 0
            for i in range(n):
                if word[i].isupper():
                    caps += 1
            if caps == 0 or caps == n:
                return True
            if caps == 1 and word[0].isupper():
                return True
            return False
Build a Group Video Call System using PHP,Javascript + WebRTC Day 0
Tags: webdev, javascript, webrtc, programming
Published: 2022-06-10 16:17:28

In this video,I am going to walk you through what we are going to create.

{% youtube jC_xS4bu5iE %}


In this video,we are going to install Composer

{% youtube OBLgPdvOJEc %}
Our new video jingle
Tags: microservices, opensource, tutorial, luos
Published: 2022-06-10 16:10:30

Have you discovered our new video jingle? Developed with our favorite space universe and our cat’ronaut 🚀

We will use this universe to introduce and make our next videos. Do you like it? 🙂

Discover our Youtube channel and subscribe if you want to receive the next videos: https://www.youtube.com/channel/UCWeIoHVY9Z-04kdwXNtv2FA?sub_confirmation=1


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3xp46qmemvfjxamhpfa9.png)
Height Checker
Tags: leetcode, dsa, theabbie
Published: 2022-06-10 16:00:43

A school is trying to take an annual photo of all the students. The students are asked to stand in a single file line in **non-decreasing order** by height. Let this ordering be represented by the integer array `expected` where `expected[i]` is the expected height of the `ith` student in line.

You are given an integer array `heights` representing the **current order** that the students are standing in. Each `heights[i]` is the height of the `ith` student in line (**0-indexed**).

Return _the **number of indices** where_ `heights[i] != expected[i]`.

**Example 1:**

**Input:** heights = \[1,1,4,2,1,3\]
**Output:** 3
**Explanation:** 
heights:  \[1,1,4,2,1,3\]
expected: \[1,1,1,2,3,4\]
Indices 2, 4, and 5 do not match.

**Example 2:**

**Input:** heights = \[5,1,2,3,4\]
**Output:** 5
**Explanation:**
heights:  \[5,1,2,3,4\]
expected: \[1,2,3,4,5\]
All indices do not match.

**Example 3:**

**Input:** heights = \[1,2,3,4,5\]
**Output:** 0
**Explanation:**
heights:  \[1,2,3,4,5\]
expected: \[1,2,3,4,5\]
All indices match.

**Constraints:**

*   `1 <= heights.length <= 100`
*   `1 <= heights[i] <= 100`

**SOLUTION:**

    class Solution:
        def heightChecker(self, heights: List[int]) -> int:
            n = len(heights)
            expected = sorted(heights)
            return len([i for i in range(n) if heights[i] != expected[i]])
Python Exercise 8: generate a dictionary from different source
Tags: python, beginners
Published: 2022-06-10 15:41:25

## Question
- Write a Python program to create a new dictionary by extracting the mentioned keys from the below dictionary.
- **Given

```python
sample_dict = {
    "name": "Kelly",
    "age": 25,
    "salary": 8000,
    "city": "New york"}

# Keys to extract
keys = ["name", "salary"]
```

- **Expected output:**
```python
{'name': 'Kelly', 'salary': 8000}
```


## My attempt
### Decomposition of question
- initialise an empty dictionary: new_dict
- iterate over the list named keys
	- for each key in keys
		- check whether the key is appear in the sample_dict
	- if the key is in the sample_dict, add the items in the sample_dict to the new_dict
- print out the new list

```python
def get_items_from_dict(keys, dictionary):  
    new_dict = {}  
    for key in keys:  
        if key in dictionary:  
            new_dict.update({key: dictionary.get(key)})  
    print(new_dict)  
  
sample_dict = {  
    "name": "Kelly",  
    "age": 25,  
    "salary": 8000,  
    "city": "New york"}  
  
# Keys to extract  
keys = ["name", "salary"]  
  
get_items_from_dict(keys, sample_dict)
```

## Recommend solution
- use dictionary comprehension

```python
sampleDict = { 
  "name": "Kelly",
  "age":25, 
  "salary": 8000, 
  "city": "New york" }

keys = ["name", "salary"]

newDict = {k: sampleDict[k] for k in keys}
print(newDict)
```


## Credit
- exercise on [PYnative](https://pynative.com/python-dictionary-exercise-with-solutions/)
Container With Most Water
Tags: leetcode, dsa, theabbie
Published: 2022-06-10 15:30:40

You are given an integer array `height` of length `n`. There are `n` vertical lines drawn such that the two endpoints of the `ith` line are `(i, 0)` and `(i, height[i])`.

Find two lines that together with the x-axis form a container, such that the container contains the most water.

Return _the maximum amount of water a container can store_.

**Notice** that you may not slant the container.

**Example 1:**

![](https://s3-lc-upload.s3.amazonaws.com/uploads/2018/07/17/question_11.jpg)

**Input:** height = \[1,8,6,2,5,4,8,3,7\]
**Output:** 49
**Explanation:** The above vertical lines are represented by array \[1,8,6,2,5,4,8,3,7\]. In this case, the max area of water (blue section) the container can contain is 49.

**Example 2:**

**Input:** height = \[1,1\]
**Output:** 1

**Constraints:**

*   `n == height.length`
*   `2 <= n <= 105`
*   `0 <= height[i] <= 104`

**SOLUTION:**

    class Solution:
        def maxArea(self, height: List[int]) -> int:
            n = len(height)
            i = 0
            j = n - 1
            mvol = (j - i) * min(height[i], height[j])
            while i < j:
                if height[i] < height[j]:
                    i += 1
                else:
                    j -= 1
                mvol = max(mvol, (j - i) * min(height[i], height[j]))
            return mvol
dev调整页面宽度
Tags: css
Published: 2022-06-10 15:18:35


## 背景


dev这个网站默认的内容宽度太窄小了，个人不习惯，用stylus写个简单的css，让他内容变宽，那么大空白浪费，看个代码还拖动才能看完，很不舒服

```css
.crayons-article,#bottom-content-read-next{
    width:1600px!important;
    margin-left:-400px;
}
 
.crayons-article-actions__inner{
    left: 100px!important;
    position:fixed!important;
}
.crayons-layout__sidebar-right {
    right: 100px!important;
    position:fixed!important;
}
```


效果如下

![效果](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/67pohtw7j82k271f2knt.png)


同理，它的编辑界面的宽度也是太窄了，我们加个css

```css
.crayons-article-form__content{
    width: 1600px!important;    
    margin-left:-400px;
}
```

一下就舒服了

如果还想隐藏右边的无关紧要的内容

```css
.crayons-article-form__aside {
    display: none;
}
.sidebar-wrapper-right {
    display: none;
}

.crayons-layout__sidebar-right {
    display: none;
}
```
 

完整css

```css
.crayons-article,
#bottom-content-read-next {
    width: 1000px!important;
    margin-left: -200px;
}

.crayons-article-actions__inner {
    left: 100px!important;
    position: fixed!important;
}
.crayons-layout__sidebar-right {
    right: 100px!important;
    position: fixed!important;
}

.crayons-article-form__content {
    width: 1400px!important;
    margin-left: -200px;
}

.crayons-article-form__aside {
    display: none;
}
.sidebar-wrapper-right {
    display: none;
}

.crayons-layout__sidebar-right ,.crayons-sponsorship-widget{
    display: none;
}
```
OOPs Lecture 1
Tags: oops, objects, programming
Published: 2022-06-10 15:14:37

---
title:  OOPs Lecture 1
published: true
description: learned about contructor's
tags: oops, objects, programming
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
---

# OOPs Lecture 1


learned about contructor's

- here is what understand about contructor is that;
- we can create object of a class

```java
class Person{
    String name;
    int age;
}
```

creating object of class Person

```java
// 
Person p = new Person();
p.name = "John";
p.age = 30;
// so here as we have not created constutor's we need to write p.name; p.age;
```

```java
class Human {
    String name;
    int age;
    public Human(String name, int age){
        this.name = name;
        this.age = age;
    }
}
```

```java
Human h = new Human("John", 30);

// as we have created constuctor's we need not to write h.name; h.age;
// else we add that in the parameter of constructor's/fn
// contructors is a special function that is used to initialize the object

```

pay attention to the **this** keyword;
it is nothing but the object itself;
`this.name == h.name`

under the hood the `this` keyword will be replaced by the object (`h`) itself

> If we donot provide `this` then we need to always need to write `h.name` object name;


[***repo for code🧑🏻‍💻***](https://github.com/theabhayprajapati/dsa/blob/trunk/OOPs/learn/Intro.java)


**🤝🏾Connect me on:**

**Twitter**: 🕊️[`@Abhayprajapati_`](https://twitter.com/Abhayprajapati_)
**Github**: 🐧[`@theabhayprajapati`](https://github.com/theabhayprajapati)


<!-- suggest and edit -->
---

[***suggest and edit🖋️***](https://github.com/theabhayprajapati/dsa/blob/trunk/OOPs/learn/Intro.md)
Rotate Array
Tags: leetcode, dsa, theabbie
Published: 2022-06-10 15:00:45

Given an array, rotate the array to the right by `k` steps, where `k` is non-negative.

**Example 1:**

**Input:** nums = \[1,2,3,4,5,6,7\], k = 3
**Output:** \[5,6,7,1,2,3,4\]
**Explanation:**
rotate 1 steps to the right: \[7,1,2,3,4,5,6\]
rotate 2 steps to the right: \[6,7,1,2,3,4,5\]
rotate 3 steps to the right: \[5,6,7,1,2,3,4\]

**Example 2:**

**Input:** nums = \[-1,-100,3,99\], k = 2
**Output:** \[3,99,-1,-100\]
**Explanation:** 
rotate 1 steps to the right: \[99,-1,-100,3\]
rotate 2 steps to the right: \[3,99,-1,-100\]

**Constraints:**

*   `1 <= nums.length <= 105`
*   `-231 <= nums[i] <= 231 - 1`
*   `0 <= k <= 105`

**Follow up:**

*   Try to come up with as many solutions as you can. There are at least **three** different ways to solve this problem.
*   Could you do it in-place with `O(1)` extra space?

**SOLUTION:**

    class Solution:
        def reverse(self, nums, a, b):
            n = b - a
            for i in range(n // 2):
                nums[a + i], nums[a + n - i - 1] = nums[a + n - i - 1], nums[a + i]
            return nums
        
        def rotate(self, nums: List[int], k: int) -> None:
            n = len(nums)
            k = n - k % n
            self.reverse(nums, 0, k)
            self.reverse(nums, k, n)
            self.reverse(nums, 0, n)
            return nums
Paracetamol.js💊| #138: Explica este código JavaScript
Tags: javascript, spanish, programming, webdev
Published: 2022-06-10 14:56:05

## **<center>Explica el siguiente código JavaScript</center>**
#### <center>**Dificultad:** <mark>Intermedio</mark></center>

```js
const nums = [5,97,36,4,3,10,88];
console.log(nums.at(-1));
console.log(nums[-1]);
```

A. `undefined`, `undefined`
B. `10`, `88`
C. `88`, `88`
D. `88`, `undefined`

Respuesta en el primer comentario.

---
Creating your first VIEW_COMPONENT with Rails and Hotwire
Tags: rails, ruby, tutorial, hotwire
Published: 2022-06-10 14:50:37

In the following video I'll show you how easy it is to start using view_component with your Rails app.

I highly recommend it to help create extremely reusable views and keep your UI neat and tidy.

{% youtube zaovY9dqvXk %}
Follow Friday: Security Edition (10 June 2022)
Tags: watercooler, meta, writing, security
Published: 2022-06-10 14:50:32

---
title: Follow Friday: Security Edition (10 June 2022)
published: true
description: 
series: Follow Friday
tags: watercooler, meta, writing, security
---

_Happy Friday, friends! 🎉 Follow Friday is your weekly opportunity to shout out fellow DEV Community members doing awesome work. Check out the comments and follow someone new!_

Ahh, security — every developer’s favorite afterthought. 🔐💭

Just kidding!! The truth is, securing software is under-appreciated and extremely important. From navigating [secure sign-on methods](https://dev.to/devteam/listen-to-devnews-s8e5-big-tech-goes-all-in-on-passwordless-sign-in-apples-gatekeeping-of-web-based-ar-more-2a0) to [avoiding the worst case scenario](https://dev.to/mukundmadhav/massive-log4j-java-vulnerability-what-it-is-how-to-fix-it-h7h), we love security-focused devs because…well, we’d be screwed without them. 😅

_**Formatting tip**: to populate a card with a follow button, use the liquid tag syntax `{% embed https://... %}` and insert the URL of your favorite author's profile._

Join in on the #FollowFriday fun by @mentioning your favorite author to follow for security tips (and letting us know why you love their posts!) ⤵️
Bad Request in nestjs, help me!
Tags: nestjs, prism, javascript, typescript
Published: 2022-06-10 14:40:32

guys, how are you? I have a problem with the refresh token request it says it's a bad request.
My code can store the login token in the database but I can't make the Put request through the refreshToken function.
from what I understand I think my controller is wrong, because I send it through postman and I already tried to send valid, invalid and token that does not exist and all the request gives the same error, in theory it was for the non-existing token to send my response "invalid token" with was handled in refreshToken function.
I did the same procedure, I copied and pasted the same token there in my database.

@Put('refresh')
  async refreshToken(@Body() data: RefreshTokenDto) {
    return this.tokenService.refreshToken(data.oldToken);
  }
async refreshToken(oldToken: string) {
    const objToken = await this.findOneRefreshToken(oldToken);
    console.log(objToken);

    if (objToken) {
      return await oldToken;
    } else {
      return new HttpException(
        {
          errorMessage: 'Token inválido',
        },
        HttpStatus.UNAUTHORIZED,
      );
    }
  }
{
    "statusCode": 400,
    "message": [
        "property oldToken should not exist"
    ],
    "error": "Bad Request"
} 
async findOneRefreshToken(hash: string) {
    return await this.prisma.token.findUnique({
      where: {
        hash,
      },
    });
  }
Note: I'm using prism and nestjs