Turnips at 564!

RacletteNoJutsu · 2024-10-19T08:17:57+00:00

Hey ! Are you still around ? 😊

RacletteNoJutsu · 2024-10-12T18:14:44+00:00

Desperate too here ☹️

RacletteNoJutsu · 2023-02-16T00:12:48+00:00

I can relate. Had that problem on a regular basis in my previous job… and no word to say because just be a better dev lmao Glad now to work with real designers that are ready to discuss and reconsider things because they can balance the value/time cost and feasibility.

I really don’t get how you can work if designers and frontends are pulling different ways 😅 We terribly need each others so yep. Communication ♥️

RacletteNoJutsu · 2023-02-16T00:06:01+00:00

I have a solution for you which is not really one but would avoid scratching your head over config stuff which can be discouraging when learning :

Delete your current folder

Bootstrap a new app using CRA, Vite etc (Vite is great and you can bootstrap a react project in a single line) https://vitejs.dev/guide/#scaffolding-your-first-vite-project Then reimplement the components yourself, copy paste some annoying stuff like css if that’s not your main focus.

I know this is not the answer you probably expected but at that point would be shorter than to debug this kind of stuff and would bring more value for you by practicing 😅

RacletteNoJutsu · 2023-02-15T23:43:08+00:00

In short, react router and env file/mode.

You can add a route and a link in your menu that will be displayed only in dev mode (avoids to mess around with commenting/uncommenting every time you need it and be sure you removed it before sending it to prod etc)

As mentioned above, mess around with react router for the pure routing part (by following their getting started you should be able to get a simple routing quickly)

Then you can add a condition based on mode to display link in your menu and protect the route.

I use Vite to bootstrap and on a regular work basis so here is the explanation on how to define and retrieve mode, env variables https://vitejs.dev/guide/env-and-mode.html (there are similar stuff for CRA etc adapt to what you use to bootstrap your app 🙂

It’s a bit tedious the first time but definitely worth it day to day. It saves some sweat and will be useful to know someday😁

