DEV Community

Cover image for Code as Visual Component
lepinekong
lepinekong

Posted on

3 1

Code as Visual Component

This is the first post of a series to come on Code as Visual Component (NOT Yet Another Visual Programming Language ;)).

After 2 years of research on DX (Developer's eXperience) I'm now sure of the proof of concept for a new Visual Code Design concept. Personal motivations are :

  • I wanted to keep a dev journal while training on the jobs. I don't want to lose time and write much "literature" and it is not precise enough, I want to "picture" code with all its context. Git versioning is mandatory but as for getting a mental model it's not appealing enough.

  • I don't like all the Visual Programming Languages currently : they oblige you to code in a language I have to learn. I want to be able to use all mainstraim and not so mainstream languages (from javascript,...) or frameworks (react,...).

  • I want to capitalize on code by creating code as component or block, a bit like in scratch but for adults. I want to be able to create them quickly and visually so I chose figma platform.

  • I don't want to use drag & drop, it's not very productive, I want to type instead. I want to be able to use it as a complement or integrate with an IDE to be more productive and have clean code by capitalizing with a code knowledge management system.

  • and many more (student and teacher/self-taught to be able to customize and build visual tool and playground thanks to a plugin architecture).

Below is a very simple example of a component to select a node in figma as I'm eating my own dog food as self validation first. But as soon as possible (once I have fixed some pesky details), you'll be able to test also (join more than 1000 subscribers at https://grafcet.online)

Long term I intend to opensource.

AWS GenAI LIVE image

How is generative AI increasing efficiency?

Join AWS GenAI LIVE! to find out how gen AI is reshaping productivity, streamlining processes, and driving innovation.

Learn more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay