DEV Community: Blitty

Rustlings V (Structs, enums)

Blitty — Sat, 05 Feb 2022 11:51:19 +0000

Structs 🥸

Like C structs these types are a set of different fields with a type and it can be used for almost everything. A cool feature that Rust have, are methods for structs which is different from a function.

"Normal" structs

Also a cool thing about Rust, that is like Javascript (ECMA6), the spread operator, which let us take the values from a struct and place them into another one in the same fields. Another feature like in ECMA6 is that when you have variables with the same name as a property from a struct, you can use the name instead of variable and value.

// creating an Animal struct
struct Animal {
  name: String,
  age: u8,
  death: bool,
  type: String,
};

let name = "Josefina";

// instanciate a new Animal
let bonnie = Animal {
  name: String::from("Bonnie"),
  age: 5,
  death: false,
  type: String::from("dog"),
};

// normal re-use from a struct to a new one
let josefina = {
  name, // instead of name: name (which is redundant)
  // also don't do these, this way, do it with the spread operator
  age: bonnie.age,
  death: bonnie.age,
  type: bonnie.type,
};

// re-use properties from a struct rust way
let guru = Animal {
  name: String::from("Guru"),
  age: 9,
  ..bonnie,
};

Tuple struct

You can use tuples as a struct instead of a normal struct. So instead of having a struct Coordinates fields with names x, y. We can have a struct tuple, which has x and y without the names.

struct Coordinates_like_MEH { X: i32, Y: i32 };
// do this 
struct Coordinates (i32, i32);

let origin = Coordinates(0, 0);
println!("x: {}, y: {}", origin.0, origin.1);

This is useful because sometimes the name of the attributes annoy more than helps.

Unit-Like structs

This are structs that does not have fields. I mean this is cool, because if you have something you don't know what it gives you, you can use this structs. (We will see on later posts, because is chapter 10)

Also, remember: Be careful with the context!!!! Because of ownership OwO

An important thing about structs, and in general, is that when you use println!() and types like integer, float, etc. they have implementd a Display method.
Structs does not have that, so you need to implement it or use Debug that can be used to print data of a field or the hole struct.

#[derive(Debug)] // u need this otherwise you won't be able to use debug
struct Meeeep {
  wtf_level: i32,
};

let meep007 = Meeeep {
  wtf_level: 10000,
};

println!("meep007: {:?}", meep007);
// output: meep007: Meeeep { wtf_level: 10000, }

println!("meep007: {:#?}", meep007);
// output:
// meep007: Meeeep {
//   wtf_level: 10000,
// }

dbg!(&meep007);
// output:
// [src/main.rs:20] &meep007: Meeeep {
//   wtf_level: 10000,
// }

let _miau = Meeeep {
  wtf_level: dbg!(-10 * meep007.wtf_level / 9086),
};
// output:
// [src/main.rs:25] -10 * meep007.wtf_level / 9086 = -11

Methods

The difference between a function and a method is that, a method is part of a struct, so it is defined on the context of that struct.

struct Animal {
  name: String,
  age: u8,
  death: bool,
  type: String,
};

// how to create a method
impl Animal {
  fn say_guau (&self) {
    println!("{} says FOLOOOOWWW MEEEEEE!!!", self.name);
  }
}

let name = "Josefina";

let bonnie = Animal {
  name: String::from("Bonnie"),
  age: 5,
  death: false,
  type: String::from("dog"),
};

say_guau(bonnie);

IMPORTANT!!!
&self means a variable called self of type Self. And what is self?? Well... I think it describes its self uwu, is a reference to an instance of type (in this case) Animal.

If you read the docs, you will see that it talks about -> which I am not going to cover. Sorry UwU

To end with structs, you can use multiple impl if you want, but I don't see why you would use two impl for the same struct when you can have everything in one.

Enums 🤪

At this point, I am tired, I want to sleep and have dinner :v butttt I am going to finish the post. So:

Enums are as you can think of, enumerators, this means that you have a set of values that can be matched. Also enums can have methods like structs.

#[derive(Debug)]
enum AnimalType {
  DOG,
  CAT,
  LION,
  IDK,
}

impl AnimalType {
  fn wtf_is_this_shit(&self) {
    println!("Tricky tricky lemons q-easy!!! {:?}", AnimalType::IDK);
  }
}

fn main() {
  let owo = AnimalType::DOG;
  owo.wtf_is_this_shit();
}

You can specify the type of a field:

enum AnimalType {
  DOG,
  CAT,
  LION,
  IDK(i32),
}

In the book there is an explanation about null values which I recommend reading.

But what it says it that in Rust you cannot have null values never!! There is an enum Option<T> being T a variable type which is used to handle not havind null values. This enum has None, and Some(T). Also T is used for generalization, we will see it on another post.

Take in consideration that you cannos operate with a variable which is Option<T> and a T variable type. There are ways to convert Option<T> on T. docs

let some_number = Some(5);
let num = 9;

let sum = num + some_number; // Will fail because Option<i32> != i32

// using None
// we are saying that it will be an Option which type is String but we don't know its value right now.
let some_value: Option<String> = None;

Using match with enums. match is a useful and important keyword for enum, becuase is the way of having multiple actions depending on which one is true.

fn main() {
  enum Drink {
    WATER,
    BEER,
    COKE,
    WINE,
  }

  match Drink::WATER {
    Drink::WATER => println!("Nice :D"),
    Drink::BEER => println!("IDIOT^4"),
    Drink::COKE => println!("IDIOT^10"),
    Drink::WINE => println!("IDIOT^0"),
  }
}

The difference between match and if, is that "if" needs to have a boolean condition.
When match is executes, it matches the value of the code associated with the pattern given, if the pattern does not match the value, it continues to the next arm, otherwise it executes what is on tje right side of "=>" (the arm).

Match patterns are evaluated in order!!!! So be caredul when using the "catch-all" pattern.

If you need to execute multiple statements, use {} (curly braces).

The code related with each arm (option) is an expression, and if you remember, that means that it "returns" that value.

