DEV Community: Clément Grosieux

Why are there so many bot followers on dev.to? 🤖👽

Clément Grosieux — Thu, 22 Jun 2023 09:18:47 +0000

Hey, as a newcomer on dev.to, my articles may not receive many views, but my follower count is rapidly growing (without additional views).

When I created my account, after my first article, I was gaining almost 10 followers per hour, compared to 1 or 2 views per hour on the first article (since then I've written others 😝).

So let's summarize:

In 1 hour -> 10 followers
-------> 1 view on the only article

The only possible solution: bots

Now let's take a look at some of these followers:

And I could add several dozen more,
Each time it's a profile with a description/advertisement, almost never any articles (unless it's an advertisement article), and a link to the website and social media.

But I also have the impression that there's a second type of bot,

These bots appear normal, with a random profile picture, often registering on the same day. And after a certain time, they change all their information to become 100% advertisement profiles. Probably to bypass dev.to moderators.

Conclusion:

Let me know if you're also in this situation. I find it quite disturbing not to know how many people are truly following us!

It would be easy to limit this by preventing the inclusion of URLs in profiles until a certain number of articles have been written. 👽

don't forget to follow me and like the post if you are not a bot 🤣👽

ChatGPT at Work: How to block Content Leaks 🔒

Clément Grosieux — Wed, 21 Jun 2023 09:04:34 +0000

ChatGPT is a powerful tool, but it can also be risky if misused in a business environment. Several companies have experienced data leaks due to careless employees.

Even with caution, ChatGPT has had data leaks in the past, so how can you protect yourself?

1. Disable Training and History

This feature was recently added, and it allows you to prevent ChatGPT from recording your conversations for the purpose of improving its performance.

Your new discussions will not be saved (the previous ones will still be retained), ensuring that no traces are left. To access this feature, go to the settings menu:

Now, disable the history.

There you go! You won't have access to your history anymore, so enable it only when you're at work (by reactivating it, your previous history will reappear).

2. Check your shared discussions

It is now possible to share ChatGPT discussions , so make sure to verify that you are not sharing any work-related discussions!

This might sound funny, but mistakes can happen, so click on the trash bin icon.

3. Tips for Usage

We have configured everything, but it's difficult to trust 100% Chatgpt!
Here are some tips:

Do not copy and paste confidential documents without removing sensitive data.
Disable the history every time you're at work, don't forget!
Your data passes through a server, even if the history is not saved, so be mindful of not using insecure Wi-Fi networks to prevent data interception.
Pay attention to whether your company prohibits its usage.

Conclusion

ChatGPT provides us with options to have secure discussions. However, it is still important to remain vigilant. It is a powerful tool, so don't forget to use it wisely!

Feel free to ask any questions or provide any feedback. And don't forget to subscribe and like!😊

Create your HTML forms without server for free! 💪🤑

Clément Grosieux — Mon, 19 Jun 2023 08:47:52 +0000

Would you like to integrate a html contact form into your website without setting up a server?

I have the solution for you! A free service that takes care of everything.

1. Service Introduction (Free)

Today, I present to you web3forms.com . There are many similar services, but according to my research, this one offers the best free package.

Currently, you will have free access to:

Unlimited Forms
250 Monthly Submissions

I find this to be more than sufficient, especially for a portfolio website.
Additionally, if you wish to deploy the solution on multiple sites, you can simply provide a different email address..

2. Obtaining the API Key (30 seconds)

Go to web3forms.com/#start, and scroll down to :

Once you have registered your email address (do not use a disposable email, as this is where you will receive the messages), you will receive your API key via email:

And there you have it, you now have your API key!

3. Setting up the Form

To set up your form, create your form using the POST method.
Then, simply add the web3form URL.

<form action="https://api.web3forms.com/submit" method="POST">

    <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE">

    <input type="text" name="name" required>
    <input type="email" name="email" required>
    <textarea name="message" required></textarea>
    <button type="submit">Submit Form</button>

</form>

And that's it, you're done! Here's a practical example:

You will receive the form information via email:

4. Conclusion

It doesn't get any easier than this. This solution allows you to quickly deploy forms.
You can further enhance it with Captchas and verifications, but it remains just as simple.

