Nov 28, 2021
REACT DIGITAL GARDEN
What is new in My Digital Garden Last Month — (in Nov 2021)
Every month I give updates in my digital garden. November productivity is mainly combining more than two or more components in an experiment.
1. GitHub Explorer V1
I try to combine Navigation Card and GitRepoComplexLayout in a garden plant. These navigation cards hold links to public GitHub Repos to open with our plant.
2. Navigation Card Edit
After I developed GitHub Explorer V1, I think users want to change or add new navigation cards for new Github Repositories. First, we need to manage NavigationCards, so I developed NavigationCardEdit widget to make the below actions;
- Add New Navigation Card
- Update Navigation Card
- Delete Navigation Card
3. GitHub Explorer V2
After NavigationCard Edit capability, I combine 3 digital plants and build GitHub Favorite Plant.
fx (NavigationCard_Edit, NavigationCard, And GitRepoComplexLayout) 
4. Infinite Scroll
In react, an ecosystem different kinds of infinite scrolling libraries exist like React-Infinite-Scroll or React Virtualized. But in this demo, I tried to develop with Native JS and CSS
5. Classic Game Board
Every game has a layout. Some of them are big layout like (tetris) some of them are small(tic tac toe). All of old style 80s, 90s games uses pixel for layouts. In this example I tried to build different games layouts.
6. Scrollable Game Board
Some of the game layout slides are on the x-axis or y-axis. We define this kind of games Side Scrolling Games (For example Super Mario) or Vertical Scrolling Games (For example River Raid)
7. Flame Graph
A flame graph displays hierarchical data in two-dimensional views. In this example, I developed a dynamic FlameGraph Data Generator.
8. Flame Graph With Custom Tooltip
In this demo, we tried to add a custom tooltip to the flame graph when using hover on items.
9. Static Counter
Single Counter , Multiple Counter
10. Counter Parts
The counter widget has different parts, this demo gives users access and edit every component below;
- increase
- decrease
- reset
- value
Past Updates
Let’s continue reading 😃
You can find similar samples and writings at this link. If you like this story. Please 👏👏 and share
