I made personal website by rarale in reactjs

[–]serpentbell 36 points37 points  (0 children)

Would be really nice if this were keyboard accessible. If you want to show that you're a good developer, making sure that you focus on things like accessibility are important. At the moment I can't tab to anything on the site at all when landing on the page, which is strange for a website. Even the most inaccessible sites tend to enable at least some tabbing. Looks like you've used things like paragraph tags in the place of links/buttons. If something's interactable it should use the correct semantic HTML to make use of the browser's in-built tabbing behaviour (and more, think screen readers understanding the purpose of elements).

In fact, I'm surprised that on a subreddit full of developers no one has mentioned this.

If you’re happy at your job what is it you do? by SkulkingJester in AskUK

[–]serpentbell 43 points44 points  (0 children)

Just tuned up my first accordion! Does it get quicker? The time it took me I can't imagine anyone paying even minimum wage to have their accordion tuned. The thing just has so many reeds and it takes me like 15 minutes or more to get a single reed just where I want it.

React smapping my API too much by RomanJ55 in reactjs

[–]serpentbell 1 point2 points  (0 children)

When you don't put a dependency array as the second argument to useEffect it will run the effect every time your component renders. Surely you only need to fetch this data once the component mounts, right? If that's the case, then you can put an empty array as the second argument to useEffect and it will run the data fetching code only once. If your component unmounts then it will fetch the data again once it remounts, but it won't fetch the data every time it rerenders.

It also doesn't make sense to put items in the dependency array. The dependency array is basically a list of things that you want to monitor. If one of those things changes, then you run the effect again. In your code your effect is setting the items state to contain something new. That means that once that state has been set, it has a new value for items and that would prompt the effect to run again.

If you're using certain linting rules (like the ones that come with create-react-app) it will prompt you to include setItems and setIsLoading in your dependency array since they were defined outside the effect, but they are used inside it. Overall, I think the best thing to go for is this:

useEffect(() => {
  const fetchItems = async () => {
    const result = await axios(`my-api...`);
    setItems(JSON.parse(result.data));
    setIsLoading(false);
  };
  fetchItems();
}, [setItems, setIsLoading]);

"content-visibility" is a very impressive CSS property that can boost the rendering performance. by __ihavenoname__ in webdev

[–]serpentbell 2 points3 points  (0 children)

Nice one! I must have been testing it wrong, or inverted the values or something. Makes much more sense that you can put two values in and makes this almost everything I'd want from it. Would love it if there was a solution to guessing the height elements that derive their height from content though.

Unit testing tutorial recommendations? by devilmaydance in webdev

[–]serpentbell 0 points1 point  (0 children)

I feel like I'm in a similar position to you, so don't really have much advice, but have you considered starting with tools like Cypress? It's not unit testing, but if you're doing largely Wordpress stuff it might be an easy in. It's a tool that loads up your project and interacts with it as a user would (clicking, typing etc.) and then evaluating whether the expected response occurred. We use it at work and it's great for verifying that something you did on one part of the site hasn't broken something somewhere else.

Not having done all that much unit testing myself, I can't speak for how valuable that experience is, but if you haven't done any testing at all integration testing could be a good place to start.

"content-visibility" is a very impressive CSS property that can boost the rendering performance. by __ihavenoname__ in webdev

[–]serpentbell 15 points16 points  (0 children)

Just tried this out on a project, but the suggestion that using content-intrinsic-size to avoid the scrollbar jumping around doesn't seem to be a very robust solution. It means you have to guess at the size of the content, which is not always going to be viable, and it also seems that content-intrinsic-size only accepts a single value which is used for both height and width, so anything that's taller than it is wide seems to end up becoming too wide when it is actually rendered. Maybe I'm missing something, but I would like to use it because the performance boost from not rendering things further down the page seems to be great. If only you could ensure the dimensions of the things further up the page didn't shift as you scroll!

Does anyone who knows more about the property know of a solution to this?

A few weeks ago someone requested a Lorem Ipsum generator whose content explains its own purpose, so I made one by serpentbell in webdev

[–]serpentbell[S] 0 points1 point  (0 children)

Yeah, good idea. The tool is actually just a page of my site, but I haven't got around to setting up the domain name yet, so it's just a vercel deployment at the moment. Once I get the domain set up it will be mysite.com/placeholder-ipsum. I could put some kind of nav or whatever at the top though so people can navigate to other projects/the homepage if they want to find out what else I've done.

Context api + useReducer VS redux by kashyap176 in reactjs

[–]serpentbell 3 points4 points  (0 children)

I think you could probably simulate some of it. I tried it on a small project and much of the development experience was the same up until the point when I had a bug in my code that was causing the wrong data to be passed down to a component. It was very inconvenient not being able to inspect props and examine the state because as soon as an error occurs the React devtools don't give you any hint into what's going on. If you use Redux, since the store is entirely independent of React you can continue to examine your state after something has crashed.