Using match with Option<T>.

// docs example
fn main() {
  fn plus_one(x: Option<i32>) -> Option<i32> {
    match x {
      None => None,
      Some(i) => Some(i + 1),
    }
  }

  let five = Some(5);
  let six = plus_one(five); // we will get 6 because Some(i) == Some(5)
  let none = plus_one(None); // We will get None, because None == None
}

In case you need a pattern like an "else", because you don't need to check for 1000 cases that are the same code, you use the catch-all patterns. You can use or not the value of the "catch-all" pattern, lets see:

let dice_roll = 9;

// handling catch-all with a variable to use it, becuase be want
match dice_roll {
  3 => println!("haha"),
  7 => println!("hehe"),
  other => println!("This is s* {}", other),
}

// not handling cath-all
match dice_roll {
  3 => println!("haha"),
  7 => println!("hehe"),
  _ => (),
}

Lastly there is something called if let that is used when we want to match only one pattern and we don't care about them.

// docs example
fn main() {
    let config_max = Some(3u8);
    if let Some(max) = config_max {
        println!("The maximum is configured to be {}", max);
    }

  // equals
    match config_max {
        Some(max) => println!("The maximum is configured to be {}", max),
        _ => (),
    }
}

I think you can use if let when you have a huge enum with a lot of things and you just need to find one pattern and with the other don't need to do anything.

So this is all... for now I wish you a good day!!

Follow me!

🐦 Twitter
🐙 GitHub
👥 LinkdIn

Rustlings IV (Ownership)

Blitty — Mon, 31 Jan 2022 16:10:04 +0000

This is the most difficult part in my opinion. Because is totaly different from other languages like C. And is kind of interesting too.

So...

First of all, everything I write here can be found in the docs

OwnerShip 👀

What is ownership?

Ownership is a set of rules that governs how a Rust program manages memory.

I think the definition is easy, also as you will see, this "rules" prevents us from using the debugger too much which is cool because u've controlled "stupid" things before running!!!

Docs talks about Heap and Stack which are important!! I am going to talk a little about them.
As u should know both, the stack and the heap are data structures.

First the stack. What is it?

Well the name says everything, a stack is a data structure which can either pop or push. When u push a new value, it is stacked at the top and when u pop a value, it removes the top value. You can only access the top value, so to get the first value you need to pop everything that is over it.

Something like this:

Why do we need to know about it??
Well... because things like, when you call a function, its parameters and local variables are pushed to the stack. When finished they are poped.

Maybe you don't see why you need this, but is not "you need or not". It is done for simplicity.

If you have had program in assembler, you can understand why we need it. You would have used it to push a value you will need later, but we don't do this in rust.

Also each process has its own stack and heap at run time.

Okey, hope everything is:

Now... what is the heap?

As we said earlier, it is a data structure, so we can use it to store "values". It is less efficient than stack for some things, because when you create a new varible, you need to search for a space that is not being used to store that value.

So like docs says "is a little messy", and when you need to get a value, you have to follow the pointer. It is unefficient but, another point of view, it is good because is much more flexible than the stack.

Also the heap is used for dynamic allocating.

More info about Heap and Stack

