10x Faster Visual Programming with Clean Code

#webdev #react #reactnative #html

pxCode Nov 19, 2020 ・2 min read

While developing the Design to Code solution, we want to have an automated solution. We have already developed our first version with around 60–80% correct rate.

But there’re two critical issues.

• It’s still not acceptable even with 90% correctness, because it takes much longer effort to fix the left 10% error. So overall, it’s not fast enough and joyful anymore.

• Even the result works, engineers can’t accept the wrong structure or messy code for further integration. It might work for simple campaign landing pages because it’s only used once and needn’t maintain in the future. But in most cases, it’s not maintainable from the engineers’ perspective.
_

So for these two issues, we find users need a well-structured clean code under full control.

So we re-think the solution — we need to simulate the programming meta-model to visual editing on Canvas — what’s why we call our new way as “Visual Programming.”

--pxCode edit canva--

Editing on the canvas is just like programming; you know what you are doing and own your structure. The grouping of items is the same as the HTML structure, and the editing on Canvas is to set the CSS properties.

You can check out the video on editing details.

pxCode is in beta, and we are excited to invite you to experience the visual programming.

It’s pxCode Challenge Series — [Day 3]
Code a mobile web within 20 minutes.

We choose a mobile web page challenge this time. We make this page within 21 mins. Can you go faster?