Feel free to ask any questions or provide any feedback. And don't forget to subscribe and like!😊

How to Automatically Fill a Form: Speed up Your Development 💪

Clément Grosieux — Mon, 12 Jun 2023 08:29:00 +0000

You're probably tired of wasting time filling out a form every time you make a code change, right?

Let's imagine you have a form that you're currently developing, and every time you refresh the page... you're forced to fill it all over again.

So, I'm going to introduce you to Chrome DevTools snippets (this DevTools is available on almost all browsers except Safari and Firefox). It allows you to fill out a long form with just a few clicks.

Accessing the Snippets:

Access Chrome DevTools (right-click -> inspect or use the shortcut).

Once there, go to the Sources tab. If it's not displayed, click on the arrow that I've circled in red.

Click on the Snippets tab and then "New snippet."

This will open a blank JavaScript code page for you.

Practical Example

Let's consider the following form:

<form>
    <h1>Form :</h1>
    <label for="input-1">Input 1 :</label>
    <input type="text" id="input-1" name="input-1" placeholder="enter value" required>

    <label for="input-2">Input 2 :</label>
    <input type="text" id="input-2" name="input-2" placeholder="enter value" required>

    <label for="input-3">Input 3 :</label>
    <input type="text" id="input-3" name="input-3" placeholder="enter value" required>

    <label for="select">Select :</label>
    <select id="select" name="sekect">
      <option value="">Select Choice</option>
      <option value="choice-1">Choice 1</option>
      <option value="choice-2">Choice 2</option>
    </select>

    <button type="submit">Submit</button>
  </form>

To fill it out, you simply need to set the input values in JavaScript:

document.getElementById('input-1').value = 'Valeur 1';
document.getElementById('input-2').value = 'Valeur 2';
document.getElementById('input-3').value = 'Valeur 3';
document.getElementById('select').value = 'choice-2';

That's it! You just need to either press Ctrl+Enter or click the button.

Conclusion

Now you know how to quickly fill out a form using the DevTools snippets!
Of course, snippets can be used in much more complex ways. It's up to you to explore and imagine your own uses.

Feel free to comment if you have any questions, follow me, or react to the article with an reaction 😊

Beta test of Github Copilot X : The GodMode for developer 💪

Clément Grosieux — Wed, 17 May 2023 12:38:53 +0000

Today, I received the long-awaited email: “You now have access to Copilot Chat.”
So let’s see how to install it and what it can do!

Installation :

First, you’ll need to wait to receive an email from GitHub notifying you that you’re on the waitlist.
If you haven’t signed up yet: :
https://github.com/features/preview/copilot-x

So once you receive the email:

You’ll need to install VSCode Insider (which is VSCode but in Beta) using this link:
https://code.visualstudio.com/insiders/

Next, once VSCode Insider is open, go to the extensions marketplace and install:

And after that:

Now you have the Copilot tab on the left side:

Congratulations, you have just accessed one of the tools that will take you to GodMode 💪

Discovery :

Now we will ask some simple questions.

First, let’s start with a simple test in React: Write a login form. It took some time for Copilot to generate the code. I’m not sure why, but it didn’t understand that I was asking for React-specific code.

So I asked again, this time selecting my code:

import React from 'react';

    const Index = () => {
        return (
            <div>

            </div>
        );
    }

    export default Index;

Copilot responds:
“GitHub Copilot: Sure! Here’s an example login form using HTML and CSS that you can add to your Index component:"
[CODE]
"This is just a basic example, but you can customize it to fit your needs. Let me know if you have any questions!"

 import React from 'react';

    const Index = () => {
        return (
            <div>
                <form>
                    <label htmlFor="username">Username:</label>
                    <input type="text" id="username" name="username" required />

                    <label htmlFor="password">Password:</label>
                    <input type="password" id="password" name="password" required />

                    <button type="submit">Login</button>
                </form>

                <style jsx>{`
                    form {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                    }

                    label {
                        margin-top: 1rem;
                    }

                    input {
                        padding: 0.5rem;
                        margin: 0.5rem;
                        border-radius: 0.25rem;
                        border: none;
                        box-shadow: 0 0 0 1px #ccc;
                    }

                    button {
                        padding: 0.5rem 1rem;
                        margin-top: 1rem;
                        border-radius: 0.25rem;
                        border: none;
                        background-color: #0077cc;
                        color: white;
                        font-weight: bold;
                        cursor: pointer;
                    }

                    button:hover {
                        background-color: #005fa3;
                    }
                `}</style>
            </div>
        );
    }

    export default Index;

