REACT DIGITAL GARDEN

What is new in My Digital Garden Last Month — (in Aug 2022)

I will continue to improve Digital Garden Layout and Info Sidebar.

Onur Dayıbaşı

Published in

React Digital Garden

5 min readAug 28, 2022

https://onurdayibasi.dev/ Main Navigation Panel and Layouts are updated.

1. InfoPanel Updates Continue

Info Panel development continues. All applications were refactored with a new info panel design. In the below picture you can see different kinds of Screenshots from different applications.

Usage: It presents a mini-app usage video
Info: It gives general information about mini-app
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

All Videos (Application Videos) added to mini-apps.

2. The filtering capabilities have been upgraded.

Filtering capabilities upgraded. Now digital garden has two kinds of filtering

Context Filtering: Filter according to domain
Date Filtering: Filter according to month

3. Smart Demo Header Buttons

Header Demo Buttons have been updated. Not every button is visible in every application.

Some pages do not support the theme then the Dark/Light theme button becomes invisible.
Some pages do not support the store then the Delete/Clear Store button becomes invisible.

The Application Smart Demo Buttons are listed below;

Home Button: Navigates user to Home Page.
Info Visible Toggle: Hide/Display Information SideBar.. Also you can resize with drag-and-drop
Theme Button: Switch between Dark Theme to Light Theme or opposite
Trash Button: Clear LocalStorage and Redux Store

4. Optimization on NPM Packages.

I analyzed npm optimization techniques. I removed unused packages and I started to refactoring code to switch PrimeReact Components.

MUI and FontAwesome fonts removed and switch to prime fonts
Semantic, MUI UI Components components removed and switch to prime react

5. Experiment on Deployment

I want to extract every demo application working alone. So I try different methods and platforms.

Vercel Deployment: https://develop-simple-calculator.vercel.app/
Netlify Deployment: https://tubular-cucurucho-e39e3a.netlify.app/

AWS S3 and Cloudfront : https://d3jy31tj1gt845.cloudfront.net/reactdigitalgarden/apps/simple-calculator/index.html

6. Visual SQL — (Aggregation And Grouping)

Here you will find a quick demonstration. This is a sample Visual SQL Aggregation and Grouping application.

SQL is a domain-specific language used in programming and designed for managing data held in a relational database management system, or for stream processing in a relational data stream management system.

SQL Selection part can be modified with Aggregation Functions like Sum(), Max() …. or Group Functions like Group()

Aggregation and Grouping Capabilities can be done according to Column Types;

Boolean
Date, Time
String
Number

This application displays column types on the right side.. And according to this type, it allows the users to select the aggregation type.

7. Visual SQL — (Sorting)

Here you will find a quick demonstration. This is a sample Visual SQL Sorting application.

SQL is a domain-specific language used in programming and designed for managing data held in a relational database management system, or for stream processing in a relational data stream management system.

Visual SQL Editor Sorting works with the Selection Column. If selected columns are orderable then it appears on dropdown and can be used for Order By Asc/Desc command.

8. Visual SQL Editor

Here you will find a quick demonstration. This is a sample Visual SQL Editor application.

It allows users to design SQL without coding. It includes below parts;

Query Name
Row Limit
Select Columns
Sort columns
Filters
Execution and SQL Generator.

9. Visual SQL — (Filter Builder3)

Here you will find a quick demonstration. This is a sample Visual SQL Editor Filter Builder 3 application.

This is a new type of FilterBuilder. When a user wants to create a filter or want to edit, it’s easier than before. The Left and right parts are separated from each other, and every text area has different assistance capabilities and validations.

Left Side helps users to select Table Columns
Right Part helps users to define Value. Sometimes it can be a variable and the users want to define it with mustache autocomplete {{}}.

10. Visual SQL Editor2

Here you will find a quick demonstration. This is a sample Visual SQL Editor 2 application.

For example, below code control in two text area.

address.country = 'Turkey'

The FilterEditor has two parts;

the left part contains a related column. It helps the user to select tables and columns and then the operation type. After the user selects these part options, then this part will be locked and only change to another editing process.
the right part allows users to give value with templates like {{ address. country}}.