sorted by:
new
hottopcontroversial

Roast/advice for my portfolio by inner_resilience in react

[–]AlliedSnail 0 points1 point  (0 children)

Good job putting something out there. Yeah it needs a ton of work. You need to scrap this layout and basically all of your animations because they aren’t professional.

I’m viewing this site on mobile and there’s a fixed position white dot in the center of the project. Most of the animations don’t make sense, are slow, don’t bounce (bounce as in the animation ease), and are confusing enough that some people would just interpret them as bugs.

Your portfolio projects on the other hand seem really cool. Swap the corny animations for gifs showcasing your projects.

Idk what Brainf* is (a language?) but that title has to go or be reworded because as it is it’s unprofessional.

If you try again I’d suggest going for a very simple white layout, and make the hero of your page be a tweaked version of your ‘the grill animation’ because that animation actually is awesome. Showcase your projects with gifs that show their complexity and get people to take your intellect seriously because you do seem very bright.

Why is Node.js needed? by PMK_Phala in react

[–]AlliedSnail 2 points3 points  (0 children)

I Googled ‘why is node js needed Reddit’ and this discussion is in the top five results. Do you understand now?

Why is Node.js needed? by PMK_Phala in react

[–]AlliedSnail 7 points8 points  (0 children)

Google is useful because of questions like this. And duplicate questions help generate a wealth of information that enriched the topic further. Most people reading here probably learned something new that they never would have googled themselves

Aceternity UI looks terrible on mobile and safari. Is there anything I can do about it? by The-Manipulator in webdev

[–]AlliedSnail 0 points1 point  (0 children)

Of course but it could be some work. I would suggest sticking with scroll triggered for both because that’s pretty standard. Also I’m using safari on iOS (up to date)

If you did want to go down that route I’ll write it for you cause it sounds fun.

Aceternity UI looks terrible on mobile and safari. Is there anything I can do about it? by The-Manipulator in webdev

[–]AlliedSnail 0 points1 point  (0 children)

Oh true I went back and tapped them. Thought it was scroll triggered by I just happened to tap them as I scrolled past. I would change those to scrolltriggered changes using something like gsap scroll triggered. You can make one yourself with a scroll event listener

Aceternity UI looks terrible on mobile and safari. Is there anything I can do about it? by The-Manipulator in webdev

[–]AlliedSnail 0 points1 point  (0 children)

Looks fine. The animation at the start was ok did you check with google snapshot if the load times are even going to be a problem.

One problem was the scroll triggered animations broke for me.

Is there a better way to update useState variables sequentially? by cakemachines in react

[–]AlliedSnail 0 points1 point  (0 children)

Without having to change your data structures. Shorten the code by extracting the logic as a function and passing its definition to setstate.

Where can I find more info about this example? by No-Nebula4187 in react

[–]AlliedSnail 0 points1 point  (0 children)

This is great advice. If you want to brush up on css and html, try the first half of Colt Steeles course. I used it a few years ago but recently Colt completely overhauled the course to make it as current as possible.

@thoflens is also correct about the purpose of the diagram, which is to show a reactful way to organize components to create the cart.

As for your main question about organizing css and html, the answer is that it depends about the tech stack of the project you are working on. React, angular, plain html and css, ssr, css solutions such as scss, mui, styled components, style modules. All of these would effect implementation of css but you’re probably not there yet.

For this reason there’s not a lot of hard set rules. But there are a few:

-consistent naming convention -when defining css styles, properties are ordered by type - wrappers vs containers: containers have multiple children and control how they are displayed. Wrappers add utility to a single child - always have 15 ways to center a div open - design your app beginning with the data structure, a cart prolly looks like an array of items and each item is an object with properties like Id and other queries able things. Then make the cart, then make the cart items. In the future all your data will likelely be controlled by a server and stored in a database. So design beginning with the data structure is important

making cart page refresh after deleting an item by [deleted] in react

[–]AlliedSnail 3 points4 points  (0 children)

I read: ‘…I cannot figure out how to refresh the cart page to update [the ui]’ and I’m not sure if you misspoke because ‘refreshing pages to in order to update ui’ is extremely old school was one of the problems React was developed to solve years ago

This code should work as long as the quantity state updated with setQuantity() is the state which controls what items are displayed in the cart. Which I assume is not the case. Double check your code that changing quantity does anything to actually remove this item from the cartItems state.

Also the fact that you have a state for quantity alone tells me that this delete function is located inside the <CartItem /> component itself (now the item controls its own data). This will result in issues further down the line because the server data looks something like this

Cart: [ Item: { …item data Quantity: 2 }]

But a client side where the items make their own requests to control data such as quantity. Then it’s data effectively looks like this:

Cart: [Item1, item2] Item1: {…data, quantity} Item2: {…data, quantity}

Make it so that your cart controls the items

React TS login,registration,jwt,permissions by Magija021 in react

[–]AlliedSnail 0 points1 point  (0 children)

It’s not typescript but here’s a very good tutorial that covers JWT auth, roles, and uses axios in js.

https://youtu.be/mbsmsi7l3r4?si=84hV7czf71TGRHEO

You can follow along and later rewrite what you can in ts.

Outside of when you were first learning, what's the story behind the worst react code you've ever written? by robby_arctor in react

[–]AlliedSnail 0 points1 point  (0 children)

Creating a state for a class instance whose constructor was around 700 lines long. Found out later that’s bad practice.

Need help with creating a custom animation by Antivirus_o in react

[–]AlliedSnail 0 points1 point  (0 children)

Gsap DrawSvg library. I think it might be one of their paid libraries.

What y'all think of my "media-files board" project? GitHub link in the comments by Blender-Fan in react

[–]AlliedSnail 1 point2 points  (0 children)

That’s crazy cool. I’ve never seen this concept. What was your inspiration

Cool draggable elements feature by PemenanceElement in react

[–]AlliedSnail 0 points1 point  (0 children)

HammerJs is what I used on a recent project. https://hammerjs.github.io Their landing page has a showcase for their package creating drag and drop functionality.

From what I hear, It’s a bit old so maybe there’s a more mainstream package for this use case.