teleren/devto huggingface dataset:
Concatenate multiple React components
Tags: javascript, react
Published: 2023-06-27 14:49:12

I was working on a custom CheckBox component that displays a label and an error message. The requirement was that the error message should only appear when the input value becomes dirty and is not as expected. Initially, the code looked like this:

```tsx
<CheckBox
  name="confirm"
  control={control}
  label={
    <>
      I confirm that I have followed the <Link href="#procedure"> procedure</Link>
	    <FormInputError id="confirm">
	      Please ensure you have followed the safeguarding procedure before creating this note
	    </FormInputError>
	    </>
  }
  isRequired
/>
```

However, I needed to separate the regular label from the error message to show the message only when necessary. Specifically, I wanted the error message to appear only after the user clicks on the CheckBox, and then  clicks again to untick it.

To achieve this, I had to append `<FormInputError />` component to the existing label. While strings can be easily appended with `+` , it’s not as straightforward with React components. 

I discovered that by using an array `[]` I could achieve the desired result. Here’s an example of how it can be done.

```tsx
const getLabel = () => {
  if (fieldState.isDirty && !field.value) {
    return [label, errorLabel || <></>];
  }

  return [label];
};

return (
  <div className="form-input">
    <CheckboxComp
      disabled={isDisabled}
      key={field.name}
      styleVariation="default"
      label={getLabel()}
      htmlName="confirm-box"
      value="confirm"
      className="confirm-box"
      checked={field.value}
      {...field}
    />
  </div>
);
```

These changes allow the error message to be displayed only when necessary, based on the user’s interaction with the CheckBox. 

Please let me know if you have any further questions.
Crossing the chasm with Copilot
Tags: githubcopilot, ai, tooling, programming
Published: 2023-06-27 14:41:17

I've observed a lot of folks (including me) struggle in our initial attempts to get copilot write the code we want. The common entry barrier in such cases, is **_"prompting"_**. 

With all the attention prompt engineering is getting in recent times, developers tend to think, 

> "How do I come up with the most effective prompt, that'd make copilot write the code that I have in mind?" 

As it turns out, arriving at the right prompt, in itself, is an iterative process. So, you're ~~never going to get the prompt right in first place~~ always going to take a few attempts before copilot spits out the code you expected.

I think, we should simply take all this fuzz about prompt engineering (for copilot) out of our heads and just keep coding. Copilot _will_ tag along with you. You don't have to think about the prompt that you'd need to write. Just focus on what you need to build.

I've found working with copilot in this mode more useful than prompting it to generate code, for two reasons:

1) When you prompt, copilot may generate a code that may not necessarily fit into your style of coding. Every developer has their own style of coding and it is as unique as their signature.
2) When you prompt, it takes [significant amount of time](https://arxiv.org/pdf/2210.14306.pdf) in reviewing the code, since you are not yet in the coding mode. This is a subtle difference and takes a hit on developer experience. 

Without prompting, It just feels like working with an invisible pair. Just that the pair often hogs the keyboard and completes the code before you could :) . It definitely made me go faster than I would've done it myself.

In this mode, you are always on the flow. You don't get into the _**prompt - review - accept / reject**_ cycle. You keep churning the code out, copilot comes along with its suggestions, which you take less time to accept / reject since you are already neck deep into it.

In my opinion, while I was in the _**prompt - review - accept / reject**_ cycle, copilot was taking a lot of focus away from the thing being built. Without prompting, copilot became a trusted ally and helped me build what I wanted, the product remained in the primary focus. And that's what a great tool does.

To sum it up, a tool doesn't need to do great things. It just need to do simple and useful things. In that aspect, I must admit that copilot is a really good tool to have in a dev's toolkit.
Why “FREE “ keyword has so much market in the Startup world?
Tags: startup, webdev, startuplife, startupless
Published: 2023-06-27 14:05:53

It's simple: people love getting something for nothing. Offers that promise to save money naturally draw people in, and the word "FREE" is a powerful trigger for that desire.

Whenever a startup launches a digital/physical product, its only focus is to get some actual users as soon as possible! only then can they receive real feedback. And  Acquiring users or reaching the targeted audience is where the pain hides! 

