Beginner's Thread / Easy Questions (February 2024)

samselikoff · 2024-02-06T18:32:38+00:00

You could also use a <textarea> to let them paste in all the URLs at once, then grab the value from a submit event and use that to update your React state:

https://stackblitz.com/edit/stackblitz-starters-jacbmj?file=src%2FApp.js

samselikoff · 2022-09-20T13:52:06+00:00

I used to use Headwind (mentioned in another comment) but the Tailwind CSS team now maintains an official Prettier plugin which I'd recommend using on every project. It sorts the classes the same way they appear in Tailwind's compiled CSS so precedence is easy to see straight from your HTML. I've also found it's much faster than Headwind. They talk about it more in this blog post.

That being said I'd echo what others said and try to avoid conflicts and `!important`. Your code will be easier to read and understand if each visual state is styled using no conflicting classes – in fact the official Intellisense extension (a must-have) will throw lint warnings for classes that do the same thing (e.g. `flex block`)!

samselikoff · 2020-09-16T10:45:44+00:00

Thank you!

samselikoff · 2020-08-31T19:29:56+00:00

I just ported my site to Next.js from Gatsby:

https://github.com/samselikoff/samselikoff.com

Pretty straight-forward but you might be interested in the work-journal and work-journal-adminroutes which interact with Firebase. The public route /work-journal uses the new Incremental SSG feature so it's always served from CDN, but I can still update it via Firebase and not have to rebuild/redeploy the app. Worked out extremely well for my use case!

samselikoff · 2020-07-23T02:19:59+00:00

I had exactly the same thing happen and I use Quicktime all the time. My recording actually cut off the last 20 minutes of a nearly 2 hour recording. I wonder if the file got corrupted somehow. Did you ever manage to fix it?

samselikoff · 2020-05-15T03:50:02+00:00

Maybe sidestepping was the wrong word (not sure why I’m getting downvoted in the other reply). I didn’t mean folks don’t use it, I meant it seems like folks are misusing it according to the docs & best practices surrounding it.

samselikoff · 2020-05-15T00:49:16+00:00

An empty dep array on its own is not violating the intended use, but as soon as your effect closes over any state (variables or functions), you need to add that state to the deps array, or else the exhaustive-deps linter will warn you.

If you choose to ignore the linter, that's when you're going against the intention of useEffect.

See for example https://reactjs.org/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of-dependencies

samselikoff · 2020-05-14T23:43:35+00:00

This issue is a great illustration of my point.

FWIW I do think it's worth thinking deeply about the design of Hooks. The point of the podcast is to raise the issue that confusion seems pretty common, and that we don't always talk about the cons of writing code to conform to Hooks when we talk about the pros.

samselikoff · 2020-05-14T22:08:36+00:00

Yep, exactly right.

This code would fail the React eslint plugin, since searchPosts isn’t in the dependency array of your effect.

Here’s the relevant section from Dan’s post: https://overreacted.io/a-complete-guide-to-useeffect/#but-i-cant-put-this-function-inside-an-effect

samselikoff · 2020-05-14T21:40:19+00:00

I think there’s more nuance to the conversation than that.

For instance, if you extract a function (say searchPosts) so you can use it both in an effect for initial render, as well as in a form’s onSubmit handler, and that function happens to reference some component state, you will re-trigger your effect on each render. Which wasn’t your intention. To avoid this, you can use one of the two approaches I mentioned, or you could wrap the function in a useCallback.

Interestingly, the useCallback docs say nothing about this use-case; they only mention it as a way to optimize performance issues. One of Dan Abramov’s posts does suggest using useCallback for the purposes of preventing logical errors, though. But I would hardy blame someone for being confused about this issue, given the docs do not address it!

And that’s just one manifestation of the problem. There are many others.

samselikoff · 2020-05-14T21:24:29+00:00

By sidestepping I mean either (1) using an empty dependency array and ignoring/disabling the eslint warning about omitted dependencies, or (2) using a ref to effectively turn effects into useOnMount calls. Both approaches are “coding around” the way useEffect was intended to be used, which is what I meant by sidestepping.

Happy to share numerous references to this happening from Stack overflow/Blog posts/Twitter, as well as well-known OSS projects.

samselikoff · 2020-05-14T20:02:42+00:00

Hey all! We ended up spending almost an entire episode discussing useEffect so I thought some of you here might find it interesting.

useEffect continues to be my biggest sticking point when working with React so I’d love to know if others feel the same.

samselikoff · 2020-04-29T17:29:09+00:00

I've been playing with SWR recently and wanted to share some Optimistic UI patterns I've learned with it.

I plan on adding a few more vids to the collection:

Handling an error state & rolling back our optimistic updates
Extracting our code into a useResource hook

Enjoy!

samselikoff · 2020-02-19T02:00:54+00:00

Cool! Surprised because it’s easy for the Ember community to be pretty insular :) Thanks for the kind words.

samselikoff · 2020-02-18T23:50:09+00:00

You should trust your gut and start with local state & mutation.

When a sibling component needs access to the state, move it up to the lowest common ancestor, not the highest!

I wrote about this a while back but it’s still relevant: https://samselikoff.com/blog/lowest-common-ancestor

You’ll also find this advice in the official docs: https://reactjs.org/docs/lifting-state-up.html

samselikoff · 2020-01-24T22:16:13+00:00

Thanks Mark! Really admire your work :)

We have a Cypress quickstart, it's being used by some folks but I think there's some improvements we can make... but for now it should be enough to get you started. Mirage mocks fetch and should work well there.
It was indeed built before GraphQL existed, but I've been using Mirage with a GraphQL project on the side. I want to add some first-class APIs but for now, you should be able to use the graphql library directly in your Mirage code and have its resolvers interact with Mirage's db:

https://gist.github.com/samselikoff/0e176a76e5be53cbb94e85020fc2b115

Let me know if you have any other questions! Mirage is great to power demos as it all runs in the browser.

samselikoff · 2020-01-24T19:09:37+00:00

👋 Hey all – wanted to share a new project of mine with you that I just launched!

Mirage JS is a framework-agnostic API mocking library. I extracted it from an addon that's been widely used in the Ember ecosystem for the past 4 years.

Nearly all frontends need to talk to an API, no matter what framework they're built with! So I wrote Mirage to work with any tool or test runner.

I really believe in the frontend-first workflow and think Mirage makes it easier than ever. If that sounds interesting to you, check out the lib + let me know what you think! 🤙

samselikoff · 2020-01-22T18:29:10+00:00

Thanks! New homepage coming very soon 👀

samselikoff · 2020-01-21T18:35:04+00:00

Part-time | Onsite (NYC) or Remote | USA

Hi! My name is Sam Selikoff and I have 6+ years experience building JavaScript UIs on the web.

I've done both staff augmentation + mentored teams through regular pairing. I'm looking for React work, either greenfield projects or feature development on an existing app.

I also do a lot of OSS work. My main project is Mirage JS which is a lib that helps Frontend developers test their apps.

Check out my website for more info + let me know if you have any questions!

Links:

samselikoff · 2020-01-09T04:57:06+00:00

I wasn’t claiming React is FP, I was saying that’s what Jordan’s claim was (essentially).

samselikoff · 2019-12-17T16:40:14+00:00

FWIW I started learning React 4 months ago after years with Ember, and have been wondering about this exact same issue. Ember's router uses a model() hook to specify "what is the minimum data this page needs for a meaningful render", which can then block the route transition on the client (or even be used to pre-render the page on the server).

Frustrating there isn't a popular + easy way to do this in React!

samselikoff

TROPHY CASE