DEV Community: Isabelle Bessa

useContext clues!

Isabelle Bessa — Wed, 16 Nov 2022 01:07:09 +0000

During my time at Flatiron School, one of my favorites learning experiences was working with React. I found it to be a very fun and easy library to work with, specially with the use of props and states.

But as most fun things do, it worn down. By the time I was passing my props through 12 different components to get to my final one where I would finally be able to get usage out of it, thing became heated. I might or might not have cursed a little (no bad feelings, React. You're still my favorite).

As a result, I got the thought that comes at least once a day to every software engineer:

And there is! useContext is a simple React Hook that allows you to send values down different called components and even change them along the road.

According to its documentation, useContext accepts a context object (the value returned from React.createContext) and returns the current context value for that context. The current context value is determined by the value prop of the nearest above the calling component in the tree.

I'm gonna show you how to use this Hook in three steps. Let's build a boyfriend rater!

I did the hard work for you, so here's what our app looks like now:

Say I want to add some information to my card, a message that is currently in my App.js. I could pass it as a prop, but I also want to change that message with a onClick function. That's when we use useContext.

First, we have to create a new component and define the context. Then, this is the code we will use inside the component:

import { createContext } from 'react';

const MessageContext = createContext(null)

export default MessageContext;

Now inside our App component, we are gonna import that component and call it inside our return, between the components that will use it.

import MessageContext from './MessageContext'

  return (
    <div className="App">
      <MessageContext>
      <h1> Rate your Boyfried</h1>
     <BfCard/>
     </MessageContext>
    </div>
  );
}

export default App;

To send a value down the components, we still need to add the .Provider and value to the context. The value will be whatever we want to to make accessible for other components. In this case, our value will be our message.

import MessageContext from './MessageContext'

const [message, setMessage] = useState(false)

  return (
    <div className="App">
      <MessageContext.Provider value={{message, setMessage}}>
      <h1> Rate your Boyfried </h1>
     <BfCard/>
     </MessageContext.Provider>
    </div>
  );
}

export default App;

Note that we are also sending down our setMessage inside value. That will allow us to change the contents of message and update our state when changing the message by onClick. Extra note for the ending tab of MessageContext that must also include .provider. Don't forget or you might find yourself debugging errors for hours simply because of it. I don't speak from personal experience.

Now inside BFCard, we need to add a little more code to be able to call the message. We have to import the MessageContext component, and call it inside a variable with useContext. Like so:

//import useContext
import {useContext} from 'react'
import MessageContext from './MessageContext'

//set the variable as you would set state, but inside curly brackets and with useContext instead of useState

const {message, setMessage } = useContext(MessageContext)

Well done! Now you can use and change your message value whenever you need. This was a simple use of the useContext hook, mostly to demonstrate how easy and simple it is. In more complex apps, you can use it to send user information, data from fetches and much more. Don't let the props stop you into your quest to become a great developer. Happy coding!

Rails likes validation - and who doesn't?

Isabelle Bessa — Mon, 24 Oct 2022 18:05:44 +0000

Ruby on Rails is a great framework and with Active Record, its uses are almost endless. By using two or three lines of command, you can create a complete MVC program that amounts for many different uses. You can build everything from a blog platform to a dog party planning website (which if you do, please share it with me).

The only issue would be controlling your client-side. We all know clients are wild, and the internet is full of trolls. How do we make sure our program is being used for its full purpose? Or at least receiving the right information?

Validation comes in hand for that. Validations are used to ensure that only valid data is saved into your database. They are database agnostic, cannot be bypassed by end users, and are convenient to test and maintain.

You can be very specific in your validations, provided that rails give us a generous amount of validation helpers. The most common ones are acceptance, length, presence, numericality and uniqueness. In this post we are gonna be showing how to use those examples, but don't restrain yourself!

Example: blog plataform

Imagine you're building a short blog platform (like Twitter), and you need to make sure every user is following the rules for blog posts, tags and title. This is what our post model looks like now:

post table

class Post < ApplicationRecord
belongs_to :user

end

Pretty empty, but we will change that soon. We add all of our validations to our model componente. We want to make sure that every post has a content, at least one tag and a title. Let's validate the presence of those:

post table

class Post < ApplicationRecord
belongs_to :user

validates :content, :tags:, :title, presence:true

end

validates :element is our syntax for validations. Adding presence validates that the specified attributes are not empty.

Great, now we can't create a post without a content, a tag and a title. But we also don't want blog posts or titles that are just a single word. Let's add a Length helper to that:

post table

class Post < ApplicationRecord
belongs_to :user

validates :content, :tags:, :title, presence:true
validates :content, :title, length {in: 20..}

end

This helper validates the length of the attributes' values. Length also has many attributes that can be use to constrain the element in different ways (ex: {minimum:},{maximum:},{in: (range)}, {is:}.

While adding tags during our test, we see that the same tag can be add an infinity number of times. That's not right! We want to make sure that every tag can only be added one time into each post. Let's use our uniqueness helper for that.

post table

class Post < ApplicationRecord
belongs_to :user

validates :content, :tags:, :title, presence:true
validates :content, :title, length {in: 20..}
validates :tags, uniqueness: true

end

Validations help us control the information sent and received to our database. Along with error messages, they're also very useful to guide the user with application usage. You can explore more of it with the rails documentation, which is very extend. I hope this post helped you with it, and happy coding!!!!

Ruby and it's many, many (many) methods.

Isabelle Bessa — Tue, 04 Oct 2022 13:12:30 +0000

When told that Ruby was an Object Oriented Programming language, my first thought was: and? What is it that ruby can do that JavaScript (and React.js <3) can't?

The answer to that is nothing. There's nothing ruby can do that can't be recreated with JS (well, except deal with high CPU intensive application development, but that's for another blog post). The main thing is: It can do it in a faster and simpler way than JS would ever think of doing it.

And how is that possible? you may ask. Ruby has a lot of methods, which are a set of expressions that return a value. With it, it's easier to access and modify your code along the needs of your project. We won't be covering all of them here, because there would not be enough space. Instead, let's just go over the basics.

.first

You know how when calling elements out from an array, you have to do the whole index thing? Array[0], or Array.obj[1], and it gets progressively worse? Ruby solved that for you. All you need to do is literally call the first element.

array = [1,2,3,4,5]
array.first
=> 1

What if I want the second element?

array = [1,2,3,4,5]
array.second
=> 2

But that can't work for all of the elements. Can it?

array = [1,2,3,4,5]
array.third
=> 3

*It can!!!!!!!!!!! *

.include?

That one sounds simple enough. We want to check if our element is included in the array we're searching through.

array = [1, 2, 3, 4, 5]
=> [1, 2, 3, 4, 5]
array.include?(3)
=> true

.join

This one is my pride and joy(n). You can call an array and transform it into a string, with a separator parameter.

array.join
=> "1234"
array.join("*")
=> "1*2*3*4"

.uniq

As the name says, this iterates over an array and returns only one of each element that's in it. All the duplicate elements are removed from the array.

array = [1, 1, 2, 2, 3, 3, 3, 4, 4, 4, 4, 5, 6, 7, 8]
array.uniq
=> [1, 2, 3, 4, 5, 6, 7, 8]

.drop_while

It's a simpler way to select elements in your array. It drops elements up to, but not including, the first element for which the block returns nil or false and returns an array containing the remaining elements.

a = [1, 2, 3, 4, 5, 0]

a.drop_while { |i| i < 3 }   
=> [3, 4, 5, 0]

Now that you've seen how easy and intuitive ruby methods are, are you interested in learning more of them? Try it out and happy coding!

Sources

https://www.freecodecamp.org/news/common-array-methods-in-ruby/

https://apidock.com/ruby

Why you should use components when building your React.app

Isabelle Bessa — Mon, 12 Sep 2022 15:04:04 +0000

React is a lifesaver. Being the number one library used to create interactive UI's, it helps developers build applications faster and with more complex data.

While learning React, I was amazed by the JSX and how the mix of HTML and JS worked to make life easier while coding. That's until I got to components.

What are components?

Let's imagine React as a big painting. You want to show the final result, but you also have to realize how many divisions are in it and how you have to work on them separately. Make a sketch, final draw, coloring, shading, and finally framing it. That's what components are in React; A division that allows you to split your code into independent and reusable pieces, and to work in each piece in isolation.

Now that you know what components are, we should put it in practice! Let's build a simple React App using some components.

If you don't know how to start your React.App, I suggest you follow the steps in this react doc.

Great! Let's look into our src folder and see what's in there.

Those are some of our components! We so far only have two: App.js and Index.js to which App is called. In this post, we will be creating two more: A header componente and a body component. You can name your components however you want, this is just an example.

This is the code for our header component (You can delete whatever code between return in App and add the follow)

 <div className="App">
      <header className="App-header">
        <h1>Hello!</h1>
        <h2>This is a lesson about components</h2>
      </header>
    </div>

And now this is what our page is gonna look like:

Now let's build our body

<body>
        <p>In this blog post, you gonna learn the importance of React components</p>
        <p>Some of those are:</p>
        <ul>
          <li>Writing easy debugging code</li>
          <li>Create independent bits of code</li>
          <li>Make it simpler to work it more complex data</li>
        </ul>
      </body>

This bit of code will look like this:

Okay... this seems to work just fine, but our code is pretty simple. If you're working with more complex data, you'll have so many lines of code that it will be extremely hard to see in case you make even a simple syntax error. To save us from that, let's create our components.

Now, we can transfer our code from both those elements directly to the components.

Analyzing what we did there, we can see there are a few rules to follow while writing components:

You must always import React before writing the code;
Write your code inside a function with a return, otherwise your code won't be passed to the parent component;
Your function MUST start with capital letter. I know, in vanilla JavaScript you're not supposed to use capital letters to start names, but that's a React rule. Don't forget!
And at last, remember to export your component!

Why export my function?

That will allow your other components to use that component in them. If you don't export, you won't be able to import it inside the other elements.

Let's see how those components will look inside our App component.

Reloading your browser, you will see that the layout is the same as when we wrote the code directly into App. But now you have access to that code separately, and it's easier for you to work on and build more intricate apps.

Have fun working with your components!

Sources:

Components - React Docs
React JS Components - Geeks for Geeks
Building React Components - DEV

How console.log might save your code from yourself

Isabelle Bessa — Mon, 22 Aug 2022 23:57:00 +0000

Starting my bootcamp, there were two things I knew about javascript:

1.Using a ";" to separate code lines is optional, but helps your code;
2.Console.log EVERYTHING.

As a great know-it-all, I refused to follow both rules. That got me stuck in many different situations, but what really opened my eyes to the importance of console.log was failing my first code challenge.

And here's how I'm gonna save you from the same mistake.

What is console.log()?

In simple words, console.log() outputs to your console whatever you request it to.If you're familiar with other languages, such as python, you probably know it as print().

What parameters does it take?

console.log() takes any parameter. It can be used for strings, arrays, objects, and to access HTML content by JavaScript. On a side note, console.log() outputs the value you're looking for regarding the moment you open your console.

Why do I need to use it?

Let's start with a simple example. We're trying to update our website so it shows the first object of our json file. We want it to show the image, name and description of our product.

For that, we're creating a function that assigns our values from the json file to our html content, like so:

//setting the element information 
function setElementInfo (element){

    //display the element name 
    const elementName = document.getElementById("detail-title");

    //display the element image
    const elementImage = document.getElementById("detail-image");


    elementName.textContent = element.name;
    elementImage.src = element.image;
}

Okay, that looks great! Let's try calling this function by the data we got from out fetch request.

//requesting the information from the json file
fetch("http://localhost:3000/data")
//returning the response from the file and reading it to javascript
.then(response => response.json())
.then(data => {

    setElementInfo(data)

Now, let's update our HTML page and see how this works!

Oh, no. We got an error there, and it says it can't find our data. That's weird. It's a very open error and it doesn't show in what line we made a mistake or what exactly is the problem with our code. How can we find out more about it?

Enter console.log()

For staters, let's make sure we have our return data right, by logging it.

//requesting the information from the json file
fetch("http://localhost:3000/data")
//returning the response from the file and reading it to javascript
.then(response => response.json())
.then(data => {
    console.log(data)
}

Now let's reload our HTML browser and see what the console shows us.

Great, we go out data! But wait, it all comes in an array. We need to set only the first element of our array to show up, and how can we do that? Let's try calling it with our index.

//requesting the information from the json file
fetch("http://localhost:3000/data")
//returning the response from the file and reading it to javascript
.then(response => response.json())
.then(data => {

    setElementInfo(data[0])

Now, reloading our HTML page.

Great! We got our first element to show when our page loads. Thanks, console.log()!

What to take from this?

When working with too many elements and functions, specially while building websites, it's easy to get our data confused. What we think it might be a string turns out to be an array, or our calls to html function sometimes return whole html objects, instead of a simple value inside that object.

console.log() helps your access your data and what you are building into your code to help you make less errors, and have less frustrations while working on a big program. It's easier to console.log() every data and variable as it is set, than face an error while running the code and having to checking everything from the beginning.

I hope this post helped you understand the importance of console.log() while creating your code and how it can help you improve your programming!

Sources:

console.log() - Web APIs - MDN

What is console.log in JavaScript?