Imagine you started a startup with a unique idea: reduce plastic waste by recycling it  ( unique idea 😂) and as a part of the process you developed a mobile application for tracking customers and collecting agents. The Application has a Subscription plan and the users are required to pay a monthly fee, the collecting agents will come to their homes once a week to collect the plastics

now in this case the potential clients will be the people who reside in the city/urban area, so we have to target these people, For getting attention from these people we can introduce a free plastic collecting day once a month or 3 months. this will exponentially increase the revenue for sure. 

In this example, it’s a service-based startup and people are experiencing the use of their service for free in the real world. so, whenever you launch a product, give the users a chance to use your product for absolutely free so they can decide if it’s worth buying or subscribing to this application or give them a freemium (users can use the product with limited functionality ) option

By Integrating these strategies, startups can attract users, gather valuable feedback, and generate revenue more effectively. The allure of "FREE" is a powerful force that can drive growth and success in the competitive startup ecosystem.
Hello dev community
Published: 2023-06-27 14:05:07

Hi, I'm Yasser Muayed!

I'm a fullstack web developer who loves JavaScript and web technologies. I've been working as a freelance developer for the past few years, and I absolutely love the flexibility and freedom it allows me. I get to work on a variety of projects, from small personal projects to large enterprise applications. I'm always learning new things, and I'm always looking for new challenges.

One of my favorite things about being a web developer is the ability to create canvas games. I've been making canvas games since I was a kid, and I love the challenge of creating interactive and engaging experiences. I've made a variety of canvas games, from simple 2D games to more complex 3D games.

I'm always looking for new opportunities to learn and grow as a developer. I'm passionate about sharing my knowledge with others, and I'm always willing to help out fellow developers. If you have any questions or need help with anything, please don't hesitate to reach out to me.

I'm excited to be a part of the dev community, and I'm looking forward to meeting new people and learning new things.

Here are some of my skills and interests:

Fullstack web development
JavaScript
React
Node.js
Canvas games
Learning new things
Helping others
Here are some of my goals:

Continue to learn and grow as a developer
Work on more challenging and interesting projects
Share my knowledge with others
Make a positive impact on the dev community
I'm excited to see what the future holds!

Thanks for reading, and I hope to see you around!
Module Federation
Tags: webpack, react, programming, frontend
Published: 2023-06-17 15:42:36


The module federation plugin spits out this set of files that includes a set of directions on how other projects can get access to the source code - meaning Basically the module federation plugin comes into action when we are working in Micro-Frontend application.

Here inside the plugin array, we need to declare the plugin with its name, filename(visible in network tab), exposes.
The Plugin will create the global object with the name had been declared.
Whereas exposes we need to tell webpack that i need to share the file remotely for that path of the file is mentioned.


Usage:

```
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
 const devConfig = {
  mode: "development",
  devServer: {
    port: 8081,
    historyApiFallback: {
      index: "index.html",
    },
  },
  plugins: [
    new ModuleFederationPlugin({
      name: "marketing",
      filename: "remoteEntry.js",
      exposes: {
        "./App": "./src/index",
      },
      shared: packageJSON.dependencies,
    }),
  ],
};

```
Notification Sender with RabbitMQ
Published: 2023-06-27 14:04:29

Title: Building a Powerful Notification Service with RabbitMQ and Python

Table of Contents:
1. Introduction
2. Configuration Management: Setting the Stage
3. Handling Connection Issues: The Reliable Connection Class
4. The Power of Publisher-Subscriber Model: Leveraging RabbitMQ's Capabilities
5. Full Test Coverage: Building Confidence in our Service

---

Introduction:
Welcome to my first blog post! My name is Bahman, and today I'm excited to teach you how to create a project with RabbitMQ and Python. In this hands-on project, we'll be focusing on building a powerful notification service that can handle user notifications from various sources, while incorporating key features like fault tolerance and test coverage. By the end of this guide, you'll have expanded your knowledge of RabbitMQ and be well-equipped to create your own projects using this powerful messaging system.

