Joined August 2022
- Tweets 362
- Following 87
- Followers 29
- Likes 172
32 Photos and videos
22 Jul 2024
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: producthunt.com/posts/kempo
3
5
153
Sai Hari retweeted
19 Jun 2024
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 β‘οΈ kempo.io/
1
3
10
1,310
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
26 Dec 2023
Happy Holidays!πToday @algoraio crossed $100,000 rewarded to #opensource contributors!
Thank you guys πͺ @jdegoes @JNYBGR @peer_rich @maverickdotdev @tusharmath @generall931 @martindonadieu @robo_skills @ElTimuro @MicheleRivaCode @aidenybai @theJayKhatri @eaytin @JosephJacks_
2
8
1,645
3
5
330
25 May 2023
π‘ 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
ALT An example of incorrectly placing a key on a nested React component
94
18 May 2023
πͺ 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
58
17 May 2023
π‘ 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
ALT An example of using a bad key for a React component. In this case we're using the random method on the Math module for the component key.
1
1
1
97
12 May 2023
β‘οΈ 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
ALT An example of using a ternary operator to conditionally render JSX.
1
1
211
10 May 2023
πͺ Remember the React JSX Rule β close all JSX elements.
Unlike HTML, in JSX you need to explicitly close your tags.
For most elements like a div, the syntax is the same.
For self-closing tags, the syntax is a bit different.
For example: use <img /> instead of just <img>
29
9 May 2023
π‘ React Rendering Tip
It's important to assign unique keys to each item in a list of JSX elements.
That said, these keys only need to be unique among sibling elements.
Having duplicate keys in separate JSX trees is perfectly acceptable.
#reactjs
#typescript
#webdevelopment
ALT An example of having duplicate keys across two unique lists of JSX in React.
34
4 May 2023
React doesn't render most falsy values.
But, the number 0 is an exception.
Why is that?
There are good reasons for wanting to render 0. For example, you might want to show a countdown.
To account for this, React renders all numbers.
In the example, React renders the 0:
ALT An example of React rendering the number 0 even though it's a falsy value.
30
2 May 2023
πͺ Remember the React JSX Rule β always return 1 root element.
Why?
β JavaScript functions can only return 1 value.
β JSX is just a fancy way of writing the React.createElement function.
β If you try to return 2 elements, you're basically trying to call createElement twice.
ALT An example of why trying to return two root JSX elements won't work in JavaScript
31
1 May 2023
π‘ React Rendering Tip
Always assign unique keys when mapping data to JSX.
This helps React identify elements and update the DOM accurately.
Poorly chosen keys can cause subtle bugs that lead to incorrect updates.
#reactjs
#javascript
#typescript
#webdevelopment
1
1
75
26 Apr 2023
β‘οΈ React Rendering Tip
React doesn't render most falsy values.
But, what is a falsy value?
A falsy value is just a value that would be considered false when converted to a boolean.
You can use this to your advantage by conditionally rendering JSX using logical operators:
ALT An example of using a logical and operator to conditionally render JSX
24
25 Apr 2023
Creating dynamic lists in React is simple.
All you need are standard JavaScript array methods.
Take a list of data and map each item into JSX elements:
#reactjs
#javascript
#typescript
#webdevelopment
ALT An example of mapping data to JSX in React
3
43
24 Apr 2023
So how does React turns JSX into HTML?
It doesn't, at least not directly.
Here's what happens:
1. Build tools convert JSX into function calls.
2. These functions return objects that describe the HTML.
3. React uses standard DOM APIs to convert the objects into HTML.
15
17 Feb 2023
π‘ Flat Code Tip - How to Write Readable Code
Use guard clauses to rule out error paths early
#softwaredevelopment
#programming
#coding
ALT An example of using a guard clause to rule out error paths in a function. This leads to cleaner code because it keeps your code to the left.
1
2
50
15 Feb 2023
JavaScript
β’ Tedious to understand
β’ Difficult to refactor
β’ Poor IntelliSense
TypeScript
β’ Powerful IntelliSense
β’ Documented code via types
β’ Easy to refactor with the compiler
#javascript
#typescript
#webdevelopment
21
9 Feb 2023
π‘ Flat Code Tip - How to Write Readable Code
Return conditions directly instead of `true` or `false` booleans
#softwaredevelopment
#programming
#coding
ALT An example of writing cleaner code by returning a condition from a function instead of a true or false boolean.
18
7 Feb 2023
Itβs safer to refactor TS code than JS code
In this example, the function args have been grouped into a single arg.
In the JS version, you have to carefully validate each instance of the function.
In the TS version, the compiler will let you know when you've made a mistake.
ALT An example of how TypeScript is easier to refactor than JavaScript because the compiler warns you of errors.
17