teleren/devto huggingface dataset:
Fix npx create-react-app stuck or hangs when installing or react dependencies getting stuck during npm install
Tags: react, npm, webdev, codenewbie
Published: 2021-08-08 18:43:45

I have encountered this scenario a few times during installation of create-react-app or when installing react dependencies. There are various solution for this kind of problem. I am listing all of them below in three different stages, try them out accordingly : - 

1. **First Stage**
 - npm config set registry http://registry.npmjs.org/ --global
 - npm cache clear --force
 - Delete your package-lock.json file(it will automatically get created after npm i).
 - Now try for npm install

2. **Second Stage**
 - In your project directory type
 - npm init
 - npm update
 - Restart your IDE
 - Try installing dependency again

3. **Third Stage**
 - Unistall node and npm
 - Reinstall node again

These solutions worked for me, and I hope it works for you as well!.
Weekly Check-In #5: Eighth Week
Tags: python, opensource, weeklyretro, gsoc
Published: 2021-08-08 18:27:49

Hi everyone! this is the 5th weekly check-in in my GSoC internship journey, if you want to know more about it, please check out the previous.

## What did you do this week?
In the 8th week of my internship was working in update the templates files of the project, these files are using when the project is building with Runestone, these changed were proposed before the weekly meeting with my mentors since we had problems when one of my team split the lessons and the core's team of Runestone told her that would be a problem in the templates, so the solution was updated them.

## What is coming up next?
The change on the templates files wasn't in my weekly plan, but I know that we would be having issues in the road as with any project...

<img src="https://media.giphy.com/media/4Hx5nJBfi8FzFWxztb/giphy.gif" alt="Houston we have a problem meme"/>

For that reason, in the next week I was going to work (I already did it, check-out the next post 😜) in modify the graphic user interface lesson to add more context information according to the mentor's review.


## Did you get stuck anywhere?
Yes indeed, I had issues when I was updating the files, and I could solve it, replacing all content in the ``_template`` folder of the Runestone project with the new ones. 

So, Houston  we did it!

<img src="https://media.giphy.com/media/UoqaD6XktrRMdAn5p4/giphy.gif" />
Browsers
Tags: browsers, blogging, indieweb, blogs
Published: 2021-08-10 16:57:58

---
title: Browsers
published: true
date: 2021-08-08 18:21:19 UTC
tags: browsers,blogging,indieweb,blogs
canonical_url: https://adactio.com/journal/18343
---

