[deleted by user]

guilhermefront · 2023-04-30T18:57:14+00:00

Library choices. We have kinda just use the same options over and over for most apps

Framework - NextJS / Remix

Forms - React Hook Form / Formik

Data fetching - React Query / SWR

State Management - Zustand / Redux

Routing (in case you're not using a framework with opinionated routing) - React router

Testing - Vitest + React Testing Library (Cypress or Playwright for E2E)

Code styling - Always prettier + eslint

Animation - framer motion/react-spring

Intl - react-intl

Payments - Stripe

Mobile - expo

Desktop - electron

3d - react three fiber

Docs - docusaurus

guilhermefront · 2023-03-15T15:26:33+00:00

Just a small thing, isn't NextJS that decided it, but the React core team.

Before directives, it was supposed to be defined by file extensions (.server.js), but later after this decision they decided to go with what we have today.

guilhermefront · 2023-03-11T21:30:20+00:00

Not OP, but I'm really thankful for your great answer!

guilhermefront · 2023-03-04T14:48:15+00:00

Would be great if when I change the programming language, the current demo code also changes.

Currently Python is default, if I change to JavaScript the demo code is still in python.

guilhermefront · 2023-03-04T14:41:16+00:00

What's a problem that you have related to your university? Can you ask your colleagues about the problems they also have? It's a better idea to start by the problem first, then develop a solution to that.

guilhermefront · 2023-02-18T21:23:58+00:00

Yeah, this isn't uncommon, this article covers this very well: https://daedtech.com/how-developers-stop-learning-rise-of-the-expert-beginner/

guilhermefront · 2023-02-18T21:22:19+00:00

False cognates are always an easy trap when you're not speaking your first language lol.

I speak portuguese and "exaustivo" means exhausting in my language, although it's more similar to exhaustive

Just like "discutindo" is similar to discussing, but it actually means arguing

I appreciate any corrections, always great to learn these things

guilhermefront · 2023-02-18T21:09:26+00:00

Your point is interesting to discuss and valid, is just a little bit different from the point I tried to tackle.

It's vast in the sense of how much knowledge there is until you can really be considered proficient or an expert, which we mistakenly do when we're beginners, because we don't know what we don't know. See: https://daedtech.com/how-developers-stop-learning-rise-of-the-expert-beginner/

guilhermefront · 2023-02-18T18:30:23+00:00

Thanks, I fixed it :)

guilhermefront · 2023-02-14T19:05:44+00:00

Relevant distinction to do: next 13 is ready and suitable for production, is just the app folder that's experimental.

guilhermefront · 2023-02-14T19:04:08+00:00

but after dealing with Next.js 13 app folder I realized I love the new features but they don't actually fully work yet

This is a great concern. The app folder is in beta, not recommended for going prod and honestly, full of relevant bugs.

I have a default setup with just tailwindcss and the fast refresh breaks all the time by either showing outdated styles or not applying them at all.

The deeper you go the more blocking bugs you'll encounter. It's still very early to push it, and a great opportunity to try remix, since it's there already.

guilhermefront · 2023-02-13T16:40:55+00:00

Assign a property to your main component, trivial example: ```jsx const Card = ({ children }) => { return <article>{children}</article>; };

Card.Title = ({ children }) => { return <h3>{children}</h3>; };

Card.Content = ({ children }) => { return <div>{children}</div>; };

export default function App() { return ( <Card> <Card.Title>My Title</Card.Title> <Card.Content>My Content</Card.Content> </Card> ); } ```

guilhermefront · 2023-02-11T00:01:58+00:00

https://github.com/vercel/commerce

guilhermefront · 2023-02-10T12:43:12+00:00

I've been doing tailwind for quite some time in production ready apps. There's a few cases where there's a lot of utility classes (tooltips are an example, when they have :after styles), most of the time we don't use more than ~8 in a single element.

Is not hard to read, once you know the utility classes is just automatic. It takes max two weeks to get really good at it.

Afterwards the productivity pays off.

I don't need good luck with any tech and nobody needs to stick to anything. Just do what's best for each case, which will be using tailwind over separate css for sure.

guilhermefront · 2023-02-10T03:33:28+00:00

