Live Inline Code Editor

Hi @brryant,

I am speaking on behalf of our team. We have had numerous situations where a live inline code editor would have increase our productivity on top of the amount that has already been increased upon using Webflow.

Here is a few:

  • When we first started out as a Webflow beginner we had a hard time fiddling with the custom code and embeded code … since we can’t see the code structure of our site. Me, as a designer had no idea how to deal with the code and just randomly plugged in snippets of code into my site. My developer would randomly insert js functions to get the effect we want. In the end, resulting in a unorganized and messy code that we had to organize exported, therefore we hosted elsewhere. Yes, we could organize in Webflow by moving the embeds around but this also creates unnecessary classes like the w-embed, as well as being just a workaround.

  • As we got better with Webflow, we started developing more advance sites. Now, as our site gets bigger … we encounter issues like bugs from our embedded code. It would take us a day trying to figure out where that one bug is and how come that didn’t work. (e.g. one scenario is the slider widget. We created a interaction that would resize the slider to fullsize when a button is clicked but somehow this breaks the slider because the slides positions are calculated in pixels while we were trying to do so in percent. Our intention was to avoid using custom code and just use interaction but it was just Wishful thinking with the fact that we can’t edit the code to fix the bug. Therefore our developer had to create a custom slider and create the effect we wanted.) We either exported to find the bug or use chrome dev tools … fix it on the spot and take that fix, plug it into webflow … in hopes of hosting with Webflow. Anyhow, after repeated steps over and over again … it became too tedious and hard to manage. Thus, once again we had to export and host elsewhere.

  • Now, with the CMS launched and I got better at programming … I try to create somewhat Web apps. Using the dynamic functionality to populate our content and creating functions with react.js and angular.js by embeding inline code to our site. This proved to be difficult with Webflow. It resulted in unscaleable and hard to organize code. Of course, a lot of times we could use widgets from 3rd parties instead of “reinventing the wheel” but with so many features on our site we would have numerous services from 3rd parties that:

    • A) would up our cost
    • B) Unprofessional
    • c) Also hard to manage

I hope I don’t sound like I’m abusing the tool or anything. I believe that Webflow could be so much more than a SMB or prototyping tool and not only target the designing industry … even though they are the priority … Webflow could make the best for both worlds and also gain the developing crowd.

  1. They could enable the designers, like myself to learn more about programming.
  2. Developers could also collaborate in the designer ui with the designer, which will keep everything in Webflow … allowing us to host and grow with Webflow.

Therefore, I’m trying to be innovative with the tool in hopes of contributing to making Webflow better.

These are my personal experience and I hope it is informative enough for your team to understand the scenarios.

Cheers,

Diana

1 Like

@brryant Take a look at http://codemirror.net/. This is what Codepen uses for their editor. Chris, Tim and Alex made a podcast on this. Check out their radio blog! They share some great tips while talking about how they implement it all.

Hope this helps!

Cheers,

Diana

also here is an example of a workflow that being able to add code for an element using an inline editor would be beneficial. specifically the section at the bottom about exporting code from a ui kit created in sketch. for instance being able to add a button in webflow and then style it using the inline code editor with the code generated in sketch would be so dope!

the unicorn workflow: The unicorn workflow: design to code with Atomic Design and Sketch

Here’s one more article on the benefits of modular design for good measure lol
How to save time and money with modular design: How to save time and money with modular design | Inside Design Blog

Yah this wold be awesome

1 Like