[I mentioned recently](https://adactio.com/journal/18292) that there might be quite a difference in tone between [my links](https://adactio.com/links) and [my journal](https://adactio.com/journal) here on [my website](https://adactio.com/):

> ’Sfunny, when I look back at older [journal](https://adactio.com/journal) entries they’re often written out of frustration, usually when something in the dev world is bugging me. But when I look back at all the [links](https://adactio.com/links) I’ve bookmarked the vibe is much more enthusiastic, like I’m excitedly pointing at something and saying “Check this out!” I feel like sentiment analyses of those two sections of my site would yield two different results.

My journal entries have been even more specifically negative of late. I’ve been bitchin’ and moanin’ about web browsers. But at least I’m an equal-opportunities bitcher and moaner.

- **Mozilla** , I complained about your [Facebook Container extension for Firefox](https://adactio.com/journal/18328).
- **Apple** , I complained about [the ridiculous way Safari’s update cycle is tied to operating system](https://adactio.com/journal/18335).
- **Google** , I complained about the way [a breaking change was rolled out in Chrome](https://adactio.com/journal/18337) (and the implications for future breaking changes).
- **Microsoft** , you got off lightly. But please consider any of my criticisms of Chrome to apply to Edge too, seeing as they’re basically the same now.

I wish my journal weren’t so negative, but my mithering behaviour has been been encouraged. On more than one occasion, someone I know at a browser company has taken me aside to let me know that I should blog about any complaints I might have with their browser. It sounds counterintuitive, I know. But these blog posts can give engineers some ammunition to get those issues prioritised and fixed.

So my message to you is this: if there’s something about a web browser that you’re not happy with (or, indeed, if there’s something you’re really happy with), take the time to write it down and publish it.

Publish it on your website. You could post your gripes on Twitter but whinging on Jack’s website is just pissing in the wind. And I suspect you also might put a bit more thought into a blog post on your own site.

I know it’s a cliché to say that browser makers want to hear from developers—and I’m often cynical about it myself—but they really do want to know what we think. Share your thoughts. I’ll probably end up linking to what you write.
What is Structured Data for Advanced SEO?
Tags: seo, watercooler
Published: 2021-08-08 18:07:21

Have you ever searched for some product online and get a result like this from the google? Do you also want your search results to come up with all this information? This can all be achieved using Structured Data.

![Screenshot-2021-07-16-at-4.21.40-PM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4ln4omhz516ip1tl0xgo.png)

Structured data is, giving important information about your website to help search engines show your results at the top with all the important information you want to convey to your customers. This might include the price of your product, discounts, reviews, ratings, etc.

>  You can help us by providing explicit clues about the meaning of a page to Google by including structured data on the page. Structured data is a standardised format for providing information about a page and classifying the page content; for example, on a recipe page, what are the ingredients, the cooking time and temperature, the calories, and so on.

- Google


Here is an example of structured data for a product from our platform https://prototion.com/

``` 
<script type="application/ld+json">{
  "@context": "https://schema.org/",
  "@type": "Product",
  "name": "Notion Library Template",
  "author" : {
    "@type" : "Person",
    "name" : "Patrick"
  },
  "image": "https://someimageur.png",
  "description": "Use this template to plan all your content in one place, including the channel it is posted on, the type of content it is (photo, video)",
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "5",
    "reviewCount": 38,
    "bestRating": "5",
    "worstRating": "5"
  }
}</script>

```
JSON-LD is a format  to create a unified structured data vocabulary for the web. If you want to read more about JSON-LD, then read this https://json-ld.org/. But I want to focus here on how you can use it in your projects to use SEO for maximum traction.

Let us now break down what is happening in this script tag. First, we define the format for content and type. The type may be product, blog, etc. Then we are provided with more information such as name, image, etc. Then we move to provide ratings.  We can also provide additional information depending upon the use case. Here is an amazing tool to generate all sorts of json-ld for free. [JSONLD](https://jsonld.com/).

When all set and done, this is the end result. You can test your json-ld before going live using this tool provided by google.

![Screenshot-2021-07-16-at-4.55.43-PM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wd2mt21l9bwxq8aa4d49.png)

That's it folks. I hope you will now implement the structure data in your projects and make it to the top in the SEO game.

[@relativelyrehan](https://twitter.com/relativelyrehan)
4 Unique and Useful Ways of Visualizing Data in Python
Tags: python, datascience, machinelearning, programming
Published: 2021-08-08 17:12:57

**Today, i'll be showing you 4 interesting and unique ways of visualizing data in python, as well as when you should use each one...**

*************
Let's start with the **[3D plot](https://www.python-graph-gallery.com/3d/)**:
![3D plot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0y9rc3ejyvudekbzhcwp.png) 
 
**Use cases**:
_Visualizing data in 3 dimensions_
_Comparing data points in 3 dimensions_

The 3D plot does a great job at visualizing data points in 3 dimensions, you can also rotate and tilt such a 3D graph to look at it from different points of view.

************
Next up, the **[Word cloud](https://www.python-graph-gallery.com/wordcloud/)**:
![word cloud](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/20azzmuj7ikoky2mq7s2.png)
**Use cases**:
_Visualizing data in the form of words and sentences_
_Sentiment analysis_

This will be useful for visualizing things like today's news headlines, tweets or twitter bios. A good example is [this tutorial](https://dev.to/code_jedi/create-a-wordcloud-of-news-headlines-in-python-5549) explaining how to create a word cloud of news headlines in python.

************
Now for The **[Sankey diagram](https://www.python-graph-gallery.com/sankey-diagram/)**:
![Sankey diagram](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9unb3ucp5aqp4oqendji.png)
**Use cases**:
_Visualizing data flows and how different pieces of data distribute, and contribute to each other_

This one is my personal favorite since this provides a simple and effective way of visualizing everyday things like: monthly expenses, finance management, resource management and more...

************
Last but not least, the **[Radar chart](https://www.python-graph-gallery.com/radar-chart/)**:
![Radar chart](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ma13h84qc6b1n9rgn3nt.png)
**Use cases**:
_Visualizing characteristics and data based on data points in multiple dimensions_

This one is a little hard to understand from the beginning, but once you get the hang of it, you'll see that it's very useful for visualizing and comparing data in multiple dimensions.

************
**That's it for this compilation...**

***********
Byeeeee👋
Quick Notes Based On "Numbers, Strings, and Booleans" Section of Frontend Masters' "Complete Intro to Web Development, v2"
Tags: javascript, fundamentals, templateliterals, frontendmasters
Published: 2021-08-08 17:09:32

What I did (in code):

&nbsp;&nbsp;&nbsp; `const myFirstName = 'Ben'`
&nbsp;&nbsp;&nbsp; `const myLastName = 'Boorstein'`

&nbsp;&nbsp;&nbsp; `const sentenceOldWay = 'Hi, ' + myFirstName + ' ' + myLastName + ', ' + 'how are you?'`
&nbsp;&nbsp;&nbsp; `` const sentenceNewWay = `Hi, ${myFirstName} ${myLastName}, how are you?` ``

&nbsp;&nbsp;&nbsp; `console.log(sentenceOldWay)`
&nbsp;&nbsp;&nbsp; `console.log(sentenceNewWay)`

&nbsp;&nbsp;&nbsp; Logs: `Hi, Ben Boorstein, how are you?`
&nbsp;&nbsp;&nbsp; Logs: `Hi, Ben Boorstein, how are you?`

What I did (in English):
- I declared a `const` variable called `myFirstName` and stored in it (i.e., assigned to it) `'Ben'` (a string).
- I declared a `const` variable called `myLastName` and stored in it (i.e., assigned to it) `'Boorstein'` (a string).
- I declared a `const` variable called `sentenceOldWay` and stored in it a string that combined the above variable strings and new strings, and I did this the old way, i.e., using string concatenation.
- I declared a `const` variable called `sentenceNewWay` and stored in it a string that combined the above variable strings and new strings, and I did this the new way, i.e., using template literals (aka template strings).
- I logged both `sentenceOldWay` and `sentenceNewWay` to the console.

What I practiced:
- Same as above.

What I learned:
- From the above code, I didn't learn anything new.
- From other parts of this section of instruction, I didn't learn anything new, because I already knew it. But I was reminded that in JS what we would, in regular English, call integers and decimal numbers are both just considered Numbers, and that in JS decimal numbers are called 'floats'.

What I still might not understand:
- Nothing for this section.
Quick Notes Based On "Programming Fundamentals" Section of Frontend Masters' "Complete Intro to Web Development, v2"
Tags: javascript, fundamentals, frontendmasters
Published: 2021-08-08 16:51:07

What I did (in code):

&nbsp;&nbsp;&nbsp; `const monthlyRent = 500`

&nbsp;&nbsp;&nbsp; `const yearlyRent = monthlyRent * 12`
&nbsp;&nbsp;&nbsp; `console.log(yearlyRent)`

&nbsp;&nbsp;&nbsp; Logs: `6000`

What I did (in English):
- I declared a `const` variable called `monthlyRent` and stored in it (i.e., gave it the value of) `500`.
- I declared a `const` variable called `yearlyRent` and stored in it (i.e., gave it the value of) `monthlyRent * 12`.
- I logged to the console `yearlyRent`.

What I practiced:
- Same as above.

What I learned:
- From the above code, I didn't learn anything new.
- From other parts of this section of instruction, I learned that...

...the goal is to make our code self-describing, meaning it reads like it executes, and that we're writing code mainly so that we can maintain it in the future

...when we use the console to experiment, we're using it as a "repl" and that "repl" stands for "read-evaluate-print-loop"

...JS is called a "single-threaded" language because it can only do one thing at a time, whereas languages like Java can run things concurrently

What I still might not understand:
- Nothing for this section.
ANNONCE - Helloapi exemple composant Joomla! 4 webservices
Tags: blog
Published: 2022-11-12 17:49:34

---
title: ANNONCE - Helloapi exemple composant Joomla! 4 webservices
published: true
date: 2021-08-08 16:02:11 UTC
tags: Blog
canonical_url: https://alexandre-elise.fr/blog-developpeur-joomla/helloapi-joomla4-composant-webservices
---

![](https://alexandre-elise.fr/images/behzad-ghaffarian-hello-unsplash_7dc86.jpg)

Exemple de composant Joomla! 4 de base qui intègre les webservices de Joomla! 4.

Fonctionne avec curl, Guzzle, Postman et autres clients Http.

[Télécharger composant Helloapi](https://github.com/alexandreelise/com_helloapi/archive/refs/tags/v0.1.0.zip "Télécharger composant Joomla! 4 Helloapi") | [Télécharger plugin webservices Helloapi](https://github.com/alexandreelise/plg_webservices_helloapi/archive/refs/tags/v0.1.0.zip "Télécharger plugin webservices Joomla! 4 Helloapi")

[Voir code source composant Helloapi](https://github.com/alexandreelise/com_helloapi "Voir code source composant Joomla! 4 Helloapi") | [Voir code source plugin webservices Helloapi](https://github.com/alexandreelise/plg_webservices_helloapi "Voir code source plugin webservices Joomla! 4 Helloapi")
Tell a story about those pictures
Tags: infrastructure, hack, fun, devops
Published: 2021-08-08 16:01:18

Look at those pictures and tell us what they make you think of. Oh come on, make an effort, tell us something fun… I am sure it could remind you something, let's say, *amazing*.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q7cre9rpn1y80mb1hin3.jpeg)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gashg066fokdcn63uqss.jpeg)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dnz7hywza7y4xbq8hy4s.jpeg)
How to count the number of documents in a MongoDB collection or query
Tags: mongodb
Published: 2021-08-08 16:12:15

---
title: How to count the number of documents in a MongoDB collection or query
published: true
date: 2021-08-08 16:00:15 UTC
tags: MongoDB
canonical_url: https://donaldfeury.xyz/how-to-count-the-number-of-documents-in-a-mongodb-collection-or-query/
series: "Small Bytes of MongoDB"
---

For a full overview of MongoDB and all my posts on it, check out my [overview](https://donaldfeury.xyz/introduction-to-mongodb/).

MongoDB has a few ready-made aggregations available as methods and one of those is `count`. It can be used to determine how many documents are in a collection or returned from a query.

Given this data set in a collection called `cats`:

```
{
	"name": "Mocha",
	"age": 3,
	"breed": "Domestic Longhair",
	"furPattern": "Turtoiseshell"
},
{
	"name": "Latte",
	"age": 3,
	"breed": "Maine Coon",
	"furPattern": "Turtoiseshell"
},
{
	"name": "Trouble",
	"age": 12,
	"breed": "Domestic Shorthair",
	"furPattern": "Black"
}

```

To get the count of [all the documents](https://donaldfeury.xyz/get-all-the-documents-out-of-a-collection-in-mongodb/) in the `cats` collection:

```
db.cats.count()

```

To get the count of the number of documents [returned from a query](https://donaldfeury.xyz/how-to-retrieve-specific-documents-from-mongodb-using-filters/):

```
db.cats.find({age: 3}).count()

```

You can also pass a query directly into the count method instead of chaining off of `find`:

```
db.cats.count({age: 3})

```
I do dotfiles!
Tags: showdev, zsh, git, vim
Published: 2021-08-08 15:54:45

Just a quick post to let you know about my [dotfiles](https://github.com/siddshy/dotfiles) repository. It contains my Vim, Zsh, tmux, and git config, and it's mostly geared at Typescript/Angular/Node.js development. Feel free to check it out!
Dark mode, light mode or minimised? Just make sure they help with the vitals.
Tags: css, webpack, seo
Published: 2021-08-08 15:51:09

This is my fourth weekly post since July, a bit of a slow week here and I thought why not have only three items instead of five this time, but expand on them ever so slightly more. It's still a short one with more breadth than depth, with a tiny rebalancing. Without further ado, let's dive shallowly into CSS, Webpack, and Core Web Vitals.

- **CSS**: use `prefers-color-scheme` in your media queries to automatically have your page switch between `dark` mode and `light` mode for users according to their system settings. Note that `light` can also mean a user has no preference.
- **Webpack**: `optimization.minimize` is set to `true` by default, which might lead you to think that *TerserWebpackPlugin* will be used with its default options (with `extractComments` set to `true`) when `optimization.minimizer` is not specified. However, comments with `@license`, `@preserve`, and `/*!` will not be extracted to separate files by default.
- **Core Web Vitals**: Google Search has started to take page experience signals into consideration, thus the current *Core Web Vitals* metrics will affect the ranking of a page, they are: *Largest Content Paint (LCP)* for loading performance, *First Input Delay (FID)* for interactivity, and *Cumulative Layout Shift (CLS)* for visual stability.

Thank you for reading and do let me know your thoughts about this post. If you want more content like this to be delivered to you, consider subscribing via Substack: [smallpotatodev.substack.com](https://smallpotatodev.substack.com/)

### Related Links

- MDN documentation on prefers-color-scheme: [developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme)
- Webpack author's comment on GitHub: [github.com/webpack/webpack/issues/324](https://github.com/webpack/webpack/issues/324#issuecomment-157855568)
- TerserWebpackPlugin on GitHub: [github.com/webpack-contrib/terser-webpack-plugin](https://github.com/webpack-contrib/terser-webpack-plugin/tree/96a051d72c239f4cf812529cb985a1f804790219#extractcomments)
- Google Search Central Blog on page experience update: [developers.google.com/search/blog/2021/04/more-details-page-experience](https://developers.google.com/search/blog/2021/04/more-details-page-experience)
Using Bootstrap in NextJS (No packages needed!)
Published: 2023-04-23 11:21:20

---
title: Using Bootstrap in NextJS (No packages needed!)
published: true
date: 2021-08-08 15:44:26 UTC
tags: 
canonical_url: https://chrisdevcode.hashnode.dev/using-bootstrap-in-nextjs-no-packages-needed
---

Usually, you'll need to install third-party packages like [react-bootstrap](https://react-bootstrap.github.io/) or [reactstrap](https://reactstrap.github.io/) for you to fully get the benefits of [Bootstrap components](https://getbootstrap.com/docs/5.1/components/accordion/).

The updated [NextJS](https://nextjs.org/docs) version has made it possible to use Bootstrap with react without necessarily installing 3rd party packages, which would rather make your app heavy and slow. Here is how to do it:

First of all, you'll need to be using NextJS version 11.

[https://nextjs.org/conf](https://nextjs.org/conf)

To enjoy all that bootstrap has to offer, you have to use both CSS and JS files from both. On bootstrap's home page, there are the CDN links to bootstrap CSS and JS files.

NextJS has the **Head** and **Script** components that let us use the CDN directly without any configuration.

[https://nextjs.org/docs/api-reference/next/head](https://nextjs.org/docs/api-reference/next/head)

[https://nextjs.org/docs/basic-features/script](https://nextjs.org/docs/basic-features/script)

On your layout file or page file, import the two components from NextJS;

```
import Script from 'next/script'
import Head from 'next/head'

```

At the top, we'll use `Head` to get the bootstrap styles;

```
import Head from 'next/head'

const index = () => {
  return (
   <Head>
      <link
        rel='stylesheet'
        href='https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css'
        referrerPolicy='no-referrer'
      />
    </Head>
  )
}

export default index

```

Note that you can use the `<link>` inside the `<Head></Head>` component in Next, and just like that you'd have brought in bootstrap CSS into your project.

Most of the features need to have Bootstrap's javascript to actually work, to do that we'll use the `<Script>` at the bottom of the file:

```
import Head from 'next/head'
import Script from 'next/script'

const index = () => {
  return (
   <Head>
      <link
        rel='stylesheet'
        href='https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css'
        referrerPolicy='no-referrer'
      />
    </Head>

   // page content
   // some code goes here

<Script
        src='https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js'
        strategy='afterInteractive'
/>
  )
}

export default index

```

The Script component takes in the CDN link as the prop to `src`.

With that included, you can comfortably use Bootstrap classes on your page and get responsive and desired results.

Get the sample code used here:

[https://gist.github.com/achingachris/d63873c468f47f1f130b35f961f6b54a](https://gist.github.com/achingachris/d63873c468f47f1f130b35f961f6b54a)