teleren/devto huggingface dataset:
why react-router 6 so bad
Tags: react, webdev, opensource
Published: 2022-06-14 18:02:43

I have not been so burned from the decision to update the dependencies of the project for a long time and it was react router

As with version 3, the developers decided that since the major, without a code mod, you can break everything and not leave backward compatibility

After the update, the familiar codebase is highlighted in red (typescript)

useHistory is completely cut out, now we need to use a lot of different hooks.
If you have class components, then you should either pass through props or create a custom hook where these hooks will be called
history.replace now navigate(url, {replace: true})
histore.goBack now navigate(-1)
state was removed from prop to now it is a separate prop on Link
useLocation cannot be typified, in order to pass typing for state through <> now only typecasts

oh, I naively thought that the useSearchParams hook signature would make it possible to conveniently work with parameters, but when I opened the example, I didn’t understand anything at all

I burn, I have stress and hatred. For me, react-router is dead and is now the worst react library ever. I feel the same way about the remix team.

**Please developers, don't upgrade and don't use react router in your projects.
No more of this pain. Don't use it to instantly turn your routing into a pumpkin**
Contiguous Array
Tags: leetcode, dsa, theabbie
Published: 2022-06-14 18:00:43

Given a binary array `nums`, return _the maximum length of a contiguous subarray with an equal number of_ `0` _and_ `1`.

**Example 1:**

**Input:** nums = \[0,1\]
**Output:** 2
**Explanation:** \[0, 1\] is the longest contiguous subarray with an equal number of 0 and 1.

**Example 2:**

**Input:** nums = \[0,1,0\]
**Output:** 2
**Explanation:** \[0, 1\] (or \[1, 0\]) is a longest contiguous subarray with equal number of 0 and 1.

**Constraints:**

*   `1 <= nums.length <= 105`
*   `nums[i]` is either `0` or `1`.

**SOLUTION:**

    class Solution:
        def findMaxLength(self, nums: List[int]) -> int:
            n = len(nums)
            ctr = 0
            freq = [0]
            maxLen = 0
            for num in nums:
                if num == 1:
                    ctr += 1
                else:
                    ctr -= 1
                freq.append(ctr)
            exists = {}
            for i, f in enumerate(freq):
                if f in exists:
                    maxLen = max(maxLen, i - exists[f])
                else:
                    exists[f] = i
            return maxLen
Are you working on any Side Project?
Tags: sideprojects, webdev, discuss
Published: 2022-06-14 17:59:33

I think Side Project is not just to start your Startup, it might be for your new learning.

If you want to learn any new technology, my suggestion is that develop a mini project or MVP product. This product you can host in your Github or launch as a Startup.

If you guys have any other thoughts, please share!!
Learn New Salesforce Features with my tech blog
Published: 2022-06-14 17:50:16