(I don't really drink coffe...)

This are the owner ship rules:

Each value in Rust has a variable that’s called its owner.
There can only be one owner at a time.
When the owner goes out of scope, the value will be dropped.

Remember them because you will need it uwu

When we are doing -->

let s1 = String::from("hello");

we are creating something like this -->

name	value
ptr	->
len	5
capacity	5

index	value
-> 0	h
1	e
2	l
3	l
4	o

(ptr points to index 0)

If you come from C, you know that you are able to allocate dynamic memory with malloc, calloc, etc but you are responsible for "freeing" that memory, and you use free. Here comes one thing, if you allocate memory and also make a reference to it (a pointer), when you free that pointer, you are "freeing" that memory which is pointing. You have to be careful with this because if you free the variable (not the pointer), you will be "freeing" something that is already free, so you will collapse the program.

So it is a bit difficult because you are, maybe wasting a lot of memory or you are just de-allocating memory everywhere, so it's kind of difficult and it takes experience. But once you get it, everything is okey.... I think....

// test.c
#include <stdio.h>
#include <stdlib.h>

int main ()
{
  int *o = (int *) malloc(sizeof(int));
  *o = 5;

  int *e = o;

  printf("%d - %d\n", *o, *e);
  free(e);
  printf("%d - %d\n", *o, *e);
  free(o); // error

  return 0;
}

This is the output:

Also you can try this code on Repl.it

I think this is clear enough.
Now lets talk about languages like Java that has a Garbage Collector (GC) which free the memory when that part of memory is not used. Of course having a GC is okey (?) if you don't want to play with memory and make your prorgam explode. But... meh.

What Rust does is simply de-allocate that memory that has been used when the scope has end. A scope is, for example, a function, or the main, as well coding blocks.

If you don't know what a block is, here is an example:

fn main ()
{
  { // start of block and a new scope
    let x = 9;
  } // end of the scope, so x is being "free" (de-allocated)
}

You need to take that in consideration that. In depth, what Rust does is call a function drop which basically de-allocates memory.

In my opinion, this approach is much better because you just have to control when you need that value from the scope.

Remember the c code whe saw later? Well, now you will see what Rust do if you make something similar, like:

fn main ()
{
  let x = String::from("Hello");
  let y = x;
}

Rust compiler will tell you:

Because in Rust you cannot have two variables which points to the same "thing" unless they are integers, booleans, etc, primitives.

This is better explained in the book:

If you’ve heard the terms shallow copy and deep copy while working with other languages, the concept of copying the pointer, length, and capacity without copying the data probably sounds like making a shallow copy. But because Rust also invalidates the first variable, instead of calling it a shallow copy, it’s known as a move.

This means that our x will be "disabled". And I think this is cool because it prevents us to make junk code xd.

But if you really need a copy of it, you can use clone. I think the docs are okey, so not gonna explain anything.

OOOOOHHHH ALSO you can "copy" tuples whiout the "clone" method, when it is formed of primitives, like we said earlier.

(i32, bool) // implicit Copy
(u32, String) // no implicit Copy because of String

Ownership in functions should be easy to understand with what I have explained, have a read

Borrowing 🥷

Borrowing is the action of creating a Reference. Becuase once you get that reference, you return it.

When you "borrow" a variable, you cannot change its value. Unless is a "mutable borrow".

According to the book

Unlike a pointer, a reference is guaranteed to point to a valid value of a particular type.

// example from book
fn main() {
  let s1 = String::from("hello");

  let len = calculate_length(&s1);

  println!("The length of '{}' is {}.", s1, len);
}

fn calculate_length(s: &String) -> usize { // s is a reference
  s.len()
}

Look at the image

By using references, you don't get the ownership of that variable, so it is cool. Less mess.

You can have mutable references, but you have to be careful, because you can only have one.

// creating a mutable reference
let r1 = &mut s;

Now we said that you cannot have 2 mutable references, that is not quite true. You can have more than one mutable reference, but they have to be either:

Different scopes
The mutable reference is not used after the next mutable reference is created

// this is valid
fn main ()
{
  let mut s = String::from("hello");

  let r1 = &mut s;
  r1.push_str(", world");
  println!("{}", r1);

  let r2 = &mut s;
  r2.push_str("!!!");
  println!("{}", r2);
}

// this is invalid
fn main ()
{
  let mut s = String::from("hello");

  let r1 = &mut s;
  let r2 = &mut s;
  r1.push_str(", world");
  r2.push_str(", world");

  println!("{}, {}", r1, r2);
}

Maybe this is weird and you don't get it. Rust says:

The benefit of having this restriction is that Rust can prevent data races at compile time.

And a data race is like race conditions when using paralelism. A data race can appear:

Two or more pointers access the same data at the same time.
At least one of the pointers is being used to write to the data.
There’s no mechanism being used to synchronize access to the data.

You can have a lot of inmutable references. BUTTTT be careful, when using references, if you have inmutable, you cannot have mutable ones on the same scope. The answer to what you are thinking is that you are not able to change the data while someone is reading it.

It is like when using databases. There is always (if it is not well done) a way of having an error value. Imagine that Paula wants to read, and indeed is reading but then suddenly at the same time Jose is writting, the value has change, so Paula has an obsolete value, which is not cool.

(Is it clear? I wish it is)

The least: Dangling References. A Dangling reference, is something like a value being lost when it shouldn't because you want that value. This happens when you want to return a value from a scope, but not actually returning the value, instead you are returning the reference. As we said earlier, when a scope ends, the variables inside it are "dropped" (removed), so you cannot return a reference to something that is going to be dropped.

Example:

fn main() {
  let reference_to_nothing = dangle();
}

// F
fn dangle() -> &String {
  let s = String::from("hello");

  &s
}

// this is better :D
// you are retturning the value not the reference, so nice.
fn no_dangle() -> String {
  let s = String::from("hello");

  s
}

Slices 🍕

If you have code in python, this is going to be familiar. Types of slices:

String literals
Arrays

First of all, we need to clarify that slices does NOT have Ownership, so you can do almost whatever. If you remember, we couldn't have more than 1 reference to something. But with slices, we can have lots of references!!

fn main()
{
  let my_string = String::from("hello world");
  let a = [1, 2, 3, 4, 5];

  let word0 = &my_string[0..6]; // from index 0 to index 6
  let word1 = &my_string[..]; // from 0 to the length
  let word1 = &my_string[..3]; // from index 0 to index 3

  // this is bad
  // .clear uses a mutable reference, and we have inmutable references
  s.clear(); // error!

  println!("the first word is: {}", word0);
}

The concepts of ownership, borrowing, and slices ensure memory safety in Rust programs at compile time.

Whish you understood everything!! Because is one of the most fundamental parts in my opinion and I am still learning it uwu

Follow me!

🐦 Twitter
🐙 GitHub
👥 LinkdIn

RustLings III (conditions and convert)

Blitty — Sun, 30 Jan 2022 15:44:58 +0000

Bonjour!!!

I am back... it's been a while, but lets continue!!!

Next thing in rustlings is control flow which is very easy but if u come from C maybe a bit tricky. But nothing difficult!!!

The keywords are:

if <condition> {} // first condition
else if <condition> {} // other condition
else {} // none condition is true

nothing from another world. But you need to know that, <condition> has to be a bool, otherwise you will get an error.

Ternary conditions are weird... I like more C.

if <condition> { } else { }

You need those {} otherwise the compiler will say something like

The next thing I had to do was a quiz, very easy you don't miss nothing, except for one thing I have discovered!!

When u are using, say i8 and u want to return or you need it to be i32. There are two ways:

into

let i: i8 = 0;
let x: i32 = i.into();

from

let i: i8 = 0;
// u don't even need to specify here xd
let x: i32 = i32::from(i);

from is recommended by the docs

Follow me!

(I liked more the red bird :_()
🐦 Twitter
🐙 GitHub
👥 LinkdIn

RustLings II

Blitty — Fri, 01 Oct 2021 18:05:18 +0000

Willkommen!!

Sorry is German :)

Re-writing the post, I've learned that rust is expression-based language HAHAHAH and I was like a friend does "AAAJJJAAAAAMMMMMMM...." that is a well I don't know how to translate it.

So what is an expression-based language??? Well I searched it on DuckDuckGo ;)

and for me the best result was the wikipedia page hahahha, yeah so this is what it says:

An expression-oriented programming language is a programming language in which every (or nearly every) construction is an expression and thus yields a value.

But... so this means that everything or nearly every construction is an expression and it produces a value. Wish you understood it :V

Rust is made of Statements and Expressions

Statements are Instructions that perform some action and do not return a value. Expressions evaluate to a resulting value. (from docs)

Maybe with an example???
So in the book (that are the docs) it has this example:

let x = (let y = 6);

So here we would say that x=6 and y=6, no?

