DEV Community: Julia Barcelos

Everything count

Julia Barcelos — Thu, 27 Jan 2022 23:01:53 +0000

Have you ever thought your old experiences don’t have value anymore?

I’m here to prove the opposite.

I’m chemist as some of you already knows, I’ve been working all my professional life in the pharmacy industry.
I'm used to think that what I've learned and knew about my old career doesn’t matter anymore, but I was acting like a fool person and I can prove it!

I mentioned before about a book who I’m reading, called “Clean Code”.
I was reading and found this awesome page which talked about that and show me How I was definitely wrong.

The book mentioned the 5S system and it’s a universal communication, everyone who worked in the industry knows how important it is to organize all your work place. So everyone could be able to find everything that they want without hassle.

This article, which talked about 5S, can be useful if you need some introduction about this topic.
5S system

Who can imagine this could be counted as a hard skill to be a programmer?

Yes, in fact, is.
I've figured out I already have this s ability. Also, I know what it is good for and why it is so important.

And do you know why this is important?

If not, don't worry, I can be able to explain it based on a little routine simulation.

          Please follow my lead...

Can you imagine yourself open a repository and finding all the documents totally unorganized and shuffled?

You just can't differentiate between pages and components.
Imagine a login page in the same place with an API request... You might think, what does API request?

The names of all these files doesn't tell you anything, you spend like 15 minutes just to find yourself in the code and still haven't found which is the main page yet.

Great... Now you finally found a router file, so you could start to figure out how many pages this project has and how all this works together. From the time you've started till now, that took you about 35 minutes of work day.

In the middle of that bad situation, you’ve just realized you have a meeting schedule and you might have to go back to the code later because, in fact, you didn't start your task yet.
So, for don't spend almost an hour again, you create a folder and files structure to organize this repository, but guess what?

When finally get done arranging all those files and folders, and starting to understand how all these files connect to each other you’ve just reached lunchtime. Could you imagine being in this situation and don’t feeling disgusted, stressed and tired from correcting bad code and bad work?

If you have some notion about 5s this never will be happing with your projects.

So, if someone else gets to work on your project those kinds of problems, cited above, just won't happen.

Stay strong, you and I are qualified to take good job offers.

I'll continue look at my previous qualities for this new career and share my experiences with you all, maybe this will help you.

Trello tips

Julia Barcelos — Tue, 18 Jan 2022 22:51:33 +0000

I was passed for a bad situation because I used Trello on the app and web at the same time. What happened? Aaah.. a bad thing!

I write a lot of things on the web version and for some reason, I have opened a card to make modifications to my app too. When I closed the web version I saved it, but after that, I saved my app too, for a pure mistake and as a result, I lost everything. OMG!
I lost a little time looking for a solution for my difficulty, tested some options, but now...

I can resume this in an only link and share it with you all.

Using Chrome, install the JSONView Chrome Extension.
Than you just need open this link:
https://trello.com/1/cards/hpAcP7IS*/actions?filter=updateCard:desc*
This hpAcP7IS is used as a exemple, you need look for your card ID.

After that, you'll see actions for each time the description was changed. Now you need to see this changed and chose your version.
How can I look at my card ID?

Open on web your card and take a code immediately after /c/ as exemple bellow:

https://trello.com/c/**hpAcP7IS/814**-multiple-log-in-credentials

Reference:
https://help.trello.com/article/783-recovering-the-description-of-a-card-that-has-been-changed

Look yourself.

Julia Barcelos — Fri, 31 Dec 2021 12:25:50 +0000

When I think about my dreams, goals and start to see and feel my conquest, to come there, this is a great indication I'm going in the correct way.

I hated English when I was a kid, teenager, and adult being honest, but I realize I need this language to get my dream, so I started to practice that every day, I read, speak, write, and now I like it.

I watch all my favorite series and film in English. I mark some meetings with old or new friends to practice English, and of course, I'm not fluent yet, I commit mistakes when I write or speak, but definitive I'm better than before.

I was tired to feel stagnating in that and decided to improve myself.

I've been using this channel to practice my English because is very difficult to maintain my knowledge if I don't practice frequently.
Some weeks I don't practice because I need to focus on another thing, but the most important I did, I set that as a routine, so... I can stop, but I'll return to that.
I started to feel great doing that just when I stopped to compare myself with other people and analyze my stories, by myself.
The same happened when I looked at my olds projects and thought about my learning journey, all my baby steps, and I noticed how math I grew up and improve my expertise. Everything has a process to pass, and everybody needs to know their time and necessities.

