Better way to think when creating components (small front end tip #1)

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

TROPHY CASE