I am creating various tech blog on salesforce related to [Salesforce Admin](https://quantoknack.com/all-courses/salesforce-admin-course-training/) and [Developer](https://quantoknack.com/all-courses/salesforce-developer-training-course/). You can also ask your salesforce technical query and our team is happy to offer you solution for free.
Updating React App deployed on Firebase
Published: 2022-06-14 17:32:47

Be sure that you've deployed your app on Firebase, if not done then follow this blog: _[How to deploy your React app on Firebase?](https://dev.to/aniketkumarsinha/how-to-deploy-your-react-app-on-firebase-ibj)_

Make all the changes and save them in your React App.

Run the following commands in the terminal:
```
$ npm run build
$ firebase deploy
```

It's Done!
Your app is updated.

Happy Learning!
Matplotlib - Brief
Published: 2022-06-14 17:32:30

## Plotting Normal Graph
- `pyplot.plot()` function:
If you call `plot()` one after another, Next graph will be printed on same graph window. 

```
plt.plot(x_axis_column, y_axis_column)
plt.show()
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9nh4sacpvbgxvnwd3a6k.png)
- Labeling Graph
Label gives different names to Graph as we wanted it.
**Legend**: Area that describe graph elements. This function have attributes for styling and locating legend on graph screen
```
plt.plot(x_axis_column, y_axis_column, label='Label Name')
plt.title('Title of Graph')
plt.ylabel('Ylabel')
plt.xlabel('Ylabel')
plt.legend()
plt.show()
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p0p82uigycs9m9wpx8jb.png)
- `.text()` for adding text Annotation to graph:
[Main Documentation for further details](https://matplotlib.org/3.5.0/tutorials/text/text_intro.html)

```
plt.text(xPosition,yPosition,'Text')

```
Be careful while putting positional co-ordinates. Don't set it out of range.
- Styling Graph:
In `.plt.plot()` we have attributes like `color`,`linestyle`, `marker`.
There are multiple default styles provided by matplotlib to try on to your graphs.

---

## Plotting Scatter Plot
- Only change from `.plot` to `.scatter` And <u>Styling can be applied same as normal Graph</u>
```
plt.scatter(x_axis_column, y_axis_column, color = 'red')
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b49fgksf1sxq7ksak8u4.png)
 
- You can add Crazy styling with different Background image.
[Resource here](https://stackabuse.com/how-to-change-plot-background-in-matplotlib/)

## Plotting Bar Graph
Can you guess how to do that?
`plt.bar()`? Yes Exactly!

```
plt.bar(x_axis_column, y_axis_column)

```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nqm1q9zloeq0v95l3d8x.png)
 
## Plotting histogram
First Question: What's **difference between Bar graph and histogram?**
Histogram: display the frequency of numerical data, It means in given column of database what is the frequency of particular number.
It contains non-discrete values.
Bar graph: compare different categories of data. discrete values can work.
Much clear difference [here](https://www.guru99.com/histogram-vs-bar-chart.html)
Now Actual Plotting:

```
plt.hist(column_data_for_histogram, bins=50, range = (5,35))

```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1p9aalxbea22q5cc0fjb.png)
**Changing Value of bins**
Bins are number of columns or towers in the histogram. Default value of these bins is 10. We can modify in the code. 
**Defining Range of histogram**
Manually selecting range for histogram for where to start and end.
Numbers With Same Consecutive Differences
Tags: leetcode, dsa, theabbie
Published: 2022-06-14 17:30:41

Return all **non-negative** integers of length `n` such that the absolute difference between every two consecutive digits is `k`.

Note that **every** number in the answer **must not** have leading zeros. For example, `01` has one leading zero and is invalid.

You may return the answer in **any order**.

**Example 1:**

**Input:** n = 3, k = 7
**Output:** \[181,292,707,818,929\]
**Explanation:** Note that 070 is not a valid number, because it has leading zeroes.

**Example 2:**

**Input:** n = 2, k = 1
**Output:** \[10,12,21,23,32,34,43,45,54,56,65,67,76,78,87,89,98\]

**Constraints:**

*   `2 <= n <= 9`
*   `0 <= k <= 9`

**SOLUTION:**

    class Solution:
        def numsSameConsecDiff(self, n: int, k: int) -> List[int]:
            nums = list(range(1, 10))
            op = set()
            visited = set()
            while len(nums) > 0:
                curr = nums.pop()
                currlen = len(str(curr))
                if currlen == n:
                    op.add(curr)
                d = curr % 10
                if currlen < n:
                    for nd in [d - k, d + k]:
                        if 0 <= nd <= 9:
                            newcurr = 10 * curr + nd
                            if newcurr not in visited:
                                visited.add(newcurr)
                                nums.append(newcurr)
            return list(op)
Naming a Company
Tags: leetcode, dsa, theabbie
Published: 2022-06-14 17:00:44

You are given an array of strings `ideas` that represents a list of names to be used in the process of naming a company. The process of naming a company is as follows:

1.  Choose 2 **distinct** names from `ideas`, call them `ideaA` and `ideaB`.
2.  Swap the first letters of `ideaA` and `ideaB` with each other.
3.  If **both** of the new names are not found in the original `ideas`, then the name `ideaA ideaB` (the **concatenation** of `ideaA` and `ideaB`, separated by a space) is a valid company name.
4.  Otherwise, it is not a valid name.

Return _the number of **distinct** valid names for the company_.

**Example 1:**

**Input:** ideas = \["coffee","donuts","time","toffee"\]
**Output:** 6
**Explanation:** The following selections are valid:
- ("coffee", "donuts"): The company name created is "doffee conuts".
- ("donuts", "coffee"): The company name created is "conuts doffee".
- ("donuts", "time"): The company name created is "tonuts dime".
- ("donuts", "toffee"): The company name created is "tonuts doffee".
- ("time", "donuts"): The company name created is "dime tonuts".
- ("toffee", "donuts"): The company name created is "doffee tonuts".
Therefore, there are a total of 6 distinct company names.

The following are some examples of invalid selections:
- ("coffee", "time"): The name "toffee" formed after swapping already exists in the original array.
- ("time", "toffee"): Both names are still the same after swapping and exist in the original array.
- ("coffee", "toffee"): Both names formed after swapping already exist in the original array.

**Example 2:**

**Input:** ideas = \["lack","back"\]
**Output:** 0
**Explanation:** There are no valid selections. Therefore, 0 is returned.

**Constraints:**

*   `2 <= ideas.length <= 5 * 104`
*   `1 <= ideas[i].length <= 10`
*   `ideas[i]` consists of lowercase English letters.
*   All the strings in `ideas` are **unique**.

**SOLUTION:**

    from collections import Counter
    
    class Solution:
        def distinctNames(self, ideas: List[str]) -> int:
            names = set(ideas)
            groups = [[] for _ in range(26)]
            groupctr = Counter()
            for idea in ideas:
                groups[ord(idea[0]) - ord('a')].append(idea)
            for l in 'abcdefghijklmnopqrstuvwxyz':
                for c in 'abcdefghijklmnopqrstuvwxyz':
                    for pair in groups[ord(l) - ord('a')]:
                        if (c + pair[1:]) not in names:
                            groupctr[(l, c)] += 1
            ctr = 0
            for idea in ideas:
                for c in 'abcdefghijklmnopqrstuvwxyz':
                    if (c + idea[1:]) not in names:
                        ctr += groupctr[(c, idea[0])]
            return ctr
Working With Remix-Router In React JS - A Look at New Data APIs in DataBrowserRouter
Tags: remix, react, ionic, javascript
Published: 2022-06-14 17:29:18

This is based on BETA software... but it is still awesome to see what's coming!!

A simple react application showing how to use the new [DataBrowserRouter Data APIs](https://beta.reactrouter.com/en/dev/getting-started/data) to get [Remix](https://remix.run) functionality in your React applications. There are no useRefs, no change events for the form data... its excellent, it just works. 

This application also shows an approach for getting input in a modal and submitting it to a route's action function. I have added [Ionic Framework](https://ionicframework.com) as my user interface component, but what is shown here can work with any React application

{% youtube ck2u3LxLvo8 %}

> The React Router v6.4 introduces all of the data abstractions from Remix for React Router SPAs. Now you can keep your UI and your data in sync with the URL automatically.

###More Information
- React Router Documentation: https://beta.reactrouter.com/en/dev/getting-started/data
- See It In CodeSandbox: https://codesandbox.io/s/remix-router-in-react-js-343czt
- Remix Run Documentation: https://remix.run
Sad thing about AppCode...
Tags: ios, swift, objc, xcode
Published: 2022-06-14 17:28:29

## I was long time AppCode user and I felt like this was god send for developer like me used to refactor a lot and who likes IDE to be intelligent, but due to years of performance and code resolution issues I had to move on and embrace Xcode that I hated so much.


I believe AppCode performance issues even on M1, but also new cool Xcode preview are turning points for me. I still miss intelligent refactoring options like change signature and Xcode can mess even simple rename so you have to be very careful, but what is the point in all of that if you waste your productive time by waiting for IDE to just process your code. 

I tried everything. Some say CocoaPods are the issue when you use frameworks there or that SPM is solution I tried all and always new issue pop up. So to me AppCode after 7 years of usage seems to be doomed forever. 

They have to start from start to fix it and they will not do that.

Still I believe I can use it in same heavy one time refactoring of large codebase that is impossible or dangerous to do in Xcode.

Most difficult is to imitate Xcode editor to actually be usable:
Still I am not able to use basic things like:

1 - Comment line + move down with one shortcut
2 - [How to delete whitespace backward in Xcode](https://apple.stackexchange.com/questions/442247/how-to-delete-whitespace-backward-in-xcode?noredirect=1#comment638387_442247) 

But I was able to make formatter [Swimat](https://github.com/Jintin/Swimat) (altho not as customizable as I am used to), delete line, duplicate and some other shortcuts working so it works similar as Android Studio & App Code, but performance is heaven with Xcode and this preview is like other dimension :), its worth just for that.
How to deploy your React app on Firebase?
Tags: react, firebase, webdev
Published: 2022-06-14 17:25:16

Assuming you have created an account on [Firebase](https://firebase.google.com/), let’s move forward to creating the project on the Firebase console to the deployment of your React app on Firebase.

**Create Firebase Project**
Sign in to Firebase and move to console through the button “Go to console” present at the top right corner of the website. The console panel will open up. Tap on the “Add project” tab there and create the project with any desired name. The project overview window will open up as shown below.

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

Tap on the web icon, just beside the android icon present there. Register your app there with a suitable name. Tick the setup of Firebase hosting setup there.

Just tap Next on the further proceedings and move to Git Bash to your project directory. Run command:
```
$ npm install -g firebase-tools
```

Then you need to log in to firebase through your bash.
```
$ firebase login
```

Allow the asked permission by running y or yes. It will open the sign-in window. Just sign in there with your account. Coming back to bash. Run command:
```
$ npm run build
```

Then run the command:
```
$ firebase init
```

Answer the questions as mentioned below.
```
? Are you ready to proceed? Yes
? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confi
rm your choices. Hosting: Configure and deploy Firebase Hosting sites
? Please select an option: Use an existing project
? Select a default Firebase project for this directory: mylinks-71d4a (mylinks)
? What do you want to use as your public directory? build
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
? Set up automatic builds and deploys with GitHub? No
? File build/index.html already exists. Overwrite? No
```

These questions will be asked to you and you need to answer as given above. In the question “Select a default Firebase project for this directory”, choose the project which you created for the web app.

The next step is to deploy your app to firebase.
```
$ firebase deploy
```

Hola! Your React app is deployed to Firebase. You can get its link either from the Git Bash itself. It will show up there as “Hosting URL” ending with “.web.app” or in the project on Firebase, go to **Hosting** tab, there too you will find your app URL.

Now the question arises, how to update your already deployed app?
Follow the following steps:
1. Make and save changes in your react app.
2. Run the following commans:
```
$ npm run build
$ firebase deploy
```
This will update your deployed app.

Happy Learning!
How to create a Meta Tag Validator by scraping the website in NEXT JS
Tags: webdev, nextjs, react, javascript
Published: 2022-06-14 17:02:32

Hello friends, today in this post I will show how I created a meta tags validator by scraping the website in NEXT JS. By doing this project you will learn about Next JS API, regular expressions, web scraping, etc. So I will scrape my website to extract all meta tags and validate whether my website has all the necessary tags. So let’s get started.

You can find the demo for this from below link
[Meta Tags Validator | CodeWithMarish](https://codewithmarish.com/products/meta-tags-validator)

Liked this product checkout out blog post on tutorial for it.
[How to create a Meta Tag Validator by scraping the website in NEXT JS](https://codewithmarish.com/post/meta-tag-validator-by-scraping-website-in-nextjs)

Also please don’t forget to subscribe to our youtube channel codewithmarish for all web development-related challenges.

[Code With Marish | Youtube](https://www.youtube.com/channel/UCkPYmdVz8aGRH6qCdKMRYpA)

Posted with ❤️ from somewhere on the Earth
Five things I have learned being a jobless 27 year old
Tags: career, beginners, discuss
Published: 2022-06-14 16:53:34

It has been 13 days, 298 hours and 17,930 minutes of being fun-employed. Never did I think at 27 years old, at the peak of my career, I would be jobless. Life, man. It holds no mercy. 

Furthermore, on my job seeking journey I have learned a couple of things: 

1. Be sure your LinkedIn is updated!

2. Pick a company that aligns with your values and morals.

3. Do NOT let imposter syndrome invade!!

4. Werk the room! Do not be afraid to leverage your network

5. Be yourself. simple. 

If you have recently experienced a layoff or rescinded offer, take care of your mental first, keep going and learn more. 

Check back for next weeks post!
React native: Camera is not active
Tags: reactnative, android, ios
Published: 2022-06-14 16:50:55

I'm developing my library for react-native. I need to use camera. 
I found nice packages `react-native-camera-kit` and `react-native-vision-camera` 
I created my lib using create-react-native-library (https://github.com/callstack/react-native-builder-bob)

Added `react-native-camera-kit` to `devDependencies` and `peerDependencies`. Added and configured `react-native-camera-kit` to my app

When I'm using react-native-camera-kit inside my app everything is ok.
I created component with react-native-camera-kit inside my lib and export it. 
When I'm trying to use this component I'm getting an error Camera is closed 

Again. Using `react-native-camera-kit` directly inside app - OK. Using `react-native-camera-kit` through my lib - Error 

Maybe somebody knows what to do.
Thanks
Demo: px Vs em Vs rem
Tags: webdev, beginners, css, codenewbie
Published: 2022-06-14 16:49:14

Do you still wonder when to use px, em, or rem?

You need to understand how they differ by ___responsiveness___ and not _simplicity_.

For that, I made a tool to __show__ you how px, em, and rem relates to its component, document, and the user's preference in the browser settings.

Here's the [tool](https://www.toheeb.com/px-em-rem/)

The tweet below has a video of me using it. (+ why I made it)

{% tweet 1534952628316151808 %}

If you've got any questions, hit me up in the comments ✌️.

Like it? Please share it!
Pure CSS The Professor (Money Heist)
Tags: codepen, html, css, webdev
Published: 2022-06-14 16:46:33

---
title: Pure CSS The Professor (Money Heist) 
published: true
tags: codepen,html,css, webdev
---

{% codepen https://codepen.io/AsyrafHussin/pen/VwQqJRJ %}

<p>Speed Code Video
<a href="https://twitter.com/asyrafhussin4/status/1536598965155573760" target="_blank">https://twitter.com/asyrafhussin4/status/1536598965155573760</a></p>
Count Lattice Points Inside a Circle
Tags: leetcode, dsa, theabbie
Published: 2022-06-14 16:00:49

Given a 2D integer array `circles` where `circles[i] = [xi, yi, ri]` represents the center `(xi, yi)` and radius `ri` of the `ith` circle drawn on a grid, return _the **number of lattice points**_ _that are present inside **at least one** circle_.

**Note:**

*   A **lattice point** is a point with integer coordinates.
*   Points that lie **on the circumference of a circle** are also considered to be inside it.

**Example 1:**

![](https://assets.leetcode.com/uploads/2022/03/02/exa-11.png)

**Input:** circles = \[\[2,2,1\]\]
**Output:** 5
**Explanation:**
The figure above shows the given circle.
The lattice points present inside the circle are (1, 2), (2, 1), (2, 2), (2, 3), and (3, 2) and are shown in green.
Other points such as (1, 1) and (1, 3), which are shown in red, are not considered inside the circle.
Hence, the number of lattice points present inside at least one circle is 5.

**Example 2:**

![](https://assets.leetcode.com/uploads/2022/03/02/exa-22.png)

**Input:** circles = \[\[2,2,2\],\[3,4,1\]\]
**Output:** 16
**Explanation:**
The figure above shows the given circles.
There are exactly 16 lattice points which are present inside at least one circle. 
Some of them are (0, 2), (2, 0), (2, 4), (3, 2), and (4, 4).

**Constraints:**

*   `1 <= circles.length <= 200`
*   `circles[i].length == 3`
*   `1 <= xi, yi <= 100`
*   `1 <= ri <= min(xi, yi)`

**SOLUTION:**

    class Solution:
        def countLatticePoints(self, circles: List[List[int]]) -> int:
            points = set()
            for x, y, r in circles:
                for i in range(x - r, x + r + 1):
                    for j in range(y - r, y + r + 1):
                        if (i - x) * (i - x) + (j - y) * (j - y) <= r * r:
                            points.add((i, j))
            return len(points)
Fix these common development mistakes with the top app performance improvement tips from Alex Kusmenkovsky
Published: 2022-06-14 16:42:04


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

Join Alex Kusmenkovsky, Architect and Developer at Back4app

for a morning overview on optimizing your app on Back4app. 

**What we'll cover:**


- Review of the various reasons that contribute to your app’s performance pitfalls like limiting the number of objects returned in a query, using the existing operator, managing index for a query, avoiding timeouts and more
- Sharing of solutions, ideas and strategies on how to address these performance issues
- Discussion on the best practices to leverage your app’s performance on Back4app.

**Register Here:** https://us02web.zoom.us/webinar/register/7216552339014/WN_TikIh8WwSuiWKZgxE0nsCg