What are you compromising with your personal development?

Think about that, make one checklist and do some things to get that, step by step you will feel this same energy. "

React-Router-dom 6! What changed?

Julia Barcelos — Wed, 22 Dec 2021 14:34:57 +0000

There I was in the middle of my little project when I realized that react router had updated from v5 into v6.

I made everything right and my routes did not work. That made me so annoyed that I've returned into the old version and finished that project.

Later after that, I've started to learn about those changes and everything made sense. I could understand what was happening with my routes. Well... That inspired me to start my blog with that headline.

Switch doesn't exist anymore.

Yes! Now, what we have instead is this functionality called Routes and the syntax is also different.

This was usual on v5 version usage:

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import Home from 'path-to-home';
import Cart from 'path-to-cart';

 <Switch>
    <Route exact path="/"
       <Home/>
    </Route>
    <Route path="/cart"
       <Cart/>
    </Route>
</Switch>

Noticed that rather than passing the component as a child "loose" inside a <Rote/>, now we need a pass as a prop using this new tag called element.

exact doesn't necessary, and an order from routes doesn't matter anymore.

This new version is smarter.
If you have routes with descendant route, what defined in other components, use a trailing * in their path to indicate they match deeply. After doing that, then React-Router-6 will find the better option to route it. So must be easier.

Let's take a look into how we should be using from now on:

import React from 'react';
import { Route, Routes } from 'react-router-dom';
import Home from 'path-to-home';
import Cart from 'path-to-cart';

 <Routes>
    <Route path="/" element={ <Home/> } />
    <Route path="/cart" element={ <Cart/> } /> 
</Routes>

It's important to say: the use of Routes is mandatory now, so if you have one or more routes, you need to use it inside a <Routes/>.

Now `<Redirect/>` is called `<Navegate/>`

On top of that, if you have a nested route, you can define it on the same page!!

// app.jsx
import React from 'react';
import { Route, Routes, Navegate } from 'react-router-dom';
 <Routes>
    <Route path="/" element={ <Navegate _replace_ to="/welcome" /> }>
    <Route path="/welcome/*" element={ <Welcome/> } > 
       <Route path="new-user" element={ <p>Welcome, new user!</p> } />
    </Route>
    <Route path="/cart" element={ <Cart/> } /> 
</Routes>

This replace on <Navegate> is optional to use, but semantic correct when used to replace pages.
If you don't use it, the react-router-6 will push the page as well. Have you noticed another change on the above code?

If you declare on the same page, you need to use <Outlet/> to indicate the correct position on the nested page as you can see on the code below:


// Welcome.jsx

import React from 'react';
import { Link, Outlet } from 'react-router-dom';

const Welcome () => {
 return (
   <section>
     <h1> This is you particular space</h1>
     <Outlet />
     <Link to="/home"> Return to Home <Link/>
   </section>
  );
};

Advanced changes

All <Route children> from the v5 version changed to <Route element> in v6. This should be as simple as moving your route element from the child position to a named element prop.

Link components

import { NavLink } from "react-router-dom";
<NavLink activeClassName= { classes.active } to='/home' >
  Home
</NavLink>

We continue having a <Link/> and <NavLink/> nothing change with then. However, what did change was the activeClassName props, it doesn't exist
anymore.

Instead that, you need to write a most verbose code. You'll need to use an argument with a function to promote this change. And then you find an isActive property inside an object on react-router-6 and do a simple conditional ternary statement to define.

import { NavLink } from "react-router-dom";

<NavLink className= { 
(thisNav) => thisNav.isActive ? class.active : ''}
to='/home'>
  Home
</NavLink>

I never used { useHistory } yet, even so, this hook is used to navigate between pages history.
Maybe is because that the name changed to { useNavigate }, to turns the code more legible, or clean.

I've noticed, now we can use a negative number to indicate where we want to send the user. But this I'll explain in another moment.

For now, they removed this other things, temporary:

References:
github/react-router
react-router-v6

Hello everyone!

Julia Barcelos — Fri, 17 Dec 2021 20:59:26 +0000

I'm starting this blog to share with everyone my discusses abou tech, learning and of course grow up together.
For now I'll share a little simple things about myself and so soon I'll start writhe good articles here.

const about = {
fullname: Julia Barcelos,
age: 31,
married: true,
nerdHobby: board games,
sport: beach tennis,
softSkill: [ resilience, empathy, communication, leadership],
}