Photo by Filip Urban on Unsplash

REACT DIGITAL GARDEN

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

Every month I give updates in my digital garden. In May, I focused mainly on the code editor and log viewer. The Code editor has autocomplete and highlighting capabilities. Log viewer has remote log file loader and foldable/collapsible mechanics.

Code Editor Simple2

Here you will find a quick demonstration. This is a sample Code Editor application. My goal in this sample to give suggestions to user in {{}} mustache template. When the user enters mustache chars, the autocomplete overlay opens.

https://onurdayibasi.dev/code-editor-simple2

Simple Log Viewer

Here you will find a quick demonstration. This is a sample Log Viewer application. It allows users to display logs in a native way.

https://onurdayibasi.dev/log-viewer-simple

Remote Log Viewer

Here you will find a quick demonstration. This is a sample Remote Log Viewer application. It allows users to display logs from a file which locates on any server or cloud.

Foldable Log Viewer

Here you will find a quick demonstration. This is a sample Foldable Log Viewer application.

It allows users to display logs with foldable/collapsible view.In GitHub, some logs store the parent-child relation. So the user can hide the child logs if not needed or can display the details if needed. It helps the users to see and analyze the logs easily.

Code Editor Validation & Highlighting

Here you will find a quick demonstration. This is a sample Code Editor Validation & Highlighting application.

It allows users to highlight the mustache part with green color. If inside of mustache is not a valid variable then paint with red color.

Code Editor With AutoComplete Item Types

Here you will find a quick demonstration. This is a sample Code Editor With AutoComplete Item Types application.

It allows users to see the AutoComplete Menu Items variable types. It can be

• Boolean
• String
• Number
• Object
• Function

Code Editor ContextMenu Positioning

Here you will find a quick demonstration. This is a sample Code Editor ContextMenu Positioning application.

The AutoComplete Overlay Menu always displays under the text area. If the mustache counts more than one, the user could not understand the relation between the autocomplete easily. The context menu appears near the writing characters, and helps user to associate with mustache-variable easily.

Code Editor AutoComplete with ContextMenu

Here you will find a quick demonstration. This is a sample Code Editor ContextMenu application.

The AutoComplete Overlay Menu always displays under the text area. If mustache count more than one, the user could not understand the relation between autocomplete easily. The context menu appears near the writing characters, and helps user to associate with mustache-variable easily.

Code Coverage Analyse Displayer

Here you will find a quick demonstration. This is a sample Code Editor Coverage Analysis application.

It visualizes the code coverage analysis.

• Green parts coverages are OK..
• Red parts coverages are not OK..
• + chars say that these parts are newly added.

Client-Side Search

Here you will find a quick demonstration. This is a sample Client-Side Search application.

It allows users to input something and it triggers callback with debounce.

Let’s continue reading 😃

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