Well this is not true with rust and there is an explanation... the errors in terminal... Ok no HAHAHAHHAHA
I was kidding.

You cannot do this in Rust and the reason is because the let keyword is a Statement, and as the book says, a Statement does not return a value!!!!
So it is impossible to do that in Rust!!

Then we have Expression, as the book says, those "evaluate to a resulting value", we could say that is something like "return a value". So... how can we do the last code and add 5 to work???
We can use blocks, this are statements you can have a piece of code, and return a value.

let y = 5
let x = {
  let y = 10;
  y + 5 // returns the value (also is an expression)
}
// if you print "y", you get 5 not 10, go and search why :D

Also, Expressions DO NOT INCLUDE SEMICOLONS AT THE END, and this is important.
Other Expressions ->

calling a function
calling a macro
let x = 6, here 6 is an Expression, because 6 evaluates to 6 (AHAAHHAHAHAHAHAHA, love this explanations from the doc)

PD1: I think there are more, but I cannot think of them right now, those are examples from the docs, but everything that can evaluate to a value, is an Expression, otherwise an Instruction or Statement.

So that was the difficult part of this chapter, wish you understood everything and I wrote it well. Anything tell me :D

Here you have the easy part uwu

You create a function like with fn keyword

fn bonjour() {
  // If you've watched Modern Family, you will understand it :D
  println!("Yelooouuuhhh!!!");
}

if the function does not specify the return data type, then it returns nothing. You specify a function to return something like this:

fn example () -> i8 {}

Now as we are not in python, we need to specify the type of the parameter (doc).

fn new_user (id: i32) {
  println!("New user {}", id);
}

In rust you can return the value in 2 ways.

1 -> without the return keyword

fn is_even(num: i32) -> bool {
    num % 2 == 0
}

And.... why does this work??? Well... very easy, you are specifying the type you want to return and you have no ; in the instruction. Which means, as we said later, that this is an Expression so it evaluates a value.

Another example

fn uwu(n: i8) -> i8 {
  if (n < 19)
    n
  else
    n%20

-> using return You just use the keyword and ;

fn is_even(num: i32) -> bool {
    return num % 2 == 0;
}

PD: I have read the docs like 10 times to understand that jajajaj

Follow me!

(I liked more the red bird :_()
🐦 Twitter
🐙 GitHub
👥 LinkdIn

RustLings I

Blitty — Sun, 26 Sep 2021 23:08:09 +0000

Hello again! I had a nice sleep :))

Today we'll learn how to use variables in Rust :D

Oh yeah! Something you need to know is that all exercises of variables have been done by my little sister of 10 years xd

Just for you to know SJSJJSSJJSJSJ

In the first file of rustlings we get an error that simply means, x does not exist and that's because we haven't defined the variable.

So... the way to define a variable is using the keyword let

let x = 5;

Something you need to know is that when you create a variable it has to be defined, otherwise you will get an error from the Compile.

OH YES!!! Another important thing is that every variable you create is inmutable. What does it mean? That you cannot change the value of the variable. To make a variable mutable you have to use the keyword mut before the name of the variable.

let mut y = 0;
y = 2;

Something you can do is telling a variable what type it is. (You have to do this in the second variable file)

So if you go to the docs -> https://doc.rust-lang.org/book/ch03-02-data-types.html

Go and read :)

let x: i8 = 1;

That is an example :D

Now an interesting "tool" is that you can change the type of a variable, is what they call "shadowed".

I think you will understand if I give you an example ->

let random = "OH YEAH I AM A STRING";
let random = 5;

Yeah is... strange??? I mean, you change the type of the variable just using the let keyword and the same name of the variable. And is super weird (for me at least) but I think is useful, but IDK, we'll see.

Also it is called shadowed because is like the first initialization of the variable gets "shadowed" by the last one.

The constants in Rust... you have to specify the type, otherwise it won't work.

const PI: i8 = 3.14;

And the best for the end... Why the f* I have to use mut if I have constants???

Well... let me read the docs...

You cannot use mut with const I think is something obvious.
const needs to have a type, let no
const can be used in any scope, including global
let can get the result of a function or something like that, but const can't, it has to be a value.

Something like this, I think it convinced me, I mean, having variables that are immutable is "top" you can do a lot of things with it, some times we have variables that never change their value, and this is like a "plus" for rust, I cannot think about any example now, sry.

So this is all for today, I wish you a nice sleep or end of reading, or whatever you want.

Bye.

Follow me!

(I liked more the red bird :_()
🐦 Twitter
🐙 GitHub
👥 LinkdIn

Learning Rust with rustlings

Blitty — Sun, 26 Sep 2021 01:03:10 +0000

So.... first thing is first

Hello again!!!!

I am writing and learning while I am in a call on discord :)

So what you would be wondering now:
Q: Why Rust (lang)? Do you love your self?
A: Why not? And no... I just UwU

Now I have answered your questions, I am going to learn Rust, the programming language not the game OwO

So, I am learning the syntax here:

https://github.com/rust-lang/rustlings/

You can install it or you use it in repl.it, read the README :D

Next... when you open the repo, you see something like this

I've read the REAMD.md, so I know what and where things are jsjsjssjsjsjsjs

And the first thing we have to do is type rustlings in the terminal, if you get an error, probably you don't have the binaries in the PATH, so be careful!!!

So with that we get a little of information, the real problem starts with rustlings watch that we will use, since it makes us follow everything, from beginning.

Each time we fix (or maybe not, and we just bug it more :D), the command will display for us the error or a "Congratulation" for doing it well.

And this is everything for today :D

Have a nice sleep. With love B

Follow me!

(I liked more the red bird :_()
🐦 Twitter
🐙 GitHub
👥 LinkdIn

Having the rick power!!! Pt.4

Blitty — Mon, 09 Aug 2021 17:06:55 +0000

WOWOWOWOWWO a lot of time since I posted!!!! Well... 4 days or so...???

Don't know, but lets continue, I want to finish, I think this is going to be the last one. Or I'll try to make it the last one at least hahahahaha

First thing is first, we need to do a little of recap, we did some routes, make some Apollo magic in the home page, so we have 5 random characters, also we have an ugly Errors page :)

So, to finish we have to do:

Search to work
Button "more info" working

Don't know how I am gonna make this with apollo, 💩💩💩💩💩💩 (or maybe I know)

Maybe we'll use useContext because I want the results of the search bar in the cardContainer.

npm start
1. Fixing errors
Continuing with Apollo
1. Show more button
Styling
Uploading...

npm start

First thing we do... it 🤯🤯🤯🤯🤯 yeppp
why? Because my computer decided to shut down before. So the changes were not fixed....

» Fixing errors

15 minutes later and realizing that we don't want useContext because we don't want to share the global variable to be displayed (rendered) in another element. That's why we don't use useContext, and that is why we want to pass the value as a prop, from one child to the other child, we do this using the "Father" element as a "Controller" of the value we want to pass.

So first is first, we prepare the "father" element which is Home, we make it use useState, this way we can keep track and update the value easily.

// Home.jsx

const [t, setT] = useState('');

const callBack (n) => setT(n);

//....

return (
  <P callback={callBack} />
  <O value={t} />
);

Now we know that the element that changes the value of the element is Search which modifies the value when the we submit or click the icon. This way we pass the prop callBack which uses the function from the useState, setT.

const P = ({ callBack }) => {
  // to keep track of the value from the input, when changed
  const [text, setText] = useState();
  return (
    <div>
      <input
        onChange={e => setText(e.target.value)}
        type="text"
        value={text}
        placeholder="Use power to search..."
      />
      <button
        onClick={() => callBack(text)}
      >
        Click
      </button>
    </div>
  );
};

This way we have the new value when the button is pressed.

Next and last step is to pass the value to the one which is going to use it for the query. So that we can search a character by Name.

In this example we are not going to use it to query something, we are going to use it to display, is just an example.

const O = ({ value }) => {
  return (
    <h1>{value}</h1>
  );
};

And that is everything, I think you have understand why we do this and why we don't use useContext. If you haven't understand it well, I'll update the post!!! So comment!!!

Continuing with Apollo

Apollo....

YUHUUUUUUU!! I love Apollo hahahhaha, I mean... is very easy and super powerful!!!

In the component cardContainer, we mostly use Apollo, so we are going to change the place of ApolloProvider just to wrap CardContainer, because nothing inside Home.jsx is going to use Apollo as well, so there is no need to have it to wrap everything.

We had some errors in the queries we saved in queries.js, those who use the variables, so the correct way to use variables inside a query with Apollo is this:

const getCharactersByName = gql`
  query getCharactersByName($charName: String!) {
    characters(filter: { name: $charName }) {
      results {
        id
      }
    }
  }
`;

with the variable name inside the query of the name, as an argument.

So then, when we use it in the cardContainer, we use Apollo to request the query, we use the hook provided by the library called useQuery. It has multiple parameters, the one that is required, the query we can also add options like "variables", "onError", "pollInterval" that fetches each time (the one you specify) the query and much more!!!

What we want from the return are some states like loading, error and data, this way we can display components depending on the state we have.

An example with the query above:

Query = useQuery(query, {
  variables: { charName: 'Rick' },
});

» "Show more" button

I am no sure how I want to do this one, because I thought about:

creating a new window
a pop up
a route

I think I am going to do the 3rd one, because this way is easier, I just send the id of the character when the button is pressed.

PRESS THE BUTTTONNNN!!!!!

Now lets continue

For this we call react-router-dom again, and we create a route which accepts a parameter, which we are going to get in the component who will fetch the data using a query.

To create the route, is like when using express

// import CharInfo

// <Switch>
     <Route path="/charInfo/:id" Component={CharInfo} />
// </Switch>

This is everything, now using in CharInfo a hook provided from react-router-dom called useParams.

This way we can intercept that param and fetch the data with apollo.

const CharInfo = () => {
  let { id } = useParams();
  return (
    <div>
      {id}
    </div>
  );
}

Now we are going to use the hook from Apollo to use the query and the id and fetch the data to display it.

const { loading, error, data } = useQuery(getFullDataByID, { 
  variables: { id },
  client: Client
});

Instead of using the ApolloProvider, we use the option from the hook client, why we do it like this?

We don't have a root for the component CharInfo because is a component for a Route. So we cannot use "ApolloProvider"
I am not going to create a "root" component for that component, when I have the option of using that paramenter.

Once we got this, we have everything!!! Now we just need to make CSS, which I'll do later (but you will see them in this post UwU)

Before styling... I got an error while doing the basic web of the information from the character, and I got an "Internal Server Error" which was very weird (BTW I wasted like 15min with this error until I figured it out) and It all was because sometimes an attribute called "origin" was null, so this was causing all that error, which was not returning the data.... (Summary: An error in the Back)
Now I have removed that prop, so that I get no error.

[I am going to sleep, I am very tired... so... continue reading ;) and be happy!!]

Styling!!

Omg... this is going to be tough... F*
I hate starting, but when I have everything as I want, is like "OH MY GOOOOOODDDD, I LOVE IITTTT", then someone just come and says "What a F* shit, is that supposed to responsive?" :_(

Don't hate okey?¿?¿? UwU
Let's be loved and love :D

Now, continuing with styling... I am not going to do another GIMP, sorry but don't feel like doing another :(

BUTTTT I am going to use the FIREFOX TOOLSSSS TO MAKE THE CSS AND THEN CONVERT IT INTO TAILWINDCSS CLASSES!!!! OHHHHH YEAHHH BBYYYYY. Does that make any sense?? Don't think so... but I go fast as a fart like this 😎.
(Why a fart? IDK, why not?)

I just want to show you what I have to deal with:

Have you seen that vertical bar??? :') I think I am going to... have a good fun :')

As I said, no GIMP, I am lazzy, but I'll write what I want to do, this way you know what is in my mind :O

We have 3 sections

