teleren/devto huggingface dataset:
hide email address from scraping
Tags: html, webdev, webscraping, web3
Published: 2023-11-01 20:30:53

Protecting your email address from web scraping is important to prevent spam and privacy concerns. Here are some techniques to help you hide your email address from web scrapers:

PRO TIP: [hide email address from spammers](https://veilmail.io)

1. Use Email Obfuscation:
   - One common method is to obfuscate your email address in the HTML code of your website. Instead of writing it as "user@example.com," you can write it as "user [at] example [dot] com." This makes it harder for automated scrapers to recognize it as an email address.

2. JavaScript-Based Protection:
   - You can use JavaScript to dynamically generate your email address on the page. This can help protect your email from simple scraping tools, but it may not be foolproof against more sophisticated scrapers.

3. Contact Form:
   - Instead of displaying your email address directly, provide a contact form on your website. Users can fill out the form, and you can receive messages without revealing your email address to scrapers.

4. Images:
   - Convert your email address into an image and display it on your website. This prevents text-based scrapers from easily extracting your email.

5. CAPTCHA:
   - Implement CAPTCHA challenges to access your email address. This adds an extra layer of protection against automated bots.

6. Server-Side Email Processing:
   - You can process emails on the server side and avoid exposing them on the web page. Provide a way for users to send messages without revealing your email address.

7. Use Email Forwarding:
   - Set up an email forwarding service that doesn't display your actual email address. Instead, the service forwards emails to your real email address.

8. .htaccess Configuration (For Apache):
   - You can use .htaccess rules to restrict access to your email addresses. This won't hide the email but can protect it from being directly accessible through URLs.

9. Robots.txt:
   - Consider using a robots.txt file to instruct web crawlers not to index specific parts of your website that contain your email address.

10. Third-Party Services:
   - There are third-party services and plugins that claim to protect email addresses from scrapers. Be cautious and research them thoroughly before implementing them.

While these methods can help protect your email address from casual web scrapers, it's essential to keep in mind that determined and sophisticated scrapers may still find ways to access it. Using a combination of these techniques can provide a higher level of protection. Additionally, regularly updating your protection methods is a good practice to stay ahead of evolving scraping techniques.

If you are looking for a good email to link tool to [hide email address from scraping](https://veilmail.io) be sure to checkout MailVeil.io
Visual Studio: Add your Project to Github
Tags: github, beginners, git, csharp
Published: 2023-11-01 20:07:48


Hi everyone,

Today I'll show you how to add your local solution file to a remote repository in GitHub, make changes, and update those changes in the remote repository. So let's begin

First, Create a new project in Visual Studio, I have created a new console application called VisualstudioGithubTest. Or you can open a previously created solution.

Next, we want to click on the **Add to Source Control** dropdown in the lower right-hand corner.

![Add to Source Control](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5hh5z59jm9iu11io4g0i.png)

After that a placeholder called **Git** comes up, we are then going to click that.

![Git](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sg40ne0hfr9lfb0ik9nk.png)

Clicking that will bring up a screen that shows you how to create a git repository.

![Create Repository](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4ud2mfu72xzcoiqdoi6v.png)
If you haven't yet connected your Visual Studio to your GitHub account, you can just click the drop-down to add an account and add your GitHub account. 

![Add Github Account](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9sutafwx3ixshqsm1syr.png)
Then you can click on **Create and Push**

After that, the next thing you will notice is that your repository has been created, and your branch name is on the lower right-hand side of your screen.

![Master Branch](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7e3y88v6xq766g7da46a.png)

Now let us make changes and push to that master branch.

I have changed the Program.cs to reflect a simple loop that displays numbers from 0 to 10

Great, now you can click the **Git changes** pane at the right of your screen.


![Changed code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nzwo2xjd3x4f4qrryrl1.png)

You can then write a commit message in the text field that says **Enter a message**. Since we are only changing the Program.cs file, we can simply click the **Commit All** button.

![Commit Message](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r6rnxfyg3u4iaj563ft3.png)


After doing that, a small pop notification shows up to tell you the commit has been created locally.

![Commit created locally](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2v7w1g5gbm5vqq7szccz.png)

Next, we want to push our changes and update the remote branch with what we have changed locally, so go ahead and click the push arrow, which is the arrow pointing up with an underscore on it.


![Push Changes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hzqd6rsxawrcbfzmytp5.png)

And that's it! We're done. You can click on the **Create a Pull Request** button to take you to your online repository on GitHub to see your changes.


![Pushed to master](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cjq4jagjphg2lml8h2fx.png)

I hope you found this useful, Happy coding everyone.
Next.js 14 as novidades dessa nova versão
Tags: next14, webdev, nextjs, javascript
Published: 2023-11-11 03:07:05

---
title: Next.js 14 as novidades dessa nova versão
published: true
date: 2023-11-01 19:54:51 UTC
tags: next14,webdevelopment,nextjs,javascript
canonical_url: https://marcellecode.medium.com/next-js-14-as-novidades-dessa-nova-vers%C3%A3o-f2ea63a68632
---

Em outubro de 2023, foi anunciado a nova versão do Next.js 14 e algumas features bem interessantes para facilitar o trabalho dos desenvolvedores e a experiências dos usuários. Dentre elas duas me chamaram bastante atenção principalmente para quem utiliza o Next.js junto com algum CMS para gestão de conteúdo.

![](https://cdn-images-1.medium.com/max/1000/1*PJ87QhnDB4G5r6GynPSEVw.png)

#### Streaming de Server Rendering Components

O Next.js já permite a renderização dos componentes de UI no servidor, através do SSC (_Server Static Components_), e isso fez com que a experiência do usuário melhora-se bastante. Pois ao abrir uma página web o navegador já encontra parte dos componentes prontos para ser exibido sem a necessidade de aguardar o processamento desses componentes a cada requisição. Mas essa forma que melhorou a experiência do usuário, tem alguns problemas. E o principal deles é a dificuldade de tornar o conteúdo desses componentes dinâmicos.

É dessa forma que o Streaming Server Rendering auxilia para trabalhar com componentes de conteúdo dinâmicos, causando menos impacto nos scores de performance de SEO das páginas. Dessa forma quando o componente termina de ser renderizado no servidor ele é disponibilizado para o navegador do usuário (algo “parecido” com o lazy loading).

![](https://cdn-images-1.medium.com/max/649/1*BoTFBZKLdBfjtoLFFwEo5w.png)

#### Suspense Components

É bem comum hoje em dia páginas web apresentarem animações em quanto carregam os conteúdos dos sites. Dessa forma a experiência do usuário é menos impactada em quanto os dados são processados. Pensando nisso o Next.js criou um componente chamado Suspense que recebe como propriedade um outro componente com uma estrutura de UI que é exibida em quando a página é carregada.

![](https://cdn-images-1.medium.com/max/622/1*oJABJAGMg3M5tPgVp8Ajtw.png)

A equipe do Next.js ainda recomenda o uso do componente Suspense junto com o Streaming Server Rendering, para melhorar a performance do site na perspectiva de SEO.

Outras duas novidades anunciadas no evento para essa nova versão são melhorias no componente de Imagem e a mudança para um novo compilador, o SWC que estaria substituindo o Babel. Mas essas duas novidades eu vou dedicar artigos específicos para eles.

Fontes

- [Server Components](https://nextjs.org/docs/app/building-your-application/rendering/server-components#streaming)
- [Next.js Compiler](https://nextjs.org/docs/architecture/nextjs-compiler)
- [Loading UI and Streaming](https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming)
"Make Your Accomplishments Visible": CodeNewbie Podcast S26E1
Tags: podcast, career, codenewbie, productivity
Published: 2023-11-01 19:00:25

In our first episode of Season 26 of the CodeNewbie Podcast, @saronyitbarek talks about growing your own business, overcoming your fears, and navigating your first career transition with [Camille Eddy](https://twitter.com/iamcamilleeddy), Technical Product Manager.

{% embed https://www.codenewbie.org/podcast/make-your-accomplishments-visible %}

Camille is a Technical Project/Product Manager with experience working in robotics and with SaaS products. She previously interned at Google X, NVIDIA, and HP Labs before graduating with a Mechanical Engineering degree in 2020.

- [Listen on Apple Podcasts](https://podcasts.apple.com/us/podcast/codenewbie/id919219256?i=1000633332142)

- [Listen on Spotify](https://open.spotify.com/episode/1BQtw1Xmt0tzyz1oa87XUM?si=9c72cfca91ef46de)

Or, listen wherever you normally get your podcasts!

***

### We will see you next week, happy coding

PS: Make sure to subscribe to the CodeNewbie podcast if you haven't yet + review us on your chosen platform!
# The Imperative of Open-Source Alignment in Today’s Digital Era
Tags: opensource, digitaltransformation, community, innovation
Published: 2023-11-01 18:57:10



Hello, fellow developers and tech enthusiasts! 👋

Today, I stumbled upon a compelling article written by Milin Desai, the CEO of Sentry, and I couldn’t help but share my thoughts and takeaways with this amazing community. 🚀

## Embracing Open-Source for Digital Transformation

In his article on Forbes, Milin eloquently outlines why every company, regardless of its size or industry, should align itself with open-source practices. He emphasizes that we are entering a new era where open-source software is not just a nice-to-have, but a necessity for success.

🔗 [Read Milin's Full Article Here](https://www.forbes.com/sites/forbestechcouncil/2023/10/25/why-every-company-should-be-open-source-aligned/?sh=62ff87d16007&utm_campaign=Oktopost-CEO+Comms+-+Social+Posts&utm_content=Oktopost-LinkedIn&utm_medium=social&utm_source=social_media)

## Key Takeaways

### 1. **Faster Innovation and Quality Customer Experiences**: Companies that are digitally transforming themselves are leveraging open-source software to ship quality customer experiences at an unprecedented pace.

### 2. **A Thriving Ecosystem**: The open-source community is experiencing a period of intense innovation, especially in the AI industry, with frameworks like TensorFlow, PyTorch, and Auto-GPT leading the charge.

### 3. **Industry Adoption**: A staggering 80% of organizations increased their use of open-source software last year, with more than 90% of the Fortune 100 hosting their open-source code on GitHub.

### 4. **The Need for Investment**: As the reliance on open-source software grows, there is a pressing need for the entire industry to invest in open-source projects, especially in areas like security, patching, and distribution.

## Why This Matters

Open-source software has become the backbone of the modern internet and cloud infrastructure. The collaborative nature of open-source projects accelerates innovation, reduces development costs, and fosters a sense of community among developers.

However, the sustainability of this ecosystem depends on our active participation and investment. Whether it’s contributing code, providing financial support, or dedicating time to maintain projects, every contribution counts.

## Let’s Be Open-Source Aligned

Being open-source aligned means more than just using open-source software; it’s about actively contributing to and investing in the open-source community. It’s about recognizing that we are all part of something bigger, and together, we can drive innovation and create a better digital future.

I encourage everyone to read Milin’s article and reflect on how we can contribute to the open-source community. Let’s be open-source aligned and play our part in this thriving ecosystem!
My experience in passing HashiCorp Certified: Terraform Associate (003) exam
Tags: terraform, certification
Published: 2023-11-01 18:48:56

Straight to the subject point:

It took me less than 2 months to prepare for the exam and I attended the exam on Nov 1, 2023. I passed with the score of 93%.
I thought I would share my exam preparation experience.

Firstly, I started reading this book "Terraform: Up and Running" by Brikman.
https://learning.oreilly.com/library/view/terraform-up/9781492046899/

This book gave me a good understanding of IaC and Terraform workflow. I strongly recommend reading the first 5 chapters in the book for the exam. And don't forget to practise the Terraform coding whilst reading! I used AWS cloud to provision resources as mentioned in the book. (It doesn't matter which cloud provider you choose.)

HashiCorp has good documentation of the Terraform product and I used that as a reference too.

Once I got confidence with the basics, I started doing the practice tests that are available in Udemy and O'Reilly. I had 80% as a benchmark in passing these exams. The tests available in these sites come with detailed explanations for the answers.

That is it! Good luck with your exam preparation!!
Thank you my unVanilla Fresh HackToberFest23
Tags: webdev, beginners, hacktoberfest23, opensource
Published: 2023-11-01 18:41:57

This month I got involved in Hacktoberfest for the first time in my life.
 And I never made any pr's but I met my pledge to learn. And to learn I did and I learnt big. 

I have expanded my knowledge towards backend and reiterated my knowledge of async and await and promises. Which further emphasised to me the importance of sync an async concepts of coding in JS. As I now see it seems to be the backbone of node.js.

I have been pushed to learn a lot. I have elevated my understanding and broadened my knowledge in a space of a month with lessons about and from:
 javascript, to node.js; to git, to repl, to linux terminal commands, to learning about package managers:yarn and npm. Dependencies, require(), export, import, and modules. 
And discovering the importance of package.json and its purposes and functions etc....

So I have realised that for me to be able to make 
open source contributions I also need to be knowledgeable of backend technologies as well.
After I have been finding myself in Github, looking at files and folders whose function and purpose I could barely comprehend.
Perhaps there is no working on GitHb stuff with just only my Vannila fresh JS skills.

Its been so awesome and the exploration continues on.
HactoberFest has made me more almost well rounded.Perhaps rather semi-circular.lol

Come hacktoberFest24 next year I will be a ready and enlightened orb. I will have a lot of pr's under my belt.

Thanks Hacktoberfest for helping accelarate my learning progress, by giving me a learning goal and target.Thanks to Dev.to and all the other sponsors.

Yoll been awesome!!!
Python in Practice
Tags: python, coding, programming, devpride
Published: 2023-11-01 18:34:16

Here are some exercises that I was working on this week:

**Bug 1**

I am building some very high quality chairs and need exactly four nails for each chair. I've written a program to calculate how many nails I need to buy to build these chairs but something is wrong.
 
`chairs = '15' 
nails = 4 
total_nails = chairs * nails 
message = 'I need to buy {} nails'.format(total_nails) 
print('You need to buy {} nails'.format(message)) `

When I run the program it tells me that I need to buy 15151515 nails. 

How do I fix it? 
To correct the code, I need to change the variable; chairs, from a string into an integer. In order for me to do that, I need to remove the apostrophes on the value 15. 
once this is done, the program will run correctly and tell me that I need to buy 60 nails. 

**Bug 2**

I'm trying to run this program, but I get an error.

`my_name = Penelope 
my_age = 29 
message = 'My name is {} and I am {} years old'.format(my_name, my_age) 
print(message)`

How do I fix it? 
To correct the code, I need to make Penelope a string: 
`my_name = 'Penelope'`

python hasn't recognised the data type that the value **Penelope** is and isn't sure how to proceed. Once we specify that this is a string using **''** it will run as instructed. 

---

**Program 3**

I have a lot of boxes of eggs in my fridge and I want to calculate how many omelettes I can make. each box of eggs contains six eggs and I need four eggs for each omelette. 

```python
number_of_eggs_for_omlette = 4
number_of_eggs_in_carton = 6
number_of_egg_cartons = 9
total_eggs = number_of_egg_cartons * number_of_eggs_in_carton
omlettes = total_eggs // number_of_eggs_for_omlette
left_over_eggs = total_eggs % number_of_eggs_for_omlette
message1 = 'there are {} eggs in total, this means you can make {} omlettes with {} eggs left over '.format(total_eggs, omlettes, left_over_eggs)
print(message1.format(message1))
```

`There are 54 eggs in total, this means you can make 13 omlettes with 2 eggs left over`

---


I also want write a program to tell me how many eggs I need to buy to make x amount of eggs. For example, I want to make 25 omlettes, how many eggs do I need to buy??

```python
number_of_eggs_for_omlette = 4
number_of_desired_omlettes = 25
number_of_eggs_in_carton = 6
total_eggs_needed = number_of_eggs_for_omlette * number_of_desired_omlettes
egg_cartons = total_eggs_needed // number_of_eggs_in_carton
message2 = 'to make {} omlettes, you will need {} eggs. That means you need to buy {} cartons of eggs' .format(number_of_desired_omlettes, total_eggs_needed, egg_cartons)
print(message2.format(message2))
```

`To make 25 omlettes, you will need 100 eggs. That means you need to buy 16 cartons of eggs`

---

These programmes will print the information that I need, depending on the values i'm inputting into it.
UITableView: Cell - Accessory Types
Tags: swift, mobile, beginners
Published: 2023-11-01 18:27:01

**Accessory Types**
- checkmark
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vctu05n2zib1e1pm0nwt.png)
- detail button
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ovcnzszblv5n3ckucx9q.png)
- detail disclosure button
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5e69a552lcxxg50mh7xh.png)
- disclosure indicator
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bajar7udk7w5zud0r832.png)

**Checkmark Implementation Example**
```swift
@IBOutlet weak var itemsTableView: UITableView!
var items = [
  ["item":"Item 01", "selected": false],
  ...
  ["item":"Item 50", "selected": false]
]

override func viewDidLoad() {
  super.viewDidLoad()
  itemsTableView.dataSource = self
  itemsTableView.delegate = self
}

func numberOfSections(in tableView: UITableView) -> Int {
  return 1
}

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
  return items.count
}

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
  let itemCell = tableView.dequeueReusableCell(withIdentifier: "itemCell", for: indexPath)
  
  if let item = items[indexPath.row]["item"] as? String,
     let selected = items[indexPath.row]["selected"] as? Bool {
    
    itemCell.textLabel?.text = item
    if selected {
      itemCell.accessoryType = .checkmark
    } else {
      itemCell.accessoryType = .none
    }
  }
  
  return itemCell
}

func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
  return "Items"
}

func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
  guard let selected = items[indexPath.row]["selected"] as? Bool else {
    return
  }
  items[indexPath.row]["selected"] = !selected
  tableView.reloadRows(at: [indexPath], with: .automatic)
}
```

![checkmark image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8jsvm099ebnbo0uib9a1.png)
🚀NEXT JS 14 has come out with more power 💪 and it’s a game-changer release.
Published: 2023-11-01 18:14:23

✅ Turbopack: 5,000 tests passing for App & Pages Router
53% faster local server startup
94% faster code updates with Fast Refresh
✅ Server Actions (Stable): Progressively enhanced mutations
Integrated with caching & revalidating
Simple function calls, or works natively with forms
✅ Partial Prerendering (Preview): Fast initial static response + streaming dynamic content

✅ Next.js Learn (New): Free course teaching the App Router, authentication, databases, and more.
Introducing Gptlab: A Bridge Between ChatGPT and GitLab
Tags: python, chatgpt, gitlab
Published: 2023-11-01 17:54:31

![Gptlab Logo](https://raw.githubusercontent.com/aswierc/gptlab/main/static/logo.png)

### What is Gptlab?

Gptlab is an integration plugin designed to bridge ChatGPT with GitLab. Its primary goal is to enable users to leverage GitLab functionalities directly through the ChatGPT interface, offering a unique project management and collaboration experience.

### Project's Vision: Teach by Showing

Gptlab isn't just a tool – it serves as a demonstration of how to craft custom plugins for ChatGPT. Many of us have desired to customize and extend ChatGPT's capabilities but it's not always an intuitive task. This project aims to illustrate how this can be practically achieved. If you've ever wondered how to integrate ChatGPT with other tools or services, Gptlab provides an excellent starting point!

### Future Developments

The goal of this repository is continuous evolution. In future iterations, the idea is to make it as straightforward as telling ChatGPT, "Do a code review for branch xxxx", and it will seamlessly integrate with GitLab to get the task done. Imagine the potential of effortlessly managing your GitLab tasks via simple chat commands!

### Why should you care?

1. **Intuitiveness**: By using natural language, you can perform GitLab-related tasks directly through ChatGPT.
2. **Flexibility**: With Gptlab, you can integrate your ChatGPT bot with any project on GitLab.
3. **Time-saving**: Instead of juggling multiple tools, you can use a single interface for communication and project management.

### How does it work?

To get started with Gptlab, simply clone the repository, install dependencies, and fire up the Docker service with `docker-compose up`. Then, set up your environment variables like `GITLAB_PERSONAL_TOKEN`, and you're good to go!

The API will be accessible at: `http://localhost:3000`.

For details on how to connect the plugin to ChatGPT, check out our [README.md](https://github.com/aswierc/gptlab).

### Conclusion

I'm keen on sharing this tool with the broader community and am eager to hear your feedback, insights, and suggestions.