Part 1: Configuration Management: Setting the Stage
To kickstart our project, we'll begin by focusing on configuration management. We'll create a robust configuration file that allows us to easily customize our service's behavior. This part will cover settings such as connection details, exchange and queue configurations, and user-specific settings for handling notifications.

Part 2: Handling Connection Issues: The Reliable Connection Class
Next, we'll delve into the heart of our service: handling connection issues. We want our notification service to be resilient, capable of restoring connections after any disruptions. In this part, we'll create a connection class that encapsulates the logic for establishing and maintaining connections to RabbitMQ. This class will employ a pythonic approach, leveraging Python's elegance and readability.

Part 3: The Power of Publisher-Subscriber Model: Leveraging RabbitMQ's Capabilities
To enable efficient and flexible message distribution, we'll adopt the Publisher-Subscriber model. RabbitMQ's topic exchange feature perfectly suits our needs, allowing us to send different notifications to specific subscribers based on routing keys. In this part, we'll explore how to implement this model in our service, ensuring that notifications reach the intended recipients in a reliable and scalable manner.

Part 4: Full Test Coverage: Building Confidence in our Service
Building reliable software requires comprehensive testing. In this part of our project, we'll prioritize test coverage to ensure that our notification service performs as expected in various scenarios. We'll use popular Python testing frameworks, such as unittest or pytest, to create tests that validate the behavior of our service under different conditions. By the end, you'll have a suite of tests that provide peace of mind and confidence in your service's functionality.

Stay tuned for the upcoming parts of this blog post series, where we'll continue to explore the intricacies of building a powerful notification service with RabbitMQ and Python.
🚀 Calling all Developers! 🚀
Published: 2023-06-27 14:01:00


Discover how the OriginX team achieved lightning-fast development and testing during the Theta Network 2023 Hackathon using BuildBear. 👇👇

💧 BuildBear Faucet: Say goodbye to the hassle of manual token accumulation. Through the BuildBear Faucet, OriginX gained immediate access to a plentiful reserve of Native and Popular ERC20 Testnet tokens, resulting in significant time savings. 💰

🔗 Mainnet State! NFTs: With BuildBear, OriginX can effortlessly create Testnets by forking Mainnets, eliminating the need to deploy mock NFTs for generating Raffle Tickets. Additionally, this feature allows users to utilize their existing NFTs for testing the functionality of OriginX. 🔄

⚡ Swift Verification: BuildBear enables the completion of standard test scripts comprising 10 transactions in under 26 seconds, compared to the extended timeframe of over 2 minutes on Public Testnets like Sepolia. This expedited transaction processing significantly reduces the runtime of contract test scripts, enabling faster iterations. ⏩

⏰ Manipulate Time: With the BuildBear Advanced Time feature, OriginX can modify the time on Testnet, allowing for testing Raffle tickets with different end times without any limitations. ⌛️

🙌 Testimony:
“BuildBear significantly accelerated the testing process."
"From a developer's perspective, BuildBear has the potential to revolutionize dApp testing." - Manoranjith Shankar

Are you part of an innovative DApp development team? Don't wait any longer! Leverage BuildBear Labs to accelerate your development process.

Read the full story here: https://www.buildbear.io/success-stories/originx

#BuildBear #SuccessStory #development #testing #testnet #tokens
[Summary] Chapter#04 "The Internals of PostgreSQL" Foreign Data Wrappers
Tags: bitnine, postgres, apacheage, devcommunity
Published: 2023-06-27 13:52:03

## Foreign Data Wrappers(FDW): 
In SQL/MED tables on a remote server called foreign table, Foreign Data Wrapper uses SQL/MED to manage foreign tables which are similar to local tables.
After installing necessary extensions and making the appropriate settings, you can access the foreign table on the remote servers.

**Overview:**
All the appropriate extensions must be installed and executed the setup to use FDW: Like
Create Foreign Table
Create Server
Create User Mapping 

How FDW performs in postgreSQL:
- **The analyzer creates the query tree of the input**
Using the **Create Foreign Table or Import Foreign Schema command**, the analyzer creates a query tree of input SQL.

