teleren/devto huggingface dataset:
react.dom.development.js:29345 Uncaught Error: createRoot(...): Target container is not a DOM element.
Tags: react, router, reactdom
Published: 2022-08-30 08:22:13

**App.js**```
import React, { Component } from 'react';
import {
  BrowserRouter as Router,
  Route,
} from 'react-router-dom';
import HomePage from './pages/HomePage';
import './App.css';

class App extends Component {
  render() {
    return (
      <Router>
        <div className="App">
          <Route path="/" component={HomePage} exact />
        </div>
      </Router>
    );
  }
}

export default App; 
```

**index.js**
import React from 'react';
import ReactDOM from 'react-dom/client';

import App from './App';





ReactDOM.createRoot(<App />, document.getElementById('root'));



**Home.js**

import React from 'react';

const HomePage = () => (
    <>
    <h1>Hello, welcome to my blog!</h1>
    <p>
        Welcome to my blog! Proin congue
        ligula id risus posuere, vel eleifend ex egestas. Sed in turpis leo. 
        Aliquam malesuada in massa tincidunt egestas. Nam consectetur varius turpis, 
        non porta arcu porttitor non. In tincidunt vulputate nulla quis egestas. Ut 
        eleifend ut ipsum non fringilla. Praesent imperdiet nulla nec est luctus, at 
        sodales purus euismod.
    </p>
    <p>
        Donec vel mauris lectus. Etiam nec lectus urna. Sed sodales ultrices dapibus. 
        Nam blandit tristique risus, eget accumsan nisl interdum eu. Aenean ac accumsan 
        nisi. Nunc vel pulvinar diam. Nam eleifend egestas viverra. Donec finibus lectus 
        sed lorem ultricies, eget ornare leo luctus. Morbi vehicula, nulla eu tempor 
        interdum, nibh elit congue tellus, ac vulputate urna lorem nec nisi. Morbi id 
        consequat quam. Vivamus accumsan dui in facilisis aliquet.,
    </p>
    <p>
        Etiam nec lectus urna. Sed sodales ultrices dapibus. 
        Nam blandit tristique risus, eget accumsan nisl interdum eu. Aenean ac accumsan 
        nisi. Nunc vel pulvinar diam. Nam eleifend egestas viverra. Donec finibus lectus 
        sed lorem ultricies, eget ornare leo luctus. Morbi vehicula, nulla eu tempor 
        interdum, nibh elit congue tellus, ac vulputate urna lorem nec nisi. Morbi id 
        consequat quam. Vivamus accumsan dui in facilisis aliquet.,
    </p>
    </>
);

export default HomePage;
Using your phone as a software development platform
Tags: programming, productivity, tutorial
Published: 2022-08-30 08:05:00

Creating iOS and Android apps is cool. However, _using your phone to create a web app_ is probably something you haven't seen before. With [Aista](https://aista.com) you can easily create apps _from_ your phone, because our product is a software system that creates apps, and we'll throw in hosting for you because we're nice guys. This literally allows you to use your phone as a software development platform.

One of the advantages of automatically generating apps, is that you no longer need _"fat client"_ complex apps to create apps. Visual Studio, VSCode, Rider IDE and PhpStorm becomes _"obsolete"_ for these types of apps. Creating an app with Aista implies selecting properties using checkboxes, select dropdown lists, and high level UI components - Implying it's equally easy to use your phone to create your apps, as using your desktop machine.

In the video below I am demonstrating how I'm using our [CRUD API generator](https://aista.com/crud-api-generator/) and our [CRUD datagrid generator](https://aista.com/crud-datagrid/) to literally create a full stack web application entirely from my phone.

