teleren/devto huggingface dataset:
Together we OpenSource
Tags: diversity, opensource, hackajob, community
Published: 2022-06-09 22:03:39

[Meetup link](https://www.meetup.com/togetherweopensource/)
[](url)

The world is dying.

Well, we might be overly pessimistic, but the number of challenges is great and the number of efficient contributors to software solutions is not high enough. It has never been.
We need developers to help save water and energy, and prolong the lives of both humans and animals. The list of challenges is too long to list all of them here.

However, it takes months to find a suitable developer for a project, even in the world of finance, where money is not the biggest problem. Now try to imagine, how hard may it be for nature-related projects, like NationalTrust (UK), Greenpeace, and many others.

That is where we help. We help people of any degree of IT proficiency to get into OpenSource. We help people to become a true part of the Open Source Community. Our goal is to help them to impact society in the most positive way, while quickly and powerfully progressing their IT skills. Our goal is not to grow the “alike developers”, but rather to help each person to realize this individual’s strengths and build on these.
Every single person with the most basic IT knowledge can contribute to OpenSource, a lot.

No coding skills is actually required. Numerous roles in Open Source do not require coding skills.

Also, you might notice that your coding skills will just appear, at some point in the future ;)

We need to give this world a chance.
We need more contributors.
We need YOU.

P.S. Personally I want to help everybody to get a fair chance of getting a quality job. My focus is on supporting people from underprivileged groups and communities, but everybody is welcome.
I promise, I won't send away @MIT and @Oxford students as long as you behave nicely :)
Word Pattern
Tags: leetcode, dsa, theabbie
Published: 2022-06-09 22:00:56

Given a `pattern` and a string `s`, find if `s` follows the same pattern.

Here **follow** means a full match, such that there is a bijection between a letter in `pattern` and a **non-empty** word in `s`.

**Example 1:**

**Input:** pattern = "abba", s = "dog cat cat dog"
**Output:** true

**Example 2:**

**Input:** pattern = "abba", s = "dog cat cat fish"
**Output:** false

**Example 3:**

**Input:** pattern = "aaaa", s = "dog cat cat dog"
**Output:** false

**Constraints:**

*   `1 <= pattern.length <= 300`
*   `pattern` contains only lower-case English letters.
*   `1 <= s.length <= 3000`
*   `s` contains only lowercase English letters and spaces `' '`.
*   `s` **does not contain** any leading or trailing spaces.
*   All the words in `s` are separated by a **single space**.

**SOLUTION:**

    class Solution:
        def wordPattern(self, pattern: str, s: str) -> bool:
            patt = []
            pattset = {}
            i = 0
            for p in pattern:
                if p not in pattset:
                    pattset[p] = i
                    i += 1
                patt.append(pattset[p])
            words = []
            wordset = {}
            i = 0
            for w in s.split():
                if w not in wordset:
                    wordset[w] = i
                    i += 1
                words.append(wordset[w])
            return patt == words
Paracetalmol.test.js, retos de testing con Jest en Javascript 🧪
Tags: javascript, testing, jest, webdev
Published: 2022-06-09 21:34:11