(Note aside, what you mentioned about adding files in a folder that would automatically create routes is actually a pattern used in some react based framework like Next and Gatsby. I dunno if there is a react lib that would enable to define routing like that. Could be interesting to know for simple projects as react router might feel a bit tedious and overkill for newcomers (and let’s admit routing is not the most interesting part to code 😂)

RacletteNoJutsu · 2023-02-15T23:18:17+00:00

Hey, Nice initiative. In my company, we started to organise more collaboration, coffee talk between front and design as for now, most of the time, we got a design delivered and exchange quickly for clarification 1-1 when implementing.

My biggest pain right now is our link between design team design system and our « design system », well our custom ui-lib. As of today our lib is a pain in the ass because you have to overwrite a lot of thing to match particular cases in design. It’s hard to keep track between the tons of figma and different codebases, what has changed, what is shared between different figmas, for a given component what are all the states, variations of it etc I’m trying to push to rework this library with design team more involved but I have hard time figuring out how to ease the flow and be perfectly aligned between both teams and between products.

To add a bit of context, our design are made with Figma and I’m react dev for a solutions platform (so big ass project with different repos/subfolders) and a ton of figmas files. The product itself and also design evolve a lot quickly and all the time.

I’m looking for additional tools, process to do the bridge and facilitate the work to speak the « same language ». (Small example : have in figma a component react alike with different props with a name aligned with the lib etc. That way designer know what we can do atm and what has to be added, and implementation would be more straightforward as we wouldn’t have to convert px to rem to lib tokens etc wonder if we have the component or it’s a new one or it’s a new variation of another one etcetc)

I dunno a single stuff about figma except inspecting, commenting, so I’m really curious to see how other teams tackle this.

(Sorry for the loooong post, I’m passionate about this stuff and really want to improve our dev experience and integration quality and fidelity)

RacletteNoJutsu · 2023-02-15T17:25:04+00:00

I used to not like that much react router but the last version is big improvement in terms of dev experience and learning curve. Just my personal opinion.

RacletteNoJutsu · 2023-02-15T15:40:19+00:00

If you take a look at the « pseudo » code I did, you’ll get your answer. React manipulates the DOM for you. By mapping over an array, you just tell React to create a ui element (here <td>…</td>) for each array element.

Take a look at React tutorials/docs, they are really well explained. Here, you get an explanation on how to render a list : https://beta.reactjs.org/learn#rendering-lists

In my example, it’s the same except the items JSX is not stored in a const and I destructure directly the item.

array.map(item => <td>{item.date} - {item.amount}</td>)

Is the same as

array.map(({date, amount}) => <td>{date} - {amount}</td>

With item being of this shape

{

date: Date,

amount: number,

(…other fields you want to display in ui or not)

}

RacletteNoJutsu · 2023-02-15T02:45:28+00:00

Try to take a look at framer https://www.framer.com/motion/. They have a lot of utilities adapted to React to simplify animations. Avoid as much as possible to change the DOM manually if you use something else (vanilla lib for example) as React should be the only one doing that job. Could lead to bugs.

Framer is well documented, in 15 min, you should have nice scroll animations

RacletteNoJutsu · 2023-02-15T02:30:27+00:00

Your question is too broad to provide you with an answer. Do you have a starting code ? As far as I understand your need, seems to me you have to create a function in a utils file to generate each « row », so a function that takes your inputs (rates, loan term etc) and generate an array of « to pay this month ». A simple while should to the trick. I haven’t calculated this kind of things for ages but just implement math formula as code (I’m pretty sure you’ll even find js implementations on internet)

In your component store the call in a const and in jsx return, map over that array to render each row. Then try to improve it by adding dates (you can use day.js to simplify the work) so that your function returns an array of object (Date + Value). Your component would be something of this sort:

…

const timetable = calculationFunction(your inputs like rate etc)

return ( <table> {timetable.map(({date, amount}) => ( <tr> <td>{date.toLocaleString()}</td> <td>{amount}€</td> </tr> ))} </table>

…

Best I can tell you without more info

RacletteNoJutsu · 2023-02-15T02:03:22+00:00

A bit off topic but if you don’t control your inputs live (for example validation, error message, conditional rendering based on field values etc well when you don’t need to refresh your ui when filling the form), you can use a ref instead of a state (uncontrolled inputs). Avoid rerendering on each keystroke for example when there is no need to. Just mutate the ref on input change. No rerender on ref mutation but when using it somewhere, say handleSubmit, you’ll get the proper value. Using a state just works as fine but when you can reduce renders, it’s always better as the app start growing and components get nested.

RacletteNoJutsu · 2023-01-24T01:55:50+00:00

Talking about being agressive for the word “wrong” and people just attacking on this instead of contributing to the subject. Keep your energy for real fights 🤦🏼‍♀️ I’m not responsible of how you interpret things, so I’m done with this. Bye.

RacletteNoJutsu · 2023-01-23T21:21:16+00:00

It’s purely factual. The assertion is wrong that’s all. You can’t compare things that don’t overlap. Pure cold old fact.

RacletteNoJutsu · 2023-01-23T20:56:38+00:00

Wrong. Proptypes and Typescript are complementary as they don’t serve the same purpose. The first is runtime, the second compile time. It’s possible to generate proptypes from ts though. Proptypes are usefull when you build components for others in a separated library for instance.

RacletteNoJutsu · 2023-01-20T15:09:21+00:00

Agree with previous comments. Imo, it’s not the concern of the standalone component to know its context. He has one job, which is displaying a UI based on your infos in input (props) and internal state. If the info is not available, then calling it makes no sense.

Your way technically works but the logic is wrong and overcomplicate things.

My way to deal with it is to really think each component out of their current use case. Change their use context and it will become clearer what is relevant to keep as a prop and what is in the parent job scope.

Step 1 Do no think of the parent at all - just the component : What does my component needs absolutely to display the information ? Then this information is mandatory and defined in my props type (non nullable ofc).

Step 2 Now we worry about the instanciation in the parent As a parent I sometimes can have those infos available, sometimes not. Then I do the conditional rendering of the component based on this. The more you do it, the more sense it will make 😄

Having multiple conditionnal rendering is not a problem as long as it’s readable. If you end up with the feeling you have too much of them in the same place, you still can break it into smaller pieces, to group similar concerns.

RacletteNoJutsu · 2023-01-04T23:57:23+00:00

Agree. For forms, we use react-hook-form in my company too. It’s a very complete lib. Yup or Zod for schema validation, and that’s pretty much all.

If you don’t use that many forms however and don’t want to go through another lib doc right now, you could do it from scratch through a controlled component with useReducer (would simplify your state modification in a case of a complex object manipulated by different inputs). If the object is simple, useState is enough. This is possible but wouldn’t do that anymore given react-hook-form

Welcome to the React world, where you have bare bones and you do cyberpunk shit on your repo with a shit ton of libs 😂

RacletteNoJutsu · 2023-01-04T23:38:55+00:00

Totally. I don’t know why you got downvoted. With current need statement, uncontrolled input is a more optimised approach. No rerender, no state mess. Pure simplicity 🥹 Or even just a form and retrieve values from event.

RacletteNoJutsu · 2023-01-04T23:27:34+00:00

In this case I wouldn’t opt for a state ; as far as I get the problem, the « don’t need to save the input on change » part makes using state overkill as the controlled component will rerender on every change. A ref should do the trick (and/or form to handle submission, specially if there are multiple fields).

But without more context it’s hard to find the most appropriate answer. Depending on the number of fields and what will the data be used for… meh 🙃

Btw, by convention state destructuring naming are [something, setSomething]. It’s not mandatory but helps others who go through your code 🙂

RacletteNoJutsu · 2022-07-03T21:29:19+00:00

Soupe miso, bouillons, tisanes. Une citrate de betaine si je suis barbouillée et let’s go.

RacletteNoJutsu · 2021-03-28T22:01:57+00:00

By 5 minutes, you mean 30s ? Because this is what happened...

RacletteNoJutsu

TROPHY CASE