teleren/devto huggingface dataset:
Exploring JavaScript Events
Published: 2023-05-15 01:08:13

**Introduction:** 
JavaScript events are a vital component in crafting dynamic and interactive web applications.

**What are JavaScript Events?**
JavaScript events are actions or occurrences that take place within a web browser.



**Event Propagation: Capturing and Bubbling**

JavaScript events follow the concept of event propagation, which describes how events move through the Document Object Model (DOM) tree. Event propagation consists of two phases: capturing and bubbling.

During the capturing phase, the event starts at the root of the DOM tree and travels down to the target element. In this phase, event handlers attached to parent elements can intercept the event before it reaches the target.

Once the capturing phase is complete, the event enters the target element and triggers any event handlers attached to it. This is known as the target phase.

Finally, during the bubbling phase, the event travels back up the DOM tree, allowing event handlers on parent elements to react to the event. Bubbling is the default behavior for most events in JavaScript.

Understanding event propagation is crucial, especially when dealing with nested elements that have event handlers. You can control the propagation by using the event.stopPropagation() method to halt the event from further bubbling, or event.stopImmediatePropagation() to halt propagation and prevent other handlers on the same element from executing.

**Commonly Used JavaScript Events**
JavaScript offers a wide range of events to cater to various user interactions and browser actions. Here are some commonly used events:

click: Triggers when the user clicks on an element.
mouseover/mouseout: Fired when the user's mouse enters or exits an element.
keydown/keyup: Activated when a key is pressed or released on the keyboard.
submit: Triggered when a form is submitted.
load: Fired when a web page or an external resource finishes loading.
These examples are just a glimpse of the vast collection of events available for different scenarios.

**Event Delegation**
Event delegation is a powerful technique in JavaScript that allows you to handle events on multiple elements efficiently. Rather than attaching event handlers to individual elements, you attach a single event listener to a parent element that encompasses the target elements.

With event delegation, you can dynamically add or remove child elements without worrying about attaching or detaching event handlers. The event listener will handle the events on behalf of the child elements.

**Conclusion**
Understanding JavaScript events is essential for creating interactive and responsive web applications. By harnessing the power to respond to user actions and browser events, you can craft engaging experiences that captivate your audience
dbconfig.php file
Published: 2023-05-15 00:38:25

I have had some experience with PHP and I am having a problem that I have not had before and that's possibly because I have a new computer and I have reinstalled PHP. 

I am missing the dbconfig.php file. 

I have tried to download it several times and normally it is part of a group of files that download in .zip format. Nothing so far has worked.

Any suggestions as a good way of getting this?

Mike
Dynamic Columns in Mariadb (Part 2)
Published: 2023-05-15 00:38:10

In this part we will see why we use dynamic columns in mariadb basically its advantages along with the limitations of using dynamic columns

## **Benefits of Dynamic Columns**

- Flexibility: Dynamic columns allow for the storage of complex and variable data structures in a single column. This can simplify the database schema and reduce the number of tables and columns required.

- Scalability: Dynamic columns can scale to handle large and complex datasets, as they can store a wide range of data structures and formats.

- Simplified Data Management: Dynamic columns can simplify data management by allowing for the creation of more flexible and adaptable database schemas. This can reduce the need for complex ETL processes and data transformations

## **Limitations of Using Dynamic Columns**

Like every feature dynamic columns also comes up with some trade offs.

- Complexity:  Dynamic columns can be more complex to work with than traditional columns, as they require the use of specialized functions and operators to manipulate and retrieve data.

- Storage Overhead: Dynamic columns require additional storage overhead to store the binary data associated with the column. This can increase the storage requirements of the database.

- Limited Compatibility: Dynamic columns are a feature specific to MariaDB, and may not be compatible with other database systems or tools. This can limit the portability and interoperability of data stored in dynamic columns.

## **Conclusion**

Dynamic columns are very important and useful feature of mariadb which can help create flexible schemas through which variable data structures can be stored in a single columns. They can help in simplifying database design and  reduce the need for complex ETL processes and data transformations. But at the same time it is really important to realize that dynamic columns should be used by first analyzing and understanding what type of data would be stored and using dynamic columns is beneficial or not as it also comes up with trade-offs.
Dynamic Columns in Mariadb (Part 1)
Published: 2023-05-15 00:18:53