By the way,
I forgot to show you, but there are some handy buttons for the generated code:
The first one allows you to copy, the second one to insert where your cursor is, and the last one to insert into a terminal or a new file.

That’s great! Now let’s interact with the generated code by making a request, for example, to not create a style tag and to use styled-components instead:

“Sure! Here’s an example login form using styled-components in your Index component:”

 import React from 'react';
    import styled from 'styled-components';

    const Form = styled.form`
      display: flex;
      flex-direction: column;
      align-items: center;
    `;

    const Label = styled.label`
      margin-top: 1rem;
    `;

    const Input = styled.input`
      padding: 0.5rem;
      margin: 0.5rem;
      border-radius: 0.25rem;
      border: none;
      box-shadow: 0 0 0 1px #ccc;
    `;

    const Button = styled.button`
      padding: 0.5rem 1rem;
      margin-top: 1rem;
      border-radius: 0.25rem;
      border: none;
      background-color: #0077cc;
      color: white;
      font-weight: bold;
      cursor: pointer;

      &:hover {
        background-color: #005fa3;
      }
    `;

    const Index = () => {
      return (
        <div>
          <Form>
            <Label htmlFor="username">Username:</Label>
            <Input type="text" id="username" name="username" required />

            <Label htmlFor="password">Password:</Label>
            <Input type="password" id="password" name="password" required />

            <Button type="submit">Login</Button>
          </Form>
        </div>
      );
    };

    export default Index;

Wow… impressive! Let’s do another test. I’ll add a useState hook and ask Copilot to continue the code by selecting it.

I'll simply ask the question:
"Continue my code, add the useState and display 'Hi' when you submit the form."

The real power here is that since I’m selecting my code, there’s no need to copy and paste it for Copilot to understand.

Here’s the generated code:

 const Index = () => {
      const [formData, setFormData] = useState({
        username: '',
        password: '',
      });

      const handleChange = (e) => {
        setFormData({
          ...formData,
          [e.target.name]: e.target.value,
        });
      };

      const handleSubmit = (e) => {
        e.preventDefault();
        console.log(formData);
      };

      return (
        <div>
          <Form onSubmit={handleSubmit}>
            <Label htmlFor="username">Username:</Label>
            <Input
              type="text"
              id="username"
              name="username"
              value={formData.username}
              onChange={handleChange}
              required
            />

            <Label htmlFor="password">Password:</Label>
            <Input
              type="password"
              id="password"
              name="password"
              value={formData.password}
              onChange={handleChange}
              required
            />

            <Button type="submit">Login</Button>
          </Form>
        </div>
      );
    };

    export default Index;

Indeed, it’s noticeable that Copilot continued your logic and even improved it by grouping the states into an object.

Conclusion

And there you have it, we’ve come to the end of this test. It’s truly impressive to witness the capabilities of this tool and the incredible time savings it offers.
I believe that in the future, these tools will become indispensable for producing rapid and high-quality work.
Don’t let yourself fall behind!

This is my first article on this website, so please don’t hesitate to give me your feedback. Feel free to point out any errors as well!

DEV Community: Clément Grosieux

Why are there so many bot followers on dev.to? 🤖👽

So let's summarize:

Conclusion:

ChatGPT at Work: How to block Content Leaks 🔒

Table of Contents:

1. Disable Training and History

2. Check your shared discussions

3. Tips for Usage

Conclusion

Create your HTML forms without server for free! 💪🤑

Table of Contents:

1. Service Introduction (Free)

2. Obtaining the API Key (30 seconds)

3. Setting up the Form

4. Conclusion

How to Automatically Fill a Form: Speed up Your Development 💪

Accessing the Snippets:

Practical Example

Conclusion

Beta test of Github Copilot X : The GodMode for developer 💪

Table of Contents:

Installation :

Discovery :

Conclusion