- **The planner connects the remote server**
Using Create user mapping and Create Server commands is used to connect the parameters such as username and IP address and port number, to connect remote server planner uses specific library to connect to the remote database server.

- **Planner execute EXPLAIN command for estimation the cost of each path**
- **Planner creates the plain text SQL**
- **Executor sends the plain text SQL**

**Deparesing:**
Planner creates plain text SQL statements from plan tree scan paths of foreign tables to generate plan trees.

**Sending SQL Statements and Receiving Results:**
After deparsing the executor sends the deparsed SQL statement to the remote server and receives the result.
Developer of each extension decides the methods of sending SQL statements like mysql_fdw sends the SQL statement without using a transaction.

Following shown the SQL statement to execute a SELECT query in postgres_fdw
- **Start the remote transaction**
- **Declare a cursor**
- **Execute FETCH commands to obtain result**
- **Receive the result from the remote server**
- **Close the cursor**
- **Commit the remote transaction **

**How  the Postgres_fdw Extension Performs:**
Postfres_fdw extension is a module maintained by PostgreSQL Global Development Group, postgres_fdw processes a single table Query and following postgres_fdw processes a multiple table query. 

**Multi-Table Query:**
Postgres_fdw fetches foreign tables using the SELECT statement and then joins them on the local server. Postgres_fdw executes remote join operation on remote server when foreign tables are on the same server.

**Sort Operation:**
Postgres_fdw can execute the SELECT statement with ORDER BY clause on the remote server.

**Aggregate Functions:**
Aggregate functions such as AVG() and cont() are processed on the local server.