Debido al éxito del proyecto [Paracetamol.js, retos de JavaScript para entrevistas laborales en español](https://dev.to/duxtech/paracetalmoljs-preguntas-de-entrevistas-laborales-para-javascript-3ilm), he decidido darle continuidad pero desde un enfoque mas orientado al testing, por ello desde el día de hoy empezaré este pequeño segmento del blog donde compartiré retos de pruebas unitarias desde lo mas básico hasta llegar a un nivel intermedio/avanzado.

Para ello he escogido a **[Jest](https://jestjs.io/es-ES/)** como framework de testing para todas las entradas del blog relacionados con este tema.

Trataré de explicar de la forma más sencilla y concisa términos como:

* Pruebas unitarias
* Pruebas con variables primitivas
* Pruebas con arreglos
* Pruebas con objetos
* Pruebas a funciones síncronas
* Pruebas a funciones asíncronas
* Matchers, etc.

Las entregas serán de 1 a 2 por semana, espero que sea de su agrado y les sirva para mejorar como devs.

Puedes visitar el proyecto original de Paracetamol.js:

{% link https://dev.to/duxtech/paracetalmoljs-preguntas-de-entrevistas-laborales-para-javascript-3ilm %}
Solve the Equation
Tags: leetcode, dsa, theabbie
Published: 2022-06-09 21:30:45

Solve a given equation and return the value of `'x'` in the form of a string `"x=#value"`. The equation contains only `'+'`, `'-'` operation, the variable `'x'` and its coefficient. You should return `"No solution"` if there is no solution for the equation, or `"Infinite solutions"` if there are infinite solutions for the equation.

If there is exactly one solution for the equation, we ensure that the value of `'x'` is an integer.

**Example 1:**

**Input:** equation = "x+5-3+x=6+x-2"
**Output:** "x=2"

**Example 2:**

**Input:** equation = "x=x"
**Output:** "Infinite solutions"

**Example 3:**

**Input:** equation = "2x=x"
**Output:** "x=0"

**Constraints:**

*   `3 <= equation.length <= 1000`
*   `equation` has exactly one `'='`.
*   `equation` consists of integers with an absolute value in the range `[0, 100]` without any leading zeros, and the variable `'x'`.

**SOLUTION:**

    class Solution:
        def parse(self, s):
            vals = [0, 0]
            chunk = ""
            sign = 1
            for c in s:
                if c == "+" or c == "-" or c == "s":
                    if len(chunk) > 0:
                        if chunk[-1] == "x":
                            coefficient = chunk[:-1]
                            if not coefficient:
                                coefficient = "1"
                            vals[0] += sign * int(coefficient)
                        else:
                            vals[1] += sign * int(chunk)
                        chunk = ""
                    if c == "+":
                        sign = 1
                    elif c == "-":
                        sign = -1
                else:
                    chunk += c
            return vals
        
        def solveEquation(self, equation: str) -> str:
            l, r = equation.split("=")
            lvals = self.parse(l + "s")
            rvals = self.parse(r + "s")
            numer = rvals[1] - lvals[1]
            denom = lvals[0] - rvals[0]
            if denom != 0:
                return "x={}".format(numer // denom)
            if numer != 0:
                return "No solution"
            return "Infinite solutions"
June 9th, 2022: What did you learn this week?
Tags: weeklyretro, weeklylearn, discuss
Published: 2022-06-09 21:29:34

It's that time of the week again. So wonderful devs, what did you learn this week? It could be programming tips, career advice etc.

![A sign that says "Learn to use the internet level 2](https://media.giphy.com/media/SPZFhfUJjsJO0/giphy.gif)

Feel free to comment with what you learnt and/or reference your TIL post to give it some more exposure.

{%tag todayilearned %}

Photo by [Trent Erwin](https://unsplash.com/@tjerwin?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/learn?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
CRA 5 + yarn workspaces + shared typescript packages
Tags: react, typescript, monorepo
Published: 2022-06-09 21:01:20

TL;DR:

- `create-react-app` doesn't play nice with shared packages inside a monorepo if you have to compile them (which is the case of my typescript shared types package)
- `craco` doesn't work officially with CRA 5, but Craco 7 alpha does, at least it works enough for it to fix this issue.
- `craco` config:

```typescript
const fs = require('fs');
const path = require('path');
const cracoBabelLoader = require('craco-babel-loader');

const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = (relativePath) => path.resolve(appDirectory, relativePath);

module.exports = {
  plugins: [
    {
      plugin: cracoBabelLoader,
      options: {
        includes: [resolveApp('../packages')],
      },
    },
  ],
};
```

---

This is a quick one. I've been struggling a lot today to use a shared `types` package in my monorepo. My structure is the following:

```
/.git
/app  // react application with CRA 5
  /src
  package.json
/gateway
  /src
  package.json
/packages
  /types
    ...
    package.json
package.json
```

I'm using:
- create-react-app 5
- yarn workspaces
- typescript

# The problem

Here I have my `gateway` and `app` both depending on `packages/types`. While `gateway` worked fine, `app` complains that I'm importing files outside of `app/src`, since this is a limitation in CRA configuration.

# The solution

I tried ejecting, but went down a rabbit hole where nothing worked. So I reverted those commits and proceeded with `craco@7.0.0-alpha.3`. Inside `app` I ran: 

```
$ yarn add craco@7.0.0-alpha.3
```

And then I found [this answer](https://github.com/pmmmwh/react-refresh-webpack-plugin/issues/540#issuecomment-1123885290) from @robertcoopercode, and edited to suit my needs:

```typescript
const fs = require('fs');
const path = require('path');
const cracoBabelLoader = require('craco-babel-loader');

const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = (relativePath) => path.resolve(appDirectory, relativePath);

module.exports = {
  plugins: [
    {
      plugin: cracoBabelLoader,
      options: {
        includes: [resolveApp('../packages')],
      },
    },
  ],
};
```

Thanks man, you saved my day. Now I'm going to create a ticket to drop `create-react-app` in favor of `next.js`, and add it to the next technical debt meeting.
Middle of the Linked List
Tags: leetcode, dsa, theabbie
Published: 2022-06-09 21:00:44

Given the `head` of a singly linked list, return _the middle node of the linked list_.

If there are two middle nodes, return **the second middle** node.

**Example 1:**

![](https://assets.leetcode.com/uploads/2021/07/23/lc-midlist1.jpg)

**Input:** head = \[1,2,3,4,5\]
**Output:** \[3,4,5\]
**Explanation:** The middle node of the list is node 3.

**Example 2:**

![](https://assets.leetcode.com/uploads/2021/07/23/lc-midlist2.jpg)

**Input:** head = \[1,2,3,4,5,6\]
**Output:** \[4,5,6\]
**Explanation:** Since the list has two middle nodes with values 3 and 4, we return the second one.

**Constraints:**

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

**SOLUTION:**

    # Definition for singly-linked list.
    # class ListNode:
    #     def __init__(self, val=0, next=None):
    #         self.val = val
    #         self.next = next
    class Solution:
        def middleNode(self, head: Optional[ListNode]) -> Optional[ListNode]:
            slow = head
            fast = head
            while fast and fast.next:
                slow = slow.next
                fast = fast.next.next
            return slow
[HELP] Spring Boot: field is not set in request
Tags: spring, learning, tdo, request
Published: 2022-06-09 20:52:55

I'm learning Spring Boot. My learning project is in this [repository github](https://github.com/willypuzzle/to-do-spring-application).

I have [this controller](https://github.com/willypuzzle/to-do-spring-application/blob/main/src/main/java/com/willypuzzle/todospringapplication/controllers/todo/ToDoController.java) where in the method createTodo I have as RequestBody [this dto](https://github.com/willypuzzle/to-do-spring-application/blob/main/src/main/java/com/willypuzzle/todospringapplication/dto/todo/TodoDto.java) where I have the problem that only the field "when" is not filled properly when I make a post on that controller route.
I tried to insert a log but I didn't succeed. I don't know why all the other field are filled and only "when" not.
This is an example of the body to the call at such route:
`
{
	"what": "Buy bread",
	"when": "2022-06-01 19:00:00",
	"where": "To the grocery store"
}
`
Vim re-binds that don't suck
Published: 2022-06-09 20:52:48

On my [last post](https://dev.to/jamesc40/why-new-programmers-should-be-learning-to-do-so-using-vim-3op3) I spoke about some basic keybindings that allow you to navigate Vim. I would now like to visit a few  more keybindings to incorporate into your workflow and some ideas on what to change them to. 

One of the first things I would advice a new user to rebind is ESC. You'll be hitting this key a lot and it by default is difficult to reach especially from the home row 

`imap jj <Esc>`

Another popular rebind for escape is tab which you can do in your keyboard settings if you're on mac.

Additionally when working with multiple windows in vim the default key-bind can be tough to remember for windows so I would recommend these: 
`
nnoremap <C-h> <C-w>h
nnoremap <C-j> <C-w>j
nnoremap <C-k> <C-w>k
nnoremap <C-l> <C-w>l`

This removes the need to hit **Control AND W** to change when changing windows.

You should also consider changing the default behavior for tabs.
` 
set softtabstop=2          
set shiftwidth=2
set tabstop=2 
set expandtab
`
By default vim sets these as 4 and it looks a little strange coming from another Text Editor.

Lastly by default the 'p' which is put does not save to the system clipboard and does not use the system clipboard. To change this add this:

`set clipboard=unnamedplus`

These are some of the key-binds that helped smooth my transition to Vim. When first starting out it can seem overwhelming but by taking it one step at a time and finding ways to improve your workflow without getting discouraged is extremely rewarding.
Find Greatest Common Divisor of Array
Tags: leetcode, dsa, theabbie
Published: 2022-06-09 20:30:42

Given an integer array `nums`, return _the **greatest common divisor** of the smallest number and largest number in_ `nums`.

The **greatest common divisor** of two numbers is the largest positive integer that evenly divides both numbers.

**Example 1:**

**Input:** nums = \[2,5,6,9,10\]
**Output:** 2
**Explanation:**
The smallest number in nums is 2.
The largest number in nums is 10.
The greatest common divisor of 2 and 10 is 2.

**Example 2:**

**Input:** nums = \[7,5,6,8,3\]
**Output:** 1
**Explanation:**
The smallest number in nums is 3.
The largest number in nums is 8.
The greatest common divisor of 3 and 8 is 1.

**Example 3:**

**Input:** nums = \[3,3\]
**Output:** 3
**Explanation:**
The smallest number in nums is 3.
The largest number in nums is 3.
The greatest common divisor of 3 and 3 is 3.

**Constraints:**

*   `2 <= nums.length <= 1000`
*   `1 <= nums[i] <= 1000`

**SOLUTION:**

    class Solution:
        def gcd(self, a, b):
            if b == 0:
                return a
            else:
                return self.gcd(b, a % b)
        
        def findGCD(self, nums: List[int]) -> int:
            minNum = float('inf')
            maxNum = float('-inf')
            for num in nums:
                minNum = min(minNum, num)
                maxNum = max(maxNum, num)
            return self.gcd(minNum, maxNum)
REACTJS: understanding state
Tags: webdev, react, devops, node
Published: 2022-06-09 20:12:42

##** Understanding React State**

Many web apps need their components to change their data, for example, after user interaction(clicking a button, submitting a form, etc.).
However, **<u>props</u>** cannot be changed.


In order to allow components to manage and change their data, React provides a feature called **state**.
**state** is an object that is added as a property in class components.

**For example**

```
`class Hello extends React.Component {
 state = {
    name: "James"
 }
 render() {
return <h1>Hello {this.state.name}.</h1>;
  }
}
`

```
As you can see, **state** is just a simple object, that contains key: value pairs.
Similar to <u>props</u>, the values can be accessed using **this.state**
Now, when the component renders, the state is initialized with the given value and there will be a heading that says "Hello James".

## **Changing State**
The state should not be modified directly. instead, React provides a **setState()** method, that can be used to modify state.

Why should we use **setState**, instead of simply changing the value of the object properties directly?
The answer uncovers one of the most useful features of React: when **setState** is called, React automatically re-renders the effected component with the new state.

Usually, the change in the state happens in event handlers.

## **Counter App**

To better understand how the state works, let's create a counter app, which increments the counter each time a button is clicked.
We start by creating our **Counter** component, which includes the counter and a button.

```
class Counter extends React.Component {
  state = {
    counter: 0
  }
  render() {
     return <div>
      <p>{this.state.counter}</p>
      <button>Increment</button>
      </div>;
    }
  }
```
We have initialized our **Counter** to the value 0 in the state.

Now, we need to add a click event handler to the button and increment the counter in the state.

```
class Counter extends React.Component {
  state = {
    counter: 0
  }
  increment = () => {
    this.setState({
       counter: this.state.counter+1});
   }
   render() {
      return <div> 
       <p>{this.state.counter}</p>
       <button onClick={this.increment}>Increment</button>
      </div>;
    }
}

```
The onClick event calls the **increment** function of our component, which uses **setState** to change the value of our counter. When the state is changed, React automatically triggers a re-render of the component.

## **Props vs State**

As a recap, here is a summary of the main differences between **<u>props</u>** and **state**:

- We use **<u>props</u>** to pass data to components.

- Components use **state** to manage their data.

- Props are read-only and cannot be modified.

- State can be modified by its component using the **setState()** method.

- The **setState()** method results in re-rendering the component affected.
Bulb Switcher
Tags: leetcode, dsa, theabbie
Published: 2022-06-09 20:00:44

There are `n` bulbs that are initially off. You first turn on all the bulbs, then you turn off every second bulb.

On the third round, you toggle every third bulb (turning on if it's off or turning off if it's on). For the `ith` round, you toggle every `i` bulb. For the `nth` round, you only toggle the last bulb.

Return _the number of bulbs that are on after `n` rounds_.

**Example 1:**

![](https://assets.leetcode.com/uploads/2020/11/05/bulb.jpg)

**Input:** n = 3
**Output:** 1
**Explanation:** At first, the three bulbs are \[off, off, off\].
After the first round, the three bulbs are \[on, on, on\].
After the second round, the three bulbs are \[on, off, on\].
After the third round, the three bulbs are \[on, off, off\]. 
So you should return 1 because there is only one bulb is on.

**Example 2:**

**Input:** n = 0
**Output:** 0

**Example 3:**

**Input:** n = 1
**Output:** 1

**Constraints:**

*   `0 <= n <= 109`

**SOLUTION:**

    class Solution:
        def bulbSwitch(self, n: int) -> int:
            return int(n ** 0.5)
Working With Remix Router In A Vue Application with Ionic Framework UI Components
Tags: remix, vue, ionic, javascript
Published: 2022-06-09 19:44:59

Working With Remix Router In A Vue  Application with Ionic Framework UI Components

>[Remix](https://remix.run/) is a full stack web framework that lets you focus on the user interface and work back through web standards to deliver a fast, slick, and resilient user experience. People are gonna love using your stuff.

⚠️ [remix-router-vue](https://www.npmjs.com/package/remix-router-vue) is very much in an alpha state and production usage is highly discouraged

This is a walkthrough of a sample application built using the remix-router-vue as a new way to build and structure VueJS applications. It brings over a fair bit of the Remix-Run functionality and I think it is pretty awesome.

> Fear not if you are not informed about [Ionic Framework](https://ionicframework.com/vue), for the purpose of this content, it is just UI Components; you can use whatever you want to style your user interface.

### Video
{% youtube https://youtu.be/gCfinbw2nZ0 %}

### Source Code
{% github aaronksaunders/vue-ionic-remix-router-1 %}
Clean Code PHP
Tags: php, programming, webdev, laravel
Published: 2022-06-09 19:32:37

It is important, as we all know, to write more clean and tidy code in order to raise the level of our project in terms of performance, speed, and other developers' understanding of your code and its quality. Here we see this wonderful repository that will show us how to write the code correctly to benefit from it in our upcoming projects

- https://github.com/jupeter/clean-code-php

I hope you enjoy and happy code.
2 Keys Keyboard
Tags: leetcode, dsa, theabbie
Published: 2022-06-09 19:30:40

There is only one character `'A'` on the screen of a notepad. You can perform one of two operations on this notepad for each step:

*   Copy All: You can copy all the characters present on the screen (a partial copy is not allowed).
*   Paste: You can paste the characters which are copied last time.

Given an integer `n`, return _the minimum number of operations to get the character_ `'A'` _exactly_ `n` _times on the screen_.

**Example 1:**

**Input:** n = 3
**Output:** 3
**Explanation:** Initially, we have one character 'A'.
In step 1, we use Copy All operation.
In step 2, we use Paste operation to get 'AA'.
In step 3, we use Paste operation to get 'AAA'.

**Example 2:**

**Input:** n = 1
**Output:** 0

**Constraints:**

*   `1 <= n <= 1000`

**SOLUTION:**

    from functools import lru_cache
    
    class Solution:
        @lru_cache(maxsize=None)
        def minSteps(self, n: int, k = 1, clipboard = 0) -> int:
            if k == n:
                return 0
            if k > n:
                return float('inf')
            a = float('inf')
            if clipboard > 0:
                a = 1 + self.minSteps(n, k + clipboard, clipboard)
            b = 2 + self.minSteps(n, 2 * k, k)
            return min(a, b)
How to get freelance clients?
Tags: discuss, freelance, beginners, career
Published: 2022-06-09 18:59:34

Ok, sure enough! The title is pretty self-explanatory, but I am curious. How did you get your first clients for software development?

I am more interested in how you got your second, third and fourth one. Most of the time we get lucky for the first one, maybe the second. **But at some point a system** has to emerge. **What is the system you developed to attract new customers**? 

Did you do it **by a personal brand**, or you stood behind a **company** you created? Do you think a legal entity is more serious and scalable?

I am interested in your **ideas and insights**! Thanks!
Paracetamol.js💊| #137: Explica este código JavaScript
Tags: javascript, spanish, webdev, programming
Published: 2022-06-09 18:59:32

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

```js
const arr = [1, 2, 3, 4];
arr[arr.length] = 5;
console.log(arr);
```

A. `[1, 2, 3, 4]`
B. `[1, 2, 3, 4, 5]`
C. `[5]`
D. `5`

Respuesta en el primer comentario.

---