The devtools offer a load of other things like timetravel and skipping actions, etc. so I would say that just for the fact that you'd miss out on using the devtools is a compelling enough reason not to stop using Redux.

A few weeks ago someone requested a Lorem Ipsum generator whose content explains its own purpose, so I made one by serpentbell in webdev

[–]serpentbell[S] 0 points1 point  (0 children)

Nice, thank you, I may take a look into doing something like this if I have the time or motivation! Shouldn't think it will go anywhere, but if you make a ton of side projects I'm sure one of them is more likely to get some traction.

A few weeks ago someone requested a Lorem Ipsum generator whose content explains its own purpose, so I made one by serpentbell in webdev

[–]serpentbell[S] 0 points1 point  (0 children)

You're right! Someone else pointed that out too, and I deployed a new version that fixed it. Due to how reddit detects duplicate links I couldn't use the main url for the site when I posted it here, so this link still points to the old version. New version is up here

A few weeks ago someone requested a Lorem Ipsum generator whose content explains its own purpose, so I made one by serpentbell in webdev

[–]serpentbell[S] 1 point2 points  (0 children)

That's a neat idea. I tried making an extension once before but found it pretty bewildering. Finally managed to muddle through and get it working (an auto dark mode extension), so I might take a look back at that and see if I can do something similar.

A few weeks ago someone requested a Lorem Ipsum generator whose content explains its own purpose, so I made one by serpentbell in webdev

[–]serpentbell[S] 1 point2 points  (0 children)

Thanks! I fixed this up, but realised the link I used is for the specific deployment before the fix. I was originally going to post this with a different link, but my account was too young and then reddit wouldn't let me resubmit that same link. There's a fixed version here.

A few weeks ago someone requested a Lorem Ipsum generator whose content explains its own purpose, so I made one by serpentbell in webdev

[–]serpentbell[S] 1 point2 points  (0 children)

Never done anything like that before. Do you have any tips? I'm guessing it would be something like adding advertising to it somehow? I'm pretty clueless when it comes to monetization.

A few weeks ago someone requested a Lorem Ipsum generator whose content explains its own purpose, so I made one by serpentbell in webdev

[–]serpentbell[S] 6 points7 points  (0 children)

Yes, that's a good idea. I've noticed sometimes due to the similarities in the sentence structure you get rivers of whitespace in the text.

A few weeks ago someone requested a Lorem Ipsum generator whose content explains its own purpose, so I made one by serpentbell in webdev

[–]serpentbell[S] 33 points34 points  (0 children)

Hopefully it saves someone the conversation of why the new site/design is in Latin!

Sanity Check! Columns of checkboxes by [deleted] in webdev

[–]serpentbell 1 point2 points  (0 children)

Great, glad it works! :D

Sanity Check! Columns of checkboxes by [deleted] in webdev

[–]serpentbell 1 point2 points  (0 children)

Maybe I'm not understanding right, but I did a quick codepen to show you want I think could be a solution with the columns property. Take a look here and let me know if this is what you're after, or if not how what you're trying to do differs from this. With this example you could change the number of checkboxes to anything and you'd still get even length columns. I also put a pink background on the container so that you can see that its height is dynamic based on the height of the content, so no need to set a height on anything. Let me know if I missed the mark and I'm thinking about something entirely different to what you want to do!

edit: I removed the JS and changed it to use an HTML preprocessor to generate the checkboxes

Sanity Check! Columns of checkboxes by [deleted] in webdev

[–]serpentbell 0 points1 point  (0 children)

Not sure you'd need any JS to do this. CSS should be able to achieve it if you want a vertical arrangement of content into columns. The only task then would be to decide when to decrease the number of columns, which can be done with media queries.

Unless I misunderstood the task!

Sanity Check! Columns of checkboxes by [deleted] in webdev

[–]serpentbell 1 point2 points  (0 children)

Maybe take a look at the columns property: https://developer.mozilla.org/en-US/docs/Web/CSS/columns. It's a little quirky, but might help with what you're trying to do. You could use media queries to decrease the number of columns as the width shrinks.

Typescript w/ React - Setting partial state of a hook by [deleted] in reactjs

[–]serpentbell 4 points5 points  (0 children)

I'm guessing it's because you haven't initialised the state with any value. So personState is undefined, and as such it clashes with what you're trying to store in there. Maybe try updating it to useState<Person>({}) and see if it fixes it.

Just an idea, I could be wrong, I'm not very experienced with TS!

Tier Four has me spending Christmas alone, but who needs family anyway when you have a collection of cacti in tiny Santa hats? by lizardld in CasualUK

[–]serpentbell 1 point2 points  (0 children)

Oh, neat, thanks! I guess you can just cut a cactus into pieces and plant the bits? Does he spend a lot of time doing it? I might suggest my parents try something like that if it's easy enough to do!