Photo by Filip Urban on Unsplash

What is new in My Digital Garden Last Month — (in Dec 2021)

Every month I give updates in my digital garden. December, I focus mainly on no-code concepts, flame graphs, and the e2e test with Cypress.

At first, I mentioned I started integrating my side project (digital garden) with Cypress.

Digital Garden Cypress Tests

Here you will find a quick demonstration. This is a sample Dynamic Counters application for NoCode development. In previous applications we have developed a Multiple Counter application in which the Counter count is fixed, and defined by the developer.

In this application, the user can generate new Counters and parts dynamic.. It’s a NoCode Application which allows users to design their own counters.

  • First click the creation button to change mode Creation
  • Then click the Create Counter/Add Store button to create a Counter Parts Generator.
  • The + icon appear on screen. When you click it, it expands and display Counter Parts creation buttons (Inc, Dec, Reset, Displayer)
  • You can click any of these buttons and generate parts of the component
  • If you want you can repeat same steps and generate new counters

Here you will find a quick demonstration. This is a sample Flame Graph Coloring application. A flame graph displays hierarchical data in two-dimensional views.

In this application the user can select different color pallets in the flame graph.

  • Native Colors
  • Color Temperatures
  • Brewer

Here you will find a quick demonstration. This is a sample Multiple Store applications for NoCode development. It provides multiple stores, which you can design with different kind of stores/components.

This application contains 2 types of stores;

  • Counter’s Parts is only clickable and displays the value.. So the user interaction is simple.
  • Say Something’s Parts include a Textbox, an Apply button and a display value part.. It’s more flexible than the counter. So the user can use the dynamic input field.

Here you will find a quick demonstration. his is a sample Flame Graph Auto Sizing application. It provides Flame Graph autosizing according to it's container size. You can try this sample with dragging sidebar.

Here you will find a quick demonstration. This is a sample NoCode IDE. It provides complex IDE feature for NoCode platforms.

Left Border contains;

  • Pages Tab
  • Layouts Tab
  • Styling Component Tab

Right Border contains;

  • Dynamic Store Tab
  • Action Tab
  • Flow Tab

Bottom Border Bottom

  • Console Tab
  • Storyboard Tab
  • Settings Tab

Here you will find a quick demonstration. This is a sample Static Form application. This application contains a TextBox and Apply button. All of them are generated with React + JSX.

Here you will find a quick demonstration. This is a sample Dynamic Form application for NodeCode development. It enables to generate the TextInput and PasswordInput element.

Here you will find a quick demonstration. This is a sample Dynamic Form Block application for NodeCode development. It allows to generate dynamic forms the content of which you can also change later.

Here you will find a quick demonstration. This is a sample “Sorting with Dnd” application. It allows creation of sortable lists by dragging and dropping the items.

Here you will find a quick demonstration. This is a sample “Editable Label” application. It provides a label which can be edited if the user clicks on it. This component has two modes;

  • Label Mode
  • Textfield Mode

Here you will find a quick demonstration. This is a sample Static Address Form application. It provides City, District, and Neighborhood options for selection. It's all data is static and generated on client side.

Here you will find a quick demonstration. This is a sample "Static Address Form and Fetching Dictionary Data" application.

It provides City, District, and Neighborhood options for selection. We mock all data with MSW.js (Mock Service Worker). It simulates server and provides HTTP Restful services. Components fetch the data and use them.

Here you will find a quick demonstration. This is a sample “Static Address Form and Fetching Dictionary Data and Store in Redux” application.

It provides City, District, and Neighborhood options for selection. We mock all data with MSW.js (Mock Service Worker). It simulates server and provides HTTP Restful services. Components fetched data and store it on Redux before using.

Here you will find a quick demonstration. This is a sample “Static Address Form and Abstract Fetching & Store operations” application.

It provides City, District, and Neighborhood options for selection. We mock all data with MSW.js (Mock Service Worker). It simulates server and provides HTTP Restful services. Components use some abstracted parametric generated code, so we can use it NodeCode Infrastructure in future.

Here you will find a quick demonstration. This is a sample “Dynamic Address Form with Dropdown” application.

It allows the user to generate Dynamic Form with;

  • TextField,
  • PasswordField and Dropdown.

Dropdown dynamic generation is a bit harder than TextField, because dropdown needs options data which must load before dropdown display.

With NoCode development you must follow below steps;

  • First define backend fetch actions.
  • Define when this actions run.. (on page load, or any other dropdown change…)
  • Generate dropdown component
  • Bind dropdown component and fetch action result

Let’s continue reading 😃

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

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store