teleren/devto huggingface dataset:
SIMPLIFYING useState HOOK IN REACT (How to think about it)
Tags: react, codingisfun, tutorial
Published: 2024-01-09 18:16:31

**Grasping the Basics: Component States and useState Hook in React**

**Introduction:**
In the world of React Apps, think of components as the building blocks – the different pieces that come together to make the whole thing work. But there's more to it than just putting them together. We need to think about how each piece behaves internally. This article breaks down why understanding these internal behaviors, or states, is crucial, and how the useState hook helps us manage them.

**The Importance of Component States:**

When we create a component, like a navigation bar, we have to consider how it might act in different situations. For example, a navigation bar could be opened, closed etc. These different possibilities can be viewed as the state of the component. So, before we start building, we should think about all the possible ways our component might behave. This way, we make sure it can handle any situation it might face.





**Understanding the useState Hook:**

The useState hook is like a secret tool for managing how our components behave. The useState is an in-built function in react. Ideally functions return a value, useState is no exemption. useState returns two things in an array – first, a variable that holds the component's current state, and second, a function that lets us change(or update) that state.

**Basic Syntax of the useState Hook**
```
const [stateVariable, setStateFunction] = useState(initialValue);

```
<u>Example:</u> 
```
const [count, setCount] = useState(0);

```
<u>**How to Read it to yourself as plain English:**</u>
"I'm creating a variable called '_count_,' it will have an initial value of 0, and I also have a function named ('setCount') to alter the value of the variable _count_"

**Putting it All Together:**
1. Start by creating a React component you want.

2. Take a moment to think about all the different ways your component might behave (its states). 
Just like how humans can have the different states e.g. healthy, sick, tired etc.

3. Use the useState hook to help your component smoothly handle those different situations you've identified in step 2. 

By following these simple steps, you ensure that your components not only fit together well but also know how to handle themselves in various situations.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wyuclf6i52h8fdj5m99u.png)
Internet Connectivity: From Click to Connection
Published: 2024-01-09 17:47:35

In the modern AI era we are thinking or concern about the repaid change of AI . Sometimes we forget how the internet works . As I am going to write series post about web development for MLOps or ML model deploy . Before staring the journey , we back into the some basic terms of internet. 

# Internet
 
The internet is a gold of modern technology. Ever wondered how, with a simple click, you're transported to a **website** ? Let's dive into the magic behind this virtual world.

When we type a website name such as "`www.dev.to`" into our browser, we're actually asking the internet to find the specific location of that site. But here's the catch: every website has a unique address known as an IP (Internet Protocol) address. These addresses (192.32.254.244) directs us to the right place on the internet.

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

### **DNS (Domain Name System)**
our internet guide. It's like a vast phone-book, translating the easy-to-remember website names into their numerical IP addresses. Once we hit enter, our request zips through our device to the ISP (Internet Service Provider). Think of the ISP as the gateway to the internet superhighway.

The ISP takes our request and begins its journey, reaching out to DNS servers to decode the website name into its corresponding IP address. With this information in hand, the ISP navigates through the complex web of internet infrastructure, searching for the precise server hosting the website we seek.

## **Submarine Cable**

But how do distant one point to other point servers/internet communicate across vast distances? Contrary to what you might expect, these cables are not above ground or in the sky but submerged deep underwater. Stretching across oceans, these cables connect continents, enabling seamless communication between servers in different regions.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k2t1nr92c2loc0mts4vk.jpg)
source : internet

Consider this: you might be in Asia, but your ISP could connect you to a server in North America. The information you access travels through these underwater cables, facilitating a global exchange of data.

It's fascinating to note that this complex process unfolds within nanoseconds. Once the ISP finds the correct server, the desired web interface appears on our screens, seemingly effortlessly.

The internet, a vast web of interconnections, relies on these intricate mechanisms, blending technical wizardry with tangible infrastructure. It's an invisible yet integral part of our daily lives, connecting us to a wealth of information and experiences.
Augmenting LLM
Published: 2024-01-17 03:30:43