In this article, we will explore the concept of dynamic columns in MariaDB, including how they work, how to create and use them, and their benefits and limitations.

## **Dynamic Columns**

Dynamic columns are a feature in MariaDB that allow the creation of columns that can store data in a flexible and scalable manner. Unlike traditional columns, which have a fixed data type and length, dynamic columns can store data structures of varying complexity, including arrays, maps, and even entire JSON documents.

Dynamic columns work by storing the data in a binary format that can be parsed and manipulated by MariaDB using a set of functions and operators. This allows developers to create and store complex data structures in a single column, without the need for multiple columns or tables.

## **Creation and Use of Dynamic Columns**

Creating a dynamic column in MariaDB is relatively straightforward. To create a dynamic column, you need to specify the column type as **DYNAMIC** when creating the table. For example, the following SQL statement creates a table with a dynamic column:

```
CREATE TABLE my_table (
  id INT NOT NULL PRIMARY KEY,
  dynamic_column DYNAMIC
);

```

Once you have created a table with a dynamic column, you can insert data into the column using the INSERT statement. The data should be in the binary format expected by the dynamic column.

To retrieve data from a dynamic column, you can use the dynamic column functions and operators provided by MariaDB. These functions and operators allow you to extract and manipulate data stored in the dynamic column, and can be used in SQL queries and stored procedures.

Here is an example of how to use the dynamic column functions to extract data from a dynamic column:

```
SELECT id, DYNAMIC_COLUMN_GET(dynamic_column, 'key1') AS value1, DYNAMIC_COLUMN_GET(dynamic_column, 'key2') AS value2
FROM my_table;

```

This query retrieves the id, value1, and value2 fields from the my_table table. The **DYNAMIC_COLUMN_GET** function is used to extract the values associated with the **key1** and **key2** keys in the dynamic column.

