Sai Hari

Building, teaching, and learning through code.

Level 4 Vim Sommelier | I think, therefore I program

[Sai Hari @TheSSHGuy]

@kai_h @thorstenball I’m not even sure how to begin to rationalize this 💀

[Sai Hari @TheSSHGuy]

@mattpocockuk Yo this is cool. Didn’t know you could make a type that accepts any string but also a list of defined strings for autocomplete support. There’s a few times this would have been really helpful!

[Sai Hari @TheSSHGuy]

@thecoockoo @DavidKPiano Having 1 variable represent multiple states is a great idea and makes things more manageable.

I do this sometimes when I need to conditionally render things as well.

For example, if I have multiple modals on a page, their state is represented by 1 variable with different types.

[Sai Hari @TheSSHGuy]

@wesbos This is really cool. Will make it easier to run basic scripts without having to install something else!

[Sai Hari @TheSSHGuy]

@levelsio @pubity That’s awesome! Just saw Luggage Losers get hunted by someone else on Product Hunt too, so definitely can see it get picked up.

[Sai Hari @TheSSHGuy]

@danestves @kentcdodds This is cool! I’ve messed with Clerk a little bit, but didn’t realize you could do this.

[Sai Hari @TheSSHGuy]

@flyosity @kentcdodds Yeah this is my impression as well.

Something going wrong in your database vs other parts of your app can be a bit more stressful I imagine, so handing off the responsibility can be enticing.

[Sai Hari @TheSSHGuy]

@SaidAitmbarek @codesandbox Awesome! Thanks @SaidAitmbarek. And yeah, I submitted it on MicroLaunch the other day! It should be in the queue!

[Sai Hari @TheSSHGuy]

Hey guys, I just launched Kempo on @ProductHunt!

It's an app that lets you build customized code playgrounds powered by @codesandbox's Sandpack package.

You can check it out here: https://t.co/0HwEO5ItgH

[Sai Hari @TheSSHGuy]

@codesandbox Thank you for the shoutout @codesandbox team!

[CodeSandbox @codesandbox]

Today’s community spotlight goes to… Kempo: a tool to build your code playgrounds using Sandpack 🌟

Kudos to @TheSSHGuy for making it even easier to display live-running code examples, especially in content platforms like Hashnode.

Try it out ➡️ https://t.co/4zcNpHbipB

[Sai Hari @TheSSHGuy]

@michael_kove @t3dotgg Agreed! Usually, the less nested the code the better.

[Sai Hari @TheSSHGuy]

@codesandbox's Sandpack package has a lot to offer that you may not know about.

If you're interested, I wrote about how to get the most out of Sandpack's Preview component here: https://t.co/kXoNfuUufF

#ReactJS #WebDev #JavaScript

[Sai Hari @TheSSHGuy]

@codesandbox's Sandpack package is 🔥. It's a great way to introduce customized code playgrounds in your blog or documentation.

If you're interested, I wrote about how it works and how to use it here: https://t.co/RMqP9QNA0b

[zaf @whizzaf]

happy holidays! ✨

congrats to all 282 contributors & special thanks to 👑 @rishi_raj_jain_ @n3o773 @rjacksonm1 @TheSSHGuy @ayewo_ @kafLamed @just_moh_it

shoutout to the awesome tech we use everyday 💻 @vercel @supabase @DrizzleORM @shadcn @trpcio @t3dotgg @triggerdotdev

[Algora @algoraio]

✨ @triggerdotdev

contributors shown @rishi_raj_jain_ @chigalakingsley @kafLamed @TheSSHGuy

[Sai Hari @TheSSHGuy]

💡 React Rendering Tip

When mapping data to JSX, put your key on the top-level element.

React won't search through the child components for the key,

which means nested keys won't impact the rendering logic.

#reactjs
#javascript
#typescript
#webdevelopment

[Sai Hari @TheSSHGuy]

💪 Remember the React JSX Rule — most attributes use camelCase

Variable names can't have dashes or be reserved keywords, so to make destructuring easier, JSX attributes are renamed

→ font-weight turns into fontWeight
→ class changes into className
→ tabindex becomes tabIndex

[Sai Hari @TheSSHGuy]

💡 React Rendering Tip

Make sure you use stable keys by default for your React components.

Using keys that change every time a component re-renders is inefficient.

It forces React to destroy and recreate the component instead of updating it.

#reactjs
#webdevelopment

[Sai Hari @TheSSHGuy]

⚡️ React Rendering Tip

If you want to conditionally render JSX, an if/else statement may not always be effective.

You can't nest them in curly brackets because they can't be used as values.

Instead, you can solve this by using a ternary operator:

#reactjs
#webdev