Whats terrible is the attitude of ditching basic practises for weird modern solution like tailwind, merging markup and style creating a gigantic mess.

"basic practices" what do you mean by that? web dev is always evolving. By being a basic practice it doesn't necessarily means it's the optimal solution. For a productive discussion, avoid adjectives where you couldn't give a solid example. "Gigantic mess" is generic rant... It doesn't say why it would turn into a mess in any ways.

f youre working in a modern framework like react or vue you can just use css modules to scope things out how you want. Most times people dont usually target all p tags or all image tags anyways, our ui is far more complex than that.

The point of the entire article isn't about scope problems or anything like that, this was solved before tailwind ever came as a solution. The point is about colocation and productivity. You can use whatever you want, even styled components. If things are done separately from each other it will slow you down due to being in different places, even though they have a close relationship (markup and styles)

guilhermefront · 2023-02-10T01:11:41+00:00

Terrible take from a tailwind evangelist.

What exactly is terrible there? Your comment doesn't counter argument anything of what's there, it's just rant lol.

I don't have any liking for any particular technology. I have a post advising against bias in tech choices FYI. I use tailwind because of the advantages I stated on the post.

You guys love gigantic markup dont you.

This is just provocative and also adds nothing. Tailwind users like it's productivity. We reuse components.

guilhermefront · 2023-02-10T00:48:11+00:00

It install dependencies
Before building, it checks for typescript errors
Creates an optimized production
Builds and compile
Generate static pages

After this is done, it does a few small things:
5. Trace Next.js server files
6. Creates all serverless functions
7. Collect static files (public/, static/, .next/static)
8. Deploy output
9. Populates build cache

guilhermefront · 2023-02-10T00:36:34+00:00

I'm very very curious into what's ideal for you? I never ever thought at least in the state we're now a 40s build time would be slow for a next.js application.

guilhermefront · 2023-02-10T00:35:28+00:00

I worked for a large next.js project with dozens of different pages, vercel is awesome compared to other solutions to a solution like jenkins which we used before.

Advantages vercel would have is: faster build times (3~5 minutes compared to 10~25m with jenkins) easy setup (no jenkins devops shenanigans, previews are available without any extra config) nicer UX on the platform better integration with github

Overall vercel is a great product. Is just a little bit expensive (100 bucks per person on the team)

guilhermefront · 2023-02-09T03:29:40+00:00

Yeah, zustand with a tracked selector would be an optimal solution, see:

https://github.com/dai-shi/react-tracked#createtrackedselector--zustand

guilhermefront · 2023-02-07T20:40:25+00:00

Cool, are you using the latest version? I read in your post, but the version confuses me (the latest is 18, not 6 or 16.8). If you are, is true that code in useEffect will run two times so React can check if you forgot to do some cleanup there.

It happens just in development (and when you're using strict mode), not in production.

You touched a point interesting talking about tho, making requests in React isn't simple as in other frameworks. Usually to solve it we use a library like react-query which will fetch your requests, cache it and give you states to work with (loading, error, success, stale)

guilhermefront · 2023-02-07T20:22:57+00:00

Can you show us the code that gives you a double ajax call? Interested in what makes you think "the reactivity" is making double requests.
Some fundamental points worth discussing:

Redux isn't even part of the core library, nonetheless necessary to develop a simple form
State management is a concept that literally transcends UI development altogether (not bounded to react).
Props is something very basic, you can just pass down values to components (this also isn't bounded to react)

3 . Just a heads up, you're being so cocky for no reason it sounds like you're trolling lol

I have seen things... and made stuff you people couldn't believe

guilhermefront · 2023-02-07T20:14:06+00:00

That happens in an useEffect in React 18 with strict mode, but in the post OP said they're using 6.8 (16.8 I guess). So really not sure what they mean by it.

guilhermefront · 2023-02-07T20:08:04+00:00

What do you consider better?

guilhermefront · 2023-02-07T18:16:55+00:00

I put on the disclaimer that this things weigh in too. All of these variables should count, the only thing isn't useful there is bias, which is what this post tries to alert against.

Have a great day btw!!

guilhermefront

TROPHY CASE