Benefits and Limits of Dynamic columns are discussed in next part [part-2](https://dev.to/umerfreak/dynamic-columns-in-mariadb-part-2-307b)
【最新】Google Pixel Fold のスペック・仕様情報一覧
Published: 2023-05-15 00:10:59

[Google Pixel Fold](https://app2spec.com/google-pixel-fold)は、最高の折りたたみ式携帯電話に関しては、複数の主要プレーヤーが存在し得ることを示すために登場した。Google初の折りたたみ式は、特にサムスンがGalaxy Z Fold 5で5番目のこのようなデバイスを間もなく発表するため、多くの期待を持って到着したものです。

では、Pixel Foldは待つ価値があったのでしょうか、そして何がそれを際立たせているのでしょうか。その理由を考えてみましょう。

Pixel Foldは、折りたたみ式携帯電話に見られる最も薄いデザイン、使いやすいワイドカバーディスプレイ、そしてもちろん、Pixel級のカメラを誇っています。しかし、1,799ドルと、Pixel Foldは決して安くはありません。ここでは、あなたが知るべきすべてを紹介し、Pixel Foldを購入する5つの理由とスキップする3つの理由をまとめたものをチェックしてください。
Enhance CSRF package - now supports multipart form data
Tags: webdev, javascript, webcomponents
Published: 2023-05-15 21:47:15

---
title: Enhance CSRF package - now supports multipart form data
published: true
date: 2023-05-15 00:00:00 UTC
tags: webdev, js, webcomponents
canonical_url: https://martinhicks.dev/articles/enhance-csrf-package-update
---

I've just published a minor update to my [CSRF plugin](https://www.npmjs.com/package/@hicksy/enhance-csrf) for [Enhance projects](https://enhance.dev/).

v0.9.0 now supports `multipart/form` data, meaning you can easily use the `<csrf-form></csrf-form>` component for forms that contain file uploads.

_**usage:**_

```
<csrf-form method="post" action="/upload" enctype="multipart/form-data">
  <input type="file" name="file" />
</csrf-form>

```

_**outputs:**_

```
<form action="/si-novi/christopher-dee/media/upload" method="post" enctype="multipart/form-data">
  <input type="hidden" name="csrf" value="540c460e-946e-4c78-8c8d-63c4cd091ee9"> <!-- auto-generated hidden input with the unique csrf token for this request (use with verifyCsrfToken on your post handler) -->
  <input type="file" name="file">
</form>

```

Additionally, I've also improved the html generation for the component so you can now include all the following optional attributes and they'll pass-through into your HTML `<form>` element.

```
enctype
target
acceptCharset
autocomplete
id
novalidate
rel

```

Of course you can still use the standaone `<csrf-input></csrf-input>` if you'd prefer to use a standard form tag.

### Get in touch

Any feedback on your usage of this plugin, bugs, or suggestions for improvements please get in touch on [GitHub](https://github.com/hicksy/enhance-csrf). I'd love to hear from you.

- GitHub: [https://github.com/hicksy/enhance-csrf](https://github.com/hicksy/enhance-csrf)
- NPM: [https://www.npmjs.com/package/@hicksy/enhance-csrf](https://www.npmjs.com/package/@hicksy/enhance-csrf)

* * *
Updating Data in a Table
Tags: opengauss
Published: 2023-04-13 02:33:22

Existing data in a database can be updated. You can update one row, all rows, or specified rows of data, or update data in a column without affecting the data in the other columns.

The following types of information are required when the UPDATE statement is used to update a row:

Table name and column name of the data to be updated
New column value
Rows of the data to be updated
Generally, the SQL language does not provide a unique ID for a row of data. Therefore, it is impossible to directly specify the rows of the data to be updated. However, you can specify the rows by declaring the conditions that must be met by the updated row. If a table contains primary keys, you can specify a row using the primary keys.

For details about how to create a table and insert data to it, see Creating Tables and Inserting Data to Tables.

c_customer_sk in the table customer_t1 must be changed from 9527 to 9876:

""
UPDATE customer_t1 SET c_customer_sk = 9876 WHERE c_customer_sk = 9527;
You can use a schema to modify the table name. If no such modifier is specified, the table is located based on the default schema path. In the statement, SET is followed by the target column and the new column value. The new value can be a constant or an expression.

For example, run the following statement to increase all the values in the c_customer_sk column by 100:

""
UPDATE customer_t1 SET c_customer_sk = c_customer_sk + 100;
This statement does not include the WHERE clause, so all rows are updated. If the statement includes the WHERE clause, only the rows matching the clause are updated.

In the SET clause, the equal sign (=) indicates value setting. In the WHERE clause, the equal sign indicates comparison. WHERE may not represent an equation and can be replaced by other operators.

You can run an UPDATE statement to update multiple columns by specifying multiple values in the SET clause. For example:

""
UPDATE customer_t1 SET  c_customer_id = 'Admin', c_first_name = 'Local' WHERE c_customer_sk = 4421; 
After data has been updated or deleted in batches, a large number of deletion markers are generated in the data file. During query, data with these deletion markers needs to be scanned as well. In this case, a large amount of data with deletion marks can greatly affect the query performance after batch updates or deletions. If data needs to be updated or deleted in batches frequently, you are advised to periodically run the VACUUM FULL statement to maintain the query performance.
Again, Chaos....
Tags: vehicle, delinquency, home, communication
Published: 2023-05-14 23:49:53


Creations Network TJ Ltd IP 2023 All Rights Reserved.

Header# 1. Again Chaos.... 

Car door, ignition, gears transport then the notice, developments on your way to the delightful office or from the office, again, chaos the residence is in chaos, what's wrong you the driver parent wonders. Then the answer is in the car you are driving. Relief, one question answered, some anxiety is diffused. You are negotiating with the rush hour conventions, entertaining, yet not beneficial as the parent it is very difficult to process any information calmly routinely when balance does not apply at home, or in the office the two fundamental environments, every where else is on the scale of preference threshold wise. One hour later you the driving parent turn off the car ignition in the garage or on drive way forecourt, residence keys in hand, now justice. 

Header ## 2 Technological Remedies..
The technology we are describing in this post primarily will be in the car and home simultaneously, due to confidentiality full details are not available, for full details arrangements will be structured accordingly and can be made via 07919242607, serious buyers only the curious can derive information from this publication.

This link is just illustrative it is not representative of the technology referred to and we are not infringing copyright, patent rights, design rights, logos, trade marks etc and we take no responsibility for any third party that attempts any Intellectual Property infringement owned by third party companies.

car link thus: https://www.motors.co.uk/used-cars/

The technology will also be fitted into properties for use as briefly indicated prior,

Property link thus: https://www.rightmove.co.uk/

Same disclaimer applies as it is illustrative only and not intended for any commercial gain of any description.
Codecademy Project Portfolio
Tags: python, codecademy, terminal
Published: 2023-05-14 23:46:08

# Codecademy Portfolio Project: Recommendation Software App 

[Source Code](https://github.com/gflujan/recommendation-software-app) 

# Overview 

This a terminal/CLI based app that takes in user input to select a food type that they're feeling. Then, based off of input, the app will provide restaurant "recommendations" from it's internal data. 

# Technology 

This was written in Python 3. 

It's a straightforward app in that it just takes in user input and then filters out pre-defined restaurant data that's stored in a local file. 

# Screenshots

https://github.com/gflujan/recommendation-software-app/blob/main/recommendations-01.png 

https://github.com/gflujan/recommendation-software-app/blob/main/recommendations-02.png
Guidance on React and API auth
Published: 2023-05-14 23:45:04

Hi, I have a react client app that speaks to a backend GraphQL server and all is well.

I would however, like for the client to talk to Azure’s ARM API end point directly. I have managed to get this to work on a backend server using a service principal. However, if I try and do the same in the React app client, it throws errors. 

Question - is connecting via the client the correct approach or should I be handling this at the backend and effectively having the client proxy Azure API requests via my backend rather than directly. 

The latter seems inefficient; the former, less secure. Thanks for nudging me in the right direction.
Day 38: Converting Image to Text in Python
Tags: beginners, programming, python
Published: 2023-05-14 22:58:45

Today's blog entry goes into something that I've been curious about - [Optical Character Recognition](https://en.wikipedia.org/wiki/Optical_character_recognition), also known as OCR. While OCR is a specialized topic, my main focus was on a simple application: converting a screenshot of text, which is essentially an image, back into text.

To achieve this, we'll be leveraging the power of the [Tesseract OCR engine](https://en.wikipedia.org/wiki/Tesseract_(software)). Originally proprietary software developed by Hewlett-Packard, it was later released as open-source and is now maintained by Google.

For those using Windows, like myself, you'll need to install the Tesseract OCR engine using the [Tesseract Installer for Windows](https://github.com/UB-Mannheim/tesseract/wiki). The installer can be located on [this](https://github.com/UB-Mannheim/tesseract/wiki) page. Remember to set the PATH environment variable to your installation location.

Now let's get down to the code. We start by importing two essential libraries:

```
import pytesseract
from PIL import Image
```

pytesseract is a Python wrapper for the Tesseract OCR Engine. It is used the magic used to convert different types of documents - including scanned paper documents, PDF files, or even images - into text.

PIL (or Pillow in this context) is a Python library that allows you to open, modify, and save many different image file formats. For this script, we're using the Image module to open an image file.

To handle the image we want to use, we add:

```
img = Image.open('./images/convert-to-text.png')
```

That one line of code above opens and figures out the given image file. We just pass it the path to the image.

Next, we set pytesseract to the Tesseract executable (the one we installed) with the following line:

```
pytesseract.pytesseract.tesseract_cmd = 'C:/Program Files/Tesseract-OCR/tesseract.exe'

```

This line specifies the path to the 'tesseract.exe' file which is the magic that's actually doing the OCR process.

Finally, we extract the text from the image and print the result:

```
result = pytesseract.image_to_string(img)
print(result)
```

We pass the image to the image_to_string function which then uses the Tesseract-OCR engine to extract text from the image.

And there you have it! This is perhaps the simplest example I can think of to demonstrate the capabilities of OCR. It merely opens an image, utilizes the pytesseract library to read the text content of the image, and then prints out the extracted text.

Here is the complete code:

```
import pytesseract
from PIL import Image
img = Image.open('./images/convert-to-text.png')

pytesseract.pytesseract.tesseract_cmd = 'C:/Program Files/Tesseract-OCR/tesseract.exe'

result = pytesseract.image_to_string(img)
print(result)
```
Handling Image Loading with JavaScript Promises
Tags: javascript, programming, tutorial, codenewbie
Published: 2023-05-14 22:53:26

In a recent project I was working on, I encountered an issue with image loading that caused quite a bit of frustration. The project was a movie search application that fetched data from the OMDB API, which includes movie poster URLs. The issue was that some movies didn't have a poster image, and this resulted in broken image links in my application. It was unsightly and unprofessional. So, I set out to find a solution.

## The Problem:
The OMDB API returns a URL for the movie poster image, even if there isn't an image available. This URL, when used as an src attribute in an img tag, results in a broken image link. The challenge was figuring out how to validate the image URL before using it in the img tag.

## The Solution:
The solution I found leverages JavaScript Promises and the Image object to pre-load the image before displaying it. If the image loads successfully, the function resolves with the URL, which can be used as the src for the img tag. If the image fails to load, the function resolves with a placeholder image URL.

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

## Using the Function:
This function can be used with async/await to load images asynchronously, ensuring that an image or placeholder is always displayed. Here's an example of how to use it:

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

## Conclusion:
This solution elegantly handles the issue of broken image links by ensuring that every movie has a poster image, whether it's the actual poster or a placeholder. By using JavaScript Promises and the Image object, it checks if the image URL is valid before using it. This level of validation greatly improves the user experience and the overall quality of the application.
Como estudar melhor em cursos online?
Published: 2023-05-14 22:53:11

Além de saber o que estudar, é igualmente importante saber como estudar em cursos online. Você já se deparou com a situação de concluir um curso e, após dois meses, não se lembrar de praticamente nada sobre aquele assunto? Eu mesma já passei por isso diversas vezes e, ao tentar entender o que havia acontecido com as horas de estudo, cheguei a algumas conclusões.

**1. Assistir videoaulas na velocidade 2.0 geralmente resulta numa aprendizagem 0.5** - Vivemos num mundo que produz novas informações a cada segundo, e para tentar acompanhar esse ritmo frenético colocamos os vídeos na velocidade 2.0... Você faz isso? Pois eu já fiz muito e não adiantou nada. Eu consigo o certificado do curso e quase nada de conteúdo, e isso se dá porque a gente não aprende assim, tem que ter tempo de reflexão no que está sendo ouvido. Então algo que está funcionando ultimamente nos meus estudos é diminuir a velocidade e praticar uma escuta ativa. Entenda-se por escuta ativa: ato de ouvir com atenção e interesse, prestando total atenção e se interessando pelo assunto de seu interlocutor.

**2. Rotina é importante** - Ter rotina de estudos ajuda aprender mais rápido, acredito que funcione como um treino para o cérebro! O segredo é reservar um dia e horário consistente para estudar. Isso também ajuda a manter a disciplina e a progressão nos estudos. Ultimamente reservo 3 dias na semana para estudos (segunda, quarta e sexta) e determino o horário também, sempre das 20h as 22h (funciono melhor a noite).  

**3. Ritmo também é importante** - O sucesso é o acúmulo de esforços repetidos dia após dia. Não dá muitos frutos estudar intensamente durante alguns dias e ficar semanas sem olhar aquele conteúdo. Então, atente-se ao ritmo!

**4. Incluir o aprendizado no dia-a-dia dá sentido para "alocar" sua memória a longo prazo** - Para fixar melhor o aprendizado, é importante incluí-lo no dia-a-dia. Isso ajuda a tornar os conceitos mais simples e dá razão para continuar aprendendo e praticando.

**5. Escrever é preciso** - Reserve um caderno e faça anotações, pode parecer meio antigo falar isso, mas funciona. "Fazer anotações durante os estudos pode ajudar a fixar melhor o aprendizado. Estudos científicos comprovam que a escrita manual é mais efetiva para a aprendizagem do que digitar no computador, vou deixar aqui um artigo legal sobre o tema: https://milenioescolar.com.br/escrever-ou-digitar-o-que-e-melhor-para-a-aprendizagem/

**6. AI tá aí para ajudar!** - A inteligência artificial pode ser uma ótima aliada nos estudos. Experimente utilizar o ChatGPT para criar um roteiro de estudos personalizado. Perguntei aqui e o plano foi bem conciso, estabeleci o que queria aprender, quantos dias na semana, quanto tempo por dia e a sugestão foi bem interessante. Segue o link: https://chat.openai.com/

Espero que essas dicas ajudem você a estudar melhor em cursos online. Lembre-se de que aprender é um processo constante e a interação com o meio é fundamental para evoluir. Não desista dos seus objetivos e bons estudos!"