teleren/devto huggingface dataset:
create-react-app with pnpm
Tags: tutorial, npm, pnpm, webdev
Published: 2022-07-26 01:21:00

### Note

> CRA is dead. You can check alternatives to `CRA` in [the official document](https://react.dev/learn/start-a-new-react-project) such as Next.js, Remix and Gatsby. You can also use [`Vite`](https://vitejs.dev/guide/) too to start a React project.

---

> `pnpm`: Fast, disk space efficient package manager

Recently, I've got to know about `pnpm`, and as a react developer, I've decided to have a first try with `create-react-app`.

---

1\. Install `pnpm`

```console
npm install -g pnpm
```

2\. Create a React project using `create-react-app`.

```console
pnpm create react-app pnpm-cra --template typescript
```

3\. Delete `node_modules`, `package-lock.json`.

4\. Install Packages using `pnpm`

```console
pnpm install
```

There might've been an error like below.

```properties
hint: If you want peer dependencies to be automatically installed, add "auto-install-peers=true" to an .npmrc file at the root of your project.
hint: If you don't want pnpm to fail on peer dependency issues, add "strict-peer-dependencies=false" to an .npmrc file at the root of your project.
```

Let's take the hint.

Create a file `.npmrc` and added `auto-install-peers=true`, then remove `node_modules` and reinstall packages `pnpm install`.

5\. Run a dev server

```console
pnpm start
```

In my case, there was another error.

```
Property 'toBeInTheDocument' does not exist on type 'JestMatchers<HTMLElement>'.
```

I don't know exactly why it did happen though, it could've been solved by installing a type package.

```console
pnpm add -D @types/testing-library__jest-dom
```

Then re-run the dev server!

---

That's it, I hope it will be helpful for someone.
Happy Coding!
Are you sure what packages you're using are in package.json? (Phantom Dependency)
Tags: pnpm, npm, node, webdev
Published: 2022-07-26 01:13:00

> Are you sure what packages you're using are in package.json?

Projects that I'm working on are managed separately, even they are similar and have common packages.

One day, I changed a package manager of a project for a testing purpose, then I've found the code that imported an undefined package `lodash`. 

---

## What are Phantom Dependencies?

Phantom dependencies are packages that are not defined in package.json.

![using-undefined-package](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3jcxmlzfr6jjlmmtl5az.png)

Let's see the example, 
there is one dependency `express` but the project can use an undefined package `qs`, and there is `qs` in `node_modules`.

That means your code can refer packages that you don't know what it is and what version is. It happens when you install packages using `npm` or `yarn v1`.

---

## How to get rid of them?

Yarn Berry's approach solves this problem though, I didn't much about it so, I'm going to show you an example using `pnpm`.

> `pnpm`: Fast, disk space efficient package manager

![cannot_use_undefined_packages_anymore](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c29bjn7jp75u07zme2n7.png)
 
There are only packages that were defined in `package.json`.

If you wanna know more about `pnpm`, visit [pnpm](https://pnpm.io/motivation).

---

Happy Coding!
Community of practice for engineering managers
Tags: leadership, community, practices
Published: 2022-07-26 00:26:03


A call out to 1st and 2nd year engineering managers! We're developing a community of practice program to bring every day real life challenges to the table to share, reflect, explore, learn, and grow together. What are some of the challenges that you are currently having?

[![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1hwjrtyu2hmf2mt3hzdt.jpeg)](https://blackmill.co)
Aggregate RuboCop ToDo count
Tags: rubocop, ruby
Published: 2022-07-26 00:16:14

---
title: Aggregate RuboCop ToDo count
published: true
description:
tags:
  - rubocop
  - ruby
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3bdlnfqctsx22e0rnnbz.png
---

Are you all fighting RuboCop offenses?

Today I have written a simple Ruby script to aggregate the number of offenses in .rubocop_todo.yml, so let me share it in this article.

```ruby
# aggregate_rubocop_todo_offenses.rb
require 'date'

# Aggregate up to 365 days in advance.
365.times do |i|

  # Get the 1st commit hash before `i` days.
  # The format `%H` means "commit hash". See `git log --help` for more info.
  commit_sha = `git log -1 --format='%H' --before=#{i}.day`.rstrip

  # Get the .rubocop_todo.yml content at the commit.
  rubocop_todo_content = `git show #{commit_sha}:.rubocop_todo.yml`.rstrip

  # Get the total count of offenses in the .rubocop_todo.yml.
  # The offenses count is described in the form like `# Offense count: 42` per cop.
  offenses_count = rubocop_todo_content.scan(/count: (\d+)/).flatten.map(&:to_i).sum

  # Output date and count in TSV format.
  puts [
    Date.today - i,
    offenses_count
  ].join("\t")
end
```

Run the above script and you will see the following output:

```
$ ruby aggregate_rubocop_todo_offenses.rb
2022-07-26      164761
2022-07-25      164763
2022-07-24      164764
2022-07-23      165303
2022-07-22      165303
2022-07-21      165296
2022-07-20      165290
...
2021-11-27      193170
```

In such cases, it's convenient to paste the data into Google Spreadsheet to generate a chart.

![chart](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3bdlnfqctsx22e0rnnbz.png)

It's a crazy amount, but slowly decreasing in these days. Good...

In fact, I recently created a GitHub Action workflow that automatically corrects offenses and continuously creates new pull requests, so offenses count is gradually decreasing only by pushing merge button, but I'll get to that in another time.

If you are interested, please add your reactions! :unicorn: :sparkles:
Data Visualizing using Power BI
Tags: analytics, powerbi, sql
Published: 2022-07-26 00:04:00

My first real life Data analysis and visualization with PwC internship.

I was required to create a dashboard in Power BI that reflects all relevant Key Performance Indicators (KPIs) and metrics in the dataset, and also to show an overview of Long-Term trends in customer and agent behaviour.

following the six data analysis phases or steps: 

1. ask; Understanding the problem and knowing what to focus on

2. prepare; when i understood the problem, i thought about how to solve it, and how to get my data and organize it so that it is useful.

3. process; data cleaning including the fixing and removing of incorrect, corrupted, incorrectly formatted, duplicate, or incomplete data within a dataset using SQL and Power Query in Power BI

4. analyse; this was where i became a detective, performing different calculations and creating different views on the data to get insights

5. share; using Power BI, I visualized my findings in line with the request of the stakeholders.

clicking this [link](https://bit.ly/3RZcqYe) will take you to the dashboard.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wajv0tf8qiw3ny3odlls.png)
#JulyOT 26: Let's get personal: Computing - Retro computing with Dave Glover and the Altair 8800
Tags: julyot, iot, embedded, retro
Published: 2022-07-27 23:54:18

---
title: #JulyOT 26: Let's get personal: Computing - Retro computing with Dave Glover and the Altair 8800
published: true
date: 2022-07-26 00:00:00 UTC
tags: julyot,iot,embedded,retro
canonical_url: https://JulyOT.dev/blog/26-lgpc-altair
series: JulyOT 2022
cover_image: https://JulyOT.dev/assets/images/JulyOT-banner-26-lgpc-altair-96e870858911b8ca0b8de2c057a821c5.png
---

_Investigate the modern world of ‘personal’ computing, from IoT to mobile, mixed reality, desktop computing, wearables, and more!_

## Let's get personal: computing[​](#lets-get-personal-computing "Direct link to heading")

Today we are announcing our new series on YouTube, recorded at the Microsoft Reactor in Redmond!

Let's get personal: computing is an interview show where [Jim Bennett](https://twitter.com/JimBobBennett) interviews guests who have been working in the modern version of personal computing, covering IoT to mobile, mixed reality, desktop computing, wearables, and more. Each guest has built something cool that they want to share that you too can build!

![A picture of Dave holding his altair kit. Dave is lit from the left in orange and right from blue](https://JulyOT.dev/assets/images/lgpc-dave-01762e006388b13bd2efe6722e623b31.png)

On this show, Jim is joined by [Dave Glover](https://twitter.com/dglover), an internet of things and embedded hardware enthusiast from Australia, who has built a pocket-sized Altair 8800! A piece of computing history in the palm of your hand.

Learn more and build this yourself at [aka.ms/lgpc/altair](https://aka.ms/lgpc/altair).

{% youtube fSz5lTaXS0E %}

This show was recorded at the Microsoft Reactor in Redmond.

Connect with the Microsoft Reactor:

[Facebook](https://fb.com/MicrosoftReactor)

[Twitter](https://twitter.com/MSFTReactor)

[Meetup](https://www.meetup.com/pro/microsoft-reactor)

Get the look! Buy Jim's shirt: [aka.ms/lgpc/look/altair](https://aka.ms/lgpc/look/altair)
Day 600 : Leave It
Tags: hiphop, code, coding, lifelongdev
Published: 2022-07-25 22:32:22

_liner notes_:
- Saturday : So I played around a little with the new Snap Pixy that I got last week. I tested all the different modes and it worked out pretty well. Then I got ready to head to the station. I even got to test the Pixy in the building. The camera quality is okay but not so good in low-light conditions. Then it was time to do the radio show. My co-host was there and had a really good time. The recording of this week's show is at https://kNOwBETTERHIPHOP.com

![Radio show episode image of a Digital Polar Bear wearing a red scarf laying down on it's stomach holding a bottle of Coca Cola in its hands on an iceberg with the words July 23rd 2022 Thanks Swam](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s5yl0mzpz9tsbnimcxlk.jpg)

- Sunday : Did my study sessions and started working on adding a new feature to my site: https://doingstuff.in Had to go back and refactor some things so I basically spent the time working on that.

- Professional : Today, had a few meetings in the morning and basically just worked on some tickets. Made some good progress to start off the week.

- Personal : Made some progress with my side project feature. It's basically a map where people can suggest places and events for me to visit before I get there. Got the admin section set up that will create the page for the location and a rough layout with a map and a sidebar working. It's coming together nicely.

![A rocky and pointy coastline of Kunashir Island where the rocks have a circular shape and have a pink shade](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e0qjxd7ez0izthpp5mos.jpg)

I've been meaning to start studying Kanji with WakiKani, but I just couldn't! haha Always got tied up with something. My issue is I'll start working on something and don't leave it so I can work on something else. The time flies by and the next thing I know, it's night time. I'm going to work on my side project and then end the night with a couple of hours studying Kanji and probably watch an anime.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube OK5nJbA7yk8 %}
Day 107: can't focus.
Published: 2022-07-25 22:11:18

Hi!
Today was a hard one starting a new week and a new task usually is so exciting it's like a new chance to amend your mistakes but today was different I could find focus to the work. I destructed the task into smaller tasks and I knew what to do but I couldn't myself to do it. usually this means two things, I'm tired or in a bad mood and since the weekend just ended it has to be the second one either way I could use a good night sleep it usually do the trick.
Let's get better
signing off...
What Is Website WCAG Conformance?
Tags: a11y, wcag, webaccessibility
Published: 2022-07-26 12:18:25

---
title: What Is Website WCAG Conformance?
published: true
date: 2022-07-25 22:10:12 UTC
tags: accessibility,wcag,webaccessibility,a11y
canonical_url: https://www.matechs.com/blog/what-is-website-wcag-compliance
---

_Web accessibility guidelines._

![WCAG compliance](https://cdn-images-1.medium.com/max/1024/0*sMrrSny9UazwmtwO.png)

The Web Content Accessibility Guidelines ([WCAG](https://www.w3.org/TR/WCAG21/)) are a set of international standards that define how to make web content accessible to everyone, including people with disabilities. The WCAG are developed and maintained by the World Wide Web Consortium ([W3C](https://www.w3.org/)).‍

The WCAG are organized into four principles:

**Perceivable** : Information and user interface components must be presentable to users in ways they can perceive.

**Operable** : User interface components and navigation must be operable.

**Understandable** : Information and the operation of the user interface must be understandable.

**Robust** : Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.‍

The WCAG are organized into guidelines, each of which contains testable success criteria. The guidelines are organized at three levels of conformance: A, AA, and AAA.‍

The WCAG are an important resource for digital designers and web developers because they provide a common language for discussing accessibility and a shared understanding of what accessibility means.

Digital designers and web developers can use the WCAG to:

- Evaluate the accessibility of existing web content.
- Plan the accessibility of new web content.
- Ensure that web content meets the needs of people with disabilities.

We can help make your site more accessible and become compliant with accessibility guidelines! [Get in touch](https://www.matechs.com/contact) to find out how.

* * *
Recursion in JavaScript
Tags: javascript, algorithms, tutorial, beginners
Published: 2022-07-25 21:56:00

### What is Recursion?
A recursive function is a function that calls itself until it doesn’t. And this technique is called recursion.

---

### Syntax

```javascript
const recurse = () => {
    recurse();
}

recurse();
```

This recursive function will keep calling itself forever, So it needs a little more touches

```javascript
const recurse = () => {
  if (condition) {
    recurse();
  }
  // stop calling recurse()
};

recurse();
```

This function will continue calling itself as it meets the condition, else will stop running.

---

### Examples

#### 1- Simple Example

```javascript
const countDown = (start, end) => {
  console.log(start);
  if (start > end) {
    countDown(start - 1, end);
  }
};

countDown(19, 7); // 19 18 17 16
```

#### Behind the scenes

- countDown(19, 7) prints 19 and calls countDown(18, 7)
- countDown(18, 7) prints 18 and calls countDown(17, 7)
- countDown (17, 7) prints 17 and calls countDown(16, 7)
- countDown (16, 7) prints 16 and stop running.

---

#### 2- Factorial

- 0! = 1
- 1! = 1
- 2! = 2 * 1
- 3! = 3 * 2 * 1
- 4! = 4 * 3 * 2 * 1
- 5! = 5 * 4 * 3 * 2 * 1

```javascript
const factorial = (num) => (num < 0 ? -1 : num === 0 ? 1 : num * factorial(num - 1));

console.log(factorial(5)); // 120
```

#### Behind the scenes

- factorial(5) = 5 * factorial(4)
- factorial(4) = 4 * factorial(3)
- factorial(3) = 3 * factorial(2)
- factorial(2) = 2 * factorial(1)
- factorial(1) = 1 * factorial(0)
- factorial(0) = 1

---

#### 3- Fibonacci

A fibonacci sequence is written as:
0, 1, 1, 2, 3, 5, 8, 13, 21, ...

The Fibonacci sequence is the integer sequence where the first two terms are 0 and 1. After that, the next term is defined as the sum of the previous two terms. Hence, the nth term is the sum of (n-1)th term and (n-2)th term.

Here's a code that returns the fibonacci value at a given index using recursion

```javascript
const fibonacci = (n) => (n < 2 ? n : fibonacci(n - 1) + fibonacci(n - 2));

console.log(fibonacci(5)); // 5
```

#### Behind the scenes

- fibonacci(5) = fibonacci(4) + fibonacci(3)
- fibonacci(4) = fibonacci(3) + fibonacci(2)
- fibonacci(3) = fibonacci(2) + fibonacci(1)
- fibonacci(2) = fibonacci(1) + fibonacci(0)
- fibonacci(1) = 1
- fibonacci(0) = 0

---
HackerRank — Problem Solving — JavaScript — Plus Minus
Tags: javascript, problemsolving, hackerrank, coding
Published: 2022-07-25 21:34:00


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

Given an array of integers, calculate the ratios of its elements that are positive, negative, and zero. Print the decimal value of each fraction on a new line with  places after the decimal.

**Solution**

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

**Explanation**
Step 01: Take three variables named "positive", "negative" and "zero. Store initial value as zero(0).
Step 02: Iterate a for loop through the given array.
Step 03: While iterating the array we have to count the positive, negative and zero values.
Step 04: Calculate the ratios by dividing with the array length.
Step 05: Print the results.
Nested Dynamic Routes with React Router
Tags: react, beginners, tutorial
Published: 2022-07-25 20:27:00


One of the futures I really enjoyed using in React Router was the nested routes hook  and useParams.

The [React Router documentation] (https://reactrouter.com/docs/en/v6/getting-started/concepts) defines a dynamic segment as :

*Dynamic Segment - A segment of a path pattern that is dynamic, meaning it can match any values in the segment. For example the pattern /users/:userId will match URLs like /users/123*

In order to use this cool future, we need useParams() which is defined as: 

*URL Params - The parsed values from the URL that matched a dynamic segment.*


This is very helpful for when you have multiple nested routes, such as in an ecommerce store or blog. A parent component shows a list of objects that are links to more information about each product. Without dynamic routing, one would have to manually create a card and route for each product, which is incredibly inefficient especially for stores with many products. This is also a bad idea because as products are added or changed, it requires that the code be updated. Thank goodness for dynamic routing! Keep reading to see how it's done!

- 
In App.js I used react-router-dom <Routes>  and <Route> to render my route to ComponentDetail.js.

`<Route path="locations-detail/:id" element={<ComponentDetail
               locations={locations}
               passport={passport}
               setPassport={setPassport}
               bucketList={bucketList}
               setBucketList={setBucketList}
               />} />`

As you can see, the path=”location-detail/:id”, with id being a dynamic variable.

- 
Moving on, with ComponentDetail.js, I imported useParams from react-router-dom and then destructured the useParams object with id as my url variable.

`let { id } = useParams();`


- 
I then used some conditional rendering to render my LocationCard.js, to display the correct location.

`if (location.id == id) {
           return( <LocationCard 
                   passport={passport}
                   key={location.id}
                   id={location.id}
                   city={location.city}
                   country={location.country}
                   location={location}
                   setPassport={setPassport}
                   food={location.food}
                   landmark={location.landmark}
                   bucketList={bucketList}
                   setBucketList={setBucketList}
                   reviews={location.comments}
                />`
           )


Now, when a user click on location link, the url displays the correct location id and the correct information is displayed on the screen. How cool is that?
HackerRank — Problem Solving — JavaScript — Diagonal Difference
Tags: javascript, programming, coding, problemsolving
Published: 2022-07-25 21:17:00


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

The Task is to find the absolute difference between the sums of the matrix's two diagonals as a single integer.

**Solution**

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

**Explanation**
**Step 01:** Take two variables named "diagonal1" and "diagonal2". Store initial value as zero(0).
**Step 02:** Iterate a for loop through the given array.
**Step 03:** While iterating the array we have to take the array matrix's row and column as index i to, then add the value to diagonal1.
**Step 04:** Reversing the second dimension of array to calculate secondary diagonal.
**Step 05:** Return absolute difference value.
#AzureIoT – RTSP Webcam, add rtsp camera 📷 capabilities to your Edge Device #JulyOT
Tags: englishpost, azureiot, azureiotedgemodule, codesample
Published: 2022-07-26 15:02:49

---
title: #AzureIoT – RTSP Webcam, add rtsp camera 📷 capabilities to your Edge Device #JulyOT
published: true
date: 2022-07-25 20:51:45 UTC
tags: EnglishPost,AzureIoT,AzureIoTEdgeModule,CodeSample
canonical_url: 
---

Hi !

Today, during my [[Let’s setup a Raspberry Pi and a reTerminal as an Azure IoT ☁ device](https://www.youtube.com/watch?v=9D9q5ix40gs&feature=emb_logo&ab_channel=MicrosoftReactor)] session, one of the questions was about what cool scenarios we can run once we have a Raspberry Pi as an Azure IoT Edge device.

Besides the use of Cognitive Services (only for x64), a cool and fast idea can be to convert your RPi to a RTSP Cam device. We only need to connect a USB WebCam to the Raspberry Pi.

Once the USB Camera is connected, we need to add the following Edge Module to the device configuration

![azure iot edge module RTSPWebcamonIoTEdge](https://brunocapuano.files.wordpress.com/2022/07/azure-iot-edge-module-rtspwebcamoniotedge.png?w=492)

More information: [RTSP Webcam](https://azuremarketplace.microsoft.com/en-us/marketplace/apps/1604376875527.wedx-iot-edge-rtspwebcam?tab=Overview)

The module runs as a IoT Edge container named RtspWebCam. While running the container image, one must map the USB camera on the host device to the container by using the following module createOptions parameters: PathOnHost=/dev/video0, PathInContainer=/dev/video0.

Once we add the module, we can see the module running in the device:

![module added to the device](https://brunocapuano.files.wordpress.com/2022/07/module-added-to-the-device.png?w=1024)

And, we will have access to a RTSP Camera. And we can run a sample python app to have the view from the camera.

![camera view from the RTSP Pi Demo](https://brunocapuano.files.wordpress.com/2022/07/camera-view-from-the-rtsp-pi-demo.jpg?w=322)

Sample Code

{% gist https://gist.github.com/elbruno/04d04fc2c2f76c6d1945709c53d9e685 %}

Happy coding!

Greetings

El Bruno

More posts in my blog [ElBruno.com](https://www.elbruno.com).

* * *
HIRING Sr. Software Engineers (Full Stack)
Tags: webdev, javascript, ruby, refactorit
Published: 2022-07-25 20:33:13

**Fluxx** is the industry-leading cloud-first grantmaking solution. Purpose-built by grantmakers for grantmaking!

I'm helping their team hire Full Stack Engineers to play a critical role in building high-quality, innovative, and performant software that aligns with industry standards and best practices.

This is a full-time exempt and remote position. Candidates must be located in the United States.


**What you bring to the team:**

- Demonstrable experience with Ruby on Rails and JavaScript
- An investigative curiosity and excitement about the challenge of finding root causes and solutions.
- Strong communication and collaboration skills
- Experience as a full stack engineer (frontend + backend)
- At least 4 years of experience building or supporting web apps (B2B apps preferred)

**Salary Range** : 165-185k (depending on experience) 


If you or anyone you know may be interested please email me at michelle@edencapitalcareers.com 

Thanks!