---
title: Augmenting LLM
published: true
date: 2024-01-09 17:41:00 UTC
tags: 
canonical_url: 
---

[ https://medium.com/@tspann/augmenting-and-enriching-llm-with-real-time-context-b6da7ba4960a](https://medium.com/@tspann/augmenting-and-enriching-llm-with-real-time-context-b6da7ba4960a)
An initial reaction to the EU AI Act
Tags: regulation, ai, safety
Published: 2024-01-17 08:07:45

---
title: An initial reaction to the EU AI Act
published: true
date: 2024-01-09 17:40:26 UTC
tags: regulation,ai,safety
canonical_url: https://julsimon.medium.com/an-initial-reaction-to-the-eu-ai-act-5535b3933f79
---

![](https://cdn-images-1.medium.com/max/846/0*dVxValx2Pfw_ZGRR.png)

I’m done reading the 108 pages of the [EU AI act](https://artificialintelligenceact.eu/the-act/). Yes, I’m that kind of person. Boring, huh?

It’s an awful bureaucratic document, as you’d expect. Still, I think it was worth the effort, as a wake up call on best practices that we should all already have adopted, even if we’re not in scope :)

I’m not a lawyer (thank God), but IMHO AI builders and users should read the following, and start planning:

- Article 2 (Scope): guess what? If you serve traffic to EU users, you’re in (GDPR-style)
- Article 3 (Definitions)
- Article 5 (Prohibited use): hopefully, you’re not doing any of this.
- Article 6 (Classification rules for high-risk AI systems): that’s a lot of customers. Even If you don’t qualify, you’re not completely off the hook, see section (82) on page 37.
- Articles 9 to 12 : risk management, data governance, technical documentation, record keeping.
- Articles 16 to 18 : obligations of providers of high-risk AI systems, quality management system, obligation to draw up technical documentation.
- Article 29 : obligations of users of high-risk AI systems.
- Article 61: Post-market monitoring by providers and post-market monitoring plan for high-risk AI systems.
- Article 64: Access to data and documentation.
- Article 71: Penalties

On a personal level, concerned citizens may want to read sections (8), (9), (18), (21), and (23) on pages 20–22, and come to their own conclusions. Bullish for hats, wigs, and sunglasses 😎

Have you read the whole thing? What caught your eye as an AI practitioner?
How to remove background color from image & set webpage background using CSS trick only.
Published: 2024-01-09 17:38:03

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

Working on my project and stumbled upon a cool 𝘁𝗿𝗶𝗰𝗸 in 𝗧𝗮𝗶𝗹𝘄𝗶𝗻𝗱 𝗖𝗦𝗦 & 𝗖𝗦𝗦 the 𝗺𝗶𝘅-𝗯𝗹𝗲𝗻𝗱-𝗺𝘂𝗹𝘁𝗶𝗽𝗹𝘆 class! 🎨 

It's a 𝗴𝗮𝗺𝗲-𝗰𝗵𝗮𝗻𝗴𝗲𝗿 for setting 𝗶𝗺𝗮𝗴𝗲 𝗯𝗮𝗰𝗸𝗴𝗿𝗼𝘂𝗻𝗱𝘀 𝗼𝗻 𝘄𝗲𝗯 𝗽𝗮𝗴𝗲𝘀, 𝗻𝗼 𝗻𝗲𝗲𝗱 𝗳𝗼𝗿 𝗯𝗮𝗰𝗸𝗴𝗿𝗼𝘂𝗻𝗱 𝗿𝗲𝗺𝗼𝘃𝗮𝗹 𝘁𝗼𝗼𝗹𝘀! Works like a charm, even if your image has a 𝗱𝗶𝗳𝗳𝗲𝗿𝗲𝗻𝘁 𝗰𝗼𝗹𝗼𝗿 𝗯𝗮𝗰𝗸𝗴𝗿𝗼𝘂𝗻𝗱.

𝗤𝘂𝗶𝗰𝗸 𝗗𝗲𝘁𝗮𝗶𝗹𝘀:

✨ 𝗧𝗮𝗶𝗹𝘄𝗶𝗻𝗱 𝗖𝗦𝗦: Simply include 𝗺𝗶𝘅-𝗯𝗹𝗲𝗻𝗱-𝗺𝘂𝗹𝘁𝗶𝗽𝗹𝘆 in your class list of an image, and there you go! Seamless, stunning web page backgrounds.

✨𝗖𝗦𝗦: For the traditionalists, use 𝗺𝗶𝘅-𝗯𝗹𝗲𝗻𝗱-𝗺𝗼𝗱𝗲: 𝗺𝘂𝗹𝘁𝗶𝗽𝗹𝘆; same awesome results!

✨ 𝗦𝗶𝗺𝗽𝗹𝗲, 𝘀𝘁𝘆𝗹𝗶𝘀𝗵, 𝗮𝗻𝗱 𝗮𝗱𝗱𝘀 𝗮 𝘂𝗻𝗶𝗾𝘂𝗲 𝘁𝗼𝘂𝗰𝗵 𝘁𝗼 𝘆𝗼𝘂𝗿 𝗱𝗲𝘀𝗶𝗴𝗻𝘀. 𝗡𝗼 𝗺𝗼𝗿𝗲 𝗵𝗮𝘀𝘀𝗹𝗲, 𝗷𝘂𝘀𝘁 𝗽𝘂𝗿𝗲 𝗰𝗿𝗲𝗮𝘁𝗶𝘃𝗲 𝗳𝘂𝗻!

Have you tried this trick? Share your thoughts in the comments! Let's chat and swap design hacks. 🚀💬
Why do users like mindless choices?
Tags: ux, design
Published: 2024-01-09 17:22:54



Web Designers spent a lot of time over the years debating on how many times you can expect users to click to get what they want, without them getting frustrated.

The number of clicks to get anywhere seems useful criteria, but I think what counts is not the number of clicks but rather, how hard each click is ( the amount of thought required) 
I think users don't mind a lot of clicks as long as each click is painless and they have confidence that they are on the right track. ( Three mindless clicks equal to one required thoughts ) 


For More Articles: @kawward
Unlocking the Power of PostgreSQL Extensions: A Developer's Toolkit
Tags: postgres
Published: 2024-01-09 17:05:09



While PostgreSQL's core features are robust, its true versatility lies in the extensive ecosystem of extensions. These extensions act as specialized tools, empowering developers to tailor their database experience to specific needs and enhance their workflow. Let's explore some of the most valuable extensions you can leverage:

1. Apache-AGE
Apache AGE provides graph database functionality. AGE is an acronym for A Graph Extension.To learn more on Apache-AGE from the set-up to using AGE for your database visit the Apache-AGE documentation.

2. PostGIS
PostGIS is an open source software program that adds support for geographic objects to the PostgreSQL object-relational database. PostGIS follows the Simple Features for SQL specification from the Open Geospatial Consortium.

3. pg_stat_statements
pg_stat_statements provides a way to track execution statistics of SQL statements within a PostgreSQL database. This extension is particularly useful for database administrators and developers to analyze the performance of queries and identify potential optimization opportunities.

4.pgcrypto 
pgcrypto enables you to encrypt, decrypt, hash, and create digital signatures within your database

Protecting sensitive data is paramount, and pgcrypto is your shield. This extension encrypts data at rest and in transit, safeguarding confidential details from prying eyes. Store hashed passwords securely, encrypt sensitive information like credit card numbers, and perform cryptographic operations – all within the secure enclave of your PostgreSQL database. 

5.citext
citext module provides a case-insensitive character string type, citext. Essentially, it internally calls lower when comparing values.

References:

1. [Apache-AGE](https://age.apache.org/age-manual/)
2. [PostGIS](https://postgis.net/documentation/getting_started/)
3. [pgstatements](https://www.postgresql.org/docs/current/pgstatstatements.html)
4. [pgcrypto](https://www.postgresql.org/docs/current/pgcrypto.html)
5. [citext](https://www.postgresql.org/docs/current/citext.html)
ViralTales AI Review: Create Unlimited YouTube Kids Story Videos In Minutes
Tags: ai, viraltales, viraltalesaireview, software
Published: 2024-01-09 16:49:08


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nkbr57ydu4ag9re10zv6.png)
ViralTales AI Review: Features

100% cloud-basedd Based Software.

🔶3 Different Modes To Create Engaging, Profitable Kids Story Videos Quickly.

🔶Create Captivating Story Scripts For Kids in 1 Click.

🔶Effortlessly Create Engaging A.I. Characters & Images For Your Stories

🔶Bring Your Stories To Life With Human Like Voice Overs

🔶Captivating Music For Your Videos That Will Keep Kids Glued To The Screen

🔶Reach A Broader Audience With 1-Click Subtitle Generator

🔶Brand Your Videos With Intro/Outro Screens

🔶Design Captivating Thumbnails That Get More Views!

🔶Elevate Your Kid Stories With Image Background Remover Tool

🔶Enhance Your Images with Our Advanced Image Former Tool

🔶Different Aspect Ratio Options For Multiple Platforms

🔶1-Click Social Sharing To Gain More Exposure And Views

🔶ZERO Upfront Cost

🔶30 Days Money-Back Guarantee

**[👉👉 Click Here To Get More Info 👇👇](https://sumonreview.com/viraltales-ai-review/)**
How Docker containers works?
Published: 2024-01-09 16:42:28

Have you ever wondered how Docker containers work? <br><br>
<img src="https://raw.githubusercontent.com/irakan/my-learning-journey/main/memes/1.png" alt="how-docker-works" width="200"/><br><br>

First, lets make these things clear:

- VMs have their own kernel, making them heavier and slower compared to Docker containers.
- Docker containers share the host machine's kernel, making them lightweight and faster than VMs.
- There are different ways to create containers, but Docker is the most popular one (example: Podman, LXC, LXD, etc).
- A container must follow the OCI (Open Container Initiative) standards to be considered a container.

Now, lets see how (Docker Linux containers) works. <br><br>

They are normal Linux processes that run in an isolated environment. And they rely on the following Linux features:
- Namespaces: This keeps each container separate from the others. It isolates things like processes, network, user IDs, and file systems, but they still share the same basic system (kernel).
- Control groups (cgroups): These control and limit how much of the computer's resources (like CPU, memory, disk, and network) each container can use. It helps in managing and isolating resource usage for a group of processes.

So, now what happens when you execute a command like `docker run -it ubuntu bash`? <br><br>
- Docker will create a new container process.
- a new namespace will be created for the container.
- a new cgroup will be created for the container.
- a new root filesystem will be created for the container.
- a new network interface will be created for the container.

**Resources:**
- [What Is a Standard Container](https://iximiuz.com/en/posts/oci-containers/)
Docker for silicon M1/M2/M3 Chips
Tags: docker, m1, m2, m3
Published: 2024-01-09 16:40:59

---
title: Docker for silicon M1/M2/M3 Chips
published: true
description: 
tags: docker, m1, m2, m3
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2024-01-09 16:37 +0000
---

**Installing Desktop App for Silicon Ships**
[Docker Desktop](https://docs.docker.com/desktop/install/mac-install/)

1. Open the Desktop App settings.

2. Navigate to the "Features in development" section.

3. Enable "Use Rosetta for x86/amd64 emulation on Apple Silicon."

**Docker Commands:**

When using `docker-compose build`, ensure you specify the platform to avoid Docker building the image based on the local system platform. Use the following command:

```bash
DOCKER_DEFAULT_PLATFORM=linux/amd64 docker-compose build
```
Software Devs: We Live In a World Of Broken Things
Published: 2024-01-09 16:40:19

I'm building a iOS (iPhone) app which makes requests to a C# .NET Core WebAPI back-end.

I'm creating the WebAPI back-end as I create the App itself.  There's a lot of back-and-forth as I change a thing in the App and then need the WebAPI to give me different data.

## Everything's Broken
It started me thinking about how that as I work on the project, at any moment either the App or the WebAPI is broken.

It gets worse really, because any time I change the WebAPI then I have a broken App and I have to fix things over there.  It's back and forth between the too and just makes a developer feel like everything is garbage.

#### How Do Minds Deal With Broken Stuff?
That started me thinking about my interaction creating the new software and how that actually affects me.  The thing is that no one really wants to deal with broken things and always fixing things.  Your mind will work against you as you face the software you are working on, because we want things to "just work".  

It feels terrible as we confront all the broken pieces of the thing we are trying to create.  But, that's just how your mind deals with things.  It tries to run away from difficult things that are in disarray.  Brains like things to be organized and perfect, but the real world just isn't that way.  

That's just a normal brain being normal.

### Super-Power: Being Able To Deal With Broken Things
However, if you take a moment to assess why you feel grumpy or uncomfortable or upset as you work on the project that is in broken pieces you'll discover it is just because of wanting things to be right.

Things can't get right though, unless you confront each challenge and beat it.  

### Break Broken Things Into Small Pieces
My best advice (and what I'm doing in my project) each challenge into smaller things to resolve and then just work on one of them.
* Make a list so you don't feel overwhelmed -- I've found that often when I think there are a ton of things to do it's only a few when I actually write them down
* Start with the smallest thing you can succeed with
* Turn the challenge into a Learning Experience.  Take the problem and decide that you will solve this so no one else ever has to because you will document the challenge and its resolution (this helps you get the focus off the bad feelings of things being broken and puts the focus on doing the work to resolve the issue

Now, I'm going to head back over to my iOS App / WebAPI and
1. work on the smallest thing I can fix
2. look at it as a learning / documenting experience

If you're stuck, break your challenges down into small pieces and examine them as if you are going to explain the solution to someone else.
Good luck.
Responsive Grid Layout Design using html, css
Published: 2024-01-09 16:35:10

Hey there, You are most welcome to this article.

**Responsive Grid Layout Design using html, css**

![Responsive Grid Layout Design using html, css](https://res.cloudinary.com/freecodez/image/upload/v1704818105/images/xpfyezc1vkriqr8acwe3.webp)

For full source code visit : [https://freecodez.com/post/5khe4kr](https://freecodez.com/post/5khe4kr)


```html
<!-- https://freecodez.com -->
<div class="container">
    <main class="always-great-grid" id="grid">
        <div class="box" style="view-transition-name: b0"></div>
        <div class="box" style="view-transition-name: b1"></div>
        <div class="box" style="view-transition-name: b2"></div>
        <div class="box" style="view-transition-name: b3"></div>
        <div class="box" style="view-transition-name: b4"></div>
    </main>
</div>

<footer>
    <button onclick="addBox()">Add a box</button>
    <button onclick="removeBox()" type="reset">Remove a box</button>
</footer>
```

Source Code : [https://freecodez.com/post/5khe4kr](https://freecodez.com/post/5khe4kr)

For more such articles visit : [https://freecodez.com](https://freecodez.com/all)
Unnoticed Memory Leaks in Your JS App: A Guide for Future
Published: 2024-01-09 16:21:25

As I embarked on my coding journey, the intricacies of memory management always intrigued me. Despite reading numerous articles and heeding warnings from my university professors about the perils of memory leaks, I never had the chance to witness a tangible example. In this article, I aim to demystify memory leaks by presenting a straightforward example using JavaScript.

## Decoding the Memory Leak

A memory leak is a form of resource mismanagement wherein a computer program fails to appropriately handle memory allocations, leading to the retention of memory that is no longer required. In the realm of object-oriented programming, a memory leak occurs when an object persists in memory but is inaccessible to the executing code. In other words, the memory is not released, even though it is no longer required.

## Crafting a Memory Leak: A Hands-On Demonstration

To illustrate a memory leak, we'll create a function that generates a closure. A closure, in this context, refers to a function that retains access to its parent scope even after the scope has concluded. The parent scope here is the `createLeak` function, and the child scope is the `leak` function.

```js
function createLeak() {
  const leaks = [];
  function leak() {
    leaks.push("leak");
  }
  return leak;
}
```

Subsequently, we'll invoke the `createLeak` function and store the result in a variable, effectively creating the closure.

```js
const leak = createLeak();
```

To induce a memory leak, we'll execute the `leak` function within a loop. This action ensures that the `leaks` array will never undergo garbage collection.

```js
for (let i = 0; i < 100000; i++) {
  leak();
}
```

## Rectifying a Memory Leak: A Pragmatic Approach

Addressing a memory leak involves eliminating the reference to the closure. In this case, we must nullify the reference to the `leak` function.

```js
leak = null;
```

## Wrapping Up

This article has provided insights into both the creation and detection of memory leaks, along with practical solutions for rectification. I trust that this exploration has not only been informative but has also enhanced your comprehension of memory leaks.
Tetris: se lo han "pasado"
Tags: spanish, games, news, bug
Published: 2024-01-09 16:16:44

---
title: Tetris: se lo han "pasado"
published: true
description: Un adolescente de 13 años se termina el Tetris.
tags: #spanish #games #news #bug
cover_image: https://upload.wikimedia.org/wikipedia/en/a/ae/Tetris_NES_play.png
# Use a ratio of 100:42 for best results.
# published_at: 2024-01-09 16:10 +0000
---

Seguro que todo el mundo por aquí ha jugado a Tetris: https://tetris.com/play-tetris/

El Tetris para NES es considerado el canónico, el de referencia para las... [competiciones de Tetris ](https://thectwc.com/) (sí, las hay).

A medida que se progresa en los niveles, la velocidad de las fichas al caer aumenta tanto que es necesaria una técnica especial para tocar los botones "a tiempo". Hasta hace poco, se flexionaba el bíceps hasta que temblaba, y gracias a este temblor y mucha coordinación se conseguía una velocidad de "toqueteo" de botones muy grande. La más reciente consiste en golpear con los dedos de una mano el mando como si fuera un tambor, mientras con la otra se pulsan los botones aprovechando este "temblor" inducido.

El nivel 23 de Tetris es tan rápido que los programadores no se molestaron en probar que los niveles posteriores funcionaban correctamente. Básicamente lo hacían, pero como el juego cambiaba la paleta de colores para cada nivel, en algunos niveles posteriores los colores cambian de forma que las fichas no se ven. Fue necesario parchear el juego original para solucionar esto, y que los jugadores pudieran pasar a niveles inicialmente no previstos.


Pero finalmente, [un chaval de 13 años ha sido capaz de avanzar hasta el nivel 157 en Tetris](https://www.nytimes.com/es/2024/01/04/espanol/tetris-humano-gana.html), en el que algún otro bug hace que el juego se bloquee, y por tanto, termine (el Tetris en sí no tiene final). Así, es el primer jugador humano en "terminarlo". [Una IA ya había avanzado en Tetris incluso más allá antes de encontrar un bug que provocara un "cuelgue"](https://www.youtube.com/watch?v=l_KY_EwZEVA).

En su pantalla se pueden ver varios de estos bugs (errores de programación): las puntuaciones no suben de 999999, y el nivel que aparece es el 18. Todo esto sucede porque, como ya expliqué antes, los programadores de este juego nunca pensaron que se pudiera pasar del nivel 23.