[Reference](https://www.interdb.jp/pg/pgsql04.html)
O pensamento computacional é uma habilidade incrível
Tags: beginners, devops, developers, community
Published: 2023-06-27 13:50:14

O pensamento computacional é uma habilidade incrível e essencial nos dias de hoje! Ele nos permite resolver problemas de forma lógica e eficiente, usando estratégias inspiradas na computação. E sabe o que é ainda mais incrível? Essa habilidade está ao alcance de todos, inclusive aqueles que vivem em regiões periféricas do Brasil.

Vamos imaginar alguém que vive em uma região menos favorecida e encara diariamente o desafio de se deslocar para o trabalho. Essa pessoa pode se tornar uma verdadeira super-heroína! Com a ajuda de aplicativos de mapas e GPS, como o Google Maps, ela pode explorar rotas alternativas, comparar distâncias e até mesmo verificar o tráfego em tempo real. Assim, é possível tomar decisões informadas e encontrar o caminho mais rápido e eficiente. É como se estivesse desbravando um mundo de possibilidades e desafiando o trânsito com uma estratégia infalível!

Quando a gente se aprorpia do pensamento computacional podemos perceber uma verdadeira mágica na hora de administrar as finanças pessoais. Muitas pessoas dessas regiões precisam lidar com recursos limitados, mas com essa habilidade, elas podem se tornar verdadeiros mestres do dinheiro! Usando planilhas eletrônicas como o Microsoft Excel ou o Google Sheets, elas podem organizar suas receitas, despesas e até mesmo criar fórmulas automáticas. É como se estivessem com uma varinha mágica nas mãos, transformando números em uma dança financeira de sucesso!

Agora, vamos falar sobre o ChatGPT. Essa é uma ferramenta incrível que pode turbinar ainda mais sua habilidade! Ao interagir com o ChatGPT, as possibilidades se multiplicam. É uma experiência emocionante onde você pode formular perguntas, buscar informações relevantes e receber respostas surpreendentes, se combinadas com tom de liguagem, sentimentos que deseja expressar, é como ter um parceiro tecnológico sempre pronto para ajudar! O ChatGPT pode até oferecer exemplos práticos e soluções brilhantes para problemas específicos, expandindo seu repertório de estratégias.

É importante lembrar que o acesso à tecnologia ainda é um desafio para muitas comunidades periféricas no Brasil. Mas nós de diversas comunidadades de tecnologia estamos construindo um futuro mais inclusivo! Com esforços de inclusão digital e democratização do conhecimento e digitalização, todos terão a chance de desenvolver essas habilidades incríveis e aproveitar as oportunidades que elas oferecem.

Por fim, o pensamento computacional é uma habilidade poderosa, capaz de transformar vidas! Ele nos ajuda a encontrar os melhores caminhos, resolver problemas financeiros e explorar um mundo de possibilidades. 

Vamos juntos mostrar para as pessoas que a internet é muito mais do que uma rede social e que o pensamento computacional muitas vezes já faz parte do dia a dia delas.

#futuro #tecnologia #trabalho #ChatGPT #DevRel
My favorite season
Published: 2023-06-27 13:42:17

hello!!!
My name is Mugisha Ghad
I'm going to share with you my favorite season;

My favorite series right now is the Netflix Original drama, OZARK. Set in the rural Midwest region of Missouri, Ozark follows a financial advisor named Marty Byrde (played brilliantly by Jason Bateman) as he attempts to navigate a life-threatening situation that has been thrust upon his family.

The show dives headfirst into exploring themes of crime and morality, touching on topics like power and loyalty in morally ambiguous scenarios. It does an incredible job of making viewers think critically about ethical issues within complex characters’ decisions, as well as its own narrative structure. Not only does it make you consider philosophical questions through an entertaining storyline but there is also plenty of action-packed scenes that keep you on the edge of your seat throughout its entire runtime!

What really stands out to me while watching this exceptional series is how incredibly well-written it is; consistently delivering storylines with intricate twists and fascinating characters full of grit and emotion who you truly care for. Overall the writing packs such a powerful punch that I find myself wanting more from each individual episode which makes me look forward to re-watching them!

Thank you again!!!!!!
EasyPie | Ecommerce with Stripe as Easy as Pie | Shopping, Payment and Subscription Terminal
Tags: stripe
Published: 2023-06-27 13:31:27

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

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

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

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

Demo --> [https://demo.easypie.shop](https://demo.easypie.shop)
Start Your Coding Journey with Ease: A Simple Guide to C++ Programming
Published: 2023-06-27 13:27:09

Are you looking to start your coding journey but don't know where to begin? Look no further than C++ programming! This versatile language has been used in everything from video games to operating systems, and with our simple guide, even beginners can get started. Whether you're interested in a career in tech or simply want to broaden your skill set, C++ is the perfect place to start. So let's dive in and explore the basics of this powerful programming language!

## What is C++ Programming?

C++ is a programming language that was created in the early 1980s. It was designed to be an extension of the programming language C, which was created in the 1970s. C++ was created to provide a way to write programs that were more easily understandable and maintainable than programs written in C.

C++ has evolved over the years and is now used in a wide variety of applications. These applications include system software, application software, device drivers, embedded software, high-performance computing, and much more.

C++ is a powerful language that gives programmers a lot of control over how they write their code. This can be both good and bad; it allows programmers to write very efficient code but can also lead to code that is difficult to understand and maintain.

## Advantages of Learning C++ Programming

C++ programming offers a number of advantages that make it a popular choice for many programmers. First, C++ is a powerful and flexible language that can be used for a wide range of programming tasks. Second, C++ is easy to learn, and many programmers find it easier to read and write than other languages. C++ is widely available, with compilers and development tools for most platforms.

## How to Get Started with C++ Programming?
Assuming you have some basic coding knowledge, C++ will be a breeze to pick up. Here are a few tips on how to get started with C++ programming:

1. Install a C++ compiler on your computer. This will allow you to translate your code into instructions that the computer can understand and execute.

2. Familiarize yourself with the basic syntax of the C++ language. This includes understanding how to declare variables, write functions, and use control flow statements.

3. Start practicing by writing small programs. Begin with something simple, like a program that prints "Hello, world!" to the console. Then, gradually increase the complexity of your programs as you become more comfortable with the language.

4. Seek out resources and references that can help you learn more about C++ programming. Books, online tutorials, and community forums are all great places to start.

5. Keep practicing and expanding your knowledge so that you can eventually become a proficient C++ programmer!