Main part, fundamental information for the character:
- name
- status
- species
- type
- gender
- image
- created
Episodes section, these are Episodes where the character has been.
- id
- name
- air_date
- episode
- created

Of course is an Array, so we are going to create a new component Episode to have everything better for my health :')

Location part, here we have information about
- id
- name
- type
- dimension
- residents
- created

Here we have a subsection, "residents", which is an Array
of other characters, I am going to do it a single row with
horizontal scroll (What do you think?? DON'T TELL ME!!! Is
a great idea, I know, you know, we don't really know xd)
Sometimes there are a lot of residents, so this might be a
problem, but as it renders like "fast and furious", is
going to be every single character of the array rendered :)
Also, we are going to reuse the Card component.

Uploading...

We can upload a react project to GitHub Pages. Using the module gh-pages, we install it doing:
npm install --save-dev gh-pages

With it, we can upload it, so you can go and try it here

Tell me what else you want to learn, I'll make a series of it :D

I want to learn more things!!!

Follow me or contact!

(I liked more the red bird :_()
🐦 Twitter
🐙 GitHub
👥 LinkdIn

Having the rick power!!! Pt.3

Blitty — Sat, 31 Jul 2021 18:53:24 +0000

Hello again!!! 🙌

Here I am, I've just open vscode, and the first thing I did was styling the container of the cards, now is amazing how it is!! (Maybe you don't like it, but I DO :)

A bit of react-router
Starting with Apollo
1. A little explanation
Returning to the project

A bit of react-router

Then I did 'the change', I converted App.jsx into a Switch for Routes, using react-router-dom, which I have neves used, but is super simple!!

(Mini tutorial)
To use React Router, the first thing we have to do is install it :) of course... docs

npm install react-router-dom

Now that we have it installed, the first thing we have to do, is to say to React that we are using it!!! So we tell index.js (the one that is god, because it controls everything) to have something called BrowserRouter, which is like a Route but a bit special, because is the one that keeps a history.

Next step is to go to out App.jsx where we used to have all of our things. But now we have it as a Router for Routes. Okey okey... if you have not understand me, we have a Switch that has Routes which redirect to the component you want. So we have something like this ->

So if you try to go to another path that is not / (home), you will be displayed Error!!. And why? Because when we used the Switch, we created a Route which has no path, when a Route has no path, it means that any other path will go to that one, so for example if we search: /blitty we will have the same error, or OwO, and so on.

But how do we do, if for example we want /owo to work?
Well.. that's pretty simple, we just create a new Route and we add the attribute path="/owo", also component={Component}. And that's all!!! So we would have:

<Switch>
   // other routes
   <Route exact path="/owo" component={Owo} />
</Switch>

And... what does exact mean???
It means that it will only match the exact route, so for example, if we search for /owo/uwu we wouldn't get rendered the component Owo, only when /owo.

That's all for todays route, that is all I needed.

Starting with Apollo

We are f*... Okey no hahahahaa, that was a joke!!!!

We saw what GraphQL and *Apollo was, now is time to touch it, so I'll come back... (well you will read this at the same time, but meh, I like doing this, is more... entertaining (?) wish so...).

Now that I have done the tutorial and an approach of fetching data from rick and morty API, is time to explain to you 👊.

Apollo is very very easy, first time I use it and I got everything!! (I'll give you the sandbox, but is the same one).

What I used was, ApolloProvider, ApolloClient, useQuery, InMemoryCache and gql. All from the library @apollo/client that you can install using:

npm i @apollo/client

So... what is this all about B?
Well... you can go to the Docs :)

Nah, I am going to explain it!!! Don't worry!! I'll try it at least. (The codesandbox is commented)

» A little explanation

ApolloProvider is like useContext of React, you can use it to access data from every component inside that context. So we use it to wrap components that (in this case) needs data from a GraphQL API, so they can access that data. It hhas one prop which is client that is important because is the object generated by ApolloClient.

ApolloClient is a class provided by Apollo Client, which we need to communicate to the GraphQL API. This class has a lot of arguments to use in the constructor, but the ones required, are uri or link (of course) that is the link ti the GrapQL API. And cache which is required, and is the cache that Apollo will use to store the fetch results.

InMemoryCache is a type of cache provided by Apollo.

gql a JavaScript template literal tag that parses GraphQL queries into an abstract syntax tree (AST). (I have copy the docs, because is very well explained)

useQuery is the way of fetching data, when we call this hook, we get a JSON with 3 keys:

loading which is a boolean that gives us information about the request, so, if the request is pending or loading, then the loading argument is true.
error if the query was loaded and there was an error fetching or collecting the data, we are returned that error.
data when it is loaded, and there is no error, we get the data (of the query we passed to the useQuery) in this key of the json.

So, it is very powerful, because we didn't really did something, and we have 3 states that we can easily use, to know how our fetch of the data has done.

Returning to the project

Since we want to fetch data from the component Search and CardContainer.
In Search to get the characters with the matched name, and in CardContainer to get 5 random characters.

So nice everything... I am not sure about giving ApolloProvider in home.jsx, which would be a destruction to my self from a lot of developers, thinkers and philosophers. Why I said that? IDK :)

But I think is the nice place for it, because we have both components which fetches data from the same GraphQL API, but with different queries. (If you think I am wrong, please explain to me).

I am going to code, I'll be right back.

So... it has been just 30min, of doing it and thinking...
The main problem was that the Client I was creating, didn't let me use .query to test the queries, but now it works fine. I just changed the require with import ... from .... Don't know why it happened, if you it, tell me in comments 🙏.

Then I added a lot of random, to get 5 random characters from the GraphQL API, every time you render.

The Loading or Error, are not pretty, I haven't even make nothing, just some h3 hahahahahaha, but don't worry I'll chage it (if you are reading this and the changes have been applied... you are lucky :])

And this is all bby!!! Well, I didn't say it, but I created one folder called apollo where I have the Client and the Queries, so everything is separated and nice :)

Wish you like it!!! Here you have the source code rick-power.

Follow me or contact!

