DEV Community: kevin david cuadros

How to Manage State in Astro and Svelte.

kevin david cuadros — Tue, 10 Oct 2023 03:51:48 +0000

When creating my first app in Astro and implementing Svelte, I encountered issues with sharing states between the components of my app. Astro, being focused on speed and content-centricity by default, does not maintain state when navigating between pages.

How do we solve this problem?

Implement the store

The first step is to implement the store, and for this, Astro suggests using Nanostores in its documentation.

npm install nanostores

After installing the nanostore dependency, we will implement the store that, for this example, would serve us to manage a user when they authenticate

Creating the store

To create the store, we will create our file, in this case, we will create it in the path src/store/auth.

Maintaining state between navigation

When creating the store, we'll encounter an issue if we want to navigate between pages because Astro, by default, loads the content, which would erase our stored information. How do we solve this?

To solve this issue, Astro offers a routing component <ViewTransitions /> that we should add to the <head> of our app. This component, <ViewTransitions />, provides us with page transitions without reloading the entire browser's normal navigation.

For this case, we add it to the Layout component since the <head> will be present on all pages of the app.

Use the state

Having the store and having the <ViewTransitions /> component in our <head>, we can now use the store without any inconvenience.

Here I have an app in progress, any questions are welcome.

My page https://kevincuadros.com/

Rust desde cero (parte 1)

kevin david cuadros — Mon, 29 Aug 2022 15:31:00 +0000

Este documento contiene los principios mas básicos del lenguaje de programación Rust.

Tabla de contenido

Imprimir en consola
Comentarios

Imprimir en consola

Single placeholder

el single placeholder es utilizado cuando se quiere imprimir un valor único.

fn main() {
    println!("Number: {}", 1);
}

Multiple placeholders

podemos usar múltiples placeholders dentro de la macro println!().
el número de placeholders debe ser igual el número de valores a imprimir.

fn main() {
    println!("{} con {} company", "Aprendiendo", "Cuadros");
}

Argumentos posicionales

los argumentos posicionales especifica la posición de los valores en la macro.
la lista de valores puede tener cualquier orden.
un valor puede ser utilizado cualquier numero de veces.

fn main() {
    println!("Enhance your coding skills from {0} courses.  {0} courses are very {1}", "Educative", "interactive");
}

Comentarios

Rust tiene dos maneras de hacer comentarios

Comentarios en línea

para comentar una línea de código debe comenzar por doble slash //

// Writing a Rust program
fn main() {
    //The line comment is the recommended comment style
    println!("This is a line comment!"); // print hello World to the screen
}

Comentario de bloque

el texto debe estar encerrado dentro de /*...*/

fn main() {
    /* 
    The block comment is extremely useful for temporarily disabling
    a large chunk of code. /* Block comments can also be /* nested, */ */
    To comment a large block just write in between /* text */
    */
    println!("This is a line comment!"); // print hello World to the screen
}

Variables and data types SOLIDITY

kevin david cuadros — Sat, 09 Apr 2022 17:08:48 +0000

VARIABLES

Global variables

msg Every transaction is a signed message. In this object comes the data of said message (sender, value, etc.)
tx values related to the current transaction
block values related to the current block

Local variables

They are those that occur during execution. In the EVM it is the part corresponding to volatile memory

State variables

They are variables that are stored in the ROM portion of the EVM. It's persistent memory

DATA TYPES

Integers

uint nonnegative (8 - 256 bits)
int 8 - (256 bits)

Boolean

true
false

Address

address This type of data represents addresses of ETH (20 bytes)
contains methods like .transfer or .balance

String

string

Bytes

bytes

Drag and Drop in React

kevin david cuadros — Tue, 05 Apr 2022 19:30:54 +0000

In this example it was created whit React and typescript

Drag and drop area

<div
  onDrop={handleDrop}
  onDragOver={handleDragOver}
  onDragEnter={handleDragEnter}
  onDragLeave={handleDragLeave}
>
</div>

Actions

  const handleDragOver = ( e: DragEvent<HTMLDivElement>) => {
    e.preventDefault();
    e.stopPropagation();
  };

  const handleDragEnter = ( e: DragEvent<HTMLDivElement>) => {
    e.preventDefault();
    e.stopPropagation();
  };

  const handleDragLeave = ( e: DragEvent<HTMLDivElement>) => {
    e.preventDefault();
    e.stopPropagation();
 };

 const handleDrop = ( e: DragEvent<any>) => {
    e.preventDefault();
    e.stopPropagation();
    // the 'files' constant contains the documents
    const files = e.dataTransfer.files;
 };

Smart contracts for ALL #1

kevin david cuadros — Tue, 05 Apr 2022 19:01:39 +0000

Getting Started Guide

A smart contract is a piece of code running in a blockchain in this case we use Solidity.

1 Where to use solidity ?

the easy way is use Remix (Remix is a code editor online)

2 How defined a smart contract ?

2.1 as a comment we write the license

// SPDX-License-Identifier: GPL-3.0

2.2 versions available for run the contract

pragma solidity >=0.7.0 <0.9.0;

3 My first contract

3.1 just as we define a class in other languages in solidity we write the word 'contract'

contract Asset { }

4 Types in solidity

Booleans

bool

Integers

int / uint

Address

address
address payable

sorry for the grammar I'm not very good at english

Cambiar la forma de importar un archivo en React

kevin david cuadros — Mon, 16 Aug 2021 16:40:56 +0000

Por lo regular cuando queremos importar un archivo dentro de nuestro componente hacemos esto import context from '../../context/ProjectContext' pero este tipo de importación puede llegar a generar confusión. Para solucionar esto debemos crear en la raiz de nuestro proyecto el archivo jsconfig.json y dentro de este archivo escribir el siguiente codigo


{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

A partir de esto ya podras hacer la importación de esta forma `import context from 'context/ProjectContext'`