teleren/devto huggingface dataset:
How To Protect Your Website email Address From Spam
Tags: webdev, web, website, html
Published: 2023-11-14 05:21:14

Here are somegooddetails on how to protect your websiteemail address from spam:

1. **Contact Forms with CSRF Protection:**
   Implement contact forms on your website with Cross-Site Request Forgery (CSRF) protection to ensure that the form submissions are legitimate. This helps prevent automated bots from exploiting your forms for spam purposes.

2. **Email Obfuscation through JavaScript:**
   Utilize JavaScript to dynamically generate the email address in the Document Object Model (DOM) rather than hardcoding it in the HTML source code. This approach can obfuscate the email address, making it more challenging for bots to extract.

   ```html
   <script>
     document.getElementById('email').innerHTML = 'user' + '@' + 'domain.com';
   </script>
   ```

3. **Image-based Email Representation:**
   Convert the email address into an image using server-side techniques or client-side libraries. This prevents automated scraping tools from extracting the email address directly from the HTML code.

4. **CSS Techniques for Display:**
   Use CSS to hide email addresses by applying styles that make them visually hidden, such as setting the font size to zero or using negative text indentation.

   ```css
   .hidden-email {
     font-size: 0;
     color: transparent;
   }
   ```

5. **CAPTCHAs with API Integration:**
   Integrate CAPTCHAs into your forms using APIs like Google's reCAPTCHA. This adds an additional layer of security by ensuring that the form submissions are initiated by human users rather than automated scripts.

6. **Text Replacement through JavaScript:**
   Employ JavaScript to replace plain text email addresses with dynamically generated content, utilizing a combination of ASCII characters or other symbols to disguise the email.

   ```html
   <span id="email"></span>

   <script>
     document.getElementById('email').innerHTML = 'user' + '&#64;' + 'domain.com';
   </script>
   ```

7. **Use a Dedicated Email Alias:**
   Create a dedicated email alias for website inquiries and use server-side filtering to segregate incoming emails. This way, even if the alias receives spam, it won't impact your primary inbox.

8. **Server-side Email Generation:**
   Generate email addresses dynamically on the server side and use client-side requests to retrieve them. This method adds an extra layer of complexity for spambots attempting to harvest email addresses directly from the HTML source.

Remember to regularly review and update your spam protection mechanisms to adapt to evolving spamming techniques and to stay ahead of potential security threats.