{% embed https://www.youtube.com/watch?v=uNnEVbFdsbU %}

If I wanted to, I could also have designed my database from scratch, exclusively using my phone. However, to keep the video short (3 minutes), I downloaded one of the plugin databases from our internal _"AppStore"_. The process is fairly straightforward.

1. Sign up for Aista [here](https://aista.com)
2. Create a Magic backend cloudlet
3. Open your cloudlet
4. Download a plugin database, such as Chinook SQLite DB for instance
5. Generate a CRUD API wrapping your database
6. Generate a CRUD frontend wrapping your CRUD API
7. Go back to hub and deploy an Angular frontend wrapping your newly generated frontend

The whole process takes 5 minutes, and produces a fully functioning and working web app for you. The app is hosted in our infrastructure, implying it is load balanced, CDN served, DDOS protected, secured, have replicated RAID10 storage for files, and everything you'd typically need weeks to configure yourself. And if you wish, you're of course welcome to use your desktop machine to create the app too ... ;)

We provide one month free for new users signing up, allowing you to play with our services before deciding if you want to purchase. After one month your cloudlets will be automatically destroyed. We'll warn you on email before we destroy your app, to make sure you're given the opportunity to upgrade. If you want to try an app created like this, you can try [the sakila app](https://sakila.aista.com/) here. For the record, you don't need to know _anything_ about software development to reproduce the process. If you want to reproduce what I'm doing in the video, you can signup below.

* [Signup for Aista](https://aista.com/)
Most Common WordPress Errors
Tags: wordpresserrors, wordpress, guide
Published: 2022-08-30 08:00:54

## Introduction

The WordPress platform is excellent for building websites, but it can also be prone to errors. We all make mistakes. This is particularly accurate when discussing WordPress, where even the simplest of tasks can seem daunting for beginners. However, with a little knowledge and some useful advice, you avoid common WordPress errors that often trip people up.

In this blog post, we'll explore some of the most common WordPress errors and provide you with advice on how to fix them. As a result, continue reading to learn all there is to know about avoiding these pesky problems!

## 5 Most Common WordPress Errors

### Connection Time-Out error
If you're a WordPress user, you've likely experienced the 'Connection Time-Out' error. This frustrating message can appear for a variety of reasons, but often it's due to a plugin or theme that's not compatible with your version of WordPress.

### Error establishing Database Connection
The "[Error establishing a database connection](https://wpastra.com/guides-and-tutorials/error-establishing-a-database-connection/)" message may appear when trying to access your WordPress site, don't worry - you're not alone. This is a common problem that can be caused by a variety of issues.

### Syntax Error
Don't let a syntax error ruin your day. Making a mistake in your blog post's syntax can be costly. Few readers will stick around to figure out what you meant to say; they'll simply move on to another blog. 

Many beginners and WordPress enthusiasts find themselves struggling with this common mistake.

###Internal Server Error

We've all seen it. That dreaded "Internal Server Error" message that pops up when we're trying to access a website. While many people think that this error is caused by the website's host, the reality is that it's often due to something on our end.

### Unable to Upload Images
One of the common issues WordPress users face is not being able to upload images. This can be a frustrating issue for beginners and experienced users alike. A quick search of the web will reveal that many people are struggling with this issue.

## Conclusion

Although WordPress is an excellent platform but it can have its glitches. By knowing about and avoiding the most common errors, you can keep your website running smoothly. If you do encounter an issue, there are plenty of resources available to help you troubleshoot and fix it. So don’t be afraid to experiment with WordPress – just make sure to backup your site before making changes! Have you ever encountered a problem while using WordPress? How did you solve it? Let us know in the comments below.
Building GraphQL Servers in 2022
Tags: graphql, conference, yoga
Published: 2022-08-30 08:00:21

> This article was published on Tuesday, June 28, 2022 by [Jamie Barton](https://graphql.wtf) @ [The Guild Blog](https://the-guild.dev/)

Building GraphQL servers in 2022 couldn't be any easier thanks to GraphQL Yoga. This year at
[HasuraCon](https://hasura.io/events/hasura-con-2022/building-graphql-servers-in-2022-overview-of-the-bestnew-tools-you-should-add-to-your-toolbelt)
I discussed how Yoga started, how it evolved, and what we can expect from the future.

For many years of building GraphQL servers in the Node ecosystem, our choices have been limited.
Apollo Server library has dominated the ecosystem. With its pairing client library, it was often a
good fit for a very long time. However, I believe there are more mature and battle-tested solutions
available today, thanks to the evolution of Yoga.

[GraphQL Yoga](https://graphql-yoga.com) takes a different approach by providing enough bells and
whistles that make you production-ready, but builds itself on top of the core primitives of HTTP.
Yoga is runtime agnostic too, so if you're currently working with Cloudflare Workers, Vercel
Functions, AWS Lambda or something else, Yoga will fit right in.

GraphQL Yoga comes with [Envelop](https://envelop.dev), and is the recommended way you should be
using Envelop today to extend your GraphQL server.

<Video src="https://youtube.com/embed/XnmB1-2i8mI" title="Build a Modern GraphQL Server using GraphQL Yoga and the Modern JS Ecosystem Tools" />

If you haven't used Yoga before, this is how easy it is to create a production-ready GraphQL server:

```ts
import { createServer } from '@graphql-yoga/node'

const server = createServer({
  schema: {
    typeDefs: /* GraphQL */ `
      type Query {
        hello: String
      }
    `,
    resolvers: {
      Query: {
        hello: () => 'Hello from Yoga!'
      }
    }
  }
})

server.start()
```

If you are interested in following along with me to build a server, add plugins and more, you can
watch the recording of the workshop:

<Video src="https://youtube.com/embed/zS-1SizRPnU" title="Building GraphQL Servers in 2022 - Overview of the Best New Tools You Should Add to Your Toolbelt" />

Hopefully you find this talk interesting, and you learn more about building GraphQL severs with
Yoga!
[Free & open-source] Beautiful tailwindcss components 👇
Tags: tailwindcss, css, webdev
Published: 2022-08-30 07:45:14

There are thousands of tailwind design components, but not all are good.

Here are 7 beautiful 🤩 free & Open source tailwindcss components 👇

## 1.Flowbite:

➡️ Almost all components as bootstrap
➡️ Inbuilt Light/Dark mode
➡️ Figma designs
➡️ Integrates well with Vue, React, Laravel, Svelte, Django & more
➡️ Pro version for complex components

🔗 flowbite.com

![Flowbite](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/guyz387x1pg0dwe8f2ss.jpg)

## 2. Daisyui
➡️ Most popular tailwind component 
➡️ 11K stars on github
➡️ Beautifully designed
➡️ Comes with theming options like Light, Dark, Cupcake, and 10 more 💅

🔗 daisyui.com

![Daisyui](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/34ftze5oocf71pd7zol7.jpg)

## 3. Kometa UI:
➡️ 130 sections
➡️ Available for HTML, VueJS, and React
➡️ Beautifully designed


![Kometa UI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mxr49zs7hy880d2fk0ua.jpg)

🔗 https://kitwind.io/products/kometa/

## 4. Tailwind Components:
➡️ Collection of components by community
➡️ 1000's free components
➡️ Not only components but also pages like about us, contact us, coming soon available

🔗 tailwindcomponents.com

![Tailwind Components](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ktkvbsznpjv4k4faptot.jpg)

## 5. Mambaui:
➡️ Beautiful components
➡️ 140 components in 37 categories
➡️ Minimal design

🔗 mambaui.com

![Mambaui](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/szz2hgqqtksgy0uxx6q9.jpg)

## 6. Tailwind Toolbox:
➡️ Collection of components from the community
➡️ Get Templates, Components, Kits, Plugins & More.
➡️ Optional premium marketplace

🔗  http://tailwindtoolbox.com

![Tailwind Toolbox](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ljnjxq169peyjyu91gmr.jpg)

## 7. HyperUI:

HyperUI is a collection of free Tailwind CSS components that can be used in your project. With a range of components, you can build your next marketing website, admin dashboard, ecommerce store and much more.

🔗  http://hyperui.dev

[![HyperUI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rh7iqfd05iqm1uhnusov.jpg)](https://www.hyperui.dev/)

## 8. Web3 Templates:
➡️ A growing library of pre-built, fully responsive & customizable HTML & React UI components built with Tailwind CSS.

🔗  https://web3templates.com/components

***

**Do you know any more good tailwind components? Feel free to reply below.**

***

Let's be friends 🤝

Connect me on [Twitter ](https://twitter.com/HeyNikhila)and [LinkedIn](https://www.linkedin.com/in/nikhil-agrawal-21b31833/)

***

Please like & reshare if you find this post useful
Publishing a Chrome browser extension
Tags: javascript, webdev, beginners, html
Published: 2022-08-30 07:41:48

Now that we created the [TurboReader browser extension](https://daily-dev-tips.com/posts/creating-the-turboreader-browser-extension/), I wanted to see what's involved in actually getting it in the stores.

I decided to only ship it to the Chrome store for now. In future articles, I might go into the other stores as well.

## Submitting a browser extension to the Chrome store

The first step is to navigate to the Chrome web store developer portal. This is where you'll manage your extensions.

[Visit the Chrome Web Store portal](https://chrome.google.com/webstore/devconsole)

If you don't have an account, you'll be asked to create one here. You'll need to pay the 5$ (one-time) registration fee.

![Chrome Web Store portal](https://cdn.hashnode.com/res/hashnode/image/upload/v1661004404764/n42vP7v1r.png)

Once logged in and registered for the portal, you'll be asked to complete your profile. This could entail several questions. The portal gives excellent feedback on what you might be missing.

After that, you'll be able to add a new item. Click on the items tab in the left sidebar and click on a new item.

![Add new item](https://cdn.hashnode.com/res/hashnode/image/upload/v1661004571047/_MzdOFAfI.png)

You'll see a popup where you need to submit a zip file of your project. Go ahead and zip your whole extension directory.
The portal will now verify your zip and ensure the manifest is alright.

Once done, you'll enter the detail item view, and you'll have to fill out some required fields:

- Description: describe what your extension does
- Category: pick one that matches
- Language: the primary language of your extension
- Store icon: a 128x128 pixel version of your icon
- Screenshot: minimum of one screenshot in 1280x800 or 640x400 pixels

Then on the Privacy tab, you'll have another set of required fields:

- Single purpose: Shorter description
- Permissions: You need to describe why your extension needs specific permissions
- Data usage: Describe if your app uses any of the data of end-users

If unsure which field you might be missing, click on the "Why can't I submit" link at the top. This will tell you what's missing.

![Submission error button](https://cdn.hashnode.com/res/hashnode/image/upload/v1661004852463/XUXAStlCY.png)

Once you have all fields, click the "Submit for review" button on the top.

It will notify you that the submission is on its way.

Do note it can take quite some time, especially if this is your first submission.
The Chrome team might also reject your app, listen carefully to their response and adjust accordingly.

And that's it. You now have your first extension in the Chrome store.

[Checkout TurboReader in the Chrome store](https://chrome.google.com/webstore/detail/turboreader/gigchaacekpdooihhlbikhinmgpiedfb).

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
What Is The Ideal Solution To Start A GameFi Project?
Tags: gamefi, blockchain, business, entrepreneur
Published: 2022-08-30 07:30:00

In today’s generation many gaming freaks and gaming enthusiast are there in and around the city. As a result of this many gaming platforms are arisen and launched with the support of skilled developers. 

One of the evident games evolving in the gaming space is “GameFi”.  As of now many GameFi projects have continued to rise steadily and the number hits 1551 games. The name GameFi is a combo of “Game” and “finance”. 

GameFi offers players an opportunity to own digital assets in the virtual world. Creating GameFi Project is now a billion dollar business for the entrepreneurs.


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

**Are you seeking a perfect solution to build a Blockchain Aggregator and Launchpad like GameFi?**
Then you've come to the right place. Developcoins offers the best **[GameFi Clone Script](https://www.developcoins.com/gamefi-clone-script)**, a ready-to-use solution that enables entrepreneurs to easily create their own blockchain aggregator and launchpad like GameFi.

## How Start GameFi?

1. It's a fully customizable and scalable platform that allows you to build a full quickly-featured platform that beats the competition.
2. The script's performance and scalability have been enhanced.
3. The user interface is simple and eye-catching.
4. When compared to building a platform from the ground up, it is less expensive.

## Features Of GameFi Clone

1. Launchpad
2. Aggregator
3. Global Market
4. Yield Guilds
5. Mini-Games
6. Auction House

**Consult with experts!**
Whatsapp/Phone - +91 9500766617
Skype - live:Tech Innovate
Jupyter notebook & environnement virtuel
Tags: python, jupyter
Published: 2022-08-30 07:02:00

👋 Pour tous mes projets python, je travaille avec un environnement virtuel. C'est assez simple à mettre en place:

```
>> mkdir my_project
>> cd my_project
>> python3 -m venv venv
>> source venv/bin/activate
(venv) >>  pip install pandas
```

Une fois `venv` activé 👌, toutes les commandes pip installeront les lib dans cet env. 

Si on travaille parfois avec `Jupyter Notebook` on veut pouvoir utiliser notre environnement virtuel. Il suffit 🤷‍♂️ de faire:

```
(venv) >> pip install ipykernel
(venv) >> ipython kernel install --user --name=myproject
(venv) >> jupyter lab
```

Lorsqu'on ouvrira un prochain notebook, on peut choisir le nouvel environnement créé et renommé ici `my_project`


![venv dans jupyter](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vzgcr4wqwaoztij1iy9x.jpg)

---

> une commande que j'oublie souvent pour générer le fichier de config de jupyter
`jupyter notebook --generate-config`

⛵️
Issues with :hover, visibility and clicks in Cypress
Tags: javascript, cypress, testing
Published: 2022-08-30 06:56:22

I had some issues with my tests this morning and ever since I've started to use Cypress i have had various issues with hover states and clicks.

- Sometimes it works to just use `click({force: true})`
- Sometimes it works to use `.trigger("show")`
- And sometimes none of these works.

I'm not 100% sure why it works or doesn't work but in this case i think it had to do with me using "visibility" instead of "display" in my CSS and that i had a transition that had some delay on showing the element that i wanted to click.

I have used this great [cypress-real-events](https://github.com/dmtrKovalenko/cypress-real-events) package before and it seems to have helped this time as well. This library adds a "realHover()" event that works with CSS.

What finally worked for me in this case was this.

```javascript
      it("should work to report spam", function () {
        cy.visit("/software/arch-linux/about/");

        cy.intercept(
          {
            url: "https://hooks.slack.com/services/**",
          },
          { test: "hej" }
        ).as("post-to-slack");

        cy.on("window:confirm", () => true);

        cy.findByTestId("app-comment-89111")
          .realHover() // Seems i need this
          .within(() => {
            cy.findByTestId("report-spam")
              .realHover() // AND this, not sure why.
              .should("have.css", "visibility", "visible") // without this my transitions seems to mess and caused flakyness to the test.
              .click();
          });

        cy.wait("@post-to-slack");
      });
    });
```

As usual with my post these are mainly notes to myself, this blog post really help me this time so if you want more [details go here](https://filiphric.com/hover-in-cypress).
Duplicate Zeros - I
Tags: javascript, leetcode
Published: 2022-08-30 06:45:48

```
const duplicateZeros = function (arr) {
    const newArray = [];
  for (let i = 0; i < arr.length; i++) {
    if (arr[i] == 0) {
      newArray.push(0);
      newArray.push(0);
    } else {
      newArray.push(arr[i]);
    }      
  } 
    for (let i = 0; i < arr.length; i++) {
        arr[i] = newArray[i]
    }
  return newArray;
};

```
When Should you Use a Headless CMS?
Tags: headlesscms, cms, coredna
Published: 2022-08-30 06:38:16

**Your website or app uses a JavaScript framework (React, VueJS, etc.)**
JAMSTACK's growing popularity has accelerated the adoption of headless CMS, letting developers best choose how content is provided.

**You need to design dynamic, personalized digital experiences**
A headless CMS serves as the underlying repository for structuring content flows in order to deliver tailored, integrated experiences. This is especially beneficial for eCommerce businesses.

**You have a Jekyll, Gatsby, or another static site-generated website**
Headless CMS simplifies the management of a static website. It isolates content from presentation and delivers all of your content via content APIs.

**You have a native app (iOS, Android, Windows Phone)**
You can distribute content from a headless CMS to all your websites and applications for a once-and-done distribution. Content providers have a web-based dashboard to generate content for iOS and Android apps. This assures message consistency and device-agnostic reach.

**You want to add a CMS to your eCommerce stack (Shopify, BigCommerce, Commercetools, Hybris, Magento2, etc.)**
A headless CMS is great for eCommerce retailers that wish to future-proof themselves. It also helps teams design and deliver consumer experiences and update marketing campaigns quickly.

**You Need Robust Content Management**
As stated throughout this article, a headless CMS provides robust abilities to create, manage, and recycle content across different devices and different contexts.

Why should you NOT use a Headless CMS? Find out in our original article below!

[Original Cora dna article can be found here.](https://bit.ly/3TqzQX9)