(I liked more the red bird :_()
🐦 Twitter
🐙 GitHub
👥 LinkdIn

Having the rick power!!! Pt.2

Blitty — Thu, 29 Jul 2021 18:33:47 +0000

HUHUHUHU let's continueeeeeee :)

What are we going to do today? Don't know, but something like this:

Making home
1. Design
2. Components
3. Process

Making home

So... this is what we have from yesterday...

Is it a shit???

Now is time to change it :D

» Desing

Well... I am going to show you how I want it to be, or at least, what I see in my mind... I know there are a lot of programs where I can design the web like figma, but I like more paint!!! I am waiting for GIMP to install, so that I can draw it.

Something like this... (?) Maybe (?) Don't know, we will see how everything goes.

what, we can see that we have 3 components:

Welcome (heading)
Search bar
Cards place

Everything is going inside App.jsx, so that we live index.js cleaner.

» Components

Now we know how many and which components we have. The next step is to place the components the right way. As we see, we want the Search bar at the top, so it is going to be the first element, then the heading and the last one the Cards place which we will create a new component, called CardContainer (Is it a good name?).

» Process

I've finished for today, so I'll explain how it has been...

A lot of fight with CSS, nothing from another world, but I like it how it is, well not everything, because the colors doesn't match too much, but I am not too worried about it, because it can be changed later.

The web is fully responsive.

The worst thing was styling the CardContainer because it was a lot of work, first I thought about flex and rows and cols but I didn't like it, because it was not what I wanted, so I dig in my head, and found a solution, a grid!!!! and there it is, a perfect grid (or I think so).

And... nothing more... I was like 1h+ with the f* CardContainer styling it.

So here you have your screenshot

So... tell me!!! How do you see it??

--- Repeating...
I know the colors match are a shit, but we will see, if we change it or not 😁
--- Shutting down...

PD: See you tomorrow... I guess

OOOOHHHH waittttt......... I have to push it to GitHub 😵 I just want to go to the sofa :(

Done.
See you!

Follow me!

(I liked more the red bird :_()
🐦 Twitter
🐙 GitHub
👥 LinkdIn

Having the rick power!!! Pt.1

Blitty — Thu, 29 Jul 2021 00:06:09 +0000

WOOOHOOOOOO we are going to have a nice time doing this :O

Creating the project
1. Installing dependencies
Creating Home page
1. Making a nice entry
2. Making cards

I will be using as I said in the first post, React and Apollo with the API of rick and morty using the graphQL one.

Creating the project

Everything is going to be uploaded on my GitHub with some comments (I guess... 😶‍🌫️).

First thing is first, lets start our react project using
npx create-react-app my-app.

YESSSS we are...

DONEEE!!!

Okey... no :/ it was a joke...

just... continue reading and ignore it :D

» Installing dependencies

We need Apollo client, GraphQL and Tailwind (why not?) So installing them...

npm i @apollo/client graphql tailwindcss

(Since my WiFi is like...

here I am, waiting for it to finish, BTW is with the react project AHAHHAHAHAHAHA okey... okey... sorry you don't care about this, sorry 😬)

Creating Home page

We are going to get rid of... everything?? (I know I did the first commit with everything, sorry xd).

We don't need almost anything, so we will have only the index.js and app.js.

PERFECT!!! NOW WE HAVE... nothing :|

But don't cry, we are going to start now.

» Making a nice entry

For this... well... I will need Apollo client here, because I'll be showing 5 cards of characters.

And I thought... What about making a folder named components that is what everyone would use, and create a component card.jsx. And that is what I've done :).

And at this point I thought: "What about doing it in typescript...?" And I said: "Noup... too much for now".

Also... I realized that is the first time I use tailwind for React, so I needed to do the things that were in the docs.

And installed ESLint HEHE, sorry 😬😥 restarting now...

-- Restarting
-- Here we go!

» Making cards

So far so good, I've made the cards, I think they are okey... (also responsive)
I got some problems with react, because I wasn't aware of some errors, like using {{}} instead of {} for strings :=.

So.. I wanted to make a nice styling card but simple and I decided to have what you see in the image behind, I don't really know what to explain here, because is simple and there is no Apollo 😬.

Well... I'll do a push ⬆ and go to sleep, see you tomorrow (?)!

This tailwind is dizzying me 😵.

Follow me!

(I liked more the red bird :_()
🐦 Twitter
🐙 GitHub
👥 LinkdIn

Now... Let's learn Apollo!!!

Blitty — Wed, 28 Jul 2021 21:04:39 +0000

So... good morning???? Okey, I don't know. UwU

What is Apollo?

The official definition is:

Apollo is the industry-standard GraphQL implementation, providing the data graph layer that connects modern apps to the cloud.

What does it mean?

JEJEJEJEJEJJEE

Let's try and resume this definition... is a way of using GraphQL in every place, in Front and Back. I guess this is right.

We have:

Apollo client, to use in the Front (something like, fetching data)
Apollo server for the Back
Apollo Federation, which I kind of like it because is a way of segregation of a monolithic graph, which is cool, because you don't have just one graph.
Apollo Studio a place to build graphs and be more secure and some good stuff if you really need it.

» What will we use?

Of course!!! Apollo client 😁. Why?
Because is what we need, the Back is done, we just need to make a good website.

Follow me!

(I liked more the red bird :_()
🐦 Twitter
🐙 GitHub
👥 LinkdIn

First steps... GraphQL. What?

Blitty — Tue, 27 Jul 2021 17:57:07 +0000

We need this... and you know it!!! 🤓

What is GraphQL?
1. Query
2. Mutations
3. Scalars
4. Arguments
5. Type
6. Interface
7. Enum
8. Non-null-values
9. Arrays
Full Example
Follow me!

What is GraphQL?

According to the definition:

GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.

So... in simple words, is a tool to request the necessary and what you want, instead of sending all the information.

Nice! Now... How do we use it?¿

» Query

This is special, because it is the entry point of every GQL query.

(Example from the docs)
For example._

type Query {
  hero(episode: Episode): Character
  droid(id: ID!): Droid
}

Now we can get/send 2 types of type (jeje), by using those Arguments, if we try to get a Character, like this:

query {
  character {
    name
  }
}

we will get an error 🚧 !!! Because in the Query type, we didn't specify it.

» Mutations

They are another special type, is like Query, but the Arguments are used to modify or create new data in the Data base.

» Scalars

They are the basic (or primitive (?)) data type in GQL. The main ones are Int, Float, String, Boolean, ID.

The ID scalar type represents a unique identifier, often used to refetch an object or as the key for a cache. The ID type is serialized in the same way as a String; however, defining it as an ID signifies that it is not intended to be human‐readable.

» Arguments

(I am not sure if this is the way of describe it, comment if not)
Arguments are like "functions" that a type can have, so we can have a way of sending data depending on what we want. (Using the example from the doc)

type Starship {
  id: ID!
  name: String!
  length(unit: LengthUnit = METER): Float
}

enum LengthUnit {
  METER
  FOOT
}

Here we have length that has a parameter which is by default METER and of type (enum) LengthUnit. Here is where magic happens, if we use METER we will have a value in meters, but when we get FOOT as argument, surprise!!, we will have a result in foot. Which is amazing, no? 🤯

» Type

To create types which is a form of describing the data, if you know how SQL data bases work, then you will compare this as tables and rows.

» Interface

An interface we can think of it like in OOP (Object Oriented Programming) but with another idea. It is an abstract type that has fields, which can be implemented by types, this way we can have fields that more than one type has in common. Also, the type that implements an interface, needs to have the fields of that interface.

Example._

interface Monkie {
  name: String!
}

type Human implements Monkie {
  name: String!
  isDev: Boolean!
}

type HumanPlus implements Monkie {
  name: String!
  isSuper: Boolean
}

» Enum

Is a way of creating an enumeration, for the people who does not know what an enum is, it is a way of creating some kind of "just these values can be accepted in the field.

» Non-null values

To determine fields that cannot be null, we use the char !, this way, if the non-null field is null, then graphql will trigger an error.

» List or Arrays (?)

We represent a field as an Array or List, using the [] operator. Inside it we determine the type. When we use the non-null value in Arrays, we use it in two different ways:

[type]! Here we can say that GraphQL will trigger an error when the field value is null, so it will admit [], [values], [null, values].
[type!] It will admit null, [], [value], but will trigger an error when given an Array with a null value: [value, null].

Full Example

interface Animal {
  id: ID!
  name: String!
  age: Int!
  breed: [String]!
  colorEyes: ColorEyes!
  typeEyes: TypesEyes!
  father: Animal
  mother: Animal
  isStrong: Boolean
}

type AnimalFromMars implements Animal {
  id: ID!
  name: String!
  age: Int!
  breed: [String]!
  colorEyes: ColorEyes!
  typeEyes: TypesEyes!
  father: Animal
  mother: Animal
  isStrong: Boolean
  isIntelligent: Boolean
}

type AnimalFromOnePiece implements Animal {
  id: ID!
  name: String!
  age: Int!
  breed: [String]!
  colorEyes: ColorEyes!
  typeEyes: TypesEyes!
  father: Animal
  mother: Animal
  isStrong: Boolean
  size: Float
}

enum ColorEyes {
  GREEN # my favourites :D
  BLUE
  BLACK
  BROWN
}

enum TypesEyes { # didn't know how to describe this xd
  SHARINGAN
  SEA
  FIRE
  LINES
}

type Query {
  getAnimalByID (id: ID = 0): Animal
  getAnimalByName (name: String!): Animal
}

Now when we want to make a request, we create a query

# one way
query {
  getAnimalByID () { # by default is 0
    name
    age
    # we need to make this because size is just in AnimalFromOnePiece type, so we need to say what we want, when it is that type
    ... on AnimalFromOnePiece {
      size
    }
    ... on AnimalFromMars {
      isIntelligent
    }
  }
}
# another way
query getParents ($name: String) {
  getAnimalByID (name: $name) { # by default is 0
    father
    mother
    ... on AnimalFromOnePiece {
      size
    }
    ... on AnimalFromMars {
      isIntelligent
    }
  }
}

In the variables place, we need to have for the second query:

{
  "name": "GQL"
}

So.... this is all!! Now I am an expert of GQL HUASHUASHUASHUAS

Okey. . . . . Just joking, but now I know how all these stuff works!!!

Wish this helps you 😅 (It helped me, doing it!)

Follow me!

(I liked more the red bird :_()
🐦 Twitter
🐙 GitHub
👥 LinkdIn

PD: I think I missed some things 😬 Sorry

DEV Community: Blitty

Rustlings V (Structs, enums)

Structs 🥸

"Normal" structs

Tuple struct

Unit-Like structs

Methods

Enums 🤪

Follow me!

Rustlings IV (Ownership)

OwnerShip 👀

Borrowing 🥷

Slices 🍕

Follow me!

RustLings III (conditions and convert)

Follow me!

RustLings II

Follow me!

RustLings I

Follow me!

Learning Rust with rustlings

Follow me!

Having the rick power!!! Pt.4

Table of Contents

npm start

» Fixing errors

Continuing with Apollo

» "Show more" button

Styling!!

Uploading...

Follow me or contact!

Having the rick power!!! Pt.3

Table of Contents

A bit of react-router

Starting with Apollo

» A little explanation

Returning to the project

Follow me or contact!

Having the rick power!!! Pt.2

Table of Contents

Making home

» Desing

» Components

» Process

Follow me!

Having the rick power!!! Pt.1

Table of Contents

Creating the project

» Installing dependencies

Creating Home page

» Making a nice entry

» Making cards

Follow me!

Now... Let's learn Apollo!!!

What is Apollo?

» What will we use?

Follow me!

First steps... GraphQL. What?

Table of Contents

What is GraphQL?

» Query

» Mutations

» Scalars

» Arguments

» Type

» Interface

» Enum

» Non-null values

» List or Arrays (?)

Full Example

Follow me!