PRO TIP: Use VeilMail.io to [hide email address from spammers](https://veilmail.io)
Researchers and Technology | An Inquiry
Tags: research, technology, learning, inquiry
Published: 2023-11-14 05:03:12

Tonight I'm pondering the role of researchers in the broad field of technology.I'm also pondering the intersection between the two. I'm wondering about the tools used, the market and also who might be looking for someone to do some research. Chime in and let me know. Any and all comments are appreciated. I"m seeking dialogue.
A Function Pointer Wrapper in C++
Tags: cpp
Published: 2023-11-14 04:20:01

So you probably already know what are function pointers and how to use them. You also probably know that function pointers have a really ugly syntax.

```c
int func(int a, double b);

int foo() {
    int (*ptr)(int, double) = func;
    return ptr(3, 0.4);
}
```

But what to do when you want to return a function pointer?
You could use a `typedef` in order to do that.

```c
int fun(int a, double b);

typedef int (*func_type)(int, double);

func_type bar() {
    return func;
}
```

But if you don't want to name your function type, you end with something like this.

```c
// The function name is baz and it takes no arguments!
int( *baz(void) )(int, double) {
    return func;
}
```

But we are talking about C++, so you have probably just used `auto`, or even worse, returned a slow `std::function`.
Instead of that, you can use this zero cost template.

{% embed https://gist.github.com/beto-bit/f7ad413be21f2f4a94379dae289f5ba0.js %}

It looks overcomplicated (as everything in C++) but is basically a nice type alias with CTAD. So you can do this.

```cpp
FuncPtr<int(int, double)> foo() {
    FuncPtr temporal = func; // CTAD
    return temporal;
}
```
I don't really remember when was the first time I saw something like this. So if you find the original, please leave it in the comments! Thanks for reading.
Leetcode - 133. Clone Graph
Tags: leetcode
Published: 2023-11-14 04:13:37

```javascript
/**
 * // Definition for a Node.
 * function Node(val, neighbors) {
 *    this.val = val === undefined ? 0 : val;
 *    this.neighbors = neighbors === undefined ? [] : neighbors;
 * };
 */

/**
 * @param {Node} node
 * @return {Node}
 */
var cloneGraph = function(node) {
  if (!node) return null;
let visited = new Map();
    const dfs = (original) =>{
    if (!original) return null;
        if(visited.has(original.val)){
            return visited.get(original.val)
        }else{
            const copy = new Node(original.val,[]);
            visited.set(copy.val, copy);
            original?.neighbors.forEach((nei)=>{
                copy.neighbors.push(dfs(nei));
            })
            return copy
        }
    }

    return dfs(node)
};
```
Please do follow the series if you are struggling with leetcode questions 😇
Import File SQL phpMyAdmin
Tags: sql, sqlserver, php
Published: 2023-11-14 04:02:37

Haii teman-teman, dengan ini saya akan memberikan trik untuk mempermudahkan import file SQL pada phpMyAdmin tanpa mengetik manual.

1. Langkah pertama pastikan memiliki file ".sql" untuk mengimportkan suatu project pada phpMyAdmin.
Artigo: Flashback Database
Published: 2023-11-14 02:54:30

Flashback é uma tecnologia introduzida no Oracle Database 10g. Esta tecnologia nos permite realizar várias operações no banco de dados com a intenção de encontrar soluções para os problemas lógicos, como por exemplo: restaurar uma tabela para um ponto do tempo antes de algum DELETE; restaurar uma tabela que foi removida; consultar dados de uma tabela em um momento específico no passado; voltar o banco de dados para um ponto no tempo.

Esta tecnologia não necessita de uma restauração física dos arquivos do banco de dados. O Flashback usa dados de UNDO ou Flashback Logs, dependendo de qual função Flashback está sendo utilizada. O Flashback não é um método de recuperação que substitui ferramentas como RMAN restore/recover, export/import ou outros; mas é um complemento.

A seguir tera alguns exemplos de sintaxe do Flashback Database:

Configurar a Fast Recovery Area:

```
SQL> alter system set db_recovery_file_dest = '/u03/app/oracle/fast_recovery_area' scope=both; 
    System altered.
```

Configurar a retenção dos Flashback Logs

```
SQL> alter system set db_flashback_retention_target = 4320 scope=both;
      System altered.
```

Habilitar o Flashback a nível de Container Database:

```
SQL> show con_name
      CON_NAME 
      ------------------------------ 
      CDB$ROOT
      SQL> alter database flashback;
      Database altered.
```

Vantagens do Flashback Database:

- Redução da Sobrecarga de Armazenamento: Pode reduzir a necessidade de manter vários backups completos, já que o Flashback Database pode ser usado como uma alternativa para certos cenários de recuperação.

- Recuperação Rapida: Permite reverter o banco de dados para um ponto no tempo anterior de maneira rápida e eficiente, evitando a necessidade de restaurar backups completos.
 
Desvantagens do Flashback Database:

- Impacto no Desempenho: O processo de flashback pode impactar o desempenho do sistema, especialmente em grandes bancos de dados, devido à carga adicional de processamento.

- Dependência de logs: O Flashback Database depende da existência de logs de flashback, que precisam ser mantidos e gerenciados adequadamente. A perda desses logs pode comprometer a capacidade de realizar a recuperação usando o Flashback Database.

Cenários em que o Flashback Database pode ser utilizado no mercado:

Útil para realizar testes em aplicações e depois desfazê-las;
Para testar alguma atualização;
Desfazer alterações indesejadas;
Desfazer um OPEN RESETLOGS;
“Levar“ um PDB a diferentes pontos no tempo.
Meme November: Day - 14
Tags: webdev, programming, beginners, productivity
Published: 2023-11-14 02:52:00


Hello there! I am excited to announce that we will be starting a series in November where we will be sharing some funny programming memes with you every day. We understand how important it is to have a good laugh, especially when you're a programmer, and we believe that these memes will give you just that. So, make sure to stay connected with us throughout November, and keep an eye out for some hilarious programming memes that we will be sharing with you every day!

---


[![How to end a frontend developers career](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7a0kcuxyqvh7jw0tq0r8.jpg)](https://twitter.com/AlarmsSnooze)


---

---

Check my website [Demo coding](https://democoding.in/) for updates about my latest CSS Animation, CSS Tools, and some cool web dev tips. Let's be friends!

Don't forget to subscribe to our channel : [Demo code](https://www.youtube.com/@democode)
Dynamic rate-limiting middleware in Express
Tags: node, javascript, express, expressratelimit
Published: 2023-11-14 02:39:26

To create a dynamic rate-limiting middleware in Express that can be used at different levels (controller, app, router), you can use the `express-rate-limit` package. This middleware can be configured dynamically based on the parameters you pass.

Here's an example of a custom rate-limiting middleware that can be used at different levels in Express:

First, install the `express-rate-limit` package:

```
npm install express-rate-limit
```
Then, create a module that exports a function to generate the rate-limiting middleware dynamically:

```
// rateLimitMiddleware.js

const rateLimit = require("express-rate-limit");

function createRateLimitMiddleware(options) {
  // You can configure the rate limit dynamically using the options parameter
  const limiter = rateLimit({
    windowMs: options.windowMs || 60 * 1000, // 1 minute by default
    max: options.max || 100, // 100 requests per windowMs by default
    message: options.message || "Too many requests, please try again later."
  });

  return limiter;
}

module.exports = createRateLimitMiddleware;

```

---

Next, in your Express application, you can use this dynamically created rate-limiting middleware in different levels:

## At the App Level:

```
const express = require("express");
const app = express();
const createRateLimitMiddleware = require("./rateLimitMiddleware");

// Apply rate limiting for the entire app
const appLevelRateLimiter = createRateLimitMiddleware({
  windowMs: 60 * 60 * 1000, // 1 hour
  max: 1000, // 1000 requests per hour
});

app.use(appLevelRateLimiter);
// Other app configurations and routes

```

---

## At the Router/Route Level:

```
const express = require("express");
const router = express.Router();
const createRateLimitMiddleware = require("./rateLimitMiddleware");

// Apply rate limiting for a specific router
const routerLevelRateLimiter = createRateLimitMiddleware({
  windowMs: 60 * 1000, // 1 minute
  max: 30, // 30 requests per minute
});

router.use(routerLevelRateLimiter);
// Define router paths and their respective handlers

```

---

## At the Controller Level (per route):

```
const express = require("express");
const router = express.Router();
const createRateLimitMiddleware = require("./rateLimitMiddleware");

// Apply rate limiting for specific routes/controllers
const specificRouteRateLimiter = createRateLimitMiddleware({
  windowMs: 60 * 1000, // 1 minute
  max: 10, // 10 requests per minute
});

router.get("/specific-route", specificRouteRateLimiter, (req, res) => {
  // Controller logic for the specific route
});
```

This setup allows you to dynamically configure rate-limiting based on your specific needs at different levels within your Express application. Adjust the parameters in the options object passed to createRateLimitMiddleware to fit your requirements.
Desvendando Views, Sequences e Synonyms
Published: 2023-11-14 02:31:54

Fala, galera! Vamos mergulhar no mundo tech e entender três paradas super importantes: Views, Sequences e Synonyms. Esse artigo vai descomplicar esses conceitos, mostrando como eles são usados no dia a dia, quais são os pontos positivos e negativos, e dar uns exemplos massa de como eles são aplicados no mercado.

**1. Views**

Views são tipo umas tabelas virtuais que a gente usa em bancos de dados. Elas são baseadas em resultados de consultas SQL e ajudam a ver os dados de um jeito específico, sem mexer na info original.

Sintaxe:

```
CREATE VIEW resumo_vendas AS
SELECT
    id_produto,
    nome,
    preco,
FROM
    produtos;
```

**Vantagens e Desvantagens:**

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

Exemplos de Aplicações:
•	Criar relatórios e análises de dados;
•	Criar uma interface para acessar os dados de um jeito específico sem expor toda a estrutura do banco.

**2. Sequences**

Sequences são uns objetos no banco de dados que servem para criar números únicos, geralmente usados para fazer identificadores únicos para registros.
Sintaxe:

```
CREATE SEQUENCE nome_da_sequence
START WITH valor_inicial
INCREMENT BY valor_do_incremento;

```

**Vantagens e Desvantagens:**

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

Exemplos de Aplicações:
•	Criar números de ID para clientes num banco;
•	Controle de versão em sistemas de gerenciamento de documentos.

**3. Synonyms**

Synonyms são tipo uns apelidos para objetos no banco de dados, como tabelas ou views, que facilitam o acesso e a gestão deles.
Sintaxe:

```
CREATE SYNONYM nome_do_synonym FOR nome_do_objeto;
```

**Vantagens e Desvantagens:**

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

Exemplos de Aplicações:
•	Acessar tabelas usadas direto em esquemas diferentes;
•	Mudar aplicações para novos objetos de banco sem mexer no código-fonte.

**Conclusão**

Beleza, pessoal! Entender Views, Sequences e Synonyms é crucial pra quem tá na área de dados e tech. Cada um tem suas manhas, vantagens e desvantagens. Saber usar essas ferramentas pode fazer toda a diferença entre um sistema de dados que é suave de lidar e um que é um baita problemão. Então, sacar como eles funcionam, suas limitações e as melhores práticas é chave para mandar bem em projetos de banco de dados e desenvolvimento de software. Valeu!

 

 




Jônison Silva, Mateus Miranda, Paulo Rogério Matos.
Fixing Azure CI/CD For My Azure Resume Site
Tags: cicd, githubactions, azure
Published: 2023-11-14 01:03:38

A while back I created my personal CV site that I'm hosting in an azure storage $web container. I use this site as another place to host all my credentials and links to myself, as well as host my resume. When I first created my CI/CD workflow everything was working flawlessly when I went through my testing, until recently. I made some major updates to my page, and I then noticed that my site wasn't updating when I'd make my pushes. I went to my repository page and did a quick check on my jobs and saw that I wasn't getting any failed workflows. The next thing I did was hop into the azure portal and check the caching rules on the endpoint. After seeing everything was set up the way I wanted it to be, I then decided to do a manual purge of the endpoint to see if the change would come through, also, with no luck on the updates again. I went back into my GitHub repo and did a deep dive into the build files. Everything in the first 3 steps of the job were running smoothly, but then came to the upload to blob storage. After reading through the workflow file I noticed that it wasn't updating the blob storage because it had already existed, prompting me to add --overwrite command to my azure cli script in my YAML file. I quickly updated the file, committed my changes and low and behold we have working CI/CD again!

It's always frustrating when things stop working or aren't working as expected, but the reward of solving a problem and seeing everything finally running correctly again and so rewarding to me. Sometimes it's the simplest fix, such as for this situation adding a simple command to my script, sometimes it's not, but the roller coaster ride of the challenge of the fix always leaves me feeling good when the task is complete, and we're back up and running.
How to Stream Completed JSON from OpenAI’s GPT (and Kill the Spinner)
Tags: frontend, ux, openai, opensource
Published: 2023-11-14 00:50:36

OpenAI's GPT-4 and GPT-3.5 now allow developers to receive responses in structured JSON format, offering new UI possibilities. But, this feature has its challenges, especially with streaming outputs. When responses are streamed from the language model in JSON mode, they often result in incomplete JSON structures that can't be parsed.

![Example of a JSON string being streamed in from GPT-4 using JSON mode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4qopafhskg450j8fu1bm.gif)

This leads to the need for spinners while waiting for the complete JSON, which can slow down the user experience. For instance, in listing available fruits from a partially streamed JSON, a spinner is used to indicate the response is still generating.

![Example of using spinners while waiting for GPT to finish its response](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i7ssvflacglfl4ih1g23.gif)


## Introducing json-autocomplete

[JSON Autocomplete](https://www.npmjs.com/package/json-autocomplete) allows you to input an incomplete JSON string, which it completes for you:
![Example of json-autocomplete finishing the incomplete JSON returned from GPT](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tiy0yi1oqhj4ttz4uxwm.gif)

This means you can directly show the AI's output in your UI, making your product feel faster.
![Example of UI elements being streamed in using json-autocomplete](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e234t6nhxsj4a3ga77dd.gif)


## Setting Up json-autocomplete

Integrating [JSON Autocomplete](https://www.npmjs.com/package/json-autocomplete) is straightforward. First, install it using npm or yarn:
```
npm install json-autocomplete
```

Then, import it into your project and use it to convert incomplete JSON responses into complete ones.
```javascript
import JSONAutocomplete from 'json-autocomplete';

const jsonResponseFromGPT = // your partially streamed JSON response from GPT;

const completeJsonString = JSONAutocomplete(jsonResponseFromGPT);
```

Remember to parse the completed JSON string:

```javascript
const parsedJson = JSON.parse(completeJsonString);
```

Now, you can use `parsedJson[0]?.name` as soon as it streams from the modal.


## Applications and Motivations
[JSON Autocomplete](https://www.npmjs.com/package/json-autocomplete) improves user experience by quickly presenting data and enables new UI design possibilities, as demonstrated in the [Operator app](https://www.operator.app).

![Example of json-autocomplete's use in the Operator app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jyrzqpew7r6tmnkvoyk2.gif)

This is still a work in progress so if any bugs arise create an issue in the repo: [https://github.com/Operator-technology/json-autocomplete](https://github.com/Operator-technology/json-autocomplete)
A toolkit for adopting LLM into your existing app
Tags: toolkit
Published: 2023-11-14 14:31:51

---
title: A toolkit for adopting LLM into your existing app
published: true
date: 2023-11-14 00:47:00 UTC
tags: Toolkit
canonical_url: https://reactjsexample.com/a-toolkit-for-adopting-llm-into-your-existing-app/
---

# Deep Grasp
 ![A toolkit for adopting LLM into your existing app](https://reactjsexample.com/content/images/2023/11/Code_2023-11_16-41-53.jpg)

The goal of this project is to seamlessly integrate LLM into your current app. This means that users can retrieve and interact with a specific part of the user interface using natural language, without any intrusive measures.

NoteThis repo is still under heavy development, we welcome any idea and feedback.

## What is it

In the age of AI, we see increasing trend to adopt LLM into web applications, but for a large real world app, it is usually not easy to integrate AI feature into thousands lines of code.

Deep Grasp, aimed to non-intrusive integration to LLM, is able to do more by less code, as an example, we simply change a little code like:

```
+import {graspable} from '@deep-grasp/react';
+
-export default function Clock({timezone}: Props) {
+function Clock({timezone}: Props) {
     // ...
 }
+export default graspable(Clock, 'View clock in specified timezone');
```

As a result, we can get smooth and easy to use LLM features, a decorated component can be created and rendered automatically from user’s natural language query.

#

world-clock-demo.mp4

<video src="https://user-images.githubusercontent.com/639549/281655039-32fe1dfb-400c-40ea-b890-369500d91c0b.mp4" data-canonical-src="https://user-images.githubusercontent.com/639549/281655039-32fe1dfb-400c-40ea-b890-369500d91c0b.mp4" controls="controls" muted="muted" style="max-width:100%;min-height: 200px"></video>

## GitHub

[View Github](https://github.com/ecomfe/deep-grasp?ref=reactjsexample.com)
Archivo .env Laravel
Tags: spanish, laravel
Published: 2023-11-14 00:01:50

```
APP_NAME=Laravel
APP_ENV=local
APP_KEY=
APP_DEBUG=true
APP_URL=http://localhost

LOG_CHANNEL=stack
LOG_DEPRECATIONS_CHANNEL=null
LOG_LEVEL=debug

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel
DB_USERNAME=root
DB_PASSWORD=

BROADCAST_DRIVER=log
CACHE_DRIVER=file
FILESYSTEM_DISK=local
QUEUE_CONNECTION=sync
SESSION_DRIVER=database
SESSION_LIFETIME=120

MEMCACHED_HOST=127.0.0.1

REDIS_HOST=127.0.0.1
REDIS_PASSWORD=null
REDIS_PORT=6379

MAIL_MAILER=smtp
MAIL_HOST=mailpit
MAIL_PORT=1025
MAIL_USERNAME=null
MAIL_PASSWORD=null
MAIL_ENCRYPTION=null
MAIL_FROM_ADDRESS="hello@example.com"
MAIL_FROM_NAME="${APP_NAME}"

AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=
AWS_DEFAULT_REGION=us-east-1
AWS_BUCKET=
AWS_USE_PATH_STYLE_ENDPOINT=false

PUSHER_APP_ID=
PUSHER_APP_KEY=
PUSHER_APP_SECRET=
PUSHER_HOST=
PUSHER_PORT=443
PUSHER_SCHEME=https
PUSHER_APP_CLUSTER=mt1

VITE_APP_NAME="${APP_NAME}"
VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
VITE_PUSHER_HOST="${PUSHER_HOST}"
VITE_PUSHER_PORT="${PUSHER_PORT}"
VITE_PUSHER_SCHEME="${PUSHER_SCHEME}"
VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
```
What Traits Lead to Fast Promotion?
Tags: discuss
Published: 2023-11-14 00:00:00

---
published_at : 2023-11-14 00:00 +0000
---
What traits do you believe lead to the fastest promotions in the tech industry? How can developers develop these qualities for career growth?

Follow the DEVteam for more discussions and online camaraderie! {% embed https://dev.to/devteam %}
Project Preferences: Long-Term or Quick Wins?
Tags: discuss, codenewbie, beginner
Published: 2023-11-14 00:00:00

---
published_at : 2023-11-14 00:00 +0000
---
In your coding projects, do you lean towards prolonged, in-depth engagements or quick, immediate wins? Share your experiences and the reasoning behind your preference.
<br>
Follow the CodeNewbie Org and #codenewbie for more discussions and online camaraderie!
{% embed https://dev.to/codenewbieteam %}