Photo by NeONBRAND on Unsplash

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.

Here you will find a quick demonstration. This is a sample GitHub Explorer application. It is the combination of two applications (Navigation Card and GitRepoComplexLayout) in the digital garden.

This application contains predefined Navigations Card, and this card navigates users to GitHub Explorer App and loads related repositories files and the user can also see the file content in the Code Editor.

https://onurdayibasi.dev/github-explorer/v1

Here you will find a quick demonstration. This is a sample Navigation Card Edit application. It allows the user to

  • Create a New Navigation Card,
  • Edit a Navigation Card
  • Delete a Navigation Card
https://onurdayibasi.dev/navigation-card-edit

Here you will find a quick demonstration. This is a sample GitHub Explorer Navigation Edit application. This application is extending GitHub Explorer V1 app. The first app only works with predefined repositories.

In this sample, The user also defines repositories and manages navigation cards;

  • Add a New Repository Card
  • Update a Card
  • Delete a Card

We combine 3 components in one application and extends the features.

fx (NavigationCard_Edit, NavigationCard, And GitRepoComplexLayout) 
https://onurdayibasi.dev/github-explorer/v2

Here you will find a quick demonstration. This is a sample Infinite Scroll application. In react ecosystem different kinds of infinite scrolling libraries exist;

In this application I have developed with Native JS and CSS. JavaScript code listens scrolling and checks whether the users access end of the list. If it exists then fetches the next data.

https://onurdayibasi.dev/infinite-scroll/v1

Here you will find a quick demonstration. This is a sample Classic Game Board application. This application provides different game layouts.

  • Some of them are big layout like (tetris),
  • some of them are small (tic tac toe).

All of the old style 80s, 90s games use these kinds of pixel for layouts.

https://onurdayibasi.dev/classic-game-board

Here you will find a quick demonstration. This is a sample Scrollable Game Board application.

Some of the game layout slides are on the x-axis or y-axis.

  • Side Scrolling Games (Super Mario) or
  • Vertical Scrolling Games (River Raid)
https://onurdayibasi.dev/scrollable-game-board

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

In this example, We developed a dynamic FlameGraph Data Generator. It has 2 controls;

  • Dividing Count: Defines x level max partitioning count. (FlameGraph devide every level in random count which are smaller than Dividing Count
  • Level Count: Defines y level max count.
https://onurdayibasi.dev/flame-graph

Here you will find a quick demonstration. This is a sample Flame Graph Tooltip application.

A flame graph displays hierarchical data in two-dimensional views. In this demo, we tried to add a custom tooltip to the flame graph which works when hovering on items.

https://onurdayibasi.dev/flame-graph-custom-tooltip

Single Counter: Here you will find a quick demonstration. This is a sample Single Counter Application. It's very simple sample, the Counter component contains

  • An increment, decrement button
  • and a value displayer

Multiple Counter: Here you will find a quick demonstration. This is a sample Multi Counter Application. We use Counter component and . writes four times again in to code. This is a classical method for React Developers.

<div>
<Counter/>
<Counter/>
<Counter/>
<Counter/>
</div>
Single Counter , Multiple Counter

Here you will find a quick demonstration. This is a sample Counter Parts Application. It provides the user with access to every part of component ingredients;

  • The increase part
  • The decrease part
  • The reset part
  • The value part

This application is meaningful when you want to make a tool which provides users to update every ingredient part of component. If you can select, then you can edit every part.

https://onurdayibasi.dev/counter-parts

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