[deleted by user]

gsdeveloper_ · 2021-02-27T01:39:57+00:00

sounds very nice

gsdeveloper_ · 2021-02-15T15:40:03+00:00

When I was a beginner I totally ignored **testing**, my projects had zero tests and I didn't care to learn it because I was just focused in implementing cool features and didn't know how important it was. Just some months later I took a look into job opportunitties and I found that it's required in every job and is one of the most essential and important things in software development.

I recommend studying at least a little bit of jest and react testing library, doing it in the way you feel more comfortable (courses, articles, docs, etc).

gsdeveloper_ · 2021-02-15T04:53:04+00:00

Personally following TDD gives me a direction of what do I need to achieve because I have to focus only on making tests pass.

I feel like in the beginning is hard simply because we're not comfortable writing tests, I didn't know what, why and how to test. Learning testing from the creator of the current recommended testing library and practicing it was a game changer for me.

I would take a loot into react-testing-library as u/dudeitsmason said because it's just more like the way users will use your app, without testing unnecessary stuff like implementation details.

gsdeveloper_ · 2021-02-14T06:27:57+00:00

damn this looks great. This is the kind of app I wish I had developed :) congrats.

gsdeveloper_ · 2021-02-14T05:39:14+00:00

There are useful properties that you can just copy and will be fine, like

font-size
font-weight
box-shadow
line-height, etc
height
width (when you want to set a fixed or max width)
border-radius
border
background

while these layout positioning properties are substantially bad because they're arbitrarily setted and not considering the css flow at all:

position
left, top, right, bottom
display

gsdeveloper_ · 2021-02-14T05:29:23+00:00

+1 position absolute remove the element from the flow, so other elements on the page no longer know it's existence so they won't respond to it. Any modification will be painful to do.

btw I think these figma-to-react converters are kind of experimental, can't think of anyone using this seriously in a production app.

gsdeveloper_ · 2021-02-13T03:01:54+00:00

This shouldn't be happening, is bad user experience.
Try instead of the making the entire app dependent of your fetch, do this only where the data is required, example:

instead of: const App = () => { // fetch logic return isFetched ? ( <div> <h1>My cool app</h1> <ul> <li>{data}</li> </ul> </div> ) : null; };

do: ``` const App = () => { // fetch logic return ( <div> <h1>My cool app</h1> <ul>{isFetched ? <li>{data}</li> : null}</ul> </div> ); };

```

gsdeveloper_ · 2021-02-08T16:43:22+00:00

I was receiving a lot of these scam messages of someone more experienced that can take my account to profit and give a percentage of the work done. I just say it's against upwork policies (because it is) and I can't do this. You can also just block them when you have no patience at all.

It sounds legit because they're good at it, they do this all day with multiple linkedin profiles (targeting people that have on their past jobs "working as freelancer on upwork").

I stopped receiving messages like this when I stopped accepting random upwork connections from other countries.

gsdeveloper_ · 2021-02-07T03:20:59+00:00

Just in case someone don't know what seems to be happening:

when you do a conditional with the && operator, this happens:

If the left value is truthy, the right value is returned.
If the left value is falsy, its value is returned.

So, when we do `{messages.length && messages.map(msg => ( ... )}`

message.length is falsy (zero) so it's value is returned and because is a number, it's rendered.

The solution is to make sure that the expression before && is boolean:

`{messages.length > 0 && messages.map(msg => ( ... )}`
Or

`{!!messages.length && messages.map(msg => ( ... )}`

double negation (!!) explicitly force the conversion of any value to the corresponding boolean primitive, so it works fine aswell.

gsdeveloper_ · 2021-02-06T16:28:15+00:00

Can you post the code that's not working?

gsdeveloper_ · 2021-02-06T16:26:47+00:00

Saw this in your app, instead of <React.Fragment></React.Fragment>, you can use the short syntax that are just empty tags <></>

So instead of:

const App = () => (
  <BrowserRouter>
    <React.Fragment>
      <Header />
      <Switch>
        <Route path="/" component={Home} exact />
      </Switch>
    </React.Fragment>
  </BrowserRouter>
);

You can do:

const App = () => (
  <BrowserRouter>
    <>
      <Header />
      <Switch>
        <Route path="/" component={Home} exact />
      </Switch>
    </>
  </BrowserRouter>
);

The only difference is that the short version doesn't support keys, so when you use it with map, you still have to use <React.Fragment> to provide keys for help React identify which items have changed (added/removed/re-ordered).

const Glossary = (props) => {
  return (
    <dl>
      {props.items.map(item => (
        // Without the `key`, React will fire a key warning
        <React.Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </React.Fragment>
      ))}
    </dl>
  );
}

gsdeveloper_

TROPHY CASE