REACT DIGITAL GARDEN

What is new in My Digital Garden Last Month — (in Sep 2022) — includes 122 Apps

I will continue to improve Digital Garden applications Intelligibility.

In Sep 2022 I did not add any new application to Digital Garden. Instead of developing something new, I thought I should develop digital garden intelligibility.

But How ?

Navigations and Filtering
Informations & Usage Videos

1. Navigations

In My Digital Garden includes 122 applications . Every application has different features and capabilities.

When users enter the digital garden, they need some navigation and filtering. So I added different filtering capabilities.

Search Filter: Let’s write anything in Search Box, then application cards filters according to keyword matching.
Context Filter : UI has different kind of context. Some of them about UI Components, Some of them Styling, Some of them Performance etc… This filters grouping application according to their context. For Example user clicks FlameGraph , the system displays the applications about flame graph

In first displays the basic app → FlameGraph, then develop it add Custom Tooltip → then develop it and add Coloring, Theming and at last → added auto size capability.

Monthly Filter : This filters group applications according to their development data. For example you select 2021.08, only Simple Calculator and Dark Theme apps displays.

2. Informations and Usage Videos

When users click any navigation card, they are redirected to the application pages. Most of pages contains two parts;

Demo Part where the application run.
Info Part where the informations, usage videos and controls exist.

In the above picture you can see left & right side. Right side is information bar which can includes;

Usage: It presents application usage videos.
Info: It gives general information about application
Controls: Extra controls like text box, sliders, and radio button helps users to control the details of mini-apps
Console Viewer: Displays mini-app console.log output.
JSON Viewer: It displays data (result, response, editing) in JSON format
Log-Viewer: It shows logs in LogViewer.
Course : Displays reference links to studies.
Libraries: Displays library links to GitHub or NPM links

122 Application Information Text Updated

Info Panel development completed. All applications were refactored with a new info panel design. We rewrote information texts for every application. It was a long process to fixed Video and Information Text part.

Most of 122 Application Usage Videos Updates

Info Panel development completed. All applications were refactored with a new info panel design. We take videos of applications and put it to right side. You can click on videos and watch fullscreen.

Let’s continue reading 😃

You can find similar samples and writings at this link. If you like this story. Please 👏👏 and share